feat: optimize code

frontend/package.json

@@ -14,7 +14,7 @@
     "@seafile/sdoc-editor": "1.0.128",
     "@seafile/seafile-calendar": "0.0.28",
     "@seafile/seafile-editor": "^1.0.122",
-    "@seafile/sf-metadata-ui-component": "^0.0.48",
+    "@seafile/sf-metadata-ui-component": "^0.0.49",
     "@uiw/codemirror-extensions-langs": "^4.19.4",
     "@uiw/codemirror-themes": "^4.23.5",
     "@uiw/react-codemirror": "^4.19.4",

frontend/src/metadata/components/popover/filter-popover/advanced-filters/index.css

@@ -305,20 +305,23 @@
   display: none;
 }
 
-.sf-metadata-filter-header-icon {
+.sf-metadata-filter-header-icon,
+.sf-metadata-select-icon {
   display: inline-block;
   padding: 0 0.3125rem;
   margin-left: -0.3125rem;
 }
 
-.sf-metadata-filter-header-icon .sf-metadata-icon {
+.sf-metadata-filter-header-icon .sf-metadata-icon,
+.sf-metadata-select-icon .sf-metadata-icon {
   font-size: 14px;
   fill: #aaa;
   cursor: default;
 }
 
 .sf-metadata-option:hover .sf-metadata-filter-header-icon .sf-metadata-icon,
-.sf-metadata-option.sf-metadata-option-active .sf-metadata-filter-header-icon .sf-metadata-icon {
+.sf-metadata-option.sf-metadata-option-active .sf-metadata-filter-header-icon .sf-metadata-icon,
+.sf-metadata-setting-selector__menu .sf-metadata-setting-selector__option--is-selected .sf-metadata-icon {
   fill: #fff;
 }
 

frontend/src/metadata/components/popover/add-list-popover/index.css → frontend/src/metadata/components/popover/kanban-add-category-popover/index.css

@@ -1,16 +1,16 @@
-.kanban-add-list-popover .popover {
+.sf-metadata-kanban-add-category-popover .popover {
   width: 360px;
   max-width: none;
   padding: 1rem 0 0;
 }
 
-.kanban-popover-body {
+.sf-metadata-kanban-add-category-popover .kanban-popover-body {
   display: flex;
   align-items: center;
   padding: 0 1rem;
 }
 
-.kanban-popover-footer {
+.sf-metadata-kanban-add-category-popover .kanban-popover-footer {
   display: flex;
   align-items: center;
   justify-content: flex-end;

frontend/src/metadata/components/popover/add-list-popover/index.js → frontend/src/metadata/components/popover/kanban-add-category-popover/index.js

@@ -11,7 +11,7 @@ import toaster from '../../../../components/toast';
 
 import './index.css';
 
-const AddListPopover = ({ options, onCancel, onSubmit }) => {
+const KanbanAddCategoryPopover = ({ target, options, onCancel, onSubmit }) => {
   const [option, setOption] = useState(generateNewOption(options, ''));
 
   const handleOptionChange = useCallback((newOption, type) => {
@@ -44,13 +44,13 @@ const AddListPopover = ({ options, onCancel, onSubmit }) => {
 
   return (
     <CustomizePopover
-      target="add-list-button"
-      className="kanban-add-list-popover"
-      canHide={false}
+      target={target}
+      className="sf-metadata-kanban-add-category-popover"
       hide={onCancel}
       hideWithEsc={onCancel}
+      modifiers={{ preventOverflow: { boundariesElement: document.body } }}
     >
-      <div className="kanban-add-list-popover-inner">
+      <div className="sf-metadata-kanban-add-category-popover-inner">
         <div className="kanban-popover-body">
           <Color
             option={option}
@@ -66,17 +66,18 @@ const AddListPopover = ({ options, onCancel, onSubmit }) => {
         </div>
         <div className="kanban-popover-footer">
           <Button className="mr-2" onClick={onCancel}>{gettext('Cancel')}</Button>
-          <Button color="primary" disabled={false} onClick={handleSubmit}>{gettext('Submit')}</Button>
+          <Button color="primary" onClick={handleSubmit}>{gettext('Submit')}</Button>
         </div>
       </div>
     </CustomizePopover>
   );
 };
 
-AddListPopover.propTypes = {
+KanbanAddCategoryPopover.propTypes = {
+  target: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   options: PropTypes.array.isRequired,
   onCancel: PropTypes.func.isRequired,
   onSubmit: PropTypes.func.isRequired,
 };
 
-export default AddListPopover;
+export default KanbanAddCategoryPopover;

frontend/src/metadata/components/selector.js

@@ -0,0 +1,36 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { SeahubSelect } from '../../components/common/select';
+
+const Selector = ({ options, settingKey, value, defaultValue, onChange }) => {
+
+  const handelOnChange = useCallback((option) => {
+    const newValue = option.value;
+    if (newValue === value) return;
+    onChange(settingKey, newValue);
+  }, [settingKey, value, onChange]);
+
+  let selectedOption = options.find(option => option.value === value);
+  if (!selectedOption && defaultValue) {
+    options.find(option => option.value === defaultValue);
+  }
+
+  return (
+    <SeahubSelect
+      classNamePrefix="sf-metadata-setting-selector"
+      value={selectedOption}
+      options={options}
+      onChange={handelOnChange}
+      menuPortalTarget="sf-metadata-view-setting-panel"
+    />
+  );
+};
+
+Selector.propTypes = {
+  settingKey: PropTypes.string,
+  value: PropTypes.string,
+  options: PropTypes.array.isRequired,
+  onChange: PropTypes.func,
+};
+
+export default Selector;

frontend/src/metadata/components/view-toolbar/kanban-view-toolbar/index.js

@@ -22,7 +22,7 @@ const KanbanViewToolBar = ({
   }, [viewColumns]);
 
   const onToggleKanbanSetting = () => {
-    window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.TOGGLE_KANBAN_SETTING);
+    window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.TOGGLE_KANBAN_SETTINGS);
   };
 
   return (

frontend/src/metadata/constants/event-bus-type.js

@@ -59,5 +59,5 @@ export const EVENT_BUS_TYPE = {
   TOGGLE_VIEW_TOOLBAR: 'toggle_view_toolbar',
 
   // kanban
-  TOGGLE_KANBAN_SETTING: 'toggle_kanban_setting',
+  TOGGLE_KANBAN_SETTINGS: 'toggle_kanban_settings',
 };

frontend/src/metadata/constants/index.js

@@ -134,4 +134,4 @@ export const GALLERY_DATE_MODE = {
   ALL: 'all',
 };
 
-export const UNCATEGORIZED = 'uncategorized';
+export const UNCATEGORIZED = '_uncategorized';

frontend/src/metadata/constants/view.js

@@ -74,24 +74,23 @@ export const VIEW_FIRST_SORT_COLUMN_RULES = {
 
 export const KANBAN_SETTINGS_KEYS = {
   GROUP_BY_COLUMN_KEY: 'group_by_column_key',
-  TITLE_FIELD_KEY: 'title_field_key',
-  HIDE_EMPTY_VALUES: 'hide_empty_values',
-  SHOW_FIELD_NAMES: 'show_field_names',
+  TITLE_COLUMN_KEY: 'title_column_key',
+  HIDE_EMPTY_VALUE: 'hide_empty_value',
+  SHOW_COLUMN_NAME: 'show_column_name',
   TEXT_WRAP: 'text_wrap',
-  COLUMNS_KEYS: 'columns_keys', // used to store the order of properties
-  SHOWN_COLUMNS_KEYS: 'shown_columns_keys',
+  COLUMNS: 'columns', // display and order
 };
 
 export const VIEW_DEFAULT_SETTINGS = {
   [VIEW_TYPE.TABLE]: {},
   [VIEW_TYPE.GALLERY]: {},
+  [VIEW_TYPE.FACE_RECOGNITION]: {},
   [VIEW_TYPE.KANBAN]: {
     [KANBAN_SETTINGS_KEYS.GROUP_BY_COLUMN_KEY]: '',
-    [KANBAN_SETTINGS_KEYS.TITLE_FIELD_KEY]: PRIVATE_COLUMN_KEY.FILE_NAME,
-    [KANBAN_SETTINGS_KEYS.HIDE_EMPTY_VALUES]: false,
-    [KANBAN_SETTINGS_KEYS.SHOW_FIELD_NAMES]: false,
+    [KANBAN_SETTINGS_KEYS.TITLE_COLUMN_KEY]: PRIVATE_COLUMN_KEY.FILE_NAME,
+    [KANBAN_SETTINGS_KEYS.HIDE_EMPTY_VALUE]: false,
+    [KANBAN_SETTINGS_KEYS.SHOW_COLUMN_NAME]: false,
     [KANBAN_SETTINGS_KEYS.TEXT_WRAP]: false,
     [KANBAN_SETTINGS_KEYS.COLUMNS_KEYS]: [],
-    [KANBAN_SETTINGS_KEYS.SHOWN_COLUMNS_KEYS]: [],
   }
 };

frontend/src/metadata/metadata-view/index.css

@@ -0,0 +1,6 @@
+.sf-metadata-view-setting-panel .sf-metadata-setting-divide-line {
+  width: 100%;
+  height: 1px;
+  margin-bottom: 14px;
+  background-color: #eee;
+}

frontend/src/metadata/metadata-view/index.js

@@ -4,6 +4,8 @@ import View from './view';
 import { MetadataViewProvider } from '../hooks/metadata-view';
 import Context from '../context';
 
+import './index.css';
+
 const SeafileMetadata = ({ ...params }) => {
   return (
     <MetadataViewProvider { ...params }>

frontend/src/metadata/model/metadata/index.js

@@ -5,6 +5,11 @@ class Metadata {
   constructor(object) {
     const columns = object.columns || [];
     this.columns = columns.map(column => new Column(column));
+    this.key_column_map = {};
+    this.columns.forEach(column => {
+      this.key_column_map[column.key] = column;
+    });
+
     this.rows = object.rows || [];
     this.id_row_map = {};
     this.row_ids = [];

frontend/src/metadata/store/operations/apply.js

@@ -122,6 +122,7 @@ export default function apply(data, operation) {
       const newColumn = new Column(column);
       data.columns.push(newColumn);
       data.view = new View(data.view, data.columns);
+      data.key_column_map[newColumn.key] = newColumn;
       return data;
     }
     case OPERATION_TYPE.DELETE_COLUMN: {
@@ -144,6 +145,7 @@ export default function apply(data, operation) {
           id_row_map[row[PRIVATE_COLUMN_KEY.ID]] = row;
         });
         data.id_row_map = id_row_map;
+        delete data.key_column_map[column_key];
       }
       return data;
     }
@@ -153,6 +155,7 @@ export default function apply(data, operation) {
       if (columnIndex !== -1) {
         const newColumn = new Column({ ...data.columns[columnIndex], name: new_name });
         data.columns[columnIndex] = newColumn;
+        data.key_column_map[column_key] = newColumn;
       }
       data.view = new View(data.view, data.columns);
       return data;
@@ -164,6 +167,7 @@ export default function apply(data, operation) {
         const oldColumn = data.columns[columnIndex];
         const newColumn = new Column({ ...oldColumn, data: { ...oldColumn.data, ...new_data } });
         data.columns[columnIndex] = newColumn;
+        data.key_column_map[column_key] = newColumn;
       }
       data.view = new View(data.view, data.columns);
       return data;

frontend/src/metadata/third-party/trello-smooth-dnd/constants.js

@@ -0,0 +1,21 @@
+export const containerInstance = 'smooth-dnd-container-instance';
+export const containersInDraggable = 'smooth-dnd-containers-in-draggable';
+
+export const defaultGroupName = '@@smooth-dnd-default-group@@';
+export const wrapperClass = 'smooth-dnd-draggable-wrapper';
+export const defaultGrabHandleClass = 'smooth-dnd-default-grap-handle';
+export const animationClass = 'animated';
+export const translationValue = '__smooth_dnd_draggable_translation_value';
+export const visibilityValue = '__smooth_dnd_draggable_visibility_value';
+export const ghostClass = 'smooth-dnd-ghost';
+
+export const containerClass = 'smooth-dnd-container';
+
+export const extraSizeForInsertion = 'smooth-dnd-extra-size-for-insertion';
+export const stretcherElementClass = 'smooth-dnd-stretcher-element';
+export const stretcherElementInstance = 'smooth-dnd-stretcher-instance';
+
+export const isDraggableDetached = 'smoth-dnd-is-draggable-detached';
+
+export const disbaleTouchActions = 'smooth-dnd-disable-touch-action';
+export const noUserSelectClass = 'smooth-dnd-no-user-select';