refactor: section (#6224)

* refactor: section

* feat: update code

---------

Co-authored-by: 杨国璇 <ygx@Hello-word.local>

frontend/src/components/dir-view-mode/dir-column-nav.js

@@ -10,10 +10,10 @@ import CreateFolder from '../../components/dialog/create-folder-dialog';
 import CreateFile from '../../components/dialog/create-file-dialog';
 import ImageDialog from '../../components/dialog/image-dialog';
 import { siteRoot, thumbnailSizeForOriginal } from '../../utils/constants';
-import seahubMetadataAPI from '../metadata-manage/seahub-metadata-api';
 import { gettext } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
-import toaster from '../../components/toast';
+import TreeSection from '../../components/tree-section';
+import DirViews from './dir-views';
 
 const propTypes = {
   currentPath: PropTypes.string.isRequired,
@@ -102,22 +102,6 @@ class DirColumnNav extends React.Component {
       case 'Open in New Tab':
         this.onOpenFile(node);
         break;
-      case 'Enable Metadata':
-        if (confirm(gettext('Enable metadata management?'))){
-          seahubMetadataAPI.enableMetadataManagement(this.props.repoID).catch((error) => {
-            let errMessage = Utils.getErrorMsg(error);
-            toaster.danger(errMessage);
-          });
-        }
-        break;
-      case 'Disable Metadata':
-        if (confirm(gettext('Disable metadata management?'))){
-          seahubMetadataAPI.disableMetadataManagement(this.props.repoID).catch((error) => {
-            let errMessage = Utils.getErrorMsg(error);
-            toaster.danger(errMessage);
-          });
-        }
-        break;
     }
   };
 
@@ -261,32 +245,41 @@ class DirColumnNav extends React.Component {
     e.stopPropagation();
   };
 
+  renderContent = () => {
+    if (this.props.isTreeDataLoading) return (<Loading/>);
+    return (
+      <>
+        <TreeSection title={gettext('Files')}>
+          <TreeView
+            userPerm={this.props.userPerm}
+            isNodeMenuShow={this.isNodeMenuShow}
+            treeData={this.props.treeData}
+            currentPath={this.props.currentPath}
+            onNodeClick={this.onNodeClick}
+            onNodeExpanded={this.props.onNodeExpanded}
+            onNodeCollapse={this.props.onNodeCollapse}
+            onMenuItemClick={this.onMenuItemClick}
+            onFreezedItem={this.onFreezedItem}
+            onUnFreezedItem={this.onUnFreezedItem}
+            onItemMove={this.props.onItemMove}
+            currentRepoInfo={this.props.currentRepoInfo}
+            selectedDirentList={this.props.selectedDirentList}
+            onItemsMove={this.props.onItemsMove}
+            repoID={this.props.repoID}
+          />
+        </TreeSection>
+        <DirViews repoID={this.props.repoID} userPerm={this.props.userPerm} />
+      </>
+    );
+  };
+
   render() {
     let flex = this.props.navRate ? '0 0 ' + this.props.navRate * 100 + '%' : '0 0 25%';
     const select = this.props.inResizing ? 'none' : '';
     return (
       <Fragment>
         <div className="dir-content-nav" role="navigation" style={{flex: (flex), userSelect: select}} onScroll={this.stopTreeScrollPropagation}>
-          {this.props.isTreeDataLoading ?
-            (<Loading/>) :
-            (<TreeView
-              userPerm={this.props.userPerm}
-              isNodeMenuShow={this.isNodeMenuShow}
-              treeData={this.props.treeData}
-              currentPath={this.props.currentPath}
-              onNodeClick={this.onNodeClick}
-              onNodeExpanded={this.props.onNodeExpanded}
-              onNodeCollapse={this.props.onNodeCollapse}
-              onMenuItemClick={this.onMenuItemClick}
-              onFreezedItem={this.onFreezedItem}
-              onUnFreezedItem={this.onUnFreezedItem}
-              onItemMove={this.props.onItemMove}
-              currentRepoInfo={this.props.currentRepoInfo}
-              selectedDirentList={this.props.selectedDirentList}
-              onItemsMove={this.props.onItemsMove}
-              repoID={this.props.repoID}
-            />)
-          }
+          {this.renderContent()}
         </div>
         {this.state.isAddFolderDialogShow && (
           <ModalPortal>

frontend/src/components/dir-view-mode/dir-views/index.js

@@ -0,0 +1,75 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import PropTypes from 'prop-types';
+import { gettext } from '../../../utils/constants';
+import { Utils } from '../../../utils/utils';
+import TreeSection from '../../tree-section';
+import MetadataStatusManagementDialog from '../../metadata-manage/metadata-status-manage-dialog';
+import metadataManagerAPI from '../../metadata-manage/api';
+import toaster from '../../toast';
+import MetadataViews from '../../metadata-manage/metadata-views';
+
+const DirViews = ({ userPerm, repoID }) => {
+  const enableMetadataManagement = useMemo(() => {
+    return window.app.pageOptions.enableMetadataManagement;
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [window.app.pageOptions.enableMetadataManagement]);
+
+  const [loading, setLoading] = useState(true);
+  const [showMetadataStatusManagementDialog, setShowMetadataStatusManagementDialog] = useState(false);
+  const [metadataStatus, setMetadataStatus] = useState(false);
+  const moreOperations = useMemo(() => {
+    if (!enableMetadataManagement) return [];
+    if (userPerm !== 'rw' && userPerm !== 'admin') return [];
+    return [
+      { key: 'extended-properties', value: gettext('Extended properties') }
+    ];
+  }, [enableMetadataManagement, userPerm]);
+
+  useEffect(() => {
+    const repoMetadataManagementEnabledStatusRes = metadataManagerAPI.getRepoMetadataManagementEnabledStatus(repoID);
+    Promise.all([repoMetadataManagementEnabledStatusRes]).then(results => {
+      const [repoMetadataManagementEnabledStatusRes] = results;
+      setMetadataStatus(repoMetadataManagementEnabledStatusRes.data.enabled);
+      setLoading(false);
+    }).catch(error => {
+      const errorMsg = Utils.getErrorMsg(error, true);
+      toaster.danger(errorMsg);
+      setLoading(false);
+    });
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const moreOperationClick = useCallback((operationKey) => {
+    if (operationKey === 'extended-properties') {
+      setShowMetadataStatusManagementDialog(true);
+      return;
+    }
+  }, []);
+
+  const closeMetadataManagementDialog = useCallback(() => {
+    setShowMetadataStatusManagementDialog(false);
+  }, []);
+
+  const toggleMetadataStatus = useCallback((value) => {
+    if (metadataStatus === value) return;
+    setMetadataStatus(value);
+  }, [metadataStatus]);
+
+  return (
+    <>
+      <TreeSection title={gettext('Views')} moreKey={{ name: 'views' }} moreOperations={moreOperations} moreOperationClick={moreOperationClick}>
+        {!loading && metadataStatus && (<MetadataViews repoID={repoID} />)}
+      </TreeSection>
+      {showMetadataStatusManagementDialog && (
+        <MetadataStatusManagementDialog value={metadataStatus} repoID={repoID} toggle={closeMetadataManagementDialog} submit={toggleMetadataStatus} />
+      )}
+    </>
+  );
+};
+
+DirViews.propTypes = {
+  userPerm: PropTypes.string,
+  repoID: PropTypes.string,
+};
+
+export default DirViews;