From 3ce049739b1878f60514ed918bd7dcf6fe018a0b Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Tue, 7 May 2024 15:46:37 -0300
Subject: [PATCH] Fixes taginput selected behaviour for User and Relationsip
 inputs.

---
 .../relationship/TainacanRelationship.vue     |  5 +++-
 .../metadata-types/user/TainacanUser.vue      | 26 +++++++++----------
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/views/admin/components/metadata-types/relationship/TainacanRelationship.vue b/src/views/admin/components/metadata-types/relationship/TainacanRelationship.vue
index c3d1da6c8..d9a1d5b05 100644
--- a/src/views/admin/components/metadata-types/relationship/TainacanRelationship.vue
+++ b/src/views/admin/components/metadata-types/relationship/TainacanRelationship.vue
@@ -11,7 +11,7 @@
                         :disabled="disabled"
                         size="is-small"
                         icon="magnify"
-                        :model-value="selected"
+                        :model-value="JSON.parse(JSON.stringify(selected))"
                         :data="options"
                         :maxtags="maxtags != undefined ? maxtags : (itemMetadatum.metadatum.multiple == 'yes' || allowNew === true ? (maxMultipleValues !== undefined ? maxMultipleValues : null) : '1')"
                         autocomplete
@@ -51,6 +51,9 @@
                             <div v-html="props.option.valuesAsHtml" />
                         </div>
                     </template>
+                    <template #tag="props">
+                        {{ (props.tag && props.tag.label) ? props.tag.label : '' }}
+                    </template>
                     <template 
                             v-if="!isLoading"
                             #empty>
diff --git a/src/views/admin/components/metadata-types/user/TainacanUser.vue b/src/views/admin/components/metadata-types/user/TainacanUser.vue
index f79723558..4f04d5808 100644
--- a/src/views/admin/components/metadata-types/user/TainacanUser.vue
+++ b/src/views/admin/components/metadata-types/user/TainacanUser.vue
@@ -6,7 +6,7 @@
                 :disabled="disabled"
                 size="is-small"
                 icon="account"
-                :model-value="selected"
+                :model-value="JSON.parse(JSON.stringify(selected))"
                 :data="options"
                 :maxtags="maxtags != undefined ? maxtags : (itemMetadatum.metadatum.multiple == 'yes' || allowNew === true ? (maxMultipleValues !== undefined ? maxMultipleValues : null) : '1')"
                 autocomplete
@@ -30,17 +30,20 @@
             <template #default="props">
                 <div class="media">
                     <div
-                            v-if="props.option.avatar_urls && props.option.avatar_urls['24']"
+                            v-if="props.option.img"
                             class="media-left">
                         <img
                                 width="24"
-                                :src="props.option.avatar_urls['24']">
+                                :src="props.option.img">
                     </div>
                     <div class="media-content">
                         {{ props.option.name }}
                     </div>
                 </div>
             </template>
+            <template #tag="props">
+                {{ (props.tag && props.tag.name) ? props.tag.name : '' }}
+            </template>
             <template 
                     v-if="!isLoading"
                     #empty>
@@ -98,7 +101,7 @@ export default {
         ]),
         onInput(newSelected) {
             this.selected = newSelected;
-            this.$emit('update:value', newSelected.map((user) => user.id || user.value));
+            this.$emit('update:value', this.selected.map((user) => user.id || user.value));
         },
         onBlur() {
             this.$emit('blur');
@@ -109,17 +112,14 @@ export default {
                 this.isLoading = true;
                 let query = qs.stringify({ include: this.itemMetadatum.value });
                 let endpoint = '/users/';
-
+                
                 wpApi.get(endpoint + '?' + query)
                     .then((res) => {
-                        for (let user of res.data) {
-                            this.selected.push({
-                                name: user.name,
-                                value: user.id,
-                                img:  user.avatar_urls && user.avatar_urls['24'] ? user.avatar_urls['24'] : ''
-                            }) ;
-                        }   
-                        
+                        this.selected = res.data.map((user) => ({
+                            name: user.name,
+                            value: user.id,
+                            img: user.avatar_urls && user.avatar_urls['24'] ? user.avatar_urls['24'] : ''
+                        }));
                         this.isLoading = false;
                     })
                     .catch(() => this.isLoading = false );