@blaze-cms/plugin-data-ui 0.131.0-project-admin-customisations.0 → 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.
- package/CHANGELOG.md +2 -37
- package/README.md +0 -42
- package/lib/components/EntityDataListing/EntityDataListing.js +24 -3
- package/lib/components/EntityDataListing/EntityDataListing.js.map +1 -1
- package/lib/components/EntityManager/Entity/Entity.js +17 -32
- package/lib/components/EntityManager/Entity/Entity.js.map +1 -1
- package/lib/components/EntityManager/Entity/SideBarRelations/index.js +7 -23
- package/lib/components/EntityManager/Entity/SideBarRelations/index.js.map +1 -1
- package/lib/components/ListingTable/ListingTable.js +33 -19
- package/lib/components/ListingTable/ListingTable.js.map +1 -1
- package/lib/components/ListingTable/ListingTableContent/ListingTableContent.js +14 -9
- package/lib/components/ListingTable/ListingTableContent/ListingTableContent.js.map +1 -1
- package/lib/components/ListingTable/mappers/populate-rows.js +26 -92
- package/lib/components/ListingTable/mappers/populate-rows.js.map +1 -1
- package/lib/index.js +11 -3
- package/lib/index.js.map +1 -1
- package/lib/utils/add-content-menu-items.js +13 -64
- package/lib/utils/add-content-menu-items.js.map +1 -1
- package/lib-es/components/EntityDataListing/EntityDataListing.js +14 -3
- package/lib-es/components/EntityDataListing/EntityDataListing.js.map +1 -1
- package/lib-es/components/EntityManager/Entity/Entity.js +17 -32
- package/lib-es/components/EntityManager/Entity/Entity.js.map +1 -1
- package/lib-es/components/EntityManager/Entity/SideBarRelations/index.js +8 -24
- package/lib-es/components/EntityManager/Entity/SideBarRelations/index.js.map +1 -1
- package/lib-es/components/ListingTable/ListingTable.js +32 -19
- package/lib-es/components/ListingTable/ListingTable.js.map +1 -1
- package/lib-es/components/ListingTable/ListingTableContent/ListingTableContent.js +15 -12
- package/lib-es/components/ListingTable/ListingTableContent/ListingTableContent.js.map +1 -1
- package/lib-es/components/ListingTable/mappers/populate-rows.js +24 -76
- package/lib-es/components/ListingTable/mappers/populate-rows.js.map +1 -1
- package/lib-es/index.js +9 -1
- package/lib-es/index.js.map +1 -1
- package/lib-es/utils/add-content-menu-items.js +5 -49
- package/lib-es/utils/add-content-menu-items.js.map +1 -1
- package/package.json +9 -10
- package/src/components/EntityDataListing/EntityDataListing.js +12 -3
- package/src/components/EntityManager/Entity/Entity.js +57 -68
- package/src/components/EntityManager/Entity/SideBarRelations/index.js +19 -51
- package/src/components/ListingTable/ListingTable.js +22 -23
- package/src/components/ListingTable/ListingTableContent/ListingTableContent.js +18 -9
- package/src/components/ListingTable/mappers/populate-rows.js +18 -83
- package/src/index.js +8 -1
- package/src/utils/add-content-menu-items.js +3 -45
- package/lib/components/EntityManager/Entity/EntitiyNavLinks/EntityNavLinks.js +0 -39
- package/lib/components/EntityManager/Entity/EntitiyNavLinks/EntityNavLinks.js.map +0 -1
- package/lib/components/EntityManager/Entity/EntitiyNavLinks/index.js +0 -12
- package/lib/components/EntityManager/Entity/EntitiyNavLinks/index.js.map +0 -1
- package/lib/components/EntityManager/Entity/SideBarRelations/container/CustomSidebarInfoContainer.js +0 -44
- package/lib/components/EntityManager/Entity/SideBarRelations/container/CustomSidebarInfoContainer.js.map +0 -1
- package/lib/components/EntityManager/Entity/SideBarRelations/helpers/build-dynamic-query.js +0 -32
- package/lib/components/EntityManager/Entity/SideBarRelations/helpers/build-dynamic-query.js.map +0 -1
- package/lib/components/EntityManager/Entity/SideBarRelations/hooks/useCustomSidebarData.js +0 -45
- package/lib/components/EntityManager/Entity/SideBarRelations/hooks/useCustomSidebarData.js.map +0 -1
- package/lib/components/EntityManager/Entity/SideBarRelations/presentational/CustomSidebarInfo.js +0 -38
- package/lib/components/EntityManager/Entity/SideBarRelations/presentational/CustomSidebarInfo.js.map +0 -1
- package/lib/components/InfoBoxes/InfoBoxes.js +0 -36
- package/lib/components/InfoBoxes/InfoBoxes.js.map +0 -1
- package/lib/components/InfoBoxes/container/InfoBoxContainer.js +0 -44
- package/lib/components/InfoBoxes/container/InfoBoxContainer.js.map +0 -1
- package/lib/components/InfoBoxes/helpers/build-dynamic-query.js +0 -25
- package/lib/components/InfoBoxes/helpers/build-dynamic-query.js.map +0 -1
- package/lib/components/InfoBoxes/hooks/useData.js +0 -42
- package/lib/components/InfoBoxes/hooks/useData.js.map +0 -1
- package/lib/components/InfoBoxes/hooks/useInfoBox.js +0 -26
- package/lib/components/InfoBoxes/hooks/useInfoBox.js.map +0 -1
- package/lib/components/InfoBoxes/index.js +0 -12
- package/lib/components/InfoBoxes/index.js.map +0 -1
- package/lib/components/InfoBoxes/presentational/InfoBox.js +0 -46
- package/lib/components/InfoBoxes/presentational/InfoBox.js.map +0 -1
- package/lib-es/components/EntityManager/Entity/EntitiyNavLinks/EntityNavLinks.js +0 -30
- package/lib-es/components/EntityManager/Entity/EntitiyNavLinks/EntityNavLinks.js.map +0 -1
- package/lib-es/components/EntityManager/Entity/EntitiyNavLinks/index.js +0 -3
- package/lib-es/components/EntityManager/Entity/EntitiyNavLinks/index.js.map +0 -1
- package/lib-es/components/EntityManager/Entity/SideBarRelations/container/CustomSidebarInfoContainer.js +0 -30
- package/lib-es/components/EntityManager/Entity/SideBarRelations/container/CustomSidebarInfoContainer.js.map +0 -1
- package/lib-es/components/EntityManager/Entity/SideBarRelations/helpers/build-dynamic-query.js +0 -26
- package/lib-es/components/EntityManager/Entity/SideBarRelations/helpers/build-dynamic-query.js.map +0 -1
- package/lib-es/components/EntityManager/Entity/SideBarRelations/hooks/useCustomSidebarData.js +0 -39
- package/lib-es/components/EntityManager/Entity/SideBarRelations/hooks/useCustomSidebarData.js.map +0 -1
- package/lib-es/components/EntityManager/Entity/SideBarRelations/presentational/CustomSidebarInfo.js +0 -24
- package/lib-es/components/EntityManager/Entity/SideBarRelations/presentational/CustomSidebarInfo.js.map +0 -1
- package/lib-es/components/InfoBoxes/InfoBoxes.js +0 -28
- package/lib-es/components/InfoBoxes/InfoBoxes.js.map +0 -1
- package/lib-es/components/InfoBoxes/container/InfoBoxContainer.js +0 -30
- package/lib-es/components/InfoBoxes/container/InfoBoxContainer.js.map +0 -1
- package/lib-es/components/InfoBoxes/helpers/build-dynamic-query.js +0 -25
- package/lib-es/components/InfoBoxes/helpers/build-dynamic-query.js.map +0 -1
- package/lib-es/components/InfoBoxes/hooks/useData.js +0 -37
- package/lib-es/components/InfoBoxes/hooks/useData.js.map +0 -1
- package/lib-es/components/InfoBoxes/hooks/useInfoBox.js +0 -19
- package/lib-es/components/InfoBoxes/hooks/useInfoBox.js.map +0 -1
- package/lib-es/components/InfoBoxes/index.js +0 -3
- package/lib-es/components/InfoBoxes/index.js.map +0 -1
- package/lib-es/components/InfoBoxes/presentational/InfoBox.js +0 -31
- package/lib-es/components/InfoBoxes/presentational/InfoBox.js.map +0 -1
- package/src/components/EntityManager/Entity/EntitiyNavLinks/EntityNavLinks.js +0 -26
- package/src/components/EntityManager/Entity/EntitiyNavLinks/index.js +0 -3
- package/src/components/EntityManager/Entity/SideBarRelations/container/CustomSidebarInfoContainer.js +0 -22
- package/src/components/EntityManager/Entity/SideBarRelations/helpers/build-dynamic-query.js +0 -33
- package/src/components/EntityManager/Entity/SideBarRelations/hooks/useCustomSidebarData.js +0 -28
- package/src/components/EntityManager/Entity/SideBarRelations/presentational/CustomSidebarInfo.js +0 -33
- package/src/components/InfoBoxes/InfoBoxes.js +0 -24
- package/src/components/InfoBoxes/container/InfoBoxContainer.js +0 -22
- package/src/components/InfoBoxes/helpers/build-dynamic-query.js +0 -25
- package/src/components/InfoBoxes/hooks/useData.js +0 -20
- package/src/components/InfoBoxes/hooks/useInfoBox.js +0 -13
- package/src/components/InfoBoxes/index.js +0 -3
- 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
|
|
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
|
|
31
|
-
"@blaze-cms/core-errors": "0.131.0
|
|
32
|
-
"@blaze-cms/
|
|
33
|
-
"@blaze-cms/react-
|
|
34
|
-
"@blaze-cms/
|
|
35
|
-
"@blaze-cms/
|
|
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
|
|
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": "
|
|
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
|
-
<
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
<div className="
|
|
425
|
-
<div className="
|
|
426
|
-
<
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
}
|
|
456
|
-
|
|
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
|
-
</
|
|
463
|
+
</Tabs>
|
|
474
464
|
</div>
|
|
475
465
|
</div>
|
|
476
466
|
</div>
|
|
477
|
-
|
|
478
|
-
<div className="column column--one-third page-sidebar">
|
|
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
|
|
7
|
+
import Badge from '@blaze-react/badge';
|
|
8
8
|
import { VersionsList } from '@blaze-cms/versioning-ui';
|
|
9
|
-
import { PUBLISHED
|
|
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
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
<
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
</
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
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
|
|
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 = () =>
|
|
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
|
|
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
|
-
{
|
|
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 {
|
|
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=
|
|
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
|
|
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'
|
|
6
|
+
const formatRows = ({ rows, url, toggleModal, label, firstColumn = 'name' }) =>
|
|
7
7
|
rows.map(data => {
|
|
8
8
|
const editUrl = `${url}/update/${data.id}`;
|
|
9
|
-
|
|
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
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
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
|
-
|
|
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
|
|
119
|
-
isEnquiry
|
|
54
|
+
rows: formatRows({ firstColumn, rows, url, toggleModal })
|
|
120
55
|
};
|
|
121
56
|
};
|
|
122
57
|
|
|
123
|
-
export { populateRows, formatRows
|
|
58
|
+
export { populateRows, formatRows };
|