From cfd2e8057fcc3b788e5c7c53cf01f41631c7feb2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Saracca?= Date: Mon, 11 Nov 2024 16:06:56 -0300 Subject: [PATCH] feat: update collection in form --- public/locales/en/editCollection.json | 6 +- public/locales/en/shared.json | 9 +-- .../domain/useCases/editCollection.ts | 4 +- src/index.tsx | 18 +++--- .../edit-collection/EditCollection.tsx | 5 ++ .../collection-form/CollectionForm.tsx | 27 +++------ .../collection-form/useSubmitCollection.ts | 57 +++++++++++++------ 7 files changed, 76 insertions(+), 50 deletions(-) diff --git a/public/locales/en/editCollection.json b/public/locales/en/editCollection.json index 0ce5dab3e..a950d57c3 100644 --- a/public/locales/en/editCollection.json +++ b/public/locales/en/editCollection.json @@ -1,4 +1,8 @@ { "pageTitle": "Edit Collection", - "notAllowedToEditCollection": "You do not have permissions to edit a collection within this collection." + "notAllowedToEditCollection": "You do not have permissions to edit a collection within this collection.", + "infoAlert": { + "heading": "Edit Collection", + "text": "Edit your collection and click Save Changes. Asterisks indicate required fields." + } } diff --git a/public/locales/en/shared.json b/public/locales/en/shared.json index e7686ecaa..70811f611 100644 --- a/public/locales/en/shared.json +++ b/public/locales/en/shared.json @@ -138,9 +138,10 @@ "submitStatus": { "success": "Collection created successfully." }, - "formButtons": { - "save": "Create Collection", - "cancel": "Cancel" - } + "saveButton": { + "createMode": "Create Collection", + "editMode": "Save Changes" + }, + "cancelButton": "Cancel" } } diff --git a/src/collection/domain/useCases/editCollection.ts b/src/collection/domain/useCases/editCollection.ts index d09856102..30385ba87 100644 --- a/src/collection/domain/useCases/editCollection.ts +++ b/src/collection/domain/useCases/editCollection.ts @@ -4,8 +4,8 @@ import { CollectionDTO } from './DTOs/CollectionDTO' export async function editCollection( collectionRepository: CollectionRepository, - collectionId: string, - updatedCollection: CollectionDTO + updatedCollection: CollectionDTO, + collectionId: string ): Promise { return collectionRepository.edit(collectionId, updatedCollection).catch((error: WriteError) => { throw error diff --git a/src/index.tsx b/src/index.tsx index a50dc685e..c8cc67b83 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -8,13 +8,13 @@ import { AppLoader } from './sections/shared/layout/app-loader/AppLoader' const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement) root.render( - - }> - - - - - - - + // + }> + + + + + + + // ) diff --git a/src/sections/edit-collection/EditCollection.tsx b/src/sections/edit-collection/EditCollection.tsx index ba861cd79..4964aa9d6 100644 --- a/src/sections/edit-collection/EditCollection.tsx +++ b/src/sections/edit-collection/EditCollection.tsx @@ -94,6 +94,11 @@ export const EditCollection = ({ + + + {t('infoAlert.text')} + + (null) const { t } = useTranslation('shared', { keyPrefix: 'collectionForm' }) const navigate = useNavigate() + const onCreateMode = mode === 'create' const { submitForm, submitError, submissionStatus } = useSubmitCollection( mode, @@ -54,27 +58,15 @@ export const CollectionForm = ({ const { formState } = form - const preventEnterSubmit = (e: React.KeyboardEvent) => { - // When pressing Enter, only submit the form if the user is focused on the submit button itself - if (e.key !== 'Enter') return - - const isButton = e.target instanceof HTMLButtonElement - const isButtonTypeSubmit = isButton ? (e.target as HTMLButtonElement).type === 'submit' : false - - if (!isButton && !isButtonTypeSubmit) e.preventDefault() - } - function onSubmittedCollectionError() { if (formContainerRef.current) { formContainerRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' }) } } - const handleCancel = (event: MouseEvent) => { - event.preventDefault() - navigate(-1) + const handleCancel = () => { + navigate(RouteWithParams.COLLECTIONS(collectionIdOrParentCollectionId)) } - const disableSubmitButton = useMemo(() => { return submissionStatus === SubmissionStatus.IsSubmitting || !formState.isDirty }, [submissionStatus, formState.isDirty]) @@ -97,7 +89,6 @@ export const CollectionForm = ({
@@ -127,14 +118,14 @@ export const CollectionForm = ({ diff --git a/src/sections/shared/form/EditCreateCollectionForm/collection-form/useSubmitCollection.ts b/src/sections/shared/form/EditCreateCollectionForm/collection-form/useSubmitCollection.ts index f2caeb537..df57cedf6 100644 --- a/src/sections/shared/form/EditCreateCollectionForm/collection-form/useSubmitCollection.ts +++ b/src/sections/shared/form/EditCreateCollectionForm/collection-form/useSubmitCollection.ts @@ -11,6 +11,7 @@ import { } from '../EditCreateCollectionForm' import { CollectionDTO } from '@/collection/domain/useCases/DTOs/CollectionDTO' import { createCollection } from '@/collection/domain/useCases/createCollection' +import { editCollection } from '@/collection/domain/useCases/editCollection' import { RouteWithParams } from '@/sections/Route.enum' import { JSDataverseWriteErrorHandler } from '@/shared/helpers/JSDataverseWriteErrorHandler' import { CollectionFormHelper } from '../CollectionFormHelper' @@ -69,7 +70,7 @@ export function useSubmitCollection( const useFieldsFromParentChecked = formData[USE_FIELDS_FROM_PARENT] - const newCollection: CollectionDTO = { + const newOrUpdatedCollection: CollectionDTO = { name: formData.name, alias: formData.alias, type: formData.type, @@ -81,23 +82,47 @@ export function useSubmitCollection( facetIds: facetIdsDTO } - createCollection(collectionRepository, newCollection, collectionIdOrParentCollectionId) - .then(() => { - setSubmitError(null) - setSubmissionStatus(SubmissionStatus.SubmitComplete) + if (mode === 'create') { + createCollection( + collectionRepository, + newOrUpdatedCollection, + collectionIdOrParentCollectionId + ) + .then(() => { + setSubmitError(null) + setSubmissionStatus(SubmissionStatus.SubmitComplete) + + navigate(RouteWithParams.COLLECTIONS(newOrUpdatedCollection.alias), { + state: { created: true } + }) + return + }) + .catch((err: WriteError) => { + const error = new JSDataverseWriteErrorHandler(err) + const formattedError = error.getReasonWithoutStatusCode() ?? error.getErrorMessage() + setSubmitError(formattedError) + setSubmissionStatus(SubmissionStatus.Errored) + onSubmitErrorCallback() + }) + } else { + editCollection(collectionRepository, newOrUpdatedCollection, collectionIdOrParentCollectionId) + .then(() => { + setSubmitError(null) + setSubmissionStatus(SubmissionStatus.SubmitComplete) - navigate(RouteWithParams.COLLECTIONS(newCollection.alias), { - state: { created: true } + navigate(RouteWithParams.COLLECTIONS(newOrUpdatedCollection.alias), { + state: { edited: true } + }) + return + }) + .catch((err: WriteError) => { + const error = new JSDataverseWriteErrorHandler(err) + const formattedError = error.getReasonWithoutStatusCode() ?? error.getErrorMessage() + setSubmitError(formattedError) + setSubmissionStatus(SubmissionStatus.Errored) + onSubmitErrorCallback() }) - return - }) - .catch((err: WriteError) => { - const error = new JSDataverseWriteErrorHandler(err) - const formattedError = error.getReasonWithoutStatusCode() ?? error.getErrorMessage() - setSubmitError(formattedError) - setSubmissionStatus(SubmissionStatus.Errored) - onSubmitErrorCallback() - }) + } } return {