feat: metadata checkbox (#6295)

* feat: metadata checkbox * feat: optimize checkbox * feat: update code * feat: update code --------- Co-authored-by: 杨国璇 <[email protected]>
haiwen · Jul 4, 2024 · 1eb7090 · 1eb7090
1 parent ef96b2b
commit 1eb7090
Show file tree

Hide file tree

Showing 36 changed files with 173 additions and 133 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -12,7 +12,7 @@
     "@seafile/sdoc-editor": "1.0.7",
     "@seafile/seafile-calendar": "0.0.12",
     "@seafile/seafile-editor": "1.0.99",
-    "@seafile/sf-metadata-ui-component": "0.0.8",
+    "@seafile/sf-metadata-ui-component": "0.0.9",
     "@uiw/codemirror-extensions-langs": "^4.19.4",
     "@uiw/react-codemirror": "^4.19.4",
     "chart.js": "2.9.4",

diff --git a/frontend/src/assets/icons/checkbox.svg b/frontend/src/assets/icons/checkbox.svg
diff --git a/frontend/src/metadata/metadata-view/_basic/constants/column/common.js b/frontend/src/metadata/metadata-view/_basic/constants/column/common.js
@@ -6,5 +6,8 @@ export const NOT_DISPLAY_COLUMN_KEYS = [
   PRIVATE_COLUMN_KEY.MTIME,
   PRIVATE_COLUMN_KEY.CREATOR,
   PRIVATE_COLUMN_KEY.LAST_MODIFIER,
+];
+
+export const VIEW_NOT_DISPLAY_COLUMN_KEYS = [
   PRIVATE_COLUMN_KEY.IS_DIR,
 ];
diff --git a/frontend/src/metadata/metadata-view/_basic/constants/column/format.js b/frontend/src/metadata/metadata-view/_basic/constants/column/format.js
@@ -1,13 +1,15 @@
 import CellType from './type';
 
 const DATE_COLUMN_OPTIONS = [
-  CellType.CTIME, CellType.MTIME,
+  CellType.CTIME,
+  CellType.MTIME,
 ];
 const NUMERIC_COLUMNS_TYPES = [
 
 ];
 const COLLABORATOR_COLUMN_TYPES = [
-  CellType.CREATOR, CellType.LAST_MODIFIER,
+  CellType.CREATOR,
+  CellType.LAST_MODIFIER,
 ];
 
 // date

diff --git a/frontend/src/metadata/metadata-view/_basic/constants/column/icon.js b/frontend/src/metadata/metadata-view/_basic/constants/column/icon.js
@@ -8,6 +8,7 @@ const COLUMNS_ICON_CONFIG = {
   [CellType.DEFAULT]: 'text',
   [CellType.TEXT]: 'text',
   [CellType.FILE_NAME]: 'text',
+  [CellType.CHECKBOX]: 'checkbox',
 };
 
 const COLUMNS_ICON_NAME = {
@@ -18,6 +19,7 @@ const COLUMNS_ICON_NAME = {
   [CellType.DEFAULT]: 'Text',
   [CellType.TEXT]: 'Text',
   [CellType.FILE_NAME]: 'File name',
+  [CellType.CHECKBOX]: 'Checkbox',
 };
 
 export {

diff --git a/frontend/src/metadata/metadata-view/_basic/constants/column/index.js b/frontend/src/metadata/metadata-view/_basic/constants/column/index.js
@@ -31,5 +31,6 @@ export {
 };
 
 export {
-  NOT_DISPLAY_COLUMN_KEYS
+  NOT_DISPLAY_COLUMN_KEYS,
+  VIEW_NOT_DISPLAY_COLUMN_KEYS,
 } from './common';
diff --git a/frontend/src/metadata/metadata-view/_basic/constants/column/type.js b/frontend/src/metadata/metadata-view/_basic/constants/column/type.js
@@ -6,6 +6,7 @@ const CellType = {
   LAST_MODIFIER: 'last-modifier',
   MTIME: 'mtime',
   FILE_NAME: 'file-name',
+  CHECKBOX: 'checkbox',
 };
 
 export default CellType;
diff --git a/frontend/src/metadata/metadata-view/_basic/constants/filter/filter-column-options.js b/frontend/src/metadata/metadata-view/_basic/constants/filter/filter-column-options.js
@@ -70,6 +70,11 @@ const FILTER_COLUMN_OPTIONS = {
       FILTER_PREDICATE_TYPE.IS_NOT,
     ],
   },
+  [CellType.CHECKBOX]: {
+    filterPredicateList: [
+      FILTER_PREDICATE_TYPE.IS,
+    ],
+  },
   [CellType.URL]: {
     filterPredicateList: [
       FILTER_PREDICATE_TYPE.CONTAINS,

diff --git a/frontend/src/metadata/metadata-view/_basic/constants/index.js b/frontend/src/metadata/metadata-view/_basic/constants/index.js
@@ -20,6 +20,7 @@ export {
   SINGLE_CELL_VALUE_COLUMN_TYPE_MAP,
   PRIVATE_COLUMN_KEY,
   NOT_DISPLAY_COLUMN_KEYS,
+  VIEW_NOT_DISPLAY_COLUMN_KEYS,
 } from './column';
 export {
   FILTER_CONJUNCTION_TYPE,

diff --git a/frontend/src/metadata/metadata-view/_basic/index.js b/frontend/src/metadata/metadata-view/_basic/index.js
@@ -47,6 +47,7 @@ export {
   HEADER_HEIGHT_TYPE,
   PRIVATE_COLUMN_KEY,
   NOT_DISPLAY_COLUMN_KEYS,
+  VIEW_NOT_DISPLAY_COLUMN_KEYS,
 } from './constants';
 
 export {
@@ -106,7 +107,6 @@ export {
   isMac,
   base64ToFile,
   bytesToSize,
-  getErrorMsg,
   DateUtils,
   CommonlyUsedHotkey,
   LocalStorage,

diff --git a/frontend/src/metadata/metadata-view/_basic/utils/common.js b/frontend/src/metadata/metadata-view/_basic/utils/common.js
@@ -36,23 +36,6 @@ export const bytesToSize = (bytes) => {
   return (bytes / (1000 ** i)).toFixed(1) + ' ' + sizes[i];
 };
 
-export const getErrorMsg = (error) => {
-  let errorMsg = '';
-  if (error.response) {
-    if (error.response.status === 403) {
-      errorMsg = 'Permission_denied';
-    } else if (error.response.data &&
-      error.response.data['error_msg']) {
-      errorMsg = error.response.data['error_msg'];
-    } else {
-      errorMsg = 'Error';
-    }
-  } else {
-    errorMsg = 'Please_check_the_network';
-  }
-  return errorMsg;
-};
-
 export const isFunction = (functionToCheck) => {
   const getType = {};
   return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';

diff --git a/frontend/src/metadata/metadata-view/_basic/utils/filter/filter-column/checkbox.js b/frontend/src/metadata/metadata-view/_basic/utils/filter/filter-column/checkbox.js
@@ -0,0 +1,15 @@
+/**
+ * Filter checkbox
+ * @param {bool} checked
+ * @param {bool} filter_term
+ * @returns boolean
+ */
+const checkboxFilter = (checked, { filter_term }) => {
+  const filterTerm = filter_term || false;
+  const normalizedChecked = typeof checked === 'string' ? checked.toLocaleUpperCase() === 'TRUE' : checked || false;
+  return normalizedChecked === filterTerm;
+};
+
+export {
+  checkboxFilter,
+};
diff --git a/frontend/src/metadata/metadata-view/_basic/utils/filter/filter-column/index.js b/frontend/src/metadata/metadata-view/_basic/utils/filter/filter-column/index.js
@@ -1,3 +1,4 @@
 export { creatorFilter } from './creator';
 export { dateFilter } from './date';
 export { textFilter } from './text';
+export { checkboxFilter } from './checkbox';
diff --git a/frontend/src/metadata/metadata-view/_basic/utils/filter/filter-row.js b/frontend/src/metadata/metadata-view/_basic/utils/filter/filter-row.js
@@ -6,6 +6,7 @@ import {
   creatorFilter,
   dateFilter,
   textFilter,
+  checkboxFilter,
 } from './filter-column';
 import {
   FILTER_CONJUNCTION_TYPE,
@@ -30,6 +31,9 @@ const getFilterResult = (row, filter, { username, userId }) => {
     case CellType.CREATOR: {
       return creatorFilter(cellValue, filter, username);
     }
+    case CellType.CHECKBOX: {
+      return checkboxFilter(cellValue, filter);
+    }
     default: {
       return false;
     }

diff --git a/frontend/src/metadata/metadata-view/_basic/utils/index.js b/frontend/src/metadata/metadata-view/_basic/utils/index.js
@@ -74,7 +74,6 @@ export {
   isMac,
   base64ToFile,
   bytesToSize,
-  getErrorMsg,
   isFunction,
   isEmpty,
   isEmptyObject,

diff --git a/frontend/src/metadata/metadata-view/components/data-process-setter/groupby-setter.jsx b/frontend/src/metadata/metadata-view/components/data-process-setter/groupby-setter.jsx
@@ -33,7 +33,9 @@ class GroupbySetter extends Component {
 
     const groupbysLength = groupbys ? groupbys.length : 0;
     const activated = groupbysLength > 0;
-    let groupbyMessage = gettext('Group');
+
+    // need to translate to Group
+    let groupbyMessage = gettext('Group_by');
     if (groupbysLength === 1) {
       groupbyMessage = gettext('Grouped by 1 column');
     } else if (groupbysLength > 1) {

diff --git a/frontend/src/metadata/metadata-view/components/popover/filter-popover/widgets/filter-item.js b/frontend/src/metadata/metadata-view/components/popover/filter-popover/widgets/filter-item.js
@@ -404,6 +404,9 @@ class FilterItem extends React.Component {
           />
         );
       }
+      case CellType.CHECKBOX: {
+        return this.getInputComponent('checkbox');
+      }
       default: {
         return null;
       }

diff --git a/frontend/src/metadata/metadata-view/components/popover/filter-popover/widgets/index.css b/frontend/src/metadata/metadata-view/components/popover/filter-popover/widgets/index.css
@@ -108,10 +108,6 @@
   color: unset;
 }
 
-.filter-term .selector-collaborator .sf-metadata-icon-drop-down {
-  padding-left: 5px;
-}
-
 .filters-list .selector-collaborator .selected-option-show {
   text-overflow: unset;
 }
@@ -297,10 +293,6 @@
   width: 100%;
 }
 
-.filters-list .filter-checkbox-predicate .sf-metadata-select .selected-option-show {
-  width: 100%;
-}
-
 .dropdown-item .collaborator,
 .filters-list .option-group .option-group-content .collaborator {
   background-color: unset;

diff --git a/frontend/src/metadata/metadata-view/components/record-details-dialog/index.js b/frontend/src/metadata/metadata-view/components/record-details-dialog/index.js
@@ -14,7 +14,7 @@ const RecordDetailsDialog = () => {
     updateCollaboratorsCache,
     queryUserAPI: window.sfMetadataContext.userService.queryUser,
     record: recordDetails,
-    fields: metadata.columns,
+    fields: metadata.view.columns,
     fieldIconConfig: COLUMNS_ICON_CONFIG,
     onToggle: closeRecordDetails,
   };

diff --git a/frontend/src/metadata/metadata-view/components/table/container.js b/frontend/src/metadata/metadata-view/components/table/container.js
@@ -1,12 +1,14 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { toaster } from '@seafile/sf-metadata-ui-component';
+import toaster from '../../../../components/toast';
 import { EVENT_BUS_TYPE } from '../../constants';
-import { CommonlyUsedHotkey, getErrorMsg } from '../../_basic';
+import { CommonlyUsedHotkey } from '../../_basic';
 import { gettext } from '../../utils';
 import { useMetadata } from '../../hooks';
 import TableTool from './table-tool';
 import TableMain from  './table-main';
 import RecordDetailsDialog from '../record-details-dialog';
+import { PER_LOAD_NUMBER, MAX_LOAD_NUMBER } from '../../constants';
+import { Utils } from '../../../../utils/utils';
 
 import './index.css';
 
@@ -38,17 +40,39 @@ const Container = () => {
     setLoadingMore(true);
 
     try {
-      await store.loadMore();
+      await store.loadMore(PER_LOAD_NUMBER);
       setLoadingMore(false);
     } catch (error) {
-      const errorMsg = getErrorMsg(error);
-      toaster.danger(gettext(errorMsg));
+      const errorMsg = Utils.getErrorMsg(error);
+      toaster.danger(errorMsg);
       setLoadingMore(false);
       return;
     }
 
   }, [metadata, store]);
 
+  const loadAll = useCallback(async (maxLoadNumber, callback) => {
+    if (!metadata.hasMore) return;
+    setLoadingMore(true);
+    const rowsCount = metadata.row_ids.length;
+    const loadNumber = rowsCount % MAX_LOAD_NUMBER !== 0 ? MAX_LOAD_NUMBER - rowsCount % MAX_LOAD_NUMBER : MAX_LOAD_NUMBER;
+    try {
+      await store.loadMore(loadNumber);
+      setLoadingMore(false);
+    } catch (error) {
+      const errorMsg = Utils.getErrorMsg(error);
+      toaster.danger(errorMsg);
+      setLoadingMore(false);
+      return;
+    }
+    if (store.data.hasMore && store.data.row_ids.length < maxLoadNumber) {
+      loadAll(maxLoadNumber, callback);
+    } else {
+      typeof callback === 'function' && callback(store.data.hasMore);
+      setLoadingMore(false);
+    }
+  }, [metadata, store]);
+
   const modifyRecords = useCallback((rowIds, idRowUpdates, idOriginalRowUpdates, idOldRowData, idOriginalOldRowData, isCopyPaste = false) => {
     // todo: store op
   }, []);
@@ -144,7 +168,7 @@ const Container = () => {
   return (
     <>
       <div className="sf-metadata-wrapper">
-        <TableTool view={metadata.view} columns={metadata.columns} modifyFilters={modifyFilters} modifySorts={modifySorts} modifyGroupbys={modifyGroupbys} modifyHiddenColumns={modifyHiddenColumns} />
+        <TableTool view={metadata.view} modifyFilters={modifyFilters} modifySorts={modifySorts} modifyGroupbys={modifyGroupbys} modifyHiddenColumns={modifyHiddenColumns} />
         <div className="sf-metadata-main">
           {errorMsg && (<div className="d-center-middle error">{gettext(errorMsg)}</div>)}
           {!errorMsg && (
@@ -161,6 +185,7 @@ const Container = () => {
                 getTableContentWidth={getTableContentWidth}
                 getTableContentLeft={getTableContentLeft}
                 getAdjacentRowsIds={getAdjacentRowsIds}
+                loadAll={loadAll}
               />
             </div>
           )}

diff --git a/frontend/src/metadata/metadata-view/components/table/table-main/index.js b/frontend/src/metadata/metadata-view/components/table/table-main/index.js
@@ -32,7 +32,7 @@ const TableMain = ({ metadata, modifyRecord, modifyRecords, loadMore, loadAll, s
   return (
     <div className={classnames('table-main-container container-fluid p-0', { [`group-level-${groupbysCount + 1}`]: groupbysCount > 0 })}>
       <Records
-        columns={metadata.columns}
+        columns={metadata.view.columns}
         recordIds={metadata.view.rows || []}
         groups={metadata.groups}
         groupbys={metadata.groupbys}
@@ -41,7 +41,7 @@ const TableMain = ({ metadata, modifyRecord, modifyRecords, loadMore, loadAll, s
         hasMore={metadata.hasMore}
         gridUtils={gridUtils}
         scrollToLoadMore={loadMore}
-        clickToLoadMore={loadAll}
+        loadAll={loadAll}
         groupOffsetLeft={groupOffset}
         modifyRecord={updateRecord}
         updateRecords={updateRecords}