record the capture info collapse status (#7392)

* record the capture info collapse status * fix typo --------- Co-authored-by: zhouwenxuan <[email protected]>
haiwen · Jan 22, 2025 · cfe507f · cfe507f
1 parent 55c1d36
commit cfe507f
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 5 deletions.
diff --git a/frontend/src/components/dirent-detail/dirent-details/file-details/collapse/index.js b/frontend/src/components/dirent-detail/dirent-details/file-details/collapse/index.js
@@ -1,14 +1,16 @@
 import React, { useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import { CAPTURE_INFO_SHOW_KEY } from '../../../../../constants';
 
 import './index.css';
 
-const Collapse = ({ className, title, children, isCollapse = true }) => {
-  const [showChildren, setShowChildren] = useState(isCollapse);
+const Collapse = ({ className, title, children, isShow = true }) => {
+  const [showChildren, setShowChildren] = useState(isShow);
 
   const toggleShowChildren = useCallback(() => {
     setShowChildren(!showChildren);
+    window.sfMetadataContext.localStorage.setItem(CAPTURE_INFO_SHOW_KEY, !showChildren);
   }, [showChildren]);
 
   return (
@@ -29,7 +31,7 @@ const Collapse = ({ className, title, children, isCollapse = true }) => {
 };
 
 Collapse.propTypes = {
-  isCollapse: PropTypes.bool,
+  isShow: PropTypes.bool,
   className: PropTypes.string,
   title: PropTypes.string,
   children: PropTypes.any,

diff --git a/frontend/src/components/dirent-detail/dirent-details/file-details/index.js b/frontend/src/components/dirent-detail/dirent-details/file-details/index.js
@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { v4 as uuidV4 } from 'uuid';
 import { Formatter } from '@seafile/sf-metadata-ui-component';
@@ -15,6 +15,7 @@ import ObjectUtils from '../../../../metadata/utils/object-utils';
 import { getCellValueByColumn, getDateDisplayString, decimalToExposureTime } from '../../../../metadata/utils/cell';
 import Collapse from './collapse';
 import { useMetadataStatus } from '../../../../hooks';
+import { CAPTURE_INFO_SHOW_KEY } from '../../../../constants';
 
 import './index.css';
 
@@ -59,6 +60,7 @@ const getImageInfoValue = (key, value) => {
 
 const FileDetails = React.memo(({ repoID, dirent, path, direntDetail, onFileTagChanged, repoTags, fileTagList }) => {
   const [isEditFileTagShow, setEditFileTagShow] = useState(false);
+  const [isCaptureInfoShow, setCaptureInfoShow] = useState(false);
   const { enableMetadataManagement, enableMetadata } = useMetadataStatus();
   const { record } = useMetadataDetails();
 
@@ -69,6 +71,11 @@ const FileDetails = React.memo(({ repoID, dirent, path, direntDetail, onFileTagC
   const lastModifiedTimeField = useMemo(() => ({ type: CellType.MTIME, name: gettext('Last modified time') }), []);
   const tagsField = useMemo(() => ({ type: CellType.SINGLE_SELECT, name: gettext('Tags') }), []);
 
+  useEffect(() => {
+    const savedValue = window.sfMetadataContext.localStorage.getItem(CAPTURE_INFO_SHOW_KEY) || false;
+    setCaptureInfoShow(savedValue);
+  }, []);
+
   const onEditFileTagToggle = useCallback(() => {
     setEditFileTagShow(!isEditFileTagShow);
   }, [isEditFileTagShow]);
@@ -129,7 +136,7 @@ const FileDetails = React.memo(({ repoID, dirent, path, direntDetail, onFileTagC
           {dom}
         </Collapse>
         {Object.keys(fileDetailsJson).length > 0 && (
-          <Collapse title={gettext('Capture information')}>
+          <Collapse title={gettext('Capture information')} isShow={isCaptureInfoShow}>
             {Object.entries(fileDetailsJson).map(item => {
               return (
                 <div className="dirent-detail-item sf-metadata-property-detail-capture-information-item" key={item[0]}>

diff --git a/frontend/src/constants/index.js b/frontend/src/constants/index.js
@@ -46,6 +46,8 @@ export const SYSTEM_FOLDERS = [
 
 export const DIRENT_DETAIL_SHOW_KEY = 'sf_dirent_detail_show';
 
+export const CAPTURE_INFO_SHOW_KEY = 'sf_capture_info_show';
+
 export const TREE_PANEL_STATE_KEY = 'sf_dir_view_tree_panel_open';
 
 export const TREE_PANEL_SECTION_STATE_KEY = 'sf_dir_view_tree_panel_section_state';