update add list button

haiwen · Oct 29, 2024 · 3ef5c79 · 3ef5c79
1 parent 6c4f344
commit 3ef5c79
Show file tree

Hide file tree

Showing 7 changed files with 102 additions and 84 deletions.
diff --git a/frontend/src/metadata/views/kanban/add-list/index.js b/frontend/src/metadata/views/kanban/add-list/index.js
@@ -0,0 +1,56 @@
+import React, { useState, useCallback, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { Icon } from '@seafile/sf-metadata-ui-component';
+import { gettext } from '../../../../utils/constants';
+import AddListPopover from '../../../components/popover/add-list-popover';
+import { COLUMN_DATA_OPERATION_TYPE } from '../../../store/operations';
+import { useMetadataView } from '../../../hooks/metadata-view';
+
+const AddList = ({ groupByColumn }) => {
+  const [isShowAddListPopover, setShowAddListPopover] = useState(false);
+  const { store } = useMetadataView();
+
+  const options = useMemo(() => groupByColumn.data.options, [groupByColumn]);
+
+  const handleAddListButtonClick = useCallback(() => {
+    setShowAddListPopover(true);
+  }, []);
+
+  const handleAddNewList = useCallback((option) => {
+    const oldData = groupByColumn.data;
+    const options = [...oldData.options, option];
+    const optionModifyType = COLUMN_DATA_OPERATION_TYPE.ADD_OPTION;
+    store.modifyColumnData(groupByColumn.key, { options }, { options: oldData.options }, { optionModifyType });
+    setShowAddListPopover(false);
+  }, [store, groupByColumn]);
+
+  const handleCancelAddList = useCallback(() => {
+    setShowAddListPopover(false);
+  }, []);
+
+  return (
+    <>
+      <div
+        id="add-list-button"
+        className='add-list-button'
+        onClick={handleAddListButtonClick}
+      >
+        <Icon iconName="add-table" />
+        <span className="btn-text">{gettext('Add a new list')}</span>
+      </div>
+      {isShowAddListPopover && (
+        <AddListPopover
+          options={options}
+          onCancel={handleCancelAddList}
+          onSubmit={handleAddNewList}
+        />
+      )}
+    </>
+  );
+};
+
+AddList.propTypes = {
+  groupByColumn: PropTypes.object.isRequired,
+};
+
+export default AddList;
diff --git a/frontend/src/metadata/views/kanban/card/index.js b/frontend/src/metadata/views/kanban/card/index.js
@@ -26,13 +26,13 @@ const Card = ({
 
   return (
     <div
-      className='sf-metadata-view-kanban-card'
+      className="sf-metadata-view-kanban-card"
       draggable={draggable}
       onDragStart={handleDragStart}
       onDrop={handleDrop}
     >
       {title.field && (
-        <div className='kanban-card-header'>
+        <div className="kanban-card-header">
           <CellFormatter value={title.value} field={title.field} readonly={true} />
         </div>
       )}
@@ -41,7 +41,7 @@ const Card = ({
           const value = getCellValueByColumn(record, field);
           if (settings.hideEmptyValues && !value) return null;
           return (
-            <div key={field.key} className='card-field'>
+            <div key={field.key} className="card-field">
               {settings.showFieldNames && <label>{field.name}</label>}
               {value ? (
                 <CellFormatter value={value} field={field} readonly={true} />

diff --git a/frontend/src/metadata/views/kanban/index.js b/frontend/src/metadata/views/kanban/index.js
@@ -1,6 +1,5 @@
 import React, { useState, useMemo, useEffect, useCallback } from 'react';
 import classNames from 'classnames';
-import { Icon } from '@seafile/sf-metadata-ui-component';
 import { useMetadata } from '../../hooks/metadata';
 import { useMetadataView } from '../../hooks/metadata-view';
 import { useCollaborators } from '../../hooks';
@@ -10,16 +9,15 @@ import { gettext } from '../../../utils/constants';
 import { getViewShownColumns } from '../../utils/view';
 import toaster from '../../../components/toast';
 import { getCellValueByColumn } from '../../utils/cell';
-import AddListPopover from '../../components/popover/add-list-popover';
 import SettingPanel from './setting-panel';
 import List from './list';
 import useKanbanSettings from './useKanbanSettings';
 
 import './index.css';
+import AddList from './add-list';
 
 const Kanban = () => {
-  const [isSettingOpen, setSettingOpen] = useState(false);
-  const [isShowAddListPopover, setShowAddListPopover] = useState(false);
+  const [isSettingPanelOpen, setSettingPanelOpen] = useState(false);
   const [draggingListId, setDraggingListId] = useState(null);
   const [dragOverListId, setDragOverListId] = useState(null);
 
@@ -41,12 +39,12 @@ const Kanban = () => {
   const shownColumns = useMemo(() => getViewShownColumns(metadata.view, metadata.view.columns), [metadata.view]);
 
   const groupByColumn = useMemo(() => {
-    return shownColumns.find(col => col.key === groupByColumnKey);
-  }, [shownColumns, groupByColumnKey]);
+    return metadata.columns.find(col => col.key === groupByColumnKey);
+  }, [metadata.columns, groupByColumnKey]);
 
   const titleField = useMemo(() => {
-    return shownColumns.find(col => col.key === titleFieldKey);
-  }, [shownColumns, titleFieldKey]);
+    return metadata.columns.find(col => col.key === titleFieldKey);
+  }, [metadata.columns, titleFieldKey]);
 
   const currentSettings = useMemo(() => ({
     selectedViewId,
@@ -58,10 +56,6 @@ const Kanban = () => {
     hiddenColumns,
   }), [selectedViewId, groupByColumnKey, titleFieldKey, hideEmptyValues, showFieldNames, textWrap, hiddenColumns]);
 
-  const contentFields = useMemo(() => {
-    return shownColumns.filter(col => col.key !== titleFieldKey);
-  }, [shownColumns, titleFieldKey]);
-
   const lists = useMemo(() => {
     if (!groupByColumn) return [];
 
@@ -108,7 +102,7 @@ const Kanban = () => {
         id: option.id,
         title: option.name,
         field: groupByColumn,
-        contentFields,
+        shownColumns,
         cards: isPrivateColumn ? groupedCardsMap[option.id] : groupedCardsMap[option.name],
       }));
     } else if (groupByColumn.type === CellType.COLLABORATOR) {
@@ -117,7 +111,7 @@ const Kanban = () => {
           id: collaborator.email,
           title: [collaborator.email],
           field: groupByColumn,
-          contentFields,
+          shownColumns,
           cards: groupedCardsMap[collaborator.email],
         }));
       }
@@ -127,35 +121,16 @@ const Kanban = () => {
       id: 'uncategorized',
       title: gettext('Uncategorized'),
       field: groupByColumn,
-      contentFields,
+      shownColumns,
       cards: ungroupedCards,
     };
 
     groupedLists.push(ungroupedList);
 
     return groupedLists;
-  }, [metadata, collaborators, groupByColumnKey, groupByColumn, titleField, contentFields]);
-
-  const canAddList = useMemo(() => {
-    const groupByCol = shownColumns.find(col => col.key === groupByColumn?.key);
-    return groupByCol?.editable;
-  }, [shownColumns, groupByColumn]);
-
-  const handleAddListButtonClick = useCallback(() => {
-    setShowAddListPopover(true);
-  }, []);
+  }, [metadata, collaborators, groupByColumnKey, groupByColumn, titleField, shownColumns]);
 
-  const handleAddNewList = useCallback((option) => {
-    const oldData = groupByColumn.data;
-    const options = [...oldData.options, option];
-    const optionModifyType = COLUMN_DATA_OPERATION_TYPE.ADD_OPTION;
-    store.modifyColumnData(groupByColumn.key, { options }, { options: oldData.options }, { optionModifyType });
-    setShowAddListPopover(false);
-  }, [store, groupByColumn]);
-
-  const handleCancelAddList = useCallback(() => {
-    setShowAddListPopover(false);
-  }, []);
+  const canAddList = useMemo(() => groupByColumn && groupByColumn.editable && groupByColumn.type !== CellType.COLLABORATOR, [groupByColumn]);
 
   const handleDeleteList = useCallback((listId) => {
     const oldData = groupByColumn.data;
@@ -257,17 +232,17 @@ const Kanban = () => {
   }, [lists, groupByColumnKey, groupByColumn, modifyRecord, getOldRowData]);
 
   useEffect(() => {
-    const unsubscribeKanbanSetting = window.sfMetadataContext.eventBus.subscribe(EVENT_BUS_TYPE.TOGGLE_KANBAN_SETTING, () => setSettingOpen(!isSettingOpen));
+    const unsubscribeKanbanSetting = window.sfMetadataContext.eventBus.subscribe(EVENT_BUS_TYPE.TOGGLE_KANBAN_SETTING, () => setSettingPanelOpen(!isSettingPanelOpen));
 
     return () => {
       unsubscribeKanbanSetting();
     };
-  }, [isSettingOpen, viewsMap]);
+  }, [isSettingPanelOpen, viewsMap]);
 
   return (
-    <div className='sf-metadata-view-kanban-container'>
-      <div className='sf-metadata-view-kanban-wrapper'>
-        <div className='sf-metadata-view-kanban'>
+    <div className="sf-metadata-view-kanban-container">
+      <div className="sf-metadata-view-kanban-wrapper">
+        <div className="sf-metadata-view-kanban">
           {lists && lists.map((list, index) => (
             <div
               key={list.id}
@@ -293,31 +268,18 @@ const Kanban = () => {
             </div>
           ))}
           {canAddList && (
-            <div
-              id="add-list-button"
-              className='add-list-button'
-              onClick={handleAddListButtonClick}
-            >
-              <Icon iconName="add-table" />
-              <span className="btn-text">{gettext('Add a new list')}</span>
-            </div>
-          )}
-          {isShowAddListPopover && (
-            <AddListPopover
-              options={groupByColumn.data.options}
-              onCancel={handleCancelAddList}
-              onSubmit={handleAddNewList}
-            />
+            <AddList groupByColumn={groupByColumn}/>
           )}
         </div>
       </div>
-      {isSettingOpen &&
-      <SettingPanel
-        shownColumns={shownColumns}
-        settings={currentSettings}
-        onSettingChange={updateSetting}
-        onClose={() => setSettingOpen(false)}
-      />}
+      {isSettingPanelOpen && (
+        <SettingPanel
+          columns={metadata.columns}
+          settings={currentSettings}
+          onSettingChange={updateSetting}
+          onClose={() => setSettingPanelOpen(false)}
+        />
+      )}
     </div>
   );
 };

diff --git a/frontend/src/metadata/views/kanban/list/index.js b/frontend/src/metadata/views/kanban/list/index.js
@@ -8,7 +8,7 @@ const List = ({
   id,
   title,
   field,
-  contentFields,
+  shownColumns,
   cards,
   settings,
   moreOperationsList,
@@ -35,11 +35,11 @@ const List = ({
 
   return (
     <div
-      className='sf-metadata-view-kanban-list'
+      className="sf-metadata-view-kanban-list"
       onDragOver={handleDragOver}
       onDrop={handleDrop}
     >
-      <div className='list-header'>
+      <div className="list-header">
         <span>
           {id === 'uncategorized' ? (
             <span>{title}</span>
@@ -57,12 +57,12 @@ const List = ({
           </div>
         )}
       </div>
-      <div className='list-body'>
+      <div className="list-body">
         {cards.map(card => (
           <Card
             key={card.id}
             title={card.title}
-            fields={contentFields}
+            fields={shownColumns}
             record={card.record}
             draggable={field.editable}
             settings={settings}
@@ -79,7 +79,7 @@ List.propTypes = {
   id: PropTypes.string.isRequired,
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.array]).isRequired,
   field: PropTypes.object.isRequired,
-  contentFields: PropTypes.array.isRequired,
+  shownColumns: PropTypes.array.isRequired,
   cards: PropTypes.array.isRequired,
   settings: PropTypes.object.isRequired,
   moreOperationsList: PropTypes.array.isRequired,

diff --git a/frontend/src/metadata/views/kanban/list/list-more-operations.js b/frontend/src/metadata/views/kanban/list/list-more-operations.js
@@ -13,7 +13,7 @@ const ListMoreOperations = ({ listId, field, moreOperationsList }) => {
       <DropdownToggle
         tag={'i'}
         role="button"
-        className='sf3-font sf3-font-more'
+        className="sf3-font sf3-font-more"
         data-toggle="dropdown"
         title={gettext('More operations')}
         aria-label={gettext('More operations')}

diff --git a/frontend/src/metadata/views/kanban/setting-panel/hidden-columns.js b/frontend/src/metadata/views/kanban/setting-panel/hidden-columns.js
@@ -11,8 +11,8 @@ const KanbanHiddenColumns = ({ settings, onChange }) => {
   const { metadata } = useMetadataView();
 
   const columns = useMemo(() => {
-    return metadata.view.columns.filter(col => (col.key !== settings.groupByColumnKey && col.key !== settings.titleFieldKey));
-  }, [metadata.view.columns, settings.groupByColumnKey, settings.titleFieldKey]);
+    return metadata.view.columns.filter(col => col.key !== settings.groupByColumnKey);
+  }, [metadata.view.columns, settings.groupByColumnKey]);
 
   const isEmpty = useMemo(() => {
     if (!Array.isArray(columns) || columns.length === 0) return true;
@@ -73,7 +73,7 @@ const KanbanHiddenColumns = ({ settings, onChange }) => {
   }, [onChange]);
 
   return (
-    <div className='sf-metadata-kanban-hide-columns'>
+    <div className="sf-metadata-kanban-hide-columns">
       <div className={classNames('hide-columns-list', { 'empty-hide-columns-container': isEmpty })}>
         {isEmpty && <div className="empty-hide-columns-list">{gettext('No properties available to be hidden')}</div>}
         {!isEmpty && columns.map((column, columnIndex) => {

diff --git a/frontend/src/metadata/views/kanban/setting-panel/index.js b/frontend/src/metadata/views/kanban/setting-panel/index.js
@@ -9,7 +9,7 @@ import { CellType, COLUMNS_ICON_CONFIG, KANBAN_SETTINGS_KEYS, VIEW_TYPE } from '
 import Switch from '../../../../components/common/switch';
 
 const SettingPanel = ({
-  shownColumns,
+  columns,
   settings,
   onSettingChange,
   onClose
@@ -24,30 +24,30 @@ const SettingPanel = ({
   , [viewsMap]);
 
   const groupByOptions = useMemo(() => {
-    return shownColumns
+    return columns
       .filter(col => col.type === CellType.SINGLE_SELECT || col.type === CellType.COLLABORATOR)
       .map(col => ({
         value: col.key,
         label: (
           <>
             <span className="sf-metadata-filter-header-icon"><Icon iconName={COLUMNS_ICON_CONFIG[col.type]} /></span>
-            <span className=''>{col.name}</span>
+            <span>{col.name}</span>
           </>
         )
       }));
-  }, [shownColumns]);
+  }, [columns]);
 
   const titleOptions = useMemo(() => {
-    return shownColumns.map(col => ({
+    return columns.map(col => ({
       value: col.key,
       label: (
         <>
           <span className="sf-metadata-filter-header-icon"><Icon iconName={COLUMNS_ICON_CONFIG[col.type]} /></span>
-          <span className=''>{col.name}</span>
+          <span>{col.name}</span>
         </>
       )
     }));
-  }, [shownColumns]);
+  }, [columns]);
 
   const selectedViewOption = viewOptions.find(option => option.value === settings.selectedViewId);
   const selectedGroupByOption = groupByOptions.find(option => option.value === settings.groupByColumnKey);
@@ -157,7 +157,7 @@ const SettingPanel = ({
 };
 
 SettingPanel.propTypes = {
-  shownColumns: PropTypes.array.isRequired,
+  columns: PropTypes.array.isRequired,
   settings: PropTypes.object.isRequired,
   onSettingChange: PropTypes.func.isRequired,
   onClose: PropTypes.func.isRequired,