diff --git a/frontend/src/metadata/components/metadata-details/index.js b/frontend/src/metadata/components/metadata-details/index.js index 3e000a7063..615f88ad8d 100644 --- a/frontend/src/metadata/components/metadata-details/index.js +++ b/frontend/src/metadata/components/metadata-details/index.js @@ -7,7 +7,7 @@ import DetailItem from '../../../components/dirent-detail/detail-item'; import { Utils } from '../../../utils/utils'; import metadataAPI from '../../api'; import Column from '../../model/metadata/column'; -import { getCellValueByColumn, getOptionName, getColumnOptionNamesByIds } from '../../utils/cell'; +import { getCellValueByColumn, getOptionName, getColumnOptionNamesByIds, getColumnOptionNameById } from '../../utils/cell'; import { normalizeFields } from './utils'; import { gettext } from '../../../utils/constants'; import { CellType, PREDEFINED_COLUMN_KEYS, PRIVATE_COLUMN_KEY } from '../../constants'; @@ -55,9 +55,8 @@ const MetadataDetails = ({ repoID, filePath, repoInfo, direntType }) => { const field = fields.find(f => f.key === fieldKey); const fileName = getColumnOriginName(field); let update = { [fileName]: newValue }; - if (!PREDEFINED_COLUMN_KEYS.includes(field.key) && field.type === CellType.SINGLE_SELECT) { - const options = getColumnOptions(field); - update = { [fileName]: getOptionName(options, newValue) }; + if (field.type === CellType.SINGLE_SELECT) { + update = { [fileName]: getColumnOptionNameById(field, newValue) }; } else if (field.type === CellType.MULTIPLE_SELECT) { update = { [fileName]: newValue ? getColumnOptionNamesByIds(field, newValue) : [] }; } diff --git a/frontend/src/metadata/constants/column/index.js b/frontend/src/metadata/constants/column/index.js index fa8e8d9d7d..a1b88259f3 100644 --- a/frontend/src/metadata/constants/column/index.js +++ b/frontend/src/metadata/constants/column/index.js @@ -24,7 +24,11 @@ export { export { PREDEFINED_COLUMN_KEYS, -} from './predefined-columns'; + PREDEFINED_FILE_STATUS_OPTION_KEY, + PREDEFINED_FILE_STATUS_OPTION_KEYS, + PREDEFINED_FILE_TYPE_OPTION_KEY, + PREDEFINED_FILE_TYPE_OPTION_KEYS, +} from './predefined'; export { PRIVATE_COLUMN_KEY, diff --git a/frontend/src/metadata/constants/column/predefined-columns.js b/frontend/src/metadata/constants/column/predefined-columns.js deleted file mode 100644 index f971ec242d..0000000000 --- a/frontend/src/metadata/constants/column/predefined-columns.js +++ /dev/null @@ -1,14 +0,0 @@ -import { PRIVATE_COLUMN_KEY } from './private'; - -const PREDEFINED_COLUMN_KEYS = [ - PRIVATE_COLUMN_KEY.FILE_COLLABORATORS, - PRIVATE_COLUMN_KEY.FILE_EXPIRE_TIME, - PRIVATE_COLUMN_KEY.FILE_KEYWORDS, - PRIVATE_COLUMN_KEY.FILE_DESCRIPTION, - PRIVATE_COLUMN_KEY.FILE_EXPIRED, - PRIVATE_COLUMN_KEY.FILE_STATUS, -]; - -export { - PREDEFINED_COLUMN_KEYS, -}; diff --git a/frontend/src/metadata/constants/column/predefined.js b/frontend/src/metadata/constants/column/predefined.js new file mode 100644 index 0000000000..0873267439 --- /dev/null +++ b/frontend/src/metadata/constants/column/predefined.js @@ -0,0 +1,50 @@ +import { PRIVATE_COLUMN_KEY } from './private'; + +const PREDEFINED_COLUMN_KEYS = [ + PRIVATE_COLUMN_KEY.FILE_COLLABORATORS, + PRIVATE_COLUMN_KEY.FILE_EXPIRE_TIME, + PRIVATE_COLUMN_KEY.FILE_KEYWORDS, + PRIVATE_COLUMN_KEY.FILE_DESCRIPTION, + PRIVATE_COLUMN_KEY.FILE_EXPIRED, + PRIVATE_COLUMN_KEY.FILE_STATUS, +]; + +const PREDEFINED_FILE_STATUS_OPTION_KEY = { + IN_PROGRESS: '_in_progress', + IN_REVIEW: '_in_review', + DONE: '_done', + OUTDATED: '_outdated' +}; + +const PREDEFINED_FILE_STATUS_OPTION_KEYS = [ + PREDEFINED_FILE_STATUS_OPTION_KEY.IN_PROGRESS, + PREDEFINED_FILE_STATUS_OPTION_KEY.IN_REVIEW, + PREDEFINED_FILE_STATUS_OPTION_KEY.DONE, + PREDEFINED_FILE_STATUS_OPTION_KEY.OUTDATED, +]; + +const PREDEFINED_FILE_TYPE_OPTION_KEY = { + PICTURE: '_picture', + DOCUMENT: '_document', + VIDEO: '_video', + AUDIO: '_audio', + CODE: '_code', + COMPRESSED: '_compressed', +}; + +const PREDEFINED_FILE_TYPE_OPTION_KEYS = [ + PREDEFINED_FILE_TYPE_OPTION_KEY.PICTURE, + PREDEFINED_FILE_TYPE_OPTION_KEY.DOCUMENT, + PREDEFINED_FILE_TYPE_OPTION_KEY.VIDEO, + PREDEFINED_FILE_TYPE_OPTION_KEY.AUDIO, + PREDEFINED_FILE_TYPE_OPTION_KEY.CODE, + PREDEFINED_FILE_TYPE_OPTION_KEY.COMPRESSED, +]; + +export { + PREDEFINED_COLUMN_KEYS, + PREDEFINED_FILE_STATUS_OPTION_KEY, + PREDEFINED_FILE_STATUS_OPTION_KEYS, + PREDEFINED_FILE_TYPE_OPTION_KEY, + PREDEFINED_FILE_TYPE_OPTION_KEYS, +}; diff --git a/frontend/src/metadata/constants/column/private.js b/frontend/src/metadata/constants/column/private.js index 2378bb3620..a972fed2ce 100644 --- a/frontend/src/metadata/constants/column/private.js +++ b/frontend/src/metadata/constants/column/private.js @@ -69,6 +69,7 @@ export const EDITABLE_PRIVATE_COLUMN_KEYS = [ export const EDITABLE_DATA_PRIVATE_COLUMN_KEYS = [ PRIVATE_COLUMN_KEY.SHOOTING_TIME, + // PRIVATE_COLUMN_KEY.FILE_STATUS, ]; export const DELETABLE_PRIVATE_COLUMN_KEY = [ diff --git a/frontend/src/metadata/utils/cell/column/option.js b/frontend/src/metadata/utils/cell/column/option.js index 17f193665c..da9b6e8c66 100644 --- a/frontend/src/metadata/utils/cell/column/option.js +++ b/frontend/src/metadata/utils/cell/column/option.js @@ -1,6 +1,14 @@ -import { PRIVATE_COLUMN_KEYS } from '../../../constants'; +import { PRIVATE_COLUMN_KEYS, PRIVATE_COLUMN_KEY, PREDEFINED_FILE_STATUS_OPTION_KEYS, PREDEFINED_FILE_TYPE_OPTION_KEYS } from '../../../constants'; import { getColumnOptions } from '../../../utils/column'; +const checkIsPredefinedOption = (column, optionId) => { + const columnKey = column.key; + if (!PRIVATE_COLUMN_KEYS.includes(columnKey)) return false; + if (PRIVATE_COLUMN_KEY.FILE_STATUS === columnKey) return PREDEFINED_FILE_STATUS_OPTION_KEYS.includes(optionId); + if (PRIVATE_COLUMN_KEY.FILE_TYPE === columnKey) return PREDEFINED_FILE_TYPE_OPTION_KEYS.includes(optionId); + return false; +}; + /** * Get option by id * @param {array} options e.g. [{ id, name, ... }] @@ -31,7 +39,10 @@ const getOptionName = (options, targetOptionId) => { * @returns option name, string */ const getColumnOptionNameById = (column, optionId) => { - if (PRIVATE_COLUMN_KEYS.includes(column.key)) return optionId; + + // If it is a predefined option, use its id, otherwise use name. + // When displaying predefined options, international translation is done based on id, so the name is no longer the name stored in the database + if (checkIsPredefinedOption(column, optionId)) return optionId; const options = getColumnOptions(column); return getOptionName(options, optionId); }; @@ -83,6 +94,7 @@ const getMultipleOptionName = (column, targetOptionsIds) => { }; export { + checkIsPredefinedOption, getOption, getOptionName, getColumnOptionNameById, diff --git a/frontend/src/metadata/utils/column/index.js b/frontend/src/metadata/utils/column/index.js index 392264c1e9..6c52deddb9 100644 --- a/frontend/src/metadata/utils/column/index.js +++ b/frontend/src/metadata/utils/column/index.js @@ -2,6 +2,7 @@ import deepCopy from 'deep-copy'; import { gettext } from '../../../utils/constants'; import { CellType, DEFAULT_DATE_FORMAT, PRIVATE_COLUMN_KEY, NOT_DISPLAY_COLUMN_KEYS, PRIVATE_COLUMN_KEYS, SEQUENCE_COLUMN_WIDTH, + PREDEFINED_FILE_STATUS_OPTION_KEY, PREDEFINED_FILE_TYPE_OPTION_KEY } from '../../constants'; export const getFrozenColumns = (columns) => { @@ -257,12 +258,12 @@ export const getNormalizedColumnType = (key, type) => { const getFileTypeColumnData = (column) => { const { data } = column; const _OPTIONS = { - '_picture': { name: gettext('Picture'), color: '#FFFCB5', textColor: '#202428' }, - '_document': { name: gettext('Document'), color: '#B7CEF9', textColor: '#202428' }, - '_video': { name: gettext('Video'), color: '#9860E5', textColor: '#FFFFFF', borderColor: '#844BD2' }, - '_audio': { name: gettext('Audio'), color: '#FBD44A', textColor: '#FFFFFF', borderColor: '#E5C142' }, - '_code': { name: gettext('Code'), color: '#4ad8fb', textColor: '#FFFFFF', borderColor: '#4283e5' }, - '_compressed': { name: gettext('Compressed'), color: '#4a9afb', textColor: '#FFFFFF', borderColor: '#da42e5' }, + [PREDEFINED_FILE_TYPE_OPTION_KEY.PICTURE]: { name: gettext('Picture'), color: '#FFFCB5', textColor: '#202428' }, + [PREDEFINED_FILE_TYPE_OPTION_KEY.DOCUMENT]: { name: gettext('Document'), color: '#B7CEF9', textColor: '#202428' }, + [PREDEFINED_FILE_TYPE_OPTION_KEY.VIDEO]: { name: gettext('Video'), color: '#9860E5', textColor: '#FFFFFF', borderColor: '#844BD2' }, + [PREDEFINED_FILE_TYPE_OPTION_KEY.AUDIO]: { name: gettext('Audio'), color: '#FBD44A', textColor: '#FFFFFF', borderColor: '#E5C142' }, + [PREDEFINED_FILE_TYPE_OPTION_KEY.CODE]: { name: gettext('Code'), color: '#4ad8fb', textColor: '#FFFFFF', borderColor: '#4283e5' }, + [PREDEFINED_FILE_TYPE_OPTION_KEY.COMPRESSED]: { name: gettext('Compressed'), color: '#4a9afb', textColor: '#FFFFFF', borderColor: '#da42e5' }, }; let newData = { ...data }; newData.options = Array.isArray(data.options) ? data.options.map(o => { @@ -273,13 +274,28 @@ const getFileTypeColumnData = (column) => { export const getDefaultFileStatusOptions = () => { return [ - { id: '_in_progress', name: gettext('In progress'), color: '#EED5FF', textColor: '#212529' }, - { id: '_in_review', name: gettext('In review'), color: '#FFFDCF', textColor: '#212529' }, - { id: '_done', name: gettext('Done'), color: '#59CB74', textColor: '#FFFFFF', borderColor: '#844BD2' }, - { id: '_outdated', name: gettext('Outdated'), color: '#C2C2C2', textColor: '#FFFFFF', borderColor: '#ADADAD' }, + { id: PREDEFINED_FILE_STATUS_OPTION_KEY.IN_PROGRESS, name: PREDEFINED_FILE_STATUS_OPTION_KEY.IN_PROGRESS }, + { id: PREDEFINED_FILE_STATUS_OPTION_KEY.IN_REVIEW, name: PREDEFINED_FILE_STATUS_OPTION_KEY.IN_REVIEW }, + { id: PREDEFINED_FILE_STATUS_OPTION_KEY.DONE, name: PREDEFINED_FILE_STATUS_OPTION_KEY.DONE }, + { id: PREDEFINED_FILE_STATUS_OPTION_KEY.OUTDATED, name: PREDEFINED_FILE_STATUS_OPTION_KEY.OUTDATED } ]; }; +const getFileStatusColumnData = (column) => { + const { data } = column; + let newData = { ...data }; + const _OPTIONS = { + [PREDEFINED_FILE_STATUS_OPTION_KEY.IN_PROGRESS]: { name: gettext('In progress'), color: '#EED5FF', textColor: '#202428' }, + [PREDEFINED_FILE_STATUS_OPTION_KEY.IN_REVIEW]: { name: gettext('In review'), color: '#FFFDCF', textColor: '#202428' }, + [PREDEFINED_FILE_STATUS_OPTION_KEY.DONE]: { name: gettext('Done'), color: '#59CB74', textColor: '#FFFFFF', borderColor: '#844BD2' }, + [PREDEFINED_FILE_STATUS_OPTION_KEY.OUTDATED]: { name: gettext('Outdated'), color: '#C2C2C2', textColor: '#FFFFFF', borderColor: '#ADADAD' } + }; + newData.options = Array.isArray(data?.options) ? data.options.map(o => { + return { ...o, ..._OPTIONS[o.id] }; + }) : []; + return newData; +}; + const getFileSizeColumnData = (column) => { return { ...column.data, @@ -291,6 +307,7 @@ export const normalizeColumnData = (column) => { const { key, data } = column; if (PRIVATE_COLUMN_KEYS.includes(key)) { if (key === PRIVATE_COLUMN_KEY.FILE_TYPE) return getFileTypeColumnData(column); + if (key === PRIVATE_COLUMN_KEY.FILE_STATUS) return getFileStatusColumnData(column); if (key === PRIVATE_COLUMN_KEY.SIZE) return getFileSizeColumnData(column); } if (column.type === CellType.SINGLE_SELECT) {