record the status of detail to local storage

haiwen · Dec 16, 2024 · 3e768ba · 3e768ba
1 parent 156de7f
commit 3e768ba
Show file tree

Hide file tree

Showing 16 changed files with 47 additions and 59 deletions.
diff --git a/frontend/src/components/cur-dir-path/dir-tool.js b/frontend/src/components/cur-dir-path/dir-tool.js
@@ -10,7 +10,6 @@ import ViewModes from '../../components/view-modes';
 import SortMenu from '../../components/sort-menu';
 import MetadataViewToolBar from '../../metadata/components/view-toolbar';
 import { PRIVATE_FILE_TYPE } from '../../constants';
-import { DIRENT_DETAIL_MODE } from '../dir-view-mode/constants';
 
 const propTypes = {
   repoID: PropTypes.string.isRequired,
@@ -25,7 +24,7 @@ const propTypes = {
   sortOrder: PropTypes.string,
   sortItems: PropTypes.func,
   viewId: PropTypes.string,
-  onCloseDetail: PropTypes.func,
+  onToggleDetail: PropTypes.func,
 };
 
 class DirTool extends React.Component {
@@ -92,14 +91,10 @@ class DirTool extends React.Component {
     this.props.sortItems(sortBy, sortOrder);
   };
 
-  showDirentDetail = () => {
-    this.props.switchViewMode(DIRENT_DETAIL_MODE);
-  };
-
   render() {
     const menuItems = this.getMenu();
     const { isDropdownMenuOpen } = this.state;
-    const { repoID, currentMode, currentPath, sortBy, sortOrder, viewId, isCustomPermission } = this.props;
+    const { repoID, currentMode, currentPath, sortBy, sortOrder, viewId, isCustomPermission, onToggleDetail } = this.props;
     const propertiesText = TextTranslation.PROPERTIES.value;
     const isFileExtended = currentPath.startsWith('/' + PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES + '/');
     const isTagView = currentPath.startsWith('/' + PRIVATE_FILE_TYPE.TAGS_PROPERTIES + '/');
@@ -110,8 +105,7 @@ class DirTool extends React.Component {
           <MetadataViewToolBar
             viewId={viewId}
             isCustomPermission={isCustomPermission}
-            showDetail={this.showDirentDetail}
-            closeDetail={this.props.onCloseDetail}
+            onToggleDetail={onToggleDetail}
           />
         </div>
       );
@@ -130,7 +124,7 @@ class DirTool extends React.Component {
           <ViewModes currentViewMode={currentMode} switchViewMode={this.props.switchViewMode} />
           <SortMenu sortBy={sortBy} sortOrder={sortOrder} onSelectSortOption={this.onSelectSortOption} />
           {(!isCustomPermission) &&
-            <div className="cur-view-path-btn" onClick={this.showDirentDetail}>
+            <div className="cur-view-path-btn" onClick={onToggleDetail}>
               <span className="sf3-font sf3-font-info" aria-label={propertiesText} title={propertiesText}></span>
             </div>
           }

diff --git a/frontend/src/components/dir-view-mode/constants.js b/frontend/src/components/dir-view-mode/constants.js
@@ -1,5 +1,4 @@
 export const LIST_MODE = 'list';
 export const GRID_MODE = 'grid';
-export const DIRENT_DETAIL_MODE = 'detail';
 export const METADATA_MODE = 'metadata';
 export const TAGS_MODE = 'tags';
diff --git a/frontend/src/components/dir-view-mode/dir-column-view.js b/frontend/src/components/dir-view-mode/dir-column-view.js
@@ -81,7 +81,6 @@ const propTypes = {
   onItemsScroll: PropTypes.func.isRequired,
   eventBus: PropTypes.object,
   updateCurrentDirent: PropTypes.func.isRequired,
-  closeDirentDetail: PropTypes.func.isRequired,
 };
 
 class DirColumnView extends React.Component {
@@ -206,7 +205,6 @@ class DirColumnView extends React.Component {
               deleteFilesCallback={this.props.deleteFilesCallback}
               renameFileCallback={this.props.renameFileCallback}
               updateCurrentDirent={this.props.updateCurrentDirent}
-              closeDirentDetail={this.props.closeDirentDetail}
               showDirentDetail={this.props.showDirentDetail}
             />
           )}
@@ -219,7 +217,6 @@ class DirColumnView extends React.Component {
               deleteFilesCallback={this.props.deleteFilesCallback}
               renameFileCallback={this.props.renameFileCallback}
               updateCurrentDirent={this.props.updateCurrentDirent}
-              closeDirentDetail={this.props.closeDirentDetail}
             />
           )}
           {currentMode === LIST_MODE &&

diff --git a/frontend/src/components/dirent-detail/index.js b/frontend/src/components/dirent-detail/index.js
@@ -6,8 +6,9 @@ import ViewDetails from '../../metadata/components/view-details';
 import ObjectUtils from '../../metadata/utils/object-utils';
 import { MetadataContext } from '../../metadata';
 import { PRIVATE_FILE_TYPE } from '../../constants';
+import { TAGS_MODE } from '../dir-view-mode/constants';
 
-const Detail = React.memo(({ repoID, path, dirent, currentRepoInfo, repoTags, fileTags, onClose, onFileTagChanged }) => {
+const Detail = React.memo(({ repoID, path, dirent, currentRepoInfo, repoTags, fileTags, onClose, onFileTagChanged, currentMode }) => {
   const isView = useMemo(() => path.startsWith('/' + PRIVATE_FILE_TYPE.FILE_EXTENDED_PROPERTIES), [path]);
 
   useEffect(() => {
@@ -34,6 +35,8 @@ const Detail = React.memo(({ repoID, path, dirent, currentRepoInfo, repoTags, fi
     return (<LibDetail currentRepoInfo={currentRepoInfo} onClose={onClose} />);
   }
 
+  if (currentMode === TAGS_MODE) return null;
+
   return (
     <DirentDetail
       repoID={repoID}
@@ -66,6 +69,7 @@ Detail.propTypes = {
   fileTags: PropTypes.array,
   onClose: PropTypes.func,
   onFileTagChanged: PropTypes.func,
+  currentMode: PropTypes.string,
 };
 
 export default Detail;
diff --git a/frontend/src/components/toolbar/selected-dirents-toolbar.js b/frontend/src/components/toolbar/selected-dirents-toolbar.js
@@ -35,7 +35,6 @@ const propTypes = {
   unSelectDirent: PropTypes.func.isRequired,
   updateDirent: PropTypes.func.isRequired,
   currentMode: PropTypes.string.isRequired,
-  switchViewMode: PropTypes.func.isRequired,
   direntList: PropTypes.array.isRequired,
   onItemRename: PropTypes.func.isRequired,
   showDirentDetail: PropTypes.func.isRequired,

diff --git a/frontend/src/metadata/components/view-details/index.js b/frontend/src/metadata/components/view-details/index.js
@@ -4,7 +4,7 @@ import { gettext, mediaUrl } from '../../../utils/constants';
 import { Detail, Header, Body } from '../../../components/dirent-detail/detail';
 import EmptyTip from '../../../components/empty-tip';
 import { useMetadata } from '../../hooks';
-import { VIEW_TYPE } from '../../constants';
+import { VIEW_TYPE, VIEW_TYPES_SUPPORT_SHOW_DETAIL } from '../../constants';
 
 import './index.css';
 
@@ -13,14 +13,16 @@ const ViewDetails = ({ viewId, onClose }) => {
 
   const view = useMemo(() => viewsMap[viewId], [viewId, viewsMap]);
   const icon = useMemo(() => {
-    const type = view.type;
+    const type = view?.type;
     if (type === VIEW_TYPE.GALLERY) return `${mediaUrl}favicons/gallery.png`;
     if (type === VIEW_TYPE.TABLE) return `${mediaUrl}favicons/table.png`;
     if (type === VIEW_TYPE.FACE_RECOGNITION) return `${mediaUrl}favicons/face-recognition-view.png`;
     if (type === VIEW_TYPE.KANBAN) return `${mediaUrl}favicons/kanban.png`;
     return `${mediaUrl}img/file/256/file.png`;
   }, [view]);
 
+  if (!view || !VIEW_TYPES_SUPPORT_SHOW_DETAIL.includes(view.type)) return null;
+
   return (
     <Detail className="sf-metadata-view-detail">
       <Header title={view.name} icon={icon} iconSize={28} onClose={onClose} />

diff --git a/frontend/src/metadata/components/view-toolbar/face-recognition/index.js b/frontend/src/metadata/components/view-toolbar/face-recognition/index.js
@@ -4,7 +4,7 @@ import { GalleryGroupBySetter, GallerySliderSetter, SortSetter } from '../../dat
 import { gettext } from '../../../../utils/constants';
 import { EVENT_BUS_TYPE, FACE_RECOGNITION_VIEW_ID, VIEW_TYPE } from '../../../constants';
 
-const FaceRecognitionViewToolbar = ({ readOnly, isCustomPermission, showDetail }) => {
+const FaceRecognitionViewToolbar = ({ readOnly, isCustomPermission, onToggleDetail }) => {
   const [isShow, setShow] = useState(false);
   const [view, setView] = useState({});
 
@@ -53,7 +53,7 @@ const FaceRecognitionViewToolbar = ({ readOnly, isCustomPermission, showDetail }
           modifySorts={modifySorts}
         />
         {!isCustomPermission && (
-          <div className="cur-view-path-btn ml-2" onClick={showDetail}>
+          <div className="cur-view-path-btn ml-2" onClick={onToggleDetail}>
             <span className="sf3-font sf3-font-info" aria-label={gettext('Properties')} title={gettext('Properties')}></span>
           </div>
         )}
@@ -66,7 +66,7 @@ const FaceRecognitionViewToolbar = ({ readOnly, isCustomPermission, showDetail }
 FaceRecognitionViewToolbar.propTypes = {
   isCustomPermission: PropTypes.bool,
   readOnly: PropTypes.bool,
-  showDetail: PropTypes.func,
+  onToggleDetail: PropTypes.func,
 };
 
 export default FaceRecognitionViewToolbar;
diff --git a/frontend/src/metadata/components/view-toolbar/gallery-view-toolbar/index.js b/frontend/src/metadata/components/view-toolbar/gallery-view-toolbar/index.js
@@ -6,7 +6,7 @@ import { gettext } from '../../../../utils/constants';
 
 const GalleryViewToolbar = ({
   readOnly, isCustomPermission, view, collaborators,
-  modifyFilters, modifySorts, showDetail,
+  modifyFilters, modifySorts, onToggleDetail,
 }) => {
   const viewType = useMemo(() => view.type, [view]);
   const viewColumns = useMemo(() => {
@@ -48,7 +48,7 @@ const GalleryViewToolbar = ({
           modifySorts={modifySorts}
         />
         {!isCustomPermission && (
-          <div className="cur-view-path-btn ml-2" onClick={showDetail}>
+          <div className="cur-view-path-btn ml-2" onClick={onToggleDetail}>
             <span className="sf3-font sf3-font-info" aria-label={gettext('Properties')} title={gettext('Properties')}></span>
           </div>
         )}
@@ -65,7 +65,7 @@ GalleryViewToolbar.propTypes = {
   collaborators: PropTypes.array,
   modifyFilters: PropTypes.func,
   modifySorts: PropTypes.func,
-  showDetail: PropTypes.func,
+  onToggleDetail: PropTypes.func,
 };
 
 export default GalleryViewToolbar;
diff --git a/frontend/src/metadata/components/view-toolbar/index.js b/frontend/src/metadata/components/view-toolbar/index.js
@@ -9,7 +9,7 @@ import MapViewToolBar from './map-view-toolbar';
 
 import './index.css';
 
-const ViewToolBar = ({ viewId, isCustomPermission, showDetail, closeDetail }) => {
+const ViewToolBar = ({ viewId, isCustomPermission, onToggleDetail }) => {
   const [view, setView] = useState(null);
   const [collaborators, setCollaborators] = useState([]);
 
@@ -89,14 +89,14 @@ const ViewToolBar = ({ viewId, isCustomPermission, showDetail, closeDetail }) =>
           collaborators={collaborators}
           modifyFilters={modifyFilters}
           modifySorts={modifySorts}
-          showDetail={showDetail}
+          onToggleDetail={onToggleDetail}
         />
       )}
       {viewType === VIEW_TYPE.FACE_RECOGNITION && (
         <FaceRecognitionViewToolbar
           isCustomPermission={isCustomPermission}
           view={view}
-          showDetail={showDetail}
+          onToggleDetail={onToggleDetail}
         />
       )}
       {viewType === VIEW_TYPE.KANBAN && (
@@ -107,8 +107,7 @@ const ViewToolBar = ({ viewId, isCustomPermission, showDetail, closeDetail }) =>
           collaborators={collaborators}
           modifyFilters={modifyFilters}
           modifySorts={modifySorts}
-          showDetail={showDetail}
-          closeDetail={closeDetail}
+          onToggleDetail={onToggleDetail}
         />
       )}
       {viewType === VIEW_TYPE.MAP && (
@@ -126,8 +125,7 @@ const ViewToolBar = ({ viewId, isCustomPermission, showDetail, closeDetail }) =>
 ViewToolBar.propTypes = {
   viewId: PropTypes.string,
   isCustomPermission: PropTypes.bool,
-  showDetail: PropTypes.func,
-  closeDetail: PropTypes.func,
+  onToggleDetail: PropTypes.func,
 };
 
 export default ViewToolBar;
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
@@ -12,8 +12,7 @@ const KanbanViewToolBar = ({
   collaborators,
   modifyFilters,
   modifySorts,
-  showDetail,
-  closeDetail,
+  onToggleDetail,
 }) => {
   const viewType = useMemo(() => view.type, [view]);
   const viewColumns = useMemo(() => {
@@ -26,14 +25,14 @@ const KanbanViewToolBar = ({
   }, [viewColumns]);
 
   const onToggleKanbanSetting = () => {
-    closeDetail();
+    onToggleDetail();
     window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.TOGGLE_KANBAN_SETTINGS);
   };
 
   const toggleDetails = useCallback(() => {
     window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.CLOSE_KANBAN_SETTINGS);
-    showDetail();
-  }, [showDetail]);
+    onToggleDetail();
+  }, [onToggleDetail]);
 
   return (
     <>
@@ -88,7 +87,8 @@ KanbanViewToolBar.propTypes = {
   view: PropTypes.object,
   collaborators: PropTypes.array,
   modifyFilters: PropTypes.func,
-  modifySorts: PropTypes.func
+  modifySorts: PropTypes.func,
+  onToggleDetail: PropTypes.func,
 };
 
 export default KanbanViewToolBar;
diff --git a/frontend/src/metadata/constants/view.js b/frontend/src/metadata/constants/view.js
@@ -113,3 +113,5 @@ export const VIEW_DEFAULT_SETTINGS = {
     [KANBAN_SETTINGS_KEYS.COLUMNS]: [],
   }
 };
+
+export const VIEW_TYPES_SUPPORT_SHOW_DETAIL = [VIEW_TYPE.GALLERY, VIEW_TYPE.KANBAN];
diff --git a/frontend/src/metadata/hooks/metadata-view.js b/frontend/src/metadata/hooks/metadata-view.js
@@ -140,7 +140,6 @@ export const MetadataViewProvider = ({
         deleteFilesCallback: params.deleteFilesCallback,
         renameFileCallback: params.renameFileCallback,
         updateCurrentDirent: params.updateCurrentDirent,
-        closeDirentDetail: params.closeDirentDetail,
         showDirentDetail: params.showDirentDetail,
       }}
     >

diff --git a/frontend/src/metadata/views/face-recognition/peoples/index.js b/frontend/src/metadata/views/face-recognition/peoples/index.js
@@ -17,7 +17,7 @@ const Peoples = ({ peoples, onOpenPeople, onRename }) => {
 
   const containerRef = useRef(null);
 
-  const { metadata, store, closeDirentDetail } = useMetadataView();
+  const { metadata, store } = useMetadataView();
 
   const loadMore = useCallback(async () => {
     if (isLoadingMore) return;
@@ -63,12 +63,6 @@ const Peoples = ({ peoples, onOpenPeople, onRename }) => {
     return () => {};
   }, []);
 
-  useEffect(() => {
-    closeDirentDetail();
-    return () => {};
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   if (!Array.isArray(peoples) || peoples.length === 0) return (<EmptyTip text={gettext('Identifying portraits...')} />);
 
   return (
-Original file line number
+Diff line change
@@ Expand Up / @@ -113,3 +113,5 @@ export const VIEW_DEFAULT_SETTINGS = { @@
         [KANBAN_SETTINGS_KEYS.COLUMNS]: [],
       }
     };
+    export const VIEW_TYPES_SUPPORT_SHOW_DETAIL = [VIEW_TYPE.GALLERY, VIEW_TYPE.KANBAN];