From f0b3e63d660e795a5178d9b41653c52d530cbd3e Mon Sep 17 00:00:00 2001
From: Boris Waaub <boris.waaub@digitalternative.be>
Date: Fri, 7 Nov 2025 12:54:29 +0000
Subject: [PATCH] FIX: Frontend: La liste des motifs reste vide et Frontend:
 l'appelant apparait deux fois dans les suggestions

---
 .../Motive/MotiveSelectorComponent.vue        | 106 +++++++++---------
 .../vuejs/TicketApp/store/modules/persons.ts  |   2 +-
 2 files changed, 53 insertions(+), 55 deletions(-)

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 6a2b28201..91e5f89c4 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
@@ -60,7 +60,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from "vue";
+import { computed, ref } from "vue";
 import VueMultiselect from "vue-multiselect";
 
 // Types
@@ -127,65 +127,63 @@ type MotiveOptions = Motive & {
   breadcrumb: string[];
 };
 
-const motiveOptions: MotiveOptions[] = [];
-const options = ref<MotiveOptions[]>([]);
+const searchQuery = ref<string>("");
 const isLoading = ref<boolean>(false);
 
+const allMotiveOptions = computed<MotiveOptions[]>(() => {
+  const result: MotiveOptions[] = [];
+
+  const processMotiveRecursively = (
+    motive: Motive,
+    isChild = false,
+    level = 0,
+    parentBreadcrumb: string[] = [],
+  ) => {
+    const hasChildren = motive.children && motive.children.length > 0;
+    const displayLabel = localizeString(motive.label);
+    const breadcrumb = [...parentBreadcrumb, displayLabel];
+
+    if (props.allowParentSelection || !hasChildren) {
+      result.push({
+        ...motive,
+        isChild,
+        isParent: hasChildren,
+        level,
+        breadcrumb,
+        displayLabel,
+      });
+    }
+
+    if (hasChildren) {
+      motive.children.forEach((childMotive) => {
+        processMotiveRecursively(childMotive, true, level + 1, breadcrumb);
+      });
+    }
+  };
+
+  props.motives.forEach((motive) => {
+    processMotiveRecursively(motive);
+  });
+
+  return result;
+});
+
+const options = computed<MotiveOptions[]>(() => {
+  if (!searchQuery.value.trim()) {
+    return allMotiveOptions.value;
+  }
+  return allMotiveOptions.value.filter((m) =>
+    m.breadcrumb.some((crumb) =>
+      crumb.toLowerCase().includes(searchQuery.value.trim().toLowerCase()),
+    ),
+  );
+});
+
 function search(query: string) {
   isLoading.value = true;
-  options.value = motiveOptions.filter((m) =>
-    m.breadcrumb.some((crumb) =>
-      crumb.toLowerCase().includes(query.trim().toLowerCase()),
-    ),
-  );
+  searchQuery.value = query;
   isLoading.value = false;
 }
-
-function processMotiveRecursively(
-  motive: Motive,
-  isChild = false,
-  level = 0,
-  parentBreadcrumb: string[] = [],
-) {
-  const hasChildren = motive.children && motive.children.length > 0;
-  const displayLabel = localizeString(motive.label);
-  const breadcrumb = [...parentBreadcrumb, displayLabel];
-
-  if (props.allowParentSelection || !hasChildren) {
-    const optionValue = {
-      ...motive,
-      isChild,
-      isParent: hasChildren,
-      level,
-      breadcrumb,
-      displayLabel,
-    };
-    motiveOptions.push(optionValue);
-    options.value.push(optionValue);
-  }
-
-  if (hasChildren) {
-    motive.children.forEach((childMotive) => {
-      processMotiveRecursively(childMotive, true, level + 1, breadcrumb);
-    });
-  }
-}
-
-function fillOptions() {
-  motiveOptions.length = 0;
-  options.value.length = 0;
-  props.motives.forEach((parentMotive) => {
-    processMotiveRecursively(parentMotive, false, 0, []);
-  });
-}
-
-watch(
-  () => props.motives,
-  () => {
-    fillOptions();
-  },
-  { deep: true },
-);
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/persons.ts b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/persons.ts
index dcdad685b..ae6a35545 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/persons.ts
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/store/modules/persons.ts
@@ -72,7 +72,7 @@ export const modulePersons: Module<State, RootState> = {
           "GET",
           `/api/1.0/ticket/ticket/${ticketId}/suggest-person`,
         );
-        if (caller) {
+        if (caller && !result.some((person) => person.id === caller.id)) {
           result.push(caller);
         }
         commit("setPersons", result);