frontend: enable direct json editor on comment form

Author: Synar

frontend/pages/admin/families/[id]/comments.vue

@@ -1,18 +1,39 @@
 <template>
-  <div>
-    <p class="text-muted-color">
-      Une page additionelle est insérée automatiquement au début du formulaire,
-      contenant le nom de l'auteur.ice ainsi qu'un champ libre.
-    </p>
-
-    <AdminFamiliesEditForm
-      :original-form-fields="fetchedFamily.comment_form.fields"
-      :on-save-callback="onSave"
-      kind-name="commentaire"
-      kind="comment"
-      :categories="categories"
-    />
-  </div>
+  <Tabs v-model:value="tabValue">
+    <TabList>
+      <Tab value="0">
+        Éditeur visuel
+      </Tab>
+      <Tab value="1">
+        Éditeur avancé
+      </Tab>
+    </TabList>
+    <TabPanels>
+      <TabPanel value="0">
+        <p class="text-muted-color">
+          Une page additionelle est insérée automatiquement au début du formulaire,
+          contenant le nom de l'auteur.ice ainsi qu'un champ libre.
+        </p>
+
+        <AdminFamiliesEditForm
+          :original-form-fields="fetchedFamily.comment_form.fields"
+          :categories="categories"
+          :on-save-callback="onSave"
+          class="-ml-4"
+          kind="comment"
+          kind-name="commentaire"
+        />
+      </TabPanel>
+      <TabPanel value="1">
+        <AdminFamiliesEditFormJson
+          :original-form-fields="fetchedFamily.comment_form.fields"
+          :on-sync-callback="onSynchronise"
+          kind="comment"
+          kind-name="commentaire"
+        />
+      </TabPanel>
+    </TabPanels>
+  </Tabs>
 </template>
 
 <script setup lang="ts">
@@ -28,9 +49,9 @@ if (!state.is_admin)
   navigateTo('/admin/home')
 
 const id = useRoute().params.id as string
+const tabValue = ref('0')
 
 const fetchedFamily = await state.fetchFamily(id)
-const editedFamily = JSON.parse(JSON.stringify(fetchedFamily))
 await state.fetchCategories()
 const categories = state.categories.filter(category => category.family_id == fetchedFamily.id)
 
@@ -47,13 +68,24 @@ initAdminLayout(
 
 async function onSave(newFormFields: FormField[]): Promise<{ error: Error | undefined }> {
   try {
-    editedFamily.comment_form.fields = newFormFields
-    await state.client.updateFamily(id, editedFamily)
+    fetchedFamily.comment_form.fields = newFormFields
+    await state.client.updateFamily(id, fetchedFamily)
     navigateTo('/admin/families')
     return { error: undefined }
   }
   catch (error) {
     return { error: error as Error }
   }
 }
+
+async function onSynchronise(newFormFields: FormField[]): Promise<{ error: Error | undefined }> {
+  try {
+    fetchedFamily.comment_form.fields = newFormFields
+    tabValue.value = '0' // Switch back to the visual editor tab after synchronization
+    return { error: undefined }
+  }
+  catch (error) {
+    return { error: error as Error }
+  }
+}
 </script>

frontend/pages/admin/families/[id]/entities.vue

@@ -16,20 +16,20 @@
         </p>
 
         <AdminFamiliesEditForm
-          class="-ml-4"
           :original-form-fields="fetchedFamily.entity_form.fields"
-          :on-save-callback="onSave"
           :categories="categories"
-          kind-name="entité"
+          :on-save-callback="onSave"
+          class="-ml-4"
           kind="entity"
+          kind-name="entité"
         />
       </TabPanel>
       <TabPanel value="1">
         <AdminFamiliesEditFormJson
           :original-form-fields="fetchedFamily.entity_form.fields"
           :on-sync-callback="onSynchronise"
-          kind-name="entité"
           kind="entity"
+          kind-name="entité"
         />
       </TabPanel>
     </TabPanels>
@@ -51,7 +51,7 @@ if (!state.is_admin)
 const id = useRoute().params.id as string
 const tabValue = ref('0')
 
-const fetchedFamily = await state.client.getFamily(id)
+const fetchedFamily = await state.fetchFamily(id)
 await state.fetchCategories()
 const categories = state.categories.filter(category => category.family_id == fetchedFamily.id)
 
@@ -81,7 +81,7 @@ async function onSave(newFormFields: FormField[]): Promise<{ error: Error | unde
 async function onSynchronise(newFormFields: FormField[]): Promise<{ error: Error | undefined }> {
   try {
     fetchedFamily.entity_form.fields = newFormFields
-    tabValue.value = '0'
+    tabValue.value = '0' // Switch back to the visual editor tab after synchronization
     return { error: undefined }
   }
   catch (error) {