forked from verdnatura/salix-front
refactor: refs #6896 requested changes
This commit is contained in:
parent
fe47215bf7
commit
a5f4f85c80
|
|
@ -1,18 +1,20 @@
|
|||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { ref, computed } from 'vue';
|
||||
import { useSession } from 'src/composables/useSession';
|
||||
|
||||
const $props = defineProps({
|
||||
collection: {
|
||||
type: [String, Number],
|
||||
default: null,
|
||||
default: 'Images',
|
||||
},
|
||||
size: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
type: String,
|
||||
default: '200x200',
|
||||
},
|
||||
zoomSize: {
|
||||
type: String,
|
||||
required: true,
|
||||
default: 'lg',
|
||||
},
|
||||
id: {
|
||||
type: Boolean,
|
||||
|
|
@ -20,9 +22,16 @@ const $props = defineProps({
|
|||
},
|
||||
});
|
||||
const show = ref(false);
|
||||
const token = useSession().getTokenMultimedia();
|
||||
const timeStamp = `timestamp=${Date.now()}`;
|
||||
const url = computed(
|
||||
() =>
|
||||
`/api/${$props.collection}/catalog/${$props.size}/${$props.id}/download?access_token=${token}&${timeStamp}`
|
||||
);
|
||||
</script>
|
||||
<template>
|
||||
<QImg
|
||||
:src="url"
|
||||
class="img"
|
||||
v-bind="$attrs"
|
||||
@click="show = !show"
|
||||
|
|
@ -31,6 +40,7 @@ const show = ref(false);
|
|||
/>
|
||||
<QDialog v-model="show" v-if="$props.zoomSize">
|
||||
<QImg
|
||||
:src="url"
|
||||
class="img_zoom"
|
||||
v-bind="$attrs"
|
||||
spinner-color="primary"
|
||||
|
|
@ -42,11 +52,13 @@ const show = ref(false);
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.img {
|
||||
cursor: pointer;
|
||||
border-radius: 0%;
|
||||
cursor: zoom-in;
|
||||
}
|
||||
.rounded {
|
||||
border-radius: 50%;
|
||||
}
|
||||
.img_zoom {
|
||||
width: 12%;
|
||||
width: 72%;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -69,12 +69,7 @@ onMounted(async () => {
|
|||
|
||||
<template>
|
||||
<div class="relative-position">
|
||||
<VnImg
|
||||
:src="image"
|
||||
spinner-color="primary"
|
||||
style="min-height: 256px"
|
||||
zoom-size="lg"
|
||||
>
|
||||
<VnImg :id="$props.entityId">
|
||||
<template #error>
|
||||
<div class="absolute-full picture text-center q-pa-md flex flex-center">
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -139,9 +139,19 @@ const onOrderChange = (value, params) => {
|
|||
};
|
||||
|
||||
const onOrderFieldChange = (value, params) => {
|
||||
console.log('value: ', value);
|
||||
console.log('params: ', params);
|
||||
const tagObj = JSON.parse(params.orderBy);
|
||||
const tagObj = JSON.parse(params.orderBy); // esto donde va
|
||||
const fields = {
|
||||
Relevancy: (value) => value + ' DESC, name',
|
||||
ColorAndPrice: 'showOrder, price',
|
||||
Name: 'name',
|
||||
Price: 'price',
|
||||
};
|
||||
let tagField = fields[value];
|
||||
if (!tagField) return;
|
||||
|
||||
if (typeof tagField === 'function') tagField = tagField(value);
|
||||
tagObj.field = tagField;
|
||||
params.orderBy = JSON.stringify(tagObj);
|
||||
switch (value) {
|
||||
case 'Relevancy':
|
||||
tagObj.field = value + ' DESC, name';
|
||||
|
|
@ -211,7 +221,6 @@ const useLang = (values) => {
|
|||
@remove="clearFilter"
|
||||
>
|
||||
<template #tags="{ tag, formatFn }">
|
||||
{{ console.log('tag: ', tag) }}
|
||||
<strong v-if="tag.label === 'categoryFk'">
|
||||
{{ t(selectedCategory?.name || '') }}
|
||||
</strong>
|
||||
|
|
|
|||
|
|
@ -7,13 +7,10 @@ import VnImg from 'src/components/ui/VnImg.vue';
|
|||
import OrderCatalogItemDialog from 'pages/Order/Card/OrderCatalogItemDialog.vue';
|
||||
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
|
||||
|
||||
import { useSession } from 'composables/useSession';
|
||||
import toCurrency from '../../../filters/toCurrency';
|
||||
|
||||
const DEFAULT_PRICE_KG = 0;
|
||||
|
||||
const { getTokenMultimedia } = useSession();
|
||||
const token = getTokenMultimedia();
|
||||
const { t } = useI18n();
|
||||
|
||||
defineProps({
|
||||
|
|
@ -30,15 +27,7 @@ const dialog = ref(null);
|
|||
<div class="container order-catalog-item overflow-hidden">
|
||||
<QCard class="card shadow-6">
|
||||
<div class="img-wrapper">
|
||||
<VnImg
|
||||
:src="`/api/Images/catalog/200x200/${item.id}/download?access_token=${token}`"
|
||||
spinner-color="primary"
|
||||
:ratio="1"
|
||||
zoom-size="lg"
|
||||
height="192"
|
||||
width="192"
|
||||
class="image"
|
||||
/>
|
||||
<VnImg :id="item.id" class="image" />
|
||||
<div v-if="item.hex" class="item-color-container">
|
||||
<div
|
||||
class="item-color"
|
||||
|
|
|
|||
|
|
@ -37,11 +37,9 @@ const onClientsFetched = (data) => {
|
|||
const client = clientList.value.find(
|
||||
(client) => client.id === initialFormState.clientFk
|
||||
);
|
||||
if (client && client.defaultAddressFk) {
|
||||
fetchAddressList(client.defaultAddressFk);
|
||||
} else {
|
||||
if (!client?.defaultAddressFk)
|
||||
throw new Error(t(`No default address found for the client`));
|
||||
}
|
||||
fetchAddressList(client.defaultAddressFk);
|
||||
};
|
||||
|
||||
const fetchAddressList = async (addressId) => {
|
||||
|
|
@ -148,7 +146,7 @@ async function onDataSaved(data) {
|
|||
<div class="q-pa-md">
|
||||
<FormModel
|
||||
:url="!isNew ? `Orders/${route.params.id}` : null"
|
||||
:url-create="'Orders/new'"
|
||||
url-create="Orders/new"
|
||||
@on-data-saved="onDataSaved"
|
||||
:model="ORDER_MODEL"
|
||||
:form-initial-data="isNew ? initialFormState : null"
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ import { useRoute } from 'vue-router';
|
|||
import { onMounted, onUnmounted, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import VnPaginate from 'components/ui/VnPaginate.vue';
|
||||
import VnSearchbar from 'components/ui/VnSearchbar.vue';
|
||||
import OrderCatalogItem from 'pages/Order/Card/OrderCatalogItem.vue';
|
||||
import OrderCatalogFilter from 'pages/Order/Card/OrderCatalogFilter.vue';
|
||||
|
||||
|
|
@ -53,31 +52,6 @@ function extractValueTags(items) {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport to="#searchbar" v-if="stateStore.isHeaderMounted()">
|
||||
<VnSearchbar
|
||||
data-key="OrderCatalogList"
|
||||
url="Orders/CatalogFilter"
|
||||
:limit="50"
|
||||
:user-params="catalogParams"
|
||||
:static-params="['orderFk', 'orderBy']"
|
||||
:redirect="false"
|
||||
/>
|
||||
</Teleport>
|
||||
<Teleport v-if="stateStore.isHeaderMounted()" to="#actions-append">
|
||||
<div class="row q-gutter-x-sm">
|
||||
<QBtn
|
||||
flat
|
||||
@click.stop="stateStore.toggleRightDrawer()"
|
||||
round
|
||||
dense
|
||||
icon="menu"
|
||||
>
|
||||
<QTooltip bottom anchor="bottom right">
|
||||
{{ t('globals.collapseMenu') }}
|
||||
</QTooltip>
|
||||
</QBtn>
|
||||
</div>
|
||||
</Teleport>
|
||||
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
|
||||
<QScrollArea class="fit text-grey-8">
|
||||
<OrderCatalogFilter
|
||||
|
|
|
|||
|
|
@ -12,15 +12,12 @@ import VnConfirm from 'components/ui/VnConfirm.vue';
|
|||
import VnImg from 'components/ui/VnImg.vue';
|
||||
|
||||
import { toCurrency, toDate } from 'src/filters';
|
||||
import { useSession } from 'composables/useSession';
|
||||
import axios from 'axios';
|
||||
import ItemDescriptorProxy from '../Item/Card/ItemDescriptorProxy.vue';
|
||||
|
||||
const route = useRoute();
|
||||
const { t } = useI18n();
|
||||
const { getTokenMultimedia } = useSession();
|
||||
const quasar = useQuasar();
|
||||
const token = getTokenMultimedia();
|
||||
const orderSummary = ref({
|
||||
total: null,
|
||||
vat: null,
|
||||
|
|
@ -44,7 +41,6 @@ function confirmRemove(item) {
|
|||
}
|
||||
|
||||
async function remove(item) {
|
||||
console.log('item: ', item);
|
||||
await axios.post('OrderRows/removes', {
|
||||
actualOrderId: route.params.id,
|
||||
rows: [item.id],
|
||||
|
|
@ -65,6 +61,11 @@ async function confirmOrder() {
|
|||
}
|
||||
|
||||
const detailsColumns = ref([
|
||||
{
|
||||
name: 'img',
|
||||
label: '',
|
||||
field: (row) => row?.item?.id,
|
||||
},
|
||||
{
|
||||
name: 'item',
|
||||
label: t('order.summary.item'),
|
||||
|
|
@ -76,6 +77,17 @@ const detailsColumns = ref([
|
|||
label: t('globals.description'),
|
||||
field: (row) => row?.item?.name,
|
||||
},
|
||||
{
|
||||
name: 'warehouse',
|
||||
label: t('warehouse'),
|
||||
field: (row) => row?.warehouse?.name,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'shipped',
|
||||
label: t('shipped'),
|
||||
field: (row) => toDate(row?.shipped),
|
||||
},
|
||||
{
|
||||
name: 'quantity',
|
||||
label: t('order.summary.quantity'),
|
||||
|
|
@ -91,6 +103,11 @@ const detailsColumns = ref([
|
|||
label: t('order.summary.amount'),
|
||||
field: (row) => toCurrency(row?.quantity * row?.price),
|
||||
},
|
||||
{
|
||||
name: 'actions',
|
||||
label: '',
|
||||
field: (row) => row?.id,
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
|
||||
|
|
@ -164,104 +181,91 @@ const detailsColumns = ref([
|
|||
:columns="detailsColumns"
|
||||
:rows="rows"
|
||||
flat
|
||||
class="full-width"
|
||||
style="text-align: center"
|
||||
>
|
||||
<template #header="props">
|
||||
<QTr :props="props" class="tr-header">
|
||||
<QTh></QTh>
|
||||
<QTh auto-width>{{ t('item') }}</QTh>
|
||||
<QTh>{{ t('globals.description') }}</QTh>
|
||||
<QTh>{{ t('warehouse') }}</QTh>
|
||||
<QTh>{{ t('shipped') }}</QTh>
|
||||
<QTh auto-width>
|
||||
{{ t('order.summary.quantity') }}
|
||||
<QTr class="tr-header" :props="props">
|
||||
<QTh
|
||||
v-for="col in props.cols"
|
||||
:key="col.name"
|
||||
:props="props"
|
||||
style="text-align: center"
|
||||
>
|
||||
{{ t(col.label) }}
|
||||
</QTh>
|
||||
<QTh auto-width>{{ t('order.summary.price') }}</QTh>
|
||||
<QTh auto-width>{{ t('amount') }}</QTh>
|
||||
<QTh></QTh>
|
||||
</QTr>
|
||||
</template>
|
||||
<template #body="props">
|
||||
<QTr :props="props">
|
||||
<QTd>
|
||||
<div class="image-wrapper">
|
||||
<VnImg
|
||||
:src="`/api/Images/catalog/200x200/${props.row.item?.id}/download?access_token=${token}`"
|
||||
class="image"
|
||||
height="50"
|
||||
width="50"
|
||||
style="
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
"
|
||||
zoom-size="lg"
|
||||
/>
|
||||
<template #body-cell-img="{ value }">
|
||||
<QTd>
|
||||
<div class="image-wrapper">
|
||||
<VnImg :id="value" class="rounded" />
|
||||
</div>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-item="{ value }">
|
||||
<QTd class="item">
|
||||
<span class="link">
|
||||
<QBtn flat>
|
||||
{{ value }}
|
||||
</QBtn>
|
||||
<ItemDescriptorProxy :id="value" />
|
||||
</span>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-description="{ value }">
|
||||
<QTd class="description-cell">
|
||||
<FetchedTags
|
||||
:item="value"
|
||||
:max-length="6"
|
||||
class="fetched-tags"
|
||||
/>
|
||||
<div class="row full-width justify-between">
|
||||
{{ value }}
|
||||
<div v-if="value" class="subName">
|
||||
{{ value.toUpperCase() }}
|
||||
</div>
|
||||
</QTd>
|
||||
<QTd key="item" :props="props" class="item">
|
||||
<span class="link">
|
||||
<QBtn flat>
|
||||
{{ props.row.item?.id }}
|
||||
</QBtn>
|
||||
<ItemDescriptorProxy
|
||||
:id="props.row.item?.id"
|
||||
/>
|
||||
</span>
|
||||
</QTd>
|
||||
<QTd
|
||||
key="description"
|
||||
:props="props"
|
||||
class="description-cell"
|
||||
</div>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-warehouse="{ value }">
|
||||
<QTd>
|
||||
{{ value }}
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-shipped="{ value }">
|
||||
<QTd>
|
||||
{{ value }}
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-quantity="{ value }">
|
||||
<QTd>
|
||||
{{ value }}
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-price="{ value }">
|
||||
<QTd>
|
||||
{{ value }}
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-amount="{ value }">
|
||||
<QTd>
|
||||
{{ value }}
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-actions="{ value }">
|
||||
<QTd>
|
||||
<QIcon
|
||||
name="delete"
|
||||
color="primary"
|
||||
size="sm"
|
||||
class="cursor-pointer"
|
||||
@click.stop="confirmRemove(value)"
|
||||
style="margin-left: 40%"
|
||||
>
|
||||
<div class="row full-width justify-between">
|
||||
{{ props.row.item.name }}
|
||||
<div
|
||||
v-if="props.row.item.subName"
|
||||
class="subName"
|
||||
>
|
||||
{{ props.row.item.subName.toUpperCase() }}
|
||||
</div>
|
||||
</div>
|
||||
<FetchedTags
|
||||
:item="props.row.item"
|
||||
:max-length="6"
|
||||
class="fetched-tags"
|
||||
/>
|
||||
</QTd>
|
||||
<QTd>
|
||||
{{ props.row.warehouse.name }}
|
||||
</QTd>
|
||||
<QTd>
|
||||
{{ toDate(props.row.shipped) }}
|
||||
</QTd>
|
||||
<QTd key="quantity" :props="props">
|
||||
{{ props.row.quantity }}
|
||||
</QTd>
|
||||
<QTd key="price" :props="props">
|
||||
{{ toCurrency(props.row.price) }}
|
||||
</QTd>
|
||||
<QTd key="amount" :props="props">
|
||||
{{
|
||||
toCurrency(
|
||||
props.row?.quantity * props.row?.price
|
||||
)
|
||||
}}
|
||||
</QTd>
|
||||
<QTd>
|
||||
<QIcon
|
||||
name="delete"
|
||||
color="primary"
|
||||
size="sm"
|
||||
class="cursor-pointer"
|
||||
@click.stop="confirmRemove(props.row)"
|
||||
style="margin-left: 40%"
|
||||
>
|
||||
<QTooltip>{{
|
||||
t('Remove thermograph')
|
||||
}}</QTooltip>
|
||||
</QIcon>
|
||||
</QTd>
|
||||
</QTr>
|
||||
<QTooltip>{{ t('Remove thermograph') }}</QTooltip>
|
||||
</QIcon>
|
||||
</QTd>
|
||||
</template>
|
||||
</QTable>
|
||||
</div>
|
||||
|
|
@ -320,32 +324,9 @@ const detailsColumns = ref([
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.description {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: left;
|
||||
height: auto;
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
|
||||
.name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-bottom: 8px;
|
||||
|
||||
& > * {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.description-cell {
|
||||
width: 25%;
|
||||
}
|
||||
.fetched-tags {
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.subName {
|
||||
text-transform: uppercase;
|
||||
|
|
|
|||
Loading…
Reference in New Issue