@blaze-cms/plugin-data-ui 0.147.0-rc-eagle.2 → 0.147.0-rc-eagle.4

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,16 +23,39 @@ 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;
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const all = await fetchAllEntities({ client });
+        setAllEntitySchemas(all || []);
+      } catch (error) {
+        setAllEntitySchemas([]);
+      }
+    })();
+  }, [client]);
+
+  const multiSelectPropertySet = useMemo(
+    () => new Set(multiSelectFiltersToDisplay.map(([property]) => property)),
+    [multiSelectFiltersToDisplay]
+  );
 
   const { keywordSearchProperties, keywordSearchLabels } = useMemo(() => {
     const labels = [];
@@ -36,86 +70,140 @@ const SearchContainer = ({
   }, [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 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 });
+      });
+    }
+
+    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]
+  );
+
+  const aggregationsData = useMemo(() => {
     const { searchResults: { rawResults: { aggregations = {} } = {} } = {} } = 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 = useCallback(
+    property =>
+      selectFiltersToDisplay.find(([prop]) => prop === property)?.[1] ||
+      multiSelectFiltersToDisplay.find(([prop]) => prop === property)?.[1],
+    [selectFiltersToDisplay, multiSelectFiltersToDisplay]
+  );
+
   useEffect(() => {
-    if (!filterData.length) {
+    if (!aggregationsData.length) {
       setSelectOptions([]);
+      setMultiSelectOptions([]);
       return;
     }
 
     (async () => {
       const results = await Promise.all(
-        filterData.map(async ([property, ids]) => {
+        aggregationsData.map(async ([property, ids]) => {
           try {
-            if (!ids || !ids.length) return {};
+            if (!ids || !ids.length) return null;
 
-            const [, selectionDetails] =
-              selectFiltersToDisplay.find(([selectProperty]) => selectProperty === property) || [];
+            const config = findFilterConfig(property);
+            if (!config) return null;
 
-            if (!selectionDetails) return null;
+            const { adminListingOptions: { tidyLabel } = {} } = config;
 
-            if (!selectionDetails.relation) {
+            if (!config.relation) {
+              const baseOptions = ids.map(value => [value, 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 = getQuery('GET_ENTITY_SCHEMA');
+
+            const schemaQuery = getQuery('GET_ENTITY_SCHEMA');
             const {
               data: {
                 getEntitySchemas: [relationSchema]
               }
-            } = await apolloClient.query({
-              query,
-              variables: { identifier: selectionDetails.relation.entityIdentifier }
+            } = await client.query({
+              query: schemaQuery,
+              variables: { identifier: config.relation.entityIdentifier }
             });
 
             const {
               data: { result: selected = [] }
-            } = await apolloClient
+            } = await client
               .query({
                 query: getDynamicQuery('GET_ALL_ENTITIES')(relationSchema),
                 variables: {
-                  where: {
-                    id: {
-                      _in: ids
-                    }
-                  },
+                  where: { id: { _in: ids } },
                   sort: [{ property: 'name', direction: 'asc' }]
                 }
               })
               // eslint-disable-next-line no-console
-              .catch(e => console.error(e));
+              .catch(error => console.error(error));
+
+            const baseOptions = selected.map(item => [item.id, 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;
@@ -123,50 +211,215 @@ const SearchContainer = ({
         })
       );
 
-      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 = useCallback(
     (term, filters) => updateListFilters(term, filters, setListFilters, keywordSearchProperties),
     [setListFilters, keywordSearchProperties]
   );
 
+  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(e => setSearchTerm(e.target.value), []);
+
+  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 }),
-        {}
-      )
+    debouncedUpdateFilters.cancel();
+    setSelectedFilters(prev =>
+      Object.keys(prev).reduce((acc, key) => {
+        acc[key] = multiSelectPropertySet.has(key) ? [] : DEFAULT_FILTER_OPTION_LABEL;
+        return acc;
+      }, {})
     );
     updateFilters('', {});
-  }, [selectedFilters, 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
@@ -184,23 +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}>
@@ -215,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
 };
@@ -222,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}
     />
   );
 };

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

@@ -14,14 +14,32 @@ const updateListFilters = (searchTerm, selectedFilters, setListFilters, fields =
   }
 
   Object.entries(selectedFilters).forEach(([filterKey, filterValue]) => {
-    if (!filterValue || filterValue === DEFAULT_FILTER_OPTION_LABEL) return;
-    filters.push({
-      match: {
-        [`${filterKey}.keyword`]: {
-          query: filterValue
-        }
+    const isEmptyArray = Array.isArray(filterValue) && filterValue.length === 0;
+    if (
+      filterValue == null ||
+      filterValue === '' ||
+      filterValue === DEFAULT_FILTER_OPTION_LABEL ||
+      isEmptyArray
+    )
+      return;
+
+    const field = `${filterKey}.keyword`;
+
+    if (Array.isArray(filterValue)) {
+      if (filterValue.length > 1) {
+        filters.push({
+          terms: { [field]: filterValue }
+        });
+      } else {
+        filters.push({
+          term: { [field]: filterValue[0] }
+        });
       }
-    });
+    } else {
+      filters.push({
+        term: { [field]: filterValue }
+      });
+    }
   });
 
   setListFilters(filters);
@@ -52,9 +70,23 @@ const findSelectFilters = schema => {
   return [...propertySelects, ...dynamicPropertySelects];
 };
 
+const findMultiSelectFilters = schema => {
+  if (!schema || !schema.properties) return [];
+
+  const { properties = {}, dynamicProperties = {} } = schema;
+  const propertyMultiSelect = Object.entries(properties).filter(isFilterMultiSelectItems);
+  const dynamicPropertyMultiSelect = Object.entries(dynamicProperties).filter(
+    isFilterMultiSelectItems
+  );
+  return [...propertyMultiSelect, ...dynamicPropertyMultiSelect];
+};
+
 const isFilterSelectItem = ([, item]) =>
   item.adminListingOptions && item.adminListingOptions.filterType === 'select';
 
+const isFilterMultiSelectItems = ([, item]) =>
+  item.adminListingOptions && item.adminListingOptions.filterType === 'multiSelect';
+
 const buildQueryFields = (selectFilters, entityId) => {
   if (!Array.isArray(selectFilters) || selectFilters.length === 0) {
     return { gqlFields: '', rawQuery: '{}' };
@@ -96,4 +128,20 @@ const buildQueryFields = (selectFilters, entityId) => {
   return { gqlFields, rawQuery };
 };
 
-export { buildQueryFields, updateListFilters, getKeywordSearchFilters, findSelectFilters };
+const getTidyLabel = (value, tidy) => {
+  if (!tidy) return value;
+
+  return value
+    .split(/[\s_-]+/)
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ');
+};
+
+export {
+  buildQueryFields,
+  updateListFilters,
+  getKeywordSearchFilters,
+  findSelectFilters,
+  findMultiSelectFilters,
+  getTidyLabel
+};

package/src/index.js

@@ -14,6 +14,8 @@ import EntityManager from './components/EntityManager';
 //   () => import(/* webpackChunkName: 'EntityManager' */ './components/EntityManager')
 // );
 
+export { default as SearchFilter } from './components/ListingTable/SearchFilter/SearchFilter';
+
 export default async function load(app) {
   app.events.once('admin:menu:config:load', getAddContentMenuItems(app));