-
- {window.app.pageOptions.enableMetadataManagement && enableMetadata && (
-
@@ -116,8 +112,8 @@ const FileDetails = React.memo(({ repoID, repoInfo, dirent, path, direntDetail,
)}
- {window.app.pageOptions.enableMetadataManagement && enableMetadata && (
-
- 
+
);
@@ -26,6 +25,7 @@ Header.propTypes = {
icon: PropTypes.string.isRequired,
iconSize: PropTypes.number,
component: PropTypes.object,
+ children: PropTypes.any,
onClose: PropTypes.func.isRequired,
};
diff --git a/frontend/src/components/dirent-detail/detail/header/title/index.css b/frontend/src/components/dirent-detail/detail/header/title/index.css
new file mode 100644
index 00000000000..8367432a87a
--- /dev/null
+++ b/frontend/src/components/dirent-detail/detail/header/title/index.css
@@ -0,0 +1,23 @@
+.detail-header .detail-title {
+ display: flex;
+ flex: 1;
+ align-items: center;
+ width: 0; /* prevent strut flex layout */
+}
+
+.detail-header .detail-title .detail-header-icon-container {
+ height: 32px;
+ width: 32px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+}
+
+.detail-header .detail-title .name {
+ margin: 0 0.5rem 0 6px;
+ line-height: 1.5rem;
+ vertical-align: middle;
+ font-size: 1rem;
+ color: #212529;
+}
diff --git a/frontend/src/components/dirent-detail/detail/header/title/index.js b/frontend/src/components/dirent-detail/detail/header/title/index.js
new file mode 100644
index 00000000000..a00f754583a
--- /dev/null
+++ b/frontend/src/components/dirent-detail/detail/header/title/index.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import './index.css';
+
+const Title = ({ icon, iconSize, title }) => {
+
+ return (
+
+ {children}
+
-
+ {closeIcon ? closeIcon :
- {title}
-
- {closeIcon ? closeIcon :
+
+ );
+};
+
+Title.propTypes = {
+ icon: PropTypes.string,
+ iconSize: PropTypes.number,
+ title: PropTypes.string,
+};
+
+export default Title;
diff --git a/frontend/src/components/dirent-detail/dirent-details/dir-details.js b/frontend/src/components/dirent-detail/dirent-details/dir-details.js
index 7b0ea7244ac..dca1e3ac000 100644
--- a/frontend/src/components/dirent-detail/dirent-details/dir-details.js
+++ b/frontend/src/components/dirent-detail/dirent-details/dir-details.js
@@ -1,16 +1,14 @@
import React, { useMemo } from 'react';
import PropTypes from 'prop-types';
import { Formatter } from '@seafile/sf-metadata-ui-component';
-import { getDirentPath } from './utils';
import DetailItem from '../detail-item';
import { CellType } from '../../../metadata/constants';
import { gettext } from '../../../utils/constants';
import { MetadataDetails } from '../../../metadata';
import { useMetadataStatus } from '../../../hooks';
-const DirDetails = ({ repoID, repoInfo, dirent, path, direntDetail }) => {
- const direntPath = useMemo(() => getDirentPath(dirent, path), [dirent, path]);
- const { enableMetadata } = useMetadataStatus();
+const DirDetails = ({ direntDetail }) => {
+ const { enableMetadata, enableMetadataManagement } = useMetadataStatus();
const lastModifiedTimeField = useMemo(() => {
return { type: CellType.MTIME, name: gettext('Last modified time') };
}, []);
@@ -20,8 +18,8 @@ const DirDetails = ({ repoID, repoInfo, dirent, path, direntDetail }) => {
+
+
+ {title}
+
- {dirent.type !== 'file' ?
-
- )}
-
-
+ {dirent.type !== 'file' ? (
+
+ )}
+
+ 400
- })}
- style={{ width }}
+
-
+
-
- )}
-
- 400
+ })}
+ style={{ width }}
+ >
+
+
+
+ {dirent && direntDetail && (
+
+
);
};
diff --git a/frontend/src/components/dirent-detail/index.js b/frontend/src/components/dirent-detail/index.js
index 8fabb6c6f91..838de2f95ed 100644
--- a/frontend/src/components/dirent-detail/index.js
+++ b/frontend/src/components/dirent-detail/index.js
@@ -31,13 +31,9 @@ const Detail = React.memo(({ repoID, path, dirent, currentRepoInfo, repoTags, fi
}
if (path === '/' && !dirent) {
- return (
-
+
+ )}
+
+
+
)}
diff --git a/frontend/src/metadata/components/metadata-details/settings/index.css b/frontend/src/metadata/components/metadata-details/settings/index.css
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/frontend/src/metadata/components/metadata-details/settings/index.js b/frontend/src/metadata/components/metadata-details/settings/index.js
new file mode 100644
index 00000000000..a3f99b8464f
--- /dev/null
+++ b/frontend/src/metadata/components/metadata-details/settings/index.js
@@ -0,0 +1,46 @@
+import React, { useMemo, useCallback, useState } from 'react';
+import Icon from '../../../../components/icon';
+import HideColumnPopover from '../../popover/hidden-column-popover';
+import { useMetadataDetails } from '../../../hooks';
+import { useMetadataStatus } from '../../../../hooks';
+
+import './index.css';
+
+const Settings = () => {
+ const [isShowSetter, setShowSetter] = useState(false);
+
+ const { enableMetadata } = useMetadataStatus();
+ const { modifyColumnOrder, modifyHiddenColumns, columns, canModifyDetails } = useMetadataDetails();
+ const hiddenColumns = useMemo(() => columns.filter(c => !c.shown).map(c => c.key), [columns]);
+
+ const onSetterToggle = useCallback(() => {
+ setShowSetter(!isShowSetter);
+ }, [isShowSetter]);
+ const target = useMemo(() => 'detail-control-settings-btn', []);
+
+ if (!enableMetadata) return null;
+ if (!canModifyDetails) return null;
+
+ return (
+ <>
+
this.ref = ref} id="sf-geolocation-map-container">
+
+ {isShowSetter && (
+ onMouseEnter(columnIndex)}
- onMouseLeave={onMouseLeave}
- >
- {!readOnly && (
- <>
- {connectDragSource(
-
-
- )
+
-
- )}
-
- )}
- = columnIndex,
+ 'hide-column-can-drop': isOver && draggingColumnIndex < columnIndex,
+ 'dragging': draggingColumnKey === column.key
+ })}
+ onDrop={onDrop}
+ onDragEnter={onDragEnter}
+ onDragOver={onDragOver}
+ onDragLeave={onDragLeave}
+ onDragEnd={onDragEnd}
+ >
+ {!readOnly && (
+
+
);
};
@@ -112,14 +107,14 @@ HideColumnItem.propTypes = {
readOnly: PropTypes.bool,
isHidden: PropTypes.bool,
columnIndex: PropTypes.number,
- currentIndex: PropTypes.number,
column: PropTypes.object.isRequired,
+ draggingColumnKey: PropTypes.string,
+ draggingColumnIndex: PropTypes.number,
+ dragOverColumnKey: PropTypes.string,
+ updateDraggingKey: PropTypes.func,
+ updateDragOverKey: PropTypes.func,
onChange: PropTypes.func.isRequired,
onMove: PropTypes.func,
- onMouseEnter: PropTypes.func,
- onMouseLeave: PropTypes.func,
};
-export default DropTarget('sfMetadataHiddenColumns', dropTarget, dropCollect)(
- DragSource('sfMetadataHiddenColumns', dragSource, dragCollect)(HideColumnItem)
-);
+export default HideColumnItem;
diff --git a/frontend/src/metadata/components/popover/hidden-column-popover/hidden-columns/index.js b/frontend/src/metadata/components/popover/hidden-column-popover/hidden-columns/index.js
index d1210be77dd..c4609101a00 100644
--- a/frontend/src/metadata/components/popover/hidden-column-popover/hidden-columns/index.js
+++ b/frontend/src/metadata/components/popover/hidden-column-popover/hidden-columns/index.js
@@ -1,27 +1,29 @@
import React, { useCallback, useMemo, useState } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
-import { DropTarget } from 'react-dnd';
import HideColumn from './hide-column';
-import html5DragDropContext from '../../../../../pages/wiki2/wiki-nav/html5DragDropContext';
import { gettext } from '../../../../../utils/constants';
const HiddenColumns = ({ readOnly, columns, hiddenColumns, onChange, modifyColumnOrder }) => {
- const [currentIndex, setCurrentIndex] = useState(-1);
+ const [draggingColumnKey, setDraggingCellKey] = useState(null);
+ const [dragOverColumnKey, setDragOverCellKey] = useState(null);
const isEmpty = useMemo(() => {
if (!Array.isArray(columns) || columns.length === 0) return true;
return false;
}, [columns]);
- const onMouseEnter = useCallback((columnIndex) => {
- if (currentIndex === columnIndex) return;
- setCurrentIndex(columnIndex);
- }, [currentIndex]);
+ const updateDraggingKey = useCallback((cellKey) => {
+ if (cellKey === draggingColumnKey) return;
+ setDraggingCellKey(cellKey);
+ }, [draggingColumnKey]);
- const onMouseLeave = useCallback(() => {
- setCurrentIndex(-1);
- }, []);
+ const updateDragOverKey = useCallback((cellKey) => {
+ if (cellKey === dragOverColumnKey) return;
+ setDragOverCellKey(cellKey);
+ }, [dragOverColumnKey]);
+
+ const draggingColumnIndex = draggingColumnKey ? columns.findIndex(c => c.key === draggingColumnKey) : -1;
return (
+
)}
-
+
@@ -32,13 +34,15 @@ const HiddenColumns = ({ readOnly, columns, hiddenColumns, onChange, modifyColum
key={column.key}
readOnly={readOnly}
columnIndex={columnIndex}
- currentIndex={currentIndex}
isHidden={!hiddenColumns.includes(column.key)}
column={column}
+ draggingColumnKey={draggingColumnKey}
+ draggingColumnIndex={draggingColumnIndex}
+ dragOverColumnKey={dragOverColumnKey}
onChange={onChange}
onMove={modifyColumnOrder}
- onMouseEnter={onMouseEnter}
- onMouseLeave={onMouseLeave}
+ updateDraggingKey={updateDraggingKey}
+ updateDragOverKey={updateDragOverKey}
/>
);
})}
@@ -54,8 +58,4 @@ HiddenColumns.propTypes = {
modifyColumnOrder: PropTypes.func,
};
-const DndHiddenColumns = DropTarget('sfMetadataHiddenColumns', {}, connect => ({
- connectDropTarget: connect.dropTarget()
-}))(HiddenColumns);
-
-export default html5DragDropContext(DndHiddenColumns);
+export default HiddenColumns;
diff --git a/frontend/src/metadata/components/popover/hidden-column-popover/index.css b/frontend/src/metadata/components/popover/hidden-column-popover/index.css
index 00438adf5ab..039f8259d2e 100644
--- a/frontend/src/metadata/components/popover/hidden-column-popover/index.css
+++ b/frontend/src/metadata/components/popover/hidden-column-popover/index.css
@@ -145,6 +145,10 @@
display: none;
}
+.sf-metadata-hide-columns-popover .hide-column-item.dragging {
+ background-color: #f5f5f5;
+}
+
.sf-metadata-hide-columns-popover .hide-column-item.hide-column-can-drop::after,
.sf-metadata-hide-columns-popover .hide-column-item.hide-column-can-drop-top::before {
content: '';
diff --git a/frontend/src/metadata/components/view-toolbar/kanban-view-toolbar/index.js b/frontend/src/metadata/components/view-toolbar/kanban-view-toolbar/index.js
index 3176fbccd79..9835eb6575a 100644
--- a/frontend/src/metadata/components/view-toolbar/kanban-view-toolbar/index.js
+++ b/frontend/src/metadata/components/view-toolbar/kanban-view-toolbar/index.js
@@ -67,13 +67,14 @@ const KanbanViewToolBar = ({
className="sf-metadata-view-tool-operation-btn sf-metadata-view-tool-setting"
size={24}
role="button"
- aria-label="Setting"
+ aria-label={gettext('Settings')}
+ title={gettext('Settings')}
tabIndex={0}
onClick={onToggleKanbanSetting}
/>
{!isCustomPermission && (
-
+ {children}
+
+ );
+};
+
+export const useMetadataDetails = () => {
+ const context = useContext(MetadataDetailsContext);
+ if (!context) {
+ throw new Error('\'MetadataDetailsContext\' is null');
+ }
+ return context;
+};
diff --git a/frontend/src/metadata/utils/row/core.js b/frontend/src/metadata/utils/row/core.js
index 145cfcc471c..f69e806ee6d 100644
--- a/frontend/src/metadata/utils/row/core.js
+++ b/frontend/src/metadata/utils/row/core.js
@@ -27,6 +27,7 @@ const updateTableRowsWithRowsData = (tables, tableId, recordsData = []) => {
};
export const checkIsDir = (record) => {
+ if (!record) return false;
const isDir = record[PRIVATE_COLUMN_KEY.IS_DIR];
if (typeof isDir === 'string') {
return isDir.toUpperCase() === 'TRUE';
diff --git a/frontend/src/pages/markdown-editor/header-toolbar/header-toolbar.js b/frontend/src/pages/markdown-editor/header-toolbar/header-toolbar.js
index 690120e6e8d..7f23efd2859 100644
--- a/frontend/src/pages/markdown-editor/header-toolbar/header-toolbar.js
+++ b/frontend/src/pages/markdown-editor/header-toolbar/header-toolbar.js
@@ -17,7 +17,7 @@ import Dirent from '../../../../src/models/dirent';
import '../css/header-toolbar.css';
const { seafileCollabServer } = window.app.config;
-const { canDownloadFile, repoID, filePath } = window.app.pageOptions;
+const { canDownloadFile, repoID, filePath, isRepoAdmin } = window.app.pageOptions;
const propTypes = {
editorApi: PropTypes.object.isRequired,
@@ -95,7 +95,7 @@ class HeaderToolbar extends React.Component {
};
onArticleInfoToggle = () => {
- const repoInfo = { permission: this.currentDirent.permission };
+ const repoInfo = { permission: this.currentDirent.permission, is_admin: isRepoAdmin, };
const eventBus = EventBus.getInstance();
eventBus.dispatch(EXTERNAL_EVENTS.ON_ARTICLE_INFO_TOGGLE, this.isFileInfoShow ? null : {
diff --git a/frontend/src/pages/sdoc/sdoc-editor/index.css b/frontend/src/pages/sdoc/sdoc-editor/index.css
index 66584c35223..d152a3dd188 100644
--- a/frontend/src/pages/sdoc/sdoc-editor/index.css
+++ b/frontend/src/pages/sdoc/sdoc-editor/index.css
@@ -15,6 +15,16 @@
background-color: inherit;
}
+.sdoc-content-right-panel .detail-header .seafile-multicolor-icon-set-up {
+ fill: #999;
+ font-weight: 700;
+ font-size: 16px;
+}
+
+.sdoc-content-right-panel .detail-header .detail-control:hover .seafile-multicolor-icon-set-up {
+ fill: #5a5a5a;
+}
+
.sdoc-content-right-panel .detail-header .sdoc-sm-close {
color: #999;
font-weight: 700;
diff --git a/frontend/src/pages/sdoc/sdoc-editor/index.js b/frontend/src/pages/sdoc/sdoc-editor/index.js
index ea6beab5d63..5742a7d223e 100644
--- a/frontend/src/pages/sdoc/sdoc-editor/index.js
+++ b/frontend/src/pages/sdoc/sdoc-editor/index.js
@@ -16,7 +16,7 @@ const SdocEditor = () => {
const [currentDirent, setCurrentDirent] = useState(null);
const { collaborators } = useCollaborators();
const plugins = useMemo(() => {
- const { repoID, docPath, docPerm } = window.seafile;
+ const { repoID, docPath, docPerm, isRepoAdmin } = window.seafile;
return [
{
name: 'sdoc-info',
@@ -29,7 +29,7 @@ const SdocEditor = () => {
repoID={repoID}
path={docPath}
dirent={currentDirent}
- repoInfo={{ permission: docPerm }}
+ repoInfo={{ permission: docPerm, is_admin: isRepoAdmin }}
width={width - 1}
component={{
headerComponent: {
diff --git a/frontend/src/view-file-sdoc.js b/frontend/src/view-file-sdoc.js
index e30a45fa9a5..c1087f17b22 100644
--- a/frontend/src/view-file-sdoc.js
+++ b/frontend/src/view-file-sdoc.js
@@ -15,11 +15,12 @@ const {
repoID, repoName, repoEncrypted, parentDir, filePerm,
docPath, docName, docUuid, seadocAccessToken, seadocServerUrl, assetsUrl,
isSdocRevision, isPublished, originFilename, revisionCreatedAt, originFileVersion,
- originFilePath, originDocUuid, revisionId, isFreezed, mobileLogin
+ originFilePath, originDocUuid, revisionId, isFreezed, mobileLogin, isRepoAdmin
} = window.app.pageOptions;
window.seafile = {
repoID,
+ isRepoAdmin,
docPath,
docName,
docUuid,
@@ -52,7 +53,7 @@ window.seafile = {
mobileLogin,
};
-const repoInfo = { encrypted: repoEncrypted, permission: filePerm };
+const repoInfo = { encrypted: repoEncrypted, permission: filePerm, is_admin: isRepoAdmin };
ReactDom.render(
diff --git a/media/css/sf_font3/iconfont.css b/media/css/sf_font3/iconfont.css
index d0684766eaf..def6c7fe635 100644
--- a/media/css/sf_font3/iconfont.css
+++ b/media/css/sf_font3/iconfont.css
@@ -1,11 +1,11 @@
@font-face {
font-family: "sf3-font"; /* Project id 1230969 */
- src: url('iconfont.eot?t=1732614348756'); /* IE9 */
- src: url('iconfont.eot?t=1732614348756#iefix') format('embedded-opentype'), /* IE6-IE8 */
- url('iconfont.woff2?t=1732614348756') format('woff2'),
- url('iconfont.woff?t=1732614348756') format('woff'),
- url('iconfont.ttf?t=1732614348756') format('truetype'),
- url('iconfont.svg?t=1732614348756#sf3-font') format('svg');
+ src: url('./iconfont.eot?t=1733301127109'); /* IE9 */
+ src: url('./iconfont.eot?t=1733301127109#iefix') format('embedded-opentype'), /* IE6-IE8 */
+ url('./iconfont.woff2?t=1733301127109') format('woff2'),
+ url('./iconfont.woff?t=1733301127109') format('woff'),
+ url('./iconfont.ttf?t=1733301127109') format('truetype'),
+ url('./iconfont.svg?t=1733301127109#sf3-font') format('svg');
}
.sf3-font {
diff --git a/media/css/sf_font3/iconfont.eot b/media/css/sf_font3/iconfont.eot
index d4fb6fdc870..4bb9fed7ba7 100644
Binary files a/media/css/sf_font3/iconfont.eot and b/media/css/sf_font3/iconfont.eot differ
diff --git a/media/css/sf_font3/iconfont.svg b/media/css/sf_font3/iconfont.svg
index afa771ec951..d40bdac5381 100644
--- a/media/css/sf_font3/iconfont.svg
+++ b/media/css/sf_font3/iconfont.svg
@@ -150,7 +150,7 @@
-
+
diff --git a/frontend/src/metadata/hooks/index.js b/frontend/src/metadata/hooks/index.js
index a00eced1d9a..ca990d0368c 100644
--- a/frontend/src/metadata/hooks/index.js
+++ b/frontend/src/metadata/hooks/index.js
@@ -1,2 +1,3 @@
export { MetadataProvider, useMetadata } from './metadata';
export { CollaboratorsProvider, useCollaborators } from './collaborators';
+export { MetadataDetailsProvider, useMetadataDetails } from './metadata-details';
diff --git a/frontend/src/metadata/hooks/metadata-details.js b/frontend/src/metadata/hooks/metadata-details.js
new file mode 100644
index 00000000000..45ecccb5eee
--- /dev/null
+++ b/frontend/src/metadata/hooks/metadata-details.js
@@ -0,0 +1,211 @@
+import React, { useContext, useEffect, useCallback, useState, useMemo, useRef } from 'react';
+import metadataAPI from '../api';
+import { Utils } from '../../utils/utils';
+import toaster from '../../components/toast';
+import { useMetadataStatus } from '../../hooks/metadata-status';
+import { SYSTEM_FOLDERS } from '../../constants';
+import Column from '../model/column';
+import { normalizeFields } from '../components/metadata-details/utils';
+import { CellType, EVENT_BUS_TYPE, PREDEFINED_COLUMN_KEYS, PRIVATE_COLUMN_KEY } from '../constants';
+import { getCellValueByColumn, getOptionName, getColumnOptionNamesByIds, getColumnOptionNameById, getRecordIdFromRecord,
+ getFileObjIdFromRecord
+} from '../utils/cell';
+import tagsAPI from '../../tag/api';
+import { getColumnByKey, getColumnOptions, getColumnOriginName } from '../utils/column';
+
+const MetadataDetailsContext = React.createContext(null);
+
+export const MetadataDetailsProvider = ({ repoID, repoInfo, path, dirent, direntDetail, direntType, children }) => {
+ const { enableMetadata, detailsSettings, modifyDetailsSettings } = useMetadataStatus();
+
+ const [isLoading, setLoading] = useState(true);
+ const [record, setRecord] = useState(null);
+ const [originColumns, setOriginColumns] = useState([]);
+
+ const canModifyRecord = useMemo(() => repoInfo.permission !== 'admin' && repoInfo.permission !== 'rw' ? false : true, [repoInfo]);
+ const canModifyDetails = useMemo(() => repoInfo.is_admin, [repoInfo]);
+
+ const allColumnsRef = useRef([]);
+
+ const columns = useMemo(() => {
+ const orderAndHiddenColumns = detailsSettings?.columns || [];
+ if (!Array.isArray(orderAndHiddenColumns) || orderAndHiddenColumns.length === 0) {
+ return originColumns.map(c => ({ ...c, shown: true }));
+ }
+ const oldColumnsMap = orderAndHiddenColumns.reduce((pre, cur) => {
+ pre[cur.key] = true;
+ return pre;
+ }, {});
+ const columnsMap = originColumns.reduce((pre, cur) => {
+ pre[cur.key] = cur;
+ return pre;
+ }, {});
+ const exitColumnsOrder = orderAndHiddenColumns.map(c => {
+ const column = columnsMap[c.key];
+ if (column) return { ...c, ...column };
+ return null;
+ }).filter(c => c);
+ const newColumns = originColumns.filter(c => !oldColumnsMap[c.key]).map(c => ({ ...c, shown: false }));
+ return [...exitColumnsOrder, ...newColumns];
+ }, [originColumns, detailsSettings]);
+
+ const localRecordChanged = useCallback((recordId, updates) => {
+ if (getRecordIdFromRecord(record) !== recordId) return;
+ const newRecord = { ...record, ...updates };
+ setRecord(newRecord);
+ }, [record]);
+
+ const onChange = useCallback((fieldKey, newValue) => {
+ const field = getColumnByKey(originColumns, fieldKey);
+ const fileName = getColumnOriginName(field);
+ const recordId = getRecordIdFromRecord(record);
+ const fileObjId = getFileObjIdFromRecord(record);
+ let update = { [fileName]: 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) : [] };
+ }
+ metadataAPI.modifyRecord(repoID, recordId, update, fileObjId).then(res => {
+ setRecord({ ...record, ...update });
+ if (window?.sfMetadataContext?.eventBus) {
+ window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.LOCAL_RECORD_CHANGED, recordId, update);
+ }
+ }).catch(error => {
+ const errorMsg = Utils.getErrorMsg(error);
+ toaster.danger(errorMsg);
+ });
+ }, [repoID, record, originColumns]);
+
+ const modifyColumnData = useCallback((fieldKey, newData) => {
+ let newColumns = originColumns.slice(0);
+ let update;
+ metadataAPI.modifyColumnData(repoID, fieldKey, newData).then(res => {
+ const newColumn = new Column(res.data.column);
+ const fieldIndex = originColumns.findIndex(f => f.key === fieldKey);
+ newColumns[fieldIndex] = newColumn;
+ return newColumn;
+ }).then((newField) => {
+ const fileName = getColumnOriginName(newField);
+ const options = getColumnOptions(newField);
+ const newOption = options[options.length - 1];
+ update = { [fileName]: newOption.id };
+ if (!PREDEFINED_COLUMN_KEYS.includes(fieldKey) && newField.type === CellType.SINGLE_SELECT) {
+ update = { [fileName]: getOptionName(options, newOption.id) };
+ } else if (newField.type === CellType.MULTIPLE_SELECT) {
+ const oldValue = getCellValueByColumn(record, newField) || [];
+ update = { [fileName]: [...oldValue, newOption.name] };
+ }
+ return metadataAPI.modifyRecord(repoID, record._id, update, record._obj_id);
+ }).then(res => {
+ setOriginColumns(newColumns);
+ setRecord({ ...record, ...update });
+ }).catch(error => {
+ const errorMsg = Utils.getErrorMsg(error);
+ toaster.danger(errorMsg);
+ });
+ }, [repoID, record, originColumns]);
+
+ const updateFileTags = useCallback((updateRecords) => {
+ const { record_id, tags } = updateRecords[0];
+
+ tagsAPI.updateFileTags(repoID, [{ record_id, tags }]).then(res => {
+ const newValue = tags ? tags.map(id => ({ row_id: id, display_value: id })) : [];
+ const update = { [PRIVATE_COLUMN_KEY.TAGS]: newValue };
+ setRecord({ ...record, ...update });
+ if (window?.sfMetadataContext?.eventBus) {
+ window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.LOCAL_RECORD_CHANGED, record_id, update);
+ }
+ }).catch(error => {
+ const errorMsg = Utils.getErrorMsg(error);
+ toaster.danger(errorMsg);
+ });
+ }, [repoID, record]);
+
+ const saveColumns = useCallback((columns) => {
+ modifyDetailsSettings({ columns: columns.map(c => ({ key: c.key, shown: c.shown })) });
+ }, [modifyDetailsSettings]);
+
+ const modifyHiddenColumns = useCallback((hiddenColumns) => {
+ let newColumns = columns.slice(0);
+ newColumns = newColumns.map(c => ({ ...c, shown: !hiddenColumns.includes(c.key) }));
+ saveColumns(newColumns);
+ }, [columns, saveColumns]);
+
+ const modifyColumnOrder = useCallback((sourceColumnKey, targetColumnKey) => {
+ const targetColumnIndex = columns.findIndex(c => c.key === targetColumnKey);
+ const sourceColumn = columns.find(c => c.key === sourceColumnKey);
+ let newColumns = columns.slice(0);
+ newColumns = newColumns.filter(c => c.key !== sourceColumnKey);
+ newColumns.splice(targetColumnIndex, 0, sourceColumn);
+ saveColumns(newColumns);
+ }, [columns, saveColumns]);
+
+ useEffect(() => {
+ setLoading(true);
+ if (!dirent || !direntDetail || !enableMetadata || SYSTEM_FOLDERS.find(folderPath => path.startsWith(folderPath))) {
+ setRecord(null);
+ setOriginColumns([]);
+ setLoading(false);
+ return;
+ }
+
+ const dirName = Utils.getDirName(path);
+ const fileName = Utils.getFileName(path);
+ let parentDir = direntType === 'file' ? dirName : dirName.slice(0, dirName.length - fileName.length - 1);
+
+ if (!parentDir.startsWith('/')) {
+ parentDir = '/' + parentDir;
+ }
+ metadataAPI.getMetadataRecordInfo(repoID, parentDir, fileName).then(res => {
+ const { results, metadata } = res.data;
+ const record = Array.isArray(results) && results.length > 0 ? results[0] : {};
+ const columns = normalizeFields(metadata).map(field => new Column(field));
+ allColumnsRef.current = columns;
+ setRecord(record);
+ setOriginColumns(columns);
+ setLoading(false);
+ }).catch(error => {
+ const errMessage = Utils.getErrorMsg(error);
+ toaster.danger(errMessage);
+ setLoading(false);
+ });
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [enableMetadata, repoID, path, direntType, dirent, direntDetail]);
+
+ useEffect(() => {
+ const eventBus = window?.sfMetadataContext?.eventBus;
+ if (!eventBus) return;
+ const unsubscribeLocalRecordChanged = eventBus.subscribe(EVENT_BUS_TYPE.LOCAL_RECORD_DETAIL_CHANGED, localRecordChanged);
+ return () => {
+ unsubscribeLocalRecordChanged();
+ };
+ }, [localRecordChanged]);
+
+ return (
+
+
)}