|
|
|
|
|
|
|
|
'use client' |
|
|
'use client' |
|
|
import type { FC } from 'react' |
|
|
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 { PencilIcon } from '@heroicons/react/24/outline' |
|
|
import { useTranslation } from 'react-i18next' |
|
|
import { useTranslation } from 'react-i18next' |
|
|
import { useContext } from 'use-context-selector' |
|
|
import { useContext } from 'use-context-selector' |
|
|
import { get } from 'lodash-es' |
|
|
import { get } from 'lodash-es' |
|
|
import cn from 'classnames' |
|
|
import cn from 'classnames' |
|
|
|
|
|
import { DocumentContext } from '../index' |
|
|
|
|
|
import s from './style.module.css' |
|
|
import Input from '@/app/components/base/input' |
|
|
import Input from '@/app/components/base/input' |
|
|
import Button from '@/app/components/base/button' |
|
|
import Button from '@/app/components/base/button' |
|
|
import Tooltip from '@/app/components/base/tooltip' |
|
|
import Tooltip from '@/app/components/base/tooltip' |
|
|
|
|
|
|
|
|
import { asyncRunSafe, getTextWidthWithCanvas } from '@/utils' |
|
|
import { asyncRunSafe, getTextWidthWithCanvas } from '@/utils' |
|
|
import { modifyDocMetadata } from '@/service/datasets' |
|
|
import { modifyDocMetadata } from '@/service/datasets' |
|
|
import type { CommonResponse } from '@/models/common' |
|
|
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 { 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 }) => { |
|
|
const map2Options = (map: { [key: string]: string }) => { |
|
|
return Object.keys(map).map(key => ({ value: key, name: map[key] })) |
|
|
return Object.keys(map).map(key => ({ value: key, name: map[key] })) |
|
|
|
|
|
|
|
|
showEdit = false, |
|
|
showEdit = false, |
|
|
inputType = 'input', |
|
|
inputType = 'input', |
|
|
selectOptions = [], |
|
|
selectOptions = [], |
|
|
onUpdate |
|
|
|
|
|
|
|
|
onUpdate, |
|
|
}) => { |
|
|
}) => { |
|
|
const { t } = useTranslation() |
|
|
const { t } = useTranslation() |
|
|
const textNeedWrap = getTextWidthWithCanvas(displayedValue) > 190 |
|
|
const textNeedWrap = getTextWidthWithCanvas(displayedValue) > 190 |
|
|
|
|
|
|
|
|
const readAlignTop = !showEdit && textNeedWrap |
|
|
const readAlignTop = !showEdit && textNeedWrap |
|
|
|
|
|
|
|
|
return ( |
|
|
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={cn(s.label, editAlignTop && 'pt-1')}>{label}</div> |
|
|
<div className={s.value}> |
|
|
<div className={s.value}> |
|
|
{!showEdit |
|
|
{!showEdit |
|
|
|
|
|
|
|
|
const [editStatus, setEditStatus] = useState(!doc_type) // if no documentType, in editing status by default |
|
|
const [editStatus, setEditStatus] = useState(!doc_type) // if no documentType, in editing status by default |
|
|
// the initial values are according to the documentType |
|
|
// the initial values are according to the documentType |
|
|
const [metadataParams, setMetadataParams] = useState<{ |
|
|
const [metadataParams, setMetadataParams] = useState<{ |
|
|
documentType?: DocType | ''; |
|
|
|
|
|
|
|
|
documentType?: DocType | '' |
|
|
metadata: { [key: string]: string } |
|
|
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 [showDocTypes, setShowDocTypes] = useState(!doc_type) // whether show doc types |
|
|
const [tempDocType, setTempDocType] = useState<DocType | undefined | ''>('') // for remember icon click |
|
|
const [tempDocType, setTempDocType] = useState<DocType | undefined | ''>('') // for remember icon click |
|
|
const [saveLoading, setSaveLoading] = useState(false) |
|
|
const [saveLoading, setSaveLoading] = useState(false) |
|
|
|
|
|
|
|
|
setTempDocType(docDetail?.doc_type) |
|
|
setTempDocType(docDetail?.doc_type) |
|
|
setMetadataParams({ |
|
|
setMetadataParams({ |
|
|
documentType: docDetail?.doc_type, |
|
|
documentType: docDetail?.doc_type, |
|
|
metadata: docDetail?.doc_metadata || {} |
|
|
|
|
|
|
|
|
metadata: docDetail?.doc_metadata || {}, |
|
|
}) |
|
|
}) |
|
|
} |
|
|
} |
|
|
}, [docDetail?.doc_type]) |
|
|
}, [docDetail?.doc_type]) |
|
|
|
|
|
|
|
|
// confirm doc type |
|
|
// confirm doc type |
|
|
const confirmDocType = () => { |
|
|
const confirmDocType = () => { |
|
|
if (!tempDocType) return; |
|
|
|
|
|
|
|
|
if (!tempDocType) |
|
|
|
|
|
return |
|
|
setMetadataParams({ |
|
|
setMetadataParams({ |
|
|
documentType: tempDocType, |
|
|
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) |
|
|
setEditStatus(true) |
|
|
setShowDocTypes(false) |
|
|
setShowDocTypes(false) |
|
|
|
|
|
|
|
|
<span className={s.changeTip}>{t('datasetDocuments.metadata.docTypeSelectWarning')}</span> |
|
|
<span className={s.changeTip}>{t('datasetDocuments.metadata.docTypeSelectWarning')}</span> |
|
|
</>} |
|
|
</>} |
|
|
<Radio.Group value={tempDocType ?? documentType} onChange={setTempDocType} className={s.radioGroup}> |
|
|
<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 |
|
|
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 |
|
|
<IconButton |
|
|
type={type} |
|
|
type={type} |
|
|
isChecked={currValue === type} |
|
|
isChecked={currValue === type} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// show metadata info and edit |
|
|
// show metadata info and edit |
|
|
const renderFieldInfos = ({ mainField = 'book', canEdit }: { mainField?: metadataType | ''; canEdit?: boolean }) => { |
|
|
const renderFieldInfos = ({ mainField = 'book', canEdit }: { mainField?: metadataType | ''; canEdit?: boolean }) => { |
|
|
if (!mainField) return null |
|
|
|
|
|
|
|
|
if (!mainField) |
|
|
|
|
|
return null |
|
|
const fieldMap = metadataMap[mainField]?.subFieldsMap |
|
|
const fieldMap = metadataMap[mainField]?.subFieldsMap |
|
|
const sourceData = ['originInfo', 'technicalParameters'].includes(mainField) ? docDetail : metadataParams.metadata |
|
|
const sourceData = ['originInfo', 'technicalParameters'].includes(mainField) ? docDetail : metadataParams.metadata |
|
|
|
|
|
|
|
|
const getTargetMap = (field: string) => { |
|
|
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 |
|
|
return bookCategoryMap |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if (field === 'document_type') { |
|
|
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 |
|
|
return {} as any |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
const getTargetValue = (field: string) => { |
|
|
const getTargetValue = (field: string) => { |
|
|
const val = get(sourceData, field, '') |
|
|
const val = get(sourceData, field, '') |
|
|
if (!val && val !== 0) return '-' |
|
|
|
|
|
|
|
|
if (!val && val !== 0) |
|
|
|
|
|
return '-' |
|
|
if (fieldMap[field]?.inputType === 'select') |
|
|
if (fieldMap[field]?.inputType === 'select') |
|
|
return getTargetMap(field)[val] |
|
|
return getTargetMap(field)[val] |
|
|
if (fieldMap[field]?.render) |
|
|
if (fieldMap[field]?.render) |
|
|
|
|
|
|
|
|
documentId, |
|
|
documentId, |
|
|
body: { |
|
|
body: { |
|
|
doc_type: metadataParams.documentType || doc_type || '', |
|
|
doc_type: metadataParams.documentType || doc_type || '', |
|
|
doc_metadata: metadataParams.metadata |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
doc_metadata: metadataParams.metadata, |
|
|
|
|
|
}, |
|
|
}) as Promise<CommonResponse>) |
|
|
}) as Promise<CommonResponse>) |
|
|
if (!e) |
|
|
if (!e) |
|
|
notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') }) |
|
|
notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') }) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
return ( |
|
|
<div className={`${s.main} ${editStatus ? 'bg-white' : 'bg-gray-25'}`}> |
|
|
<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 |
|
|
{!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 |
|
|
: showDocTypes |
|
|
? null |
|
|
? 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> |
|
|
</div> |
|
|
) |
|
|
) |
|
|
} |
|
|
} |