can add and modify property

frontend/src/components/dialog/extra-attributes-dialog/index.js → 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];
-        }
-      }
+  getData = () => {
+    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;
     }
-    return updateData;
-  };
 
-  getData = () => {
-    const { repoID, filePath } = this.props;
-    seafileAPI.getFileExtendedProperties(repoID, filePath).then(res => {
+    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,12 +224,12 @@ class ExtraAttributesDialog extends Component {
   }
 }
 
-ExtraAttributesDialog.propTypes = {
+ExtraMetadataAttributesDialog.propTypes = {
   repoID: PropTypes.string,
   filePath: PropTypes.string,
   direntType: PropTypes.string,
   direntDetail: PropTypes.object,
   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>

frontend/src/metadata/api.js

@@ -72,24 +72,35 @@ class MetadataManagerAPI {
     return this.req.post(url, data);
   }
 
-  updateMetadataRecord = (repoID, recordID, creator, createTime, modifier, modifyTime, parentDir, name) => {
+  addMetadataColumn(repoID, column_name) {
+    const url = this.server + '/api/v2.1/repos/' + repoID + '/metadata/columns/';
+    let data = {
+      'column_name': column_name
+    };
+    return this.req.post(url, data);
+  }
+
+  getMetadataRecordInfo(repoID, parentDir, name) {
+    const url = this.server + '/api/v2.1/repos/' + repoID + '/metadata/record/';
+    let params = {};
+    if (parentDir) {
+      params['parent_dir'] = parentDir;
+    }
+    if (name) {
+      params['name'] = name;
+    }
+    return this.req.get(url, {params: params});
+  }
+
+  updateMetadataRecord = (repoID, recordID, columnName, newValue) => {
     const url = this.server + '/api/v2.1/repos/' + repoID + '/metadata/records/' + recordID + '/';
     const data = {
-      'creator': creator,
-      'create_time': createTime,
-      'modifier': modifier,
-      'modify_time': modifyTime,
-      'current_dir': parentDir,
-      'name': name,
+      'column_name': columnName,
+      'value': newValue,
     };
     return this.req.put(url, data);
   };
 
-  deleteMetadataRecord = (repoID, recordID) => {
-    const url = this.server + '/api/v2.1/repos/' + repoID + '/metadata/records/' + recordID + '/';
-    return this.req.delete(url);
-  };
-
   listUserInfo = (userIds) => {
     const url = this.server + '/api/v2.1/user-list/';
     const params = { user_id_list: userIds };

frontend/src/utils/constants.js

@@ -97,8 +97,6 @@ export const enablePDFThumbnail = window.app.pageOptions.enablePDFThumbnail;
 export const enableOnlyoffice = window.app.pageOptions.enableOnlyoffice || false;
 export const onlyofficeConverterExtensions = window.app.pageOptions.onlyofficeConverterExtensions || [];
 
-export const canSetExProps = window.app.pageOptions.canSetExProps || false;
-
 // seafile_ai
 export const enableSeafileAI = window.app.pageOptions.enableSeafileAI || false;