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

BulkMoveDialog: add initial error handling

Browse Source
This commit is contained in:
Gustav Hansen 2022-05-31 22:09:07 +02:00
parent 0c6b48e534
commit fdf9ba5c74
3 changed files with 33 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/core/upload/admin/src/components/BulkMoveDialog/BulkMoveDialog.js
View File

@ -20,7 +20,7 @@ import { getTrad } from '../../utils';
import SelectTree from '../SelectTree'; import SelectTree from '../SelectTree';
import { useFolderStructure } from '../../hooks/useFolderStructure'; import { useFolderStructure } from '../../hooks/useFolderStructure';
export const BulkMoveDialog = ({ onClose }) => { export const BulkMoveDialog = ({ onClose, errors }) => {
const submitButtonRef = useRef(null); const submitButtonRef = useRef(null);
const { formatMessage } = useIntl(); const { formatMessage } = useIntl();
const { data: folderStructure, isLoading } = useFolderStructure(); const { data: folderStructure, isLoading } = useFolderStructure();
@ -48,7 +48,12 @@ export const BulkMoveDialog = ({ onClose }) => {
</ModalHeader> </ModalHeader>
<ModalBody> <ModalBody>
<Formik validateOnChange={false} onSubmit={handleSubmit} initialValues={initialFormData}> <Formik
validateOnChange={false}
onSubmit={handleSubmit}
initialValues={initialFormData}
initialErrors={errors}
>
{({ values, errors, setFieldValue }) => ( {({ values, errors, setFieldValue }) => (
<Form noValidate> <Form noValidate>
<Grid gap={4}> <Grid gap={4}>
@ -118,8 +123,13 @@ export const BulkMoveDialog = ({ onClose }) => {
); );
}; };
BulkMoveDialog.defaultProps = {}; BulkMoveDialog.defaultProps = {
errors: null,
};
BulkMoveDialog.propTypes = { BulkMoveDialog.propTypes = {
errors: PropTypes.shape({
parent: PropTypes.string.isRequired,
}),
onClose: PropTypes.func.isRequired, onClose: PropTypes.func.isRequired,
}; };

1
packages/core/upload/admin/src/pages/App/MediaLibrary.js
View File

@ -29,7 +29,6 @@ import { getTrad } from '../../utils';
import { PaginationFooter } from '../../components/PaginationFooter'; import { PaginationFooter } from '../../components/PaginationFooter';
import { useMediaLibraryPermissions } from '../../hooks/useMediaLibraryPermissions'; import { useMediaLibraryPermissions } from '../../hooks/useMediaLibraryPermissions';
import { EmptyAssets } from '../../components/EmptyAssets'; import { EmptyAssets } from '../../components/EmptyAssets';
import { useFolderStructure } from '../../hooks/useFolderStructure';
import { BulkActions } from './components/BulkActions'; import { BulkActions } from './components/BulkActions';
import { Filters } from './components/Filters'; import { Filters } from './components/Filters';
import { Header } from './components/Header'; import { Header } from './components/Header';

25
packages/core/upload/admin/src/pages/App/components/BulkMoveButton.js
View File

@ -1,16 +1,20 @@
import React, { useState } from 'react'; import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import isEmpty from 'lodash/isEmpty';
import { useIntl } from 'react-intl'; import { useIntl } from 'react-intl';
import { Button } from '@strapi/design-system/Button'; import { Button } from '@strapi/design-system/Button';
import Folder from '@strapi/icons/Folder'; import Folder from '@strapi/icons/Folder';
import { getAPIInnerErrors } from '@strapi/helper-plugin';
import { BulkMoveDialog } from '../../../components/BulkMoveDialog'; import { BulkMoveDialog } from '../../../components/BulkMoveDialog';
import { AssetDefinition, FolderDefinition } from '../../../constants'; import { AssetDefinition, FolderDefinition } from '../../../constants';
import { useBulkMove } from '../../../hooks/useBulkMove'; import { useBulkMove } from '../../../hooks/useBulkMove';
import { getTrad } from '../../../utils';
export const BulkMoveButton = ({ selected, onSuccess }) => { export const BulkMoveButton = ({ selected, onSuccess }) => {
const { formatMessage } = useIntl(); const { formatMessage } = useIntl();
const [showConfirmDialog, setShowConfirmDialog] = useState(false); const [showConfirmDialog, setShowConfirmDialog] = useState(false);
const [dialogErrors, setDialogErrors] = useState(null);
const { move } = useBulkMove(); const { move } = useBulkMove();
const handleConfirmMove = async ({ moved, destinationFolderId } = {}) => { const handleConfirmMove = async ({ moved, destinationFolderId } = {}) => {
@ -23,12 +27,23 @@ export const BulkMoveButton = ({ selected, onSuccess }) => {
setShowConfirmDialog(false); setShowConfirmDialog(false);
// eslint-ignore-next-line no-empty // eslint-ignore-next-line no-empty
} catch (error) { } catch (error) {
// TODO: const errors = getAPIInnerErrors(error, { getTrad });
// - keep dialog open const formikErrors = Object.entries(errors).reduce((acc, [key, error]) => {
// - show error message ? acc[key] = error.defaultMessage;
return acc;
}, {});
if (!isEmpty(formikErrors)) {
setDialogErrors(formikErrors);
}
} }
}; };
useEffect(() => {
setShowConfirmDialog(!!dialogErrors);
}, [dialogErrors, setShowConfirmDialog]);
return ( return (
<> <>
<Button <Button
@ -40,7 +55,7 @@ export const BulkMoveButton = ({ selected, onSuccess }) => {
{formatMessage({ id: 'global.move', defaultMessage: 'Move' })} {formatMessage({ id: 'global.move', defaultMessage: 'Move' })}
</Button> </Button>
{showConfirmDialog && <BulkMoveDialog onClose={handleConfirmMove} />} {showConfirmDialog && <BulkMoveDialog onClose={handleConfirmMove} errors={dialogErrors} />}
</> </>
); );
}; };