@blaze-cms/plugin-data-ui 0.147.0-rc-eagle.4 → 0.147.0-rc-eagle.6

package/src/components/EntityManager/Entity/Entity.js

@@ -10,7 +10,6 @@ import { DeleteAction, CopyDataFromAction } from '@blaze-cms/admin';
 import { useToasts } from '@blaze-react/toaster';
 import cloneDeep from 'lodash.clonedeep';
 import { getPageName } from '../utils/data-mappers';
-import isFormEmpty from '../utils/is-form-empty';
 import availableActions from './actions-handlers';
 import SideBarRelations from './SideBarRelations';
 import useCallbackDebounce from '../../hooks/useCallbackDebounce';
@@ -70,6 +69,7 @@ const Entity = ({
   const [newUpdatedDate, setNewUpdatedDate] = useState(null);
   const [saveButtonText, setSaveButtonText] = useState(SAVE_BUTTON_TEXTS.save);
   const [externalUpdateTime, setExternalUpdateTime] = useState(null);
+  const [suppressPrompt, setSuppressPrompt] = useState(false);
   const [isRightSidebarOpen, setIsRightSidebarOpen] = useState(true);
   const handleToggleRightSidebar = () => setIsRightSidebarOpen(!isRightSidebarOpen);
 
@@ -249,13 +249,12 @@ const Entity = ({
     const [updatedEntity = null] = fields.filter(({ id }) => id === 'name');
     updatedEntity && setPageTitle(updatedEntity.value);
 
-    const isValidAndNewValueSet = isValid && isNewValueSet;
     const isNotValidOrNotNewValueSet = !isValid || !isNewValueSet;
     if (componentIsMounted.current) {
       setIsFormValid(isValid);
     }
 
-    if (isValidAndNewValueSet && componentIsMounted.current) {
+    if (isValid && isNewValueSet && componentIsMounted.current) {
       setIsSaveButtonAvailable(true);
       setSaveButtonText(SAVE_BUTTON_TEXTS.save);
     }
@@ -271,10 +270,12 @@ const Entity = ({
 
   const onSubmit = event => {
     event && event.preventDefault();
-
     if (!isSaveButtonAvailable) return null;
-    const parsedFormValues = parseFormValues(formValues);
 
+    if (isCreatePage) {
+      setSuppressPrompt(true);
+    }
+    const parsedFormValues = parseFormValues(formValues);
     const updatedFormValues = newUpdatedDate
       ? { ...formData.values, update: newUpdatedDate }
       : { ...formData.values };
@@ -412,8 +413,7 @@ const Entity = ({
 
   const pageName = formData && formData.values && formData.values.name;
 
-  const hasNewFormValues = checkFulfilConditions(isNewEntity, !isFormEmpty(formValues));
-  const hasToDisplayPrompt = isSaveButtonAvailable || hasNewFormValues;
+  const hasToDisplayPrompt = isSaveButtonAvailable && !suppressPrompt;
 
   const showSideBarRelations = checkFulfilConditions(schema, formData);
 
@@ -457,8 +457,7 @@ const Entity = ({
             )}
 
             <div
-              className={`page__content--fixed${!isRightSidebarOpen ? ' right-sidebar-collapsed' : ''
-                }`}>
+              className={`page__content${!isRightSidebarOpen ? ' right-sidebar-collapsed' : ''}`}>
               <div className="page__content">
                 <div className="content">
                   <RenderHook

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;

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
   };
 };