yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-11-12 16:22:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

feedback fixes

Browse Source
This commit is contained in:
ronronscelestes 2021-10-11 14:47:13 +02:00
parent 1b28d7b80a
commit 6a0328e840
6 changed files with 279 additions and 307 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/core/admin/admin/src/content-manager/components/SettingFormWrapper/index.js
View File

@ -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;

7
packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/DragWrapper.js
View File

@ -1,7 +0,0 @@
import React from 'react';
const DragWrapper = () => {
return <div>yo yo yo</div>;
};
export default DragWrapper;

163
packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/Settings.js Normal file
View File

@ -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 (
<>
<Box paddingBottom={4}>
<H3>
{formatMessage({
id: 'content-manager.containers.SettingPage.settings',
defaultMessage: 'Settings',
})}
</H3>
</Box>
<RowGap justifyContent="space-between" wrap="wrap" paddingBottom={6}>
<ToggleInput
label={formatMessage({
id: 'content-manager.form.Input.search',
defaultMessage: 'Enable search',
})}
onChange={e => {
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}
/>
<ToggleInput
label={formatMessage({
id: 'content-manager.form.Input.filters',
defaultMessage: 'Enable filters',
})}
onChange={e => {
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}
/>
<ToggleInput
label={formatMessage({
id: 'content-manager.form.Input.bulkActions',
defaultMessage: 'Enable bulk actions',
})}
onChange={e => {
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}
/>
</RowGap>
<Grid gap={4}>
<GridItem s={12} col={6}>
<Select
label={formatMessage({
id: 'content-manager.form.Input.pageEntries',
defaultMessage: 'Entries per page',
})}
hint={formatMessage({
id: 'content-manager.form.Input.pageEntries.inputDescription',
defaultMessage:
'Note: You can override this value in the Collection Type settings page.',
})}
onChange={e => onChange({ target: { name: 'settings.pageSize', value: e } })}
name="settings.pageSize"
value={get(modifiedData, 'settings.pageSize', '')}
>
{[10, 20, 50, 100].map(pageSize => (
<Option key={pageSize} value={pageSize}>
{pageSize}
</Option>
))}
</Select>
</GridItem>
<GridItem s={12} col={3}>
<Select
label={formatMessage({
id: 'content-manager.form.Input.defaultSort',
defaultMessage: 'Default sort attribute',
})}
onChange={e => onChange({ target: { name: 'settings.defaultSortBy', value: e } })}
name="settings.defaultSortBy"
value={get(modifiedData, 'settings.defaultSortBy', '')}
>
{sortOptions.map(sortBy => (
<Option key={sortBy} value={sortBy}>
{sortBy}
</Option>
))}
</Select>
</GridItem>
<GridItem s={12} col={3}>
<Select
label={formatMessage({
id: 'content-manager.form.Input.sort.order',
defaultMessage: 'Default sort order',
})}
onChange={e => onChange({ target: { name: 'settings.defaultSortOrder', value: e } })}
name="settings.defaultSortOrder"
value={get(modifiedData, 'settings.defaultSortOrder', '')}
>
{['ASC', 'DESC'].map(order => (
<Option key={order} value={order}>
{order}
</Option>
))}
</Select>
</GridItem>
</Grid>
</>
);
};
Settings.defaultProps = {
modifiedData: {},
sortOptions: [],
};
Settings.propTypes = {
modifiedData: PropTypes.object,
onChange: PropTypes.func.isRequired,
sortOptions: PropTypes.array,
};
export default Settings;

256
packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/SettingsForm.js
View File

@ -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 (
<Layout>
<Main aria-busy={isSubmittingForm}>
<form onSubmit={handleSubmit}>
<HeaderLayout
navigationAction={
<Link startIcon={<BackIcon />} to={goBackUrl}>
go back
</Link>
}
primaryAction={
<Button
size="L"
startIcon={<CheckIcon />}
disabled={isEqual(modifiedData, initialData)}
type="submit"
>
{formatMessage({ id: 'form.button.save', defaultMessage: 'Save' })}
</Button>
}
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) }
)}
/>
<ContentLayout>
<Box
background="neutral0"
hasRadius
shadow="tableShadow"
paddingTop={6}
paddingBottom={6}
paddingLeft={7}
paddingRight={7}
>
<Box paddingBottom={4}>
<H3>
{formatMessage({
id: 'content-manager.containers.SettingPage.settings',
defaultMessage: 'Settings',
})}
</H3>
</Box>
<RowGap justifyContent="space-between" wrap="wrap" paddingBottom={6}>
<GenericInput
value={get(modifiedData, 'settings.searchable', '')}
name="settings.searchable"
intlLabel={{
id: 'content-manager.form.Input.search',
defaultMessage: 'Enable search',
}}
onChange={onChange}
type="bool"
/>
<GenericInput
value={get(modifiedData, 'settings.filterable', '')}
name="settings.filterable"
intlLabel={{
id: 'content-manager.form.Input.filters',
defaultMessage: 'Enable filters',
}}
onChange={onChange}
type="bool"
/>
<GenericInput
value={get(modifiedData, 'settings.bulkable', '')}
name="settings.bulkable"
intlLabel={{
id: 'content-manager.form.Input.bulkActions',
defaultMessage: 'Enable bulk actions',
}}
onChange={onChange}
type="bool"
/>
</RowGap>
<Grid gap={4}>
<GridItem s={12} col={6}>
<Select
label={formatMessage({
id: 'content-manager.form.Input.pageEntries',
defaultMessage: 'Entries per page',
})}
hint={formatMessage({
id: 'content-manager.form.Input.pageEntries.inputDescription',
defaultMessage:
'Note: You can override this value in the Collection Type settings page.',
})}
onChange={e => onChange({ target: { name: 'settings.pageSize', value: e } })}
name="settings.pageSize"
value={get(modifiedData, 'settings.pageSize', '')}
>
{[10, 20, 50, 100].map(pageSize => (
<Option key={pageSize} value={pageSize}>
{pageSize}
</Option>
))}
</Select>
</GridItem>
<GridItem s={12} col={3}>
<Select
label={formatMessage({
id: 'content-manager.form.Input.defaultSort',
defaultMessage: 'Default sort attribute',
})}
onChange={e =>
onChange({ target: { name: 'settings.defaultSortBy', value: e } })}
name="settings.defaultSortBy"
value={get(modifiedData, 'settings.defaultSortBy', '')}
>
{sortOptions.map(sortBy => (
<Option key={sortBy} value={sortBy}>
{sortBy}
</Option>
))}
</Select>
</GridItem>
<GridItem s={12} col={3}>
<Select
label={formatMessage({
id: 'content-manager.form.Input.sort.order',
defaultMessage: 'Default sort order',
})}
onChange={e =>
onChange({ target: { name: 'settings.defaultSortOrder', value: e } })}
name="settings.defaultSortOrder"
value={get(modifiedData, 'settings.defaultSortOrder', '')}
>
{['ASC', 'DESC'].map(order => (
<Option key={order} value={order}>
{order}
</Option>
))}
</Select>
</GridItem>
</Grid>
{children}
</Box>
</ContentLayout>
<ConfirmDialog
bodyText={{
id: 'content-manager.popUpWarning.warning.updateAllSettings',
defaultMessage: 'This will modify all your settings',
}}
iconRightButton={<CheckIcon />}
isConfirmButtonLoading={isSubmittingForm}
isOpen={showWarningSubmit}
onToggleDialog={toggleWarningSubmit}
onConfirm={onConfirmSubmit}
variantRightButton="success-light"
/>
</form>
</Main>
</Layout>
);
};
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;

122
packages/core/admin/admin/src/content-manager/pages/ListSettingsView/index.js
View File

@ -3,27 +3,32 @@ import React, {
useContext, useContext,
// useMemo, // useMemo,
useReducer, useReducer,
// useState useState,
} from 'react'; } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { useMutation } from 'react-query'; import { useMutation } from 'react-query';
import { import { isEqual, upperFirst, pick } from 'lodash';
// get, import { stringify } from 'qs';
pick, import { useNotification, useTracking, ConfirmDialog } from '@strapi/helper-plugin';
} from 'lodash'; import { useIntl } from 'react-intl';
import { useNotification, useTracking } from '@strapi/helper-plugin';
// import { useIntl } from 'react-intl';
import { Box } from '@strapi/parts/Box'; import { Box } from '@strapi/parts/Box';
import { Divider } from '@strapi/parts/Divider'; 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 ModelsContext from '../../contexts/ModelsContext';
import { usePluginsQueryParams } from '../../hooks';
import putCMSettingsLV from './utils/api'; import putCMSettingsLV from './utils/api';
import SettingsForm from './components/SettingsForm'; import Settings from './components/Settings';
import DragWrapper from './components/DragWrapper';
// import LayoutDndProvider from '../../components/LayoutDndProvider'; // import LayoutDndProvider from '../../components/LayoutDndProvider';
import init from './init'; import init from './init';
import reducer, { initialState } from './reducer'; import reducer, { initialState } from './reducer';
const ListSettingsView = ({ layout, slug, updateLayout }) => { const ListSettingsView = ({ layout, slug, updateLayout }) => {
const pluginsQueryParams = usePluginsQueryParams();
const toggleNotification = useNotification(); const toggleNotification = useNotification();
const { refetchData } = useContext(ModelsContext); const { refetchData } = useContext(ModelsContext);
const [reducerState, dispatch] = useReducer(reducer, initialState, () => const [reducerState, dispatch] = useReducer(reducer, initialState, () =>
@ -32,7 +37,7 @@ const ListSettingsView = ({ layout, slug, updateLayout }) => {
// const [isOpen, setIsOpen] = useState(false); // const [isOpen, setIsOpen] = useState(false);
// const [isModalFormOpen, setIsModalFormOpen] = useState(false); // const [isModalFormOpen, setIsModalFormOpen] = useState(false);
// const [isDraggingSibling, setIsDraggingSibling] = useState(false); // const [isDraggingSibling, setIsDraggingSibling] = useState(false);
// const { formatMessage } = useIntl(); const { formatMessage } = useIntl();
const { trackUsage } = useTracking(); const { trackUsage } = useTracking();
// const toggleModalForm = () => setIsModalFormOpen(prevState => !prevState); // const toggleModalForm = () => setIsModalFormOpen(prevState => !prevState);
const { 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 } }) => { // const handleChangeEditLabel = ({ target: { name, value } }) => {
// dispatch({ // dispatch({
// type: 'ON_CHANGE_LABEL_METAS', // type: 'ON_CHANGE_LABEL_METAS',
@ -184,21 +217,72 @@ const ListSettingsView = ({ layout, slug, updateLayout }) => {
// }; // };
return ( return (
<SettingsForm <Layout>
collectionName={modifiedData.info.label} <Main aria-busy={isSubmittingForm}>
initialData={initialData} <form onSubmit={handleSubmit}>
isSubmittingForm={isSubmittingForm} <HeaderLayout
navigationAction={
<Link startIcon={<BackIcon />} to={goBackUrl}>
{formatMessage({ id: 'app.components.go-back', defaultMessage: 'Go back' })}
</Link>
}
primaryAction={
<Button
size="L"
startIcon={<CheckIcon />}
disabled={isEqual(modifiedData, initialData)}
type="submit"
>
{formatMessage({ id: 'form.button.save', defaultMessage: 'Save' })}
</Button>
}
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) }
)}
/>
<ContentLayout>
<Box
background="neutral0"
hasRadius
shadow="tableShadow"
paddingTop={6}
paddingBottom={6}
paddingLeft={7}
paddingRight={7}
>
<Settings
modifiedData={modifiedData} modifiedData={modifiedData}
onChange={handleChange} onChange={handleChange}
onConfirmSubmit={handleConfirm}
refetchData={refetchData}
sortOptions={sortOptions} sortOptions={sortOptions}
> />
<Box padding={6}> <Box padding={6}>
<Divider /> <Divider />
</Box> </Box>
<DragWrapper /> </Box>
</SettingsForm> </ContentLayout>
<ConfirmDialog
bodyText={{
id: 'content-manager.popUpWarning.warning.updateAllSettings',
defaultMessage: 'This will modify all your settings',
}}
iconRightButton={<CheckIcon />}
isConfirmButtonLoading={isSubmittingForm}
isOpen={showWarningSubmit}
onToggleDialog={toggleWarningSubmit}
onConfirm={handleConfirm}
variantRightButton="success-light"
/>
</form>
</Main>
</Layout>
// <LayoutDndProvider // <LayoutDndProvider
// isDraggingSibling={isDraggingSibling} // isDraggingSibling={isDraggingSibling}

17
packages/core/admin/admin/src/content-manager/pages/ListSettingsView/tests/index.test.js
View File

@ -818,7 +818,7 @@ describe('ADMIN | CM | LV | Configure the view', () => {
<span <span
class="c9 c10 c11" class="c9 c10 c11"
> >
go back Go back
</span> </span>
</a> </a>
</div> </div>
@ -925,7 +925,7 @@ describe('ADMIN | CM | LV | Configure the view', () => {
<span <span
class="c42" class="c42"
> >
Off off
</span> </span>
</div> </div>
<div <div
@ -935,7 +935,7 @@ describe('ADMIN | CM | LV | Configure the view', () => {
<span <span
class="c35" class="c35"
> >
On on
</span> </span>
</div> </div>
<input <input
@ -981,7 +981,7 @@ describe('ADMIN | CM | LV | Configure the view', () => {
<span <span
class="c42" class="c42"
> >
Off off
</span> </span>
</div> </div>
<div <div
@ -991,7 +991,7 @@ describe('ADMIN | CM | LV | Configure the view', () => {
<span <span
class="c35" class="c35"
> >
On on
</span> </span>
</div> </div>
<input <input
@ -1037,7 +1037,7 @@ describe('ADMIN | CM | LV | Configure the view', () => {
<span <span
class="c42" class="c42"
> >
Off off
</span> </span>
</div> </div>
<div <div
@ -1047,7 +1047,7 @@ describe('ADMIN | CM | LV | Configure the view', () => {
<span <span
class="c35" class="c35"
> >
On on
</span> </span>
</div> </div>
<input <input
@ -1315,9 +1315,6 @@ describe('ADMIN | CM | LV | Configure the view', () => {
class="c63 c64" class="c63 c64"
/> />
</div> </div>
<div>
yo yo yo
</div>
</div> </div>
</div> </div>
</form> </form>