Fixes taginput selected behaviour for User and Relationsip inputs.

This commit is contained in:
mateuswetah 2024-05-07 15:46:37 -03:00
parent 14f595fb07
commit 7c6d74f966
2 changed files with 17 additions and 14 deletions

View File

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

View File

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