feat: add Options Style in AddressList from TicketCrete #999

Merged
jsegarra merged 5 commits from hotfix_addressSelect_optionFormat into master 2024-11-26 14:09:47 +00:00
2 changed files with 44 additions and 19 deletions

View File

@ -149,7 +149,12 @@ onMounted(() => {
}); });
async function fetchClientAddress(id, formData = {}) { async function fetchClientAddress(id, formData = {}) {
const { data } = await axios.get(`Clients/${id}`, { const { data } = await axios.get(`Clients/${id}`, {
params: { filter: { include: { relation: 'addresses' } } }, params: {
filter: {
order: ['isDefaultAddress DESC', 'isActive DESC', 'nickname ASC'],
include: { relation: 'addresses' },
},
},
}); });
addressesList.value = data.addresses; addressesList.value = data.addresses;
formData.addressId = data.defaultAddressFk; formData.addressId = data.defaultAddressFk;
@ -253,22 +258,27 @@ const getDateColor = (date) => {
@update:model-value="() => fetchAgencies(data)" @update:model-value="() => fetchAgencies(data)"
> >
<template #option="scope"> <template #option="scope">
<QItem v-bind="scope.itemProps"> <QItem
<QItemSection> v-bind="scope.itemProps"
<QItemLabel :class="{ disabled: !scope.opt.isActive }"
:class="{
'color-vn-label': !scope.opt?.isActive,
}"
> >
{{ <QItemSection style="min-width: min-content" avatar>
`${ <QIcon
!scope.opt?.isActive v-if="
? t('basicData.inactive') scope.opt.isActive && data.addressId === scope.opt.id
: '' "
} ` size="sm"
}} color="grey"
{{ scope.opt?.nickname }}: {{ scope.opt?.street }}, name="star"
{{ scope.opt?.city }} class="fill-icon"
/>
</QItemSection>
<QItemSection>
<QItemLabel>
{{ scope.opt.nickname }}
</QItemLabel>
<QItemLabel caption>
{{ `${scope.opt.street}, ${scope.opt.city}` }}
</QItemLabel> </QItemLabel>
</QItemSection> </QItemSection>
</QItem> </QItem>

View File

@ -273,7 +273,7 @@ const fetchAddresses = async (formData) => {
const filter = { const filter = {
fields: ['nickname', 'street', 'city', 'id', 'isActive'], fields: ['nickname', 'street', 'city', 'id', 'isActive'],
order: 'nickname ASC', order: ['isDefaultAddress DESC', 'isActive DESC', 'nickname ASC'],
}; };
const params = { filter: JSON.stringify(filter) }; const params = { filter: JSON.stringify(filter) };
const { data } = await axios.get(`Clients/${formData.clientId}/addresses`, { const { data } = await axios.get(`Clients/${formData.clientId}/addresses`, {
@ -646,7 +646,22 @@ function setReference(data) {
@update:model-value="() => fetchAvailableAgencies(data)" @update:model-value="() => fetchAvailableAgencies(data)"
> >
<template #option="scope"> <template #option="scope">
<QItem v-bind="scope.itemProps"> <QItem
v-bind="scope.itemProps"
:class="{ disabled: !scope.opt.isActive }"
>
<QItemSection style="min-width: min-content" avatar>
<QIcon
v-if="
scope.opt.isActive &&
selectedClient?.defaultAddressFk === scope.opt.id
"
size="sm"
color="grey"
name="star"
class="fill-icon"
/>
</QItemSection>
<QItemSection> <QItemSection>
<QItemLabel <QItemLabel
:class="{ :class="{