Metadata views (#6207)

* wip

* wip: table finished

* wip

* feat: metadata views

* update models

* optimize frontend

* optimize frontend

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

@@ -2,8 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Utils } from '../../utils/utils';
 import { gettext } from '../../utils/constants';
-import toaster from '../../components/toast';
+import toaster from '../toast';
 import seahubMetadataAPI from './seahub-metadata-api';
+import { siteRoot } from '../../utils/constants';
 import { hideMenu, showMenu } from '../context-menu/actions';
 import TextTranslation from '../../utils/text-translation';
 import { siteRoot } from '../../utils/constants';
@@ -87,15 +88,9 @@ class MetadataManageView extends React.Component {
     seahubMetadataAPI.getMetadataManagementEnabledStatus(this.props.repoID).then((res) => {
       if (res.data.enabled){
         this.viewMetadata();
-      } 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);
-        });
+      } else {
+        let message = gettext('This repo has not enabled metadata management, please enabled firstly');
+        toaster.notify(message);
       }
     }).catch((error) => {
       let errMessage = Utils.getErrorMsg(error);
@@ -114,7 +109,7 @@ class MetadataManageView extends React.Component {
       <div className="tree-node">
         <div
           className={`tree-node-inner text-nowrap ${hlClass}`}
-          title="Metadata"
+          title="Metadata Views"
           onMouseEnter={this.onMouseEnter}
           onMouseOver={this.onMouseOver}
           onMouseLeave={this.onMouseLeave}
@@ -122,12 +117,7 @@ class MetadataManageView extends React.Component {
           onClick={this.onClick}
           onContextMenu={this.onItemContextMenu}
         >
-          <div className="tree-node-text">{gettext('Metadata Views')}
-            <div className="left-icon">
-              <i className="tree-node-icon">
-                <span class="sf2-icon-cog2" aria-hidden="true" />
-              </i>
-            </div>
+          <div style={{ paddingLeft: 44.8 }}>{gettext('Metadata Views')}
           </div>
         </div>
       </div>

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

@@ -0,0 +1,128 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Utils } from '../../utils/utils';
+import { gettext } from '../../utils/constants';
+import toaster from '../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,
+};
+
+class MetadataManage extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isHighlight: false,
+      menuList: []
+    };
+  }
+
+  onMouseEnter = () => {
+    this.setState({
+      isHighlight: true,
+    });
+  };
+
+  onMouseOver = () => {
+    this.setState({
+      isHighlight: true,
+    });
+  };
+
+  onMouseLeave = () => {
+    this.setState({
+      isHighlight: false,
+    });
+  };
+
+  onItemMouseDown = (event) => {
+    event.stopPropagation();
+    if (event.button === 2) {
+      return;
+    }
+  };
+
+  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 && confirm(gettext('Enable metadata management?'))){
+        seahubMetadataAPI.enableMetadataManagement(this.props.repoID).catch((error) => {
+          let errMessage = Utils.getErrorMsg(error);
+          toaster.danger(errMessage);
+        });
+      }
+    }).catch((error) => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    });
+  };
+
+  render() {
+    let hlClass = this.state.isHighlight ? 'tree-node-inner-hover ' : '';
+    return (
+      <div className="tree-node">
+        <div
+          className={`tree-node-inner text-nowrap ${hlClass}`}
+          title="Metadata"
+          onMouseEnter={this.onMouseEnter}
+          onMouseOver={this.onMouseOver}
+          onMouseLeave={this.onMouseLeave}
+          onMouseDown={this.onItemMouseDown}
+          onClick={this.onClick}
+          onContextMenu={this.onItemContextMenu}
+        >
+          <div className="tree-node-text">{gettext('Metadata')}
+            <div className="left-icon">
+              <i className="tree-node-icon">
+                <span class="sf2-icon-cog2" aria-hidden="true" />
+              </i>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+MetadataManage.propTypes = propTypes;
+
+export default MetadataManage;

frontend/src/components/tree-view/tree-view.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import TextTranslation from '../../utils/text-translation';
 import TreeNodeView from './tree-node-view';
+import MetadataManage from '../metadata-manage/metadata-manage';
 import MetadataManageView from '../metadata-manage/metadata-manage-view';
 import ContextMenu from '../context-menu/context-menu';
 import { hideMenu, showMenu } from '../context-menu/actions';
@@ -343,6 +344,9 @@ class TreeView extends React.Component {
           onNodeDragLeave={this.onNodeDragLeave}
           handleContextClick={this.handleContextClick}
         />
+        {window.app.pageOptions.enableMetadataManagement && <MetadataManage
+          repoID={this.props.repoID}
+        />}
         {window.app.pageOptions.enableMetadataManagement && <MetadataManageView
           repoID={this.props.repoID}
         />}