frontend: add confirmation dialog when deselecting include comment in user entity addition

Author: Synar

frontend/app.vue

@@ -12,9 +12,19 @@
   </NuxtLayout>
 
   <Toast />
+
+  <ConfirmPopup group="delete">
+    <template #message="slotProps">
+      <div class="flex flex-row items-center w-full gap-2 p-4 mb-2 pb-0">
+        <AppIcon :icon-name="slotProps.message.icon!" />
+        <span>{{ slotProps.message.message }} <b>{{ (slotProps.message as ExtendedConfirmationOptions).objectId }}</b></span>
+      </div>
+    </template>
+  </ConfirmPopup>
 </template>
 
 <script setup lang="ts">
+import type { ConfirmationOptions } from 'primevue/confirmationoptions'
 import { useHead } from '#imports'
 import state from '~/lib/viewer-state'
 
@@ -28,4 +38,8 @@ useHead({
     href: state.logo ?? '/default_favicon.ico',
   }],
 })
+
+interface ExtendedConfirmationOptions extends ConfirmationOptions {
+  objectId?: string
+}
 </script>

frontend/components/viewer/EntityAddForm.vue

@@ -5,7 +5,6 @@
     closable
     class="w-full  max-w-[30rem]"
     :header="props.family.entity_form.title"
-    :content-props="{ onClick: (event: Event) => { event.stopPropagation() } }"
   >
     <!-- Entity Form Pages -->
     <form
@@ -35,12 +34,20 @@
             v-model:locations="editedEntity!.locations"
           />
 
-          <AdminInputSwitchField
+          <div
             v-if="state.permissions?.can_add_comment"
-            id="include_comment"
-            label="Ajouter un commentaire"
-            v-model:="include_comment"
-          />
+            class="flex flex-col gap-2"
+          >
+            <span class="flex items-center gap-2">
+              <ToggleSwitch
+                class="shrink-0"
+                :model-value="include_comment"
+                input-id="include_comment"
+                @change="(event: Event) => onIncludeCommentToggle(event)"
+              />
+              <label for="include_comment">Inclure un commentaire</label>
+            </span>
+          </div>
         </template>
         <template v-else>
           <FormDynamicField
@@ -147,6 +154,7 @@
 </template>
 
 <script setup lang="ts">
+import type { ConfirmationOptions } from 'primevue/confirmationoptions'
 import type { Category, EntityOrCommentData, Family, FormField, PublicNewComment, PublicNewEntity } from '~/lib'
 import state from '~/lib/viewer-state'
 import { isValidRichText, isValidText } from '~/lib/validation'
@@ -328,4 +336,32 @@ async function realOnSave(token: string | null) {
   }
   processingRequest.value = false
 }
+
+const confirm = useConfirm()
+function onIncludeCommentToggle(event: Event) {
+  console.log(event)
+  console.log(event.currentTarget as HTMLElement)
+  if (!include_comment.value) {
+    include_comment.value = true
+  }
+  else {
+    const options: ConfirmationOptions = {
+      target: event.currentTarget as HTMLElement,
+      group: 'delete',
+      message: `Ne pas inclure de commentaire empêchera les autres utilisateur·ices de bénéficier de vos retours, 
+      et ne vous laissera préciser que les informations générales. Si vous avez une expérience personelle avec cette entité, 
+      nous vous conseillons d'inclure un commentaire.`,
+      icon: 'warning',
+      rejectClass: 'p-button-secondary p-button-outlined p-button-sm',
+      acceptClass: 'p-button-sm',
+      rejectLabel: 'Annuler',
+      acceptLabel: 'Confirmer',
+      reject: () => {},
+      accept: () => {
+        include_comment.value = false
+      },
+    }
+    confirm.require(options)
+  }
+}
 </script>

frontend/layouts/admin-ui.vue

@@ -79,20 +79,10 @@
         </Card>
       </div>
     </div>
-
-    <ConfirmPopup group="delete">
-      <template #message="slotProps">
-        <div class="flex flex-row items-center w-full gap-2 p-4 mb-2 pb-0">
-          <AppIcon :icon-name="slotProps.message.icon!" />
-          <span>{{ slotProps.message.message }} <b>{{ (slotProps.message as ExtendedConfirmationOptions).objectId }}</b></span>
-        </div>
-      </template>
-    </ConfirmPopup>
   </div>
 </template>
 
 <script setup lang="ts">
-import type { ConfirmationOptions } from 'primevue/confirmationoptions'
 import AdminNavbar from '~/components/admin/Navbar.vue'
 
 type BreadcrumbItem = {
@@ -114,10 +104,6 @@ export type InitAdminLayout = (
   breadcrumb: BreadcrumbItem[]
 ) => void
 
-interface ExtendedConfirmationOptions extends ConfirmationOptions {
-  objectId?: string
-}
-
 const currentBreadcrumbs = ref<BreadcrumbItem[]>([])
 const currentActions = ref<ActionItem[]>([])
 const cardTitle = ref('')