@blaze-cms/plugin-data-ui 0.146.0-rc-eagle.0 → 0.146.0-rc-eagle-3.2

package/lib-es/components/ListingTable/SearchFilter/RelationMultiSelectFilter.js

@@ -0,0 +1,173 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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 _objectSpread(_objectSpread({}, option), {}, {
+      checked,
+      show: true,
+      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 /*#__PURE__*/React.createElement(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: true
+  });
+};
+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;
+//# sourceMappingURL=RelationMultiSelectFilter.js.map

package/lib-es/components/ListingTable/SearchFilter/RelationMultiSelectFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RelationMultiSelectFilter.js","names":["React","useState","useEffect","useMemo","PropTypes","MultiSelect","debounce","unionBy","useApolloClient","getQuery","getDynamicQuery","getAdminRecordSearch","buildLabel","DEBOUNCE_TIME","SEARCH_LOAD_OFFSET","SELECTION_LIMIT","shouldLoadMore","searchTerm","stopIndex","currentDataLength","RelationMultiSelectFilter","id","label","entityIdentifier","selectedIds","onChange","client","schema","setSchema","data","setData","setSearchTerm","displayProperties","active","getEntitySchemas","query","variables","identifier","relationSchema","length","undefined","result","where","_in","sort","property","direction","prev","onSearch","currentData","map","option","checked","includes","_objectSpread","show","name","interceptOnSearchChange","value","event","currentValue","selected","filter","item","newOnes","scrollHook","currentOffset","onItemsRenderedIntercept","getSelected","target","createElement","filterBy","identification","keyValue","limit","onItemsRendered","required","checkedPreviewCount","formatMoreLabel","count","isDynamic","propTypes","string","isRequired","array","func","defaultProps"],"sources":["../../../../src/components/ListingTable/SearchFilter/RelationMultiSelectFilter.js"],"sourcesContent":["import React, { useState, useEffect, useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport MultiSelect from '@blaze-react/multiselect';\nimport debounce from 'lodash.debounce';\nimport unionBy from 'lodash.unionby';\nimport { useApolloClient } from '@apollo/client';\nimport {\n  getQuery,\n  getDynamicQuery,\n  getAdminRecordSearch,\n  buildLabel\n} from '@blaze-cms/admin-ui-utils';\n\nconst DEBOUNCE_TIME = 500;\nconst SEARCH_LOAD_OFFSET = 10;\nconst SELECTION_LIMIT = 10;\n\nconst shouldLoadMore = (searchTerm, stopIndex, currentDataLength) =>\n  searchTerm &&\n  stopIndex > SEARCH_LOAD_OFFSET &&\n  stopIndex >= currentDataLength - SEARCH_LOAD_OFFSET;\n\nconst RelationMultiSelectFilter = ({ id, label, entityIdentifier, selectedIds, onChange }) => {\n  const client = useApolloClient();\n  const [schema, setSchema] = useState(null);\n  const [data, setData] = useState([]);\n  const [searchTerm, setSearchTerm] = useState('');\n\n  const { displayProperties } = schema || {};\n\n  useEffect(() => {\n    let active = true;\n    (async () => {\n      try {\n        const { data: { getEntitySchemas = [] } = {} } = await client.query({\n          query: getQuery('GET_ENTITY_SCHEMA'),\n          variables: { identifier: entityIdentifier }\n        });\n        const [relationSchema] = getEntitySchemas;\n        if (active && relationSchema) setSchema(relationSchema);\n      } catch {\n        if (active) setSchema(null);\n      }\n    })();\n    return () => {\n      active = false;\n    };\n  }, [client, entityIdentifier]);\n\n  useEffect(() => {\n    if (!schema || !selectedIds.length) return undefined;\n    let active = true;\n    (async () => {\n      try {\n        const { data: { result = [] } = {} } = await client.query({\n          query: getDynamicQuery('GET_ALL_ENTITIES')(schema),\n          variables: {\n            where: { id: { _in: selectedIds } },\n            sort: [{ property: 'name', direction: 'asc' }]\n          }\n        });\n        if (active && result.length) setData(prev => unionBy([...prev, ...result], 'id'));\n      } catch {\n        // ignore - selected chips will fall back to id-only display\n      }\n    })();\n    return () => {\n      active = false;\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [schema]);\n\n  const onSearch = useMemo(\n    () => (schema ? getAdminRecordSearch(schema, client) : null),\n    [schema, client]\n  );\n\n  const currentData = useMemo(\n    () =>\n      data.map(option => {\n        const checked = selectedIds.includes(option.id);\n        return {\n          ...option,\n          checked,\n          show: true,\n          name: buildLabel(displayProperties, option)\n        };\n      }),\n    [data, selectedIds, displayProperties]\n  );\n\n  const interceptOnSearchChange = debounce(async ({ value }) => {\n    setSearchTerm(value);\n    if (!onSearch) return;\n    const result = await onSearch({ event: { value }, currentValue: selectedIds });\n    if (!result) return;\n    setData(prev => {\n      const selected = prev.filter(item => selectedIds.includes(item.id));\n      const newOnes = result.filter(item => !selectedIds.includes(item.id));\n      return unionBy([...selected, ...newOnes], 'id');\n    });\n  }, DEBOUNCE_TIME);\n\n  const scrollHook = debounce(async ({ stopIndex }) => {\n    if (!onSearch) return;\n    const currentDataLength = data.length - selectedIds.length;\n    if (!shouldLoadMore(searchTerm, stopIndex, currentDataLength)) return;\n    const result = await onSearch({\n      event: { value: searchTerm },\n      currentValue: selectedIds,\n      currentOffset: currentDataLength\n    });\n    if (!result || !result.length) return;\n    setData(prev => unionBy([...prev, ...result], 'id'));\n  }, DEBOUNCE_TIME);\n\n  const onItemsRenderedIntercept = async event => {\n    if (!onSearch) return;\n    scrollHook(event);\n  };\n\n  const getSelected = ({\n    event: {\n      target: { value }\n    }\n  }) => {\n    onChange(id, value);\n  };\n\n  return (\n    <MultiSelect\n      label={label}\n      name={id}\n      data={{ data: currentData, filterBy: ['name'], identification: 'id', keyValue: 'name' }}\n      limit={SELECTION_LIMIT}\n      onChange={interceptOnSearchChange}\n      getSelected={getSelected}\n      onItemsRendered={onItemsRenderedIntercept}\n      required={false}\n      checkedPreviewCount={1}\n      formatMoreLabel={count => `${count} more`}\n      isDynamic\n    />\n  );\n};\n\nRelationMultiSelectFilter.propTypes = {\n  id: PropTypes.string.isRequired,\n  label: PropTypes.string,\n  entityIdentifier: PropTypes.string.isRequired,\n  selectedIds: PropTypes.array,\n  onChange: PropTypes.func.isRequired\n};\n\nRelationMultiSelectFilter.defaultProps = {\n  label: '',\n  selectedIds: []\n};\n\nexport default RelationMultiSelectFilter;\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,QAAQ,EAAEC,SAAS,EAAEC,OAAO,QAAQ,OAAO;AAC3D,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,WAAW,MAAM,0BAA0B;AAClD,OAAOC,QAAQ,MAAM,iBAAiB;AACtC,OAAOC,OAAO,MAAM,gBAAgB;AACpC,SAASC,eAAe,QAAQ,gBAAgB;AAChD,SACEC,QAAQ,EACRC,eAAe,EACfC,oBAAoB,EACpBC,UAAU,QACL,2BAA2B;AAElC,MAAMC,aAAa,GAAG,GAAG;AACzB,MAAMC,kBAAkB,GAAG,EAAE;AAC7B,MAAMC,eAAe,GAAG,EAAE;AAE1B,MAAMC,cAAc,GAAGA,CAACC,UAAU,EAAEC,SAAS,EAAEC,iBAAiB,KAC9DF,UAAU,IACVC,SAAS,GAAGJ,kBAAkB,IAC9BI,SAAS,IAAIC,iBAAiB,GAAGL,kBAAkB;AAErD,MAAMM,yBAAyB,GAAGA,CAAC;EAAEC,EAAE;EAAEC,KAAK;EAAEC,gBAAgB;EAAEC,WAAW;EAAEC;AAAS,CAAC,KAAK;EAC5F,MAAMC,MAAM,GAAGlB,eAAe,CAAC,CAAC;EAChC,MAAM,CAACmB,MAAM,EAAEC,SAAS,CAAC,GAAG3B,QAAQ,CAAC,IAAI,CAAC;EAC1C,MAAM,CAAC4B,IAAI,EAAEC,OAAO,CAAC,GAAG7B,QAAQ,CAAC,EAAE,CAAC;EACpC,MAAM,CAACgB,UAAU,EAAEc,aAAa,CAAC,GAAG9B,QAAQ,CAAC,EAAE,CAAC;EAEhD,MAAM;IAAE+B;EAAkB,CAAC,GAAGL,MAAM,IAAI,CAAC,CAAC;EAE1CzB,SAAS,CAAC,MAAM;IACd,IAAI+B,MAAM,GAAG,IAAI;IACjB,CAAC,YAAY;MACX,IAAI;QACF,MAAM;UAAEJ,IAAI,EAAE;YAAEK,gBAAgB,GAAG;UAAG,CAAC,GAAG,CAAC;QAAE,CAAC,GAAG,MAAMR,MAAM,CAACS,KAAK,CAAC;UAClEA,KAAK,EAAE1B,QAAQ,CAAC,mBAAmB,CAAC;UACpC2B,SAAS,EAAE;YAAEC,UAAU,EAAEd;UAAiB;QAC5C,CAAC,CAAC;QACF,MAAM,CAACe,cAAc,CAAC,GAAGJ,gBAAgB;QACzC,IAAID,MAAM,IAAIK,cAAc,EAAEV,SAAS,CAACU,cAAc,CAAC;MACzD,CAAC,CAAC,MAAM;QACN,IAAIL,MAAM,EAAEL,SAAS,CAAC,IAAI,CAAC;MAC7B;IACF,CAAC,EAAE,CAAC;IACJ,OAAO,MAAM;MACXK,MAAM,GAAG,KAAK;IAChB,CAAC;EACH,CAAC,EAAE,CAACP,MAAM,EAAEH,gBAAgB,CAAC,CAAC;EAE9BrB,SAAS,CAAC,MAAM;IACd,IAAI,CAACyB,MAAM,IAAI,CAACH,WAAW,CAACe,MAAM,EAAE,OAAOC,SAAS;IACpD,IAAIP,MAAM,GAAG,IAAI;IACjB,CAAC,YAAY;MACX,IAAI;QACF,MAAM;UAAEJ,IAAI,EAAE;YAAEY,MAAM,GAAG;UAAG,CAAC,GAAG,CAAC;QAAE,CAAC,GAAG,MAAMf,MAAM,CAACS,KAAK,CAAC;UACxDA,KAAK,EAAEzB,eAAe,CAAC,kBAAkB,CAAC,CAACiB,MAAM,CAAC;UAClDS,SAAS,EAAE;YACTM,KAAK,EAAE;cAAErB,EAAE,EAAE;gBAAEsB,GAAG,EAAEnB;cAAY;YAAE,CAAC;YACnCoB,IAAI,EAAE,CAAC;cAAEC,QAAQ,EAAE,MAAM;cAAEC,SAAS,EAAE;YAAM,CAAC;UAC/C;QACF,CAAC,CAAC;QACF,IAAIb,MAAM,IAAIQ,MAAM,CAACF,MAAM,EAAET,OAAO,CAACiB,IAAI,IAAIxC,OAAO,CAAC,CAAC,GAAGwC,IAAI,EAAE,GAAGN,MAAM,CAAC,EAAE,IAAI,CAAC,CAAC;MACnF,CAAC,CAAC,MAAM;QACN;MAAA;IAEJ,CAAC,EAAE,CAAC;IACJ,OAAO,MAAM;MACXR,MAAM,GAAG,KAAK;IAChB,CAAC;IACD;EACF,CAAC,EAAE,CAACN,MAAM,CAAC,CAAC;EAEZ,MAAMqB,QAAQ,GAAG7C,OAAO,CACtB,MAAOwB,MAAM,GAAGhB,oBAAoB,CAACgB,MAAM,EAAED,MAAM,CAAC,GAAG,IAAK,EAC5D,CAACC,MAAM,EAAED,MAAM,CACjB,CAAC;EAED,MAAMuB,WAAW,GAAG9C,OAAO,CACzB,MACE0B,IAAI,CAACqB,GAAG,CAACC,MAAM,IAAI;IACjB,MAAMC,OAAO,GAAG5B,WAAW,CAAC6B,QAAQ,CAACF,MAAM,CAAC9B,EAAE,CAAC;IAC/C,OAAAiC,aAAA,CAAAA,aAAA,KACKH,MAAM;MACTC,OAAO;MACPG,IAAI,EAAE,IAAI;MACVC,IAAI,EAAE5C,UAAU,CAACoB,iBAAiB,EAAEmB,MAAM;IAAC;EAE/C,CAAC,CAAC,EACJ,CAACtB,IAAI,EAAEL,WAAW,EAAEQ,iBAAiB,CACvC,CAAC;EAED,MAAMyB,uBAAuB,GAAGnD,QAAQ,CAAC,OAAO;IAAEoD;EAAM,CAAC,KAAK;IAC5D3B,aAAa,CAAC2B,KAAK,CAAC;IACpB,IAAI,CAACV,QAAQ,EAAE;IACf,MAAMP,MAAM,GAAG,MAAMO,QAAQ,CAAC;MAAEW,KAAK,EAAE;QAAED;MAAM,CAAC;MAAEE,YAAY,EAAEpC;IAAY,CAAC,CAAC;IAC9E,IAAI,CAACiB,MAAM,EAAE;IACbX,OAAO,CAACiB,IAAI,IAAI;MACd,MAAMc,QAAQ,GAAGd,IAAI,CAACe,MAAM,CAACC,IAAI,IAAIvC,WAAW,CAAC6B,QAAQ,CAACU,IAAI,CAAC1C,EAAE,CAAC,CAAC;MACnE,MAAM2C,OAAO,GAAGvB,MAAM,CAACqB,MAAM,CAACC,IAAI,IAAI,CAACvC,WAAW,CAAC6B,QAAQ,CAACU,IAAI,CAAC1C,EAAE,CAAC,CAAC;MACrE,OAAOd,OAAO,CAAC,CAAC,GAAGsD,QAAQ,EAAE,GAAGG,OAAO,CAAC,EAAE,IAAI,CAAC;IACjD,CAAC,CAAC;EACJ,CAAC,EAAEnD,aAAa,CAAC;EAEjB,MAAMoD,UAAU,GAAG3D,QAAQ,CAAC,OAAO;IAAEY;EAAU,CAAC,KAAK;IACnD,IAAI,CAAC8B,QAAQ,EAAE;IACf,MAAM7B,iBAAiB,GAAGU,IAAI,CAACU,MAAM,GAAGf,WAAW,CAACe,MAAM;IAC1D,IAAI,CAACvB,cAAc,CAACC,UAAU,EAAEC,SAAS,EAAEC,iBAAiB,CAAC,EAAE;IAC/D,MAAMsB,MAAM,GAAG,MAAMO,QAAQ,CAAC;MAC5BW,KAAK,EAAE;QAAED,KAAK,EAAEzC;MAAW,CAAC;MAC5B2C,YAAY,EAAEpC,WAAW;MACzB0C,aAAa,EAAE/C;IACjB,CAAC,CAAC;IACF,IAAI,CAACsB,MAAM,IAAI,CAACA,MAAM,CAACF,MAAM,EAAE;IAC/BT,OAAO,CAACiB,IAAI,IAAIxC,OAAO,CAAC,CAAC,GAAGwC,IAAI,EAAE,GAAGN,MAAM,CAAC,EAAE,IAAI,CAAC,CAAC;EACtD,CAAC,EAAE5B,aAAa,CAAC;EAEjB,MAAMsD,wBAAwB,GAAG,MAAMR,KAAK,IAAI;IAC9C,IAAI,CAACX,QAAQ,EAAE;IACfiB,UAAU,CAACN,KAAK,CAAC;EACnB,CAAC;EAED,MAAMS,WAAW,GAAGA,CAAC;IACnBT,KAAK,EAAE;MACLU,MAAM,EAAE;QAAEX;MAAM;IAClB;EACF,CAAC,KAAK;IACJjC,QAAQ,CAACJ,EAAE,EAAEqC,KAAK,CAAC;EACrB,CAAC;EAED,oBACE1D,KAAA,CAAAsE,aAAA,CAACjE,WAAW;IACViB,KAAK,EAAEA,KAAM;IACbkC,IAAI,EAAEnC,EAAG;IACTQ,IAAI,EAAE;MAAEA,IAAI,EAAEoB,WAAW;MAAEsB,QAAQ,EAAE,CAAC,MAAM,CAAC;MAAEC,cAAc,EAAE,IAAI;MAAEC,QAAQ,EAAE;IAAO,CAAE;IACxFC,KAAK,EAAE3D,eAAgB;IACvBU,QAAQ,EAAEgC,uBAAwB;IAClCW,WAAW,EAAEA,WAAY;IACzBO,eAAe,EAAER,wBAAyB;IAC1CS,QAAQ,EAAE,KAAM;IAChBC,mBAAmB,EAAE,CAAE;IACvBC,eAAe,EAAEC,KAAK,IAAI,GAAGA,KAAK,OAAQ;IAC1CC,SAAS;EAAA,CACV,CAAC;AAEN,CAAC;AAED5D,yBAAyB,CAAC6D,SAAS,GAAG;EACpC5D,EAAE,EAAEjB,SAAS,CAAC8E,MAAM,CAACC,UAAU;EAC/B7D,KAAK,EAAElB,SAAS,CAAC8E,MAAM;EACvB3D,gBAAgB,EAAEnB,SAAS,CAAC8E,MAAM,CAACC,UAAU;EAC7C3D,WAAW,EAAEpB,SAAS,CAACgF,KAAK;EAC5B3D,QAAQ,EAAErB,SAAS,CAACiF,IAAI,CAACF;AAC3B,CAAC;AAED/D,yBAAyB,CAACkE,YAAY,GAAG;EACvChE,KAAK,EAAE,EAAE;EACTE,WAAW,EAAE;AACf,CAAC;AAED,eAAeJ,yBAAyB","ignoreList":[]}