From ab086466547bd5100255077d3ba809210fd89436 Mon Sep 17 00:00:00 2001
From: antoine <guingand.antoine@gmail.com>
Date: Tue, 20 May 2025 12:50:34 +0200
Subject: [PATCH 1/2] Add command form error alert

---
 .../commands/components/CommandFormModal.vue  | 48 ++++++++++++-------
 resources/js/form/Form.ts                     |  4 ++
 2 files changed, 35 insertions(+), 17 deletions(-)

diff --git a/resources/js/commands/components/CommandFormModal.vue b/resources/js/commands/components/CommandFormModal.vue
index 11967321e..c0f94a0fe 100644
--- a/resources/js/commands/components/CommandFormModal.vue
+++ b/resources/js/commands/components/CommandFormModal.vue
@@ -14,6 +14,8 @@
     import { Button } from "@/components/ui/button";
     import { __ } from "@/utils/i18n";
     import { CommandFormExtraData } from "@/commands/types";
+    import { Alert, AlertDescription } from "@/components/ui/alert";
+    import { OctagonAlert } from "lucide-vue-next";
 
     const props = defineProps<{
         commands: CommandManager,
@@ -55,24 +57,36 @@
                         ref="form"
                     />
                 </div>
-                <DialogFooter>
-                    <DialogClose as-child>
-                        <Button variant="outline">
-                            {{ __('sharp::modals.cancel_button') }}
-                        </Button>
-                    </DialogClose>
-                    <template v-if="commands.state.currentCommandForm.config.showSubmitAndReopenButton">
-                        <Button variant="outline"
-                            :disabled="commands.state.currentCommandFormLoading"
-                            @click="form.submit<CommandFormExtraData>({ _shouldReopen: true })"
-                        >
-                            {{ commands.state.currentCommandForm.config.submitAndReopenButtonLabel ?? __('sharp::modals.command.submit_and_reopen_button') }}
-                        </Button>
+                <div class="flex flex-col sm:flex-row sm:items-end sm:justify-end gap-4">
+                    <template v-if="commands.state.currentCommandForm.hasErrors">
+                        <div class="flex-1">
+                            <Alert class="py-2" variant="destructive">
+                                <OctagonAlert class="size-4 text-destructive mt-0!" />
+                                <AlertDescription class="text-xs text-foreground">
+                                    {{ __('sharp::form.validation_error.title') }}  {{ __('sharp::form.validation_error.description') }}
+                                </AlertDescription>
+                            </Alert>
+                        </div>
                     </template>
-                    <Button :disabled="commands.state.currentCommandFormLoading" @click="form.submit()">
-                        {{ commands.state.currentCommandForm.config.buttonLabel ?? __('sharp::modals.command.submit_button') }}
-                    </Button>
-                </DialogFooter>
+                    <DialogFooter>
+                        <DialogClose as-child>
+                            <Button variant="outline">
+                                {{ __('sharp::modals.cancel_button') }}
+                            </Button>
+                        </DialogClose>
+                        <template v-if="commands.state.currentCommandForm.config.showSubmitAndReopenButton">
+                            <Button variant="outline"
+                                :disabled="commands.state.currentCommandFormLoading"
+                                @click="form.submit<CommandFormExtraData>({ _shouldReopen: true })"
+                            >
+                                {{ commands.state.currentCommandForm.config.submitAndReopenButtonLabel ?? __('sharp::modals.command.submit_and_reopen_button') }}
+                            </Button>
+                        </template>
+                        <Button :disabled="commands.state.currentCommandFormLoading" @click="form.submit()">
+                            {{ commands.state.currentCommandForm.config.buttonLabel ?? __('sharp::modals.command.submit_button') }}
+                        </Button>
+                    </DialogFooter>
+                </div>
             </template>
         </DialogScrollContent>
     </Dialog>
diff --git a/resources/js/form/Form.ts b/resources/js/form/Form.ts
index 512c80870..8de717404 100644
--- a/resources/js/form/Form.ts
+++ b/resources/js/form/Form.ts
@@ -73,6 +73,10 @@ export class Form implements FormData, CommandFormData, EventTarget {
     set errors(errors) {
         this.state.errors = errors;
     }
+    get hasErrors()
+    {
+        return Object.keys(this.errors).length > 0;
+    }
 
     get meta() {
         return this.state.meta;

From 07e9b4d252b082e690b01c45088576a1abfa206c Mon Sep 17 00:00:00 2001
From: antoine <guingand.antoine@gmail.com>
Date: Wed, 21 May 2025 12:13:40 +0200
Subject: [PATCH 2/2] Update alert UI

---
 .../commands/components/CommandFormModal.vue  | 66 +++++++++----------
 .../ui/dialog/DialogScrollContent.vue         | 45 +++++++------
 resources/js/form/Form.ts                     |  3 +-
 resources/js/form/components/Form.vue         | 11 +++-
 4 files changed, 68 insertions(+), 57 deletions(-)

diff --git a/resources/js/commands/components/CommandFormModal.vue b/resources/js/commands/components/CommandFormModal.vue
index c0f94a0fe..b7f60e7a5 100644
--- a/resources/js/commands/components/CommandFormModal.vue
+++ b/resources/js/commands/components/CommandFormModal.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
     import { CommandManager } from "../CommandManager";
-    import { ref, watchEffect } from "vue";
+    import { ref, useTemplateRef, watchEffect } from "vue";
     import type SharpForm from '@/form/components/Form.vue';
     import {
         Dialog,
@@ -14,8 +14,8 @@
     import { Button } from "@/components/ui/button";
     import { __ } from "@/utils/i18n";
     import { CommandFormExtraData } from "@/commands/types";
-    import { Alert, AlertDescription } from "@/components/ui/alert";
-    import { OctagonAlert } from "lucide-vue-next";
+    import { useEventListener } from "@vueuse/core";
+    import { FormEvents } from "@/form/Form";
 
     const props = defineProps<{
         commands: CommandManager,
@@ -25,6 +25,12 @@
     const modalOpen = ref(false);
     const currentFormUpdatedKey = ref(0);
 
+    const content = useTemplateRef<InstanceType<typeof DialogScrollContent>>('content');
+
+    useEventListener<FormEvents>(() => props.commands.state.currentCommandForm, 'error', () => {
+        content.value.scrollToTop();
+    });
+
     watchEffect(() => {
         modalOpen.value = !!props.commands.state.currentCommandForm;
         currentFormUpdatedKey.value++;
@@ -36,7 +42,11 @@
         v-model:open="modalOpen"
         @update:open="!$event && $nextTick(() => commands.finish())"
     >
-        <DialogScrollContent class="sm:max-w-[558px] gap-8" @pointer-down-outside.prevent>
+        <DialogScrollContent
+            class="sm:max-w-[558px] gap-8"
+            @pointer-down-outside.prevent
+            ref="content"
+        >
             <template v-if="commands.state.currentCommandForm">
                 <DialogHeader>
                     <DialogTitle>
@@ -51,42 +61,32 @@
                     <SharpForm
                         :post-fn="(data) => commands.postForm(data)"
                         :form="commands.state.currentCommandForm"
+                        :show-error-alert="commands.state.currentCommandForm.hasErrors"
+                        :error-alert-message="commands.state.currentCommandForm.fieldError('error')"
                         @loading="(loading) => commands.state.currentCommandFormLoading = loading"
                         :key="`form-${currentFormUpdatedKey}`"
                         modal
                         ref="form"
                     />
                 </div>
-                <div class="flex flex-col sm:flex-row sm:items-end sm:justify-end gap-4">
-                    <template v-if="commands.state.currentCommandForm.hasErrors">
-                        <div class="flex-1">
-                            <Alert class="py-2" variant="destructive">
-                                <OctagonAlert class="size-4 text-destructive mt-0!" />
-                                <AlertDescription class="text-xs text-foreground">
-                                    {{ __('sharp::form.validation_error.title') }}  {{ __('sharp::form.validation_error.description') }}
-                                </AlertDescription>
-                            </Alert>
-                        </div>
-                    </template>
-                    <DialogFooter>
-                        <DialogClose as-child>
-                            <Button variant="outline">
-                                {{ __('sharp::modals.cancel_button') }}
-                            </Button>
-                        </DialogClose>
-                        <template v-if="commands.state.currentCommandForm.config.showSubmitAndReopenButton">
-                            <Button variant="outline"
-                                :disabled="commands.state.currentCommandFormLoading"
-                                @click="form.submit<CommandFormExtraData>({ _shouldReopen: true })"
-                            >
-                                {{ commands.state.currentCommandForm.config.submitAndReopenButtonLabel ?? __('sharp::modals.command.submit_and_reopen_button') }}
-                            </Button>
-                        </template>
-                        <Button :disabled="commands.state.currentCommandFormLoading" @click="form.submit()">
-                            {{ commands.state.currentCommandForm.config.buttonLabel ?? __('sharp::modals.command.submit_button') }}
+                <DialogFooter>
+                    <DialogClose as-child>
+                        <Button variant="outline">
+                            {{ __('sharp::modals.cancel_button') }}
                         </Button>
-                    </DialogFooter>
-                </div>
+                    </DialogClose>
+                    <template v-if="commands.state.currentCommandForm.config.showSubmitAndReopenButton">
+                        <Button variant="outline"
+                            :disabled="commands.state.currentCommandFormLoading"
+                            @click="form.submit<CommandFormExtraData>({ _shouldReopen: true })"
+                        >
+                            {{ commands.state.currentCommandForm.config.submitAndReopenButtonLabel ?? __('sharp::modals.command.submit_and_reopen_button') }}
+                        </Button>
+                    </template>
+                    <Button :disabled="commands.state.currentCommandFormLoading" @click="form.submit()">
+                        {{ commands.state.currentCommandForm.config.buttonLabel ?? __('sharp::modals.command.submit_button') }}
+                    </Button>
+                </DialogFooter>
             </template>
         </DialogScrollContent>
     </Dialog>
diff --git a/resources/js/components/ui/dialog/DialogScrollContent.vue b/resources/js/components/ui/dialog/DialogScrollContent.vue
index 6b7d55d79..d7fa95320 100644
--- a/resources/js/components/ui/dialog/DialogScrollContent.vue
+++ b/resources/js/components/ui/dialog/DialogScrollContent.vue
@@ -1,33 +1,40 @@
 <script setup lang="ts">
-    import { type HTMLAttributes, computed } from 'vue'
-import {
-    DialogClose,
-    DialogContent,
-    type DialogContentEmits,
-    type DialogContentProps,
-    DialogOverlay,
-    DialogPortal,
-    useForwardPropsEmits,
-} from 'reka-ui'
-import { X } from 'lucide-vue-next'
-import { cn } from '@/utils/cn'
+    import { type HTMLAttributes, computed, useTemplateRef } from 'vue'
+    import {
+        DialogClose,
+        DialogContent,
+        type DialogContentEmits,
+        type DialogContentProps,
+        DialogOverlay,
+        DialogPortal,
+        useForwardPropsEmits,
+    } from 'reka-ui'
+    import { X } from 'lucide-vue-next'
+    import { cn } from '@/utils/cn'
 
-const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
-const emits = defineEmits<DialogContentEmits>()
+    const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
+    const emits = defineEmits<DialogContentEmits>()
 
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
+    const delegatedProps = computed(() => {
+      const { class: _, ...delegated } = props
 
-  return delegated
-})
+      return delegated
+    })
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+    const forwarded = useForwardPropsEmits(delegatedProps, emits)
+    const overlay = useTemplateRef<InstanceType<typeof DialogOverlay>>('overlay');
+    defineExpose({
+        scrollToTop: () => {
+            overlay.value.$el.scrollTo(0, 0);
+        },
+    });
 </script>
 
 <template>
   <DialogPortal>
     <DialogOverlay
       class="fixed inset-0 z-50 grid grid-cols-1 place-items-center overflow-y-auto bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+        ref="overlay"
     >
       <DialogContent
         :class="
diff --git a/resources/js/form/Form.ts b/resources/js/form/Form.ts
index 8de717404..27375a4e3 100644
--- a/resources/js/form/Form.ts
+++ b/resources/js/form/Form.ts
@@ -73,8 +73,7 @@ export class Form implements FormData, CommandFormData, EventTarget {
     set errors(errors) {
         this.state.errors = errors;
     }
-    get hasErrors()
-    {
+    get hasErrors() {
         return Object.keys(this.errors).length > 0;
     }
 
diff --git a/resources/js/form/components/Form.vue b/resources/js/form/components/Form.vue
index 1e3d52921..9e3e8b2c6 100644
--- a/resources/js/form/components/Form.vue
+++ b/resources/js/form/components/Form.vue
@@ -101,16 +101,21 @@
 <template>
     <Tabs v-model="selectedTabSlug" :unmount-on-hide="false">
         <template v-if="showErrorAlert">
-            <div class="container">
-                <Alert class="mb-4" variant="destructive">
+            <div :class="modal ? 'mb-8' : 'mb-4 container'">
+                <Alert variant="destructive">
                     <template v-if="errorAlertMessage">
-                        <AlertTitle>
+                        <AlertTitle v-if="!modal">
                             {{ __('sharp::modals.error.title') }}
                         </AlertTitle>
                         <AlertDescription>
                             {{ errorAlertMessage }}
                         </AlertDescription>
                     </template>
+                    <template v-else-if="modal">
+                        <AlertDescription>
+                            {{ __('sharp::form.validation_error.title') }} {{ __('sharp::form.validation_error.description') }}
+                        </AlertDescription>
+                    </template>
                     <template v-else>
                         <AlertTitle>
                             {{ __('sharp::form.validation_error.title') }}