@blaze-cms/plugin-data-ui 0.141.0-core-styles.5 → 0.141.0-core-variants.0

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

@@ -9,7 +9,6 @@ import { SAVE_BUTTON_TEXTS } from '../../../../constants';
 const EntityHeader = ({
   saveButtonText,
   entityData,
-  entitySchema,
   entityIdentifier,
   pageTitle,
   onSubmit,
@@ -21,29 +20,18 @@ const EntityHeader = ({
   toggleModal,
   formData,
   pageName,
-  onViewUrl,
-  saveOnChange
+  onViewUrl
 }) => {
   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>
-        {!saveOnChange && (
-          <Button onClick={onSubmit} modifiers={SaveButtonModifiers} data-testid="button-save">
-            {saveButtonText}
-          </Button>
-        )}
+        <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>
@@ -70,11 +58,12 @@ const EntityHeader = ({
                 View
               </Button>
             )}
-            {showDeleteButton && (
-              <Button className="more-menu__link" onClick={toggleModal}>
-                Delete
-              </Button>
-            )}
+            {formData &&
+              Object.keys(formData.values).length !== 0 && (
+                <Button className="more-menu__link" onClick={toggleModal}>
+                  Delete
+                </Button>
+              )}
           </More.Content>
         </More>
       </PageHeader.Actions>
@@ -85,7 +74,6 @@ 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,
@@ -97,8 +85,7 @@ EntityHeader.propTypes = {
   toggleModal: PropTypes.func.isRequired,
   formData: PropTypes.object,
   onViewUrl: PropTypes.func.isRequired,
-  saveButtonText: PropTypes.string,
-  saveOnChange: PropTypes.bool.isRequired
+  saveButtonText: PropTypes.string
 };
 
 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 ListingTable = ({ match, entitySchema, history }) => {
+const OVER_SCAN_BUFFER = 10;
+
+const ListingTable = ({ match, entitySchema }) => {
   const [tableData, setTableData] = useState({});
   const [modalStatus, setModalStatus] = useState(false);
   const [itemToDelete, setItemToDelete] = useState({});
   const [previousSchema, setPreviousSchema] = useState({ id: null });
-  const [totalItems, setTotalItems] = useState(0);
+  const [scrollToIndex, setScrollToIndex] = useState(0);
+  const [verifiedRanges, setVerifiedRanges] = useState([]);
   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, history }) => {
     [client, entitySchema, match.url, previousSchema.id, queryParams] // eslint-disable-line react-hooks/exhaustive-deps
   );
 
-  const doQuery = async (filters = listFilters, params = queryParamsDefault) => {
-    const { listingData, totalRecords } = await fetchData({
+  const doQuery = async (filters = listFilters) => {
+    const data = await fetchData({
       client,
       querySettings: {
         entitySchema,
-        queryParams: params
+        queryParams: queryParamsDefault
       },
       listFilters: filters
     });
@@ -56,22 +56,10 @@ const ListingTable = ({ match, entitySchema, history }) => {
       toggleModal,
       url: match.url,
       entitySchema,
-      rows: listingData
+      rows: data
     });
 
     setTableData(populatedTable);
-    setTotalItems(totalRecords);
-  };
-
-  const handleOnPageChange = async ({ pageNumber, offset: _offset }) => {
-    const updatedQueryParams = {
-      ...queryParams,
-      offset: _offset
-    };
-
-    await doQuery(listFilters, updatedQueryParams);
-
-    history.push(`?page=${pageNumber}`);
   };
 
   const updateListingFilters = async filters => {
@@ -112,9 +100,11 @@ const ListingTable = ({ match, entitySchema, history }) => {
       ...queryParamsDefault,
       sort: [{ property, direction }]
     };
+    setScrollToIndex(0);
+    setVerifiedRanges([]);
     setQueryParams(sortQueryParams);
 
-    const { listingData } = await fetchData({
+    const data = await fetchData({
       client,
       querySettings: {
         entitySchema,
@@ -129,42 +119,66 @@ const ListingTable = ({ match, entitySchema, history }) => {
       ...tableData,
       appliedSort: { [property]: direction },
       rows: formatRows({
-        rows: getParsedRowData(listingData),
+        rows: getParsedRowData(data),
         url: match.url,
         toggleModal,
         firstColumn,
         isEnquiry
       })
     });
-    history.push('?page=1');
   };
 
-  if (!tableData || !tableData.rows) return 'loading';
-
-  const {
-    displayProperties: {
-      adminCrudActions: {
-        create: createAction = { active: true },
-        delete: _deleteAction = { active: true }
-      } = {}
-    } = {}
-  } = entitySchema;
+  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);
+    }
+  };
 
-  const showAddButton = !!tableData.rows.length && listFilters.length === 0;
+  if (!tableData || !tableData.rows) return 'loading';
+  const showAddButton = !!tableData.rows.length;
 
   return (
     <div className="page">
-      {modalStatus &&
-        _deleteAction.active && (
-          <DeleteAction
-            data-testid="deleteEntity"
-            onClose={toggleModal}
-            deleteAction={deleteAction}
-            itemName={itemToDelete.name}
-          />
-        )}
+      {modalStatus && (
+        <DeleteAction
+          onClose={toggleModal}
+          deleteAction={deleteAction}
+          itemName={itemToDelete.name}
+        />
+      )}
       <PageHeader title={entitySchema.displayName} subtitle="">
-        {createAction.active && (
+        {showAddButton && (
           <Fragment>
             <Link
               data-testid="addEntity"
@@ -183,7 +197,7 @@ const ListingTable = ({ match, entitySchema, history }) => {
           </Fragment>
         )}
       </PageHeader>
-      {!showAddButton && listFilters.length === 0 ? (
+      {!showAddButton && (
         <CardPrompt>
           <Link
             className="button button--rounded button--cta"
@@ -192,30 +206,26 @@ const ListingTable = ({ match, entitySchema, history }) => {
             Add
           </Link>
         </CardPrompt>
-      ) : (
-        <>
-          <RenderHook
-            hookKey="entity:listing:main:top"
-            schema={entitySchema}
-            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,
-  history: PropTypes.object.isRequired
+  match: PropTypes.object.isRequired
 };
 
 export default withRouter(ListingTable);

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

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

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

@@ -41,19 +41,9 @@ 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'
-  });
+  const { data = {} } = await client.query({ query, variables, fetchPolicy: 'network-only' });
 
-  if (data.searchResults) {
-    return {
-      listingData: data.searchResults.results,
-      totalRecords: data.searchResults.total
-    };
-  }
-  return data;
+  return data.searchResults ? data.searchResults.results : data.listingData;
 };
 
 export { fetchData };

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

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

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

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

package/lib/components/hooks/useCallbackDebounce.js

@@ -1,22 +0,0 @@
-"use strict";
-
-require("core-js/modules/es.object.define-property.js");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-require("core-js/modules/web.timers.js");
-var _react = require("react");
-function useCallbackDebounce(callback, delay, dependencies, skip) {
-  (0, _react.useEffect)(function () {
-    if (skip) return;
-    var timer = setTimeout(callback, delay);
-    return function () {
-      return clearTimeout(timer);
-    };
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  dependencies);
-}
-var _default = exports["default"] = useCallbackDebounce;
-//# sourceMappingURL=useCallbackDebounce.js.map

package/lib/components/hooks/useCallbackDebounce.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useCallbackDebounce.js","names":["_react","require","useCallbackDebounce","callback","delay","dependencies","skip","useEffect","timer","setTimeout","clearTimeout","_default","exports"],"sources":["../../../src/components/hooks/useCallbackDebounce.js"],"sourcesContent":["import { useEffect } from 'react';\n\nfunction useCallbackDebounce(callback, delay, dependencies, skip) {\n  useEffect(\n    () => {\n      if (skip) return;\n      const timer = setTimeout(callback, delay);\n      return () => clearTimeout(timer);\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    dependencies\n  );\n}\n\nexport default useCallbackDebounce;\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAEA,SAASC,mBAAmBA,CAACC,QAAQ,EAAEC,KAAK,EAAEC,YAAY,EAAEC,IAAI,EAAE;EAChE,IAAAC,gBAAS,EACP,YAAM;IACJ,IAAID,IAAI,EAAE;IACV,IAAME,KAAK,GAAGC,UAAU,CAACN,QAAQ,EAAEC,KAAK,CAAC;IACzC,OAAO;MAAA,OAAMM,YAAY,CAACF,KAAK,CAAC;IAAA;EAClC,CAAC;EACD;EACAH,YACF,CAAC;AACH;AAAC,IAAAM,QAAA,GAAAC,OAAA,cAEcV,mBAAmB"}

package/lib-es/components/hooks/useCallbackDebounce.js

@@ -1,12 +0,0 @@
-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;
-//# sourceMappingURL=useCallbackDebounce.js.map

package/lib-es/components/hooks/useCallbackDebounce.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useCallbackDebounce.js","names":["useEffect","useCallbackDebounce","callback","delay","dependencies","skip","timer","setTimeout","clearTimeout"],"sources":["../../../src/components/hooks/useCallbackDebounce.js"],"sourcesContent":["import { useEffect } from 'react';\n\nfunction useCallbackDebounce(callback, delay, dependencies, skip) {\n  useEffect(\n    () => {\n      if (skip) return;\n      const timer = setTimeout(callback, delay);\n      return () => clearTimeout(timer);\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    dependencies\n  );\n}\n\nexport default useCallbackDebounce;\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,OAAO;AAEjC,SAASC,mBAAmBA,CAACC,QAAQ,EAAEC,KAAK,EAAEC,YAAY,EAAEC,IAAI,EAAE;EAChEL,SAAS,CACP,MAAM;IACJ,IAAIK,IAAI,EAAE;IACV,MAAMC,KAAK,GAAGC,UAAU,CAACL,QAAQ,EAAEC,KAAK,CAAC;IACzC,OAAO,MAAMK,YAAY,CAACF,KAAK,CAAC;EAClC,CAAC;EACD;EACAF,YACF,CAAC;AACH;AAEA,eAAeH,mBAAmB"}

package/src/components/hooks/useCallbackDebounce.js

@@ -1,15 +0,0 @@
-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;