@blaze-cms/plugin-data-ui 0.146.0-node18-core-styles-tooltips.56 → 0.146.0-node18-tooltips.44

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

@@ -1,10 +1,21 @@
 import React, { useState, useMemo, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import Select from '@blaze-react/select';
+import MultiSelect from '@blaze-react/multiselect';
+import debounce from 'lodash.debounce';
+import unionBy from 'lodash.unionby';
+
 import { useQuery, useApolloClient } from '@apollo/client';
-import { getDynamicQuery, getQuery } from '@blaze-cms/admin-ui-utils';
+import {
+  getDynamicQuery,
+  getQuery,
+  fetchFilterByDataFromElastic,
+  fetchAllEntities
+} from '@blaze-cms/admin-ui-utils';
+import { getStringTypeProps } from '@blaze-cms/utils';
+
 import { BsArrowCounterclockwise, BsSearch } from 'react-icons/bs';
-import { updateListFilters, buildQueryFields } from './helpers';
+import { updateListFilters, buildQueryFields, getTidyLabel } from './helpers';
 import { NOOP_QUERY } from './querys';
 import { ENTER_KEY, DEFAULT_FILTER_OPTION_LABEL } from '../../../constants';
 
@@ -12,175 +23,403 @@ const SearchContainer = ({
   setListFilters,
   keywordFiltersToUse = [],
   selectFiltersToDisplay = [],
+  multiSelectFiltersToDisplay = [],
   schema,
-  index
+  index,
+  values
 }) => {
-  const apolloClient = useApolloClient();
+  const client = useApolloClient();
+
   const [searchTerm, setSearchTerm] = useState('');
   const [selectedFilters, setSelectedFilters] = useState({});
   const [selectOptions, setSelectOptions] = useState([]);
+  const [multiSelectOptions, setMultiSelectOptions] = useState([]);
+  const [allEntitySchemas, setAllEntitySchemas] = useState([]);
 
   const displaySearchFilter = keywordFiltersToUse.length > 0;
   const displaySelectFilters = selectFiltersToDisplay.length > 0;
+  const displayMultiSelectFilters = multiSelectFiltersToDisplay.length > 0;
+  const displayAggregations = displaySelectFilters || displayMultiSelectFilters;
 
-  const { keywordSearchProperties, keywordSearchLabels } = useMemo(
-    () => {
-      const labels = [];
-      const properties = [];
-
-      keywordFiltersToUse.forEach(([property, { label }]) => {
-        if (label) labels.push(label);
-        properties.push(property);
-      });
+  useEffect(() => {
+    (async () => {
+      try {
+        const all = await fetchAllEntities({ client });
+        setAllEntitySchemas(all || []);
+      } catch (error) {
+        setAllEntitySchemas([]);
+      }
+    })();
+  }, [client]);
 
-      return { keywordSearchProperties: properties, keywordSearchLabels: labels };
-    },
-    [keywordFiltersToUse]
+  const multiSelectPropertySet = useMemo(
+    () => new Set(multiSelectFiltersToDisplay.map(([property]) => property)),
+    [multiSelectFiltersToDisplay]
   );
 
+  const { keywordSearchProperties, keywordSearchLabels } = useMemo(() => {
+    const labels = [];
+    const properties = [];
+
+    keywordFiltersToUse.forEach(([property, { label }]) => {
+      if (label) labels.push(label);
+      properties.push(property);
+    });
+
+    return { keywordSearchProperties: properties, keywordSearchLabels: labels };
+  }, [keywordFiltersToUse]);
+
   const { gqlFields, rawQuery } = useMemo(
-    () => buildQueryFields(selectFiltersToDisplay, schema.id),
-    [selectFiltersToDisplay, schema.id]
+    () => buildQueryFields([...selectFiltersToDisplay, ...multiSelectFiltersToDisplay], schema.id),
+    [selectFiltersToDisplay, multiSelectFiltersToDisplay, schema.id]
   );
-  const action = displaySelectFilters
+
+  const action = displayAggregations
     ? getDynamicQuery('ADMIN_SEARCH')([schema], gqlFields, false, index)
     : NOOP_QUERY;
 
   const { data } = useQuery(action, {
-    skip: !displaySelectFilters,
+    skip: !displayAggregations,
     variables: { where: rawQuery, limit: 0 },
     fetchPolicy: 'cache-and-network'
   });
 
-  const filterData = useMemo(
-    () => {
-      const { searchResults: { rawResults: { aggregations = {} } = {} } = {} } = data || {};
-      const proccessedData = [];
-      Object.entries(aggregations).forEach(([key, { buckets }]) => {
-        proccessedData.push(
-          Array.isArray(buckets) ? [key, buckets.map(b => b.key).filter(Boolean)] : []
-        );
+  const buildRelationsIndex = 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 });
       });
+    }
 
-      return proccessedData;
-    },
-    [data]
+    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 = useMemo(() => buildRelationsIndex(schema), [schema, buildRelationsIndex]);
+
+  const stringTypeProps = useMemo(
+    () => getStringTypeProps(schema.id, relationsIndex, allEntitySchemas),
+    [schema.id, relationsIndex, allEntitySchemas]
   );
 
-  useEffect(
-    () => {
-      if (!filterData.length) {
-        setSelectOptions([]);
-        return;
-      }
+  const aggregationsData = useMemo(() => {
+    const { searchResults: { rawResults: { aggregations = {} } = {} } = {} } = data || {};
+    const processed = [];
+    Object.entries(aggregations).forEach(([key, { buckets }]) => {
+      processed.push(
+        Array.isArray(buckets) ? [key, buckets.map(bucket => bucket.key).filter(Boolean)] : []
+      );
+    });
+    return processed;
+  }, [data]);
 
-      (async () => {
-        const results = await Promise.all(
-          filterData.map(async ([property, ids]) => {
-            try {
-              if (!ids || !ids.length) return {};
+  const findFilterConfig = useCallback(
+    property =>
+      selectFiltersToDisplay.find(([prop]) => prop === property)?.[1] ||
+      multiSelectFiltersToDisplay.find(([prop]) => prop === property)?.[1],
+    [selectFiltersToDisplay, multiSelectFiltersToDisplay]
+  );
 
-              const [, selectionDetails] =
-                selectFiltersToDisplay.find(([selectProperty]) => selectProperty === property) ||
-                [];
+  useEffect(() => {
+    if (!aggregationsData.length) {
+      setSelectOptions([]);
+      setMultiSelectOptions([]);
+      return;
+    }
 
-              if (!selectionDetails) return null;
+    (async () => {
+      const results = await Promise.all(
+        aggregationsData.map(async ([property, ids]) => {
+          try {
+            if (!ids || !ids.length) return null;
 
-              if (!selectionDetails.relation) {
-                return {
-                  id: property,
-                  label: selectionDetails.label,
-                  options: ids.map(value => [value, value])
-                };
-              }
-              const query = getQuery('GET_ENTITY_SCHEMA');
-              const {
-                data: {
-                  getEntitySchemas: [relationSchema]
-                }
-              } = await apolloClient.query({
-                query,
-                variables: { identifier: selectionDetails.relation.entityIdentifier }
-              });
+            const config = findFilterConfig(property);
+            if (!config) return null;
 
-              const {
-                data: { result: selected = [] }
-              } = await apolloClient
-                .query({
-                  query: getDynamicQuery('GET_ALL_ENTITIES')(relationSchema),
-                  variables: {
-                    where: {
-                      id: {
-                        _in: ids
-                      }
-                    },
-                    sort: [{ property: 'name', direction: 'asc' }]
-                  }
-                })
-                // eslint-disable-next-line no-console
-                .catch(e => console.error(e));
+            const { adminListingOptions: { tidyLabel } = {} } = config;
 
+            if (!config.relation) {
+              const baseOptions = ids.map(value => [value, getTidyLabel(value, tidyLabel)]);
               return {
-                id: property,
-                label: selectionDetails.label,
-                options: selected.map(item => [item.id, item.name])
+                property,
+                label: config.label,
+                type: multiSelectPropertySet.has(property) ? 'multi' : 'single',
+                options: baseOptions,
+                selected: values && values[property]
               };
-            } catch {
-              return null;
             }
-          })
-        );
 
-        setSelectOptions(results.filter(Boolean));
-      })();
-    },
-    [apolloClient, filterData, schema, selectFiltersToDisplay]
-  );
+            const schemaQuery = getQuery('GET_ENTITY_SCHEMA');
+            const {
+              data: {
+                getEntitySchemas: [relationSchema]
+              }
+            } = await client.query({
+              query: schemaQuery,
+              variables: { identifier: config.relation.entityIdentifier }
+            });
+
+            const {
+              data: { result: selected = [] }
+            } = await client
+              .query({
+                query: getDynamicQuery('GET_ALL_ENTITIES')(relationSchema),
+                variables: {
+                  where: { id: { _in: ids } },
+                  sort: [{ property: 'name', direction: 'asc' }]
+                }
+              })
+              // eslint-disable-next-line no-console
+              .catch(error => console.error(error));
+
+            const baseOptions = selected.map(item => [item.id, getTidyLabel(item.name, tidyLabel)]);
+
+            return {
+              property,
+              label: config.label || config.relation.label,
+              type: multiSelectPropertySet.has(property) ? 'multi' : 'single',
+              options: baseOptions,
+              selected: values && values[property]
+            };
+          } catch {
+            return null;
+          }
+        })
+      );
+
+      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
+          }))
+      );
+    })();
+  }, [client, aggregationsData, findFilterConfig, multiSelectPropertySet, values]);
 
   const updateFilters = useCallback(
     (term, filters) => updateListFilters(term, filters, setListFilters, keywordSearchProperties),
     [setListFilters, keywordSearchProperties]
   );
 
-  const handleSearch = useCallback(() => updateFilters(searchTerm, selectedFilters), [
-    searchTerm,
-    selectedFilters,
-    updateFilters
-  ]);
-  const handleSearchChange = useCallback(e => setSearchTerm(e.target.value), []);
+  const debouncedUpdateFilters = useMemo(
+    () => debounce((term, filters) => updateFilters(term, filters), 300),
+    [updateFilters]
+  );
+
+  useEffect(() => () => debouncedUpdateFilters.cancel(), [debouncedUpdateFilters]);
+
+  const handleSearch = useCallback(
+    () => updateFilters(searchTerm, selectedFilters),
+    [searchTerm, selectedFilters, updateFilters]
+  );
+
+  const handleSearchChange = useCallback(({ target: { value } }) => setSearchTerm(value), []);
+
   const handleEnterKey = useCallback(
-    e => {
-      if (e.key === ENTER_KEY) handleSearch();
+    ({ key }) => {
+      if (key === ENTER_KEY) handleSearch();
     },
     [handleSearch]
   );
-  const handleReset = useCallback(
-    () => {
-      setSearchTerm('');
-      setSelectedFilters(
-        Object.keys(selectedFilters).reduce(
-          (acc, key) => ({ ...acc, [key]: DEFAULT_FILTER_OPTION_LABEL }),
-          {}
-        )
-      );
-      updateFilters('', {});
-    },
-    [selectedFilters, updateFilters]
-  );
+
+  const handleReset = useCallback(() => {
+    setSearchTerm('');
+    debouncedUpdateFilters.cancel();
+    setSelectedFilters(prev =>
+      Object.keys(prev).reduce((acc, key) => {
+        acc[key] = multiSelectPropertySet.has(key) ? [] : DEFAULT_FILTER_OPTION_LABEL;
+        return acc;
+      }, {})
+    );
+    updateFilters('', {});
+  }, [multiSelectPropertySet, updateFilters, debouncedUpdateFilters]);
+
   const handleSelect = useCallback(
-    (property, event) => {
-      const { value } = event;
+    (property, { value }) => {
       const next = { ...selectedFilters, [property]: value };
       setSelectedFilters(next);
-      updateFilters(searchTerm, next);
+      debouncedUpdateFilters(searchTerm, next);
     },
-    [searchTerm, selectedFilters, updateFilters]
+    [searchTerm, selectedFilters, debouncedUpdateFilters]
+  );
+
+  const handleMultiSelect = useCallback(
+    (property, ids) => {
+      const next = { ...selectedFilters, [property]: ids };
+      setSelectedFilters(next);
+      debouncedUpdateFilters(searchTerm, next);
+    },
+    [searchTerm, selectedFilters, debouncedUpdateFilters]
+  );
+
+  const findRelationByLocalField = useCallback(
+    localField => relationsIndex.find(relation => relation.localField === localField),
+    [relationsIndex]
+  );
+
+  const resolveAggProp = useCallback((property, config) => {
+    if (!config.relation) return property;
+    if (property.includes('.')) return property;
+    const localField = config.relation.localField || property;
+    return `${localField}.name`;
+  }, []);
+
+  const resolveEntityIdentifier = 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 = useCallback((aggProp, entityIdentifier, config) => {
+    if (!config.relation || !entityIdentifier) return aggProp;
+    return `${aggProp}/${entityIdentifier}`;
+  }, []);
+
+  const makeOnSearchChange = useCallback(
+    property =>
+      async ({ event: { value }, currentOffset }) => {
+        try {
+          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?.entityIdentifier;
+
+          const filterByEntry = addEntitySuffixIfNeeded(aggProp, entityIdentifier, config);
+
+          const currentValues = {
+            entity: schema.id,
+            filterByProperty: [filterByEntry]
+          };
+
+          const aggregations = await fetchFilterByDataFromElastic(
+            client,
+            currentValues,
+            relationsIndex,
+            stringTypeProps,
+            value
+          );
+
+          const key = aggProp;
+          const buckets = aggregations?.[key]?.buckets || [];
+
+          let items = [];
+          if (config.relation) {
+            const names = buckets.map(bucket => bucket.key).filter(Boolean);
+            if (names.length) {
+              const schemaQuery = getQuery('GET_ENTITY_SCHEMA');
+              const {
+                data: {
+                  getEntitySchemas: [relationSchema]
+                }
+              } = await client.query({
+                query: schemaQuery,
+                variables: { identifier: entityIdentifier }
+              });
+
+              const {
+                data: { result: selected = [] }
+              } = await client
+                .query({
+                  query: 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.find(opt => opt.id === property)?.items || [];
+          return unionBy(items, existingItems, 'id');
+        } catch (error) {
+          return [];
+        }
+      },
+    [
+      client,
+      schema.id,
+      relationsIndex,
+      stringTypeProps,
+      multiSelectOptions,
+      findFilterConfig,
+      resolveAggProp,
+      resolveEntityIdentifier,
+      addEntitySuffixIfNeeded,
+      findRelationByLocalField
+    ]
   );
 
   const placeholderText = `Search ${keywordSearchLabels.join(', ')}`;
 
   return (
-    <div className="search-container">
+    <div className="search-container ms-filter">
       {displaySearchFilter && (
         <div className="search-container__search-input-container">
           <input
@@ -198,24 +437,60 @@ const SearchContainer = ({
       )}
 
       {displaySelectFilters &&
-        selectOptions.map(({ id, options, label }) => (
-          <>
-            {options &&
-              !!options.length && (
-                <div className="search-container__select-wrapper">
-                  <Select
-                    label={label}
-                    id={id}
-                    name={id}
-                    onChange={event => handleSelect(id, event)}
-                    options={options}
-                    value={selectedFilters[id]}
-                    defaultTextValue={DEFAULT_FILTER_OPTION_LABEL}
-                  />
-                </div>
-              )}
-          </>
-        ))}
+        selectOptions.map(({ id, options, label, selected }) =>
+          options && options.length ? (
+            <div className="search-container__select-wrapper" key={`select-${id}`}>
+              <Select
+                label={label}
+                id={id}
+                name={id}
+                onChange={({ value }) => handleSelect(id, { value })}
+                options={options}
+                value={selectedFilters[id] !== undefined ? selectedFilters[id] : selected}
+                defaultTextValue={DEFAULT_FILTER_OPTION_LABEL}
+              />
+            </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 (
+            <div className="search-container__select-wrapper" key={`multiselect-${id}`}>
+              <MultiSelect
+                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`}
+              />
+            </div>
+          );
+        })}
 
       <div className="search-container__reset-button">
         <span role="button" onClick={handleReset}>
@@ -230,6 +505,7 @@ SearchContainer.propTypes = {
   setListFilters: PropTypes.func.isRequired,
   keywordFiltersToUse: PropTypes.array,
   selectFiltersToDisplay: PropTypes.array,
+  multiSelectFiltersToDisplay: PropTypes.array,
   schema: PropTypes.object.isRequired,
   index: PropTypes.string
 };
@@ -237,6 +513,7 @@ SearchContainer.propTypes = {
 SearchContainer.defaultProps = {
   keywordFiltersToUse: [],
   selectFiltersToDisplay: [],
+  multiSelectFiltersToDisplay: [],
   index: 'admin'
 };
 

package/src/components/ListingTable/SearchFilter/SearchFilter.js

@@ -1,9 +1,9 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { getKeywordSearchFilters, findSelectFilters } from './helpers';
+import { getKeywordSearchFilters, findSelectFilters, findMultiSelectFilters } from './helpers';
 import SearchContainer from './SearchContainer';
 
-const SearchFilter = ({ schema, setListFilters }) => {
+const SearchFilter = ({ schema, setListFilters, values }) => {
   const { displayProperties = {} } = schema || {};
   const {
     adminListings: { dataSource: { source, index } = {}, disableListingFilter = false } = {}
@@ -11,6 +11,7 @@ const SearchFilter = ({ schema, setListFilters }) => {
 
   const keywordFiltersToUse = useMemo(() => getKeywordSearchFilters(schema), [schema]);
   const selectFiltersToDisplay = useMemo(() => findSelectFilters(schema), [schema]);
+  const multiSelectFiltersToDisplay = useMemo(() => findMultiSelectFilters(schema), [schema]);
 
   if (disableListingFilter) return null;
 
@@ -25,7 +26,9 @@ const SearchFilter = ({ schema, setListFilters }) => {
       setListFilters={setListFilters}
       keywordFiltersToUse={keywordFiltersToUse}
       selectFiltersToDisplay={selectFiltersToDisplay}
+      multiSelectFiltersToDisplay={multiSelectFiltersToDisplay}
       schema={schema}
+      values={values}
     />
   );
 };