@blaze-cms/plugin-data-ui 0.146.0-node18-tooltips.48 → 0.146.0-node18-core-styles-tooltips.60

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

@@ -0,0 +1,158 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import MultiSelect from '@blaze-react/multiselect';
+import debounce from 'lodash.debounce';
+import unionBy from 'lodash.unionby';
+import { useApolloClient } from '@apollo/client';
+import {
+  getQuery,
+  getDynamicQuery,
+  getAdminRecordSearch,
+  buildLabel
+} from '@blaze-cms/admin-ui-utils';
+
+const DEBOUNCE_TIME = 500;
+const SEARCH_LOAD_OFFSET = 10;
+const SELECTION_LIMIT = 10;
+
+const shouldLoadMore = (searchTerm, stopIndex, currentDataLength) =>
+  searchTerm &&
+  stopIndex > SEARCH_LOAD_OFFSET &&
+  stopIndex >= currentDataLength - SEARCH_LOAD_OFFSET;
+
+const RelationMultiSelectFilter = ({ id, label, entityIdentifier, selectedIds, onChange }) => {
+  const client = useApolloClient();
+  const [schema, setSchema] = useState(null);
+  const [data, setData] = useState([]);
+  const [searchTerm, setSearchTerm] = useState('');
+
+  const { displayProperties } = schema || {};
+
+  useEffect(() => {
+    let active = true;
+    (async () => {
+      try {
+        const { data: { getEntitySchemas = [] } = {} } = await client.query({
+          query: getQuery('GET_ENTITY_SCHEMA'),
+          variables: { identifier: entityIdentifier }
+        });
+        const [relationSchema] = getEntitySchemas;
+        if (active && relationSchema) setSchema(relationSchema);
+      } catch {
+        if (active) setSchema(null);
+      }
+    })();
+    return () => {
+      active = false;
+    };
+  }, [client, entityIdentifier]);
+
+  useEffect(() => {
+    if (!schema || !selectedIds.length) return undefined;
+    let active = true;
+    (async () => {
+      try {
+        const { data: { result = [] } = {} } = await client.query({
+          query: getDynamicQuery('GET_ALL_ENTITIES')(schema),
+          variables: {
+            where: { id: { _in: selectedIds } },
+            sort: [{ property: 'name', direction: 'asc' }]
+          }
+        });
+        if (active && result.length) setData(prev => unionBy([...prev, ...result], 'id'));
+      } catch {
+        // ignore - selected chips will fall back to id-only display
+      }
+    })();
+    return () => {
+      active = false;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [schema]);
+
+  const onSearch = useMemo(
+    () => (schema ? getAdminRecordSearch(schema, client) : null),
+    [schema, client]
+  );
+
+  const currentData = useMemo(
+    () =>
+      data.map(option => {
+        const checked = selectedIds.includes(option.id);
+        return {
+          ...option,
+          checked,
+          show: !checked,
+          name: buildLabel(displayProperties, option)
+        };
+      }),
+    [data, selectedIds, displayProperties]
+  );
+
+  const interceptOnSearchChange = debounce(async ({ value }) => {
+    setSearchTerm(value);
+    if (!onSearch) return;
+    const result = await onSearch({ event: { value }, currentValue: selectedIds });
+    if (!result) return;
+    setData(prev => {
+      const selected = prev.filter(item => selectedIds.includes(item.id));
+      const newOnes = result.filter(item => !selectedIds.includes(item.id));
+      return unionBy([...selected, ...newOnes], 'id');
+    });
+  }, DEBOUNCE_TIME);
+
+  const scrollHook = debounce(async ({ stopIndex }) => {
+    if (!onSearch) return;
+    const currentDataLength = data.length - selectedIds.length;
+    if (!shouldLoadMore(searchTerm, stopIndex, currentDataLength)) return;
+    const result = await onSearch({
+      event: { value: searchTerm },
+      currentValue: selectedIds,
+      currentOffset: currentDataLength
+    });
+    if (!result || !result.length) return;
+    setData(prev => unionBy([...prev, ...result], 'id'));
+  }, DEBOUNCE_TIME);
+
+  const onItemsRenderedIntercept = async event => {
+    if (!onSearch) return;
+    scrollHook(event);
+  };
+
+  const getSelected = ({
+    event: {
+      target: { value }
+    }
+  }) => onChange(id, value);
+
+  return (
+    <MultiSelect
+      label={label}
+      name={id}
+      data={{ data: currentData, filterBy: ['name'], identification: 'id', keyValue: 'name' }}
+      limit={SELECTION_LIMIT}
+      onChange={interceptOnSearchChange}
+      getSelected={getSelected}
+      onItemsRendered={onItemsRenderedIntercept}
+      required={false}
+      checkedPreviewCount={1}
+      formatMoreLabel={count => `${count} more`}
+      isDynamic
+    />
+  );
+};
+
+RelationMultiSelectFilter.propTypes = {
+  id: PropTypes.string.isRequired,
+  label: PropTypes.string,
+  entityIdentifier: PropTypes.string.isRequired,
+  selectedIds: PropTypes.array,
+  onChange: PropTypes.func.isRequired
+};
+
+RelationMultiSelectFilter.defaultProps = {
+  label: '',
+  selectedIds: []
+};
+
+export default RelationMultiSelectFilter;

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

@@ -16,6 +16,7 @@ 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';
 
@@ -57,6 +58,16 @@ const SearchContainer = ({
     [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 = [];
@@ -70,8 +81,9 @@ const SearchContainer = ({
   }, [keywordFiltersToUse]);
 
   const { gqlFields, rawQuery } = useMemo(
-    () => buildQueryFields([...selectFiltersToDisplay, ...multiSelectFiltersToDisplay], schema.id),
-    [selectFiltersToDisplay, multiSelectFiltersToDisplay, schema.id]
+    () =>
+      buildQueryFields([...selectFiltersToDisplay, ...nonRelationMultiSelectFilters], schema.id),
+    [selectFiltersToDisplay, nonRelationMultiSelectFilters, schema.id]
   );
 
   const action = displayAggregations
@@ -492,6 +504,27 @@ const SearchContainer = ({
           );
         })}
 
+      {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 />