mirror of
https://github.com/strapi/strapi.git
synced 2025-11-03 03:17:11 +00:00
fixed notification wording + confirmation delete dialog
This commit is contained in:
ronronscelestes
parent
34046abe1f
commit
78f567b082
@ -1,6 +1,6 @@
|
||||
import * as yup from 'yup';
|
||||
import { Formik } from 'formik';
|
||||
import React, { useRef } from 'react';
|
||||
import React, { useRef, useState } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import isEmpty from 'lodash/isEmpty';
|
||||
import { useIntl } from 'react-intl';
|
||||
@ -25,6 +25,7 @@ import { useEditFolder } from '../../hooks/useEditFolder';
|
||||
import { useBulkRemove } from '../../hooks/useBulkRemove';
|
||||
import { ContextInfo } from '../ContextInfo';
|
||||
import SelectTree from '../SelectTree';
|
||||
import RemoveFolderDialog from './RemoveFolderDialog';
|
||||
|
||||
const folderSchema = yup.object({
|
||||
name: yup.string().required(),
|
||||
@ -38,6 +39,7 @@ const folderSchema = yup.object({
|
||||
|
||||
export const EditFolderDialog = ({ onClose, folder, folderStructure, canUpdate }) => {
|
||||
const submitButtonRef = useRef(null);
|
||||
const [showConfirmDialog, setShowConfirmDialog] = useState(false);
|
||||
const { formatMessage, formatDate } = useIntl();
|
||||
const { editFolder, isLoading } = useEditFolder();
|
||||
const { remove } = useBulkRemove();
|
||||
@ -94,177 +96,182 @@ export const EditFolderDialog = ({ onClose, folder, folderStructure, canUpdate }
|
||||
}
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handleDelete = async event => {
|
||||
event.preventDefault();
|
||||
|
||||
const handleDelete = async () => {
|
||||
await remove([folder]);
|
||||
|
||||
setShowConfirmDialog(false);
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<ModalLayout onClose={handleClose} labelledBy="title">
|
||||
<ModalHeader>
|
||||
<Typography fontWeight="bold" textColor="neutral800" as="h2" id="title">
|
||||
{formatMessage(
|
||||
isEditing
|
||||
? {
|
||||
id: getTrad('modal.folder.edit.title'),
|
||||
defaultMessage: 'Edit folder',
|
||||
}
|
||||
: {
|
||||
id: getTrad('modal.folder.create.title'),
|
||||
defaultMessage: 'Add new folder',
|
||||
}
|
||||
)}
|
||||
</Typography>
|
||||
</ModalHeader>
|
||||
<>
|
||||
<ModalLayout onClose={() => onClose()} labelledBy="title">
|
||||
<ModalHeader>
|
||||
<Typography fontWeight="bold" textColor="neutral800" as="h2" id="title">
|
||||
{formatMessage(
|
||||
isEditing
|
||||
? {
|
||||
id: getTrad('modal.folder.edit.title'),
|
||||
defaultMessage: 'Edit folder',
|
||||
}
|
||||
: {
|
||||
id: getTrad('modal.folder.create.title'),
|
||||
defaultMessage: 'Add new folder',
|
||||
}
|
||||
)}
|
||||
</Typography>
|
||||
</ModalHeader>
|
||||
|
||||
<ModalBody>
|
||||
<Formik
|
||||
validationSchema={folderSchema}
|
||||
validateOnChange={false}
|
||||
onSubmit={handleSubmit}
|
||||
initialValues={initialFormData}
|
||||
>
|
||||
{({ values, errors, handleChange, setFieldValue }) => (
|
||||
<Form noValidate>
|
||||
<Grid gap={4}>
|
||||
{isEditing && (
|
||||
<GridItem xs={12} col={12}>
|
||||
<ContextInfo
|
||||
blocks={[
|
||||
{
|
||||
label: formatMessage({
|
||||
id: getTrad('modal.folder.create.elements'),
|
||||
defaultMessage: 'Elements',
|
||||
}),
|
||||
value: formatMessage(
|
||||
{
|
||||
id: getTrad('modal.folder.elements.count'),
|
||||
defaultMessage: '{assetCount} assets, {folderCount} folders',
|
||||
},
|
||||
{
|
||||
assetCount: folder?.files?.count ?? 0,
|
||||
folderCount: folder?.children?.length ?? 0,
|
||||
}
|
||||
),
|
||||
},
|
||||
<ModalBody>
|
||||
<Formik
|
||||
validationSchema={folderSchema}
|
||||
validateOnChange={false}
|
||||
onSubmit={handleSubmit}
|
||||
initialValues={initialFormData}
|
||||
>
|
||||
{({ values, errors, handleChange, setFieldValue }) => (
|
||||
<Form noValidate>
|
||||
<Grid gap={4}>
|
||||
{isEditing && (
|
||||
<GridItem xs={12} col={12}>
|
||||
<ContextInfo
|
||||
blocks={[
|
||||
{
|
||||
label: formatMessage({
|
||||
id: getTrad('modal.folder.create.elements'),
|
||||
defaultMessage: 'Elements',
|
||||
}),
|
||||
value: formatMessage(
|
||||
{
|
||||
id: getTrad('modal.folder.elements.count'),
|
||||
defaultMessage: '{assetCount} assets, {folderCount} folders',
|
||||
},
|
||||
{
|
||||
assetCount: folder?.files?.count ?? 0,
|
||||
folderCount: folder?.children?.length ?? 0,
|
||||
}
|
||||
),
|
||||
},
|
||||
|
||||
{
|
||||
label: formatMessage({
|
||||
id: getTrad('modal.folder.create.creation-date'),
|
||||
defaultMessage: 'Creation Date',
|
||||
}),
|
||||
value: formatDate(new Date(folder.createdAt)),
|
||||
},
|
||||
]}
|
||||
{
|
||||
label: formatMessage({
|
||||
id: getTrad('modal.folder.create.creation-date'),
|
||||
defaultMessage: 'Creation Date',
|
||||
}),
|
||||
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 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 xs={12} col={6}>
|
||||
<Stack spacing={1}>
|
||||
<FieldLabel htmlFor="folder-parent">
|
||||
{formatMessage({
|
||||
id: getTrad('form.input.label.folder-location'),
|
||||
defaultMessage: 'Location',
|
||||
})}
|
||||
</FieldLabel>
|
||||
|
||||
<GridItem xs={12} col={6}>
|
||||
<Stack spacing={1}>
|
||||
<FieldLabel htmlFor="folder-parent">
|
||||
{formatMessage({
|
||||
id: getTrad('form.input.label.folder-location'),
|
||||
defaultMessage: 'Location',
|
||||
})}
|
||||
</FieldLabel>
|
||||
<SelectTree
|
||||
options={folderStructure}
|
||||
onChange={value => {
|
||||
setFieldValue('parent', value);
|
||||
}}
|
||||
defaultValue={values.parent}
|
||||
name="parent"
|
||||
menuPortalTarget={document.querySelector('body')}
|
||||
inputId="folder-parent"
|
||||
disabled={formDisabled}
|
||||
{...(errors.parent
|
||||
? {
|
||||
'aria-errormessage': 'folder-parent-error',
|
||||
'aria-invalid': true,
|
||||
}
|
||||
: {})}
|
||||
/>
|
||||
|
||||
<SelectTree
|
||||
options={folderStructure}
|
||||
onChange={value => {
|
||||
setFieldValue('parent', value);
|
||||
}}
|
||||
defaultValue={values.parent}
|
||||
name="parent"
|
||||
menuPortalTarget={document.querySelector('body')}
|
||||
inputId="folder-parent"
|
||||
disabled={formDisabled}
|
||||
{...(errors.parent
|
||||
? {
|
||||
'aria-errormessage': 'folder-parent-error',
|
||||
'aria-invalid': true,
|
||||
}
|
||||
: {})}
|
||||
/>
|
||||
{errors.parent && (
|
||||
<Typography
|
||||
variant="pi"
|
||||
as="p"
|
||||
id="folder-parent-error"
|
||||
textColor="danger600"
|
||||
>
|
||||
{errors.parent}
|
||||
</Typography>
|
||||
)}
|
||||
</Stack>
|
||||
</GridItem>
|
||||
</Grid>
|
||||
|
||||
{errors.parent && (
|
||||
<Typography
|
||||
variant="pi"
|
||||
as="p"
|
||||
id="folder-parent-error"
|
||||
textColor="danger600"
|
||||
>
|
||||
{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>
|
||||
<VisuallyHidden>
|
||||
<button type="submit" tabIndex={-1} ref={submitButtonRef} name="hidden-submit">
|
||||
{formatMessage({ id: 'submit', defaultMessage: 'Submit' })}
|
||||
</button>
|
||||
</VisuallyHidden>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</ModalBody>
|
||||
|
||||
<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' }
|
||||
)}
|
||||
<ModalFooter
|
||||
startActions={
|
||||
<Button onClick={() => onClose()} variant="tertiary" name="cancel">
|
||||
{formatMessage({ id: 'cancel', defaultMessage: 'Cancel' })}
|
||||
</Button>
|
||||
</Stack>
|
||||
}
|
||||
/>
|
||||
</ModalLayout>
|
||||
}
|
||||
endActions={
|
||||
<Stack horizontal spacing={2}>
|
||||
{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} />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -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;
|
||||
@ -2,7 +2,7 @@ import { useMutation, useQueryClient } from 'react-query';
|
||||
import { useNotification } from '@strapi/helper-plugin';
|
||||
|
||||
import pluginId from '../pluginId';
|
||||
import { axiosInstance, getRequestUrl } from '../utils';
|
||||
import { axiosInstance, getRequestUrl, getTrad } from '../utils';
|
||||
|
||||
export const useBulkRemove = () => {
|
||||
const toggleNotification = useNotification();
|
||||
@ -44,8 +44,8 @@ export const useBulkRemove = () => {
|
||||
toggleNotification({
|
||||
type: 'success',
|
||||
message: {
|
||||
id: 'modal.remove.success-label',
|
||||
defaultMessage: 'The folder has been successfully removed.',
|
||||
id: getTrad('modal.remove.success-label'),
|
||||
defaultMessage: 'Changes successfully saved',
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
@ -62,7 +62,7 @@
|
||||
"modal.nav.computer": "From computer",
|
||||
"modal.nav.selected": "selected",
|
||||
"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.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",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user