|  | @@ -1,11 +1,13 @@
 | 
	
		
			
				|  |  |  'use client'
 | 
	
		
			
				|  |  |  import type { FC } from 'react'
 | 
	
		
			
				|  |  | -import React, { useState, useEffect } from 'react'
 | 
	
		
			
				|  |  | +import React, { useEffect, useState } from 'react'
 | 
	
		
			
				|  |  |  import { PencilIcon } from '@heroicons/react/24/outline'
 | 
	
		
			
				|  |  |  import { useTranslation } from 'react-i18next'
 | 
	
		
			
				|  |  |  import { useContext } from 'use-context-selector'
 | 
	
		
			
				|  |  |  import { get } from 'lodash-es'
 | 
	
		
			
				|  |  |  import cn from 'classnames'
 | 
	
		
			
				|  |  | +import { DocumentContext } from '../index'
 | 
	
		
			
				|  |  | +import s from './style.module.css'
 | 
	
		
			
				|  |  |  import Input from '@/app/components/base/input'
 | 
	
		
			
				|  |  |  import Button from '@/app/components/base/button'
 | 
	
		
			
				|  |  |  import Tooltip from '@/app/components/base/tooltip'
 | 
	
	
		
			
				|  | @@ -18,12 +20,10 @@ import AutoHeightTextarea from '@/app/components/base/auto-height-textarea'
 | 
	
		
			
				|  |  |  import { asyncRunSafe, getTextWidthWithCanvas } from '@/utils'
 | 
	
		
			
				|  |  |  import { modifyDocMetadata } from '@/service/datasets'
 | 
	
		
			
				|  |  |  import type { CommonResponse } from '@/models/common'
 | 
	
		
			
				|  |  | -import type { FullDocumentDetail, DocType } from '@/models/datasets'
 | 
	
		
			
				|  |  | +import type { DocType, FullDocumentDetail } from '@/models/datasets'
 | 
	
		
			
				|  |  |  import { CUSTOMIZABLE_DOC_TYPES } from '@/models/datasets'
 | 
	
		
			
				|  |  | -import type { metadataType, inputType } from '@/hooks/use-metadata'
 | 
	
		
			
				|  |  | -import { useMetadataMap, useLanguages, useBookCategories, usePersonalDocCategories, useBusinessDocCategories } from '@/hooks/use-metadata'
 | 
	
		
			
				|  |  | -import { DocumentContext } from '../index'
 | 
	
		
			
				|  |  | -import s from './style.module.css'
 | 
	
		
			
				|  |  | +import type { inputType, metadataType } from '@/hooks/use-metadata'
 | 
	
		
			
				|  |  | +import { useBookCategories, useBusinessDocCategories, useLanguages, useMetadataMap, usePersonalDocCategories } from '@/hooks/use-metadata'
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  const map2Options = (map: { [key: string]: string }) => {
 | 
	
		
			
				|  |  |    return Object.keys(map).map(key => ({ value: key, name: map[key] }))
 | 
	
	
		
			
				|  | @@ -48,7 +48,7 @@ export const FieldInfo: FC<IFieldInfoProps> = ({
 | 
	
		
			
				|  |  |    showEdit = false,
 | 
	
		
			
				|  |  |    inputType = 'input',
 | 
	
		
			
				|  |  |    selectOptions = [],
 | 
	
		
			
				|  |  | -  onUpdate
 | 
	
		
			
				|  |  | +  onUpdate,
 | 
	
		
			
				|  |  |  }) => {
 | 
	
		
			
				|  |  |    const { t } = useTranslation()
 | 
	
		
			
				|  |  |    const textNeedWrap = getTextWidthWithCanvas(displayedValue) > 190
 | 
	
	
		
			
				|  | @@ -56,7 +56,7 @@ export const FieldInfo: FC<IFieldInfoProps> = ({
 | 
	
		
			
				|  |  |    const readAlignTop = !showEdit && textNeedWrap
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |    return (
 | 
	
		
			
				|  |  | -    <div className={cn(s.fieldInfo, editAlignTop && `!items-start`, readAlignTop && '!items-start pt-1')}>
 | 
	
		
			
				|  |  | +    <div className={cn(s.fieldInfo, editAlignTop && '!items-start', readAlignTop && '!items-start pt-1')}>
 | 
	
		
			
				|  |  |        <div className={cn(s.label, editAlignTop && 'pt-1')}>{label}</div>
 | 
	
		
			
				|  |  |        <div className={s.value}>
 | 
	
		
			
				|  |  |          {!showEdit
 | 
	
	
		
			
				|  | @@ -132,13 +132,15 @@ const Metadata: FC<IMetadataProps> = ({ docDetail, loading, onUpdate }) => {
 | 
	
		
			
				|  |  |    const [editStatus, setEditStatus] = useState(!doc_type) // if no documentType, in editing status by default
 | 
	
		
			
				|  |  |    // the initial values are according to the documentType
 | 
	
		
			
				|  |  |    const [metadataParams, setMetadataParams] = useState<{
 | 
	
		
			
				|  |  | -    documentType?: DocType | '';
 | 
	
		
			
				|  |  | +    documentType?: DocType | ''
 | 
	
		
			
				|  |  |      metadata: { [key: string]: string }
 | 
	
		
			
				|  |  |    }>(
 | 
	
		
			
				|  |  | -    doc_type ? {
 | 
	
		
			
				|  |  | -      documentType: doc_type,
 | 
	
		
			
				|  |  | -      metadata: doc_metadata || {}
 | 
	
		
			
				|  |  | -    } : { metadata: {} })
 | 
	
		
			
				|  |  | +    doc_type
 | 
	
		
			
				|  |  | +      ? {
 | 
	
		
			
				|  |  | +        documentType: doc_type,
 | 
	
		
			
				|  |  | +        metadata: doc_metadata || {},
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +      : { metadata: {} })
 | 
	
		
			
				|  |  |    const [showDocTypes, setShowDocTypes] = useState(!doc_type) // whether show doc types
 | 
	
		
			
				|  |  |    const [tempDocType, setTempDocType] = useState<DocType | undefined | ''>('') // for remember icon click
 | 
	
		
			
				|  |  |    const [saveLoading, setSaveLoading] = useState(false)
 | 
	
	
		
			
				|  | @@ -153,17 +155,18 @@ const Metadata: FC<IMetadataProps> = ({ docDetail, loading, onUpdate }) => {
 | 
	
		
			
				|  |  |        setTempDocType(docDetail?.doc_type)
 | 
	
		
			
				|  |  |        setMetadataParams({
 | 
	
		
			
				|  |  |          documentType: docDetail?.doc_type,
 | 
	
		
			
				|  |  | -        metadata: docDetail?.doc_metadata || {}
 | 
	
		
			
				|  |  | +        metadata: docDetail?.doc_metadata || {},
 | 
	
		
			
				|  |  |        })
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  |    }, [docDetail?.doc_type])
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |    // confirm doc type
 | 
	
		
			
				|  |  |    const confirmDocType = () => {
 | 
	
		
			
				|  |  | -    if (!tempDocType) return;
 | 
	
		
			
				|  |  | +    if (!tempDocType)
 | 
	
		
			
				|  |  | +      return
 | 
	
		
			
				|  |  |      setMetadataParams({
 | 
	
		
			
				|  |  |        documentType: tempDocType,
 | 
	
		
			
				|  |  | -      metadata: tempDocType === metadataParams.documentType ? metadataParams.metadata : {} // change doc type, clear metadata
 | 
	
		
			
				|  |  | +      metadata: tempDocType === metadataParams.documentType ? metadataParams.metadata : {}, // change doc type, clear metadata
 | 
	
		
			
				|  |  |      })
 | 
	
		
			
				|  |  |      setEditStatus(true)
 | 
	
		
			
				|  |  |      setShowDocTypes(false)
 | 
	
	
		
			
				|  | @@ -194,9 +197,9 @@ const Metadata: FC<IMetadataProps> = ({ docDetail, loading, onUpdate }) => {
 | 
	
		
			
				|  |  |              <span className={s.changeTip}>{t('datasetDocuments.metadata.docTypeSelectWarning')}</span>
 | 
	
		
			
				|  |  |            </>}
 | 
	
		
			
				|  |  |            <Radio.Group value={tempDocType ?? documentType} onChange={setTempDocType} className={s.radioGroup}>
 | 
	
		
			
				|  |  | -            {CUSTOMIZABLE_DOC_TYPES.map((type) => {
 | 
	
		
			
				|  |  | +            {CUSTOMIZABLE_DOC_TYPES.map((type, index) => {
 | 
	
		
			
				|  |  |                const currValue = tempDocType ?? documentType
 | 
	
		
			
				|  |  | -              return <Radio value={type} className={`${s.radio} ${currValue === type ? 'shadow-none' : ''}`}>
 | 
	
		
			
				|  |  | +              return <Radio key={index} value={type} className={`${s.radio} ${currValue === type ? 'shadow-none' : ''}`}>
 | 
	
		
			
				|  |  |                  <IconButton
 | 
	
		
			
				|  |  |                    type={type}
 | 
	
		
			
				|  |  |                    isChecked={currValue === type}
 | 
	
	
		
			
				|  | @@ -223,25 +226,30 @@ const Metadata: FC<IMetadataProps> = ({ docDetail, loading, onUpdate }) => {
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |    // show metadata info and edit
 | 
	
		
			
				|  |  |    const renderFieldInfos = ({ mainField = 'book', canEdit }: { mainField?: metadataType | ''; canEdit?: boolean }) => {
 | 
	
		
			
				|  |  | -    if (!mainField) return null
 | 
	
		
			
				|  |  | +    if (!mainField)
 | 
	
		
			
				|  |  | +      return null
 | 
	
		
			
				|  |  |      const fieldMap = metadataMap[mainField]?.subFieldsMap
 | 
	
		
			
				|  |  |      const sourceData = ['originInfo', 'technicalParameters'].includes(mainField) ? docDetail : metadataParams.metadata
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |      const getTargetMap = (field: string) => {
 | 
	
		
			
				|  |  | -      if (field === 'language') return languageMap
 | 
	
		
			
				|  |  | -      if (field === 'category' && mainField === 'book') {
 | 
	
		
			
				|  |  | +      if (field === 'language')
 | 
	
		
			
				|  |  | +        return languageMap
 | 
	
		
			
				|  |  | +      if (field === 'category' && mainField === 'book')
 | 
	
		
			
				|  |  |          return bookCategoryMap
 | 
	
		
			
				|  |  | -      }
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  |        if (field === 'document_type') {
 | 
	
		
			
				|  |  | -        if (mainField === 'personal_document') return personalDocCategoryMap
 | 
	
		
			
				|  |  | -        if (mainField === 'business_document') return businessDocCategoryMap
 | 
	
		
			
				|  |  | +        if (mainField === 'personal_document')
 | 
	
		
			
				|  |  | +          return personalDocCategoryMap
 | 
	
		
			
				|  |  | +        if (mainField === 'business_document')
 | 
	
		
			
				|  |  | +          return businessDocCategoryMap
 | 
	
		
			
				|  |  |        }
 | 
	
		
			
				|  |  |        return {} as any
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |      const getTargetValue = (field: string) => {
 | 
	
		
			
				|  |  |        const val = get(sourceData, field, '')
 | 
	
		
			
				|  |  | -      if (!val && val !== 0) return '-'
 | 
	
		
			
				|  |  | +      if (!val && val !== 0)
 | 
	
		
			
				|  |  | +        return '-'
 | 
	
		
			
				|  |  |        if (fieldMap[field]?.inputType === 'select')
 | 
	
		
			
				|  |  |          return getTargetMap(field)[val]
 | 
	
		
			
				|  |  |        if (fieldMap[field]?.render)
 | 
	
	
		
			
				|  | @@ -286,8 +294,8 @@ const Metadata: FC<IMetadataProps> = ({ docDetail, loading, onUpdate }) => {
 | 
	
		
			
				|  |  |        documentId,
 | 
	
		
			
				|  |  |        body: {
 | 
	
		
			
				|  |  |          doc_type: metadataParams.documentType || doc_type || '',
 | 
	
		
			
				|  |  | -        doc_metadata: metadataParams.metadata
 | 
	
		
			
				|  |  | -      }
 | 
	
		
			
				|  |  | +        doc_metadata: metadataParams.metadata,
 | 
	
		
			
				|  |  | +      },
 | 
	
		
			
				|  |  |      }) as Promise<CommonResponse>)
 | 
	
		
			
				|  |  |      if (!e)
 | 
	
		
			
				|  |  |        notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
 | 
	
	
		
			
				|  | @@ -300,62 +308,64 @@ const Metadata: FC<IMetadataProps> = ({ docDetail, loading, onUpdate }) => {
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |    return (
 | 
	
		
			
				|  |  |      <div className={`${s.main} ${editStatus ? 'bg-white' : 'bg-gray-25'}`}>
 | 
	
		
			
				|  |  | -      {loading ? <Loading type='app' /> : (
 | 
	
		
			
				|  |  | -        <>
 | 
	
		
			
				|  |  | -          <div className={s.titleWrapper}>
 | 
	
		
			
				|  |  | -            <span className={s.title}>{t('datasetDocuments.metadata.title')}</span>
 | 
	
		
			
				|  |  | +      {loading
 | 
	
		
			
				|  |  | +        ? (<Loading type='app' />)
 | 
	
		
			
				|  |  | +        : (
 | 
	
		
			
				|  |  | +          <>
 | 
	
		
			
				|  |  | +            <div className={s.titleWrapper}>
 | 
	
		
			
				|  |  | +              <span className={s.title}>{t('datasetDocuments.metadata.title')}</span>
 | 
	
		
			
				|  |  | +              {!editStatus
 | 
	
		
			
				|  |  | +                ? <Button onClick={enabledEdit} className={`${s.opBtn} ${s.opEditBtn}`}>
 | 
	
		
			
				|  |  | +                  <PencilIcon className={s.opIcon} />
 | 
	
		
			
				|  |  | +                  {t('common.operation.edit')}
 | 
	
		
			
				|  |  | +                </Button>
 | 
	
		
			
				|  |  | +                : showDocTypes
 | 
	
		
			
				|  |  | +                  ? null
 | 
	
		
			
				|  |  | +                  : <div className={s.opBtnWrapper}>
 | 
	
		
			
				|  |  | +                    <Button onClick={onCancel} className={`${s.opBtn} ${s.opCancelBtn}`}>{t('common.operation.cancel')}</Button>
 | 
	
		
			
				|  |  | +                    <Button onClick={onSave}
 | 
	
		
			
				|  |  | +                      className={`${s.opBtn} ${s.opSaveBtn}`}
 | 
	
		
			
				|  |  | +                      type='primary'
 | 
	
		
			
				|  |  | +                      loading={saveLoading}
 | 
	
		
			
				|  |  | +                    >
 | 
	
		
			
				|  |  | +                      {t('common.operation.save')}
 | 
	
		
			
				|  |  | +                    </Button>
 | 
	
		
			
				|  |  | +                  </div>}
 | 
	
		
			
				|  |  | +            </div>
 | 
	
		
			
				|  |  | +            {/* show selected doc type and changing entry */}
 | 
	
		
			
				|  |  |              {!editStatus
 | 
	
		
			
				|  |  | -              ? <Button onClick={enabledEdit} className={`${s.opBtn} ${s.opEditBtn}`}>
 | 
	
		
			
				|  |  | -                <PencilIcon className={s.opIcon} />
 | 
	
		
			
				|  |  | -                {t('common.operation.edit')}
 | 
	
		
			
				|  |  | -              </Button>
 | 
	
		
			
				|  |  | +              ? <div className={s.documentTypeShow}>
 | 
	
		
			
				|  |  | +                <TypeIcon iconName={metadataMap[doc_type || 'book']?.iconName || ''} className={s.iconShow} />
 | 
	
		
			
				|  |  | +                {metadataMap[doc_type || 'book'].text}
 | 
	
		
			
				|  |  | +              </div>
 | 
	
		
			
				|  |  |                : showDocTypes
 | 
	
		
			
				|  |  |                  ? null
 | 
	
		
			
				|  |  | -                : <div className={s.opBtnWrapper}>
 | 
	
		
			
				|  |  | -                  <Button onClick={onCancel} className={`${s.opBtn} ${s.opCancelBtn}`}>{t('common.operation.cancel')}</Button>
 | 
	
		
			
				|  |  | -                  <Button onClick={onSave}
 | 
	
		
			
				|  |  | -                    className={`${s.opBtn} ${s.opSaveBtn}`}
 | 
	
		
			
				|  |  | -                    type='primary'
 | 
	
		
			
				|  |  | -                    loading={saveLoading}
 | 
	
		
			
				|  |  | -                  >
 | 
	
		
			
				|  |  | -                    {t('common.operation.save')}
 | 
	
		
			
				|  |  | -                  </Button>
 | 
	
		
			
				|  |  | -                </div>}
 | 
	
		
			
				|  |  | -          </div>
 | 
	
		
			
				|  |  | -          {/* show selected doc type and changing entry */}
 | 
	
		
			
				|  |  | -          {!editStatus
 | 
	
		
			
				|  |  | -            ? <div className={s.documentTypeShow}>
 | 
	
		
			
				|  |  | -              <TypeIcon iconName={metadataMap[doc_type || 'book']?.iconName || ''} className={s.iconShow} />
 | 
	
		
			
				|  |  | -              {metadataMap[doc_type || 'book'].text}
 | 
	
		
			
				|  |  | -            </div>
 | 
	
		
			
				|  |  | -            : showDocTypes
 | 
	
		
			
				|  |  | -              ? null
 | 
	
		
			
				|  |  | -              : <div className={s.documentTypeShow}>
 | 
	
		
			
				|  |  | -                {metadataParams.documentType && <>
 | 
	
		
			
				|  |  | -                  <TypeIcon iconName={metadataMap[metadataParams.documentType || 'book'].iconName || ''} className={s.iconShow} />
 | 
	
		
			
				|  |  | -                  {metadataMap[metadataParams.documentType || 'book'].text}
 | 
	
		
			
				|  |  | -                  {editStatus && <div className='inline-flex items-center gap-1 ml-1'>
 | 
	
		
			
				|  |  | +                : <div className={s.documentTypeShow}>
 | 
	
		
			
				|  |  | +                  {metadataParams.documentType && <>
 | 
	
		
			
				|  |  | +                    <TypeIcon iconName={metadataMap[metadataParams.documentType || 'book'].iconName || ''} className={s.iconShow} />
 | 
	
		
			
				|  |  | +                    {metadataMap[metadataParams.documentType || 'book'].text}
 | 
	
		
			
				|  |  | +                    {editStatus && <div className='inline-flex items-center gap-1 ml-1'>
 | 
	
		
			
				|  |  |                      ·
 | 
	
		
			
				|  |  | -                    <div
 | 
	
		
			
				|  |  | -                      onClick={() => { setShowDocTypes(true) }}
 | 
	
		
			
				|  |  | -                      className='cursor-pointer hover:text-[#155EEF]'
 | 
	
		
			
				|  |  | -                    >
 | 
	
		
			
				|  |  | -                      {t('common.operation.change')}
 | 
	
		
			
				|  |  | -                    </div>
 | 
	
		
			
				|  |  | -                  </div>}
 | 
	
		
			
				|  |  | -                </>}
 | 
	
		
			
				|  |  | -              </div>
 | 
	
		
			
				|  |  | -          }
 | 
	
		
			
				|  |  | -          {(!doc_type && showDocTypes) ? null : <Divider />}
 | 
	
		
			
				|  |  | -          {showDocTypes ? renderSelectDocType() : renderFieldInfos({ mainField: metadataParams.documentType, canEdit: editStatus })}
 | 
	
		
			
				|  |  | -          {/* show fixed fields */}
 | 
	
		
			
				|  |  | -          <Divider />
 | 
	
		
			
				|  |  | -          {renderFieldInfos({ mainField: 'originInfo', canEdit: false })}
 | 
	
		
			
				|  |  | -          <div className={`${s.title} mt-8`}>{metadataMap.technicalParameters.text}</div>
 | 
	
		
			
				|  |  | -          <Divider />
 | 
	
		
			
				|  |  | -          {renderFieldInfos({ mainField: 'technicalParameters', canEdit: false })}
 | 
	
		
			
				|  |  | -        </>
 | 
	
		
			
				|  |  | -      )}
 | 
	
		
			
				|  |  | +                      <div
 | 
	
		
			
				|  |  | +                        onClick={() => { setShowDocTypes(true) }}
 | 
	
		
			
				|  |  | +                        className='cursor-pointer hover:text-[#155EEF]'
 | 
	
		
			
				|  |  | +                      >
 | 
	
		
			
				|  |  | +                        {t('common.operation.change')}
 | 
	
		
			
				|  |  | +                      </div>
 | 
	
		
			
				|  |  | +                    </div>}
 | 
	
		
			
				|  |  | +                  </>}
 | 
	
		
			
				|  |  | +                </div>
 | 
	
		
			
				|  |  | +            }
 | 
	
		
			
				|  |  | +            {(!doc_type && showDocTypes) ? null : <Divider />}
 | 
	
		
			
				|  |  | +            {showDocTypes ? renderSelectDocType() : renderFieldInfos({ mainField: metadataParams.documentType, canEdit: editStatus })}
 | 
	
		
			
				|  |  | +            {/* show fixed fields */}
 | 
	
		
			
				|  |  | +            <Divider />
 | 
	
		
			
				|  |  | +            {renderFieldInfos({ mainField: 'originInfo', canEdit: false })}
 | 
	
		
			
				|  |  | +            <div className={`${s.title} mt-8`}>{metadataMap.technicalParameters.text}</div>
 | 
	
		
			
				|  |  | +            <Divider />
 | 
	
		
			
				|  |  | +            {renderFieldInfos({ mainField: 'technicalParameters', canEdit: false })}
 | 
	
		
			
				|  |  | +          </>
 | 
	
		
			
				|  |  | +        )}
 | 
	
		
			
				|  |  |      </div>
 | 
	
		
			
				|  |  |    )
 | 
	
		
			
				|  |  |  }
 |