optimize frontend

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

@@ -10,7 +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';
 
 const propTypes = {
   currentPath: PropTypes.string.isRequired,
@@ -99,6 +102,22 @@ 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;
     }
   };
 

frontend/src/components/metadata-manage/metadata-manage-view.js

@@ -4,6 +4,8 @@ import { Utils } from '../../utils/utils';
 import { gettext } from '../../utils/constants';
 import toaster from '../../components/toast';
 import seahubMetadataAPI from './seahub-metadata-api';
+import { hideMenu, showMenu } from '../context-menu/actions';
+import TextTranslation from '../../utils/text-translation';
 
 const propTypes = {
   repoID: PropTypes.string.isRequired,
@@ -15,27 +17,24 @@ class MetadataManageView extends React.Component {
     super(props);
     this.state = {
       isHighlight: false,
-      isShowOperationMenu: false,
+      menuList: []
     };
   }
 
   onMouseEnter = () => {
     this.setState({
-      isShowOperationMenu: true,
       isHighlight: true,
     });
   };
 
   onMouseOver = () => {
     this.setState({
-      isShowOperationMenu: true,
       isHighlight: true,
     });
   };
 
   onMouseLeave = () => {
     this.setState({
-      isShowOperationMenu: false,
       isHighlight: false,
     });
   };
@@ -47,13 +46,51 @@ class MetadataManageView extends React.Component {
     }
   };
 
+  getMenuList = () => {
+    let { ENABLE_METADATA, DISABLE_METADATA } =  TextTranslation;
+    seahubMetadataAPI.getMetadataManagementEnabledStatus(this.props.repoID).then((res) => {
+      if (res.data.enabled){
+        this.setState({ menuList: [DISABLE_METADATA] });
+      } else {
+        this.setState({ menuList: [ENABLE_METADATA] });
+      }
+    }).catch((error) => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+      this.setState({ menuList: [] });
+    });
+  };
+
+  onItemContextMenu = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    let x = event.clientX || (event.touches && event.touches[0].pageX);
+    let y = event.clientY || (event.touches && event.touches[0].pageY);
+
+    hideMenu();
+
+    this.getMenuList();
+
+    let showMenuConfig = {
+      id: 'tree-node-contextmenu',
+      position: { x, y },
+      target: event.target,
+      menuList: this.state.menuList,
+    };
+
+    showMenu(showMenuConfig);
+  };
+
   onClick = () => {
     seahubMetadataAPI.getMetadataManagementEnabledStatus(this.props.repoID).then((res) => {
       if (res.data.enabled){
         this.viewMetadata();
-      } else if (confirm(gettext('Enable-Metadata-Manage?'))){
+      } else if (confirm(gettext('Enable metadata management?'))){
         seahubMetadataAPI.enableMetadataManagement(this.props.repoID).then((res) => {
+          if (res.data.success){
             this.viewMetadata();
+          }
         }).catch((error) => {
           let errMessage = Utils.getErrorMsg(error);
           toaster.danger(errMessage);
@@ -81,6 +118,7 @@ class MetadataManageView extends React.Component {
           onMouseLeave={this.onMouseLeave}
           onMouseDown={this.onItemMouseDown}
           onClick={this.onClick}
+          onContextMenu={this.onItemContextMenu}
         >
           <div className="tree-node-text">{gettext('Metadata-View')}
             <div className="left-icon">

frontend/src/utils/text-translation.js

@@ -33,7 +33,9 @@ const TextTranslation = {
   'PROPERTIES' : {key : 'Properties', value : gettext('Properties')},
   'TAGS': {key: 'Tags', value: gettext('Tags')},
   'TRASH': {key: 'Trash', value: gettext('Trash')},
-  'ONLYOFFICE_CONVERT': {key: 'Convert with ONLYOFFICE', value: gettext('Convert with ONLYOFFICE')}
+  'ONLYOFFICE_CONVERT': {key: 'Convert with ONLYOFFICE', value: gettext('Convert with ONLYOFFICE')},
+  'ENABLE_METADATA': {key: 'Enable Metadata', value: gettext('Enable Metadata')},
+  'DISABLE_METADATA': {key: 'Disable Metadata', value: gettext('Disable Metadata')}
 };
 
 export default TextTranslation;