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

fixed notification wording + confirmation delete dialog

Browse Source
This commit is contained in:
ronronscelestes 2022-05-20 11:11:09 +02:00
parent 34046abe1f
commit 78f567b082
4 changed files with 187 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

317
packages/core/upload/admin/src/components/EditFolderDialog/EditFolderDialog.js
View File

@ -1,6 +1,6 @@
import * as yup from 'yup'; import * as yup from 'yup';
import { Formik } from 'formik'; import { Formik } from 'formik';
import React, { useRef } from 'react'; import React, { useRef, useState } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import isEmpty from 'lodash/isEmpty'; import isEmpty from 'lodash/isEmpty';
import { useIntl } from 'react-intl'; import { useIntl } from 'react-intl';
@ -25,6 +25,7 @@ import { useEditFolder } from '../../hooks/useEditFolder';
import { useBulkRemove } from '../../hooks/useBulkRemove'; import { useBulkRemove } from '../../hooks/useBulkRemove';
import { ContextInfo } from '../ContextInfo'; import { ContextInfo } from '../ContextInfo';
import SelectTree from '../SelectTree'; import SelectTree from '../SelectTree';
import RemoveFolderDialog from './RemoveFolderDialog';
const folderSchema = yup.object({ const folderSchema = yup.object({
name: yup.string().required(), name: yup.string().required(),
@ -38,6 +39,7 @@ const folderSchema = yup.object({
export const EditFolderDialog = ({ onClose, folder, folderStructure, canUpdate }) => { export const EditFolderDialog = ({ onClose, folder, folderStructure, canUpdate }) => {
const submitButtonRef = useRef(null); const submitButtonRef = useRef(null);
const [showConfirmDialog, setShowConfirmDialog] = useState(false);
const { formatMessage, formatDate } = useIntl(); const { formatMessage, formatDate } = useIntl();
const { editFolder, isLoading } = useEditFolder(); const { editFolder, isLoading } = useEditFolder();
const { remove } = useBulkRemove(); const { remove } = useBulkRemove();
@ -94,177 +96,182 @@ export const EditFolderDialog = ({ onClose, folder, folderStructure, canUpdate }
} }
}; };
const handleClose = () => { const handleDelete = async () => {
onClose();
};
const handleDelete = async event => {
event.preventDefault();
await remove([folder]); await remove([folder]);
setShowConfirmDialog(false);
onClose(); onClose();
}; };
return ( return (
<ModalLayout onClose={handleClose} labelledBy="title"> <>
<ModalHeader> <ModalLayout onClose={() => onClose()} labelledBy="title">
<Typography fontWeight="bold" textColor="neutral800" as="h2" id="title"> <ModalHeader>
{formatMessage( <Typography fontWeight="bold" textColor="neutral800" as="h2" id="title">
isEditing {formatMessage(
? { isEditing
id: getTrad('modal.folder.edit.title'), ? {
defaultMessage: 'Edit folder', id: getTrad('modal.folder.edit.title'),
} defaultMessage: 'Edit folder',
: { }
id: getTrad('modal.folder.create.title'), : {
defaultMessage: 'Add new folder', id: getTrad('modal.folder.create.title'),
} defaultMessage: 'Add new folder',
)} }
</Typography> )}
</ModalHeader> </Typography>
</ModalHeader>
<ModalBody> <ModalBody>
<Formik <Formik
validationSchema={folderSchema} validationSchema={folderSchema}
validateOnChange={false} validateOnChange={false}
onSubmit={handleSubmit} onSubmit={handleSubmit}
initialValues={initialFormData} initialValues={initialFormData}
> >
{({ values, errors, handleChange, setFieldValue }) => ( {({ values, errors, handleChange, setFieldValue }) => (
<Form noValidate> <Form noValidate>
<Grid gap={4}> <Grid gap={4}>
{isEditing && ( {isEditing && (
<GridItem xs={12} col={12}> <GridItem xs={12} col={12}>
<ContextInfo <ContextInfo
blocks={[ blocks={[
{ {
label: formatMessage({ label: formatMessage({
id: getTrad('modal.folder.create.elements'), id: getTrad('modal.folder.create.elements'),
defaultMessage: 'Elements', defaultMessage: 'Elements',
}), }),
value: formatMessage( value: formatMessage(
{ {
id: getTrad('modal.folder.elements.count'), id: getTrad('modal.folder.elements.count'),
defaultMessage: '{assetCount} assets, {folderCount} folders', defaultMessage: '{assetCount} assets, {folderCount} folders',
}, },
{ {
assetCount: folder?.files?.count ?? 0, assetCount: folder?.files?.count ?? 0,
folderCount: folder?.children?.length ?? 0, folderCount: folder?.children?.length ?? 0,
} }
), ),
}, },
{ {
label: formatMessage({ label: formatMessage({
id: getTrad('modal.folder.create.creation-date'), id: getTrad('modal.folder.create.creation-date'),
defaultMessage: 'Creation Date', defaultMessage: 'Creation Date',
}), }),
value: formatDate(new Date(folder.createdAt)), value: formatDate(new Date(folder.createdAt)),
}, },
]} ]}
/>
</GridItem>
)}
<GridItem xs={12} col={6}>
<TextInput
label={formatMessage({
id: getTrad('form.input.label.folder-name'),
defaultMessage: 'Name',
})}
name="name"
value={values.name}
error={errors.name}
onChange={handleChange}
disabled={formDisabled}
/> />
</GridItem> </GridItem>
)}
<GridItem xs={12} col={6}> <GridItem xs={12} col={6}>
<TextInput <Stack spacing={1}>
label={formatMessage({ <FieldLabel htmlFor="folder-parent">
id: getTrad('form.input.label.folder-name'), {formatMessage({
defaultMessage: 'Name', id: getTrad('form.input.label.folder-location'),
})} defaultMessage: 'Location',
name="name" })}
value={values.name} </FieldLabel>
error={errors.name}
onChange={handleChange}
disabled={formDisabled}
/>
</GridItem>
<GridItem xs={12} col={6}> <SelectTree
<Stack spacing={1}> options={folderStructure}
<FieldLabel htmlFor="folder-parent"> onChange={value => {
{formatMessage({ setFieldValue('parent', value);
id: getTrad('form.input.label.folder-location'), }}
defaultMessage: 'Location', defaultValue={values.parent}
})} name="parent"
</FieldLabel> menuPortalTarget={document.querySelector('body')}
inputId="folder-parent"
disabled={formDisabled}
{...(errors.parent
? {
'aria-errormessage': 'folder-parent-error',
'aria-invalid': true,
}
: {})}
/>
<SelectTree {errors.parent && (
options={folderStructure} <Typography
onChange={value => { variant="pi"
setFieldValue('parent', value); as="p"
}} id="folder-parent-error"
defaultValue={values.parent} textColor="danger600"
name="parent" >
menuPortalTarget={document.querySelector('body')} {errors.parent}
inputId="folder-parent" </Typography>
disabled={formDisabled} )}
{...(errors.parent </Stack>
? { </GridItem>
'aria-errormessage': 'folder-parent-error', </Grid>
'aria-invalid': true,
}
: {})}
/>
{errors.parent && ( <VisuallyHidden>
<Typography <button type="submit" tabIndex={-1} ref={submitButtonRef} name="hidden-submit">
variant="pi" {formatMessage({ id: 'submit', defaultMessage: 'Submit' })}
as="p" </button>
id="folder-parent-error" </VisuallyHidden>
textColor="danger600" </Form>
>
{errors.parent}
</Typography>
)}
</Stack>
</GridItem>
</Grid>
<VisuallyHidden>
<button type="submit" tabIndex={-1} ref={submitButtonRef} name="hidden-submit">
{formatMessage({ id: 'submit', defaultMessage: 'Submit' })}
</button>
</VisuallyHidden>
</Form>
)}
</Formik>
</ModalBody>
<ModalFooter
startActions={
<Button onClick={() => handleClose()} variant="tertiary" name="cancel">
{formatMessage({ id: 'cancel', defaultMessage: 'Cancel' })}
</Button>
}
endActions={
<Stack horizontal spacing={2}>
{isEditing && canUpdate && (
<Button type="button" variant="danger-light" onClick={handleDelete} name="delete">
{formatMessage({
id: 'modal.folder.create.delete',
defaultMessage: 'Delete folder',
})}
</Button>
)} )}
</Formik>
</ModalBody>
<Button <ModalFooter
onClick={() => submitButtonRef.current.click()} startActions={
name="submit" <Button onClick={() => onClose()} variant="tertiary" name="cancel">
loading={isLoading} {formatMessage({ id: 'cancel', defaultMessage: 'Cancel' })}
disabled={formDisabled}
>
{formatMessage(
isEditing
? { id: 'modal.folder.edit.submit', defaultMessage: 'Save' }
: { id: 'modal.folder.create.submit', defaultMessage: 'Create' }
)}
</Button> </Button>
</Stack> }
} endActions={
/> <Stack horizontal spacing={2}>
</ModalLayout> {isEditing && canUpdate && (
<Button
type="button"
variant="danger-light"
onClick={() => setShowConfirmDialog(true)}
name="delete"
>
{formatMessage({
id: 'modal.folder.create.delete',
defaultMessage: 'Delete folder',
})}
</Button>
)}
<Button
onClick={() => submitButtonRef.current.click()}
name="submit"
loading={isLoading}
disabled={formDisabled}
>
{formatMessage(
isEditing
? { id: 'modal.folder.edit.submit', defaultMessage: 'Save' }
: { id: 'modal.folder.create.submit', defaultMessage: 'Create' }
)}
</Button>
</Stack>
}
/>
</ModalLayout>
{showConfirmDialog && (
<RemoveFolderDialog onClose={() => setShowConfirmDialog(false)} onConfirm={handleDelete} />
)}
</>
); );
}; };

21
packages/core/upload/admin/src/components/EditFolderDialog/RemoveFolderDialog.js Normal file
View File

@ -0,0 +1,21 @@
import React from 'react';
import PropTypes from 'prop-types';
import { ConfirmDialog } from '@strapi/helper-plugin';
export const RemoveFolderDialog = ({ onClose, onConfirm }) => {
return (
<ConfirmDialog
isConfirmButtonLoading={false}
isOpen
onToggleDialog={onClose}
onConfirm={onConfirm}
/>
);
};
RemoveFolderDialog.propTypes = {
onClose: PropTypes.func.isRequired,
onConfirm: PropTypes.func.isRequired,
};
export default RemoveFolderDialog;

6
packages/core/upload/admin/src/hooks/useBulkRemove.js
View File

@ -2,7 +2,7 @@ import { useMutation, useQueryClient } from 'react-query';
import { useNotification } from '@strapi/helper-plugin'; import { useNotification } from '@strapi/helper-plugin';
import pluginId from '../pluginId'; import pluginId from '../pluginId';
import { axiosInstance, getRequestUrl } from '../utils'; import { axiosInstance, getRequestUrl, getTrad } from '../utils';
export const useBulkRemove = () => { export const useBulkRemove = () => {
const toggleNotification = useNotification(); const toggleNotification = useNotification();
@ -44,8 +44,8 @@ export const useBulkRemove = () => {
toggleNotification({ toggleNotification({
type: 'success', type: 'success',
message: { message: {
id: 'modal.remove.success-label', id: getTrad('modal.remove.success-label'),
defaultMessage: 'The folder has been successfully removed.', defaultMessage: 'Changes successfully saved',
}, },
}); });
}, },

2
packages/core/upload/admin/src/translations/en.json
View File

@ -62,7 +62,7 @@
"modal.nav.computer": "From computer", "modal.nav.computer": "From computer",
"modal.nav.selected": "selected", "modal.nav.selected": "selected",
"modal.nav.url": "From url", "modal.nav.url": "From url",
"modal.remove.success-label": "The asset has been successfully removed.", "modal.remove.success-label": "Changes successfully saved.",
"modal.selected-list.sub-header-subtitle": "Drag & drop to reorder the assets in the field", "modal.selected-list.sub-header-subtitle": "Drag & drop to reorder the assets in the field",
"modal.upload-list.footer.button": "Upload {number, plural, one {# asset} other {# assets}} to the library", "modal.upload-list.footer.button": "Upload {number, plural, one {# asset} other {# assets}} to the library",
"modal.upload-list.sub-header-subtitle": "Manage the assets before adding them to the Media Library", "modal.upload-list.sub-header-subtitle": "Manage the assets before adding them to the Media Library",