diff --git a/packages/core/admin/admin/src/content-manager/components/SettingFormWrapper/index.js b/packages/core/admin/admin/src/content-manager/components/SettingFormWrapper/index.js deleted file mode 100644 index 543404af9d..0000000000 --- a/packages/core/admin/admin/src/content-manager/components/SettingFormWrapper/index.js +++ /dev/null @@ -1,9 +0,0 @@ -import styled from 'styled-components'; - -const SettingFormWrapper = styled.div` - padding: 24px 30px 0px; - background-color: #fafafb; - border-radius: 2px; -`; - -export default SettingFormWrapper; diff --git a/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/DragWrapper.js b/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/DragWrapper.js deleted file mode 100644 index f75ea873ac..0000000000 --- a/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/DragWrapper.js +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; - -const DragWrapper = () => { - return
yo yo yo
; -}; - -export default DragWrapper; 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 new file mode 100644 index 0000000000..4a6edd8e62 --- /dev/null +++ b/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/Settings.js @@ -0,0 +1,163 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import styled from 'styled-components'; +import { get } from 'lodash'; +import { useIntl } from 'react-intl'; +import { Row } from '@strapi/parts/Row'; +import { Grid, GridItem } from '@strapi/parts/Grid'; +import { Select, Option } from '@strapi/parts/Select'; +import { ToggleInput } from '@strapi/parts/ToggleInput'; +import { Box } from '@strapi/parts/Box'; +import { H3 } from '@strapi/parts/Text'; + +const RowGap = styled(Row)` + gap: ${({ theme }) => theme.spaces[4]}; +`; + +const Settings = ({ modifiedData, onChange, sortOptions }) => { + const { formatMessage } = useIntl(); + const { settings } = modifiedData; + + return ( + <> + +

+ {formatMessage({ + id: 'content-manager.containers.SettingPage.settings', + defaultMessage: 'Settings', + })} +

+ + + { + onChange({ target: { name: 'settings.searchable', value: e.target.checked } }); + }} + onLabel={formatMessage({ + id: 'app.components.ToggleCheckbox.on-label', + defaultMessage: 'on', + })} + offLabel={formatMessage({ + id: 'app.components.ToggleCheckbox.off-label', + defaultMessage: 'off', + })} + name="settings.searchable" + checked={settings.searchable} + /> + { + onChange({ target: { name: 'settings.filterable', value: e.target.checked } }); + }} + onLabel={formatMessage({ + id: 'app.components.ToggleCheckbox.on-label', + defaultMessage: 'on', + })} + offLabel={formatMessage({ + id: 'app.components.ToggleCheckbox.off-label', + defaultMessage: 'off', + })} + name="settings.filterable" + checked={settings.filterable} + /> + { + onChange({ target: { name: 'settings.bulkable', value: e.target.checked } }); + }} + onLabel={formatMessage({ + id: 'app.components.ToggleCheckbox.on-label', + defaultMessage: 'on', + })} + offLabel={formatMessage({ + id: 'app.components.ToggleCheckbox.off-label', + defaultMessage: 'off', + })} + name="settings.bulkable" + checked={settings.bulkable} + /> + + + + + + + + + + + + + + ); +}; + +Settings.defaultProps = { + modifiedData: {}, + sortOptions: [], +}; + +Settings.propTypes = { + modifiedData: PropTypes.object, + onChange: PropTypes.func.isRequired, + sortOptions: PropTypes.array, +}; + +export default Settings; diff --git a/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/SettingsForm.js b/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/SettingsForm.js deleted file mode 100644 index 0fa7771fa5..0000000000 --- a/packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/SettingsForm.js +++ /dev/null @@ -1,256 +0,0 @@ -import React, { useState } from 'react'; -import PropTypes from 'prop-types'; -import styled from 'styled-components'; -import { GenericInput, ConfirmDialog, useTracking } from '@strapi/helper-plugin'; -import { get, isEqual, upperFirst } from 'lodash'; -import { stringify } from 'qs'; -import { useIntl } from 'react-intl'; -import { Layout, HeaderLayout, ContentLayout } from '@strapi/parts/Layout'; -import { Link } from '@strapi/parts/Link'; -import { Main } from '@strapi/parts/Main'; -import { Box } from '@strapi/parts/Box'; -import { Row } from '@strapi/parts/Row'; -import { Grid, GridItem } from '@strapi/parts/Grid'; -import { Select, Option } from '@strapi/parts/Select'; -import { H3 } from '@strapi/parts/Text'; -import { Button } from '@strapi/parts/Button'; -import CheckIcon from '@strapi/icons/CheckIcon'; -import BackIcon from '@strapi/icons/BackIcon'; -import { usePluginsQueryParams } from '../../../hooks'; - -const RowGap = styled(Row)` - gap: ${({ theme }) => theme.spaces[4]}; -`; - -const SettingsForm = ({ - children, - initialData, - isEditSettings, - isSubmittingForm, - modifiedData, - collectionName, - onChange, - onConfirmSubmit, - sortOptions, -}) => { - const pluginsQueryParams = usePluginsQueryParams(); - const { trackUsage } = useTracking(); - const { formatMessage } = useIntl(); - const [showWarningSubmit, setWarningSubmit] = useState(false); - const toggleWarningSubmit = () => setWarningSubmit(prevState => !prevState); - - const handleSubmit = e => { - e.preventDefault(); - toggleWarningSubmit(); - trackUsage('willSaveContentTypeLayout'); - }; - - const goBackUrl = () => { - const { - settings: { pageSize, defaultSortBy, defaultSortOrder }, - kind, - uid, - } = modifiedData; - const sort = `${defaultSortBy}:${defaultSortOrder}`; - const goBackSearch = `${stringify( - { - page: 1, - pageSize, - sort, - }, - { encode: false } - )}${pluginsQueryParams ? `&${pluginsQueryParams}` : ''}`; - - return `/content-manager/${kind}/${uid}?${goBackSearch}`; - }; - - return ( - -
-
- } to={goBackUrl}> - go back - - } - primaryAction={ - - } - subtitle={formatMessage({ - id: `components.SettingsViewWrapper.pluginHeader.description.${ - isEditSettings ? 'edit' : 'list' - }-settings`, - defaultMessage: `Define the settings of the ${ - isEditSettings ? 'edit' : 'list' - } view.`, - })} - title={formatMessage( - { - id: 'components.SettingsViewWrapper.pluginHeader.title', - defaultMessage: 'Configure the view - {name}', - }, - { name: upperFirst(collectionName) } - )} - /> - - - -

- {formatMessage({ - id: 'content-manager.containers.SettingPage.settings', - defaultMessage: 'Settings', - })} -

- - - - - - - - - - - - - - - - - - {children} - - - } - isConfirmButtonLoading={isSubmittingForm} - isOpen={showWarningSubmit} - onToggleDialog={toggleWarningSubmit} - onConfirm={onConfirmSubmit} - variantRightButton="success-light" - /> - -
- - ); -}; - -SettingsForm.defaultProps = { - collectionName: '', - initialData: {}, - isEditSettings: false, - isSubmittingForm: false, - modifiedData: {}, - onConfirmSubmit: () => {}, - sortOptions: [], -}; - -SettingsForm.propTypes = { - children: PropTypes.node.isRequired, - collectionName: PropTypes.string, - initialData: PropTypes.object, - isEditSettings: PropTypes.bool, - isSubmittingForm: PropTypes.bool, - modifiedData: PropTypes.object, - onChange: PropTypes.func.isRequired, - onConfirmSubmit: PropTypes.func, - sortOptions: PropTypes.array, -}; - -export default SettingsForm; 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 287c0dab75..0806bcd420 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 @@ -3,27 +3,32 @@ import React, { useContext, // useMemo, useReducer, - // useState + useState, } from 'react'; import PropTypes from 'prop-types'; import { useMutation } from 'react-query'; -import { - // get, - pick, -} from 'lodash'; -import { useNotification, useTracking } from '@strapi/helper-plugin'; -// import { useIntl } from 'react-intl'; +import { isEqual, upperFirst, pick } from 'lodash'; +import { stringify } from 'qs'; +import { useNotification, useTracking, ConfirmDialog } from '@strapi/helper-plugin'; +import { useIntl } from 'react-intl'; import { Box } from '@strapi/parts/Box'; import { Divider } from '@strapi/parts/Divider'; +import { Layout, HeaderLayout, ContentLayout } from '@strapi/parts/Layout'; +import { Link } from '@strapi/parts/Link'; +import { Main } from '@strapi/parts/Main'; +import { Button } from '@strapi/parts/Button'; +import CheckIcon from '@strapi/icons/CheckIcon'; +import BackIcon from '@strapi/icons/BackIcon'; import ModelsContext from '../../contexts/ModelsContext'; +import { usePluginsQueryParams } from '../../hooks'; import putCMSettingsLV from './utils/api'; -import SettingsForm from './components/SettingsForm'; -import DragWrapper from './components/DragWrapper'; +import Settings from './components/Settings'; // import LayoutDndProvider from '../../components/LayoutDndProvider'; import init from './init'; import reducer, { initialState } from './reducer'; const ListSettingsView = ({ layout, slug, updateLayout }) => { + const pluginsQueryParams = usePluginsQueryParams(); const toggleNotification = useNotification(); const { refetchData } = useContext(ModelsContext); const [reducerState, dispatch] = useReducer(reducer, initialState, () => @@ -32,7 +37,7 @@ const ListSettingsView = ({ layout, slug, updateLayout }) => { // const [isOpen, setIsOpen] = useState(false); // const [isModalFormOpen, setIsModalFormOpen] = useState(false); // const [isDraggingSibling, setIsDraggingSibling] = useState(false); - // const { formatMessage } = useIntl(); + const { formatMessage } = useIntl(); const { trackUsage } = useTracking(); // const toggleModalForm = () => setIsModalFormOpen(prevState => !prevState); const { @@ -100,6 +105,34 @@ const ListSettingsView = ({ layout, slug, updateLayout }) => { }); }; + const [showWarningSubmit, setWarningSubmit] = useState(false); + const toggleWarningSubmit = () => setWarningSubmit(prevState => !prevState); + + const handleSubmit = e => { + e.preventDefault(); + toggleWarningSubmit(); + trackUsage('willSaveContentTypeLayout'); + }; + + const goBackUrl = () => { + const { + settings: { pageSize, defaultSortBy, defaultSortOrder }, + kind, + uid, + } = modifiedData; + const sort = `${defaultSortBy}:${defaultSortOrder}`; + const goBackSearch = `${stringify( + { + page: 1, + pageSize, + sort, + }, + { encode: false } + )}${pluginsQueryParams ? `&${pluginsQueryParams}` : ''}`; + + return `/content-manager/${kind}/${uid}?${goBackSearch}`; + }; + // const handleChangeEditLabel = ({ target: { name, value } }) => { // dispatch({ // type: 'ON_CHANGE_LABEL_METAS', @@ -184,21 +217,72 @@ const ListSettingsView = ({ layout, slug, updateLayout }) => { // }; return ( - - - - - - + +
+
+ } to={goBackUrl}> + {formatMessage({ id: 'app.components.go-back', defaultMessage: 'Go back' })} + + } + primaryAction={ + + } + subtitle={formatMessage({ + id: `components.SettingsViewWrapper.pluginHeader.description.list-settings`, + defaultMessage: `Define the settings of the list view.`, + })} + title={formatMessage( + { + id: 'components.SettingsViewWrapper.pluginHeader.title', + defaultMessage: 'Configure the view - {name}', + }, + { name: upperFirst(modifiedData.info.label) } + )} + /> + + + + + + + + + } + isConfirmButtonLoading={isSubmittingForm} + isOpen={showWarningSubmit} + onToggleDialog={toggleWarningSubmit} + onConfirm={handleConfirm} + variantRightButton="success-light" + /> + +
+ // { - go back + Go back @@ -925,7 +925,7 @@ describe('ADMIN | CM | LV | Configure the view', () => { - Off + off
{ - On + on
{ - Off + off
{ - On + on
{ - Off + off
{ - On + on
{ class="c63 c64" /> -
- yo yo yo -