FIX: Dans la modale d'accueil du ticket, les boutons doivent être dans le footer

src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/App.vue

@@ -41,12 +41,18 @@
 
     <template #body>
       <ticket-init-form-component
+        v-model="ticketForm"
         :ticket="ticket"
         :motives="motives"
         :suggested-persons="suggestedPersons"
         @submit="handleFormSubmit"
       />
     </template>
+    <template #footer>
+      <button class="btn btn-primary" @click="handleFormSubmit">
+        {{ trans(CHILL_TICKET_TICKET_INIT_FORM_SUBMIT) }}
+      </button>
+    </template>
   </Modal>
 </template>
 
@@ -71,6 +77,7 @@ import ToggleComponent from "../TicketList/components/ToggleComponent.vue";
 // Translations
 import {
   trans,
+  CHILL_TICKET_TICKET_INIT_FORM_SUBMIT,
   CHILL_TICKET_TICKET_INIT_FORM_TITLE,
   CHILL_TICKET_TICKET_INIT_FORM_SUCCESS,
   CHILL_TICKET_TICKET_INIT_FORM_ERROR,
@@ -96,26 +103,39 @@ const showTicketInitFormModal = ref(false);
 const loading = ref(true);
 const refreshKey = ref(0);
 
-async function handleFormSubmit(ticketForm: TicketInitForm) {
+// ticketForm réactif pour v-model
+const ticketForm = ref({
+  content: "",
+  addressees: ticket.value?.currentAddressees,
+  motive: ticket.value?.currentMotive,
+  persons: ticket.value?.currentPersons,
+  caller: ticket.value?.caller,
+  emergency: ticket.value?.emergency,
+} as TicketInitForm);
+
+async function handleFormSubmit() {
   try {
-    if (!ticketForm.motive || ticketForm.content.trim() === "") {
+    if (!ticketForm.value.motive || ticketForm.value.content.trim() === "") {
       toast.warning(trans(CHILL_TICKET_TICKET_INIT_FORM_WARNING));
       return;
     }
-    if (ticketForm.motive) {
+    if (ticketForm.value.motive) {
-      await store.dispatch("createMotive", ticketForm.motive);
+      await store.dispatch("createMotive", ticketForm.value.motive);
     }
-    if (ticketForm.content.trim() !== "") {
+    if (ticketForm.value.content.trim() !== "") {
-      await store.dispatch("createComment", ticketForm.content);
+      await store.dispatch("createComment", ticketForm.value.content);
     }
 
     // Ne pas mettre à jour emergency si le motif force l'état d'urgence
-    if (ticketForm.motive && !ticketForm.motive.makeTicketEmergency) {
+    if (
-      await store.dispatch("setEmergency", ticketForm.emergency);
+      ticketForm.value.motive &&
+      !ticketForm.value.motive.makeTicketEmergency
+    ) {
+      await store.dispatch("setEmergency", ticketForm.value.emergency);
     }
 
-    await store.dispatch("setAddressees", ticketForm.addressees);
+    await store.dispatch("setAddressees", ticketForm.value.addressees);
-    await store.dispatch("setPersons", ticketForm.persons);
+    await store.dispatch("setPersons", ticketForm.value.persons);
 
     // Forcer le rafraîchissement des composants
     refreshKey.value++;

src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/TicketInitFormComponent.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="card mb-4">
     <div class="card-body">
-      <form @submit.prevent="submitForm">
       <div class="mb-3">
         <label class="form-label pe-2" for="emergency">
           {{ trans(CHILL_TICKET_LIST_FILTER_EMERGENCY) }}
@@ -69,16 +68,6 @@
           :suggested="userGroups"
         />
       </div>
-        <!-- Boutons d'action -->
-        <div class="d-flex justify-content-end gap-2 mt-4">
-          <button type="button" class="btn btn-secondary" @click="resetForm">
-            {{ trans(CHILL_TICKET_TICKET_INIT_FORM_RESET) }}
-          </button>
-          <button type="submit" class="btn btn-primary">
-            {{ trans(CHILL_TICKET_TICKET_INIT_FORM_SUBMIT) }}
-          </button>
-        </div>
-      </form>
     </div>
   </div>
 </template>
@@ -94,20 +83,12 @@ import PersonsSelectorComponent from "./Person/PersonsSelectorComponent.vue";
 import AddresseeSelectorComponent from "./Addressee/AddresseeSelectorComponent.vue";
 import EmergencyToggleComponent from "./Emergency/EmergencyToggleComponent.vue";
 // Types
-import {
+import { Motive, TicketInitForm } from "../../../types";
-  Motive,
-  MotiveWithParent,
-  Ticket,
-  TicketEmergencyState,
-  TicketInitForm,
-} from "../../../types";
 import { Person } from "ChillPersonAssets/types";
 
 // Translations
 import {
   trans,
-  CHILL_TICKET_TICKET_INIT_FORM_SUBMIT,
-  CHILL_TICKET_TICKET_INIT_FORM_RESET,
   CHILL_TICKET_TICKET_SET_MOTIVE_TITLE,
   CHILL_TICKET_TICKET_ADD_COMMENT_TITLE,
   CHILL_TICKET_TICKET_SET_PERSONS_TITLE_CALLER,
@@ -117,32 +98,23 @@ import {
   CHILL_TICKET_LIST_FILTER_EMERGENCY,
   CHILL_TICKET_TICKET_ADD_ADDRESSEE_TITLE,
 } from "translator";
-import { UserGroup, UserGroupOrUser } from "ChillMainAssets/types";
+import { UserGroup } from "ChillMainAssets/types";
 
 const props = defineProps<{
-  ticket: Ticket;
+  modelValue: TicketInitForm;
   motives: Motive[];
   suggestedPersons: Person[];
 }>();
 
 const emit = defineEmits<{
   "update:modelValue": [value: TicketInitForm];
-  submit: [formData: TicketInitForm];
 }>();
 
 const store = useStore();
 
-const ticketForm = reactive({
+const ticketForm = reactive({ ...props.modelValue });
-  content: "",
-  addressees: props.ticket.currentAddressees as UserGroupOrUser[],
-  motive: props.ticket.currentMotive as MotiveWithParent | null,
-  persons: props.ticket.currentPersons as Person[],
-  caller: props.ticket.caller as Person | null,
-  emergency: props.ticket.emergency as TicketEmergencyState,
-} as TicketInitForm);
-
 const isEmergency = ref<boolean>(
-  props.ticket.emergency == "yes" ? true : false,
+  props.modelValue.emergency == "yes" ? true : false,
 );
 
 const userGroups = computed(() => store.getters.getUserGroups as UserGroup[]);
@@ -155,23 +127,16 @@ watch(
   },
 );
 
-function submitForm() {
+watch(
-  emit("submit", {
+  ticketForm,
-    content: ticketForm.content,
+  (newVal) => {
-    motive: ticketForm.motive,
+    emit("update:modelValue", {
-    addressees: [...ticketForm.addressees],
+      ...newVal,
-    persons: [...ticketForm.persons],
-    caller: ticketForm.caller,
       emergency: isEmergency.value ? "yes" : "no",
     });
-}
+  },
-function resetForm() {
+  { deep: true },
-  ticketForm.content = "";
+);
-  ticketForm.motive = null;
-  ticketForm.persons = [];
-  ticketForm.caller = null;
-  ticketForm.emergency = props.ticket.emergency as TicketEmergencyState;
-}
 </script>
 
 <style lang="scss" scoped>

src/Bundle/ChillTicketBundle/src/translations/messages+intl-icu.fr.yml

@@ -47,7 +47,6 @@ chill_ticket:
         init_form:
             title: "Ajouter des informations sur le ticket"
             submit: "Mettre à jour le ticket"
-      reset: "Réinitialiser"
             success: "Ticket mis à jour avec succès"
             error: "Veuillez remplir tous les champs obligatoires"
             warning: "Veuillez remplir au minimum le motif et le commentaire"