diff --git a/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/Settings.js b/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/Settings.js index 169c066b85..dd27e8c9a1 100644 --- a/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/Settings.js +++ b/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/Settings.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; -import { get } from 'lodash'; +import get from 'lodash/get'; import { useIntl } from 'react-intl'; import { Row } from '@strapi/parts/Row'; import { Grid, GridItem } from '@strapi/parts/Grid'; @@ -99,7 +99,7 @@ const Settings = ({ modifiedData, onChange, sortOptions }) => { defaultMessage: 'Note: You can override this value in the Collection Type settings page.', })} - onChange={e => onChange({ target: { name: 'settings.pageSize', value: e } })} + onChange={value => onChange({ target: { name: 'settings.pageSize', value } })} name="settings.pageSize" value={get(modifiedData, 'settings.pageSize', '')} > @@ -116,7 +116,7 @@ const Settings = ({ modifiedData, onChange, sortOptions }) => { id: 'content-manager.form.Input.defaultSort', defaultMessage: 'Default sort attribute', })} - onChange={e => onChange({ target: { name: 'settings.defaultSortBy', value: e } })} + onChange={value => onChange({ target: { name: 'settings.defaultSortBy', value } })} name="settings.defaultSortBy" value={get(modifiedData, 'settings.defaultSortBy', '')} > @@ -133,7 +133,7 @@ const Settings = ({ modifiedData, onChange, sortOptions }) => { id: 'content-manager.form.Input.sort.order', defaultMessage: 'Default sort order', })} - onChange={e => onChange({ target: { name: 'settings.defaultSortOrder', value: e } })} + onChange={value => onChange({ target: { name: 'settings.defaultSortOrder', value } })} name="settings.defaultSortOrder" value={get(modifiedData, 'settings.defaultSortOrder', '')} > diff --git a/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/index.js b/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/index.js index b7798467be..b4c443e20b 100644 --- a/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/index.js +++ b/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/index.js @@ -2,7 +2,10 @@ import React, { memo, useContext, useMemo, useReducer, useState } from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; import { useMutation } from 'react-query'; -import { isEqual, upperFirst, pick, get } from 'lodash'; +import isEqual from 'lodash/isEqual'; +import upperFirst from 'lodash/upperFirst'; +import pick from 'lodash/pick'; +import get from 'lodash/get'; import { stringify } from 'qs'; import { useNotification, useTracking, ConfirmDialog } from '@strapi/helper-plugin'; import { useIntl } from 'react-intl'; @@ -27,6 +30,7 @@ import Settings from './components/Settings'; import DraggableCard from './components/DraggableCard'; import init from './init'; import reducer, { initialState } from './reducer'; +import { EXCLUDED_SORT_OPTIONS } from './utils/excludedSortOptions'; const Flex = styled(Box)` flex: ${({ size }) => size}; @@ -41,7 +45,7 @@ const SelectContainer = styled(Flex)` max-width: ${200 / 16}rem; `; -const ListSettingsView = ({ layout, slug, updateLayout }) => { +const ListSettingsView = ({ layout, slug }) => { const { formatMessage } = useIntl(); const { trackUsage } = useTracking(); const pluginsQueryParams = usePluginsQueryParams(); @@ -74,14 +78,44 @@ const ListSettingsView = ({ layout, slug, updateLayout }) => { return get(modifiedData, ['layouts', 'list'], []); }, [modifiedData]); - const excludedSortOptions = ['media', 'richtext', 'dynamiczone', 'relation', 'component', 'json']; + const sortOptions = Object.entries(attributes).reduce((acc, cur) => { + const [name, { type }] = cur; + + if (!EXCLUDED_SORT_OPTIONS.includes(type)) { + acc.push(name); + } + + return acc; + }, []); + + // const handleClickEditLabel = labelToEdit => { + // dispatch({ + // type: 'SET_LABEL_TO_EDIT', + // labelToEdit, + // }); + // toggleModalForm(); + // }; + + // const handleClosed = () => { + // dispatch({ + // type: 'UNSET_LABEL_TO_EDIT', + // }); + // }; + + const handleChange = ({ target: { name, value } }) => { + dispatch({ + type: 'ON_CHANGE', + keys: name, + value: name === 'settings.pageSize' ? parseInt(value, 10) : value, + }); + }; const goBackUrl = () => { const { settings: { pageSize, defaultSortBy, defaultSortOrder }, kind, uid, - } = modifiedData; + } = initialData; const sort = `${defaultSortBy}:${defaultSortOrder}`; const goBackSearch = `${stringify( { @@ -95,15 +129,6 @@ const ListSettingsView = ({ layout, slug, updateLayout }) => { return `/content-manager/${kind}/${uid}?${goBackSearch}`; }; - const handleChange = ({ target: { name, value } }) => { - dispatch({ - type: 'ON_CHANGE', - keys: name, - value: name === 'settings.pageSize' ? parseInt(value, 10) : value, - }); - console.log('here'); - }; - const handleConfirm = async () => { const body = pick(modifiedData, ['layouts', 'settings', 'metadatas']); submitMutation.mutateAsync(body); @@ -138,23 +163,8 @@ const ListSettingsView = ({ layout, slug, updateLayout }) => { trackUsage('willSaveContentTypeLayout'); }; - const sortOptions = Object.entries(attributes).reduce((acc, cur) => { - const [name, { type }] = cur; - - if (!excludedSortOptions.includes(type)) { - acc.push(name); - } - - return acc; - }, []); - const submitMutation = useMutation(body => putCMSettingsLV(body, slug), { - onSuccess: async ({ data: { data } }) => { - updateLayout(data); - - dispatch({ - type: 'SUBMIT_SUCCEEDED', - }); + onSuccess: async () => { trackUsage('didEditListSettings'); refetchData(); }, @@ -164,7 +174,6 @@ const ListSettingsView = ({ layout, slug, updateLayout }) => { message: { id: 'notification.error' }, }); }, - refetchActive: true, }); const { isLoading: isSubmittingForm } = submitMutation; @@ -257,7 +266,7 @@ const ListSettingsView = ({ layout, slug, updateLayout }) => {
} to={goBackUrl}> + } to={goBackUrl} id="go-back"> {formatMessage({ id: 'app.components.go-back', defaultMessage: 'Go back' })} } @@ -330,7 +339,12 @@ const ListSettingsView = ({ layout, slug, updateLayout }) => { - handleAddField(e)} + value="" + placeholder="Add a field" + > {listRemainingFields.map(field => (