Refactor AddPersons and related components for improved state management and prop handling.

- Replaced array-based `selected` state with `Map` for better key-based selection handling.
- Simplified `PersonSuggestion.vue` and `PersonChooseModal.vue` to align with updated state structure.
- Removed debug logs and legacy code for cleaner and more maintainable codebase.

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue

@@ -116,7 +116,7 @@ const thirdPartyParentAddContact = ref<ThirdpartyCompany|null>(null);
  * Suggestion must be added/removed using the @link{addSuggestionToSelected} and @link{removeSuggestionFromSelected}
  * methods.
  */
-const selected = ref<Suggestion[]>([]);
+const selected = ref<Map<string, Suggestion>>(new Map());
 
 const getClassButton = computed(() => {
   const size = props.options?.button?.size ?? "";
@@ -174,27 +174,23 @@ function updateSelected(payload: {suggestion: Suggestion, isSelected: boolean}):
 }
 
 function addSuggestionToSelected(suggestion: Suggestion): void {
-  console.log("addSuggestionToSelected", suggestion);
-  console.log("before", selected.value);
   if (props.options.uniq) {
-    selected.value = [suggestion];
-  } else {
-    // replace by an array with unique values
-    selected.value = [...selected.value, suggestion].filter((value, index, array) => array.indexOf(value) === index);
+    selected.value.clear();
   }
-  console.log("after", selected.value);
+  selected.value.set(suggestion.key, suggestion);
 }
 
 function removeSuggestionFromSelected(suggestion: Suggestion): void {
-  selected.value = selected.value.filter((s: Suggestion) => s.key !== suggestion.key && s.result.id !== suggestion.result.id);
+  selected.value.delete(suggestion.key);
 }
 
 function emptySelected(): void {
-  selected.value.splice(0, selected.value.length);
+  selected.value = new Map();
 }
 
 function onPickEntities(): void {
-  emit("addNewPersons", { selected: selected.value });
+  const alls = Array.from(selected.value.values());
+  emit("addNewPersons", { selected: alls });
   closeModalChoose();
 }
 
@@ -236,7 +232,7 @@ function onThirdPartyCreated(payload: {thirdParty: Thirdparty}): void {
 }
 
 function resetSearch(): void {
-  selected.value = [];
+  selected.value = new Map();
   personChooseModal.value?.resetSearch();
 }
 

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/PersonChooseModal.vue

@@ -96,9 +96,7 @@
 import { ref, reactive, computed, nextTick, watch, onMounted } from "vue";
 import Modal from "ChillMainAssets/vuejs/_components/Modal.vue";
 import PersonSuggestion from "./PersonSuggestion.vue";
-import OnTheFly from "ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue";
 import { searchEntities } from "ChillPersonAssets/vuejs/_api/AddPersons";
-import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
 
 import {
   trans,
@@ -124,7 +122,7 @@ interface Props {
   modalTitle: string;
   options: SearchOptions;
   suggested?: Suggestion[];
-  selected: Suggestion[];
+  selected: Map<string, Suggestion>;
   modalDialogClass?: string;
   allowCreate?: boolean;
 }
@@ -171,35 +169,25 @@ const query = computed({
 });
 const queryLength = computed(() => search.query.length);
 const suggestedCounter = computed(() => suggested.value.length);
-const selectedCounter = computed(() => props.selected.length);
+const selectedCounter = computed(() => props.selected.size);
 
 const checkUniq = computed(() =>
   props.options.uniq ? "radio" : "checkbox",
 );
 
-/**
- * Return true if the suggestion is present in the selected.
- */
-function isSelected(item: Suggestion): boolean {
-  const r = props.selected.some((s: Suggestion) => s.key === item.key);
-  console.log('isSelected', item.key, r);
-  return r;
-}
-
 const selectedAndSuggested = computed<(Suggestion & {isSelected: boolean})[]>(() => {
   const selectedAndSuggested = [];
 
   // add selected that are not in the search results
-  for (const selected of props.selected) {
+  for (const selected of props.selected.values()) {
     if (!suggested.value.some((s: Suggestion) => s.key === selected.key)) {
       selectedAndSuggested.push({...selected, isSelected: false});
     }
   }
   for (const suggestion of suggested.value) {
-    selectedAndSuggested.push({...suggestion, isSelected: props.selected.some((s: Suggestion) => s.key === suggestion.key)});
+    selectedAndSuggested.push({...suggestion, isSelected: props.selected.has(suggestion.key)})
   }
 
-
   return selectedAndSuggested;
 });
 
@@ -283,54 +271,6 @@ function pickEntities(): void {
   emit("close");
 }
 
-/*
-TODO remove this
-async function saveFormOnTheFly({ type, data }: { type: string; data: Result }) {
-  try {
-    if (type === 'person') {
-      const responsePerson: Result = await makeFetch('POST', '/api/1.0/person/person.json', data);
-      newPriorSuggestion(responsePerson);
-      onTheFly.value?.closeModal();
-
-      if (data.addressId != null) {
-        const household = { type: 'household' };
-        const address = { id: data.addressId };
-        try {
-          const responseHousehold: Result = await makeFetch('POST', '/api/1.0/person/household.json', household);
-          const member = {
-            concerned: [
-              {
-                person: { type: 'person', id: responsePerson.id },
-                start_date: { datetime: `${new Date().toISOString().split('T')[0]}T00:00:00+02:00` },
-                holder: false,
-                comment: null,
-              },
-            ],
-            destination: { type: 'household', id: responseHousehold.id },
-            composition: null,
-          };
-          await makeFetch('POST', '/api/1.0/person/household/members/move.json', member);
-          try {
-            await makeFetch('POST', `/api/1.0/person/household/${responseHousehold.id}/address.json`, address);
-          } catch (error) {
-            console.error(error);
-          }
-        } catch (error) {
-          console.error(error);
-        }
-      }
-    } else if (type === 'thirdparty') {
-      const response: Result = await makeFetch('POST', '/api/1.0/thirdparty/thirdparty.json', data);
-      newPriorSuggestion(response);
-      onTheFly.value?.closeModal();
-    }
-  } catch (error) {
-    console.error(error);
-  }
-}
-
- */
-
 defineExpose({ resetSearch });
 </script>
 

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/PersonSuggestion.vue

@@ -1,11 +1,12 @@
 <template>
-  <div class="list-item" :class="{ checked: isChecked }">
+  <div class="list-item" :class="{ checked: props.isSelected }">
     <label>
         <input
           :type="type"
-          :value="item.key"
+          :value="props.item.key"
           name="item"
-          :id="item.key"
+          :id="props.item.key"
+          :checked="props.isSelected"
           @click="onUpdateValue"
         />
 
@@ -76,9 +77,6 @@ const onUpdateValue = (event: Event) => {
     console.error("the value of checked is not an HTMLInputElement");
     return;
   }
-  console.log("onUpdateValue", target);
-  console.log("is selected", props.type === "radio" ? true: target.checked);
-
   emit("updateSelected", {suggestion: props.item, isSelected: props.type === "radio" ? true : target.checked});
 }