Fix fallowing feedback

This commit is contained in:
Kevin Martinez 2024-01-08 10:00:04 -04:00
parent 8a6e78a143
commit fbd5abb330
9 changed files with 270 additions and 262 deletions

View File

@ -135,12 +135,11 @@ async function save() {
await axios.patch($props.urlUpdate || $props.url, body);
}
emit('onDataSaved', formData.value);
originalData.value = JSON.parse(JSON.stringify(formData.value));
hasChanges.value = false;
} catch (err) {
notify('errors.create', 'negative');
}
originalData.value = JSON.parse(JSON.stringify(formData.value));
hasChanges.value = false;
isLoading.value = false;
}

View File

@ -1,12 +0,0 @@
<script setup>
import OrderForm from 'pages/Order/Card/OrderForm.vue';
</script>
<template>
<QToolbar>
<div id="st-data"></div>
<QSpace />
<div id="st-actions"></div>
</QToolbar>
<OrderForm />
</template>
<style lang="scss" scoped></style>

View File

@ -15,9 +15,7 @@ const stateStore = useStateStore();
</QDrawer>
<QPageContainer>
<QPage>
<div class="q-pa-md">
<RouterView></RouterView>
</div>
<RouterView></RouterView>
</QPage>
</QPageContainer>
</template>

View File

@ -384,7 +384,7 @@ const getCategoryClass = (category, params) => {
.category-icon {
border-radius: 50%;
background-color: var(--vn-label);
background-color: var(--vn-light-gray);
font-size: 2.6rem;
padding: 8px;
cursor: pointer;

View File

@ -24,7 +24,7 @@ const dialog = ref(null);
<template>
<div class="container order-catalog-item overflow-hidden">
<div class="card shadow-6 bg-dark">
<QCard class="card shadow-6">
<div class="img-wrapper">
<QImg
:src="`/api/Images/catalog/200x200/${item.id}/download?access_token=${token}`"
@ -76,7 +76,7 @@ const dialog = ref(null);
</p>
</div>
</div>
</div>
</QCard>
</div>
</template>

View File

@ -51,13 +51,13 @@ async function remove() {
<i18n>
en:
deleteOrder: Delete order,
confirmDeletion: Confirm deletion,
deleteOrder: Delete order
confirmDeletion: Confirm deletion
confirmDeletionMessage: Are you sure you want to delete this order?
es:
deleteOrder: Eliminar pedido,
confirmDeletion: Confirmar eliminación,
deleteOrder: Eliminar pedido
confirmDeletion: Confirmar eliminación
confirmDeletionMessage: Seguro que quieres eliminar este pedido?
</i18n>

View File

@ -65,8 +65,8 @@ const fetchAgencyList = async (landed, addressFk) => {
};
const fetchOrderDetails = (order) => {
fetchAddressList(order?.addressFk)
fetchAgencyList(order?.landed, order?.addressFk)
fetchAddressList(order?.addressFk);
fetchAgencyList(order?.landed, order?.addressFk);
};
const orderMapper = (order) => {
@ -105,7 +105,7 @@ const orderFilter = {
</script>
<template>
<QToolbar>
<QToolbar class="bg-vn-dark justify-end">
<div id="st-data"></div>
<QSpace />
<div id="st-actions"></div>
@ -116,94 +116,97 @@ const orderFilter = {
:filter="{ fields: ['id', 'name', 'defaultAddressFk'] }"
auto-load
/>
<FormModel
:url="!isNew ? `Orders/${route.params.id}` : null"
:url-create="isNew ? 'Orders/new' : null"
:model="ORDER_MODEL"
:form-initial-data="isNew ? initialFormState : null"
:observe-form-changes="!isNew"
:mapper="isNew ? orderMapper : null"
:filter="orderFilter"
@on-fetch="fetchOrderDetails"
>
<template #form="{ data }">
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnSelectFilter
:label="t('order.form.clientFk')"
v-model="data.clientFk"
:options="clientList"
option-value="id"
option-label="name"
hide-selected
@update:model-value="
(client) => fetchAddressList(client.defaultAddressFk)
"
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel>
{{ `${scope.opt.id}: ${scope.opt.name}` }}
</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelectFilter>
</div>
<div class="col">
<VnSelectFilter
:label="t('order.form.addressFk')"
v-model="data.addressFk"
:options="addressList"
option-value="id"
option-label="nickname"
hide-selected
:disable="!addressList?.length"
@update:model-value="
() => fetchAgencyList(data.landed, data.addressFk)
"
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel>
{{
`${scope.opt.nickname}: ${scope.opt.street},${scope.opt.city}`
}}
</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelectFilter>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnInputDate
placeholder="dd-mm-aaa"
:label="t('order.form.landed')"
v-model="data.landed"
@update:model-value="
() => fetchAgencyList(data.landed, data.addressFk)
"
/>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnSelectFilter
:label="t('order.form.agencyModeFk')"
v-model="data.agencyModeFk"
:options="agencyList"
option-value="agencyModeFk"
option-label="agencyMode"
hide-selected
:disable="!agencyList?.length"
>
</VnSelectFilter>
</div>
</VnRow>
</template>
</FormModel>
<div class="q-pa-md">
<FormModel
:url="!isNew ? `Orders/${route.params.id}` : null"
:url-create="isNew ? 'Orders/new' : null"
:model="ORDER_MODEL"
:form-initial-data="isNew ? initialFormState : null"
:observe-form-changes="!isNew"
:mapper="isNew ? orderMapper : null"
:filter="orderFilter"
@on-fetch="fetchOrderDetails"
>
<template #form="{ data }">
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnSelectFilter
:label="t('order.form.clientFk')"
v-model="data.clientFk"
:options="clientList"
option-value="id"
option-label="name"
hide-selected
@update:model-value="
(client) => fetchAddressList(client.defaultAddressFk)
"
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel>
{{ `${scope.opt.id}: ${scope.opt.name}` }}
</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelectFilter>
</div>
<div class="col">
<VnSelectFilter
:label="t('order.form.addressFk')"
v-model="data.addressFk"
:options="addressList"
option-value="id"
option-label="nickname"
hide-selected
:disable="!addressList?.length"
@update:model-value="
() => fetchAgencyList(data.landed, data.addressFk)
"
>
<template #option="scope">
<QItem v-bind="scope.itemProps">
<QItemSection>
<QItemLabel>
{{
`${scope.opt.nickname}: ${scope.opt.street},${scope.opt.city}`
}}
</QItemLabel>
</QItemSection>
</QItem>
</template>
</VnSelectFilter>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnInputDate
placeholder="dd-mm-aaa"
:label="t('order.form.landed')"
v-model="data.landed"
@update:model-value="
() => fetchAgencyList(data.landed, data.addressFk)
"
/>
</div>
</VnRow>
<VnRow class="row q-gutter-md q-mb-md">
<div class="col">
<VnSelectFilter
:label="t('order.form.agencyModeFk')"
v-model="data.agencyModeFk"
:options="agencyList"
option-value="agencyModeFk"
option-label="agencyMode"
hide-selected
:disable="!agencyList?.length"
>
</VnSelectFilter>
</div>
</VnRow>
</template>
</FormModel>
</div>
</template>

View File

@ -56,148 +56,161 @@ const detailsColumns = ref([
<Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
<OrderSearchbar />
</Teleport>
<CardSummary ref="summary" :url="`Orders/${entityId}/summary`">
<template #header="{ entity }">
{{ t('order.summary.basket') }} #{{ entity?.id }} -
{{ entity?.client?.name }} ({{ entity?.clientFk }})
</template>
<template #body="{ entity }">
<QCard class="vn-one">
<VnLv label="ID" :value="entity.id" />
<VnLv :label="t('order.summary.nickname')" dash>
<template #value>
<span class="link">
{{ dashIfEmpty(entity?.address?.nickname) }}
<CustomerDescriptorProxy :id="entity?.clientFk" />
</span>
</template>
</VnLv>
<VnLv
:label="t('order.summary.company')"
:value="entity?.address?.companyFk"
/>
<VnLv
:label="t('order.summary.confirmed')"
:value="Boolean(entity?.isConfirmed)"
/>
</QCard>
<QCard class="vn-one">
<VnLv
:label="t('order.summary.created')"
:value="toDateHour(entity?.created)"
/>
<VnLv
:label="t('order.summary.confirmed')"
:value="toDateHour(entity?.confirmed)"
/>
<VnLv
:label="t('order.summary.landed')"
:value="toDateHour(entity?.landed)"
/>
<VnLv :label="t('order.summary.phone')">
<template #value>
{{ dashIfEmpty(entity?.address?.phone) }}
<a
v-if="entity?.address?.phone"
:href="`tel:${entity?.address?.phone}`"
class="text-primary"
>
<QIcon name="phone" />
</a>
</template>
</VnLv>
<VnLv
:label="t('order.summary.createdFrom')"
:value="entity?.sourceApp"
/>
<VnLv
:label="t('order.summary.address')"
:value="`${entity?.address?.street} - ${entity?.address?.city} (${entity?.address?.province?.name})`"
class="order-summary-address"
/>
</QCard>
<QCard class="vn-one">
<p class="header">
{{ t('order.summary.notes') }}
</p>
<p v-if="entity?.note" class="no-margin">
{{ entity?.note }}
</p>
</QCard>
<QCard class="vn-one">
<VnLv>
<template #label>
<span class="text-h6">{{ t('order.summary.subtotal') }}</span>
</template>
<template #value>
<span class="text-h6">{{ toCurrency(entity?.subTotal) }}</span>
</template>
</VnLv>
<VnLv>
<template #label>
<span class="text-h6">{{ t('order.summary.vat') }}</span>
</template>
<template #value>
<span class="text-h6">{{ toCurrency(entity?.VAT) }}</span>
</template>
</VnLv>
<VnLv>
<template #label>
<span class="text-h6">{{ t('order.summary.total') }}</span>
</template>
<template #value>
<span class="text-h6">{{ toCurrency(entity?.total) }}</span>
</template>
</VnLv>
</QCard>
<QCard>
<p class="header">
{{ t('order.summary.details') }}
</p>
<QTable
:columns="detailsColumns"
:rows="entity?.rows"
flat
hide-pagination
>
<template #header="props">
<QTr :props="props">
<QTh auto-width>{{ t('order.summary.item') }}</QTh>
<QTh>{{ t('order.summary.description') }}</QTh>
<QTh auto-width>{{ t('order.summary.quantity') }}</QTh>
<QTh auto-width>{{ t('order.summary.price') }}</QTh>
<QTh auto-width>{{ t('order.summary.amount') }}</QTh>
</QTr>
</template>
<template #body="props">
<QTr :props="props">
<QTd key="item" :props="props" class="item">
{{ props.row.item?.id }}
</QTd>
<QTd key="description" :props="props" class="description">
<div class="name">
<span>{{ props.row.item.name }}</span>
<span v-if="props.row.item.subName" class="subName">
{{ props.row.item.subName }}
</span>
</div>
<fetched-tags :item="props.row.item" :max-length="5" />
</QTd>
<QTd key="quantity" :props="props">
{{ props.row.quantity }}
</QTd>
<QTd key="price" :props="props">
{{ props.row.price }}
</QTd>
<QTd key="amount" :props="props">
{{ toCurrency(props.row?.quantity * props.row?.price) }}
</QTd>
</QTr>
</template>
</QTable>
</QCard>
</template>
</CardSummary>
<div class="q-pa-md">
<CardSummary ref="summary" :url="`Orders/${entityId}/summary`">
<template #header="{ entity }">
{{ t('order.summary.basket') }} #{{ entity?.id }} -
{{ entity?.client?.name }} ({{ entity?.clientFk }})
</template>
<template #body="{ entity }">
<QCard class="vn-one">
<VnLv label="ID" :value="entity.id" />
<VnLv :label="t('order.summary.nickname')" dash>
<template #value>
<span class="link">
{{ dashIfEmpty(entity?.address?.nickname) }}
<CustomerDescriptorProxy :id="entity?.clientFk" />
</span>
</template>
</VnLv>
<VnLv
:label="t('order.summary.company')"
:value="entity?.address?.companyFk"
/>
<VnLv
:label="t('order.summary.confirmed')"
:value="Boolean(entity?.isConfirmed)"
/>
</QCard>
<QCard class="vn-one">
<VnLv
:label="t('order.summary.created')"
:value="toDateHour(entity?.created)"
/>
<VnLv
:label="t('order.summary.confirmed')"
:value="toDateHour(entity?.confirmed)"
/>
<VnLv
:label="t('order.summary.landed')"
:value="toDateHour(entity?.landed)"
/>
<VnLv :label="t('order.summary.phone')">
<template #value>
{{ dashIfEmpty(entity?.address?.phone) }}
<a
v-if="entity?.address?.phone"
:href="`tel:${entity?.address?.phone}`"
class="text-primary"
>
<QIcon name="phone" />
</a>
</template>
</VnLv>
<VnLv
:label="t('order.summary.createdFrom')"
:value="entity?.sourceApp"
/>
<VnLv
:label="t('order.summary.address')"
:value="`${entity?.address?.street} - ${entity?.address?.city} (${entity?.address?.province?.name})`"
class="order-summary-address"
/>
</QCard>
<QCard class="vn-one">
<p class="header">
{{ t('order.summary.notes') }}
</p>
<p v-if="entity?.note" class="no-margin">
{{ entity?.note }}
</p>
</QCard>
<QCard class="vn-one">
<VnLv>
<template #label>
<span class="text-h6">{{ t('order.summary.subtotal') }}</span>
</template>
<template #value>
<span class="text-h6">{{
toCurrency(entity?.subTotal)
}}</span>
</template>
</VnLv>
<VnLv>
<template #label>
<span class="text-h6">{{ t('order.summary.vat') }}</span>
</template>
<template #value>
<span class="text-h6">{{ toCurrency(entity?.VAT) }}</span>
</template>
</VnLv>
<VnLv>
<template #label>
<span class="text-h6">{{ t('order.summary.total') }}</span>
</template>
<template #value>
<span class="text-h6">{{ toCurrency(entity?.total) }}</span>
</template>
</VnLv>
</QCard>
<QCard>
<p class="header">
{{ t('order.summary.details') }}
</p>
<QTable
:columns="detailsColumns"
:rows="entity?.rows"
flat
hide-pagination
>
<template #header="props">
<QTr :props="props">
<QTh auto-width>{{ t('order.summary.item') }}</QTh>
<QTh>{{ t('order.summary.description') }}</QTh>
<QTh auto-width>{{ t('order.summary.quantity') }}</QTh>
<QTh auto-width>{{ t('order.summary.price') }}</QTh>
<QTh auto-width>{{ t('order.summary.amount') }}</QTh>
</QTr>
</template>
<template #body="props">
<QTr :props="props">
<QTd key="item" :props="props" class="item">
{{ props.row.item?.id }}
</QTd>
<QTd key="description" :props="props" class="description">
<div class="name">
<span>{{ props.row.item.name }}</span>
<span
v-if="props.row.item.subName"
class="subName"
>
{{ props.row.item.subName }}
</span>
</div>
<fetched-tags
:item="props.row.item"
:max-length="5"
/>
</QTd>
<QTd key="quantity" :props="props">
{{ props.row.quantity }}
</QTd>
<QTd key="price" :props="props">
{{ props.row.price }}
</QTd>
<QTd key="amount" :props="props">
{{
toCurrency(props.row?.quantity * props.row?.price)
}}
</QTd>
</QTr>
</template>
</QTable>
</QCard>
</template>
</CardSummary>
</div>
</template>
<style lang="scss">
.cardSummary .summaryBody .vn-label-value.order-summary-address {

View File

@ -25,6 +25,7 @@ const orderSummary = ref({
vat: null,
});
const componentKey = ref(0);
const order = ref(0);
const refresh = () => {
componentKey.value += 1;
@ -63,6 +64,12 @@ async function confirmOrder() {
</script>
<template>
<FetchData
:key="componentKey"
:url="`Orders/${route.params.id}`"
@on-fetch="(data) => (order = data)"
auto-load
/>
<FetchData
:key="componentKey"
:url="`Orders/${route.params.id}/getTotal`"
@ -177,7 +184,7 @@ async function confirmOrder() {
:value="toCurrency(row.price * row.quantity)"
/>
</template>
<template #actions>
<template #actions v-if="!order?.isConfirmed">
<QBtn
:label="t('remove')"
@click.stop="confirmRemove(row)"
@ -190,7 +197,7 @@ async function confirmOrder() {
</template>
</VnPaginate>
</div>
<QPageSticky :offset="[20, 20]">
<QPageSticky :offset="[20, 20]" v-if="!order?.isConfirmed">
<QBtn fab icon="check" color="primary" @click="confirmOrder()" />
<QTooltip>
{{ t('confirm') }}