From e7c04e34a9a7017cf91ca5eece973d26e4c217ea Mon Sep 17 00:00:00 2001
From: Boris Waaub <boris.waaub@digitalternative.be>
Date: Mon, 1 Sep 2025 13:35:15 +0000
Subject: [PATCH] =?UTF-8?q?Am=C3=A9liorations=20du=20dernier=20MR=20multip?=
 =?UTF-8?q?le-tasks-from-board-78?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../_components/Entity/PersonRenderBox.vue    |  2 +-
 .../components/ActionToolbarComponent.vue     |  8 ++-
 .../TicketApp/components/BannerComponent.vue  |  4 ++
 .../Comment/CommentEditorComponent.vue        | 51 ++++++-------------
 .../components/Motive/MotiveComponent.vue     |  7 +++
 .../Motive/MotiveSelectorComponent.vue        | 47 ++++++++++-------
 .../TicketApp/components/PelotonComponent.vue | 12 ++++-
 7 files changed, 75 insertions(+), 56 deletions(-)

diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
index 0d9e3ec5f..8995506a9 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Entity/PersonRenderBox.vue
@@ -152,7 +152,7 @@
 
                 <template
                   v-if="
-                    this.showResidentialAddresses &&
+                    showResidentialAddresses &&
                     (person.current_residential_addresses || []).length > 0
                   "
                 >
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/ActionToolbarComponent.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/ActionToolbarComponent.vue
index 589066e3d..4c5769266 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/ActionToolbarComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/ActionToolbarComponent.vue
@@ -29,6 +29,7 @@
         <form @submit.prevent="submitAction">
           <comment-editor-component
             v-model="content"
+            @supplementary-text="(value) => (supplementaryText = value)"
             :motive="motive"
             v-if="activeTab === 'add_comment'"
           />
@@ -253,6 +254,7 @@ const returnPath = computed((): string => {
 
 const motive = ref(ticket.value.currentMotive as Motive);
 const content = ref("" as Comment["content"]);
+const supplementaryText = ref("" as string);
 const addressees = ref(ticket.value.currentAddressees as UserGroupOrUser[]);
 const persons = ref(ticket.value.currentPersons as Person[]);
 const caller = ref(ticket.value.caller as Person);
@@ -263,8 +265,12 @@ async function submitAction() {
       if (!content.value) {
         toast.error(trans(CHILL_TICKET_TICKET_ADD_COMMENT_ERROR));
       } else {
-        await store.dispatch("createComment", content.value);
+        await store.dispatch(
+          "createComment",
+          content.value + supplementaryText.value,
+        );
         content.value = "";
+        supplementaryText.value = "";
         activeTab.value = "";
         toast.success(trans(CHILL_TICKET_TICKET_ADD_COMMENT_SUCCESS));
       }
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/BannerComponent.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/BannerComponent.vue
index f48e6aec9..981579ad4 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/BannerComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/BannerComponent.vue
@@ -5,6 +5,9 @@
         <div class="col-md-6 col-sm-12 ps-md-5 ps-xxl-0">
           <h1>
             {{ getTicketTitle(ticket) }}
+            <peloton-component
+              :stored-objects="ticket.currentMotive?.storedObjects ?? null"
+            />
           </h1>
 
           <h2 v-if="ticket.currentPersons.length">
@@ -96,6 +99,7 @@ import { computed, ref } from "vue";
 import { useToast } from "vue-toast-notification";
 
 // Components
+import PelotonComponent from "./PelotonComponent.vue";
 import AddresseeComponent from "./Addressee/AddresseeComponent.vue";
 import EmergencyToggleComponent from "./Emergency/EmergencyToggleComponent.vue";
 import StateToggleComponent from "./State/StateToggleComponent.vue";
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/Comment/CommentEditorComponent.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/Comment/CommentEditorComponent.vue
index 8579d66fd..f34c19f25 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/Comment/CommentEditorComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/Comment/CommentEditorComponent.vue
@@ -1,18 +1,5 @@
 <template>
   <div class="row">
-    <div class="col-12" v-if="motive">
-      <div class="input-group mb-2">
-        <input
-          type="text"
-          :value="localizeTranslatableString(motive.label)"
-          readonly
-          class="form-control"
-        />
-        <div class="input-group-append">
-          <peloton-component :stored-objects="motive.storedObjects" />
-        </div>
-      </div>
-    </div>
     <div class="col-12">
       <comment-editor v-model="content" />
     </div>
@@ -32,18 +19,7 @@
           type="text"
           v-model="supplementaryCommentsInput[index]"
           class="form-control"
-          @keyup.enter="addSupplementaryComments(index)"
-          @keydown.enter.prevent
         />
-        <div class="input-group-append">
-          <button
-            class="input-group-text btn btn-submit"
-            type="button"
-            @click="addSupplementaryComments(index)"
-          >
-            <i class="fa fa-plus"></i>
-          </button>
-        </div>
       </div>
     </div>
   </div>
@@ -54,13 +30,11 @@ import { reactive, ref, watch } from "vue";
 
 // Components
 import CommentEditor from "ChillMainAssets/vuejs/_components/CommentEditor/CommentEditor.vue";
-import PelotonComponent from "../PelotonComponent.vue";
 
 // Types
 import { Motive } from "../../../../types";
 
 // Utils
-import { localizeTranslatableString } from "../../utils/utils";
 import { StoredObject } from "ChillDocStoreAssets/types";
 
 const props = defineProps<{
@@ -73,19 +47,26 @@ const supplementaryCommentsInput = reactive<string[]>([]);
 const emit = defineEmits<{
   "update:modelValue": [value: string | undefined];
   "show-peloton-modal": [storedObjects: StoredObject[]];
+  "supplementary-text": [value: string];
 }>();
 
 const content = ref(props.modelValue);
 
-function addSupplementaryComments(index: number) {
-  if (supplementaryCommentsInput[index]) {
-    const supplementaryText = `**${props.motive?.supplementaryComments[index].label}**:  ${supplementaryCommentsInput[index]}`;
-    content.value = content.value
-      ? content.value + "\n" + supplementaryText
-      : supplementaryText;
-    supplementaryCommentsInput[index] = "";
-  }
-}
+watch(
+  supplementaryCommentsInput,
+  (value) => {
+    let supplementaryText = " \n\n ";
+    for (const index in value) {
+      if (value[index]) {
+        supplementaryText +=
+          `**${props.motive?.supplementaryComments[index].label}**:  ${value[index]}` +
+          " \n\n ";
+      }
+    }
+    emit("supplementary-text", supplementaryText);
+  },
+  { deep: true },
+);
 
 watch(content, (value) => {
   emit("update:modelValue", value);
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/Motive/MotiveComponent.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/Motive/MotiveComponent.vue
index b568b2895..58edb7c19 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/Motive/MotiveComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/Motive/MotiveComponent.vue
@@ -1,6 +1,10 @@
 <template>
   <div class="col-12 fw-bolder">
     {{ localizeTranslatableString(motiveHistory.motive.label) }}
+    <peloton-component
+      :stored-objects="motiveHistory.motive.storedObjects ?? null"
+      pelotonBtnClass="float-end"
+    />
   </div>
 </template>
 
@@ -11,6 +15,9 @@ import { MotiveHistory } from "../../../../types";
 //Utils
 import { localizeTranslatableString } from "../../utils/utils";
 
+//Components
+import PelotonComponent from "../PelotonComponent.vue";
+
 defineProps<{ motiveHistory: MotiveHistory }>();
 </script>
 
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/Motive/MotiveSelectorComponent.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/Motive/MotiveSelectorComponent.vue
index ffba8041b..cbc428675 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/Motive/MotiveSelectorComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/Motive/MotiveSelectorComponent.vue
@@ -1,22 +1,28 @@
 <template>
   <div class="row">
     <div class="col-12">
-      <vue-multiselect
-        name="selectMotive"
-        id="selectMotive"
-        label="label"
-        :custom-label="customLabel"
-        track-by="id"
-        open-direction="top"
-        :multiple="false"
-        :searchable="true"
-        :placeholder="trans(CHILL_TICKET_TICKET_SET_MOTIVE_LABEL)"
-        :select-label="trans(MULTISELECT_SELECT_LABEL)"
-        :deselect-label="trans(MULTISELECT_DESELECT_LABEL)"
-        :selected-label="trans(MULTISELECT_SELECTED_LABEL)"
-        :options="motives"
-        v-model="motive"
-      />
+      <div class="input-group mb-2">
+        <vue-multiselect
+          name="selectMotive"
+          id="selectMotive"
+          label="label"
+          :custom-label="customLabel"
+          track-by="id"
+          open-direction="top"
+          :multiple="false"
+          :searchable="true"
+          :placeholder="trans(CHILL_TICKET_TICKET_SET_MOTIVE_LABEL)"
+          :select-label="trans(MULTISELECT_SELECT_LABEL)"
+          :deselect-label="trans(MULTISELECT_DESELECT_LABEL)"
+          :selected-label="trans(MULTISELECT_SELECTED_LABEL)"
+          :options="motives"
+          v-model="motive"
+          class="form-control"
+        />
+        <div class="input-group-append">
+          <peloton-component :stored-objects="motive?.storedObjects ?? null" />
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -37,6 +43,9 @@ import {
   MULTISELECT_SELECTED_LABEL,
 } from "translator";
 
+// Component
+import PelotonComponent from "../PelotonComponent.vue";
+
 const props = defineProps<{
   modelValue?: Motive;
   motives: Motive[];
@@ -59,7 +68,7 @@ watch(
 );
 
 function customLabel(motive: Motive) {
-  return motive?.label?.fr ?? trans(CHILL_TICKET_TICKET_SET_MOTIVE_LABEL);
+  return motive?.label?.fr;
 }
 </script>
 
@@ -67,4 +76,8 @@ function customLabel(motive: Motive) {
 #selectMotive {
   margin-bottom: 1.5em;
 }
+// Supprime le padding de .form-control pour ce composant
+.form-control {
+  padding: 0 !important;
+}
 </style>
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/PelotonComponent.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/PelotonComponent.vue
index b50682a02..577f054dc 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/PelotonComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/PelotonComponent.vue
@@ -1,6 +1,6 @@
 <template>
   <button
-    class="input-group-text btn btn-primary"
+    :class="['input-group-text', 'btn', 'btn-primary', pelotonBtnClass]"
     type="button"
     @click="handleClick"
     :disabled="!storedObjects?.length"
@@ -109,7 +109,15 @@ import {
   is_object_ready,
 } from "ChillDocStoreAssets/vuejs/StoredObjectButton/helpers";
 
-const props = defineProps<{ storedObjects: StoredObject[] }>();
+const props = withDefaults(
+  defineProps<{
+    storedObjects: StoredObject[] | null;
+    pelotonBtnClass?: string;
+  }>(),
+  {
+    pelotonBtnClass: "",
+  },
+);
 
 const selectedStoredObject = ref<StoredObject | null>(null);
 const documentUrl = ref<string>("");