From f6d23fc8bff6572cd5aa334bc1985daa9a7e4847 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 30 Apr 2025 17:15:57 +0200
Subject: [PATCH] refactor: refs #7347 reorganize imports, clean up and header
 style

---
 .../Supplier/Card/SupplierConsumption.vue     | 219 +++---------------
 1 file changed, 28 insertions(+), 191 deletions(-)

diff --git a/src/pages/Supplier/Card/SupplierConsumption.vue b/src/pages/Supplier/Card/SupplierConsumption.vue
index 85549acb3..f856671d2 100644
--- a/src/pages/Supplier/Card/SupplierConsumption.vue
+++ b/src/pages/Supplier/Card/SupplierConsumption.vue
@@ -1,24 +1,20 @@
 <script setup>
-import { useRoute } from 'vue-router';
 import { computed, onMounted, onUnmounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
 import { useQuasar } from 'quasar';
-import FetchedTags from 'components/ui/FetchedTags.vue';
-import SendEmailDialog from 'components/common/SendEmailDialog.vue';
-import SupplierConsumptionFilter from './SupplierConsumptionFilter.vue';
-
-import { dateRange, toCurrency, toNumber, toDate } from 'src/filters';
-
-import EntryDescriptorProxy from 'src/pages/Entry/Card/EntryDescriptorProxy.vue';
+import axios from 'axios';
+import { dateRange, toCurrency, toNumber, toDateHourMin } from 'src/filters';
 import { usePrintService } from 'composables/usePrintService';
 import useNotify from 'src/composables/useNotify';
-import axios from 'axios';
 import { useStateStore } from 'stores/useStateStore';
 import { useState } from 'src/composables/useState';
 import { useArrayData } from 'composables/useArrayData';
+import SendEmailDialog from 'components/common/SendEmailDialog.vue';
+import SupplierConsumptionFilter from './SupplierConsumptionFilter.vue';
 import RightMenu from 'src/components/common/RightMenu.vue';
-import { toDateHourMin } from 'src/filters';
-import InvoiceOutDescriptorProxy from 'src/pages/InvoiceOut/Card/InvoiceOutDescriptorProxy.vue';
+import EntryDescriptorProxy from 'src/pages/Entry/Card/EntryDescriptorProxy.vue';
+import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 
 const state = useState();
 const stateStore = useStateStore();
@@ -208,21 +204,11 @@ const totalEntryPrice = (rows) => {
     );
     return rows;
 };
-const tableRef = ref(null);
 onMounted(async () => {
     stateStore.rightDrawer = true;
     await getSupplierConsumptionData();
 });
-const lastAction = ref(null);
 const expanded = ref([]);
-const actions = (action) => {
-    if (action === 'expand_all') {
-        expanded.value = rows.value.map((r) => r.id);
-    } else if (action === 'unfold_all') {
-        expanded.value = [];
-    }
-    lastAction.value = action;
-};
 </script>
 
 <template>
@@ -274,28 +260,9 @@ const actions = (action) => {
         </template>
     </RightMenu>
     <QCard class="full-width q-pa-md">
-        <div class="row">
-            <QBtn
-                v-if="lastAction && lastAction === 'expand_all'"
-                name="expand_all"
-                flat
-                color="primary"
-                icon="expand_all"
-                @click.stop="actions('expand_all')"
-            />
-            <QBtn
-                v-if="lastAction && lastAction === 'unfold_all'"
-                name="unfold_all"
-                flat
-                color="primary"
-                icon="unfold_less"
-                @click.stop="actions('unfold_all')"
-            />
-        </div>
         <QTable
             flat
             bordered
-            ref="tableRef"
             :rows="rows"
             :columns="headerColumns"
             row-key="id"
@@ -307,28 +274,16 @@ const actions = (action) => {
                     <QTh auto-width />
 
                     <QTh v-for="col in props.cols" :key="col.name" :props="props">
-                        <span v-text="col.label" />
+                        <span v-text="col.label" class="tr-header" />
                     </QTh>
                 </QTr>
             </template>
 
-            <!-- Template especial para la columna 'id' -->
-            <template #body-cell-id="{ value }">
-                <div class="custom-id"><strong>ID:</strong> {{ value }}</div>
-            </template>
-
-            <!-- Template especial para la columna 'invoiceNumber' -->
-            <template #body-cell-invoiceNumber="{ value }">
-                <div class="custom-invoice">
-                    <span class="label">Invoice:</span>
-                    <span class="value">{{ value }}</span>
-                </div>
-            </template>
             <template #body="props">
                 <QTr
                     :props="props"
                     :key="`movement_${props.row.id}`"
-                    class="bg-travel cursor-pointer"
+                    class="bg-vn-page cursor-pointer"
                     @click="props.expand = !props.expand"
                 >
                     <QTd auto-width>
@@ -357,31 +312,27 @@ const actions = (action) => {
                     <QTd colspan="12" style="padding: 1px 0">
                         <QTable
                             color="secondary"
-                            card-class="bg-travel text-white "
+                            card-class="bg-vn-page text-white "
                             style-class="height: 30px"
-                            table-header-class=" text-white"
-                            ref="tableRef"
+                            table-header-class="text-white"
                             :rows="props.row.buys"
                             :columns="columns"
-                            hide-header
                             row-key="id"
                             virtual-scroll
                             v-model:expanded="expanded"
                         >
-                            <template #body="props">
-                                <!-- <QTr
-                                    v-if="props.rowIndex === 0"
-                                    :key="`rowHeader_${props.row.id}`"
-                                    :props="props"
-                                >
-                                    <QTd
+                            <template #header="props">
+                                <QTr :props="props">
+                                    <QTh
                                         v-for="col in props.cols"
                                         :key="col.name"
                                         :props="props"
                                     >
-                                        <span v-text="col.label" />
-                                    </QTd>
-                                </QTr> -->
+                                        <span v-text="col.label" class="tr-header" />
+                                    </QTh>
+                                </QTr>
+                            </template>
+                            <template #body="props">
                                 <QTr :props="props" :key="`m_${props.row.id}`">
                                     <QTd
                                         v-for="col in props.cols"
@@ -389,17 +340,15 @@ const actions = (action) => {
                                         :title="col.label"
                                         :props="props"
                                     >
-                                        <!-- <div class="grid-container">
-                                            <div class="grid-item name" :title="col.name">
-                                                {{ col.name }}
-                                            </div>
-                                            <div
-                                                class="grid-item value"
-                                                v-text="col.value"
-                                            ></div>
-                                        </div> -->
-
-                                        <span v-text="col.value"></span>
+                                        <span
+                                            @click.stop
+                                            class="link"
+                                            v-if="col.name === 'itemName'"
+                                        >
+                                            {{ col.value }}
+                                            <ItemDescriptorProxy :id="props.row.itemFk" />
+                                        </span>
+                                        <span v-else v-text="col.value" />
                                     </QTd>
                                 </QTr>
                             </template>
@@ -409,120 +358,8 @@ const actions = (action) => {
             </template>
         </QTable>
     </QCard>
-    <!-- <QTable
-            :rows="rows"
-            row-key="id"
-            hide-header
-            class="full-width q-mt-md"
-            :no-data-label="t('No results')"
-        >
-            <template #body="{ row }">
-                <QTr>
-                    <QTd no-hover>
-
-                    </QTd>
-                    <QTd no-hover>
-                       </QTd
-                    >
-                    <QTd colspan="6" no-hover>
-
-                    </QTd>
-                </QTr>
-                <QTh>
-                    <QTd no-hover>
-                        <span class="label">ItemFk </span>
-                    </QTd>
-                    <QTd no-hover>
-                        <span class="header">subName </span>
-                    </QTd>
-                    <QTd no-hover>
-                        <span class="label"> Quanitity : </span>
-                    </QTd>
-                </QTh>
-                <QTr v-for="(buy, index) in row.buys" :key="index">
-                    <QTd no-hover>
-                        <QBtn flat color="blue" dense no-caps>{{ buy.itemName }}</QBtn>
-                        <ItemDescriptorProxy :id="buy.itemFk" />
-                    </QTd>
-
-                    <QTd no-hover>
-                        <span>{{ buy.subName }}</span>
-                        <FetchedTags :item="buy" />
-                    </QTd>
-                    <QTd no-hover> {{ dashIfEmpty(buy.quantity) }}</QTd>
-                    <QTd no-hover> {{ dashIfEmpty(buy.price) }}</QTd>
-                    <QTd colspan="2" no-hover> {{ dashIfEmpty(buy.total) }}</QTd>
-                </QTr>
-                <QTr>
-                    <QTd colspan="5" no-hover>
-                        <span class="label">{{ t('Total entry') }}: </span>
-                        <span>{{ row.total }} €</span>
-                    </QTd>
-                    <QTd no-hover>
-                        <span class="label">{{ t('Total stems') }}: </span>
-                        <span>{{ row.quantity }}</span>
-                    </QTd>
-                </QTr>
-            </template>
-        </QTable> -->
 </template>
-<style lang="scss">
-.QTable__top {
-    padding: 0;
-}
-
-.QTable__bottom.row.items-center {
-    padding: 0;
-}
-</style>
 <style scoped lang="scss">
-.label {
-    padding-right: 5px;
-    color: var(--vn-label-color);
-}
-.header {
-    flex: 1 0 33%;
-    display: flex;
-    align-items: center;
-    padding-left: 8px;
-    height: 35px;
-    border-bottom: 1px solid $primary;
-    background-color: var(--vn-page-color);
-    font-size: 19px;
-    font-weight: bold;
-    text-transform: uppercase;
-}
-.footer {
-    flex: 1 0 33%;
-    display: flex;
-    align-items: center;
-    padding-left: 8px;
-    height: 35px;
-    border-bottom: 1px solid $primary;
-    background-color: var(--vn-page-color);
-    font-size: 19px;
-    font-weight: bold;
-    text-transform: uppercase;
-}
-
-.bg-travel {
-    background-color: var(--vn-page-color);
-    border-bottom: 2px solid $primary;
-}
-.grid-container {
-    display: grid;
-    grid-template-rows: auto auto; /* Dos filas: una para el nombre y otra para el valor */
-    gap: 4px; /* Espaciado entre filas */
-}
-
-.grid-item.name {
-    font-weight: bold; /* Estilo para el nombre */
-    color: var(--vn-label-color); /* Cambia el color según tu diseño */
-}
-
-.grid-item.value {
-    color: var(--vn-text-color); /* Estilo para el valor */
-}
 .q-table thead tr,
 .q-table tbody td {
     height: 30px;