@blaze-cms/plugin-data-ui 0.131.0-project-admin-customisations.1 → 0.131.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (108) hide show
  1. package/CHANGELOG.md +2 -48
  2. package/README.md +0 -42
  3. package/lib/components/EntityDataListing/EntityDataListing.js +24 -3
  4. package/lib/components/EntityDataListing/EntityDataListing.js.map +1 -1
  5. package/lib/components/EntityManager/Entity/Entity.js +17 -32
  6. package/lib/components/EntityManager/Entity/Entity.js.map +1 -1
  7. package/lib/components/EntityManager/Entity/SideBarRelations/index.js +7 -23
  8. package/lib/components/EntityManager/Entity/SideBarRelations/index.js.map +1 -1
  9. package/lib/components/ListingTable/ListingTable.js +33 -19
  10. package/lib/components/ListingTable/ListingTable.js.map +1 -1
  11. package/lib/components/ListingTable/ListingTableContent/ListingTableContent.js +14 -9
  12. package/lib/components/ListingTable/ListingTableContent/ListingTableContent.js.map +1 -1
  13. package/lib/components/ListingTable/mappers/populate-rows.js +26 -92
  14. package/lib/components/ListingTable/mappers/populate-rows.js.map +1 -1
  15. package/lib/index.js +11 -3
  16. package/lib/index.js.map +1 -1
  17. package/lib/utils/add-content-menu-items.js +13 -64
  18. package/lib/utils/add-content-menu-items.js.map +1 -1
  19. package/lib-es/components/EntityDataListing/EntityDataListing.js +14 -3
  20. package/lib-es/components/EntityDataListing/EntityDataListing.js.map +1 -1
  21. package/lib-es/components/EntityManager/Entity/Entity.js +17 -32
  22. package/lib-es/components/EntityManager/Entity/Entity.js.map +1 -1
  23. package/lib-es/components/EntityManager/Entity/SideBarRelations/index.js +8 -24
  24. package/lib-es/components/EntityManager/Entity/SideBarRelations/index.js.map +1 -1
  25. package/lib-es/components/ListingTable/ListingTable.js +32 -19
  26. package/lib-es/components/ListingTable/ListingTable.js.map +1 -1
  27. package/lib-es/components/ListingTable/ListingTableContent/ListingTableContent.js +15 -12
  28. package/lib-es/components/ListingTable/ListingTableContent/ListingTableContent.js.map +1 -1
  29. package/lib-es/components/ListingTable/mappers/populate-rows.js +24 -76
  30. package/lib-es/components/ListingTable/mappers/populate-rows.js.map +1 -1
  31. package/lib-es/index.js +9 -1
  32. package/lib-es/index.js.map +1 -1
  33. package/lib-es/utils/add-content-menu-items.js +5 -49
  34. package/lib-es/utils/add-content-menu-items.js.map +1 -1
  35. package/package.json +9 -10
  36. package/src/components/EntityDataListing/EntityDataListing.js +12 -3
  37. package/src/components/EntityManager/Entity/Entity.js +57 -68
  38. package/src/components/EntityManager/Entity/SideBarRelations/index.js +19 -51
  39. package/src/components/ListingTable/ListingTable.js +22 -23
  40. package/src/components/ListingTable/ListingTableContent/ListingTableContent.js +18 -9
  41. package/src/components/ListingTable/mappers/populate-rows.js +18 -83
  42. package/src/index.js +8 -1
  43. package/src/utils/add-content-menu-items.js +3 -45
  44. package/lib/components/EntityManager/Entity/EntitiyNavLinks/EntityNavLinks.js +0 -39
  45. package/lib/components/EntityManager/Entity/EntitiyNavLinks/EntityNavLinks.js.map +0 -1
  46. package/lib/components/EntityManager/Entity/EntitiyNavLinks/index.js +0 -12
  47. package/lib/components/EntityManager/Entity/EntitiyNavLinks/index.js.map +0 -1
  48. package/lib/components/EntityManager/Entity/SideBarRelations/container/CustomSidebarInfoContainer.js +0 -44
  49. package/lib/components/EntityManager/Entity/SideBarRelations/container/CustomSidebarInfoContainer.js.map +0 -1
  50. package/lib/components/EntityManager/Entity/SideBarRelations/helpers/build-dynamic-query.js +0 -32
  51. package/lib/components/EntityManager/Entity/SideBarRelations/helpers/build-dynamic-query.js.map +0 -1
  52. package/lib/components/EntityManager/Entity/SideBarRelations/hooks/useCustomSidebarData.js +0 -45
  53. package/lib/components/EntityManager/Entity/SideBarRelations/hooks/useCustomSidebarData.js.map +0 -1
  54. package/lib/components/EntityManager/Entity/SideBarRelations/presentational/CustomSidebarInfo.js +0 -38
  55. package/lib/components/EntityManager/Entity/SideBarRelations/presentational/CustomSidebarInfo.js.map +0 -1
  56. package/lib/components/InfoBoxes/InfoBoxes.js +0 -36
  57. package/lib/components/InfoBoxes/InfoBoxes.js.map +0 -1
  58. package/lib/components/InfoBoxes/container/InfoBoxContainer.js +0 -44
  59. package/lib/components/InfoBoxes/container/InfoBoxContainer.js.map +0 -1
  60. package/lib/components/InfoBoxes/helpers/build-dynamic-query.js +0 -25
  61. package/lib/components/InfoBoxes/helpers/build-dynamic-query.js.map +0 -1
  62. package/lib/components/InfoBoxes/hooks/useData.js +0 -42
  63. package/lib/components/InfoBoxes/hooks/useData.js.map +0 -1
  64. package/lib/components/InfoBoxes/hooks/useInfoBox.js +0 -26
  65. package/lib/components/InfoBoxes/hooks/useInfoBox.js.map +0 -1
  66. package/lib/components/InfoBoxes/index.js +0 -12
  67. package/lib/components/InfoBoxes/index.js.map +0 -1
  68. package/lib/components/InfoBoxes/presentational/InfoBox.js +0 -46
  69. package/lib/components/InfoBoxes/presentational/InfoBox.js.map +0 -1
  70. package/lib-es/components/EntityManager/Entity/EntitiyNavLinks/EntityNavLinks.js +0 -30
  71. package/lib-es/components/EntityManager/Entity/EntitiyNavLinks/EntityNavLinks.js.map +0 -1
  72. package/lib-es/components/EntityManager/Entity/EntitiyNavLinks/index.js +0 -3
  73. package/lib-es/components/EntityManager/Entity/EntitiyNavLinks/index.js.map +0 -1
  74. package/lib-es/components/EntityManager/Entity/SideBarRelations/container/CustomSidebarInfoContainer.js +0 -30
  75. package/lib-es/components/EntityManager/Entity/SideBarRelations/container/CustomSidebarInfoContainer.js.map +0 -1
  76. package/lib-es/components/EntityManager/Entity/SideBarRelations/helpers/build-dynamic-query.js +0 -26
  77. package/lib-es/components/EntityManager/Entity/SideBarRelations/helpers/build-dynamic-query.js.map +0 -1
  78. package/lib-es/components/EntityManager/Entity/SideBarRelations/hooks/useCustomSidebarData.js +0 -39
  79. package/lib-es/components/EntityManager/Entity/SideBarRelations/hooks/useCustomSidebarData.js.map +0 -1
  80. package/lib-es/components/EntityManager/Entity/SideBarRelations/presentational/CustomSidebarInfo.js +0 -24
  81. package/lib-es/components/EntityManager/Entity/SideBarRelations/presentational/CustomSidebarInfo.js.map +0 -1
  82. package/lib-es/components/InfoBoxes/InfoBoxes.js +0 -28
  83. package/lib-es/components/InfoBoxes/InfoBoxes.js.map +0 -1
  84. package/lib-es/components/InfoBoxes/container/InfoBoxContainer.js +0 -30
  85. package/lib-es/components/InfoBoxes/container/InfoBoxContainer.js.map +0 -1
  86. package/lib-es/components/InfoBoxes/helpers/build-dynamic-query.js +0 -25
  87. package/lib-es/components/InfoBoxes/helpers/build-dynamic-query.js.map +0 -1
  88. package/lib-es/components/InfoBoxes/hooks/useData.js +0 -37
  89. package/lib-es/components/InfoBoxes/hooks/useData.js.map +0 -1
  90. package/lib-es/components/InfoBoxes/hooks/useInfoBox.js +0 -19
  91. package/lib-es/components/InfoBoxes/hooks/useInfoBox.js.map +0 -1
  92. package/lib-es/components/InfoBoxes/index.js +0 -3
  93. package/lib-es/components/InfoBoxes/index.js.map +0 -1
  94. package/lib-es/components/InfoBoxes/presentational/InfoBox.js +0 -31
  95. package/lib-es/components/InfoBoxes/presentational/InfoBox.js.map +0 -1
  96. package/src/components/EntityManager/Entity/EntitiyNavLinks/EntityNavLinks.js +0 -26
  97. package/src/components/EntityManager/Entity/EntitiyNavLinks/index.js +0 -3
  98. package/src/components/EntityManager/Entity/SideBarRelations/container/CustomSidebarInfoContainer.js +0 -22
  99. package/src/components/EntityManager/Entity/SideBarRelations/helpers/build-dynamic-query.js +0 -33
  100. package/src/components/EntityManager/Entity/SideBarRelations/hooks/useCustomSidebarData.js +0 -28
  101. package/src/components/EntityManager/Entity/SideBarRelations/presentational/CustomSidebarInfo.js +0 -33
  102. package/src/components/InfoBoxes/InfoBoxes.js +0 -24
  103. package/src/components/InfoBoxes/container/InfoBoxContainer.js +0 -22
  104. package/src/components/InfoBoxes/helpers/build-dynamic-query.js +0 -25
  105. package/src/components/InfoBoxes/hooks/useData.js +0 -20
  106. package/src/components/InfoBoxes/hooks/useInfoBox.js +0 -13
  107. package/src/components/InfoBoxes/index.js +0 -3
  108. package/src/components/InfoBoxes/presentational/InfoBox.js +0 -34
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blaze-cms/plugin-data-ui",
3
- "version": "0.131.0-project-admin-customisations.1",
3
+ "version": "0.131.0",
4
4
  "description": "Blaze plugin data ui",
5
5
  "main": "lib/index.js",
6
6
  "module": "lib-es/index.js",
@@ -27,13 +27,12 @@
27
27
  },
28
28
  "license": "GPL-3.0",
29
29
  "dependencies": {
30
- "@blaze-cms/admin-ui-utils": "0.131.0-project-admin-customisations.0",
31
- "@blaze-cms/core-errors": "0.131.0-project-admin-customisations.0",
32
- "@blaze-cms/plugin-render-hooks-ui": "0.131.0-project-admin-customisations.0",
33
- "@blaze-cms/react-form-builder": "0.131.0-project-admin-customisations.1",
34
- "@blaze-cms/react-page-builder": "0.131.0-project-admin-customisations.0",
35
- "@blaze-cms/setup-ui": "0.131.0-project-admin-customisations.0",
36
- "@blaze-cms/versioning-ui": "0.131.0-project-admin-customisations.0",
30
+ "@blaze-cms/admin-ui-utils": "^0.131.0",
31
+ "@blaze-cms/core-errors": "^0.131.0",
32
+ "@blaze-cms/react-form-builder": "^0.131.0",
33
+ "@blaze-cms/react-page-builder": "^0.131.0",
34
+ "@blaze-cms/setup-ui": "^0.131.0",
35
+ "@blaze-cms/versioning-ui": "^0.131.0",
37
36
  "@blaze-react/button": "0.5.19",
38
37
  "@blaze-react/more": "0.5.19",
39
38
  "@blaze-react/multiselect": "0.6.6",
@@ -54,7 +53,7 @@
54
53
  "uuid": "^3.3.3"
55
54
  },
56
55
  "devDependencies": {
57
- "@blaze-cms/core-ui": "0.131.0-project-admin-customisations.0"
56
+ "@blaze-cms/core-ui": "^0.131.0"
58
57
  },
59
58
  "peerDependencies": {
60
59
  "@apollo/client": "3.x",
@@ -66,5 +65,5 @@
66
65
  "lib/*",
67
66
  "lib-es/*"
68
67
  ],
69
- "gitHead": "2d356fae5eb8ddda415ce16557d35c5a1c28ed1b"
68
+ "gitHead": "8448393caa59dd524bd263a07d7bb263550cda13"
70
69
  }
@@ -6,22 +6,31 @@ import { getQuery } from '@blaze-cms/admin-ui-utils';
6
6
  import ListingTable from '../ListingTable/ListingTable';
7
7
  import { withContext } from '../../utils/hoc/withContext';
8
8
 
9
- const EntityDataListing = ({ match }) => {
9
+ const EntityDataListing = ({ match, menuItems }) => {
10
10
  const {
11
11
  params: { entityIdentifier: identifier }
12
12
  } = match;
13
13
 
14
+ const [[selectedMenuItem]] = menuItems
15
+ .map(([_, { items }]) => {
16
+ const item = items.filter(({ uri }) => uri.endsWith(`/${identifier}`));
17
+
18
+ return item.length ? item : null;
19
+ })
20
+ .filter(Boolean);
21
+
14
22
  const { data: { getEntitySchemas = [] } = {} } = useQuery(getQuery('GET_ENTITY_SCHEMA'), {
15
23
  variables: { identifier }
16
24
  });
17
25
 
18
26
  if (!getEntitySchemas.length) return '';
19
27
 
20
- return <ListingTable entitySchema={getEntitySchemas[0]} />;
28
+ return <ListingTable entitySchema={getEntitySchemas[0]} selectedMenuItem={selectedMenuItem} />;
21
29
  };
22
30
 
23
31
  EntityDataListing.propTypes = {
24
- match: PropTypes.object.isRequired
32
+ match: PropTypes.object.isRequired,
33
+ menuItems: PropTypes.array.isRequired
25
34
  };
26
35
 
27
36
  export default withContext(EntityDataListing);
@@ -3,7 +3,6 @@ import React, { useEffect, useState, useRef } from 'react';
3
3
  import { withRouter, Prompt } from 'react-router-dom';
4
4
  import { useApolloClient } from '@apollo/client';
5
5
  import PropTypes from 'prop-types';
6
- import { RenderHook } from '@blaze-cms/plugin-render-hooks-ui';
7
6
  import { getQuery, GET_CURRENT_TAB_ID } from '@blaze-cms/admin-ui-utils';
8
7
  import { FormBuilder, parseFormValues } from '@blaze-cms/react-form-builder';
9
8
  import { DeleteAction, CopyDataFromAction } from '@blaze-cms/admin';
@@ -35,7 +34,6 @@ import {
35
34
  checkFulfilConditions
36
35
  } from '../utils/entity';
37
36
  import useToggle from '../../../utils/hooks/useToggle';
38
- import InfoBoxes from '../../InfoBoxes/InfoBoxes';
39
37
 
40
38
  const Entity = ({
41
39
  formData,
@@ -405,77 +403,68 @@ const Entity = ({
405
403
 
406
404
  return (
407
405
  <div className="page">
408
- <EntityHeader
409
- entityData={entityData}
410
- entityIdentifier={entityIdentifier}
411
- pageTitle={pageTitle}
412
- pageName={pageName}
413
- onSubmit={onSubmit}
414
- handlePublishAndUnpublish={handlePublishAndUnpublish}
415
- isSaveButtonAvailable={isSaveButtonAvailable}
416
- isEnablePublishButton={isEnablePublishButton}
417
- isEnablePreviewButton={isEnablePreviewButton}
418
- toggleCopyModal={setCopyModalStatus}
419
- toggleModal={setModalStatus}
420
- formData={formData}
421
- onViewUrl={onViewUrlHandler}
422
- saveButtonText={saveButtonText}
423
- />
424
- <div className="page-wrapper__content">
425
- <div className="tabs-wrapper tabs-wrapper__tab">
426
- <Prompt when={hasToDisplayPrompt} message={LEAVE_PAGE_MESSAGE} />
427
- {showModal && (
428
- <DeleteAction
429
- onClose={setModalStatus}
430
- deleteAction={onDelete}
431
- itemName={formData.values.name}
432
- />
433
- )}
434
- {copyModalStatus && (
435
- <CopyDataFromAction
436
- onClose={handleCopyDataFromClose}
437
- copyAction={onCopy}
438
- getFormData={getFormData}
439
- />
440
- )}
441
-
442
- <div className="page__content--fixed">
443
- <div className="page__content">
444
- <div className="content">
445
- <RenderHook hookKey={`entity:${action}:main:top`} entity={entity} schema={schema} />
446
- <InfoBoxes id={entity.id} schema={schema} />
447
- <Tabs
448
- enabled={showPageBuilderTabs}
449
- onTabChange={tabId => {
450
- client.writeQuery({
451
- query: GET_CURRENT_TAB_ID,
452
- data: { currentTabId: tabId }
453
- });
454
- setCurrentTabId(tabId);
455
- }}>
456
- <FormBuilder
457
- getIsFormValid={setIsFormValid}
458
- getFormValues={getFormValues}
459
- schema={schema}
460
- data={clonedFormData}
461
- onChange={onChangeFormValues}
462
- shouldCopyData={shouldCopyData}
463
- updateCopyData={updateCopyData}
464
- formValues={formValues}
465
- isNewEntity={isNewEntity}
466
- />
467
- </Tabs>
468
- <RenderHook
469
- hookKey={`entity:${action}:main:bottom`}
470
- entity={entity}
406
+ <Prompt when={hasToDisplayPrompt} message={LEAVE_PAGE_MESSAGE} />
407
+ {showModal && (
408
+ <DeleteAction
409
+ onClose={setModalStatus}
410
+ deleteAction={onDelete}
411
+ itemName={formData.values.name}
412
+ />
413
+ )}
414
+ {copyModalStatus && (
415
+ <CopyDataFromAction
416
+ onClose={handleCopyDataFromClose}
417
+ copyAction={onCopy}
418
+ getFormData={getFormData}
419
+ />
420
+ )}
421
+
422
+ <div className="row row--display-row">
423
+ <div className="column column--three-quarters">
424
+ <EntityHeader
425
+ entityData={entityData}
426
+ entityIdentifier={entityIdentifier}
427
+ pageTitle={pageTitle}
428
+ pageName={pageName}
429
+ onSubmit={onSubmit}
430
+ handlePublishAndUnpublish={handlePublishAndUnpublish}
431
+ isSaveButtonAvailable={isSaveButtonAvailable}
432
+ isEnablePublishButton={isEnablePublishButton}
433
+ isEnablePreviewButton={isEnablePreviewButton}
434
+ toggleCopyModal={setCopyModalStatus}
435
+ toggleModal={setModalStatus}
436
+ formData={formData}
437
+ onViewUrl={onViewUrlHandler}
438
+ saveButtonText={saveButtonText}
439
+ />
440
+
441
+ <div className="page__content">
442
+ <div className="content">
443
+ <Tabs
444
+ enabled={showPageBuilderTabs}
445
+ onTabChange={tabId => {
446
+ client.writeQuery({
447
+ query: GET_CURRENT_TAB_ID,
448
+ data: { currentTabId: tabId }
449
+ });
450
+ setCurrentTabId(tabId);
451
+ }}>
452
+ <FormBuilder
453
+ getIsFormValid={setIsFormValid}
454
+ getFormValues={getFormValues}
471
455
  schema={schema}
456
+ data={clonedFormData}
457
+ onChange={onChangeFormValues}
458
+ shouldCopyData={shouldCopyData}
459
+ updateCopyData={updateCopyData}
460
+ formValues={formValues}
461
+ isNewEntity={isNewEntity}
472
462
  />
473
- </div>
463
+ </Tabs>
474
464
  </div>
475
465
  </div>
476
466
  </div>
477
-
478
- <div className="column column--one-third page-sidebar page-sidebar--relations">
467
+ <div className="column column--one-third">
479
468
  {showSideBarRelations && (
480
469
  <SideBarRelations
481
470
  entity={entity}
@@ -4,23 +4,14 @@ import uuidv1 from 'uuid/v1';
4
4
  import { useApolloClient } from '@apollo/client';
5
5
  import { getQuery } from '@blaze-cms/admin-ui-utils';
6
6
  import { formFieldTypes } from '@blaze-cms/react-form-builder';
7
- import classnames from 'classnames';
7
+ import Badge from '@blaze-react/badge';
8
8
  import { VersionsList } from '@blaze-cms/versioning-ui';
9
- import { PUBLISHED, UNPUBLISHED } from '../../../../constants';
10
- import CustomSidebarInfoContainer from './container/CustomSidebarInfoContainer';
11
- import EntityNavLinks from '../EntitiyNavLinks';
9
+ import { PUBLISHED } from '../../../../constants';
12
10
 
13
11
  const SideBarRelations = ({ schema, onChange, formData, entity }) => {
14
12
  const { relation: RelationComponent } = formFieldTypes;
15
- const {
16
- formattedStatus,
17
- formattedUpdated,
18
- formattedCreated,
19
- formattedPublished,
20
- status
21
- } = formData;
13
+ const { formattedStatus, formattedUpdated, formattedCreated, formattedPublished } = formData;
22
14
  const client = useApolloClient();
23
-
24
15
  const [relationsComponents, setRelationsComponents] = useState(null);
25
16
 
26
17
  useEffect(
@@ -60,50 +51,27 @@ const SideBarRelations = ({ schema, onChange, formData, entity }) => {
60
51
  const { id: itemId } = entity;
61
52
  const { identifier: itemEntity, interfaces } = schema;
62
53
 
63
- const statusClassName = classnames('sidebar__status__badge', {
64
- 'sidebar__status__badge--published': status === PUBLISHED,
65
- 'sidebar__status__badge--unpublished': status === UNPUBLISHED
66
- });
67
-
68
54
  return (
69
55
  <div className="sidebar" data-testid="sideBarRelations-main-div">
70
56
  <div className="sidebar__content">
71
- <div className="sidebar__status">
72
- {formattedCreated && (
73
- <div className="sidebar__top">
74
- <div className="sidebar__status__wrapper">
75
- <b>Status</b>
76
- <span className={statusClassName}>{formattedStatus}</span>
77
- </div>
78
- {formattedStatus === PUBLISHED && (
79
- <p>
80
- {formattedStatus} on: <span> {formattedPublished}</span>
81
- </p>
82
- )}
83
- </div>
84
- )}
85
-
86
- {!schema.displayProperties.adminMainInfoProperty && (
87
- <>
88
- <p>
89
- Created: <span>{formattedCreated}</span>
90
- </p>
91
- <p>
92
- Updated: <span>{formattedUpdated}</span>
93
- </p>
94
- </>
95
- )}
96
-
97
- <CustomSidebarInfoContainer
98
- id={itemId}
99
- schema={schema}
100
- displayProperties={schema.displayProperties}
101
- />
102
- </div>
57
+ {formattedCreated && (
58
+ <div className="sidebar__status">
59
+ {formattedStatus && (
60
+ <Badge type="status" modifiers={formattedStatus}>
61
+ {formattedStatus}
62
+ {formattedStatus === PUBLISHED && `: ${formattedPublished}`}
63
+ </Badge>
64
+ )}
65
+ <p>
66
+ Created: <span>{formattedCreated}</span>
67
+ </p>
68
+ <p>
69
+ Updated: <span>{formattedUpdated}</span>
70
+ </p>
71
+ </div>
72
+ )}
103
73
 
104
74
  <VersionsList itemEntity={itemEntity} itemId={itemId} interfaces={interfaces} />
105
- <EntityNavLinks schema={schema} />
106
-
107
75
  {relationsComponents &&
108
76
  relationsComponents.map(({ id, staticData, schema: entitySchema }) => (
109
77
  <RelationComponent
@@ -3,18 +3,18 @@ import React, { useEffect, useState, Fragment } from 'react';
3
3
  import PropTypes from 'prop-types';
4
4
  import { withRouter, Link } from 'react-router-dom';
5
5
  import More from '@blaze-react/more';
6
+ import { MainContext, useMainContext } from '@blaze-cms/admin-ui-utils';
6
7
  import { PageHeader, DeleteAction } from '@blaze-cms/admin';
7
8
  import { useToasts } from '@blaze-react/toaster';
8
- import { RenderHook } from '@blaze-cms/plugin-render-hooks-ui';
9
9
  import ListingTableContent from './ListingTableContent';
10
10
  import availableActions from '../EntityManager/Entity/actions-handlers';
11
11
  import { fetchData } from './service';
12
- import { populateRows, formatRows, getParsedRowData } from './mappers/populate-rows';
12
+ import { populateRows, formatRows } from './mappers/populate-rows';
13
13
  import { getDefaultQueryParams } from '../../utils/get-default-query-params';
14
14
 
15
15
  const OVER_SCAN_BUFFER = 10;
16
16
 
17
- const ListingTable = ({ match, entitySchema }) => {
17
+ const ListingTable = ({ match, entitySchema, selectedMenuItem }) => {
18
18
  const [tableData, setTableData] = useState({});
19
19
  const [modalStatus, setModalStatus] = useState(false);
20
20
  const [itemToDelete, setItemToDelete] = useState({});
@@ -23,6 +23,7 @@ const ListingTable = ({ match, entitySchema }) => {
23
23
  const [verifiedRanges, setVerifiedRanges] = useState([]);
24
24
  const queryParamsDefault = getDefaultQueryParams({ schema: entitySchema });
25
25
  const [queryParams, setQueryParams] = useState(queryParamsDefault);
26
+ const { menuItems, setMenuItems } = useMainContext(MainContext);
26
27
  const client = useApolloClient();
27
28
  const { addToast } = useToasts();
28
29
 
@@ -46,7 +47,6 @@ const ListingTable = ({ match, entitySchema }) => {
46
47
  entitySchema,
47
48
  rows: data
48
49
  });
49
-
50
50
  setTableData(populatedTable);
51
51
  setPreviousSchema({ id: entitySchema.id });
52
52
  }
@@ -55,7 +55,17 @@ const ListingTable = ({ match, entitySchema }) => {
55
55
  [client, entitySchema, match.url, previousSchema.id, queryParams] // eslint-disable-line react-hooks/exhaustive-deps
56
56
  );
57
57
 
58
- const onCloseCardPrompt = () => null;
58
+ const onCloseCardPrompt = () => {
59
+ const updatedSelectedMenuItem = {
60
+ ...selectedMenuItem,
61
+ isDisplayedPrompt: false
62
+ };
63
+ const [{ header, items }] = menuItems;
64
+ const updatedItems = items.map(
65
+ item => (item.name === selectedMenuItem.name ? updatedSelectedMenuItem : item)
66
+ );
67
+ setMenuItems([{ header, items: updatedItems }]);
68
+ };
59
69
 
60
70
  const toggleModal = item => {
61
71
  setModalStatus(!!item);
@@ -99,19 +109,13 @@ const ListingTable = ({ match, entitySchema }) => {
99
109
  queryParams: sortQueryParams
100
110
  }
101
111
  });
102
- const { columns, isEnquiry } = tableData;
112
+ const { columns } = tableData;
103
113
  const [firstColumn] = columns;
104
114
 
105
115
  setTableData({
106
116
  ...tableData,
107
117
  appliedSort: { [property]: direction },
108
- rows: formatRows({
109
- rows: getParsedRowData(data),
110
- url: match.url,
111
- toggleModal,
112
- firstColumn,
113
- isEnquiry
114
- })
118
+ rows: formatRows({ rows: data, url: match.url, toggleModal, firstColumn })
115
119
  });
116
120
  };
117
121
 
@@ -133,12 +137,7 @@ const ListingTable = ({ match, entitySchema }) => {
133
137
  });
134
138
  const updatedRows = [
135
139
  ...tableData.rows,
136
- ...formatRows({
137
- rows: getParsedRowData(data),
138
- url: match.url,
139
- toggleModal,
140
- isEnquiry: tableData.isEnquiry
141
- })
140
+ ...formatRows({ rows: data, url: match.url, toggleModal })
142
141
  ];
143
142
 
144
143
  setVerifiedRanges([...verifiedRanges, loadIndex]);
@@ -152,7 +151,6 @@ const ListingTable = ({ match, entitySchema }) => {
152
151
  };
153
152
 
154
153
  if (!tableData || !tableData.rows) return 'loading';
155
- const showAddButton = !!tableData.rows.length && !tableData.isEnquiry;
156
154
 
157
155
  return (
158
156
  <div className="page">
@@ -164,7 +162,7 @@ const ListingTable = ({ match, entitySchema }) => {
164
162
  />
165
163
  )}
166
164
  <PageHeader title={entitySchema.displayName} subtitle="">
167
- {showAddButton && (
165
+ {(!selectedMenuItem.isDisplayedPrompt || !!tableData.rows.length) && (
168
166
  <Fragment>
169
167
  <Link
170
168
  data-testid="addEntity"
@@ -183,13 +181,13 @@ const ListingTable = ({ match, entitySchema }) => {
183
181
  </Fragment>
184
182
  )}
185
183
  </PageHeader>
186
- <RenderHook hookKey="entity:listing:main:top" schema={entitySchema} />
187
184
  <ListingTableContent
188
185
  overScanBuffer={OVER_SCAN_BUFFER}
189
186
  onSort={handleSort}
190
187
  onRenderItems={handleRenderedItems}
191
188
  tableData={tableData}
192
189
  onCloseCardPrompt={onCloseCardPrompt}
190
+ selectedMenuItem={selectedMenuItem}
193
191
  scrollToIndex={scrollToIndex}
194
192
  />
195
193
  </div>
@@ -197,7 +195,8 @@ const ListingTable = ({ match, entitySchema }) => {
197
195
  };
198
196
  ListingTable.propTypes = {
199
197
  entitySchema: PropTypes.object.isRequired,
200
- match: PropTypes.object.isRequired
198
+ match: PropTypes.object.isRequired,
199
+ selectedMenuItem: PropTypes.object.isRequired
201
200
  };
202
201
 
203
202
  export default withRouter(ListingTable);
@@ -1,7 +1,8 @@
1
1
  import React from 'react';
2
2
  import Table from '@blaze-react/table';
3
3
  import PropTypes from 'prop-types';
4
- import { withRouter } from 'react-router-dom';
4
+ import { CardPrompt } from '@blaze-cms/admin';
5
+ import { Link, withRouter } from 'react-router-dom';
5
6
 
6
7
  const ListingTableContent = ({
7
8
  tableData,
@@ -16,14 +17,12 @@ const ListingTableContent = ({
16
17
  scrollToIndex
17
18
  }) => {
18
19
  const displayTable = tableData && tableData.rows && !!tableData.rows.length;
19
- const { isEnquiry } = tableData;
20
- const className = `page__content${isEnquiry ? ' array-table' : ''}`;
21
20
 
22
21
  return (
23
22
  <>
24
- {displayTable && (
23
+ {displayTable ? (
25
24
  <>
26
- <div className={className}>
25
+ <div className="page__content">
27
26
  <Table
28
27
  scrollToIndex={scrollToIndex}
29
28
  onSort={onSort}
@@ -31,12 +30,23 @@ const ListingTableContent = ({
31
30
  overScanBuffer={overScanBuffer}
32
31
  onRenderItems={onRenderItems}
33
32
  data={tableData}
34
- checkboxes={!isEnquiry}
33
+ checkboxes
35
34
  onSelect={handleSelect}
36
35
  data-testid="listing-table-content"
37
36
  />
38
37
  </div>
39
38
  </>
39
+ ) : (
40
+ selectedMenuItem.isDisplayedPrompt && (
41
+ <CardPrompt onClose={onCloseCardPrompt} data-testid="card-prompt">
42
+ <Link
43
+ className="button button--rounded button--cta"
44
+ to={`${match.url}/create`}
45
+ data-testid="add-button">
46
+ Add
47
+ </Link>
48
+ </CardPrompt>
49
+ )
40
50
  )}
41
51
  </>
42
52
  );
@@ -45,7 +55,7 @@ const ListingTableContent = ({
45
55
  ListingTableContent.propTypes = {
46
56
  tableData: PropTypes.object.isRequired,
47
57
  onCloseCardPrompt: PropTypes.func.isRequired,
48
- selectedMenuItem: PropTypes.object,
58
+ selectedMenuItem: PropTypes.object.isRequired,
49
59
  match: PropTypes.shape({
50
60
  url: PropTypes.string
51
61
  }).isRequired,
@@ -63,8 +73,7 @@ ListingTableContent.defaultProps = {
63
73
  onClickRow: () => {},
64
74
  overScanBuffer: 0,
65
75
  scrollToIndex: 0,
66
- onRenderItems: () => {},
67
- selectedMenuItem: null
76
+ onRenderItems: () => {}
68
77
  };
69
78
 
70
79
  export default withRouter(ListingTableContent);
@@ -3,22 +3,18 @@ import { Link } from 'react-router-dom';
3
3
  import TableActions from '../TableActions';
4
4
  import { ACTIONS } from '../../../constants';
5
5
 
6
- const formatRows = ({ rows, url, toggleModal, label, firstColumn = 'name', isEnquiry }) =>
6
+ const formatRows = ({ rows, url, toggleModal, label, firstColumn = 'name' }) =>
7
7
  rows.map(data => {
8
8
  const editUrl = `${url}/update/${data.id}`;
9
- const rowProps = {
9
+ return {
10
10
  ...data,
11
11
  [firstColumn]: (
12
12
  <Link to={editUrl} role="button">
13
13
  {data[firstColumn]}
14
14
  </Link>
15
- )
15
+ ),
16
+ actions: <TableActions editUrl={editUrl} data={data} showDeleteModal={toggleModal} />
16
17
  };
17
- if (!isEnquiry)
18
- rowProps.actions = (
19
- <TableActions editUrl={editUrl} data={data} showDeleteModal={toggleModal} />
20
- );
21
- return rowProps;
22
18
  });
23
19
 
24
20
  const getSanitizedColumnLabel = columnProp => {
@@ -32,82 +28,22 @@ const getSanitizedColumnLabel = columnProp => {
32
28
  return sanitizedChar;
33
29
  };
34
30
 
35
- const buildArrayRowContent = rowData => (
36
- <div className="table-row-list">
37
- {rowData.map(rowGroup => (
38
- <div className="table-row-list__group">
39
- {rowGroup.map(({ label, value, url }) => (
40
- <div className="table-row-list__group__item">
41
- <span className="table-row-list__group__item__label"> {label}:</span>
42
- {url ? (
43
- <Link to={url} role="button" className="table-row-list__group__item__value">
44
- {value}
45
- </Link>
46
- ) : (
47
- <span className="table-row-list__group__item__value"> {value}</span>
48
- )}
49
- </div>
50
- ))}
51
- </div>
52
- ))}
53
- </div>
54
- );
55
-
56
- const buildArrayRowData = rowData => {
57
- const dataGroups = [];
58
- const groups = Math.ceil(rowData.length / 3) || 1;
59
- for (let index = 0; index < groups; index += 1) {
60
- const currentStart = index * groups;
61
- dataGroups[index] = rowData.slice(currentStart, currentStart + 3);
62
- }
63
-
64
- return buildArrayRowContent(dataGroups);
65
- };
66
-
67
- const getParsedRowData = rows =>
68
- rows.map(rowData =>
69
- Object.keys(rowData).reduce((acc, key) => {
70
- const parsedData = Array.isArray(rowData[key])
71
- ? buildArrayRowData(rowData[key])
72
- : rowData[key];
73
- return { ...acc, [key]: parsedData };
74
- }, {})
75
- );
76
-
77
- const getColumnsAndLabels = (listingProperties, allProperties, rows) => {
78
- const columns = [];
79
- const labels = {};
80
-
81
- listingProperties.forEach(listingProperty => {
82
- const propKey = listingProperty.includes(' ') ? listingProperty.split(' ')[0] : listingProperty;
83
- const { label } = allProperties[propKey] || {};
84
- columns.push(propKey);
85
- labels[propKey] = label || getSanitizedColumnLabel(propKey);
86
- });
87
- const parsedRowData = getParsedRowData(rows);
88
-
89
- return { columns, labels, parsedRowData };
31
+ const getColumnLabels = (listingProperties, properties, dynamicProperties) => {
32
+ const allProperties = { ...properties, ...dynamicProperties };
33
+ return listingProperties.reduce((acc, listingProperty) => {
34
+ const label = allProperties[listingProperty].label || getSanitizedColumnLabel(listingProperty);
35
+ return { ...acc, ...{ [listingProperty]: label } };
36
+ }, {});
90
37
  };
91
38
 
92
39
  const populateRows = ({ toggleModal, url, entitySchema, rows }) => {
93
- const {
94
- id: schemaId,
95
- listingProperties,
96
- properties,
97
- dynamicProperties = {},
98
- formProperties
99
- } = entitySchema;
100
-
101
- const isEnquiry = schemaId === 'enquiry';
102
- const columnOptions = !isEnquiry ? [...listingProperties, ACTIONS] : [...listingProperties];
103
-
104
- const allProperties = { ...properties, ...dynamicProperties };
105
- const { columns, labels, parsedRowData } = getColumnsAndLabels(
106
- columnOptions,
107
- allProperties,
108
- rows
109
- );
40
+ const { listingProperties, properties, dynamicProperties = {}, formProperties } = entitySchema;
41
+ const columns = [...listingProperties, ACTIONS];
110
42
  const [firstColumn] = columns;
43
+ const labels = {
44
+ ...getColumnLabels(listingProperties, properties, dynamicProperties),
45
+ [ACTIONS]: ACTIONS
46
+ };
111
47
 
112
48
  return {
113
49
  identification: 'id',
@@ -115,9 +51,8 @@ const populateRows = ({ toggleModal, url, entitySchema, rows }) => {
115
51
  columns,
116
52
  labels,
117
53
  orderBy: [...formProperties],
118
- rows: formatRows({ firstColumn, rows: parsedRowData, url, toggleModal, isEnquiry }),
119
- isEnquiry
54
+ rows: formatRows({ firstColumn, rows, url, toggleModal })
120
55
  };
121
56
  };
122
57
 
123
- export { populateRows, formatRows, getParsedRowData };
58
+ export { populateRows, formatRows };