@blaze-cms/plugin-data-ui 0.146.0-rc-eagle.0 → 0.146.0-rc-eagle-3.0

package/lib/components/ListingTable/SearchFilter/SearchContainer.js

@@ -9,28 +9,55 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _select = _interopRequireDefault(require("@blaze-react/select"));
+var _multiselect = _interopRequireDefault(require("@blaze-react/multiselect"));
+var _lodash = _interopRequireDefault(require("lodash.debounce"));
+var _lodash2 = _interopRequireDefault(require("lodash.unionby"));
 var _client = require("@apollo/client");
 var _adminUiUtils = require("@blaze-cms/admin-ui-utils");
+var _utils = require("@blaze-cms/utils");
 var _bs = require("react-icons/bs");
 var _helpers = require("./helpers");
+var _RelationMultiSelectFilter = _interopRequireDefault(require("./RelationMultiSelectFilter"));
 var _querys = require("./querys");
 var _constants = require("../../../constants");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 const SearchContainer = ({
   setListFilters,
   keywordFiltersToUse = [],
   selectFiltersToDisplay = [],
+  multiSelectFiltersToDisplay = [],
   schema,
-  index
+  index,
+  values
 }) => {
-  const apolloClient = (0, _client.useApolloClient)();
+  const client = (0, _client.useApolloClient)();
   const [searchTerm, setSearchTerm] = (0, _react.useState)('');
   const [selectedFilters, setSelectedFilters] = (0, _react.useState)({});
   const [selectOptions, setSelectOptions] = (0, _react.useState)([]);
+  const [multiSelectOptions, setMultiSelectOptions] = (0, _react.useState)([]);
+  const [allEntitySchemas, setAllEntitySchemas] = (0, _react.useState)([]);
   const displaySearchFilter = keywordFiltersToUse.length > 0;
   const displaySelectFilters = selectFiltersToDisplay.length > 0;
+  const displayMultiSelectFilters = multiSelectFiltersToDisplay.length > 0;
+  const displayAggregations = displaySelectFilters || displayMultiSelectFilters;
+  (0, _react.useEffect)(() => {
+    (async () => {
+      try {
+        const all = await (0, _adminUiUtils.fetchAllEntities)({
+          client
+        });
+        setAllEntitySchemas(all || []);
+      } catch (error) {
+        setAllEntitySchemas([]);
+      }
+    })();
+  }, [client]);
+  const multiSelectPropertySet = (0, _react.useMemo)(() => new Set(multiSelectFiltersToDisplay.map(([property]) => property)), [multiSelectFiltersToDisplay]);
+  const relationMultiSelectFilters = (0, _react.useMemo)(() => multiSelectFiltersToDisplay.filter(([, config]) => config && config.relation), [multiSelectFiltersToDisplay]);
+  const nonRelationMultiSelectFilters = (0, _react.useMemo)(() => multiSelectFiltersToDisplay.filter(([, config]) => !config || !config.relation), [multiSelectFiltersToDisplay]);
   const {
     keywordSearchProperties,
     keywordSearchLabels
@@ -51,19 +78,60 @@ const SearchContainer = ({
   const {
     gqlFields,
     rawQuery
-  } = (0, _react.useMemo)(() => (0, _helpers.buildQueryFields)(selectFiltersToDisplay, schema.id), [selectFiltersToDisplay, schema.id]);
-  const action = displaySelectFilters ? (0, _adminUiUtils.getDynamicQuery)('ADMIN_SEARCH')([schema], gqlFields, false, index) : _querys.NOOP_QUERY;
+  } = (0, _react.useMemo)(() => (0, _helpers.buildQueryFields)([...selectFiltersToDisplay, ...nonRelationMultiSelectFilters], schema.id), [selectFiltersToDisplay, nonRelationMultiSelectFilters, schema.id]);
+  const action = displayAggregations ? (0, _adminUiUtils.getDynamicQuery)('ADMIN_SEARCH')([schema], gqlFields, false, index) : _querys.NOOP_QUERY;
   const {
     data
   } = (0, _client.useQuery)(action, {
-    skip: !displaySelectFilters,
+    skip: !displayAggregations,
     variables: {
       where: rawQuery,
       limit: 0
     },
     fetchPolicy: 'cache-and-network'
   });
-  const filterData = (0, _react.useMemo)(() => {
+  const buildRelationsIndex = (0, _react.useCallback)(schemaObj => {
+    const items = [];
+    if (schemaObj.properties) {
+      Object.entries(schemaObj.properties).forEach(([propName, definition]) => {
+        const {
+          relation
+        } = definition || {};
+        if (!relation) return;
+        const {
+          localField: relationLocalField,
+          entityIdentifier
+        } = relation;
+        const localField = relationLocalField || propName;
+        if (localField) items.push({
+          localField,
+          entityIdentifier
+        });
+      });
+    }
+    if (Array.isArray(schemaObj.relations)) {
+      schemaObj.relations.forEach(relation => {
+        if (!relation.localField) return;
+        const {
+          localField,
+          entityIdentifier
+        } = relation;
+        items.push({
+          localField,
+          entityIdentifier
+        });
+      });
+    }
+    const byKey = new Map();
+    items.forEach(item => {
+      const key = `${item.localField}|${item.entityIdentifier || ''}`;
+      if (!byKey.has(key)) byKey.set(key, item);
+    });
+    return Array.from(byKey.values());
+  }, []);
+  const relationsIndex = (0, _react.useMemo)(() => buildRelationsIndex(schema), [schema, buildRelationsIndex]);
+  const stringTypeProps = (0, _react.useMemo)(() => (0, _utils.getStringTypeProps)(schema.id, relationsIndex, allEntitySchemas), [schema.id, relationsIndex, allEntitySchemas]);
+  const aggregationsData = (0, _react.useMemo)(() => {
     const {
       searchResults: {
         rawResults: {
@@ -71,48 +139,61 @@ const SearchContainer = ({
         } = {}
       } = {}
     } = data || {};
-    const proccessedData = [];
+    const processed = [];
     Object.entries(aggregations).forEach(([key, {
       buckets
     }]) => {
-      proccessedData.push(Array.isArray(buckets) ? [key, buckets.map(b => b.key).filter(Boolean)] : []);
+      processed.push(Array.isArray(buckets) ? [key, buckets.map(bucket => bucket.key).filter(Boolean)] : []);
     });
-    return proccessedData;
+    return processed;
   }, [data]);
+  const findFilterConfig = (0, _react.useCallback)(property => {
+    var _selectFiltersToDispl, _multiSelectFiltersTo;
+    return ((_selectFiltersToDispl = selectFiltersToDisplay.find(([prop]) => prop === property)) === null || _selectFiltersToDispl === void 0 ? void 0 : _selectFiltersToDispl[1]) || ((_multiSelectFiltersTo = multiSelectFiltersToDisplay.find(([prop]) => prop === property)) === null || _multiSelectFiltersTo === void 0 ? void 0 : _multiSelectFiltersTo[1]);
+  }, [selectFiltersToDisplay, multiSelectFiltersToDisplay]);
   (0, _react.useEffect)(() => {
-    if (!filterData.length) {
+    if (!aggregationsData.length) {
       setSelectOptions([]);
+      setMultiSelectOptions([]);
       return;
     }
     (async () => {
-      const results = await Promise.all(filterData.map(async ([property, ids]) => {
+      const results = await Promise.all(aggregationsData.map(async ([property, ids]) => {
         try {
-          if (!ids || !ids.length) return {};
-          const [, selectionDetails] = selectFiltersToDisplay.find(([selectProperty]) => selectProperty === property) || [];
-          if (!selectionDetails) return null;
-          if (!selectionDetails.relation) {
+          if (!ids || !ids.length) return null;
+          const config = findFilterConfig(property);
+          if (!config) return null;
+          const {
+            adminListingOptions: {
+              tidyLabel
+            } = {}
+          } = config;
+          if (!config.relation) {
+            const baseOptions = ids.map(value => [value, (0, _helpers.getTidyLabel)(value, tidyLabel)]);
             return {
-              id: property,
-              label: selectionDetails.label,
-              options: ids.map(value => [value, value])
+              property,
+              label: config.label,
+              type: multiSelectPropertySet.has(property) ? 'multi' : 'single',
+              options: baseOptions,
+              selected: values && values[property]
             };
           }
-          const query = (0, _adminUiUtils.getQuery)('GET_ENTITY_SCHEMA');
+          const schemaQuery = (0, _adminUiUtils.getQuery)('GET_ENTITY_SCHEMA');
           const {
             data: {
               getEntitySchemas: [relationSchema]
             }
-          } = await apolloClient.query({
-            query,
+          } = await client.query({
+            query: schemaQuery,
             variables: {
-              identifier: selectionDetails.relation.entityIdentifier
+              identifier: config.relation.entityIdentifier
             }
           });
           const {
             data: {
               result: selected = []
             }
-          } = await apolloClient.query({
+          } = await client.query({
             query: (0, _adminUiUtils.getDynamicQuery)('GET_ALL_ENTITIES')(relationSchema),
             variables: {
               where: {
@@ -127,45 +208,183 @@ const SearchContainer = ({
             }
           })
           // eslint-disable-next-line no-console
-          .catch(e => console.error(e));
+          .catch(error => console.error(error));
+          const baseOptions = selected.map(item => [item.id, (0, _helpers.getTidyLabel)(item.name, tidyLabel)]);
           return {
-            id: property,
-            label: selectionDetails.label,
-            options: selected.map(item => [item.id, item.name])
+            property,
+            label: config.label || config.relation.label,
+            type: multiSelectPropertySet.has(property) ? 'multi' : 'single',
+            options: baseOptions,
+            selected: values && values[property]
           };
         } catch {
           return null;
         }
       }));
-      setSelectOptions(results.filter(Boolean));
+      const valid = results.filter(Boolean);
+      setSelectOptions(valid.filter(option => option.type === 'single').map(({
+        property,
+        label,
+        options,
+        selected
+      }) => ({
+        id: property,
+        label,
+        options,
+        selected
+      })));
+      setMultiSelectOptions(valid.filter(option => option.type === 'multi').map(({
+        property,
+        label,
+        options,
+        selected
+      }) => ({
+        id: property,
+        label,
+        items: options.map(([id, name]) => ({
+          id,
+          name
+        })),
+        selected
+      })));
     })();
-  }, [apolloClient, filterData, schema, selectFiltersToDisplay]);
+  }, [client, aggregationsData, findFilterConfig, multiSelectPropertySet, values]);
   const updateFilters = (0, _react.useCallback)((term, filters) => (0, _helpers.updateListFilters)(term, filters, setListFilters, keywordSearchProperties), [setListFilters, keywordSearchProperties]);
+  const debouncedUpdateFilters = (0, _react.useMemo)(() => (0, _lodash.default)((term, filters) => updateFilters(term, filters), 300), [updateFilters]);
+  (0, _react.useEffect)(() => () => debouncedUpdateFilters.cancel(), [debouncedUpdateFilters]);
   const handleSearch = (0, _react.useCallback)(() => updateFilters(searchTerm, selectedFilters), [searchTerm, selectedFilters, updateFilters]);
-  const handleSearchChange = (0, _react.useCallback)(e => setSearchTerm(e.target.value), []);
-  const handleEnterKey = (0, _react.useCallback)(e => {
-    if (e.key === _constants.ENTER_KEY) handleSearch();
+  const handleSearchChange = (0, _react.useCallback)(({
+    target: {
+      value
+    }
+  }) => setSearchTerm(value), []);
+  const handleEnterKey = (0, _react.useCallback)(({
+    key
+  }) => {
+    if (key === _constants.ENTER_KEY) handleSearch();
   }, [handleSearch]);
   const handleReset = (0, _react.useCallback)(() => {
     setSearchTerm('');
-    setSelectedFilters(Object.keys(selectedFilters).reduce((acc, key) => _objectSpread(_objectSpread({}, acc), {}, {
-      [key]: _constants.DEFAULT_FILTER_OPTION_LABEL
-    }), {}));
+    debouncedUpdateFilters.cancel();
+    setSelectedFilters(prev => Object.keys(prev).reduce((acc, key) => {
+      acc[key] = multiSelectPropertySet.has(key) ? [] : _constants.DEFAULT_FILTER_OPTION_LABEL;
+      return acc;
+    }, {}));
     updateFilters('', {});
-  }, [selectedFilters, updateFilters]);
-  const handleSelect = (0, _react.useCallback)((property, event) => {
-    const {
-      value
-    } = event;
+  }, [multiSelectPropertySet, updateFilters, debouncedUpdateFilters]);
+  const handleSelect = (0, _react.useCallback)((property, {
+    value
+  }) => {
     const next = _objectSpread(_objectSpread({}, selectedFilters), {}, {
       [property]: value
     });
     setSelectedFilters(next);
-    updateFilters(searchTerm, next);
-  }, [searchTerm, selectedFilters, updateFilters]);
+    debouncedUpdateFilters(searchTerm, next);
+  }, [searchTerm, selectedFilters, debouncedUpdateFilters]);
+  const handleMultiSelect = (0, _react.useCallback)((property, ids) => {
+    const next = _objectSpread(_objectSpread({}, selectedFilters), {}, {
+      [property]: ids
+    });
+    setSelectedFilters(next);
+    debouncedUpdateFilters(searchTerm, next);
+  }, [searchTerm, selectedFilters, debouncedUpdateFilters]);
+  const findRelationByLocalField = (0, _react.useCallback)(localField => relationsIndex.find(relation => relation.localField === localField), [relationsIndex]);
+  const resolveAggProp = (0, _react.useCallback)((property, config) => {
+    if (!config.relation) return property;
+    if (property.includes('.')) return property;
+    const localField = config.relation.localField || property;
+    return `${localField}.name`;
+  }, []);
+  const resolveEntityIdentifier = (0, _react.useCallback)((property, config) => {
+    if (!config.relation) return undefined;
+    if (config.relation.entityIdentifier) return config.relation.entityIdentifier;
+    const localField = property.includes('.') ? property.split('.')[0] : config.relation.localField || property;
+    return findRelationByLocalField(localField).entityIdentifier;
+  }, [findRelationByLocalField]);
+  const addEntitySuffixIfNeeded = (0, _react.useCallback)((aggProp, entityIdentifier, config) => {
+    if (!config.relation || !entityIdentifier) return aggProp;
+    return `${aggProp}/${entityIdentifier}`;
+  }, []);
+  const makeOnSearchChange = (0, _react.useCallback)(property => async ({
+    event: {
+      value
+    },
+    currentOffset
+  }) => {
+    try {
+      var _config$relation, _aggregations$key, _multiSelectOptions$f;
+      if (!value || currentOffset) return [];
+      const config = findFilterConfig(property);
+      if (!config) return [];
+      let aggProp = resolveAggProp(property, config);
+      if (config.relation && !config.relation.localField && !property.includes('.')) {
+        const matchingRelation = findRelationByLocalField(property);
+        if (matchingRelation.localField) aggProp = `${matchingRelation.localField}.name`;
+      }
+      const entityIdentifier = resolveEntityIdentifier(property, config) || ((_config$relation = config.relation) === null || _config$relation === void 0 ? void 0 : _config$relation.entityIdentifier);
+      const filterByEntry = addEntitySuffixIfNeeded(aggProp, entityIdentifier, config);
+      const currentValues = {
+        entity: schema.id,
+        filterByProperty: [filterByEntry]
+      };
+      const aggregations = await (0, _adminUiUtils.fetchFilterByDataFromElastic)(client, currentValues, relationsIndex, stringTypeProps, value);
+      const key = aggProp;
+      const buckets = (aggregations === null || aggregations === void 0 ? void 0 : (_aggregations$key = aggregations[key]) === null || _aggregations$key === void 0 ? void 0 : _aggregations$key.buckets) || [];
+      let items = [];
+      if (config.relation) {
+        const names = buckets.map(bucket => bucket.key).filter(Boolean);
+        if (names.length) {
+          const schemaQuery = (0, _adminUiUtils.getQuery)('GET_ENTITY_SCHEMA');
+          const {
+            data: {
+              getEntitySchemas: [relationSchema]
+            }
+          } = await client.query({
+            query: schemaQuery,
+            variables: {
+              identifier: entityIdentifier
+            }
+          });
+          const {
+            data: {
+              result: selected = []
+            }
+          } = await client.query({
+            query: (0, _adminUiUtils.getDynamicQuery)('GET_ALL_ENTITIES')(relationSchema),
+            variables: {
+              where: {
+                name: {
+                  _in: names
+                }
+              },
+              sort: [{
+                property: 'name',
+                direction: 'asc'
+              }]
+            }
+          })
+          // eslint-disable-next-line no-console
+          .catch(error => console.error(error));
+          items = selected.map(item => ({
+            id: item.id,
+            name: item.name
+          }));
+        }
+      } else {
+        items = buckets.map(bucket => ({
+          id: bucket.key,
+          name: bucket.key
+        })).filter(option => option.id != null);
+      }
+      const existingItems = ((_multiSelectOptions$f = multiSelectOptions.find(opt => opt.id === property)) === null || _multiSelectOptions$f === void 0 ? void 0 : _multiSelectOptions$f.items) || [];
+      return (0, _lodash2.default)(items, existingItems, 'id');
+    } catch (error) {
+      return [];
+    }
+  }, [client, schema.id, relationsIndex, stringTypeProps, multiSelectOptions, findFilterConfig, resolveAggProp, resolveEntityIdentifier, addEntitySuffixIfNeeded, findRelationByLocalField]);
   const placeholderText = `Search ${keywordSearchLabels.join(', ')}`;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "search-container"
+    className: "search-container ms-filter"
   }, displaySearchFilter && /*#__PURE__*/_react.default.createElement("div", {
     className: "search-container__search-input-container"
   }, /*#__PURE__*/_react.default.createElement("input", {
@@ -181,18 +400,87 @@ const SearchContainer = ({
   }, /*#__PURE__*/_react.default.createElement(_bs.BsSearch, null))), displaySelectFilters && selectOptions.map(({
     id,
     options,
-    label
-  }) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, options && !!options.length && /*#__PURE__*/_react.default.createElement("div", {
-    className: "search-container__select-wrapper"
+    label,
+    selected
+  }) => options && options.length ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "search-container__select-wrapper",
+    key: `select-${id}`
   }, /*#__PURE__*/_react.default.createElement(_select.default, {
     label: label,
     id: id,
     name: id,
-    onChange: event => handleSelect(id, event),
+    onChange: ({
+      value
+    }) => handleSelect(id, {
+      value
+    }),
     options: options,
-    value: selectedFilters[id],
+    value: selectedFilters[id] !== undefined ? selectedFilters[id] : selected,
     defaultTextValue: _constants.DEFAULT_FILTER_OPTION_LABEL
-  })))), /*#__PURE__*/_react.default.createElement("div", {
+  })) : null), displayMultiSelectFilters && multiSelectOptions.map(({
+    id,
+    label,
+    items
+  }) => {
+    const selectedIds = selectedFilters[id] ? selectedFilters[id] : [];
+    const multiSelectData = {
+      filterBy: ['name'],
+      identification: 'id',
+      keyValue: 'name',
+      data: items.map(({
+        id: itemId,
+        name
+      }) => ({
+        id: itemId,
+        name,
+        description: '',
+        checked: selectedIds.includes(itemId),
+        show: true
+      }))
+    };
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "search-container__select-wrapper",
+      key: `multiselect-${id}`
+    }, /*#__PURE__*/_react.default.createElement(_multiselect.default, {
+      onChange: ({
+        value,
+        currentOffset
+      }) => makeOnSearchChange(id)({
+        event: {
+          value
+        },
+        currentOffset
+      }),
+      name: id,
+      label: label,
+      data: multiSelectData,
+      limit: 10,
+      getSelected: ({
+        event: {
+          target: {
+            value
+          }
+        }
+      }) => handleMultiSelect(id, value),
+      required: false,
+      checkedPreviewCount: 1,
+      formatMoreLabel: n => `${n} more`
+    }));
+  }), relationMultiSelectFilters.map(([property, config]) => {
+    var _config$relation2;
+    const entityIdentifier = resolveEntityIdentifier(property, config) || ((_config$relation2 = config.relation) === null || _config$relation2 === void 0 ? void 0 : _config$relation2.entityIdentifier);
+    if (!entityIdentifier) return null;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "search-container__select-wrapper",
+      key: `relation-multiselect-${property}`
+    }, /*#__PURE__*/_react.default.createElement(_RelationMultiSelectFilter.default, {
+      id: property,
+      label: config.label || config.relation.label,
+      entityIdentifier: entityIdentifier,
+      selectedIds: selectedFilters[property] || [],
+      onChange: handleMultiSelect
+    }));
+  }), /*#__PURE__*/_react.default.createElement("div", {
     className: "search-container__reset-button"
   }, /*#__PURE__*/_react.default.createElement("span", {
     role: "button",
@@ -203,12 +491,14 @@ SearchContainer.propTypes = {
   setListFilters: _propTypes.default.func.isRequired,
   keywordFiltersToUse: _propTypes.default.array,
   selectFiltersToDisplay: _propTypes.default.array,
+  multiSelectFiltersToDisplay: _propTypes.default.array,
   schema: _propTypes.default.object.isRequired,
   index: _propTypes.default.string
 };
 SearchContainer.defaultProps = {
   keywordFiltersToUse: [],
   selectFiltersToDisplay: [],
+  multiSelectFiltersToDisplay: [],
   index: 'admin'
 };
 var _default = exports.default = SearchContainer;