Fixes taginput selected behaviour for User and Relationsip inputs.

This commit is contained in:
mateuswetah 2024-05-07 15:46:37 -03:00
parent 0c8560267b
commit 3ce049739b
2 changed files with 17 additions and 14 deletions

View File

@ -11,7 +11,7 @@
:disabled="disabled" :disabled="disabled"
size="is-small" size="is-small"
icon="magnify" icon="magnify"
:model-value="selected" :model-value="JSON.parse(JSON.stringify(selected))"
:data="options" :data="options"
:maxtags="maxtags != undefined ? maxtags : (itemMetadatum.metadatum.multiple == 'yes' || allowNew === true ? (maxMultipleValues !== undefined ? maxMultipleValues : null) : '1')" :maxtags="maxtags != undefined ? maxtags : (itemMetadatum.metadatum.multiple == 'yes' || allowNew === true ? (maxMultipleValues !== undefined ? maxMultipleValues : null) : '1')"
autocomplete autocomplete
@ -51,6 +51,9 @@
<div v-html="props.option.valuesAsHtml" /> <div v-html="props.option.valuesAsHtml" />
</div> </div>
</template> </template>
<template #tag="props">
{{ (props.tag && props.tag.label) ? props.tag.label : '' }}
</template>
<template <template
v-if="!isLoading" v-if="!isLoading"
#empty> #empty>

View File

@ -6,7 +6,7 @@
:disabled="disabled" :disabled="disabled"
size="is-small" size="is-small"
icon="account" icon="account"
:model-value="selected" :model-value="JSON.parse(JSON.stringify(selected))"
:data="options" :data="options"
:maxtags="maxtags != undefined ? maxtags : (itemMetadatum.metadatum.multiple == 'yes' || allowNew === true ? (maxMultipleValues !== undefined ? maxMultipleValues : null) : '1')" :maxtags="maxtags != undefined ? maxtags : (itemMetadatum.metadatum.multiple == 'yes' || allowNew === true ? (maxMultipleValues !== undefined ? maxMultipleValues : null) : '1')"
autocomplete autocomplete
@ -30,17 +30,20 @@
<template #default="props"> <template #default="props">
<div class="media"> <div class="media">
<div <div
v-if="props.option.avatar_urls && props.option.avatar_urls['24']" v-if="props.option.img"
class="media-left"> class="media-left">
<img <img
width="24" width="24"
:src="props.option.avatar_urls['24']"> :src="props.option.img">
</div> </div>
<div class="media-content"> <div class="media-content">
{{ props.option.name }} {{ props.option.name }}
</div> </div>
</div> </div>
</template> </template>
<template #tag="props">
{{ (props.tag && props.tag.name) ? props.tag.name : '' }}
</template>
<template <template
v-if="!isLoading" v-if="!isLoading"
#empty> #empty>
@ -98,7 +101,7 @@ export default {
]), ]),
onInput(newSelected) { onInput(newSelected) {
this.selected = 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() { onBlur() {
this.$emit('blur'); this.$emit('blur');
@ -112,14 +115,11 @@ export default {
wpApi.get(endpoint + '?' + query) wpApi.get(endpoint + '?' + query)
.then((res) => { .then((res) => {
for (let user of res.data) { this.selected = res.data.map((user) => ({
this.selected.push({
name: user.name, name: user.name,
value: user.id, value: user.id,
img: user.avatar_urls && user.avatar_urls['24'] ? user.avatar_urls['24'] : '' img: user.avatar_urls && user.avatar_urls['24'] ? user.avatar_urls['24'] : ''
}) ; }));
}
this.isLoading = false; this.isLoading = false;
}) })
.catch(() => this.isLoading = false ); .catch(() => this.isLoading = false );