From a5f4f85c805f3ea59a6e7e7d7d0bc755741fb67a Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Tue, 18 Jun 2024 10:46:13 +0200
Subject: [PATCH] refactor: refs #6896 requested changes

---
 src/components/ui/VnImg.vue                 |  26 ++-
 src/pages/Item/Card/ItemDescriptorImage.vue |   7 +-
 src/pages/Order/Card/OrderCatalogFilter.vue |  17 +-
 src/pages/Order/Card/OrderCatalogItem.vue   |  13 +-
 src/pages/Order/Card/OrderForm.vue          |   8 +-
 src/pages/Order/OrderCatalog.vue            |  26 ---
 src/pages/Order/OrderLines.vue              | 215 +++++++++-----------
 7 files changed, 135 insertions(+), 177 deletions(-)

diff --git a/src/components/ui/VnImg.vue b/src/components/ui/VnImg.vue
index 37dce7c67..02cec5702 100644
--- a/src/components/ui/VnImg.vue
+++ b/src/components/ui/VnImg.vue
@@ -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>
diff --git a/src/pages/Item/Card/ItemDescriptorImage.vue b/src/pages/Item/Card/ItemDescriptorImage.vue
index a02f75b6b..5a0e84b45 100644
--- a/src/pages/Item/Card/ItemDescriptorImage.vue
+++ b/src/pages/Item/Card/ItemDescriptorImage.vue
@@ -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>
diff --git a/src/pages/Order/Card/OrderCatalogFilter.vue b/src/pages/Order/Card/OrderCatalogFilter.vue
index 46bb80b21..97422084b 100644
--- a/src/pages/Order/Card/OrderCatalogFilter.vue
+++ b/src/pages/Order/Card/OrderCatalogFilter.vue
@@ -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>
diff --git a/src/pages/Order/Card/OrderCatalogItem.vue b/src/pages/Order/Card/OrderCatalogItem.vue
index 9e362ecd0..34e22915d 100644
--- a/src/pages/Order/Card/OrderCatalogItem.vue
+++ b/src/pages/Order/Card/OrderCatalogItem.vue
@@ -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"
diff --git a/src/pages/Order/Card/OrderForm.vue b/src/pages/Order/Card/OrderForm.vue
index 26188f440..20b29cd9c 100644
--- a/src/pages/Order/Card/OrderForm.vue
+++ b/src/pages/Order/Card/OrderForm.vue
@@ -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"
diff --git a/src/pages/Order/OrderCatalog.vue b/src/pages/Order/OrderCatalog.vue
index c5d379d1e..1d97663d0 100644
--- a/src/pages/Order/OrderCatalog.vue
+++ b/src/pages/Order/OrderCatalog.vue
@@ -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
diff --git a/src/pages/Order/OrderLines.vue b/src/pages/Order/OrderLines.vue
index 667873cb4..fcb4551c8 100644
--- a/src/pages/Order/OrderLines.vue
+++ b/src/pages/Order/OrderLines.vue
@@ -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;