yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-11-29 00:25:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

feedback fixes

Browse Source
This commit is contained in:
ronronscelestes 2021-10-15 15:23:19 +02:00
parent ba9eb03f70
commit 13b0cdc66e
5 changed files with 77 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/DraggableCard.js
View File

@ -74,8 +74,8 @@ const FieldWrapper = styled(Box)`
const DraggableCard = ({ name, labelField, onRemoveField, onClickEditField }) => { const DraggableCard = ({ name, labelField, onRemoveField, onClickEditField }) => {
const { formatMessage } = useIntl(); const { formatMessage } = useIntl();
const editButtonRef = useRef(); const editButtonRef = useRef();
const cardTitle = labelField || name; const cardEllipsisTitle =
const cardEllipsisTitle = cardTitle.length > 20 ? `${cardTitle.substring(0, 20)}...` : cardTitle; labelField.length > 20 ? `${labelField.substring(0, 20)}...` : labelField;
const handleClickEditRow = () => { const handleClickEditRow = () => {
if (editButtonRef.current) { if (editButtonRef.current) {
@ -145,15 +145,11 @@ const DraggableCard = ({ name, labelField, onRemoveField, onClickEditField }) =>
); );
}; };
DraggableCard.defaultProps = {
labelField: undefined,
};
DraggableCard.propTypes = { DraggableCard.propTypes = {
labelField: PropTypes.string, labelField: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
onClickEditField: PropTypes.func.isRequired, onClickEditField: PropTypes.func.isRequired,
onRemoveField: PropTypes.func.isRequired, onRemoveField: PropTypes.func.isRequired,
name: PropTypes.string.isRequired,
}; };
export default DraggableCard; export default DraggableCard;

139
packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/EditFieldForm.js
View File

@ -10,19 +10,12 @@ import { Row } from '@strapi/parts/Row';
import { Grid, GridItem } from '@strapi/parts/Grid'; import { Grid, GridItem } from '@strapi/parts/Grid';
import { TextInput } from '@strapi/parts/TextInput'; import { TextInput } from '@strapi/parts/TextInput';
import { ToggleInput } from '@strapi/parts/ToggleInput'; import { ToggleInput } from '@strapi/parts/ToggleInput';
import Component from '@strapi/icons/Component';
import CT from '@strapi/icons/Ct';
import Date from '@strapi/icons/Date'; import Date from '@strapi/icons/Date';
import Boolean from '@strapi/icons/Boolean'; import Boolean from '@strapi/icons/Boolean';
import DynamicZone from '@strapi/icons/DynamicZone';
import Email from '@strapi/icons/Email'; import Email from '@strapi/icons/Email';
import Enumeration from '@strapi/icons/Enumeration'; import Enumeration from '@strapi/icons/Enumeration';
import Json from '@strapi/icons/Json';
import LongDescription from '@strapi/icons/LongDescription';
import Media from '@strapi/icons/Media'; import Media from '@strapi/icons/Media';
import Password from '@strapi/icons/Password';
import Relation from '@strapi/icons/Relation'; import Relation from '@strapi/icons/Relation';
import St from '@strapi/icons/St';
import Text from '@strapi/icons/Text'; import Text from '@strapi/icons/Text';
import Uid from '@strapi/icons/Uid'; import Uid from '@strapi/icons/Uid';
import Numbers from '@strapi/icons/Numbers'; import Numbers from '@strapi/icons/Numbers';
@ -31,12 +24,9 @@ import { getTrad } from '../../../utils';
const iconByTypes = { const iconByTypes = {
biginteger: <Numbers />, biginteger: <Numbers />,
boolean: <Boolean />, boolean: <Boolean />,
component: <Component />,
contentType: <CT />,
date: <Date />, date: <Date />,
datetime: <Date />, datetime: <Date />,
decimal: <Numbers />, decimal: <Numbers />,
dynamiczone: <DynamicZone />,
email: <Email />, email: <Email />,
enum: <Enumeration />, enum: <Enumeration />,
enumeration: <Enumeration />, enumeration: <Enumeration />,
@ -44,14 +34,9 @@ const iconByTypes = {
files: <Media />, files: <Media />,
float: <Numbers />, float: <Numbers />,
integer: <Numbers />, integer: <Numbers />,
json: <Json />,
JSON: <Json />,
media: <Media />, media: <Media />,
number: <Numbers />, number: <Numbers />,
password: <Password />,
relation: <Relation />, relation: <Relation />,
richtext: <LongDescription />,
singleType: <St />,
string: <Text />, string: <Text />,
text: <Text />, text: <Text />,
time: <Date />, time: <Date />,
@ -88,69 +73,77 @@ const EditFieldForm = ({
return ( return (
<ModalLayout onClose={onCloseModal} labelledBy="title"> <ModalLayout onClose={onCloseModal} labelledBy="title">
<ModalHeader> <form>
<HeaderContainer> <ModalHeader>
{iconByTypes[type]} <HeaderContainer>
<ButtonText textColor="neutral800" as="h2" id="title"> {iconByTypes[type]}
{formatMessage( <ButtonText textColor="neutral800" as="h2" id="title">
{ {formatMessage(
id: getTrad('containers.ListSettingsView.modal-form.edit-label'), {
defaultMessage: 'Edit {fieldName}', id: getTrad('containers.ListSettingsView.modal-form.edit-label'),
}, defaultMessage: 'Edit {fieldName}',
{ fieldName: upperFirst(fieldToEdit) } },
)} { fieldName: upperFirst(fieldToEdit) }
</ButtonText> )}
</HeaderContainer> </ButtonText>
</ModalHeader> </HeaderContainer>
<ModalBody> </ModalHeader>
<Grid gap={4}> <ModalBody>
<GridItem s={12} col={6}> <Grid gap={4}>
<TextInput
id="label-input"
label={formatMessage({
id: getTrad('form.Input.label'),
defaultMessage: 'Label',
})}
name="label"
onChange={e => onChangeEditLabel(e)}
value={fieldForm.label}
hint={formatMessage({
id: getTrad('form.Input.label.inputDescription'),
defaultMessage: "This value overrides the label displayed in the table's head",
})}
/>
</GridItem>
{shouldDisplaySortToggle && (
<GridItem s={12} col={6}> <GridItem s={12} col={6}>
<ToggleInput <TextInput
data-testid="Enable sort on this field" id="label-input"
checked={fieldForm.sortable}
label={formatMessage({ label={formatMessage({
id: getTrad('form.Input.sort.field'), id: getTrad('form.Input.label'),
defaultMessage: 'Enable sort on this field', defaultMessage: 'Label',
})}
name="label"
onChange={e => onChangeEditLabel(e)}
value={fieldForm.label}
hint={formatMessage({
id: getTrad('form.Input.label.inputDescription'),
defaultMessage: "This value overrides the label displayed in the table's head",
})} })}
name="sortable"
onChange={e =>
onChangeEditLabel({ target: { name: 'sortable', value: e.target.checked } })}
onLabel="on"
offLabel="off"
/> />
</GridItem> </GridItem>
)} {shouldDisplaySortToggle && (
</Grid> <GridItem s={12} col={6}>
</ModalBody> <ToggleInput
<ModalFooter data-testid="Enable sort on this field"
startActions={ checked={fieldForm.sortable}
<Button onClick={onCloseModal} variant="tertiary"> label={formatMessage({
{formatMessage({ id: 'app.components.Button.cancel', defaultMessage: 'Cancel' })} id: getTrad('form.Input.sort.field'),
</Button> defaultMessage: 'Enable sort on this field',
} })}
endActions={ name="sortable"
<Button type="button" onClick={e => onSubmit(e)}> onChange={e =>
{formatMessage({ id: 'form.button.finish', defaultMessage: 'Finish' })} onChangeEditLabel({ target: { name: 'sortable', value: e.target.checked } })}
</Button> onLabel={formatMessage({
} id: 'app.components.ToggleCheckbox.on-label',
/> defaultMessage: 'on',
})}
offLabel={formatMessage({
id: 'app.components.ToggleCheckbox.off-label',
defaultMessage: 'off',
})}
/>
</GridItem>
)}
</Grid>
</ModalBody>
<ModalFooter
startActions={
<Button onClick={onCloseModal} variant="tertiary">
{formatMessage({ id: 'app.components.Button.cancel', defaultMessage: 'Cancel' })}
</Button>
}
endActions={
<Button type="button" onClick={e => onSubmit(e)}>
{formatMessage({ id: 'form.button.finish', defaultMessage: 'Finish' })}
</Button>
}
/>
</form>
</ModalLayout> </ModalLayout>
); );
}; };

8
packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/View.js → packages/core/admin/admin/src/content-manager/pages/ListSettingsView/components/SortDisplayedFields.js
View File

@ -25,7 +25,7 @@ const SelectContainer = styled(Flex)`
max-width: ${32 / 16}rem; max-width: ${32 / 16}rem;
`; `;
const View = ({ const SortDisplayedFields = ({
listRemainingFields, listRemainingFields,
displayedFields, displayedFields,
onAddField, onAddField,
@ -62,7 +62,7 @@ const View = ({
onClickEditField={onClickEditField} onClickEditField={onClickEditField}
key={field} key={field}
name={field} name={field}
labelField={metadatas[field].list.label || ''} labelField={metadatas[field].list.label || field}
/> />
))} ))}
</Stack> </Stack>
@ -90,7 +90,7 @@ const View = ({
); );
}; };
View.propTypes = { SortDisplayedFields.propTypes = {
displayedFields: PropTypes.array.isRequired, displayedFields: PropTypes.array.isRequired,
onAddField: PropTypes.func.isRequired, onAddField: PropTypes.func.isRequired,
onClickEditField: PropTypes.func.isRequired, onClickEditField: PropTypes.func.isRequired,
@ -105,4 +105,4 @@ View.propTypes = {
).isRequired, ).isRequired,
}; };
export default View; export default SortDisplayedFields;

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

@ -22,7 +22,7 @@ import ModelsContext from '../../contexts/ModelsContext';
import { usePluginsQueryParams } from '../../hooks'; import { usePluginsQueryParams } from '../../hooks';
import putCMSettingsLV from './utils/api'; import putCMSettingsLV from './utils/api';
import Settings from './components/Settings'; import Settings from './components/Settings';
import View from './components/View'; import SortDisplayedFields from './components/SortDisplayedFields';
import EditFieldForm from './components/EditFieldForm'; import EditFieldForm from './components/EditFieldForm';
import init from './init'; import init from './init';
import reducer, { initialState } from './reducer'; import reducer, { initialState } from './reducer';
@ -290,7 +290,7 @@ const ListSettingsView = ({ layout, slug }) => {
<Box paddingTop={6} paddingBottom={6}> <Box paddingTop={6} paddingBottom={6}>
<Divider /> <Divider />
</Box> </Box>
<View <SortDisplayedFields
listRemainingFields={listRemainingFields} listRemainingFields={listRemainingFields}
displayedFields={displayedFields} displayedFields={displayedFields}
onAddField={handleAddField} onAddField={handleAddField}

2
packages/core/admin/admin/src/content-manager/utils/checkIfAttributeIsDisplayable.js
View File

@ -7,7 +7,7 @@ const checkIfAttributeIsDisplayable = attribute => {
return !toLower(attribute.relationType).includes('morph'); return !toLower(attribute.relationType).includes('morph');
} }
return !['json', 'component', 'dynamiczone', 'richtext'].includes(type) && !!type; return !['json', 'component', 'dynamiczone', 'richtext', 'password'].includes(type) && !!type;
}; };
export default checkIfAttributeIsDisplayable; export default checkIfAttributeIsDisplayable;