@blaze-cms/plugin-data-ui 0.146.0-node18.0 → 0.146.0-rc-eagle.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/SearchContainer.js

@@ -0,0 +1,228 @@
+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/components/ListingTable/mappers/populate-rows.js

@@ -5,6 +5,7 @@ import TableActions from '../TableActions';
 import { ACTIONS } from '../../../constants';
 import InfoBoxValue from '../../InfoBoxes/presentational/InfoBoxValue';
 import InfoBoxLabel from '../../InfoBoxes/presentational/InfoBoxLabel';
+import InfoBoxTooltip from '../../InfoBoxes/InfoBoxTooltip';
 
 const formatRows = ({
   rows,
@@ -17,6 +18,7 @@ const formatRows = ({
 }) =>
   rows.map(data => {
     const editUrl = `${url}/update/${data.id}`;
+
     const rowProps = {
       ...data,
       [firstColumn]: (
@@ -65,6 +67,7 @@ const buildArrayRowContent = rowData => (
               </span>
               <span className="table-row-list__group__item__value">
                 <InfoBoxValue item={item} />
+                <InfoBoxTooltip info={item} />
               </span>
             </div>
           ))}

package/src/components/ListingTable/service/index.js

@@ -34,11 +34,11 @@ function buildVariables({ entitySchema, isSearchQuery, listFilters = [], queryPa
 }
 
 const fetchData = async ({ client, querySettings: { entitySchema, queryParams }, listFilters }) => {
-  const { displayProperties: { adminListings: { dataSource: { source } = {} } = {} } = {} } =
+  const { displayProperties: { adminListings: { dataSource: { source, index } = {} } = {} } = {} } =
     entitySchema;
 
   const isSearchQuery = source === 'search';
-  const query = buildListingQuery(entitySchema, isSearchQuery);
+  const query = buildListingQuery(entitySchema, index, isSearchQuery);
   const variables = buildVariables({ entitySchema, listFilters, queryParams, isSearchQuery });
 
   const { data = {} } = await client.query({

package/src/components/Tabs/index.js

@@ -1,11 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Tab, TabItem } from '@blaze-react/tab';
-import {
-  useReadFromCache,
-  GET_CURRENT_TAB_ID,
-  TabsContextProvider
-} from '@blaze-cms/admin-ui-utils';
+import { useTabsContext, TabsContextProvider } from '@blaze-cms/admin-ui-utils';
 import {
   PAGE_BUILDER_TAB,
   PAGE_BUILDER_TAB_INDEX,
@@ -14,25 +10,25 @@ import {
 } from '../../constants';
 
 const Tabs = ({ children, onTabChange, enabled }) => {
-  const { currentTabId } = useReadFromCache({ query: GET_CURRENT_TAB_ID }) || EDITOR_VIEW_TAB_INDEX;
+  const { currentTabId = EDITOR_VIEW_TAB_INDEX } = useTabsContext() || {};
   const [activeAccordions, setActiveAccordions] = useState([]);
-  return enabled ? (
-    <>
-      <TabsContextProvider value={{ currentTabId, activeAccordions, setActiveAccordions }}>
-        <Tab selected={currentTabId}>
-          <TabItem title={EDITOR_VIEW_TAB} action={() => onTabChange(EDITOR_VIEW_TAB_INDEX)}>
-            {children}
-          </TabItem>
-          <TabItem title={PAGE_BUILDER_TAB} action={() => onTabChange(PAGE_BUILDER_TAB_INDEX)}>
-            {children}
-          </TabItem>
-        </Tab>
-      </TabsContextProvider>
-    </>
-  ) : (
-    <>{children}</>
+
+  if (!enabled) return children;
+
+  return (
+    <TabsContextProvider value={{ currentTabId, activeAccordions, setActiveAccordions }}>
+      <Tab selected={currentTabId}>
+        <TabItem title={EDITOR_VIEW_TAB} action={() => onTabChange(EDITOR_VIEW_TAB_INDEX)}>
+          {children}
+        </TabItem>
+        <TabItem title={PAGE_BUILDER_TAB} action={() => onTabChange(PAGE_BUILDER_TAB_INDEX)}>
+          {children}
+        </TabItem>
+      </Tab>
+    </TabsContextProvider>
   );
 };
+
 Tabs.propTypes = {
   children: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object)]).isRequired,
   onTabChange: PropTypes.func.isRequired,

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,8 +38,12 @@ const ICON_COLOR = {
   FILL: '#63779C'
 };
 
+const DEFAULT_FILTER_OPTION_LABEL = 'Any';
+const DEBUG_PARAM = 'blaze_debug=1';
+
 export {
   DATA_LISTING_PREFIX,
+  DEBUG_PARAM,
   ENTITY_PUBLISHED,
   KEY_TO_CHECK,
   LEAVE_PAGE_MESSAGE,
@@ -63,5 +69,7 @@ export {
   SAVE_BEFORE_PUBLISH_MESSAGE,
   ICON_SIZE,
   ICON_COLOR,
-  PAGE_NOT_FOUND
+  PAGE_NOT_FOUND,
+  ENTER_KEY,
+  DEFAULT_FILTER_OPTION_LABEL
 };

package/src/index.js

@@ -1,16 +1,18 @@
 import { getFormBuilderLookup, formFieldTypes } from '@blaze-cms/react-form-builder';
-import React from 'react';
 import pkg from '../package.json';
 import { DATA_LISTING_PREFIX, PLUGIN_NAME } from './constants';
 import getAddContentMenuItems from './utils/add-content-menu-items';
 import { UserIcon, TaxonomyIcon, ContentIcon, SettingsIcon } from './icons';
+import EntityDataListing from './components/EntityDataListing';
+import EntityManager from './components/EntityManager';
 
-const EntityDataListing = React.lazy(
-  () => import(/* webpackChunkName: 'EntityDataListing' */ './components/EntityDataListing')
-);
-const EntityManager = React.lazy(
-  () => import(/* webpackChunkName: 'EntityManager' */ './components/EntityManager')
-);
+// todo: renable lazy loading after bundler optimisations, currently they are too slow in dev mode
+// const EntityDataListing = React.lazy(
+//   () => import(/* webpackChunkName: 'EntityDataListing' */ './components/EntityDataListing')
+// );
+// const EntityManager = React.lazy(
+//   () => import(/* webpackChunkName: 'EntityManager' */ './components/EntityManager')
+// );
 
 export default async function load(app) {
   app.events.once('admin:menu:config:load', getAddContentMenuItems(app));

package/src/utils/build-listing-query.js

@@ -2,21 +2,21 @@ import { gql } from '@apollo/client';
 import { BlazeError } from '@blaze-cms/core-errors';
 import { getDynamicQuery } from '@blaze-cms/admin-ui-utils';
 
-const buildAdminSearchQuery = entitySchema => {
+const buildAdminSearchQuery = (entitySchema, index) => {
   const { listingProperties = [] } = entitySchema || {};
   const parsedProperties = `id, ${listingProperties.join(' ') || 'id name'}`;
 
-  return getDynamicQuery('ADMIN_SEARCH')([entitySchema], parsedProperties, true);
+  return getDynamicQuery('ADMIN_SEARCH')([entitySchema], parsedProperties, true, index);
 };
 
-function buildListingQuery(entitySchema, isSearchQuery) {
+function buildListingQuery(entitySchema, index, isSearchQuery) {
   if (!entitySchema.actions || !entitySchema.actions.getAll || !entitySchema.listingProperties) {
     throw new BlazeError(
       'Listing query requires getAll action and listingProperties from entity schema'
     );
   }
 
-  if (isSearchQuery) return buildAdminSearchQuery(entitySchema);
+  if (isSearchQuery) return buildAdminSearchQuery(entitySchema, index);
 
   const sortType =
     entitySchema.actions.getAll[0].toUpperCase() + entitySchema.actions.getAll.substr(1);

package/src/utils/hoc/withContext.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import { useMainContext, MainContext } from '@blaze-cms/admin-ui-utils';
 
-export const withContext = Component => props => {
-  const contexts = useMainContext(MainContext);
-  return <Component {...props} {...contexts} />;
-};
+export const withContext = Component =>
+  function (props) {
+    const contexts = useMainContext(MainContext);
+    return <Component {...props} {...contexts} />;
+  };

package/lib-es/components/EntityDataListing/EntityDataListing.js

@@ -1,33 +0,0 @@
-import { useQuery } from '@apollo/client';
-import React from 'react';
-import PropTypes from 'prop-types';
-import { getQuery } from '@blaze-cms/admin-ui-utils';
-import ListingTable from '../ListingTable/ListingTable';
-import { withContext } from '../../utils/hoc/withContext';
-const EntityDataListing = ({
-  match
-}) => {
-  const {
-    params: {
-      entityIdentifier: identifier
-    }
-  } = match;
-  const {
-    data: {
-      getEntitySchemas = []
-    } = {}
-  } = useQuery(getQuery('GET_ENTITY_SCHEMA'), {
-    variables: {
-      identifier
-    }
-  });
-  if (!getEntitySchemas.length) return '';
-  return /*#__PURE__*/React.createElement(ListingTable, {
-    entitySchema: getEntitySchemas[0]
-  });
-};
-EntityDataListing.propTypes = {
-  match: PropTypes.object.isRequired
-};
-export default withContext(EntityDataListing);
-//# sourceMappingURL=EntityDataListing.js.map