@blaze-cms/plugin-data-ui 0.146.0-core-styles.60 → 0.146.0-core-styles.62

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

@@ -0,0 +1,243 @@
+import React, { useState, useMemo, useEffect, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import Select from '@blaze-react/select';
+import { useQuery, useApolloClient } from '@apollo/client';
+import { getDynamicQuery, getQuery } from '@blaze-cms/admin-ui-utils';
+import { BsArrowCounterclockwise, BsSearch } from 'react-icons/bs';
+import { updateListFilters, buildQueryFields } from './helpers';
+import { NOOP_QUERY } from './querys';
+import { ENTER_KEY, DEFAULT_FILTER_OPTION_LABEL } from '../../../constants';
+
+const SearchContainer = ({
+  setListFilters,
+  keywordFiltersToUse = [],
+  selectFiltersToDisplay = [],
+  schema,
+  index
+}) => {
+  const apolloClient = useApolloClient();
+  const [searchTerm, setSearchTerm] = useState('');
+  const [selectedFilters, setSelectedFilters] = useState({});
+  const [selectOptions, setSelectOptions] = useState([]);
+
+  const displaySearchFilter = keywordFiltersToUse.length > 0;
+  const displaySelectFilters = selectFiltersToDisplay.length > 0;
+
+  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, schema.id),
+    [selectFiltersToDisplay, schema.id]
+  );
+  const action = displaySelectFilters
+    ? getDynamicQuery('ADMIN_SEARCH')([schema], gqlFields, false, index)
+    : NOOP_QUERY;
+
+  const { data } = useQuery(action, {
+    skip: !displaySelectFilters,
+    variables: { where: rawQuery, limit: 0 },
+    fetchPolicy: 'cache-and-network'
+  });
+
+  const filterData = useMemo(
+    () => {
+      const { searchResults: { rawResults: { aggregations = {} } = {} } = {} } = data || {};
+      const proccessedData = [];
+      Object.entries(aggregations).forEach(([key, { buckets }]) => {
+        proccessedData.push(
+          Array.isArray(buckets) ? [key, buckets.map(b => b.key).filter(Boolean)] : []
+        );
+      });
+
+      return proccessedData;
+    },
+    [data]
+  );
+
+  useEffect(
+    () => {
+      if (!filterData.length) {
+        setSelectOptions([]);
+        return;
+      }
+
+      (async () => {
+        const results = await Promise.all(
+          filterData.map(async ([property, ids]) => {
+            try {
+              if (!ids || !ids.length) return {};
+
+              const [, selectionDetails] =
+                selectFiltersToDisplay.find(([selectProperty]) => selectProperty === property) ||
+                [];
+
+              if (!selectionDetails) return null;
+
+              if (!selectionDetails.relation) {
+                return {
+                  id: property,
+                  label: selectionDetails.label,
+                  options: ids.map(value => [value, value])
+                };
+              }
+              const query = getQuery('GET_ENTITY_SCHEMA');
+              const {
+                data: {
+                  getEntitySchemas: [relationSchema]
+                }
+              } = await apolloClient.query({
+                query,
+                variables: { identifier: selectionDetails.relation.entityIdentifier }
+              });
+
+              const {
+                data: { result: selected = [] }
+              } = await apolloClient
+                .query({
+                  query: getDynamicQuery('GET_ALL_ENTITIES')(relationSchema),
+                  variables: {
+                    where: {
+                      id: {
+                        _in: ids
+                      }
+                    },
+                    sort: [{ property: 'name', direction: 'asc' }]
+                  }
+                })
+                // eslint-disable-next-line no-console
+                .catch(e => console.error(e));
+
+              return {
+                id: property,
+                label: selectionDetails.label,
+                options: selected.map(item => [item.id, item.name])
+              };
+            } catch {
+              return null;
+            }
+          })
+        );
+
+        setSelectOptions(results.filter(Boolean));
+      })();
+    },
+    [apolloClient, filterData, schema, selectFiltersToDisplay]
+  );
+
+  const updateFilters = useCallback(
+    (term, filters) => updateListFilters(term, filters, setListFilters, keywordSearchProperties),
+    [setListFilters, keywordSearchProperties]
+  );
+
+  const handleSearch = useCallback(() => updateFilters(searchTerm, selectedFilters), [
+    searchTerm,
+    selectedFilters,
+    updateFilters
+  ]);
+  const handleSearchChange = useCallback(e => setSearchTerm(e.target.value), []);
+  const handleEnterKey = useCallback(
+    e => {
+      if (e.key === ENTER_KEY) handleSearch();
+    },
+    [handleSearch]
+  );
+  const handleReset = useCallback(
+    () => {
+      setSearchTerm('');
+      setSelectedFilters(
+        Object.keys(selectedFilters).reduce(
+          (acc, key) => ({ ...acc, [key]: DEFAULT_FILTER_OPTION_LABEL }),
+          {}
+        )
+      );
+      updateFilters('', {});
+    },
+    [selectedFilters, updateFilters]
+  );
+  const handleSelect = useCallback(
+    (property, event) => {
+      const { value } = event;
+      const next = { ...selectedFilters, [property]: value };
+      setSelectedFilters(next);
+      updateFilters(searchTerm, next);
+    },
+    [searchTerm, selectedFilters, updateFilters]
+  );
+
+  const placeholderText = `Search ${keywordSearchLabels.join(', ')}`;
+
+  return (
+    <div className="search-container">
+      {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 }) => (
+          <>
+            {options &&
+              !!options.length && (
+                <div className="search-container__select-wrapper">
+                  <Select
+                    label={label}
+                    id={id}
+                    name={id}
+                    onChange={event => handleSelect(id, event)}
+                    options={options}
+                    value={selectedFilters[id]}
+                    defaultTextValue={DEFAULT_FILTER_OPTION_LABEL}
+                  />
+                </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,
+  schema: PropTypes.object.isRequired,
+  index: PropTypes.string
+};
+
+SearchContainer.defaultProps = {
+  keywordFiltersToUse: [],
+  selectFiltersToDisplay: [],
+  index: 'admin'
+};
+
+export default SearchContainer;

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

@@ -0,0 +1,38 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { getKeywordSearchFilters, findSelectFilters } from './helpers';
+import SearchContainer from './SearchContainer';
+
+const SearchFilter = ({ schema, setListFilters }) => {
+  const { displayProperties = {} } = schema || {};
+  const {
+    adminListings: { dataSource: { source, index } = {}, disableListingFilter = false } = {}
+  } = displayProperties;
+
+  const keywordFiltersToUse = useMemo(() => getKeywordSearchFilters(schema), [schema]);
+  const selectFiltersToDisplay = useMemo(() => findSelectFilters(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}
+      schema={schema}
+    />
+  );
+};
+
+SearchFilter.propTypes = {
+  setListFilters: PropTypes.func.isRequired,
+  schema: PropTypes.object.isRequired
+};
+
+export default SearchFilter;

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

@@ -0,0 +1,99 @@
+import { DEFAULT_FILTER_OPTION_LABEL } from '../../../constants';
+
+const updateListFilters = (searchTerm, selectedFilters, setListFilters, fields = []) => {
+  const filters = [];
+
+  if (searchTerm) {
+    filters.push({
+      simple_query_string: {
+        query: `${searchTerm}`,
+        default_operator: 'AND',
+        fields: fields.map(field => field)
+      }
+    });
+  }
+
+  Object.entries(selectedFilters).forEach(([filterKey, filterValue]) => {
+    if (!filterValue || filterValue === DEFAULT_FILTER_OPTION_LABEL) return;
+    filters.push({
+      match: {
+        [`${filterKey}.keyword`]: {
+          query: filterValue
+        }
+      }
+    });
+  });
+
+  setListFilters(filters);
+};
+
+const getKeywordSearchFilters = schema => {
+  if (!schema || !schema.properties) return [];
+
+  const { properties = {}, dynamicProperties = {} } = schema;
+
+  const propertyKeyword = Object.entries(properties).filter(isFilterKeywordItem);
+  const dynamicPropertyKeywords = Object.entries(dynamicProperties).filter(isFilterKeywordItem);
+
+  return [...propertyKeyword, ...dynamicPropertyKeywords];
+};
+
+const isFilterKeywordItem = ([, item]) =>
+  item.adminListingOptions && item.adminListingOptions.includeInKeywordSeach === true;
+
+const findSelectFilters = schema => {
+  if (!schema || !schema.properties) return [];
+
+  const { properties = {}, dynamicProperties = {} } = schema;
+
+  const propertySelects = Object.entries(properties).filter(isFilterSelectItem);
+  const dynamicPropertySelects = Object.entries(dynamicProperties).filter(isFilterSelectItem);
+
+  return [...propertySelects, ...dynamicPropertySelects];
+};
+
+const isFilterSelectItem = ([, item]) =>
+  item.adminListingOptions && item.adminListingOptions.filterType === 'select';
+
+const buildQueryFields = (selectFilters, entityId) => {
+  if (!Array.isArray(selectFilters) || selectFilters.length === 0) {
+    return { gqlFields: '', rawQuery: '{}' };
+  }
+
+  const aggs = {};
+  selectFilters.forEach(([property, details]) => {
+    aggs[property] = {
+      terms: {
+        field: `${property}.keyword`, // todo: handle different field types
+        size: 1000, // todo: customise size
+        order: {
+          _key: 'asc'
+        }
+      }
+    };
+  });
+
+  const docType = entityId;
+  const rawQueryObject = {
+    size: 0,
+    query: {
+      bool: {
+        filter: {
+          bool: {
+            must: [{ match: { docType } }]
+          }
+        }
+      }
+    },
+    aggs
+  };
+  const rawQuery = JSON.stringify(rawQueryObject);
+
+  const gqlFields = `
+    rawResults
+  `;
+
+  return { gqlFields, rawQuery };
+};
+
+export { buildQueryFields, updateListFilters, getKeywordSearchFilters, findSelectFilters };

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

@@ -0,0 +1,9 @@
+import { gql } from '@apollo/client';
+
+const NOOP_QUERY = gql`
+  query NoOp {
+    __typename
+  }
+`;
+
+export { NOOP_QUERY };

package/src/constants.js

@@ -26,6 +26,8 @@ const PAGE_BUILDER_TAB_INDEX = 1;
 const EDITOR_VIEW_TAB = 'Editor view';
 const EDITOR_VIEW_TAB_INDEX = 0;
 
+const ENTER_KEY = 'Enter';
+
 const ICON_SIZE = {
   WIDTH: '25px',
   HEIGHT: '25px'
@@ -36,6 +38,8 @@ const ICON_COLOR = {
   FILL: '#63779C'
 };
 
+const DEFAULT_FILTER_OPTION_LABEL = 'Any';
+
 export {
   DATA_LISTING_PREFIX,
   ENTITY_PUBLISHED,
@@ -63,5 +67,7 @@ export {
   SAVE_BEFORE_PUBLISH_MESSAGE,
   ICON_SIZE,
   ICON_COLOR,
-  PAGE_NOT_FOUND
+  PAGE_NOT_FOUND,
+  ENTER_KEY,
+  DEFAULT_FILTER_OPTION_LABEL
 };