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

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

@@ -19,87 +19,6 @@
   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;
@@ -121,7 +40,7 @@
   margin-left: 0;
 }
 
-.filters-list .filter-item .filter-term {
+.filters-list .filter-item .filter-term .selector-collaborator {
   max-width: 300px;
   min-width: 70px;
 }
@@ -147,10 +66,6 @@
   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;
@@ -162,7 +77,7 @@
 
 .filters-list .selected-conjunction-show {
   padding: 0 10px;
-  color: #666666;
+  color: #666;
 }
 
 .filters-list .filter-column {
@@ -201,14 +116,14 @@
 
 .filters-list .selector-multiple-select .option:hover,
 .filters-list .selector-multiple-select .option.option-active,
-.option-group-selector-collaborator .option:hover,
-.option-group-selector-collaborator .option.option-active {
+.filters-list .selector-collaborator .option:hover,
+.filters-list .selector-collaborator .option.option-active {
   color: #212529;
   background-color: #f7f7f7;
 }
 
 .filters-list .selector-multiple-select .option.option-active .select-option-name,
-.option-group-selector-collaborator .option.option-active .select-option-name {
+.filters-list .selector-collaborator .option.option-active .select-option-name {
   color: #212529;
 }
 
@@ -256,17 +171,6 @@
   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;
 }
@@ -310,8 +214,7 @@
 }
 
 .filters-list .multiple-check-icon,
-.filters-list .collaborator-check-icon 
-.option-group-selector-collaborator .collaborator-check-icon {
+.filters-list .collaborator-check-icon {
   display: inline-flex;
   width: 20px;
   height: 20px;
@@ -320,8 +223,7 @@
 }
 
 .filters-list .multiple-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 {
+.filters-list .collaborator-check-icon .dtable-icon-check-mark {
   font-size: 12px;
   color: #798d99;
 }
@@ -338,17 +240,14 @@
   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;
@@ -356,23 +255,19 @@
   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;
 }
@@ -392,7 +287,7 @@
 }
 
 .filters-list .filter-item .dtable-icon-fork-number:hover {
-  color: #555555;
+  color: #555;
 }
 
 .filters-list .filter-container-readonly .dtable-select .selected-option-show,
@@ -404,9 +299,7 @@
   width: 100%;
 }
 
-.dropdown-item .collaborator,
-.filters-list .option-group-content .collaborator,
-.option-group-selector-collaborator .option-group-content .collaborator {
+.filters-list .option-group .option-group-content .collaborator {
   background-color: unset;
 }
 
@@ -431,9 +324,7 @@
 }
 
 .filters-list .single-select-option,
-.filters-list .multiple-select-option,
-.option-group-selector-single-select .single-select-option,
-.option-group-selector-multiple-select .multiple-select-option {
+.filters-list .multiple-select-option {
   display: block;
   text-align: left;
   width: min-content;

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

@@ -9,227 +9,62 @@ 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.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.updateFilter = (filterIndex, updatedFilter) => {
+      if (!updatedFilter) return;
+      this.props.updateFilter(filterIndex, updatedFilter);
     };
-    this.updateFilter = (filter_index, new_filter) => {
-      if (!new_filter) return;
+    this.deleteFilter = index => {
       const {
-        filterConjunction: filter_conjunction,
-        filters
+        scheduleUpdate
       } = this.props;
-      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.props.deleteFilter(index, scheduleUpdate);
     };
-    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.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;
-      }
-      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.modifyConjunctionInGroup = (group_index, 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_IN_GROUP,
-        filter_conjunction,
-        filters,
-        payload: {
-          group_index,
-          new_filter_conjunction
-        }
-      });
-      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.updateConjunction = filterConjunction => {
+      this.props.updateFilterConjunction(filterConjunction);
     };
     this.getConjunctionOptions = () => {
       if (!this.conjunctionOptions) {
-        this.conjunctionOptions = _filterItemUtils.default.generatorConjunctionOptions();
+        this.conjunctionOptions = _utils.FilterItemUtils.generatorConjunctionOptions();
       }
       return this.conjunctionOptions;
     };
-    this.getColumnOptions = () => {
+    this.getFilterColumns = () => {
       const {
         columns
       } = 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;
+        }
+        return Object.prototype.hasOwnProperty.call(_dtableUtils.FILTER_COLUMN_OPTIONS, type);
+      });
+    };
+    this.getColumnOptions = () => {
       if (!this.columnOptions) {
-        const filterColumns = (0, _utils.getFilterColumns)(columns);
+        const filterColumns = this.getFilterColumns();
         this.columnOptions = filterColumns.map(column => {
-          return _filterItemUtils.default.generatorColumnOption(column);
+          return _utils.FilterItemUtils.generatorColumnOption(column);
         });
       }
       return this.columnOptions;
     };
-    this.renderFilter = (filter, index, filterColumn) => {
+    this.renderFilterItem = (filter, index, errMsg, filterColumn) => {
       const {
         filterConjunction,
-        isInModal,
-        columns,
+        value,
+        isLocked,
         collaborators,
         userDepartmentIdsMap,
         departments,
@@ -238,49 +73,24 @@ 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,
-        isInModal: isInModal,
-        lang: lang,
+        isLocked: isLocked,
         index: index,
         filter: filter,
-        errMsg: error_message,
+        errMsg: errMsg,
         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.modifyFilterConjunction,
+        updateConjunction: this.updateConjunction,
         firstDayOfWeek: firstDayOfWeek
       });
     };
@@ -312,8 +122,11 @@ class FiltersList extends _react.Component {
       const {
         column_key
       } = filter;
-      const filterColumn = (0, _utils.getColumnByKey)(column_key, columns) || {};
-      return this.renderFilter(filter, index, filterColumn);
+      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);
     }));
   }
 }

package/lib/GeolocationEditor/mb-editor/map-editor/index.css

@@ -1,9 +1,12 @@
 .dtable-ui-mobile-geolocation-map-editor .dtable-ui-mobile-geolocation-map-editor-input-container {
-  height: 60px;
-  padding-top: 16px;
+  height: auto;
   width: 100%;
 }
 
+.dtable-ui-mobile-geolocation-map-editor .dtable-ui-mobile-geolocation-map-editor-input-container .view-subtitle:first-child {
+  border-top: 0;
+}
+
 .dtable-ui-mobile-geolocation-map-editor .dtable-ui-mobile-geolocation-map-editor-map {
   flex: 1;
   overflow: hidden;