|
@@ -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>
|
|
|
)
|
|
|
}
|