From b9e130c159fda77a4cb5cb7b523218ecc49fc34c Mon Sep 17 00:00:00 2001
From: Boris Waaub <boriswaaub@Mac-Studio-de-Boris.local>
Date: Tue, 21 May 2024 20:44:23 +0200
Subject: [PATCH] Use suggestion for user asignee

---
 .../components/AddresseeSelectorComponent.vue | 21 +++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/AddresseeSelectorComponent.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/AddresseeSelectorComponent.vue
index 56388e41a..db763b4e9 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/AddresseeSelectorComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/AddresseeSelectorComponent.vue
@@ -71,10 +71,14 @@
                 ref="addPersons"
                 @addNewPersons="addNewEntity"
             />
-            <div class="mb-2">
-                <span class="badge text-bg-light m-1" v-for="user in users">
-                    {{ user.username }}
-                </span>
+            <div class="p-2">
+                <ul class="list-suggest inline remove-items">
+                    <li v-for="user in users" :key="user.id">
+                        <span :title="user.username" @click="removeUser(user)">
+                            {{ user.username }}
+                        </span>
+                    </li>
+                </ul>
             </div>
         </div>
     </div>
@@ -173,6 +177,14 @@ export default defineComponent({
             };
         });
 
+        function removeUser(user: User) {
+            users.value.splice(users.value.indexOf(user), 1);
+            addressees.value = addressees.value.filter(
+                (addressee) => addressee.id !== user.id
+            );
+            ctx.emit("update:modelValue", addressees.value);
+        }
+
         watch(userGroupLevel, (userGroupLevelAdd, userGroupLevelRem) => {
             if (userGroupLevelRem) {
                 addressees.value.splice(
@@ -203,6 +215,7 @@ export default defineComponent({
             addPersons,
             addPersonsOptions,
             addNewEntity,
+            removeUser,
             getUserGroupBtnColor,
             customUserGroupLabel(selectedUserGroup: UserGroup) {
                 return selectedUserGroup.label