diff --git a/packages/strapi-plugin-content-manager/admin/src/components/DisplayedFieldsDropdown/DropdownItem.js b/packages/strapi-plugin-content-manager/admin/src/components/DisplayedFieldsDropdown/DropdownItem.js new file mode 100644 index 0000000000..4ffe8e0e55 --- /dev/null +++ b/packages/strapi-plugin-content-manager/admin/src/components/DisplayedFieldsDropdown/DropdownItem.js @@ -0,0 +1,26 @@ +import React, { memo } from 'react'; +import PropTypes from 'prop-types'; +import InputCheckbox from '../InputCheckbox'; +import ItemDropdown from './ItemDropdownReset'; + +const DropdownItem = ({ name, onChange, value }) => { + const handleChange = () => { + onChange({ name, value }); + }; + + return ( + +
+ +
+
+ ); +}; + +DropdownItem.propTypes = { + name: PropTypes.string.isRequired, + onChange: PropTypes.func.isRequired, + value: PropTypes.bool.isRequired, +}; + +export default memo(DropdownItem); diff --git a/packages/strapi-plugin-content-manager/admin/src/components/DisplayedFieldsDropdown/index.js b/packages/strapi-plugin-content-manager/admin/src/components/DisplayedFieldsDropdown/index.js index b3c893505b..4cdedfd566 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/DisplayedFieldsDropdown/index.js +++ b/packages/strapi-plugin-content-manager/admin/src/components/DisplayedFieldsDropdown/index.js @@ -4,25 +4,19 @@ import { ButtonDropdown } from 'reactstrap'; import { FormattedMessage } from 'react-intl'; import { LayoutIcon, useGlobalContext } from 'strapi-helper-plugin'; import pluginId from '../../pluginId'; -import InputCheckbox from '../InputCheckbox'; import DropdownItemLink from './DropdownItemLink'; import DropdownWrapper from './DropdownWrapper'; -import ItemDropdown from './ItemDropdown'; import ItemDropdownReset from './ItemDropdownReset'; import LayoutWrapper from './LayoutWrapper'; import MenuDropdown from './MenuDropdown'; import Toggle from './Toggle'; +import DropdownItem from './DropdownItem'; const DisplayedFieldsDropdown = ({ displayedHeaders, items, onChange, onClickReset, slug }) => { const { emitEvent } = useGlobalContext(); const emitEventRef = useRef(emitEvent); - const [isOpen, setIsOpen] = useState(false); - const handleChange = ({ target: { name, checked } }) => { - onChange({ name, value: !checked }); - }; - const getCheckboxValue = checkboxName => { return displayedHeaders.findIndex(({ name }) => name === checkboxName) !== -1; }; @@ -71,15 +65,12 @@ const DisplayedFieldsDropdown = ({ displayedHeaders, items, onChange, onClickRes {items.map(headerName => { return ( - -
- -
-
+ ); })} diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/ListView/index.js b/packages/strapi-plugin-content-manager/admin/src/containers/ListView/index.js index 2bc6e3acba..02279e4e4a 100644 --- a/packages/strapi-plugin-content-manager/admin/src/containers/ListView/index.js +++ b/packages/strapi-plugin-content-manager/admin/src/containers/ListView/index.js @@ -172,8 +172,12 @@ function ListView({ const handleChangeListLabels = useCallback( ({ name, value }) => { // Display a notification if trying to remove the last displayed field + if (value && displayedHeaders.length === 1) { - strapi.notification.error('content-manager.notification.error.displayedFields'); + strapi.notification.toggle({ + type: 'warning', + message: { id: 'content-manager.notification.error.displayedFields' }, + }); } else { emitEventRef.current('didChangeDisplayedFields'); diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/ListView/utils/getFirstSortableHeader.js b/packages/strapi-plugin-content-manager/admin/src/containers/ListView/utils/getFirstSortableHeader.js index ec0a1d11ec..b233871504 100644 --- a/packages/strapi-plugin-content-manager/admin/src/containers/ListView/utils/getFirstSortableHeader.js +++ b/packages/strapi-plugin-content-manager/admin/src/containers/ListView/utils/getFirstSortableHeader.js @@ -2,8 +2,13 @@ import { get } from 'lodash'; const getFirstSortableHeader = headers => { const matched = headers.find(header => header.metadatas.sortable === true); + const fieldName = get(matched, 'name', 'id'); - return get(matched, 'name', 'id'); + if (get(matched, 'fieldSchema.type', '') === 'relation') { + return `${fieldName}.${matched.metadatas.mainField}`; + } + + return fieldName; }; export default getFirstSortableHeader; diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/ListView/utils/tests/getFirstSortableHeader.test.js b/packages/strapi-plugin-content-manager/admin/src/containers/ListView/utils/tests/getFirstSortableHeader.test.js index d5d61be394..81f99e82f9 100644 --- a/packages/strapi-plugin-content-manager/admin/src/containers/ListView/utils/tests/getFirstSortableHeader.test.js +++ b/packages/strapi-plugin-content-manager/admin/src/containers/ListView/utils/tests/getFirstSortableHeader.test.js @@ -23,4 +23,24 @@ describe('CONTENT MANAGER | containers | ListView | utils | getFirstSortableHead expect(getFirstSortableHeader(headers)).toBe('two'); }); + + it('should return the first sortable element if it is a relation', () => { + const headers = [ + { + name: 'un', + metadatas: { sortable: false }, + }, + { + name: 'two', + fieldSchema: { type: 'relation' }, + metadatas: { sortable: true, mainField: 'test' }, + }, + { + name: 'three', + metadatas: { sortable: true }, + }, + ]; + + expect(getFirstSortableHeader(headers)).toBe('two.test'); + }); });