From 16d2b4dc6d69a6eea25c8bbe75e40b8cf88fb7ed Mon Sep 17 00:00:00 2001 From: soupette Date: Mon, 13 Sep 2021 07:52:06 +0200 Subject: [PATCH] Created DynamicTable component Signed-off-by: soupette --- .../components/DynamicTable/index.js | 54 +++++++++++++++++++ .../content-manager/pages/ListView/index.js | 37 ++++++------- 2 files changed, 69 insertions(+), 22 deletions(-) create mode 100644 packages/core/admin/admin/src/content-manager/components/DynamicTable/index.js diff --git a/packages/core/admin/admin/src/content-manager/components/DynamicTable/index.js b/packages/core/admin/admin/src/content-manager/components/DynamicTable/index.js new file mode 100644 index 0000000000..c2eada9575 --- /dev/null +++ b/packages/core/admin/admin/src/content-manager/components/DynamicTable/index.js @@ -0,0 +1,54 @@ +import React, { useMemo } from 'react'; +import PropTypes from 'prop-types'; +import { DynamicTable as Table, useStrapiApp } from '@strapi/helper-plugin'; +import { INJECT_COLUMN_IN_TABLE } from '../../../exposedHooks'; + +const DynamicTable = ({ canDelete, contentTypeName, isLoading, layout, rows }) => { + const { runHookWaterfall } = useStrapiApp(); + + const tableHeaders = useMemo(() => { + const headers = runHookWaterfall(INJECT_COLUMN_IN_TABLE, { + displayedHeaders: layout.contentType.layouts.list, + layout, + }); + + return headers.displayedHeaders; + }, [runHookWaterfall, layout]); + + return ( + + {/* TODO */} +
+ ); +}; + +DynamicTable.propTypes = { + canDelete: PropTypes.bool.isRequired, + contentTypeName: PropTypes.string.isRequired, + isLoading: PropTypes.bool.isRequired, + layout: PropTypes.exact({ + components: PropTypes.object.isRequired, + contentType: PropTypes.shape({ + attributes: PropTypes.object.isRequired, + metadatas: PropTypes.object.isRequired, + info: PropTypes.shape({ label: PropTypes.string.isRequired }).isRequired, + layouts: PropTypes.shape({ + list: PropTypes.array.isRequired, + editRelations: PropTypes.array, + }).isRequired, + options: PropTypes.object.isRequired, + settings: PropTypes.object.isRequired, + }).isRequired, + }).isRequired, + rows: PropTypes.array.isRequired, +}; + +export default DynamicTable; diff --git a/packages/core/admin/admin/src/content-manager/pages/ListView/index.js b/packages/core/admin/admin/src/content-manager/pages/ListView/index.js index 78b201bc4e..b2ac498ea3 100644 --- a/packages/core/admin/admin/src/content-manager/pages/ListView/index.js +++ b/packages/core/admin/admin/src/content-manager/pages/ListView/index.js @@ -1,4 +1,4 @@ -import React, { memo, useCallback, useEffect, useMemo, useRef } from 'react'; +import React, { memo, useCallback, useEffect, useRef } from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import { bindActionCreators, compose } from 'redux'; @@ -12,7 +12,7 @@ import { useHistory, useLocation } from 'react-router-dom'; import isEqual from 'react-fast-compare'; import { stringify } from 'qs'; import { - DynamicTable, + // DynamicTable, NoPermissions, // CheckPermissions, // PopUpWarning, @@ -20,7 +20,6 @@ import { useQueryParams, useNotification, useRBACProvider, - useStrapiApp, useTracking, } from '@strapi/helper-plugin'; import { Main } from '@strapi/parts/Main'; @@ -31,7 +30,7 @@ import Add from '@strapi/icons/Add'; import axios from 'axios'; import { axiosInstance } from '../../../core/utils'; // import { InjectionZone } from '../../../shared/components'; -import { INJECT_COLUMN_IN_TABLE } from '../../../exposedHooks'; +import DynamicTable from '../../components/DynamicTable'; // import permissions from '../../../permissions'; import { // formatFiltersFromQuery, @@ -92,7 +91,6 @@ function ListView({ // toggleModalDelete, // toggleModalDeleteAll, data, - displayedHeaders, getData, getDataSucceeded, isLoading, @@ -109,7 +107,7 @@ function ListView({ // // settings: { bulkable: isBulkable, filterable: isFilterable, searchable: isSearchable }, // }, // } = layout; - console.log({ data }); + const toggleNotification = useNotification(); const { trackUsage } = useTracking(); const { refetchPermissions } = useRBACProvider(); @@ -119,13 +117,13 @@ function ListView({ useFocusWhenNavigate(); - const { runHookWaterfall } = useStrapiApp(); + // const { runHookWaterfall } = useStrapiApp(); - const tableHeaders = useMemo(() => { - const headers = runHookWaterfall(INJECT_COLUMN_IN_TABLE, { displayedHeaders, layout }); + // const tableHeaders = useMemo(() => { + // const headers = runHookWaterfall(INJECT_COLUMN_IN_TABLE, { displayedHeaders, layout }); - return headers.displayedHeaders; - }, [runHookWaterfall, displayedHeaders, layout]); + // return headers.displayedHeaders; + // }, [runHookWaterfall, displayedHeaders, layout]); // const [{ query }, setQuery] = useQueryParams(); const [{ query }] = useQueryParams(); @@ -139,6 +137,7 @@ function ListView({ // const [idToDelete, setIdToDelete] = useState(null); const contentType = layout.contentType; const hasDraftAndPublish = get(contentType, 'options.draftAndPublish', false); + // TODO // const allAllowedHeaders = useMemo(() => getAllAllowedHeaders(attributes), [attributes]); // const filters = useMemo(() => { @@ -148,10 +147,6 @@ function ListView({ // const sort = query.sort; // const _q = query._q || ''; - // const firstSortableHeader = useMemo(() => getFirstSortableHeader(displayedHeaders), [ - // displayedHeaders, - // ]); - // Using a ref to avoid requests being fired multiple times on slug on change // We need it because the hook as mulitple dependencies so it may run before the permissions have checked const requestUrlRef = useRef(''); @@ -399,13 +394,12 @@ function ListView({ {canRead ? ( {/* TODO */} @@ -568,7 +562,6 @@ ListView.propTypes = { canDelete: PropTypes.bool.isRequired, canRead: PropTypes.bool.isRequired, // canUpdate: PropTypes.bool.isRequired, - displayedHeaders: PropTypes.array.isRequired, data: PropTypes.array.isRequired, // didDeleteData: PropTypes.bool.isRequired, // entriesToDelete: PropTypes.array.isRequired,