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

package/src/components/ListingTable/ListingTableContent/ListingTableContent.js

@@ -1,7 +1,6 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import Table from '@blaze-react/table';
 import Pagination from '@blaze-react/pagination';
-
 import PropTypes from 'prop-types';
 import { withRouter } from 'react-router-dom';
 
@@ -13,34 +12,53 @@ const ListingTableContent = ({
   currentPage,
   totalItems
 }) => {
+  const ref = useRef(null);
   const displayTable = tableData && tableData.rows && !!tableData.rows.length;
   const { isEnquiry } = tableData;
   const className = `page__content${isEnquiry ? ' array-table' : ''}`;
 
+  useEffect(() => {
+    // set table head to match body column widths to handle dynamic content
+    if (ref.current && displayTable) {
+      const tableHeadCells = ref.current.querySelectorAll('.table-head .table-cell');
+      const firstRowCells = ref.current.querySelectorAll(
+        '.table-body .table-row:first-child .table-cell'
+      );
+
+      firstRowCells.forEach((element, i) => {
+        const styles = window.getComputedStyle(element);
+
+        if (tableHeadCells[i]) {
+          tableHeadCells[i].style.flex = styles.flex;
+          tableHeadCells[i].style['justify-content'] = styles['justify-content'];
+        }
+      });
+    }
+  }, [tableData, displayTable]);
+
+  if (displayTable) {
+    return (
+      <div ref={ref} className={className}>
+        <Table
+          onSort={onSort}
+          data={tableData}
+          onSelect={handleSelect}
+          data-testid="listing-table-content"
+        />
+        <Pagination
+          visiblePages={10}
+          totalItems={totalItems}
+          currentPage={currentPage}
+          onPageChange={handleOnPageChange}
+        />
+      </div>
+    );
+  }
+
   return (
-    <>
-      {displayTable ? (
-        <div className={className}>
-          <Table
-            onSort={onSort}
-            data={tableData}
-            checkboxes={!isEnquiry}
-            onSelect={handleSelect}
-            data-testid="listing-table-content"
-          />
-          <Pagination
-            visiblePages={10}
-            totalItems={totalItems}
-            currentPage={currentPage}
-            onPageChange={handleOnPageChange}
-          />
-        </div>
-      ) : (
-        <span className="table-no-results" data-testid="no-results">
-          No results
-        </span>
-      )}
-    </>
+    <span className="table-no-results" data-testid="no-results">
+      No results
+    </span>
   );
 };
 

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

@@ -0,0 +1,160 @@
+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: 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 (
+    <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;