Merge branch 'enhance-multiple-tasks-from-board-78' into 'ticket-app-master'

Améliorations du dernier MR multiple-tasks-from-board-78

See merge request Chill-Projet/chill-bundles!870

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
                   "
                 >

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));
       }

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";

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) {
+watch(
-  if (supplementaryCommentsInput[index]) {
+  supplementaryCommentsInput,
-    const supplementaryText = `**${props.motive?.supplementaryComments[index].label}**:  ${supplementaryCommentsInput[index]}`;
+  (value) => {
-    content.value = content.value
+    let supplementaryText = " \n\n ";
-      ? content.value + "\n" + supplementaryText
+    for (const index in value) {
-      : supplementaryText;
+      if (value[index]) {
-    supplementaryCommentsInput[index] = "";
+        supplementaryText +=
-  }
+          `**${props.motive?.supplementaryComments[index].label}**:  ${value[index]}` +
-}
+          " \n\n ";
+      }
+    }
+    emit("supplementary-text", supplementaryText);
+  },
+  { deep: true },
+);
 
 watch(content, (value) => {
   emit("update:modelValue", value);

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>
 

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
+      <div class="input-group mb-2">
-        name="selectMotive"
+        <vue-multiselect
-        id="selectMotive"
+          name="selectMotive"
-        label="label"
+          id="selectMotive"
-        :custom-label="customLabel"
+          label="label"
-        track-by="id"
+          :custom-label="customLabel"
-        open-direction="top"
+          track-by="id"
-        :multiple="false"
+          open-direction="top"
-        :searchable="true"
+          :multiple="false"
-        :placeholder="trans(CHILL_TICKET_TICKET_SET_MOTIVE_LABEL)"
+          :searchable="true"
-        :select-label="trans(MULTISELECT_SELECT_LABEL)"
+          :placeholder="trans(CHILL_TICKET_TICKET_SET_MOTIVE_LABEL)"
-        :deselect-label="trans(MULTISELECT_DESELECT_LABEL)"
+          :select-label="trans(MULTISELECT_SELECT_LABEL)"
-        :selected-label="trans(MULTISELECT_SELECTED_LABEL)"
+          :deselect-label="trans(MULTISELECT_DESELECT_LABEL)"
-        :options="motives"
+          :selected-label="trans(MULTISELECT_SELECTED_LABEL)"
-        v-model="motive"
+          :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>

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>("");