@blaze-cms/plugin-data-ui 0.140.3 → 0.141.0-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blaze-cms/plugin-data-ui",
-  "version": "0.140.3",
+  "version": "0.141.0-alpha.1",
   "description": "Blaze plugin data ui",
   "main": "lib/index.js",
   "module": "lib-es/index.js",
@@ -27,18 +27,19 @@
   },
   "license": "GPL-3.0",
   "dependencies": {
-    "@blaze-cms/admin-ui-utils": "^0.140.3",
+    "@blaze-cms/admin-ui-utils": "0.141.0-alpha.0",
     "@blaze-cms/core-errors": "^0.140.3",
     "@blaze-cms/plugin-render-hooks-ui": "^0.140.3",
-    "@blaze-cms/react-form-builder": "^0.140.3",
-    "@blaze-cms/react-page-builder": "^0.140.3",
+    "@blaze-cms/react-form-builder": "0.141.0-alpha.1",
+    "@blaze-cms/react-page-builder": "0.141.0-alpha.1",
     "@blaze-cms/setup-ui": "^0.140.3",
     "@blaze-cms/versioning-ui": "^0.140.3",
     "@blaze-react/button": "0.5.19",
     "@blaze-react/more": "0.5.19",
-    "@blaze-react/multiselect": "0.6.6",
+    "@blaze-react/multiselect": "0.8.0-alpha.78",
+    "@blaze-react/pagination": "0.8.0-alpha.76",
     "@blaze-react/select": "0.8.0-alpha.64",
-    "@blaze-react/table": "0.5.31",
+    "@blaze-react/table": "0.8.0-alpha.74",
     "@blaze-react/toaster": "0.5.17",
     "@blaze-react/utils": "0.5.15",
     "core-js": "^3.2.1",
@@ -66,5 +67,5 @@
     "lib/*",
     "lib-es/*"
   ],
-  "gitHead": "f62fd2bbc9cd4f2d1d3e77e679551b1a6ee72b81"
+  "gitHead": "511c3db4259e32fc0e45b4072254189b9d64764c"
 }

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

@@ -14,6 +14,7 @@ import isFormEmpty from '../utils/is-form-empty';
 import availableActions from './actions-handlers';
 import SideBarRelations from './SideBarRelations';
 import Tabs from '../../Tabs';
+import useCallbackDebounce from '../../hooks/useCallbackDebounce';
 
 import {
   ENTITY_PUBLISHED,
@@ -27,6 +28,7 @@ import {
   UNPUBLISHED_WARNING
 } from '../../../constants';
 import EntityHeader from './EntityHeader';
+
 import {
   validateSideBarRelations,
   canViewPage,
@@ -84,6 +86,20 @@ const Entity = ({
 
   // Here's how we'll keep track of our component's mounted state
   const componentIsMounted = useRef(true);
+
+  const {
+    displayProperties: { saveOnChange = false }
+  } = schema;
+
+  useCallbackDebounce(
+    () => {
+      isSaveButtonAvailable && onSubmit();
+    },
+    500,
+    [isSaveButtonAvailable],
+    !saveOnChange
+  );
+
   useEffect(
     () => () => {
       componentIsMounted.current = false;
@@ -424,6 +440,8 @@ const Entity = ({
           formData={formData}
           onViewUrl={onViewUrlHandler}
           saveButtonText={saveButtonText}
+          saveOnChange={saveOnChange}
+          entitySchema={entitySchema}
         />
         <div className="page-wrapper__content">
           <div className="tabs-wrapper tabs-wrapper__tab">

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

@@ -9,6 +9,7 @@ import { SAVE_BUTTON_TEXTS } from '../../../../constants';
 const EntityHeader = ({
   saveButtonText,
   entityData,
+  entitySchema,
   entityIdentifier,
   pageTitle,
   onSubmit,
@@ -20,18 +21,29 @@ const EntityHeader = ({
   toggleModal,
   formData,
   pageName,
-  onViewUrl
+  onViewUrl,
+  saveOnChange
 }) => {
   const SaveButtonModifiers = isSaveButtonAvailable ? ['small'] : ['small', 'disabled'];
   const showPreviewButton = isEnablePreviewButton && entityIdentifier && entityData.id;
   const shouldDisableMoreMenu = saveButtonText === SAVE_BUTTON_TEXTS.saving;
 
+  const {
+    displayProperties: { adminCrudActions: { delete: deleteAction = { active: true } } = {} } = {}
+  } =
+    entitySchema || {};
+
+  const showDeleteButton =
+    deleteAction.active && formData && Object.keys(formData.values).length !== 0;
+
   return (
     <PageHeader title={pageTitle} pageName={pageName} onViewUrl={onViewUrl}>
       <PageHeader.Actions>
-        <Button onClick={onSubmit} modifiers={SaveButtonModifiers} data-testid="button-save">
-          {saveButtonText}
-        </Button>
+        {!saveOnChange && (
+          <Button onClick={onSubmit} modifiers={SaveButtonModifiers} data-testid="button-save">
+            {saveButtonText}
+          </Button>
+        )}
         <More disabled={shouldDisableMoreMenu}>
           <More.Avatar data-testid={`entity-header-${pageName}`} isMoreMenu>
             <span className="material-icons">more_vert</span>
@@ -58,12 +70,11 @@ const EntityHeader = ({
                 View
               </Button>
             )}
-            {formData &&
-              Object.keys(formData.values).length !== 0 && (
-                <Button className="more-menu__link" onClick={toggleModal}>
-                  Delete
-                </Button>
-              )}
+            {showDeleteButton && (
+              <Button className="more-menu__link" onClick={toggleModal}>
+                Delete
+              </Button>
+            )}
           </More.Content>
         </More>
       </PageHeader.Actions>
@@ -74,6 +85,7 @@ const EntityHeader = ({
 EntityHeader.propTypes = {
   entityData: PropTypes.object,
   entityIdentifier: PropTypes.string,
+  entitySchema: PropTypes.object.isRequired,
   pageTitle: PropTypes.string.isRequired,
   pageName: PropTypes.string,
   onSubmit: PropTypes.func.isRequired,
@@ -85,7 +97,8 @@ EntityHeader.propTypes = {
   toggleModal: PropTypes.func.isRequired,
   formData: PropTypes.object,
   onViewUrl: PropTypes.func.isRequired,
-  saveButtonText: PropTypes.string
+  saveButtonText: PropTypes.string,
+  saveOnChange: PropTypes.bool.isRequired
 };
 
 EntityHeader.defaultProps = {

package/src/components/EntityManager/Entity/SideBarRelations/helpers/build-dynamic-query.js

@@ -17,6 +17,7 @@ export default function buildDynamicQuery({ id, schema, displayProperties }) {
         `${infoProperty} {
         label
         value
+        showLabel
       }`
     );
 

package/src/components/InfoBoxes/helpers/build-dynamic-query.js

@@ -11,6 +11,7 @@ export default function buildDynamicQuery({ id, schema, infoBox }) {
   const fields = `${infoBox.property} {
       label
       value
+      showLabel
     }`;
 
   return {

package/src/components/InfoBoxes/presentational/InfoBox.js

@@ -8,10 +8,10 @@ const InfoBox = ({ items, infoBoxKey }) => {
     Object.values(item)
       .map(info => {
         if (!info.label || !info.value) return null;
-
+        const label = info.showLabel === false ? '' : `${info.label}: `;
         return (
           <div className="info-box--item" key={`${infoBoxKey}-${info.label.toLowerCase()}`}>
-            <div className="info-box--label">{info.label}: </div>
+            <div className="info-box--label">{label}</div>
             <div className="info-box--value">{info.value}</div>
           </div>
         );

package/src/components/ListingTable/ListingTable.js

@@ -1,8 +1,8 @@
-import { useApolloClient } from '@apollo/client';
 import React, { useEffect, useState, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { withRouter, Link } from 'react-router-dom';
 import More from '@blaze-react/more';
+import { useApolloClient } from '@apollo/client';
+import { withRouter, Link, useLocation } from 'react-router-dom';
 import { PageHeader, DeleteAction, CardPrompt } from '@blaze-cms/admin';
 import { useToasts } from '@blaze-react/toaster';
 import { RenderHook } from '@blaze-cms/plugin-render-hooks-ui';
@@ -12,20 +12,20 @@ import { fetchData } from './service';
 import { populateRows, formatRows, getParsedRowData } from './mappers/populate-rows';
 import { getDefaultQueryParams } from '../../utils/get-default-query-params';
 
-const OVER_SCAN_BUFFER = 10;
-
-const ListingTable = ({ match, entitySchema }) => {
+const ListingTable = ({ match, entitySchema, history }) => {
   const [tableData, setTableData] = useState({});
   const [modalStatus, setModalStatus] = useState(false);
   const [itemToDelete, setItemToDelete] = useState({});
   const [previousSchema, setPreviousSchema] = useState({ id: null });
-  const [scrollToIndex, setScrollToIndex] = useState(0);
-  const [verifiedRanges, setVerifiedRanges] = useState([]);
+  const [totalItems, setTotalItems] = useState(0);
   const queryParamsDefault = getDefaultQueryParams(entitySchema);
   const [queryParams, setQueryParams] = useState(queryParamsDefault);
   const [listFilters, setListFilters] = useState([]);
   const client = useApolloClient();
   const { addToast } = useToasts();
+  const location = useLocation();
+  const searchParams = new URLSearchParams(location.search);
+  const currentPage = Number(searchParams.get('page')) || 1;
 
   useEffect(
     () => {
@@ -42,12 +42,12 @@ const ListingTable = ({ match, entitySchema }) => {
     [client, entitySchema, match.url, previousSchema.id, queryParams] // eslint-disable-line react-hooks/exhaustive-deps
   );
 
-  const doQuery = async (filters = listFilters) => {
-    const data = await fetchData({
+  const doQuery = async (filters = listFilters, params = queryParamsDefault) => {
+    const { listingData, totalRecords } = await fetchData({
       client,
       querySettings: {
         entitySchema,
-        queryParams: queryParamsDefault
+        queryParams: params
       },
       listFilters: filters
     });
@@ -56,10 +56,23 @@ const ListingTable = ({ match, entitySchema }) => {
       toggleModal,
       url: match.url,
       entitySchema,
-      rows: data
+      rows: listingData
     });
 
     setTableData(populatedTable);
+    setTotalItems(totalRecords);
+  };
+
+  const handleOnPageChange = async ({ pageNumber, offset: _offset }) => {
+    const updatedQueryParams = {
+      ...queryParams,
+      offset: _offset
+    };
+
+    await doQuery(listFilters, updatedQueryParams);
+
+    history.push(`?page=${pageNumber}`);
+    document.getElementsByClassName('page')[0].scrollTo(0, 0);
   };
 
   const updateListingFilters = async filters => {
@@ -100,11 +113,9 @@ const ListingTable = ({ match, entitySchema }) => {
       ...queryParamsDefault,
       sort: [{ property, direction }]
     };
-    setScrollToIndex(0);
-    setVerifiedRanges([]);
     setQueryParams(sortQueryParams);
 
-    const data = await fetchData({
+    const { listingData } = await fetchData({
       client,
       querySettings: {
         entitySchema,
@@ -119,85 +130,62 @@ const ListingTable = ({ match, entitySchema }) => {
       ...tableData,
       appliedSort: { [property]: direction },
       rows: formatRows({
-        rows: getParsedRowData(data),
+        rows: getParsedRowData(listingData),
         url: match.url,
         toggleModal,
         firstColumn,
         isEnquiry
       })
     });
-  };
-
-  const handleRenderedItems = async params => {
-    const { startIndex } = params;
-    const rowsLength = tableData.rows.length;
-    const loadIndex = Math.floor(rowsLength / 3) - OVER_SCAN_BUFFER;
-    if (loadIndex > 0 && loadIndex < startIndex && !verifiedRanges.includes(loadIndex)) {
-      const updatedQueryParams = {
-        ...queryParams,
-        offset: rowsLength
-      };
-      const data = await fetchData({
-        client,
-        querySettings: {
-          entitySchema,
-          queryParams: updatedQueryParams
-        },
-        listFilters
-      });
-      const updatedRows = [
-        ...tableData.rows,
-        ...formatRows({
-          rows: getParsedRowData(data),
-          url: match.url,
-          toggleModal,
-          isEnquiry: tableData.isEnquiry
-        })
-      ];
-
-      setVerifiedRanges([...verifiedRanges, loadIndex]);
-      setQueryParams(updatedQueryParams);
-      setTableData({
-        ...tableData,
-        rows: updatedRows
-      });
-      setScrollToIndex(startIndex + OVER_SCAN_BUFFER);
-    }
+    history.push('?page=1');
   };
 
   if (!tableData || !tableData.rows) return 'loading';
-  const showAddButton = !!tableData.rows.length;
+
+  const {
+    displayProperties: {
+      adminCrudActions: {
+        create: createAction = { active: true },
+        delete: _deleteAction = { active: true }
+      } = {}
+    } = {}
+  } = entitySchema;
+
+  const showAddButton = !tableData.rows.length && listFilters.length === 0;
 
   return (
     <div className="page">
-      {modalStatus && (
-        <DeleteAction
-          onClose={toggleModal}
-          deleteAction={deleteAction}
-          itemName={itemToDelete.name}
-        />
-      )}
-      <PageHeader title={entitySchema.displayName} subtitle="">
-        {showAddButton && (
-          <Fragment>
-            <Link
-              data-testid="addEntity"
-              className="button button--small"
-              to={`${match.url}/create`}>
-              Add
-            </Link>
-            <PageHeader.Actions>
-              <More>
-                <More.Avatar isMoreMenu>
-                  <span className="material-icons">more_vert</span>
-                </More.Avatar>
-                <More.Content isMoreMenu />
-              </More>
-            </PageHeader.Actions>
-          </Fragment>
+      {modalStatus &&
+        _deleteAction.active && (
+          <DeleteAction
+            data-testid="deleteEntity"
+            onClose={toggleModal}
+            deleteAction={deleteAction}
+            itemName={itemToDelete.name}
+          />
         )}
+      <PageHeader title={entitySchema.displayName} subtitle="">
+        {createAction.active &&
+          !showAddButton && (
+            <Fragment>
+              <Link
+                data-testid="addEntity"
+                className="button button--small"
+                to={`${match.url}/create`}>
+                Add
+              </Link>
+              <PageHeader.Actions>
+                <More>
+                  <More.Avatar isMoreMenu>
+                    <span className="material-icons">more_vert</span>
+                  </More.Avatar>
+                  <More.Content isMoreMenu />
+                </More>
+              </PageHeader.Actions>
+            </Fragment>
+          )}
       </PageHeader>
-      {!showAddButton && (
+      {showAddButton ? (
         <CardPrompt>
           <Link
             className="button button--rounded button--cta"
@@ -206,26 +194,31 @@ const ListingTable = ({ match, entitySchema }) => {
             Add
           </Link>
         </CardPrompt>
+      ) : (
+        <>
+          <RenderHook
+            hookKey="entity:listing:main:top"
+            schema={entitySchema}
+            listFilters={listFilters}
+            setListFilters={updateListingFilters}
+          />
+          <ListingTableContent
+            totalItems={totalItems}
+            currentPage={currentPage}
+            onSort={handleSort}
+            handleOnPageChange={handleOnPageChange}
+            tableData={tableData}
+            onCloseCardPrompt={onCloseCardPrompt}
+          />
+        </>
       )}
-      <RenderHook
-        hookKey="entity:listing:main:top"
-        schema={entitySchema}
-        setListFilters={updateListingFilters}
-      />
-      <ListingTableContent
-        overScanBuffer={OVER_SCAN_BUFFER}
-        onSort={handleSort}
-        onRenderItems={handleRenderedItems}
-        tableData={tableData}
-        onCloseCardPrompt={onCloseCardPrompt}
-        scrollToIndex={scrollToIndex}
-      />
     </div>
   );
 };
 ListingTable.propTypes = {
   entitySchema: PropTypes.object.isRequired,
-  match: PropTypes.object.isRequired
+  match: PropTypes.object.isRequired,
+  history: PropTypes.object.isRequired
 };
 
 export default withRouter(ListingTable);

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

@@ -1,5 +1,7 @@
 import React 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';
 
@@ -7,10 +9,9 @@ const ListingTableContent = ({
   tableData,
   handleSelect,
   onSort,
-  onClickRow,
-  overScanBuffer,
-  onRenderItems,
-  scrollToIndex
+  handleOnPageChange,
+  currentPage,
+  totalItems
 }) => {
   const displayTable = tableData && tableData.rows && !!tableData.rows.length;
   const { isEnquiry } = tableData;
@@ -18,22 +19,28 @@ const ListingTableContent = ({
 
   return (
     <>
-      {displayTable && (
+      {displayTable ? (
         <>
           <div className={className}>
             <Table
-              scrollToIndex={scrollToIndex}
               onSort={onSort}
-              onClickRow={onClickRow}
-              overScanBuffer={overScanBuffer}
-              onRenderItems={onRenderItems}
               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>
       )}
     </>
   );
@@ -46,20 +53,15 @@ ListingTableContent.propTypes = {
   }).isRequired,
   handleSelect: PropTypes.func,
   onSort: PropTypes.func,
-  onClickRow: PropTypes.func,
-  overScanBuffer: PropTypes.number,
-  scrollToIndex: PropTypes.number,
-  onRenderItems: PropTypes.func
+  handleOnPageChange: PropTypes.func,
+  currentPage: PropTypes.number.isRequired,
+  totalItems: PropTypes.number.isRequired
 };
 
 ListingTableContent.defaultProps = {
   handleSelect: () => {},
   onSort: () => {},
-  onClickRow: () => {},
-  overScanBuffer: 0,
-  scrollToIndex: 0,
-  onRenderItems: () => {},
-  selectedMenuItem: null
+  handleOnPageChange: () => {}
 };
 
 export default withRouter(ListingTableContent);

package/src/components/ListingTable/mappers/populate-rows.js

@@ -34,22 +34,25 @@ const getSanitizedColumnLabel = columnProp => {
 
 const buildArrayRowContent = rowData => (
   <div className="table-row-list">
-    {rowData.map(rowGroup => (
-      <div className="table-row-list__group">
-        {rowGroup.map(({ label, value, url }) => (
-          <div className="table-row-list__group__item">
-            <span className="table-row-list__group__item__label"> {label}:</span>
-            {url ? (
-              <Link to={url} role="button" className="table-row-list__group__item__value">
-                {value}
-              </Link>
-            ) : (
-              <span className="table-row-list__group__item__value"> {value}</span>
-            )}
-          </div>
-        ))}
-      </div>
-    ))}
+    {rowData.map(rowGroup => {
+      if (!rowGroup.length) return null;
+      return (
+        <div className="table-row-list__group">
+          {rowGroup.map(({ label, value, url }) => (
+            <div className="table-row-list__group__item">
+              <span className="table-row-list__group__item__label"> {label}:</span>
+              {url && value ? (
+                <Link to={url} role="button" className="table-row-list__group__item__value">
+                  {value}
+                </Link>
+              ) : (
+                value && <span className="table-row-list__group__item__value"> {value}</span>
+              )}
+            </div>
+          ))}
+        </div>
+      );
+    })}
   </div>
 );
 

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

@@ -41,9 +41,20 @@ const fetchData = async ({ client, querySettings: { entitySchema, queryParams },
   const isSearchQuery = source === 'search';
   const query = buildListingQuery(entitySchema, isSearchQuery);
   const variables = buildVariables({ entitySchema, listFilters, queryParams, isSearchQuery });
-  const { data = {} } = await client.query({ query, variables, fetchPolicy: 'network-only' });
 
-  return data.searchResults ? data.searchResults.results : data.listingData;
+  const { data = {} } = await client.query({
+    query,
+    variables,
+    fetchPolicy: 'network-only'
+  });
+
+  if (data.searchResults) {
+    return {
+      listingData: data.searchResults.results,
+      totalRecords: data.searchResults.total
+    };
+  }
+  return data;
 };
 
 export { fetchData };

package/src/components/hooks/useCallbackDebounce.js

@@ -0,0 +1,15 @@
+import { useEffect } from 'react';
+
+function useCallbackDebounce(callback, delay, dependencies, skip) {
+  useEffect(
+    () => {
+      if (skip) return;
+      const timer = setTimeout(callback, delay);
+      return () => clearTimeout(timer);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    dependencies
+  );
+}
+
+export default useCallbackDebounce;

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

@@ -31,6 +31,7 @@ function buildListingQuery(entitySchema, isSearchQuery) {
         id,
         ${entitySchema.listingProperties.join(',\n')}
       }
+      totalRecords: ${entitySchema.actions.countAll}(where: $where)
     }
   `;
 }

package/src/utils/get-default-query-params.js

@@ -4,7 +4,7 @@ const getDefaultQueryParams = schema => {
 
   return {
     where,
-    limit: 40,
+    limit: 10,
     offset: 0,
     sort: updated
       ? [