add kanban view

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.51",
     "@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/kanban-add-category-popover/index.css

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

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

@@ -0,0 +1,83 @@
+import React, { useState, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { Button } from 'reactstrap';
+import { CustomizePopover } from '@seafile/sf-metadata-ui-component';
+import Color from '../options-popover/option/color';
+import Name from '../options-popover/option/name';
+import { generateNewOption } from '../../../utils/column';
+import { gettext } from '../../../../utils/constants';
+import { COLUMN_DATA_OPERATION_TYPE } from '../../../store/operations';
+import toaster from '../../../../components/toast';
+
+import './index.css';
+
+const KanbanAddCategoryPopover = ({ target, options, onCancel, onSubmit }) => {
+  const [option, setOption] = useState(generateNewOption(options, ''));
+
+  const handleOptionChange = useCallback((newOption, type) => {
+    switch (type) {
+      case COLUMN_DATA_OPERATION_TYPE.MODIFY_OPTION_COLOR:
+        setOption({ ...option, color: newOption.color, textColor: newOption.textColor, borderColor: newOption.borderColor });
+        break;
+      case COLUMN_DATA_OPERATION_TYPE.RENAME_OPTION:
+        setOption({ ...option, name: newOption.name });
+        break;
+      default:
+        break;
+    }
+  }, [option]);
+
+  const handleSubmit = useCallback(() => {
+    if (!option.name) {
+      toaster.danger(gettext('Name is required'));
+      return;
+    }
+
+    const duplicateNameOption = options.find(o => o.name === option.name && o.id !== option.id);
+    if (duplicateNameOption) {
+      toaster.danger(gettext('There is another option with this name'));
+      return;
+    }
+
+    onSubmit(option);
+  }, [options, option, onSubmit]);
+
+  return (
+    <CustomizePopover
+      target={target}
+      className="sf-metadata-kanban-add-board-popover"
+      hide={onCancel}
+      hideWithEsc={onCancel}
+      modifiers={{ preventOverflow: { boundariesElement: document.body } }}
+    >
+      <div className="sf-metadata-kanban-add-board-popover-inner">
+        <div className="kanban-popover-body">
+          <Color
+            option={option}
+            onChange={handleOptionChange}
+            isViewing={true}
+            isPredefined={false}
+          />
+          <Name
+            option={option}
+            isEditing={true}
+            onChange={handleOptionChange}
+          />
+        </div>
+        <div className="kanban-popover-footer">
+          <Button className="mr-2" onClick={onCancel}>{gettext('Cancel')}</Button>
+          <Button color="primary" onClick={handleSubmit}>{gettext('Submit')}</Button>
+        </div>
+      </div>
+    </CustomizePopover>
+  );
+};
+
+KanbanAddCategoryPopover.propTypes = {
+  target: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  options: PropTypes.array.isRequired,
+  onCancel: PropTypes.func.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+};
+
+export default KanbanAddCategoryPopover;

frontend/src/metadata/components/popover/view-popover/add-view/index.js

@@ -15,6 +15,10 @@ const VIEW_OPTIONS = [
   {
     key: 'gallery',
     type: VIEW_TYPE.GALLERY,
+  },
+  {
+    key: 'kanban',
+    type: VIEW_TYPE.KANBAN,
   }
 ];
 
@@ -43,6 +47,8 @@ const AddView = ({ target, toggle, onOptionClick }) => {
         return gettext('Table');
       case VIEW_TYPE.GALLERY:
         return gettext('Gallery');
+      case VIEW_TYPE.KANBAN:
+        return gettext('Kanban');
       default:
         return type;
     }

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/index.js

@@ -4,6 +4,7 @@ import { EVENT_BUS_TYPE, VIEW_TYPE } from '../../constants';
 import TableViewToolbar from './table-view-toolbar';
 import GalleryViewToolbar from './gallery-view-toolbar';
 import FaceRecognitionViewToolbar from './face-recognition';
+import KanbanViewToolBar from './kanban-view-toolbar';
 
 import './index.css';
 
@@ -97,6 +98,15 @@ const ViewToolBar = ({ viewId, isCustomPermission, showDetail }) => {
           showDetail={showDetail}
         />
       )}
+      {viewType === VIEW_TYPE.KANBAN && (
+        <KanbanViewToolBar
+          readOnly={readOnly}
+          view={view}
+          collaborators={collaborators}
+          modifyFilters={modifyFilters}
+          modifySorts={modifySorts}
+        />
+      )}
     </div>
   );
 };

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

@@ -0,0 +1,78 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { IconBtn } from '@seafile/sf-metadata-ui-component';
+import { EVENT_BUS_TYPE, PRIVATE_COLUMN_KEY } from '../../../constants';
+import { FilterSetter, SortSetter } from '../../data-process-setter';
+
+const KanbanViewToolBar = ({
+  readOnly,
+  view,
+  collaborators,
+  modifyFilters,
+  modifySorts
+}) => {
+  const viewType = useMemo(() => view.type, [view]);
+  const viewColumns = useMemo(() => {
+    if (!view) return [];
+    return view.columns;
+  }, [view]);
+
+  const filterColumns = useMemo(() => {
+    return viewColumns.filter(c => c.key !== PRIVATE_COLUMN_KEY.FILE_TYPE);
+  }, [viewColumns]);
+
+  const onToggleKanbanSetting = () => {
+    window.sfMetadataContext.eventBus.dispatch(EVENT_BUS_TYPE.TOGGLE_KANBAN_SETTINGS);
+  };
+
+  return (
+    <>
+      <div className="sf-metadata-tool-left-operations">
+        <FilterSetter
+          isNeedSubmit={true}
+          wrapperClass="sf-metadata-view-tool-operation-btn sf-metadata-view-tool-filter"
+          filtersClassName="sf-metadata-filters"
+          target="sf-metadata-filter-popover"
+          readOnly={readOnly}
+          filterConjunction={view.filter_conjunction}
+          basicFilters={view.basic_filters}
+          filters={view.filters}
+          columns={filterColumns}
+          modifyFilters={modifyFilters}
+          collaborators={collaborators}
+          viewType={viewType}
+        />
+        <SortSetter
+          isNeedSubmit={true}
+          wrapperClass="sf-metadata-view-tool-operation-btn sf-metadata-view-tool-sort"
+          target="sf-metadata-sort-popover"
+          readOnly={readOnly}
+          sorts={view.sorts}
+          type={viewType}
+          columns={viewColumns}
+          modifySorts={modifySorts}
+        />
+        <IconBtn
+          iconName="set-up"
+          className="sf-metadata-view-tool-operation-btn sf-metadata-view-tool-setting"
+          size={24}
+          role="button"
+          aria-label="Setting"
+          tabIndex={0}
+          onClick={onToggleKanbanSetting}
+        />
+      </div>
+      <div className="sf-metadata-tool-right-operations"></div>
+    </>
+  );
+};
+
+KanbanViewToolBar.propTypes = {
+  readOnly: PropTypes.bool,
+  view: PropTypes.object,
+  collaborators: PropTypes.array,
+  modifyFilters: PropTypes.func,
+  modifySorts: PropTypes.func
+};
+
+export default KanbanViewToolBar;

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

@@ -38,6 +38,7 @@ export const EVENT_BUS_TYPE = {
   MODIFY_SORTS: 'modify_sorts',
   MODIFY_GROUPBYS: 'modify_groupbys',
   MODIFY_HIDDEN_COLUMNS: 'modify_hidden_columns',
+  MODIFY_SETTINGS: 'modify_settings',
 
   // change
   VIEW_CHANGED: 'view_changed',
@@ -56,4 +57,7 @@ export const EVENT_BUS_TYPE = {
 
   // face recognition
   TOGGLE_VIEW_TOOLBAR: 'toggle_view_toolbar',
+
+  // kanban
+  TOGGLE_KANBAN_SETTINGS: 'toggle_kanban_settings',
 };

frontend/src/metadata/constants/index.js

@@ -133,3 +133,5 @@ export const GALLERY_DATE_MODE = {
   DAY: 'day',
   ALL: 'all',
 };
+
+export const UNCATEGORIZED = '_uncategorized';