From 08fa129884c74f0910ebed1ee9e041f0e7170b30 Mon Sep 17 00:00:00 2001 From: HichamELBSI Date: Wed, 25 Nov 2020 18:56:31 +0100 Subject: [PATCH] Fix PR feedback Signed-off-by: HichamELBSI --- .../admin/src/components/CustomTable/Row.js | 35 ++++++------------- .../src/components/CustomTable/RowCell.js | 34 ++++++++++++++++++ .../components/RelationPreviewList/index.js | 31 ++++++++-------- .../admin/src/containers/ListView/reducer.js | 10 +++++- .../utils/formatLayouts.js | 11 +++++- 5 files changed, 80 insertions(+), 41 deletions(-) create mode 100644 packages/strapi-plugin-content-manager/admin/src/components/CustomTable/RowCell.js diff --git a/packages/strapi-plugin-content-manager/admin/src/components/CustomTable/Row.js b/packages/strapi-plugin-content-manager/admin/src/components/CustomTable/Row.js index 2b55ebff60..bd7e20f747 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/CustomTable/Row.js +++ b/packages/strapi-plugin-content-manager/admin/src/components/CustomTable/Row.js @@ -9,9 +9,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { useListView } from '../../hooks'; import dateFormats from '../../utils/dateFormats'; import CustomInputCheckbox from '../CustomInputCheckbox'; -import MediaPreviewList from '../MediaPreviewList'; -import RelationPreviewList from '../RelationPreviewList'; -import { ActionContainer, Truncate, Truncated } from './styledComponents'; +import { ActionContainer } from './styledComponents'; +import RowCell from './RowCell'; /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */ @@ -121,27 +120,15 @@ function Row({ canCreate, canDelete, canUpdate, isBulkable, row, headers, goTo } /> )} - {headers.map(({ key, name, fieldSchema: { type }, cellFormatter }) => { - const isMedia = type === 'media'; - const isRelation = type === 'relation'; - - return ( - - {isMedia && } - {cellFormatter && cellFormatter(row)} - {!isMedia && !isRelation && !cellFormatter && ( - - - {memoizedDisplayedValue(name, type)} - - - )} - {isRelation && ( - - )} - - ); - })} + {headers.map(({ key, name, fieldSchema: { type }, cellFormatter, metadatas }) => ( + + {cellFormatter ? ( + cellFormatter(row) + ) : ( + + )} + + ))} diff --git a/packages/strapi-plugin-content-manager/admin/src/components/CustomTable/RowCell.js b/packages/strapi-plugin-content-manager/admin/src/components/CustomTable/RowCell.js new file mode 100644 index 0000000000..83f5ade3ac --- /dev/null +++ b/packages/strapi-plugin-content-manager/admin/src/components/CustomTable/RowCell.js @@ -0,0 +1,34 @@ +import React, { memo } from 'react'; +import PropTypes from 'prop-types'; +import MediaPreviewList from '../MediaPreviewList'; +import RelationPreviewList from '../RelationPreviewList'; +import { Truncate, Truncated } from './styledComponents'; + +const RowCell = ({ metadatas, type, value }) => { + if (type === 'media') { + return ; + } + + if (type === 'relation') { + return ; + } + + return ( + + {value} + + ); +}; + +RowCell.defaultProps = { + type: null, + value: null, +}; + +RowCell.propTypes = { + metadatas: PropTypes.object.isRequired, + type: PropTypes.string, + value: PropTypes.any, +}; + +export default memo(RowCell); diff --git a/packages/strapi-plugin-content-manager/admin/src/components/RelationPreviewList/index.js b/packages/strapi-plugin-content-manager/admin/src/components/RelationPreviewList/index.js index a7ad522c28..2aee5097ee 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/RelationPreviewList/index.js +++ b/packages/strapi-plugin-content-manager/admin/src/components/RelationPreviewList/index.js @@ -1,41 +1,42 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { get } from 'lodash'; import { Flex, Padded, Count } from '@buffetjs/core'; import { useIntl } from 'react-intl'; import { getTrad } from '../../utils'; -import { useContentTypeLayout } from '../../hooks'; import { Truncate, Truncated } from '../CustomTable/styledComponents'; import CountWrapper from './CountWrapper'; -const RelationPreviewList = ({ name, value }) => { +const RelationPreviewList = ({ metadatas: { mainField, relationType }, value }) => { const { formatMessage } = useIntl(); - const { contentType } = useContentTypeLayout(); - const mainField = get(contentType, ['metadatas', name, 'edit', 'mainField'], ''); + const isSingle = ['oneWay', 'oneToOne', 'manyToOne'].includes(relationType); - return Array.isArray(value) ? ( + if (isSingle) { + return ( + + {value ? value[mainField] : '-'} + + ); + } + + const size = value ? value.length : 0; + + return ( - + {formatMessage({ id: getTrad( - value.length > 1 - ? 'containers.ListPage.items.plural' - : 'containers.ListPage.items.singular' + size > 1 ? 'containers.ListPage.items.plural' : 'containers.ListPage.items.singular' ), })} - ) : ( - - {value[mainField] || '-'} - ); }; @@ -44,7 +45,7 @@ RelationPreviewList.defaultProps = { }; RelationPreviewList.propTypes = { - name: PropTypes.string.isRequired, + metadatas: PropTypes.object.isRequired, value: PropTypes.oneOfType([PropTypes.array, PropTypes.object]), }; diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/ListView/reducer.js b/packages/strapi-plugin-content-manager/admin/src/containers/ListView/reducer.js index 8aa43d75bc..418e1b72ea 100644 --- a/packages/strapi-plugin-content-manager/admin/src/containers/ListView/reducer.js +++ b/packages/strapi-plugin-content-manager/admin/src/containers/ListView/reducer.js @@ -88,10 +88,18 @@ const listViewReducer = (state = initialState, action) => if (!value) { const { metadatas, attributes } = state.contentType; + let metas = metadatas[name].list; + + if (attributes[name].type === 'relation') { + const mainField = metadatas[name].edit.mainField; + const { relationType } = attributes[name]; + metas = { ...metas, mainField, relationType }; + } + drafState.displayedHeaders.push({ name, fieldSchema: attributes[name], - metadatas: metadatas[name].list, + metadatas: metas, key: `__${name}_key__`, }); } else { diff --git a/packages/strapi-plugin-content-manager/admin/src/hooks/useFetchContentTypeLayout/utils/formatLayouts.js b/packages/strapi-plugin-content-manager/admin/src/hooks/useFetchContentTypeLayout/utils/formatLayouts.js index 68f0c88c58..9d7a6d9d87 100644 --- a/packages/strapi-plugin-content-manager/admin/src/hooks/useFetchContentTypeLayout/utils/formatLayouts.js +++ b/packages/strapi-plugin-content-manager/admin/src/hooks/useFetchContentTypeLayout/utils/formatLayouts.js @@ -82,7 +82,16 @@ const formatLayoutWithMetas = (obj, ctUid, models) => { const formatListLayoutWithMetas = obj => { const formatted = obj.layouts.list.reduce((acc, current) => { const fieldSchema = get(obj, ['attributes', current], {}); - const metadatas = get(obj, ['metadatas', current, 'list'], {}); + let metadatas = get(obj, ['metadatas', current, 'list'], {}); + + const type = fieldSchema.type; + + if (type === 'relation') { + metadatas = { + ...metadatas, + mainField: get(obj, ['metadatas', current, 'edit', 'mainField'], 'id'), + }; + } acc.push({ key: `__${current}_key__`, name: current, fieldSchema, metadatas });