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

package/lib-es/utils/get-default-query-params.js.map

@@ -1 +1 @@
-{"version":3,"file":"get-default-query-params.js","names":["getDefaultQueryParams","schema","updated","properties","adminDefaultListingFilter","where","displayProperties","limit","offset","sort","property","direction"],"sources":["../../src/utils/get-default-query-params.js"],"sourcesContent":["const getDefaultQueryParams = schema => {\n  const updated = schema.properties && schema.properties.updated;\n  const { adminDefaultListingFilter: where } = schema.displayProperties || {};\n\n  return {\n    where,\n    limit: 10,\n    offset: 0,\n    sort: updated\n      ? [\n          {\n            property: 'updated',\n            direction: 'desc'\n          }\n        ]\n      : []\n  };\n};\n\nexport { getDefaultQueryParams };\n"],"mappings":"AAAA,MAAMA,qBAAqB,GAAGC,MAAM,IAAI;EACtC,MAAMC,OAAO,GAAGD,MAAM,CAACE,UAAU,IAAIF,MAAM,CAACE,UAAU,CAACD,OAAO;EAC9D,MAAM;IAAEE,yBAAyB,EAAEC;EAAM,CAAC,GAAGJ,MAAM,CAACK,iBAAiB,IAAI,CAAC,CAAC;EAE3E,OAAO;IACLD,KAAK;IACLE,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,CAAC;IACTC,IAAI,EAAEP,OAAO,GACT,CACE;MACEQ,QAAQ,EAAE,SAAS;MACnBC,SAAS,EAAE;IACb,CAAC,CACF,GACD;EACN,CAAC;AACH,CAAC;AAED,SAASX,qBAAqB","ignoreList":[]}
+{"version":3,"file":"get-default-query-params.js","names":["getDefaultQueryParams","schema","updated","properties","adminDefaultListingFilter","where","adminListings","defaultSort","displayProperties","sort","property","direction","limit","offset"],"sources":["../../src/utils/get-default-query-params.js"],"sourcesContent":["const getDefaultQueryParams = schema => {\n  const updated = schema.properties && schema.properties.updated;\n  const { adminDefaultListingFilter: where, adminListings: { defaultSort } = {} } =\n    schema.displayProperties || {};\n\n  let sort = [];\n\n  if (defaultSort?.property) {\n    sort = [\n      {\n        property: defaultSort.property,\n        direction: defaultSort.direction || 'asc'\n      }\n    ];\n  } else if (updated) {\n    sort = [\n      {\n        property: 'updated',\n        direction: 'desc'\n      }\n    ];\n  }\n\n  return {\n    where,\n    limit: 10,\n    offset: 0,\n    sort\n  };\n};\n\nexport { getDefaultQueryParams };\n"],"mappings":"AAAA,MAAMA,qBAAqB,GAAGC,MAAM,IAAI;EACtC,MAAMC,OAAO,GAAGD,MAAM,CAACE,UAAU,IAAIF,MAAM,CAACE,UAAU,CAACD,OAAO;EAC9D,MAAM;IAAEE,yBAAyB,EAAEC,KAAK;IAAEC,aAAa,EAAE;MAAEC;IAAY,CAAC,GAAG,CAAC;EAAE,CAAC,GAC7EN,MAAM,CAACO,iBAAiB,IAAI,CAAC,CAAC;EAEhC,IAAIC,IAAI,GAAG,EAAE;EAEb,IAAIF,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAEG,QAAQ,EAAE;IACzBD,IAAI,GAAG,CACL;MACEC,QAAQ,EAAEH,WAAW,CAACG,QAAQ;MAC9BC,SAAS,EAAEJ,WAAW,CAACI,SAAS,IAAI;IACtC,CAAC,CACF;EACH,CAAC,MAAM,IAAIT,OAAO,EAAE;IAClBO,IAAI,GAAG,CACL;MACEC,QAAQ,EAAE,SAAS;MACnBC,SAAS,EAAE;IACb,CAAC,CACF;EACH;EAEA,OAAO;IACLN,KAAK;IACLO,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,CAAC;IACTJ;EACF,CAAC;AACH,CAAC;AAED,SAAST,qBAAqB","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blaze-cms/plugin-data-ui",
-  "version": "0.146.0-node18-tooltips.44",
+  "version": "0.146.0-node18-core-styles-tooltips.60",
   "description": "Blaze plugin data ui",
   "main": "lib/index.js",
   "module": "lib-es/index.js",
@@ -27,13 +27,13 @@
   },
   "license": "GPL-3.0",
   "dependencies": {
-    "@blaze-cms/admin-ui-utils": "0.146.0-node18-tooltips.44",
-    "@blaze-cms/core-errors": "0.146.0-node18-tooltips.0",
-    "@blaze-cms/plugin-render-hooks-ui": "0.146.0-node18-tooltips.0",
-    "@blaze-cms/react-form-builder": "0.146.0-node18-tooltips.44",
-    "@blaze-cms/react-page-builder": "0.146.0-node18-tooltips.44",
-    "@blaze-cms/setup-ui": "0.146.0-node18-tooltips.0",
-    "@blaze-cms/versioning-ui": "0.146.0-node18-tooltips.37",
+    "@blaze-cms/admin-ui-utils": "0.146.0-node18-core-styles-tooltips.60",
+    "@blaze-cms/core-errors": "0.146.0-node18-core-styles-tooltips.46",
+    "@blaze-cms/plugin-render-hooks-ui": "0.146.0-node18-core-styles-tooltips.46",
+    "@blaze-cms/react-form-builder": "0.146.0-node18-core-styles-tooltips.60",
+    "@blaze-cms/react-page-builder": "0.146.0-node18-core-styles-tooltips.60",
+    "@blaze-cms/setup-ui": "0.146.0-node18-core-styles-tooltips.46",
+    "@blaze-cms/versioning-ui": "0.146.0-node18-core-styles-tooltips.46",
     "@blaze-react/button": "0.8.0-alpha.82",
     "@blaze-react/more": "0.5.19",
     "@blaze-react/multiselect": "0.8.0-alpha.108",
@@ -57,7 +57,7 @@
     "uuid": "^3.3.3"
   },
   "devDependencies": {
-    "@blaze-cms/core-ui": "0.146.0-node18-tooltips.44"
+    "@blaze-cms/core-ui": "0.146.0-node18-core-styles-tooltips.58"
   },
   "peerDependencies": {
     "@apollo/client": "3.x",
@@ -69,5 +69,5 @@
     "lib/*",
     "lib-es/*"
   ],
-  "gitHead": "952edd6c8a27c44508a3e4989222f72631e2e093"
+  "gitHead": "447a75ee4bcd2cbbf2ed3fab689d5d0533f3b76e"
 }

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 />

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

@@ -75,9 +75,8 @@ const findMultiSelectFilters = schema => {
 
   const { properties = {}, dynamicProperties = {} } = schema;
   const propertyMultiSelect = Object.entries(properties).filter(isFilterMultiSelectItems);
-  const dynamicPropertyMultiSelect = Object.entries(dynamicProperties).filter(
-    isFilterMultiSelectItems
-  );
+  const dynamicPropertyMultiSelect =
+    Object.entries(dynamicProperties).filter(isFilterMultiSelectItems);
   return [...propertyMultiSelect, ...dynamicPropertyMultiSelect];
 };
 

package/src/utils/get-default-query-params.js

@@ -1,19 +1,31 @@
 const getDefaultQueryParams = schema => {
   const updated = schema.properties && schema.properties.updated;
-  const { adminDefaultListingFilter: where } = schema.displayProperties || {};
+  const { adminDefaultListingFilter: where, adminListings: { defaultSort } = {} } =
+    schema.displayProperties || {};
+
+  let sort = [];
+
+  if (defaultSort?.property) {
+    sort = [
+      {
+        property: defaultSort.property,
+        direction: defaultSort.direction || 'asc'
+      }
+    ];
+  } else if (updated) {
+    sort = [
+      {
+        property: 'updated',
+        direction: 'desc'
+      }
+    ];
+  }
 
   return {
     where,
     limit: 10,
     offset: 0,
-    sort: updated
-      ? [
-          {
-            property: 'updated',
-            direction: 'desc'
-          }
-        ]
-      : []
+    sort
   };
 };