WIP

alchemy-fr · Dec 18, 2023 · 41f8efc · 41f8efc
1 parent 8e4015e
commit 41f8efc
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 84 deletions.
diff --git a/databox/client/src/components/Dialog/Workspace/AttributeClassManager.tsx b/databox/client/src/components/Dialog/Workspace/AttributeClassManager.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect} from 'react';
+import {useEffect} from 'react';
 import {AttributeClass, Workspace} from '../../../types';
 import {
     deleteAttributeClass,
@@ -23,35 +23,28 @@ function Item({
     usedFormSubmit: {
         submitting,
         register,
-        handleSubmit,
         control,
         watch,
         setValue,
-        reset,
         formState: {errors},
     },
-    formId,
 }: DefinitionItemFormProps<AttributeClass>) {
     const {t} = useTranslation();
 
-    React.useEffect(() => {
-        reset(data);
-    }, [data]);
-
     const isPublic = watch('public');
     const isEditable = watch('editable');
     const displayedPermissions = !isPublic
         ? [AclPermission.VIEW, AclPermission.EDIT, AclPermission.ALL]
         : [AclPermission.EDIT];
 
     useEffect(() => {
-        if (!isPublic) {
+        if (!isPublic && isEditable) {
             setValue('editable', false);
         }
-    }, [isPublic]);
+    }, [isPublic, isEditable]);
 
     return (
-        <form id={formId} onSubmit={handleSubmit}>
+        <>
             <FormRow>
                 <TextField
                     label={t('form.attribute_class.name.label', 'Name')}
@@ -90,7 +83,7 @@ function Item({
                     />
                 </FormRow>
             )}
-        </form>
+        </>
     );
 }
 

diff --git a/databox/client/src/components/Dialog/Workspace/AttributeDefinitionManager.tsx b/databox/client/src/components/Dialog/Workspace/AttributeDefinitionManager.tsx
@@ -217,6 +217,7 @@ export default function AttributeDefinitionManager({
             handleSave={handleSave}
             handleDelete={deleteAttributeDefinition}
             onSort={onSort}
+            normalizeData={createData}
         />
     );
 }

diff --git a/databox/client/src/components/Dialog/Workspace/DefinitionManager.tsx b/databox/client/src/components/Dialog/Workspace/DefinitionManager.tsx
@@ -40,7 +40,6 @@ export type DefinitionItemProps<D extends DefinitionBase> = {
 };
 
 export type DefinitionItemFormProps<D extends DefinitionBase & FieldValues> = {
-    formId: string;
     usedFormSubmit: UseFormSubmitReturn<D>;
     workspaceId: string;
 } & DefinitionItemProps<D>;
@@ -96,6 +95,7 @@ type Props<D extends DefinitionBase> = {
     handleDelete?: (id: string) => Promise<void>;
     workspaceId: string;
     onSort?: OnSort;
+    normalizeData?: (data: D) => D;
 };
 
 export default function DefinitionManager<D extends DefinitionBase>({
@@ -186,7 +186,18 @@ export default function DefinitionManager<D extends DefinitionBase>({
         },
     });
 
-    const {submitting, remoteErrors, forbidNavigation} = usedFormSubmit;
+    const {
+        submitting,
+        remoteErrors,
+        forbidNavigation,
+        reset,
+    } = usedFormSubmit;
+
+    React.useEffect(() => {
+        if (item && 'new' !== item) {
+            reset(item);
+        }
+    }, [item]);
 
     const onDelete = useCallback(() => {
         if (handleDelete && typeof item === 'object') {
@@ -344,23 +355,20 @@ export default function DefinitionManager<D extends DefinitionBase>({
                     }}
                 >
                     {item && (
-                        <>
-                            <form
-                                id={formId}
-                                onSubmit={usedFormSubmit.handleSubmit}
-                            >
-                                {React.createElement(itemComponent, {
-                                    data:
-                                        item === 'new'
-                                            ? (createNewItem() as D)
-                                            : item!,
-                                    key: item === 'new' ? 'new' : item!.id,
-                                    formId,
-                                    usedFormSubmit,
-                                    workspaceId,
-                                })}
-                            </form>
-                        </>
+                        <form
+                            id={formId}
+                            onSubmit={usedFormSubmit.handleSubmit}
+                        >
+                            {React.createElement(itemComponent, {
+                                data:
+                                    item === 'new'
+                                        ? (createNewItem() as D)
+                                        : item!,
+                                key: item === 'new' ? 'new' : item!.id,
+                                usedFormSubmit,
+                                workspaceId,
+                            })}
+                        </form>
                     )}
                     <RemoteErrors errors={remoteErrors} />
                     {item && item !== 'new' && handleDelete && (

diff --git a/databox/client/src/components/Dialog/Workspace/RenditionClassManager.tsx b/databox/client/src/components/Dialog/Workspace/RenditionClassManager.tsx
@@ -6,7 +6,6 @@ import DefinitionManager, {
     DefinitionItemProps,
 } from './DefinitionManager';
 import {useTranslation} from 'react-i18next';
-import {useForm} from 'react-hook-form';
 import FormFieldErrors from '../../Form/FormFieldErrors';
 import {
     deleteRenditionClass,
@@ -16,53 +15,40 @@ import {
 } from '../../../api/rendition';
 import CheckboxWidget from '../../Form/CheckboxWidget';
 import RenditionClassPermissions from './RenditionClassPermissions';
-import {useDirtyFormPrompt} from '../Tabbed/FormTab';
 
 function Item({
     data,
-    usedFormSubmit,
-    formId,
-}: DefinitionItemFormProps<RenditionClass>) {
-    const {t} = useTranslation();
-
-    const {
-        register,
-        handleSubmit,
+    usedFormSubmit: {
         submitting,
-        watch,
+        register,
         control,
+        watch,
         formState: {errors},
-        forbidNavigation,
-    } = usedFormSubmit;
-
-    const {} = useForm<any>({
-        defaultValues: data,
-    });
-    useDirtyFormPrompt(forbidNavigation);
+    },
+}: DefinitionItemFormProps<RenditionClass>) {
+    const {t} = useTranslation();
 
     const isPublic = watch('public');
 
     return (
         <>
-            <form id={formId} onSubmit={handleSubmit}>
-                <FormRow>
-                    <TextField
-                        label={t('form.rendition_class.name.label', 'Name')}
-                        {...register('name')}
-                        disabled={submitting}
-                    />
-                    <FormFieldErrors field={'name'} errors={errors} />
-                </FormRow>
-                <FormRow>
-                    <CheckboxWidget
-                        label={t('form.rendition_class.public.label', 'Public')}
-                        control={control}
-                        name={'public'}
-                        disabled={submitting}
-                    />
-                    <FormFieldErrors field={'public'} errors={errors} />
-                </FormRow>
-            </form>
+            <FormRow>
+                <TextField
+                    label={t('form.rendition_class.name.label', 'Name')}
+                    {...register('name')}
+                    disabled={submitting}
+                />
+                <FormFieldErrors field={'name'} errors={errors} />
+            </FormRow>
+            <FormRow>
+                <CheckboxWidget
+                    label={t('form.rendition_class.public.label', 'Public')}
+                    control={control}
+                    name={'public'}
+                    disabled={submitting}
+                />
+                <FormFieldErrors field={'public'} errors={errors} />
+            </FormRow>
             {data.id && !isPublic && (
                 <FormRow>
                     <InputLabel>

diff --git a/databox/client/src/components/Dialog/Workspace/RenditionDefinitionManager.tsx b/databox/client/src/components/Dialog/Workspace/RenditionDefinitionManager.tsx
@@ -18,26 +18,27 @@ import RenditionClassSelect from '../../Form/RenditionClassSelect';
 import CheckboxWidget from '../../Form/CheckboxWidget';
 import apiClient from '../../../api/api-client';
 import {toast} from 'react-toastify';
-import {useDirtyFormPrompt} from '../Tabbed/FormTab';
+import React from "react";
 
 function Item({
-    formId,
+    data,
     usedFormSubmit: {
+        submitting,
         register,
-        handleSubmit,
         control,
+        reset,
         formState: {errors},
-        submitting,
-        forbidNavigation,
     },
     workspaceId,
 }: DefinitionItemFormProps<RenditionDefinition>) {
     const {t} = useTranslation();
 
-    useDirtyFormPrompt(forbidNavigation);
+    React.useEffect(() => {
+        reset(data);
+    }, [data]);
 
     return (
-        <form id={formId} onSubmit={handleSubmit}>
+        <>
             <FormRow>
                 <TextField
                     label={t('form.rendition_definition.name.label', 'Name')}
@@ -133,7 +134,7 @@ function Item({
                     />
                 </FormGroup>
             </FormRow>
-        </form>
+        </>
     );
 }
 

diff --git a/databox/client/src/components/Dialog/Workspace/TagManager.tsx b/databox/client/src/components/Dialog/Workspace/TagManager.tsx
@@ -9,26 +9,20 @@ import {useTranslation} from 'react-i18next';
 import {Controller} from 'react-hook-form';
 import FormFieldErrors from '../../Form/FormFieldErrors';
 import {deleteTag, getTags, postTag, putTag} from '../../../api/tag';
-import {useDirtyFormPrompt} from '../Tabbed/FormTab';
 import ColorPicker from '../../Form/ColorPicker';
 
 function Item({
     usedFormSubmit: {
         register,
         control,
-        handleSubmit,
         submitting,
-        forbidNavigation,
         formState: {errors},
     },
-    formId,
 }: DefinitionItemFormProps<Tag>) {
     const {t} = useTranslation();
 
-    useDirtyFormPrompt(forbidNavigation);
-
     return (
-        <form id={formId} onSubmit={handleSubmit}>
+        <>
             <FormRow>
                 <TextField
                     label={t('form.tag.name.label', 'Name')}
@@ -55,7 +49,7 @@ function Item({
                 />
                 <FormFieldErrors field={'color'} errors={errors} />
             </FormRow>
-        </form>
+        </>
     );
 }