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

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

@@ -0,0 +1,553 @@
+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,
+  fetchFilterByDataFromElastic,
+  fetchAllEntities
+} from '@blaze-cms/admin-ui-utils';
+import { getStringTypeProps } from '@blaze-cms/utils';
+
+import { BsArrowCounterclockwise, BsSearch } from 'react-icons/bs';
+import { updateListFilters, buildQueryFields, getTidyLabel } from './helpers';
+import RelationMultiSelectFilter from './RelationMultiSelectFilter';
+import { NOOP_QUERY } from './querys';
+import { ENTER_KEY, DEFAULT_FILTER_OPTION_LABEL } from '../../../constants';
+
+const SearchContainer = ({
+  setListFilters,
+  keywordFiltersToUse = [],
+  selectFiltersToDisplay = [],
+  multiSelectFiltersToDisplay = [],
+  schema,
+  index,
+  values
+}) => {
+  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 relationMultiSelectFilters = useMemo(
+    () => multiSelectFiltersToDisplay.filter(([, config]) => config && config.relation),
+    [multiSelectFiltersToDisplay]
+  );
+
+  const nonRelationMultiSelectFilters = useMemo(
+    () => multiSelectFiltersToDisplay.filter(([, config]) => !config || !config.relation),
+    [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, ...nonRelationMultiSelectFilters], schema.id),
+    [selectFiltersToDisplay, nonRelationMultiSelectFilters, schema.id]
+  );
+
+  const action = displayAggregations
+    ? getDynamicQuery('ADMIN_SEARCH')([schema], gqlFields, false, index)
+    : NOOP_QUERY;
+
+  const { data } = useQuery(action, {
+    skip: !displayAggregations,
+    variables: { where: rawQuery, limit: 0 },
+    fetchPolicy: 'cache-and-network'
+  });
+
+  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 processed = [];
+    Object.entries(aggregations).forEach(([key, { buckets }]) => {
+      processed.push(
+        Array.isArray(buckets) ? [key, buckets.map(bucket => bucket.key).filter(Boolean)] : []
+      );
+    });
+    return processed;
+  }, [data]);
+
+  const findFilterConfig = useCallback(
+    property =>
+      selectFiltersToDisplay.find(([prop]) => prop === property)?.[1] ||
+      multiSelectFiltersToDisplay.find(([prop]) => prop === property)?.[1],
+    [selectFiltersToDisplay, multiSelectFiltersToDisplay]
+  );
+
+  useEffect(() => {
+    if (!aggregationsData.length) {
+      setSelectOptions([]);
+      setMultiSelectOptions([]);
+      return;
+    }
+
+    (async () => {
+      const results = await Promise.all(
+        aggregationsData.map(async ([property, ids]) => {
+          try {
+            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, getTidyLabel(value, tidyLabel)]);
+              return {
+                property,
+                label: config.label,
+                type: multiSelectPropertySet.has(property) ? 'multi' : 'single',
+                options: baseOptions,
+                selected: values && values[property]
+              };
+            }
+
+            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 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(
+    ({ key }) => {
+      if (key === ENTER_KEY) handleSearch();
+    },
+    [handleSearch]
+  );
+
+  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, { value }) => {
+      const next = { ...selectedFilters, [property]: value };
+      setSelectedFilters(next);
+      debouncedUpdateFilters(searchTerm, next);
+    },
+    [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 ms-filter">
+      {displaySearchFilter && (
+        <div className="search-container__search-input-container">
+          <input
+            type="search"
+            className="search-container__search-input-container__search-input"
+            placeholder={placeholderText}
+            value={searchTerm}
+            onChange={handleSearchChange}
+            onKeyDown={handleEnterKey}
+          />
+          <i role="button" onClick={handleSearch}>
+            <BsSearch />
+          </i>
+        </div>
+      )}
+
+      {displaySelectFilters &&
+        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>
+          );
+        })}
+
+      {relationMultiSelectFilters.map(([property, config]) => {
+        const entityIdentifier =
+          resolveEntityIdentifier(property, config) || config.relation?.entityIdentifier;
+
+        if (!entityIdentifier) return null;
+
+        return (
+          <div
+            className="search-container__select-wrapper"
+            key={`relation-multiselect-${property}`}>
+            <RelationMultiSelectFilter
+              id={property}
+              label={config.label || config.relation.label}
+              entityIdentifier={entityIdentifier}
+              selectedIds={selectedFilters[property] || []}
+              onChange={handleMultiSelect}
+            />
+          </div>
+        );
+      })}
+
+      <div className="search-container__reset-button">
+        <span role="button" onClick={handleReset}>
+          <BsArrowCounterclockwise />
+        </span>
+      </div>
+    </div>
+  );
+};
+
+SearchContainer.propTypes = {
+  setListFilters: PropTypes.func.isRequired,
+  keywordFiltersToUse: PropTypes.array,
+  selectFiltersToDisplay: PropTypes.array,
+  multiSelectFiltersToDisplay: PropTypes.array,
+  schema: PropTypes.object.isRequired,
+  index: PropTypes.string
+};
+
+SearchContainer.defaultProps = {
+  keywordFiltersToUse: [],
+  selectFiltersToDisplay: [],
+  multiSelectFiltersToDisplay: [],
+  index: 'admin'
+};
+
+export default SearchContainer;

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

@@ -0,0 +1,41 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { getKeywordSearchFilters, findSelectFilters, findMultiSelectFilters } from './helpers';
+import SearchContainer from './SearchContainer';
+
+const SearchFilter = ({ schema, setListFilters, values }) => {
+  const { displayProperties = {} } = schema || {};
+  const {
+    adminListings: { dataSource: { source, index } = {}, disableListingFilter = false } = {}
+  } = displayProperties;
+
+  const keywordFiltersToUse = useMemo(() => getKeywordSearchFilters(schema), [schema]);
+  const selectFiltersToDisplay = useMemo(() => findSelectFilters(schema), [schema]);
+  const multiSelectFiltersToDisplay = useMemo(() => findMultiSelectFilters(schema), [schema]);
+
+  if (disableListingFilter) return null;
+
+  const canSearch =
+    source === 'search' && (keywordFiltersToUse.length > 0 || selectFiltersToDisplay.length > 0);
+  if (!canSearch) return null;
+
+  return (
+    <SearchContainer
+      index={index}
+      key={schema.id}
+      setListFilters={setListFilters}
+      keywordFiltersToUse={keywordFiltersToUse}
+      selectFiltersToDisplay={selectFiltersToDisplay}
+      multiSelectFiltersToDisplay={multiSelectFiltersToDisplay}
+      schema={schema}
+      values={values}
+    />
+  );
+};
+
+SearchFilter.propTypes = {
+  setListFilters: PropTypes.func.isRequired,
+  schema: PropTypes.object.isRequired
+};
+
+export default SearchFilter;