dtable-ui-component 6.0.37 → 6.0.38-alpha.2

package/lib/DTableFiltersPopover/widgets/filter-list/index.css

@@ -19,6 +19,87 @@
   color: #666666;
 }
 
+/* ---- filter group start ---- */
+.filters-list .filter-group {
+  display: flex;
+  align-items: center;
+  padding: 0.25rem 0;
+}
+
+.filters-list .filter-group .filter-group-wrapper {
+  flex: 1;
+  display: flex;
+}
+
+.filters-list .filter-group .delete-filter,
+.filters-list .filter-group .filter-conjunction {
+  align-self: flex-start;
+}
+
+.filters-list .filter-group .delete-filter,
+.filters-list .filter-group .filter-conjunction.conjunction-text {
+  margin-top: 8px;
+}
+
+.filters-list .filter-group .filter-group-container {
+  width: calc(100% - 72px);
+  min-height: 38px;
+  margin-left: .5rem;
+  padding: 4px 10px;
+  border: 1px solid rgba(0, 40, 100, .12);
+  border-radius: 3px;
+}
+
+.filters-list .filter-group.draggable .filter-group-container {
+  /* 94: conjunction width(72) + drag icon width(16) + drag icon margin left(8) */
+  width: calc(100% - 96px);
+}
+
+.filters-list .filter-group.readonly .filter-group-container {
+  width: calc(100% - 52px);
+}
+
+.filters-list .filter-group.level-1 .filter-group-container {
+  background-color: #f7f7f7;
+}
+
+.filters-list .filter-group-container .group-filter-add-tool {
+  border-top: unset;
+  background-color: #f7f7f7;
+  margin-top: 2px;
+  padding: 0;
+  height: 30px;
+  line-height: 30px;
+  font-weight: 400;
+}
+
+.filters-list .filter-group-container .group-filter-add-tool .dtable-icon-add-table,
+.filters-list .filter-group-container .group-filter-add-tool .add-new-option {
+  color: #999;
+}
+
+.filters-list .filter-group-container .group-filter-add-tool:hover .dtable-icon-add-table,
+.filters-list .filter-group-container .group-filter-add-tool:hover .add-new-option {
+  color: #555;
+}
+
+.filters-list .dtable-filter-group-drag {
+  display: flex;
+  margin-left: .5rem;
+}
+
+.filters-list .drag-filter-handle,
+.filters-list .drag-filter-group-handle {
+  color: #949494;
+  cursor: grab;
+}
+
+.filters-list .dragging-filter-wrapper .group-filter-add-tool,
+.filters-list .dragging-filter-wrapper .delete-filter {
+  display: none;
+}
+/* ---- filter group end ---- */
+
 .filters-list .filter-item {
   display: flex;
   align-items: center;
@@ -40,7 +121,7 @@
   margin-left: 0;
 }
 
-.filters-list .filter-item .filter-term .selector-collaborator {
+.filters-list .filter-item .filter-term {
   max-width: 300px;
   min-width: 70px;
 }
@@ -66,6 +147,10 @@
   width: calc(100% - 20px);
 }
 
+.filters-list .dtable-select.collaborator-select .selected-option-show {
+  height: auto;
+}
+
 .filters-list .dtable-select .selected-option {
   width: auto;
   overflow-x: auto;
@@ -77,7 +162,7 @@
 
 .filters-list .selected-conjunction-show {
   padding: 0 10px;
-  color: #666;
+  color: #666666;
 }
 
 .filters-list .filter-column {
@@ -116,14 +201,14 @@
 
 .filters-list .selector-multiple-select .option:hover,
 .filters-list .selector-multiple-select .option.option-active,
-.filters-list .selector-collaborator .option:hover,
-.filters-list .selector-collaborator .option.option-active {
+.option-group-selector-collaborator .option:hover,
+.option-group-selector-collaborator .option.option-active {
   color: #212529;
   background-color: #f7f7f7;
 }
 
 .filters-list .selector-multiple-select .option.option-active .select-option-name,
-.filters-list .selector-collaborator .option.option-active .select-option-name {
+.option-group-selector-collaborator .option.option-active .select-option-name {
   color: #212529;
 }
 
@@ -171,6 +256,17 @@
   outline: 0;
 }
 
+.filters-list .filter-term .rc-calendar-input {
+  border: 1px solid transparent;
+  color: #666;
+  cursor: text;
+  height: 22px;
+  font-size: 12px;
+  line-height: 1.5;
+  outline: 0;
+  width: 100%;
+}
+
 .filters-list .filter-term .date-picker-container table tr {
   height: 30px;
 }
@@ -214,7 +310,8 @@
 }
 
 .filters-list .multiple-check-icon,
-.filters-list .collaborator-check-icon {
+.filters-list .collaborator-check-icon 
+.option-group-selector-collaborator .collaborator-check-icon {
   display: inline-flex;
   width: 20px;
   height: 20px;
@@ -223,7 +320,8 @@
 }
 
 .filters-list .multiple-check-icon .dtable-icon-check-mark,
-.filters-list .collaborator-check-icon .dtable-icon-check-mark {
+.filters-list .collaborator-check-icon .dtable-icon-check-mark,
+.option-group-selector-collaborator .collaborator-check-icon .dtable-icon-check-mark {
   font-size: 12px;
   color: #798d99;
 }
@@ -240,14 +338,17 @@
   background: #eaeaea;
 }
 
+.option-group-selector-collaborator .collaborator-show
 .filters-list .collaborator-show {
   flex: 1;
 }
 
+.option-group-selector-collaborator .collaborator-avatar-container,
 .filters-list .collaborator-avatar-container {
   width: 16px;
 }
 
+.option-group-selector-collaborator .collaborator-avatar,
 .filters-list .collaborator-avatar {
   width: 16px;
   height: 16px;
@@ -255,19 +356,23 @@
   border-radius: 50%;
 }
 
+.option-group-selector-collaborator .option .collaborator-avatar,
 .filters-list .option .collaborator-avatar {
   transform: translateY(-2px);
 }
 
+.option-group-selector-collaborator .collaborator-name,
 .filters-list .collaborator-name {
   margin-left: 5px;
   max-width: 200px;
 }
 
+.option-group-selector-collaborator .option-collaborator,
 .filters-list .option-collaborator {
   display: flex;
 }
 
+.option-group-selector-collaborator .collaborator-container,
 .filters-list .collaborator-container {
   flex: 1;
 }
@@ -287,7 +392,7 @@
 }
 
 .filters-list .filter-item .dtable-icon-fork-number:hover {
-  color: #555;
+  color: #555555;
 }
 
 .filters-list .filter-container-readonly .dtable-select .selected-option-show,
@@ -299,7 +404,9 @@
   width: 100%;
 }
 
-.filters-list .option-group .option-group-content .collaborator {
+.dropdown-item .collaborator,
+.filters-list .option-group-content .collaborator,
+.option-group-selector-collaborator .option-group-content .collaborator {
   background-color: unset;
 }
 
@@ -324,7 +431,9 @@
 }
 
 .filters-list .single-select-option,
-.filters-list .multiple-select-option {
+.filters-list .multiple-select-option,
+.option-group-selector-single-select .single-select-option,
+.option-group-selector-multiple-select .multiple-select-option {
   display: block;
   text-align: left;
   width: min-content;

package/lib/DTableFiltersPopover/widgets/filter-list/index.js

@@ -9,62 +9,227 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _dtableUtils = require("dtable-utils");
+var _filterItemUtils = _interopRequireDefault(require("../../utils/filter-item-utils"));
 var _filterItem = _interopRequireDefault(require("../filter-item"));
 var _utils = require("../../utils");
+var _constants = require("../../constants");
+var _filterGroup = _interopRequireDefault(require("../filter-group"));
 require("./index.css");
 class FiltersList extends _react.Component {
   constructor(props) {
     super(props);
-    this.updateFilter = (filterIndex, updatedFilter) => {
-      if (!updatedFilter) return;
-      this.props.updateFilter(filterIndex, updatedFilter);
+    this.modifyFilterConjunction = new_filter_conjunction => {
+      const {
+        filterConjunction: filter_conjunction,
+        filters
+      } = this.props;
+      const {
+        filter_conjunction: next_filter_conjunction,
+        filters: next_filters
+      } = (0, _utils.applyFilterOperation)({
+        type: _constants.FILTER_OPERATION_TYPE.MODIFY_CONJUNCTION,
+        filter_conjunction,
+        filters,
+        payload: {
+          new_filter_conjunction
+        }
+      });
+      this.props.updateFilters({
+        filter_conjunction: next_filter_conjunction,
+        filters: next_filters
+      });
     };
-    this.deleteFilter = index => {
+    this.updateFilter = (filter_index, new_filter) => {
+      if (!new_filter) return;
       const {
-        scheduleUpdate
+        filterConjunction: filter_conjunction,
+        filters
       } = this.props;
-      this.props.deleteFilter(index, scheduleUpdate);
+      const {
+        filter_conjunction: next_filter_conjunction,
+        filters: next_filters
+      } = (0, _utils.applyFilterOperation)({
+        type: _constants.FILTER_OPERATION_TYPE.UPDATE_FILTER,
+        filter_conjunction,
+        filters,
+        payload: {
+          filter_index,
+          new_filter
+        }
+      });
+      this.props.updateFilters({
+        filter_conjunction: next_filter_conjunction,
+        filters: next_filters
+      });
     };
-    this.updateConjunction = filterConjunction => {
-      this.props.updateFilterConjunction(filterConjunction);
+    this.deleteFilter = filter_index => {
+      const {
+        filterConjunction: filter_conjunction,
+        filters
+      } = this.props;
+      const {
+        filter_conjunction: next_filter_conjunction,
+        filters: next_filters
+      } = (0, _utils.applyFilterOperation)({
+        type: _constants.FILTER_OPERATION_TYPE.DELETE_FILTER,
+        filter_conjunction,
+        filters,
+        payload: {
+          filter_index
+        }
+      });
+      this.props.updateFilters({
+        filter_conjunction: next_filter_conjunction,
+        filters: next_filters
+      });
     };
-    this.getConjunctionOptions = () => {
-      if (!this.conjunctionOptions) {
-        this.conjunctionOptions = _utils.FilterItemUtils.generatorConjunctionOptions();
+    this.moveFilter = _ref => {
+      let {
+        source_filter_index,
+        target_filter_index,
+        source_group_index,
+        target_group_index
+      } = _ref;
+      if (source_filter_index === target_filter_index && source_group_index === target_group_index) {
+        return;
       }
-      return this.conjunctionOptions;
+      const {
+        filterConjunction: filter_conjunction,
+        filters
+      } = this.props;
+      const {
+        filter_conjunction: next_filter_conjunction,
+        filters: next_filters
+      } = (0, _utils.applyFilterOperation)({
+        type: _constants.FILTER_OPERATION_TYPE.MOVE_FILTER,
+        filter_conjunction,
+        filters,
+        payload: {
+          source_filter_index,
+          target_filter_index,
+          source_group_index,
+          target_group_index
+        }
+      });
+      this.props.updateFilters({
+        filter_conjunction: next_filter_conjunction,
+        filters: next_filters
+      });
     };
-    this.getFilterColumns = () => {
+    this.modifyConjunctionInGroup = (group_index, new_filter_conjunction) => {
       const {
-        columns
+        filterConjunction: filter_conjunction,
+        filters
       } = this.props;
-      return columns.filter(column => {
-        const {
-          data
-        } = column;
-        let {
-          type
-        } = column;
-        if (data && (type === _dtableUtils.CellType.LINK || _dtableUtils.FORMULA_COLUMN_TYPES_MAP[type] && data.result_type === _dtableUtils.FORMULA_RESULT_TYPE.ARRAY)) {
-          type = data.array_type;
+      const {
+        filter_conjunction: next_filter_conjunction,
+        filters: next_filters
+      } = (0, _utils.applyFilterOperation)({
+        type: _constants.FILTER_OPERATION_TYPE.MODIFY_CONJUNCTION_IN_GROUP,
+        filter_conjunction,
+        filters,
+        payload: {
+          group_index,
+          new_filter_conjunction
         }
-        return Object.prototype.hasOwnProperty.call(_dtableUtils.FILTER_COLUMN_OPTIONS, type);
+      });
+      this.props.updateFilters({
+        filter_conjunction: next_filter_conjunction,
+        filters: next_filters
       });
     };
+    this.addFilterIntoGroup = (group_index, filter) => {
+      if (!filter) return;
+      const {
+        filterConjunction: filter_conjunction,
+        filters
+      } = this.props;
+      const {
+        filter_conjunction: next_filter_conjunction,
+        filters: next_filters
+      } = (0, _utils.applyFilterOperation)({
+        type: _constants.FILTER_OPERATION_TYPE.ADD_FILTER_INTO_GROUP,
+        filter_conjunction,
+        filters,
+        payload: {
+          group_index,
+          filter
+        }
+      });
+      this.props.updateFilters({
+        filter_conjunction: next_filter_conjunction,
+        filters: next_filters
+      });
+    };
+    this.deleteFilterInGroup = (group_index, filter_index) => {
+      const {
+        filterConjunction: filter_conjunction,
+        filters
+      } = this.props;
+      const {
+        filter_conjunction: next_filter_conjunction,
+        filters: next_filters
+      } = (0, _utils.applyFilterOperation)({
+        type: _constants.FILTER_OPERATION_TYPE.DELETE_FILTER_IN_GROUP,
+        filter_conjunction,
+        filters,
+        payload: {
+          group_index,
+          filter_index
+        }
+      });
+      this.props.updateFilters({
+        filter_conjunction: next_filter_conjunction,
+        filters: next_filters
+      });
+    };
+    this.updateFilterInGroup = (group_index, filter_index, new_filter) => {
+      if (!new_filter) return;
+      const {
+        filterConjunction: filter_conjunction,
+        filters
+      } = this.props;
+      const {
+        filter_conjunction: next_filter_conjunction,
+        filters: next_filters
+      } = (0, _utils.applyFilterOperation)({
+        type: _constants.FILTER_OPERATION_TYPE.UPDATE_FILTER_IN_GROUP,
+        filter_conjunction,
+        filters,
+        payload: {
+          group_index,
+          filter_index,
+          new_filter
+        }
+      });
+      this.props.updateFilters({
+        filter_conjunction: next_filter_conjunction,
+        filters: next_filters
+      });
+    };
+    this.getConjunctionOptions = () => {
+      if (!this.conjunctionOptions) {
+        this.conjunctionOptions = _filterItemUtils.default.generatorConjunctionOptions();
+      }
+      return this.conjunctionOptions;
+    };
     this.getColumnOptions = () => {
+      const {
+        columns
+      } = this.props;
       if (!this.columnOptions) {
-        const filterColumns = this.getFilterColumns();
+        const filterColumns = (0, _utils.getFilterColumns)(columns);
         this.columnOptions = filterColumns.map(column => {
-          return _utils.FilterItemUtils.generatorColumnOption(column);
+          return _filterItemUtils.default.generatorColumnOption(column);
         });
       }
       return this.columnOptions;
     };
-    this.renderFilterItem = (filter, index, errMsg, filterColumn) => {
+    this.renderFilter = (filter, index, filterColumn) => {
       const {
         filterConjunction,
-        value,
-        isLocked,
+        isInModal,
+        columns,
         collaborators,
         userDepartmentIdsMap,
         departments,
@@ -73,24 +238,49 @@ class FiltersList extends _react.Component {
       } = this.props;
       const conjunctionOptions = this.getConjunctionOptions();
       const columnOptions = this.getColumnOptions();
+      if ((0, _dtableUtils.checkIsFilterGroup)(filter)) {
+        return /*#__PURE__*/_react.default.createElement(_filterGroup.default, {
+          key: "filter-group-".concat(index),
+          isInModal: isInModal,
+          lang: lang,
+          columns: columns,
+          index: index,
+          filterConjunction: filterConjunction,
+          filter: filter,
+          conjunctionOptions: conjunctionOptions,
+          columnOptions: columnOptions,
+          collaborators: collaborators,
+          userDepartmentIdsMap: userDepartmentIdsMap,
+          departments: departments,
+          firstDayOfWeek: firstDayOfWeek,
+          modifyFilterConjunction: this.modifyFilterConjunction,
+          deleteFilterGroup: this.deleteFilter,
+          addFilterIntoGroup: this.addFilterIntoGroup,
+          modifyConjunctionInGroup: this.modifyConjunctionInGroup,
+          deleteFilterInGroup: this.deleteFilterInGroup,
+          updateFilterInGroup: this.updateFilterInGroup
+        });
+      }
+      const {
+        error_message
+      } = _dtableUtils.ValidateFilter.validate(filter, columns);
       return /*#__PURE__*/_react.default.createElement(_filterItem.default, {
         key: index,
-        isLocked: isLocked,
+        isInModal: isInModal,
+        lang: lang,
         index: index,
         filter: filter,
-        errMsg: errMsg,
+        errMsg: error_message,
         filterColumn: filterColumn,
         filterConjunction: filterConjunction,
         conjunctionOptions: conjunctionOptions,
         filterColumnOptions: columnOptions,
-        value: value,
         collaborators: collaborators,
         userDepartmentIdsMap: userDepartmentIdsMap,
         departments: departments,
-        lang: lang,
         deleteFilter: this.deleteFilter,
         updateFilter: this.updateFilter,
-        updateConjunction: this.updateConjunction,
+        updateConjunction: this.modifyFilterConjunction,
         firstDayOfWeek: firstDayOfWeek
       });
     };
@@ -122,11 +312,8 @@ class FiltersList extends _react.Component {
       const {
         column_key
       } = filter;
-      const {
-        error_message
-      } = _dtableUtils.ValidateFilter.validateColumn(column_key, columns);
-      const filterColumn = (0, _utils.getColumnByKey)(columns, column_key) || {};
-      return this.renderFilterItem(filter, index, error_message, filterColumn);
+      const filterColumn = (0, _utils.getColumnByKey)(column_key, columns) || {};
+      return this.renderFilter(filter, index, filterColumn);
     }));
   }
 }

package/lib/locales/en.json

@@ -24,6 +24,11 @@
   "Deleted_department": "Deleted department",
   "View_original_image": "View original image",
   "Add_filter": "Add filter",
+  "And": "And",
+  "Or": "Or",
+  "Add_filter_group": "Add filter group",
+  "Click_to_add_filter": "Click to add filter",
+  "Click_to_input_value": "Click to input value",
   "Submit": "Submit",
   "No_filters": "No filters",
   "Select_an_option": "Select an option",

package/lib/locales/zh-CN.json

@@ -24,6 +24,11 @@
   "Deleted_department": "已删除部门",
   "View_original_image": "View original image",
   "Add_filter": "增加过滤条件",
+  "And": "并且",
+  "Or": "或者",
+  "Add_filter_group": "增加过滤组",
+  "Click_to_add_filter": "点击添加过滤器",
+  "Click_to_input_value": "点击输入值",
   "Submit": "提交",
   "No_filters": "没有过滤器",
   "Select_an_option": "选择标签",

package/lib/utils/column-utils.js

@@ -3,7 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isEnableCheckFormat = exports.getDateColumnFormat = void 0;
+exports.getDateColumnFormat = void 0;
+exports.isCheckboxColumn = isCheckboxColumn;
+exports.isEnableCheckFormat = void 0;
 var _dtableUtils = require("dtable-utils");
 const isEnableCheckFormat = column => {
   if (!column) return false;
@@ -22,4 +24,21 @@ const getDateColumnFormat = column => {
   // Old Europe format is D/M/YYYY new format is DD/MM/YYYY
   return format;
 };
-exports.getDateColumnFormat = getDateColumnFormat;
+exports.getDateColumnFormat = getDateColumnFormat;
+function isCheckboxColumn(column) {
+  let {
+    type,
+    data
+  } = column;
+  if (_dtableUtils.FORMULA_COLUMN_TYPES_MAP[type]) {
+    const {
+      result_type,
+      array_type
+    } = data || {};
+    if (result_type === _dtableUtils.FORMULA_RESULT_TYPE.ARRAY) {
+      return array_type === _dtableUtils.CellType.CHECKBOX;
+    }
+    return false;
+  }
+  return type === _dtableUtils.CellType.CHECKBOX;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-ui-component",
-  "version": "6.0.37",
+  "version": "6.0.38-alpha.2",
   "main": "./lib/index.js",
   "dependencies": {
     "@seafile/react-image-lightbox": "4.0.2",