can add and modify property (#6297)

* can add and modify property

* clear extend property code

frontend/src/components/dialog/confirm-apply-folder-properties-dialog.js

@@ -1,67 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
-import { gettext } from '../../utils/constants';
-import { seafileAPI } from '../../utils/seafile-api';
-import toaster from '../toast';
-import { Utils } from '../../utils/utils';
-import Loading from '../loading';
-
-import '../../css/apply-folder-properties.css';
-
-const propTypes = {
-  toggle: PropTypes.func,
-  repoID: PropTypes.string,
-  path: PropTypes.string
-};
-
-class ConfirmApplyFolderPropertiesDialog extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      submitting: false
-    };
-  }
-
-  submit = () => {
-    const { repoID, path } = this.props;
-    this.setState({ submitting: true });
-    seafileAPI.applyFolderExtendedProperties(repoID, path).then(() => {
-      toaster.success(gettext('Successfully applied the properties.'));
-      this.props.toggle();
-    }).catch(error => {
-      let errorMsg = Utils.getErrorMsg(error);
-      toaster.danger(errorMsg);
-      this.setState({ submitting: false });
-    });
-  };
-
-  render() {
-    const { submitting } = this.state;
-
-    return (
-      <Modal isOpen={true} toggle={this.props.toggle} className="apply-properties-dialog">
-        <ModalHeader toggle={this.props.toggle}>
-          {gettext('Apply properties')}
-        </ModalHeader>
-        <ModalBody>
-          <p>
-            {gettext('Are you sure you want to apply the properties to all the files inside the folder?')}
-          </p>
-        </ModalBody>
-        <ModalFooter>
-          <Button color='secondary' onClick={this.props.toggle} disabled={submitting}>{gettext('Cancel')}</Button>
-          <Button color='primary' className='flex-shrink-0 apply-properties' disabled={submitting} onClick={this.submit}>
-            {submitting ? (<Loading />) : (<>{gettext('Submit')}</>)}
-          </Button>
-        </ModalFooter>
-      </Modal>
-    );
-  }
-
-}
-
-ConfirmApplyFolderPropertiesDialog.propTypes = propTypes;
-
-export default ConfirmApplyFolderPropertiesDialog;

frontend/src/components/dialog/extra-metadata-attributes-dialog/index.js

@@ -2,18 +2,19 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Modal, ModalHeader, ModalBody } from 'reactstrap';
 import isHotkey from 'is-hotkey';
-import { zIndexes, DIALOG_MAX_HEIGHT, EXTRA_ATTRIBUTES_COLUMN_TYPE } from '../../../constants';
+import { zIndexes, DIALOG_MAX_HEIGHT } from '../../../constants';
 import { gettext } from '../../../utils/constants';
-import { seafileAPI } from '../../../utils/seafile-api';
 import { Utils } from '../../../utils/utils';
-import { getSelectColumnOptions, getValidColumns } from '../../../utils/extra-attributes';
+import { getValidColumns } from '../../../utils/extra-attributes';
 import Column from './column';
 import Loading from '../../loading';
 import toaster from '../../toast';
+import metadataAPI from '../../../metadata/api';
 
 import './index.css';
 
-class ExtraAttributesDialog extends Component {
+
+class ExtraMetadataAttributesDialog extends Component {
 
   constructor(props) {
     super(props);
@@ -71,64 +72,43 @@ class ExtraAttributesDialog extends Component {
     }, 1);
   };
 
-  getFormatUpdateData = (update = {}) => {
-    const { columns } = this.state;
-    const updateData = {};
-    for (let key in update) {
-      const column = columns.find(column => column.key === key);
-      if (column && column.editable) {
-        const { type, name } = column;
-        const value = update[key];
-        if (type === EXTRA_ATTRIBUTES_COLUMN_TYPE.SINGLE_SELECT) {
-          const options = getSelectColumnOptions(column);
-          const option = options.find(item => item.id === value);
-          updateData[name] = option ? option.name : '';
-        } else {
-          updateData[column.name] = update[key];
-        }
-      }
-    }
-    return updateData;
-  };
-
   getData = () => {
-    const { repoID, filePath } = this.props;
-    seafileAPI.getFileExtendedProperties(repoID, filePath).then(res => {
+    const { repoID, filePath, direntType } = this.props;
+
+    let dirName = Utils.getDirName(filePath);
+    let fileName = Utils.getFileName(filePath);
+    let parentDir = direntType === 'file' ?  dirName : dirName.slice(0, dirName.length - fileName.length - 1);
+
+    if (!parentDir.startsWith('/')) {
+      parentDir = '/' + parentDir;
+    }
+
+    metadataAPI.getMetadataRecordInfo(repoID, parentDir, fileName).then(res => {
       const { row, metadata, editable_columns } = res.data;
       this.isExist = Boolean(row._id);
       this.setState({ row: row, columns: getValidColumns(metadata, editable_columns, this.isEmptyFile), isLoading: false, errorMsg: '' });
     }).catch(error => {
-      const errorMsg =Utils.getErrorMsg(error);
+      const errorMsg = Utils.getErrorMsg(error);
       this.setState({ isLoading: false, errorMsg });
     });
   };
 
-  createData = (data) => {
-    const { repoID, filePath } = this.props;
-    seafileAPI.newFileExtendedProperties(repoID, filePath, data).then(res => {
-      this.isExist = true;
-      const { row } = res.data;
-      this.setState({ row: row, isLoading: false, errorMsg: '' });
-    }).catch(error => {
-      const errorMsg =Utils.getErrorMsg(error);
-      toaster.danger(gettext(errorMsg));
-    });
-  };
-
   updateData = (update, column) => {
     const newRow = { ...this.state.row, ...update };
     this.setState({ row: newRow }, () => {
-      const data = this.getFormatUpdateData(update);
       const { repoID, filePath } = this.props;
+
+      let newValue = update[column.key];
+      let recordID = this.state.row._id;
       if (this.isExist) {
-        seafileAPI.updateFileExtendedProperties(repoID, filePath, data).then(res => {
+        metadataAPI.updateMetadataRecord(repoID, recordID, column.name, newValue).then(res => {
           this.setState({ update: {}, row: res.data.row });
         }).catch(error => {
           const errorMsg = Utils.getErrorMsg(error);
           toaster.danger(gettext(errorMsg));
         });
       } else {
-        this.createData(data);
+        // this.createData(data);
       }
     });
   };
@@ -244,7 +224,7 @@ class ExtraAttributesDialog extends Component {
   }
 }
 
-ExtraAttributesDialog.propTypes = {
+ExtraMetadataAttributesDialog.propTypes = {
   repoID: PropTypes.string,
   filePath: PropTypes.string,
   direntType: PropTypes.string,
@@ -252,4 +232,4 @@ ExtraAttributesDialog.propTypes = {
   onToggle: PropTypes.func,
 };
 
-export default ExtraAttributesDialog;
+export default ExtraMetadataAttributesDialog;

frontend/src/components/dirent-detail/detail-list-view.js

@@ -3,12 +3,11 @@ import PropTypes from 'prop-types';
 import moment from 'moment';
 import { v4 as uuidv4 } from 'uuid';
 import Icon from '../icon';
-import { gettext, canSetExProps } from '../../utils/constants';
+import { gettext } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import EditFileTagPopover from '../popover/edit-filetag-popover';
-import ExtraAttributesDialog from '../dialog/extra-attributes-dialog';
 import FileTagList from '../file-tag-list';
-import ConfirmApplyFolderPropertiesDialog from '../dialog/confirm-apply-folder-properties-dialog';
+import ExtraMetadataAttributesDialog from '../dialog/extra-metadata-attributes-dialog';
 
 const propTypes = {
   repoInfo: PropTypes.object.isRequired,
@@ -28,8 +27,7 @@ class DetailListView extends React.Component {
     super(props);
     this.state = {
       isEditFileTagShow: false,
-      isShowExtraProperties: false,
-      isShowApplyProperties: false
+      isShowMetadataExtraProperties: false,
     };
     this.tagListTitleID = `detail-list-view-tags-${uuidv4()}`;
   }
@@ -65,12 +63,8 @@ class DetailListView extends React.Component {
     return Utils.joinPath(path, dirent.name);
   };
 
-  toggleExtraPropertiesDialog = () => {
-    this.setState({ isShowExtraProperties: !this.state.isShowExtraProperties });
-  };
-
-  toggleApplyPropertiesDialog = () => {
-    this.setState({ isShowApplyProperties: !this.state.isShowApplyProperties });
+  toggleExtraMetadataPropertiesDialog = () => {
+    this.setState({ isShowMetadataExtraProperties: !this.state.isShowMetadataExtraProperties });
   };
 
   renderTags = () => {
@@ -85,23 +79,12 @@ class DetailListView extends React.Component {
           <tbody>
             <tr><th>{gettext('Location')}</th><td>{position}</td></tr>
             <tr><th>{gettext('Last Update')}</th><td>{moment(direntDetail.mtime).format('YYYY-MM-DD')}</td></tr>
-            {direntDetail.permission === 'rw' && canSetExProps && (
+            {direntDetail.permission === 'rw' && window.app.pageOptions.enableMetadataManagement && (
               <Fragment>
                 <tr className="file-extra-attributes">
                   <th colSpan={2}>
-                    <div className="edit-file-extra-attributes-btn" onClick={this.toggleExtraPropertiesDialog}>
-                      {gettext('Edit extra properties')}
-                    </div>
-                  </th>
-                </tr>
-                <tr className="file-extra-attributes">
-                  <th colSpan={2}>
-                    <div
-                      className="edit-file-extra-attributes-btn text-truncate"
-                      onClick={this.toggleApplyPropertiesDialog}
-                      title={gettext('Apply properties to files inside the folder')}
-                    >
-                      {gettext('Apply properties to files inside the folder')}
+                    <div className="edit-file-extra-attributes-btn" onClick={this.toggleExtraMetadataPropertiesDialog}>
+                      {gettext('Edit metadata properties')}
                     </div>
                   </th>
                 </tr>
@@ -127,11 +110,11 @@ class DetailListView extends React.Component {
               <span onClick={this.onEditFileTagToggle} id={this.tagListTitleID}><Icon symbol='tag' /></span>
             </td>
           </tr>
-          {direntDetail.permission === 'rw' && canSetExProps && (
+          {direntDetail.permission === 'rw' && window.app.pageOptions.enableMetadataManagement && (
             <tr className="file-extra-attributes">
               <th colSpan={2}>
-                <div className="edit-file-extra-attributes-btn" onClick={this.toggleExtraPropertiesDialog}>
-                  {gettext('Edit extra properties')}
+                <div className="edit-file-extra-attributes-btn" onClick={this.toggleExtraMetadataPropertiesDialog}>
+                  {gettext('Edit metadata properties')}
                 </div>
               </th>
             </tr>
@@ -160,20 +143,13 @@ class DetailListView extends React.Component {
             isEditFileTagShow={this.state.isEditFileTagShow}
           />
         }
-        {this.state.isShowExtraProperties && (
-          <ExtraAttributesDialog
+        {this.state.isShowMetadataExtraProperties && (
+          <ExtraMetadataAttributesDialog
             repoID={this.props.repoID}
             filePath={direntPath}
             direntType={direntType}
             direntDetail={direntDetail}
-            onToggle={this.toggleExtraPropertiesDialog}
-          />
-        )}
-        {this.state.isShowApplyProperties && (
-          <ConfirmApplyFolderPropertiesDialog
-            toggle={this.toggleApplyPropertiesDialog}
-            repoID={this.props.repoID}
-            path={direntPath}
+            onToggle={this.toggleExtraMetadataPropertiesDialog}
           />
         )}
       </Fragment>