@blaze-cms/plugin-data-ui 0.133.0-admin-updates.0 → 0.133.0-project-admin-customisations.0

package/src/components/EntityManager/Entity/SideBarRelations/container/CustomSidebarInfoContainer.js

@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import useCustomSidebarData from '../hooks/useCustomSidebarData';
+import CustomSidebarInfo from '../presentational/CustomSidebarInfo';
+
+const CustomSibebarInfoContainer = ({ id, schema, displayProperties }) => {
+  const { data } = useCustomSidebarData({ id, schema, displayProperties });
+
+  if (!data || !Object.keys(data) || Object.keys(data).length === 0) return null;
+
+  const items = Object.values(data).flatMap(item => Object.values(item));
+
+  return <CustomSidebarInfo items={items} customSidebarInfoKey={displayProperties.key} />;
+};
+
+export default CustomSibebarInfoContainer;
+
+CustomSibebarInfoContainer.propTypes = {
+  id: PropTypes.string.isRequired,
+  displayProperties: PropTypes.object.isRequired,
+  schema: PropTypes.object.isRequired
+};

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

@@ -0,0 +1,33 @@
+import { gql } from '@apollo/client';
+import { BlazeError } from '@blaze-cms/core-errors';
+
+export default function buildDynamicQuery({ id, schema, displayProperties }) {
+  if (!schema || !schema.actions || !schema.actions.get || !schema.properties) {
+    throw new BlazeError(
+      'DataEntity query requires get action, properties and fields from entity schema'
+    );
+  }
+
+  if (
+    displayProperties.adminMainInfoProperty &&
+    Array.isArray(displayProperties.adminMainInfoProperty)
+  ) {
+    const fields = displayProperties.adminMainInfoProperty.map(
+      infoProperty =>
+        `${infoProperty} {
+        label
+        value
+      }`
+    );
+
+    return gql`query getInfoBoxData($id: String!){
+      ${schema.actions.get}( id: $id ) {
+        id
+       ${fields.map(field => field)}
+       __typename
+      }
+    }`;
+  }
+
+  return null;
+}

package/src/components/EntityManager/Entity/SideBarRelations/hooks/useCustomSidebarData.js

@@ -0,0 +1,28 @@
+import ProptTypes from 'prop-types';
+import { useQuery, gql } from '@apollo/client';
+import buildDynamicQuery from '../helpers/build-dynamic-query';
+
+const useCustomSidebarData = ({ id, schema, displayProperties }) => {
+  const query = buildDynamicQuery({ id, schema, displayProperties });
+
+  const customSidebarInfoQuery =
+    query ||
+    gql`
+      query {
+        __typename
+      }
+    `;
+
+  const { data = {}, loading, error } = useQuery(customSidebarInfoQuery, {
+    variables: { id },
+    skip: !query
+  });
+
+  return { data: data.__typename !== 'Query' ? data : null, loading, error };
+};
+
+export default useCustomSidebarData;
+
+useCustomSidebarData.propTypes = {
+  displayProperties: ProptTypes.object.isRequired
+};

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

@@ -7,6 +7,8 @@ import { formFieldTypes } from '@blaze-cms/react-form-builder';
 import classnames from 'classnames';
 import { VersionsList } from '@blaze-cms/versioning-ui';
 import { PUBLISHED, UNPUBLISHED } from '../../../../constants';
+import CustomSidebarInfoContainer from './container/CustomSidebarInfoContainer';
+import EntityNavLinks from '../EntitiyNavLinks';
 
 const SideBarRelations = ({ schema, onChange, formData, entity }) => {
   const { relation: RelationComponent } = formFieldTypes;
@@ -18,7 +20,9 @@ const SideBarRelations = ({ schema, onChange, formData, entity }) => {
     status
   } = formData;
   const client = useApolloClient();
+
   const [relationsComponents, setRelationsComponents] = useState(null);
+
   useEffect(
     () => {
       (async () => {
@@ -64,28 +68,42 @@ const SideBarRelations = ({ schema, onChange, formData, entity }) => {
   return (
     <div className="sidebar" data-testid="sideBarRelations-main-div">
       <div className="sidebar__content">
-        {formattedCreated && (
-          <div className="sidebar__status">
-            <div className="sidebar__status__wrapper">
-              <b>Status</b>
-              <span className={statusClassName}>{formattedStatus}</span>
+        <div className="sidebar__status">
+          {formattedCreated && (
+            <div className="sidebar__top">
+              <div className="sidebar__status__wrapper">
+                <b>Status</b>
+                <span className={statusClassName}>{formattedStatus}</span>
+              </div>
+              {formattedStatus === PUBLISHED && (
+                <p>
+                  {formattedStatus} on: <span> {formattedPublished}</span>
+                </p>
+              )}
             </div>
-            {formattedStatus === PUBLISHED && (
+          )}
+
+          {!schema.displayProperties.adminMainInfoProperty && (
+            <>
               <p>
-                {formattedStatus} on: <span> {formattedPublished}</span>
+                Created: <span>{formattedCreated}</span>
               </p>
-            )}
+              <p>
+                Updated: <span>{formattedUpdated}</span>
+              </p>
+            </>
+          )}
 
-            <p>
-              Created: <span>{formattedCreated}</span>
-            </p>
-            <p>
-              Updated: <span>{formattedUpdated}</span>
-            </p>
-          </div>
-        )}
+          <CustomSidebarInfoContainer
+            id={itemId}
+            schema={schema}
+            displayProperties={schema.displayProperties}
+          />
+        </div>
 
         <VersionsList itemEntity={itemEntity} itemId={itemId} interfaces={interfaces} />
+        <EntityNavLinks schema={schema} />
+
         {relationsComponents &&
           relationsComponents.map(({ id, staticData, schema: entitySchema }) => (
             <RelationComponent

package/src/components/EntityManager/Entity/SideBarRelations/presentational/CustomSidebarInfo.js

@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const CustomSidebarInfo = ({ items, customSidebarInfoKey }) => {
+  if (!items) return null;
+
+  const customSidebarInfoItems = items.map(item =>
+    Object.values(item)
+      .map(info => {
+        if (!info.label || !info.value) return null;
+
+        return (
+          <p>
+            {info.label}: <span>{info.value}</span>
+          </p>
+        );
+      })
+      .filter(Boolean)
+  );
+
+  return (
+    <div className="custom-sidebar-info" key={customSidebarInfoKey}>
+      <div className="custom-sidebar-info--container">{customSidebarInfoItems}</div>
+    </div>
+  );
+};
+
+export default CustomSidebarInfo;
+
+CustomSidebarInfo.propTypes = {
+  customSidebarInfoKey: PropTypes.string.isRequired,
+  items: PropTypes.array.isRequired
+};

package/src/components/InfoBoxes/InfoBoxes.js

@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import InfoBoxContainer from './container/InfoBoxContainer';
+
+const InfoBoxes = ({ id, schema }) => {
+  const {
+    displayProperties: { adminInfoBoxes = [] }
+  } = schema;
+
+  if (adminInfoBoxes.length <= 0) {
+    return null;
+  }
+
+  return adminInfoBoxes.map(infoBox => (
+    <InfoBoxContainer id={id} schema={schema} key={infoBox.key} infoBox={infoBox} />
+  ));
+};
+
+export default InfoBoxes;
+
+InfoBoxes.propTypes = {
+  id: PropTypes.string.isRequired,
+  schema: PropTypes.object.isRequired
+};

package/src/components/InfoBoxes/container/InfoBoxContainer.js

@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import useData from '../hooks/useData';
+import InfoBox from '../presentational/InfoBox';
+
+const InfoBoxContainer = ({ id, schema, infoBox }) => {
+  const { data } = useData({ id, schema, infoBox });
+
+  if (!data || !Object.keys(data) || Object.keys(data).length === 0) return null;
+
+  const items = Object.values(data).flatMap(item => Object.values(item));
+
+  return <InfoBox items={items} infoBoxKey={infoBox.key} />;
+};
+
+export default InfoBoxContainer;
+
+InfoBoxContainer.propTypes = {
+  id: PropTypes.string.isRequired,
+  infoBox: PropTypes.object.isRequired,
+  schema: PropTypes.object.isRequired
+};

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

@@ -0,0 +1,25 @@
+import { gql } from '@apollo/client';
+import { BlazeError } from '@blaze-cms/core-errors';
+
+export default function buildDynamicQuery({ id, schema, infoBox }) {
+  if (!schema || !schema.actions || !schema.actions.get || !schema.properties) {
+    throw new BlazeError(
+      'DataEntity query requires get action, properties and fields from entity schema'
+    );
+  }
+
+  const fields = `${infoBox.property} {
+      label
+      value
+    }`;
+
+  return {
+    query: gql`query getInfoBoxData($id: String!){
+    ${schema.actions.get}( id: $id ) {
+      id
+     ${fields}
+     __typename
+    }
+  }`
+  };
+}

package/src/components/InfoBoxes/hooks/useData.js

@@ -0,0 +1,20 @@
+import { useQuery, gql } from '@apollo/client';
+import useInfoBoxData from './useInfoBox';
+
+function useData({ id, schema, infoBox }) {
+  const { query } = useInfoBoxData({ id, schema, infoBox });
+
+  const infoBoxQuery =
+    query ||
+    gql`
+      query {
+        __typename
+      }
+    `;
+
+  const { data = {}, loading, error } = useQuery(infoBoxQuery, { variables: { id }, skip: !query });
+
+  return { data: data.__typename !== 'Query' ? data : null, loading, error };
+}
+
+export default useData;

package/src/components/InfoBoxes/hooks/useInfoBox.js

@@ -0,0 +1,13 @@
+import buildDynamicQuery from '../helpers/build-dynamic-query';
+
+function useInfoBox({ id, schema, infoBox }) {
+  const { query } = buildDynamicQuery({
+    id,
+    schema,
+    infoBox
+  });
+
+  return { query: query || null };
+}
+
+export default useInfoBox;

package/src/components/InfoBoxes/index.js

@@ -0,0 +1,3 @@
+import InfoBoxes from './InfoBoxes';
+
+export default InfoBoxes;

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

@@ -0,0 +1,34 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const InfoBox = ({ items, infoBoxKey }) => {
+  if (!items) return null;
+
+  const infoBoxItems = items.map(item =>
+    Object.values(item)
+      .map(info => {
+        if (!info.label || !info.value) return null;
+
+        return (
+          <div className="info-box--item" key={`${infoBoxKey}-${info.label.toLowerCase()}`}>
+            <div className="info-box--label">{info.label}: </div>
+            <div className="info-box--value">{info.value}</div>
+          </div>
+        );
+      })
+      .filter(Boolean)
+  );
+
+  return (
+    <div className="info-box" key={infoBoxKey}>
+      <div className="info-box--container">{infoBoxItems}</div>
+    </div>
+  );
+};
+
+export default InfoBox;
+
+InfoBox.propTypes = {
+  infoBoxKey: PropTypes.string.isRequired,
+  items: PropTypes.array.isRequired
+};

package/src/components/ListingTable/ListingTable.js

@@ -3,27 +3,27 @@ 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 { MainContext, useMainContext } from '@blaze-cms/admin-ui-utils';
 import { PageHeader, DeleteAction } from '@blaze-cms/admin';
 import { useToasts } from '@blaze-react/toaster';
+import { RenderHook } from '@blaze-cms/plugin-render-hooks-ui';
 import ListingTableContent from './ListingTableContent';
 import availableActions from '../EntityManager/Entity/actions-handlers';
 import { fetchData } from './service';
-import { populateRows, formatRows } from './mappers/populate-rows';
+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, selectedMenuItem }) => {
+const ListingTable = ({ match, entitySchema }) => {
   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 queryParamsDefault = getDefaultQueryParams({ schema: entitySchema });
+  const queryParamsDefault = getDefaultQueryParams(entitySchema);
   const [queryParams, setQueryParams] = useState(queryParamsDefault);
-  const { menuItems, setMenuItems } = useMainContext(MainContext);
+  const [listFilters, setListFilters] = useState([]);
   const client = useApolloClient();
   const { addToast } = useToasts();
 
@@ -34,20 +34,7 @@ const ListingTable = ({ match, entitySchema, selectedMenuItem }) => {
           entitySchema.id !== previousSchema.id ||
           (previousSchema.id === null && entitySchema.id)
         ) {
-          const data = await fetchData({
-            client,
-            querySettings: {
-              entitySchema,
-              queryParams: queryParamsDefault
-            }
-          });
-          const populatedTable = populateRows({
-            toggleModal,
-            url: match.url,
-            entitySchema,
-            rows: data
-          });
-          setTableData(populatedTable);
+          await doQuery();
           setPreviousSchema({ id: entitySchema.id });
         }
       })();
@@ -55,18 +42,33 @@ const ListingTable = ({ match, entitySchema, selectedMenuItem }) => {
     [client, entitySchema, match.url, previousSchema.id, queryParams] // eslint-disable-line react-hooks/exhaustive-deps
   );
 
-  const onCloseCardPrompt = () => {
-    const updatedSelectedMenuItem = {
-      ...selectedMenuItem,
-      isDisplayedPrompt: false
-    };
-    const [{ header, items }] = menuItems;
-    const updatedItems = items.map(
-      item => (item.name === selectedMenuItem.name ? updatedSelectedMenuItem : item)
-    );
-    setMenuItems([{ header, items: updatedItems }]);
+  const doQuery = async (filters = listFilters) => {
+    const data = await fetchData({
+      client,
+      querySettings: {
+        entitySchema,
+        queryParams: queryParamsDefault
+      },
+      listFilters: filters
+    });
+
+    const populatedTable = populateRows({
+      toggleModal,
+      url: match.url,
+      entitySchema,
+      rows: data
+    });
+
+    setTableData(populatedTable);
+  };
+
+  const updateListingFilters = async filters => {
+    await doQuery(filters);
+    setListFilters(filters);
   };
 
+  const onCloseCardPrompt = () => null;
+
   const toggleModal = item => {
     setModalStatus(!!item);
     setItemToDelete(item || {});
@@ -107,15 +109,22 @@ const ListingTable = ({ match, entitySchema, selectedMenuItem }) => {
       querySettings: {
         entitySchema,
         queryParams: sortQueryParams
-      }
+      },
+      listFilters
     });
-    const { columns } = tableData;
+    const { columns, isEnquiry } = tableData;
     const [firstColumn] = columns;
 
     setTableData({
       ...tableData,
       appliedSort: { [property]: direction },
-      rows: formatRows({ rows: data, url: match.url, toggleModal, firstColumn })
+      rows: formatRows({
+        rows: getParsedRowData(data),
+        url: match.url,
+        toggleModal,
+        firstColumn,
+        isEnquiry
+      })
     });
   };
 
@@ -133,11 +142,17 @@ const ListingTable = ({ match, entitySchema, selectedMenuItem }) => {
         querySettings: {
           entitySchema,
           queryParams: updatedQueryParams
-        }
+        },
+        listFilters
       });
       const updatedRows = [
         ...tableData.rows,
-        ...formatRows({ rows: data, url: match.url, toggleModal })
+        ...formatRows({
+          rows: getParsedRowData(data),
+          url: match.url,
+          toggleModal,
+          isEnquiry: tableData.isEnquiry
+        })
       ];
 
       setVerifiedRanges([...verifiedRanges, loadIndex]);
@@ -151,6 +166,7 @@ const ListingTable = ({ match, entitySchema, selectedMenuItem }) => {
   };
 
   if (!tableData || !tableData.rows) return 'loading';
+  const showAddButton = !!tableData.rows.length && !tableData.isEnquiry;
 
   return (
     <div className="page">
@@ -162,7 +178,7 @@ const ListingTable = ({ match, entitySchema, selectedMenuItem }) => {
         />
       )}
       <PageHeader title={entitySchema.displayName} subtitle="">
-        {(!selectedMenuItem.isDisplayedPrompt || !!tableData.rows.length) && (
+        {showAddButton && (
           <Fragment>
             <Link
               data-testid="addEntity"
@@ -181,13 +197,17 @@ const ListingTable = ({ match, entitySchema, selectedMenuItem }) => {
           </Fragment>
         )}
       </PageHeader>
+      <RenderHook
+        hookKey="entity:listing:main:top"
+        schema={entitySchema}
+        setListFilters={updateListingFilters}
+      />
       <ListingTableContent
         overScanBuffer={OVER_SCAN_BUFFER}
         onSort={handleSort}
         onRenderItems={handleRenderedItems}
         tableData={tableData}
         onCloseCardPrompt={onCloseCardPrompt}
-        selectedMenuItem={selectedMenuItem}
         scrollToIndex={scrollToIndex}
       />
     </div>
@@ -195,8 +215,7 @@ const ListingTable = ({ match, entitySchema, selectedMenuItem }) => {
 };
 ListingTable.propTypes = {
   entitySchema: PropTypes.object.isRequired,
-  match: PropTypes.object.isRequired,
-  selectedMenuItem: PropTypes.object.isRequired
+  match: PropTypes.object.isRequired
 };
 
 export default withRouter(ListingTable);

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

@@ -1,15 +1,11 @@
 import React from 'react';
 import Table from '@blaze-react/table';
 import PropTypes from 'prop-types';
-import { CardPrompt } from '@blaze-cms/admin';
-import { Link, withRouter } from 'react-router-dom';
+import { withRouter } from 'react-router-dom';
 
 const ListingTableContent = ({
   tableData,
   handleSelect,
-  onCloseCardPrompt,
-  selectedMenuItem,
-  match,
   onSort,
   onClickRow,
   overScanBuffer,
@@ -17,12 +13,14 @@ const ListingTableContent = ({
   scrollToIndex
 }) => {
   const displayTable = tableData && tableData.rows && !!tableData.rows.length;
+  const { isEnquiry } = tableData;
+  const className = `page__content${isEnquiry ? ' array-table' : ''}`;
 
   return (
     <>
-      {displayTable ? (
+      {displayTable && (
         <>
-          <div className="page__content">
+          <div className={className}>
             <Table
               scrollToIndex={scrollToIndex}
               onSort={onSort}
@@ -30,23 +28,12 @@ const ListingTableContent = ({
               overScanBuffer={overScanBuffer}
               onRenderItems={onRenderItems}
               data={tableData}
-              checkboxes
+              checkboxes={!isEnquiry}
               onSelect={handleSelect}
               data-testid="listing-table-content"
             />
           </div>
         </>
-      ) : (
-        selectedMenuItem.isDisplayedPrompt && (
-          <CardPrompt onClose={onCloseCardPrompt} data-testid="card-prompt">
-            <Link
-              className="button button--rounded button--cta"
-              to={`${match.url}/create`}
-              data-testid="add-button">
-              Add
-            </Link>
-          </CardPrompt>
-        )
       )}
     </>
   );
@@ -54,8 +41,6 @@ const ListingTableContent = ({
 
 ListingTableContent.propTypes = {
   tableData: PropTypes.object.isRequired,
-  onCloseCardPrompt: PropTypes.func.isRequired,
-  selectedMenuItem: PropTypes.object.isRequired,
   match: PropTypes.shape({
     url: PropTypes.string
   }).isRequired,
@@ -73,7 +58,8 @@ ListingTableContent.defaultProps = {
   onClickRow: () => {},
   overScanBuffer: 0,
   scrollToIndex: 0,
-  onRenderItems: () => {}
+  onRenderItems: () => {},
+  selectedMenuItem: null
 };
 
 export default withRouter(ListingTableContent);