dtable-ui-component 6.0.41 → 6.0.43

package/lib/DTableFiltersPopover/utils/index.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "FilterItemUtils", {
     return _filterItemUtils.default;
   }
 });
-exports.isFilterTermArray = exports.isCheckboxColumn = exports.getUpdatedFilterByTermModifier = exports.getUpdatedFilterBySpecialTerm = exports.getUpdatedFilterBySelectSingle = exports.getUpdatedFilterBySelectMultiple = exports.getUpdatedFilterByRate = exports.getUpdatedFilterByPredicate = exports.getUpdatedFilterByNormalTerm = exports.getUpdatedFilterByCreator = exports.getUpdatedFilterByColumn = exports.getUpdatedFilterByCollaborator = exports.getFormulaColumnFilter = exports.getFilterByColumn = exports.getColumnOptions = exports.getColumnByKey = exports.generateDefaultUser = void 0;
+exports.isFilterTermArray = exports.getUpdatedFilterBySelectSingle = exports.getUpdatedFilterBySelectMultiple = exports.getUpdatedFilterByRate = exports.getUpdatedFilterByPredicate = exports.getUpdatedFilterByCreator = exports.getUpdatedFilterByColumn = exports.getUpdatedFilterByCollaborator = exports.getSingleSelectUpdatedFilterTerm = exports.getMultipleSelectUpdatedFilterTerm = exports.getFormulaColumnFilter = exports.getFormulaAndLinkFilters = exports.getFilterConfigOptions = exports.getFilterColumns = exports.getFilterByColumn = exports.getDefaultFilterGroup = exports.getDefaultFilter = exports.getCreatorUpdatedFilterTerm = exports.getColumnOptions = exports.getColumnByKey = exports.getCollaboratorUpdatedFilterTerm = exports.generateDefaultUser = exports.applyFilterOperation = void 0;
 var _dtableUtils = require("dtable-utils");
 var _filterItemUtils = _interopRequireDefault(require("./filter-item-utils"));
 var _constants = require("../constants");
@@ -28,7 +28,7 @@ const isFilterTermArray = (column, filterPredicate) => {
   if (type === _dtableUtils.CellType.SINGLE_SELECT && [_dtableUtils.FILTER_PREDICATE_TYPE.IS_ANY_OF, _dtableUtils.FILTER_PREDICATE_TYPE.IS_NONE_OF].includes(filterPredicate)) {
     return true;
   }
-  if (_constants.FORMULA_COLUMN_TYPES.includes(type)) {
+  if (_dtableUtils.FORMULA_COLUMN_TYPES_MAP[type]) {
     const {
       result_type,
       array_type
@@ -74,7 +74,7 @@ exports.getUpdatedFilterByCreator = getUpdatedFilterByCreator;
 const getUpdatedFilterBySelectSingle = (filter, columnOption) => {
   let new_filter_term;
   // if predicate is any of / is none of, filter_term is array; else filter_term is string
-  if (filter.filter_predicate === _dtableUtils.FILTER_PREDICATE_TYPE.IS_ANY_OF || filter.filter_predicate === _dtableUtils.FILTER_PREDICATE_TYPE.IS_NONE_OF) {
+  if (_constants.ARRAY_PREDICATE[filter.filter_predicate]) {
     new_filter_term = Array.isArray(filter.filter_term) ? [...filter.filter_term] : [];
     const index = new_filter_term.indexOf(columnOption.id);
     if (index === -1) {
@@ -118,9 +118,6 @@ const getUpdatedFilterByCollaborator = (filter, collaborator) => {
 };
 exports.getUpdatedFilterByCollaborator = getUpdatedFilterByCollaborator;
 const getUpdatedFilterByRate = (filter, value) => {
-  if (filter.filter_term === value) {
-    return;
-  }
   return Object.assign({}, filter, {
     filter_term: value
   });
@@ -131,7 +128,7 @@ const getColumnOptions = column => {
     type,
     data
   } = column;
-  if (_constants.FORMULA_COLUMN_TYPES.includes(type)) {
+  if (_dtableUtils.FORMULA_COLUMN_TYPES_MAP[type]) {
     return getFormulaColumnFilterOptions(column);
   }
   if (type === _dtableUtils.CellType.LINK) {
@@ -204,23 +201,17 @@ const getFilterOptionsByArrayType = array_type => {
   }
   return filterOptions;
 };
-const getFilterByColumn = function (column, value) {
-  let {
-    textDefaultPredicate
-  } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  let filter = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+const getFilterByColumn = function (column) {
+  let filter = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   let {
     type: columnType,
     data: columnData
   } = column;
   let {
     filterPredicateList
-  } = getColumnOptions(column, value);
+  } = getColumnOptions(column);
   if (!filterPredicateList) return;
   let filterPredicate = filterPredicateList[0];
-  if (textDefaultPredicate && columnType === _dtableUtils.CellType.TEXT && filterPredicateList.includes(textDefaultPredicate)) {
-    filterPredicate = textDefaultPredicate;
-  }
   let updatedFilter = Object.assign({}, filter, {
     column_key: column.key,
     filter_predicate: filterPredicate
@@ -256,8 +247,8 @@ const getFilterByColumn = function (column, value) {
     return updatedFilter;
   }
   // formula | link-formula
-  if (_constants.FORMULA_COLUMN_TYPES.includes(columnType)) {
-    const newUpdatedFilter = getFormulaColumnFilter(column, value, filter);
+  if (_dtableUtils.FORMULA_COLUMN_TYPES_MAP[columnType]) {
+    const newUpdatedFilter = getFormulaColumnFilter(column, filter);
     if (newUpdatedFilter) {
       updatedFilter.filter_term = newUpdatedFilter.filter_term;
     }
@@ -281,7 +272,7 @@ const getFilterByColumn = function (column, value) {
         type: array_type,
         data: array_data
       };
-      const newUpdatedFilter = getFilterByColumn(linkedColumn, value, filter) || {};
+      const newUpdatedFilter = getFilterByColumn(linkedColumn, filter) || {};
       if (newUpdatedFilter) {
         updatedFilter.filter_term = newUpdatedFilter.filter_term;
       }
@@ -291,7 +282,7 @@ const getFilterByColumn = function (column, value) {
   return updatedFilter;
 };
 exports.getFilterByColumn = getFilterByColumn;
-const getFormulaColumnFilter = (column, value, filter) => {
+const getFormulaColumnFilter = (column, filter) => {
   const {
     data
   } = column;
@@ -306,7 +297,7 @@ const getFormulaColumnFilter = (column, value, filter) => {
       type: array_type,
       data: array_data
     };
-    return getFilterByColumn(linkedColumn, value, filter);
+    return getFilterByColumn(linkedColumn, filter);
   }
   // result_type: string | number | bool | date
   if (result_type === _dtableUtils.FORMULA_RESULT_TYPE.BOOL) {
@@ -320,7 +311,7 @@ const getFormulaColumnFilter = (column, value, filter) => {
     type: array_type,
     data: array_data
   };
-  return getFilterByColumn(linkedColumn, value, filter);
+  return getFilterByColumn(linkedColumn, filter);
 };
 
 // file, image : not support
@@ -328,12 +319,12 @@ const getFormulaColumnFilter = (column, value, filter) => {
 // checkbox : boolean
 // multiple-select, collaborator, creator, last modifier : array
 exports.getFormulaColumnFilter = getFormulaColumnFilter;
-const getUpdatedFilterByColumn = (filters, value, filterIndex, column) => {
+const getUpdatedFilterByColumn = (filters, filterIndex, column) => {
   const filter = filters[filterIndex];
   if (filter.column_key === column.key) {
     return;
   }
-  return getFilterByColumn(column, value, filter);
+  return getFilterByColumn(column, filter);
 };
 exports.getUpdatedFilterByColumn = getUpdatedFilterByColumn;
 const getUpdatedFilterByPredicate = (filter, column, filterPredicate) => {
@@ -380,96 +371,376 @@ const getUpdatedFilterByPredicate = (filter, column, filterPredicate) => {
   return updatedFilter;
 };
 exports.getUpdatedFilterByPredicate = getUpdatedFilterByPredicate;
-const getUpdatedFilterByTermModifier = (filters, filterIndex, filterTermModifier) => {
-  const filter = filters[filterIndex];
-  if (filter.filter_term_modifier === filterTermModifier) {
-    return;
+const getColumnByKey = (columnKey, columns) => {
+  if (!Array.isArray(columns) || !columnKey) return null;
+  return columns.find(column => column.key === columnKey);
+};
+exports.getColumnByKey = getColumnByKey;
+const getMediaUrl = () => {
+  var _window, _window$dtable, _window2, _window2$dtablePlugin;
+  return ((_window = window) === null || _window === void 0 ? void 0 : (_window$dtable = _window.dtable) === null || _window$dtable === void 0 ? void 0 : _window$dtable.mediaUrl) || ((_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$dtablePlugin = _window2.dtablePluginConfig) === null || _window2$dtablePlugin === void 0 ? void 0 : _window2$dtablePlugin.mediaUrl) || '/media/';
+};
+const generateDefaultUser = name => {
+  const mediaUrl = getMediaUrl();
+  const defaultAvatarUrl = "".concat(mediaUrl, "avatars/default.png");
+  return {
+    name,
+    email: name,
+    avatar_url: defaultAvatarUrl
+  };
+};
+exports.generateDefaultUser = generateDefaultUser;
+const getDefaultFilter = columns => {
+  if (!columns) return null;
+  let defaultColumn = columns[0];
+  if (!_dtableUtils.FILTER_COLUMN_OPTIONS[defaultColumn.type]) {
+    defaultColumn = columns.find(c => _dtableUtils.FILTER_COLUMN_OPTIONS[c.type]);
+  }
+  if (!defaultColumn) return null;
+  return getFilterByColumn(defaultColumn);
+};
+exports.getDefaultFilter = getDefaultFilter;
+const getDefaultFilterGroup = columns => {
+  const defaultFilter = getDefaultFilter(columns);
+  if (!defaultFilter) {
+    return null;
   }
-  return Object.assign({}, filter, {
-    filter_term_modifier: filterTermModifier
+  const filters = [defaultFilter];
+  return {
+    filter_conjunction: _dtableUtils.FILTER_CONJUNCTION_TYPE.AND,
+    filters
+  };
+};
+exports.getDefaultFilterGroup = getDefaultFilterGroup;
+const getFormulaAndLinkFilters = (filters, columns) => {
+  let formulaFilters = [];
+  filters.forEach(filter => {
+    const filterColumn = columns.find(column => column.key === (filter === null || filter === void 0 ? void 0 : filter.column_key));
+    const {
+      type
+    } = filterColumn;
+    if (_dtableUtils.FORMULA_COLUMN_TYPES_MAP[type] || type === _dtableUtils.CellType.LINK) {
+      formulaFilters.push(filter);
+    }
   });
+  return formulaFilters;
 };
-exports.getUpdatedFilterByTermModifier = getUpdatedFilterByTermModifier;
-const getUpdatedFilterByNormalTerm = (filters, column, filterIndex, event) => {
-  const filter = filters[filterIndex];
-  let filterTerm;
-  if (column.type === _dtableUtils.CellType.CHECKBOX) {
-    filterTerm = event.target.checked;
-  } else {
-    filterTerm = event.target.value;
-  }
-  if (filter.filter_term === filterTerm) {
-    return;
-  }
-  return Object.assign({}, filter, {
-    filter_term: filterTerm
+exports.getFormulaAndLinkFilters = getFormulaAndLinkFilters;
+const getFilterColumns = columns => {
+  return columns.filter(column => {
+    const {
+      data,
+      type
+    } = column;
+    if (data && (type === _dtableUtils.CellType.LINK || _dtableUtils.FORMULA_COLUMN_TYPES_MAP[type] && data.result_type === _dtableUtils.FORMULA_RESULT_TYPE.ARRAY)) {
+      return Object.prototype.hasOwnProperty.call(_dtableUtils.FILTER_COLUMN_OPTIONS, data.array_type);
+    }
+    return Object.prototype.hasOwnProperty.call(_dtableUtils.FILTER_COLUMN_OPTIONS, type);
   });
 };
-exports.getUpdatedFilterByNormalTerm = getUpdatedFilterByNormalTerm;
-const getUpdatedFilterBySpecialTerm = (filters, filterIndex, type, value) => {
-  const filter = filters[filterIndex];
+exports.getFilterColumns = getFilterColumns;
+const applyFilterOperation = operation => {
+  const {
+    type,
+    filter_conjunction,
+    filters,
+    payload
+  } = operation;
   switch (type) {
-    case _constants.SPECIAL_TERM_TYPE.CREATOR:
+    case _constants.FILTER_OPERATION_TYPE.MODIFY_CONJUNCTION:
+      {
+        const {
+          new_filter_conjunction
+        } = payload;
+        return {
+          filter_conjunction: new_filter_conjunction,
+          filters
+        };
+      }
+    case _constants.FILTER_OPERATION_TYPE.DELETE_FILTER:
+      {
+        const {
+          filter_index
+        } = payload;
+        let updatedFilters = [...filters];
+        if (!updatedFilters[filter_index]) {
+          return {
+            filter_conjunction,
+            filters
+          };
+        }
+        updatedFilters.splice(filter_index, 1);
+        return {
+          filter_conjunction,
+          filters: updatedFilters
+        };
+      }
+    case _constants.FILTER_OPERATION_TYPE.UPDATE_FILTER:
+      {
+        const {
+          filter_index,
+          new_filter
+        } = payload;
+        let updatedFilters = [...filters];
+        if (!updatedFilters[filter_index]) {
+          return {
+            filter_conjunction,
+            filters
+          };
+        }
+        updatedFilters[filter_index] = new_filter;
+        return {
+          filter_conjunction,
+          filters: updatedFilters
+        };
+      }
+    case _constants.FILTER_OPERATION_TYPE.MOVE_FILTER:
       {
-        return getUpdatedFilterByCreator(filter, value);
+        const {
+          source_filter_index,
+          target_filter_index,
+          source_group_index,
+          target_group_index
+        } = payload;
+        const isFromFilterGroup = typeof source_group_index === 'number';
+        const isToFilterGroup = typeof target_group_index === 'number';
+        let updatedFilters = [...filters];
+
+        // move filter(not in group) or filter-group over filter(not in group) or filter-group
+        if (!isFromFilterGroup && !isToFilterGroup) {
+          const movedFilter = updatedFilters[source_filter_index];
+          if (!movedFilter) {
+            return {
+              filter_conjunction,
+              filters
+            };
+          }
+          updatedFilters.splice(source_filter_index, 1);
+          updatedFilters.splice(target_filter_index, 0, movedFilter);
+          return {
+            filter_conjunction,
+            filters: updatedFilters
+          };
+        }
+
+        // source
+        let sourceFilters = null;
+        if (isFromFilterGroup) {
+          const filterGroup = updatedFilters[source_group_index];
+          const subFilters = filterGroup && filterGroup.filters;
+          sourceFilters = subFilters;
+        } else {
+          sourceFilters = updatedFilters;
+        }
+
+        // target
+        let targetFilters = null;
+        if (isToFilterGroup) {
+          const filterGroup = updatedFilters[target_group_index];
+          const subFilters = filterGroup && filterGroup.filters;
+          targetFilters = subFilters;
+        } else {
+          targetFilters = updatedFilters;
+        }
+        const movedFilter = sourceFilters && sourceFilters[source_filter_index];
+        if (!movedFilter || !targetFilters) {
+          return {
+            filter_conjunction,
+            filters
+          };
+        }
+        let targetIndex = target_filter_index;
+        if ((isFromFilterGroup || isToFilterGroup) && source_group_index !== target_group_index) {
+          targetIndex = target_filter_index + 1;
+        }
+        sourceFilters.splice(source_filter_index, 1);
+        targetFilters.splice(targetIndex, 0, movedFilter);
+        return {
+          filter_conjunction,
+          filters: updatedFilters
+        };
       }
-    case _constants.SPECIAL_TERM_TYPE.SINGLE_SELECT:
+    case _constants.FILTER_OPERATION_TYPE.ADD_FILTER_INTO_GROUP:
       {
-        return getUpdatedFilterBySelectSingle(filter, value);
+        const {
+          filter,
+          group_index
+        } = payload;
+        let updatedFilters = [...filters];
+        let updatedFilterGroup = updatedFilters[group_index];
+        if (!updatedFilterGroup) {
+          return {
+            filter_conjunction,
+            filters
+          };
+        }
+        if (!Array.isArray(updatedFilterGroup.filters)) {
+          updatedFilterGroup.filters = [filter];
+        } else {
+          updatedFilterGroup.filters.push(filter);
+        }
+        return {
+          filter_conjunction,
+          filters: updatedFilters
+        };
       }
-    case _constants.SPECIAL_TERM_TYPE.MULTIPLE_SELECT:
+    case _constants.FILTER_OPERATION_TYPE.MODIFY_CONJUNCTION_IN_GROUP:
       {
-        return getUpdatedFilterBySelectMultiple(filter, value);
+        const {
+          group_index,
+          new_filter_conjunction
+        } = payload;
+        let updatedFilters = [...filters];
+        let updatedFilterGroup = updatedFilters[group_index];
+        if (!updatedFilterGroup) {
+          return {
+            filter_conjunction,
+            filters
+          };
+        }
+        updatedFilterGroup.filter_conjunction = new_filter_conjunction;
+        return {
+          filter_conjunction,
+          filters: updatedFilters
+        };
       }
-    case _constants.SPECIAL_TERM_TYPE.COLLABORATOR:
+    case _constants.FILTER_OPERATION_TYPE.DELETE_FILTER_IN_GROUP:
       {
-        return getUpdatedFilterByCollaborator(filter, value);
+        const {
+          group_index,
+          filter_index
+        } = payload;
+        let updatedFilters = [...filters];
+        let updatedFilterGroup = updatedFilters[group_index];
+        if (!updatedFilterGroup || !updatedFilterGroup.filters || !updatedFilterGroup.filters[filter_index]) {
+          return {
+            filter_conjunction,
+            filters
+          };
+        }
+        let subFilters = [...updatedFilterGroup.filters];
+        subFilters.splice(filter_index, 1);
+        updatedFilterGroup.filters = subFilters;
+        return {
+          filter_conjunction,
+          filters: updatedFilters
+        };
       }
-    case _constants.SPECIAL_TERM_TYPE.RATE:
+    case _constants.FILTER_OPERATION_TYPE.UPDATE_FILTER_IN_GROUP:
       {
-        return getUpdatedFilterByRate(filter, value);
+        const {
+          group_index,
+          filter_index,
+          new_filter
+        } = payload;
+        let updatedFilters = [...filters];
+        let updatedFilterGroup = updatedFilters[group_index];
+        if (!updatedFilterGroup || !updatedFilterGroup.filters || !updatedFilterGroup.filters[filter_index]) {
+          return {
+            filter_conjunction,
+            filters
+          };
+        }
+        let subFilters = [...updatedFilterGroup.filters];
+        subFilters[filter_index] = new_filter;
+        updatedFilterGroup.filters = subFilters;
+        return {
+          filter_conjunction,
+          filters: updatedFilters
+        };
       }
     default:
       {
-        break;
+        return {
+          filter_conjunction,
+          filters
+        };
       }
   }
 };
-exports.getUpdatedFilterBySpecialTerm = getUpdatedFilterBySpecialTerm;
-const getColumnByKey = (columns, columnKey) => {
-  if (!Array.isArray(columns) || !columnKey) return null;
-  return columns.find(column => column.key === columnKey);
+exports.applyFilterOperation = applyFilterOperation;
+const getCollaboratorUpdatedFilterTerm = (filterTerm, collaborator) => {
+  let newFilterTerm = filterTerm ? filterTerm.slice(0) : [];
+  const selectedEmail = collaborator.email;
+  const index = newFilterTerm.indexOf(selectedEmail);
+  if (index > -1) {
+    newFilterTerm.splice(index, 1);
+  } else {
+    newFilterTerm.push(selectedEmail);
+  }
+  return newFilterTerm;
 };
-exports.getColumnByKey = getColumnByKey;
-const isCheckboxColumn = column => {
-  let {
+exports.getCollaboratorUpdatedFilterTerm = getCollaboratorUpdatedFilterTerm;
+const getCreatorUpdatedFilterTerm = (filterTerm, filterPredicate, collaborator) => {
+  const multipleSelectType = [_dtableUtils.FILTER_PREDICATE_TYPE.CONTAINS, _dtableUtils.FILTER_PREDICATE_TYPE.NOT_CONTAIN];
+  let newFilterTerm = filterTerm;
+  if (multipleSelectType.includes(filterPredicate)) {
+    newFilterTerm = newFilterTerm ? newFilterTerm.slice(0) : [];
+    const selectedEmail = collaborator.email;
+    const index = newFilterTerm.indexOf(selectedEmail);
+    if (index > -1) {
+      newFilterTerm.splice(index, 1);
+    } else {
+      newFilterTerm.push(selectedEmail);
+    }
+  } else {
+    if (newFilterTerm[0] === collaborator.email) {
+      return newFilterTerm;
+    }
+    newFilterTerm = [collaborator.email];
+  }
+  return newFilterTerm;
+};
+exports.getCreatorUpdatedFilterTerm = getCreatorUpdatedFilterTerm;
+const getFilterConfigOptions = column => {
+  const {
     type,
     data
   } = column;
   if (_dtableUtils.FORMULA_COLUMN_TYPES_MAP[type]) {
+    return getFormulaColumnFilterOptions(column);
+  }
+  if (type === _dtableUtils.CellType.LINK) {
     const {
-      result_type,
       array_type
     } = data || {};
-    if (result_type === _dtableUtils.FORMULA_RESULT_TYPE.ARRAY) {
-      return array_type === _dtableUtils.CellType.CHECKBOX;
+    if (array_type === _dtableUtils.FORMULA_RESULT_TYPE.BOOL) {
+      return _dtableUtils.FILTER_COLUMN_OPTIONS[_dtableUtils.CellType.CHECKBOX];
+    }
+    if (array_type === _dtableUtils.FORMULA_RESULT_TYPE.STRING) {
+      return _dtableUtils.FILTER_COLUMN_OPTIONS[_dtableUtils.CellType.TEXT];
     }
-    return false;
+    return getFilterOptionsByArrayType(array_type);
   }
-  return type === _dtableUtils.CellType.CHECKBOX;
+  return _dtableUtils.FILTER_COLUMN_OPTIONS[type] || {};
 };
-exports.isCheckboxColumn = isCheckboxColumn;
-const getMediaUrl = () => {
-  var _window, _window$dtable, _window2, _window2$dtablePlugin;
-  return ((_window = window) === null || _window === void 0 ? void 0 : (_window$dtable = _window.dtable) === null || _window$dtable === void 0 ? void 0 : _window$dtable.mediaUrl) || ((_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$dtablePlugin = _window2.dtablePluginConfig) === null || _window2$dtablePlugin === void 0 ? void 0 : _window2$dtablePlugin.mediaUrl) || '/media/';
+exports.getFilterConfigOptions = getFilterConfigOptions;
+const getMultipleSelectUpdatedFilterTerm = (filterTerm, option) => {
+  let newFilterTerm = filterTerm || [];
+  const index = newFilterTerm.indexOf(option.id);
+  if (index > -1) {
+    newFilterTerm.splice(index, 1);
+  } else {
+    newFilterTerm.push(option.id);
+  }
+  return newFilterTerm;
 };
-const generateDefaultUser = name => {
-  const mediaUrl = getMediaUrl();
-  const defaultAvatarUrl = "".concat(mediaUrl, "avatars/default.png");
-  return {
-    name,
-    email: name,
-    avatar_url: defaultAvatarUrl
-  };
+exports.getMultipleSelectUpdatedFilterTerm = getMultipleSelectUpdatedFilterTerm;
+const getSingleSelectUpdatedFilterTerm = (filterTerm, filterPredicate, option) => {
+  let newFilterTerm;
+
+  // if predicate is any of / is none of, filter_term is array; else filter_term is string
+  if (_constants.ARRAY_PREDICATE[filterPredicate]) {
+    newFilterTerm = Array.isArray(filterTerm) ? [...filterTerm] : [];
+    const index = newFilterTerm.indexOf(option.id);
+    if (index === -1) {
+      newFilterTerm.push(option.id);
+    } else {
+      newFilterTerm.splice(index, 1);
+    }
+  } else {
+    newFilterTerm = option.id;
+  }
+  return newFilterTerm;
 };
-exports.generateDefaultUser = generateDefaultUser;
+exports.getSingleSelectUpdatedFilterTerm = getSingleSelectUpdatedFilterTerm;

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

@@ -10,7 +10,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _dtableUtils = require("dtable-utils");
 var _DTableCustomizeSelect = _interopRequireDefault(require("../../../DTableCustomizeSelect"));
 var _lang = require("../../../lang");
-require("./index.css");
 class CollaboratorFilter extends _react.Component {
   constructor(props) {
     super(props);
@@ -63,7 +62,9 @@ class CollaboratorFilter extends _react.Component {
       filterTerm,
       collaborators,
       placeholder,
-      filter_predicate
+      filter_predicate,
+      isInModal,
+      readOnly
     } = this.props;
     let isSupportMultipleSelect = this.supportMultipleSelectOptions.indexOf(filter_predicate) > -1 ? true : false;
     let selectedCollaborators = Array.isArray(filterTerm) && filterTerm.length > 0 && filterTerm.map(item => {
@@ -98,16 +99,17 @@ class CollaboratorFilter extends _react.Component {
     } : {};
     let options = Array.isArray(filterTerm) ? this.createCollaboratorOptions(filterIndex, collaborators, filterTerm) : [];
     return /*#__PURE__*/_react.default.createElement(_DTableCustomizeSelect.default, {
-      className: "selector-collaborator",
+      className: "dtable-ui-collaborator-selector",
       value: value,
       onSelectOption: this.props.onSelectCollaborator,
       options: options,
       placeholder: placeholder,
-      isLocked: this.props.isLocked,
+      isLocked: readOnly,
       supportMultipleSelect: isSupportMultipleSelect,
       searchable: true,
       searchPlaceholder: (0, _lang.getLocale)('Search_collaborator'),
-      isShowSelected: false
+      isShowSelected: false,
+      isInModal: isInModal
     });
   }
 }

package/lib/DTableFiltersPopover/widgets/department-select-filter/department-multiple-select-filter.js

@@ -8,14 +8,17 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _ModalPortal = _interopRequireDefault(require("../../../ModalPortal"));
 var _SelectedDepartments = _interopRequireDefault(require("../../../SelectedDepartments"));
 var _DepartmentMultipleSelectEditor = _interopRequireDefault(require("../../../DepartmentMultipleSelectEditor"));
-var _departments = require("../../../constants/departments");
 var _commonHooks = require("../../../hooks/common-hooks");
 var _lang = require("../../../lang");
+var _departments = require("../../../constants/departments");
 function DepartmentMultipleSelectFilter(props) {
   const {
     value,
+    isInModal,
+    readOnly,
     departments
   } = props;
   const [isShowSelector, setIsShowSelector] = (0, _react.useState)(false);
@@ -39,13 +42,14 @@ function DepartmentMultipleSelectFilter(props) {
         type: "checkbox",
         className: "vam department-select-input",
         checked: selectedDepartments.includes(type),
-        onChange: event => selectDepartment(event, type)
+        onChange: () => {}
       }), /*#__PURE__*/_react.default.createElement("span", {
         className: "text-truncate department-name"
       }, (0, _lang.getLocale)(name)));
     });
   }
   function onSelectToggle(event) {
+    if (readOnly) return;
     event.preventDefault();
     setIsShowSelector(!isShowSelector);
   }
@@ -83,15 +87,24 @@ function DepartmentMultipleSelectFilter(props) {
     departments: departments
   })) : /*#__PURE__*/_react.default.createElement("span", {
     className: "select-placeholder"
-  }, (0, _lang.getLocale)('Select_department')), /*#__PURE__*/_react.default.createElement("span", {
+  }, (0, _lang.getLocale)('Select_department')), !readOnly && /*#__PURE__*/_react.default.createElement("span", {
     className: "dtable-font dtable-icon-down3"
-  })), isShowSelector && /*#__PURE__*/_react.default.createElement(_DepartmentMultipleSelectEditor.default, {
+  })), isShowSelector && !isInModal && /*#__PURE__*/_react.default.createElement(_DepartmentMultipleSelectEditor.default, {
     isShowSelectedDepartments: false,
     classNamePrefix: "filter",
     value: selectedDepartments,
+    departments: departments,
     onCommit: selectDepartment,
-    renderUserDepartmentOptions: renderUserDepartmentOptions,
-    departments: departments
-  }));
+    renderUserDepartmentOptions: renderUserDepartmentOptions
+  }), isShowSelector && isInModal && /*#__PURE__*/_react.default.createElement(_ModalPortal.default, null, /*#__PURE__*/_react.default.createElement(_DepartmentMultipleSelectEditor.default, {
+    isInModal: isInModal,
+    isShowSelectedDepartments: false,
+    classNamePrefix: "filter",
+    value: selectedDepartments,
+    departments: departments,
+    position: selectorRef.current.getBoundingClientRect(),
+    onCommit: selectDepartment,
+    renderUserDepartmentOptions: renderUserDepartmentOptions
+  })));
 }
 var _default = exports.default = DepartmentMultipleSelectFilter;