verdnatura/salix-front
verdnatura
/
salix-front
2
2
Fork 1
Code Issues Pull Requests 99 Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/FormModel.vue
View File

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

12
src/pages/Order/Card/OrderBasicData.vue
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>

4
src/pages/Order/Card/OrderCard.vue
View File

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

2
src/pages/Order/Card/OrderCatalogFilter.vue
View File

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

4
src/pages/Order/Card/OrderCatalogItem.vue
View File

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

8
src/pages/Order/Card/OrderDescriptorMenu.vue
View File

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

189
src/pages/Order/Card/OrderForm.vue
View File

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

297
src/pages/Order/Card/OrderSummary.vue
View File

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

11
src/pages/Order/OrderLines.vue
View File

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