feat: refs #7347 updates

src/filters/index.js

@@ -6,6 +6,7 @@ import toDateHourMinSec from './toDateHourMinSec';
 import toRelativeDate from './toRelativeDate';
 import toCurrency from './toCurrency';
 import toPercentage from './toPercentage';
+import toNumber from './toNumber';
 import toLowerCamel from './toLowerCamel';
 import dashIfEmpty from './dashIfEmpty';
 import dateRange from './dateRange';
@@ -34,6 +35,7 @@ export {
     toRelativeDate,
     toCurrency,
     toPercentage,
+    toNumber,
     dashIfEmpty,
     dateRange,
     getParamWhere,

src/filters/toNumber.js

@@ -0,0 +1,8 @@
+export default function (value, fractionSize = 2) {
+    if (isNaN(value)) return value;
+    return new Intl.NumberFormat('es-ES', {
+        style: 'decimal',
+        minimumFractionDigits: 0,
+        maximumFractionDigits: fractionSize,
+    }).format(value);
+}

src/i18n/locale/en.yml

@@ -122,6 +122,7 @@ globals:
     producer: Producer
     origin: Origin
     state: State
+    total: Total
     subtotal: Subtotal
     visible: Visible
     price: Price

src/i18n/locale/es.yml

@@ -126,6 +126,7 @@ globals:
     producer: Productor
     origin: Origen
     state: Estado
+    total: Total
     subtotal: Subtotal
     visible: Visible
     price: Precio

src/pages/Supplier/Card/SupplierConsumption.vue

@@ -7,16 +7,18 @@ import FetchedTags from 'components/ui/FetchedTags.vue';
 import SendEmailDialog from 'components/common/SendEmailDialog.vue';
 import SupplierConsumptionFilter from './SupplierConsumptionFilter.vue';
 
-import { dateRange, toCurrency, toDate } from 'src/filters';
+import { dateRange, toCurrency, toNumber, toDate } from 'src/filters';
 
 import EntryDescriptorProxy from 'src/pages/Entry/Card/EntryDescriptorProxy.vue';
 import { usePrintService } from 'composables/usePrintService';
-import useNotify from 'src/composables/useNotify.js';
+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 RightMenu from 'src/components/common/RightMenu.vue';
+import { toDateHourMin } from 'src/filters';
+import InvoiceOutDescriptorProxy from 'src/pages/InvoiceOut/Card/InvoiceOutDescriptorProxy.vue';
 
 const state = useState();
 const stateStore = useStateStore();
@@ -28,7 +30,7 @@ const { notify } = useNotify();
 const totalRows = ref({});
 const arrayData = useArrayData('SupplierConsumption', {
     url: 'Suppliers/consumption',
-    order: ['itemTypeFk', 'itemName', 'itemSize'],
+    order: ['itemTypeFk', 'item', 'itemSize'],
     userFilter: { where: { supplierFk: route.params.id } },
 });
 const headerColumns = computed(() => [
@@ -41,30 +43,33 @@ const headerColumns = computed(() => [
     },
     {
         name: 'invoiceNumber',
-        label: t('globals.subItem'),
+        label: t('globals.params.supplierRef'),
         align: 'left',
         field: 'invoiceNumber',
         sortable: true,
     },
+    {
+        name: 'shipped',
+        label: t('globals.shipped'),
+        align: 'center',
+        field: 'shipped',
+        format: toDateHourMin,
+        sortable: true,
+    },
     {
         name: 'quantity',
-        label: t('globals.quantity'),
+        label: t('item.list.stems'),
-        align: 'left',
+        align: 'center',
         field: 'quantity',
+        format: (value) => toNumber(value),
         sortable: true,
     },
     {
         name: 'total',
-        label: t('globals.quantity'),
+        label: t('globals.total'),
-        align: 'left',
+        align: 'center',
         field: 'total',
-        sortable: true,
+        format: (value) => toCurrency(value),
-    },
-    {
-        name: 'shipped',
-        label: t('globals.quantity'),
-        align: 'left',
-        field: 'shipped',
         sortable: true,
     },
 ]);
@@ -79,7 +84,6 @@ const columns = computed(() => [
     },
     {
         name: 'subName',
-        label: t('globals.subItem'),
         align: 'left',
         field: 'subName',
         sortable: true,
@@ -87,22 +91,25 @@ const columns = computed(() => [
     {
         name: 'quantity',
         label: t('globals.quantity'),
-        align: 'left',
+        align: 'right',
         field: 'quantity',
+        format: (value) => toNumber(value),
         sortable: true,
     },
     {
         name: 'price',
         label: t('globals.price'),
-        align: 'left',
+        align: 'right',
         field: 'price',
+        format: (value) => toCurrency(value),
         sortable: true,
     },
     {
         name: 'total',
         label: t('globals.total'),
-        align: 'left',
+        align: 'right',
         field: 'total',
+        format: (value) => toCurrency(value),
         sortable: true,
     },
 ]);
@@ -204,7 +211,73 @@ onMounted(async () => {
     stateStore.rightDrawer = true;
     await getSupplierConsumptionData();
 });
-
+const lastAction = ref(null);
+const isAction = (action) => {
+    if (lastAction.value === action) {
+        lastAction.value = null;
+        return true;
+    }
+    lastAction.value = action;
+    return false;
+};
+const isActionExpand = (action) => {
+    if (action === 'expand_all') {
+        return isAction('expand_all');
+    }
+    if (action === 'unfold_all') {
+        return isAction('unfold_all');
+    }
+};
+const isActionExpandAll = computed(() => {
+    return isActionExpand('expand_all');
+});
+const isActionUnfoldAll = computed(() => {
+    return isActionExpand('unfold_all');
+});
+const isActionExpandAllIcon = computed(() => {
+    return isActionExpandAll.value ? 'unfold_less' : 'expand_more';
+});
+const isActionUnfoldAllIcon = computed(() => {
+    return isActionUnfoldAll.value ? 'expand_more' : 'unfold_less';
+});
+const isActionExpandAllLabel = computed(() => {
+    return isActionExpandAll.value ? t('globals.unfold_all') : t('globals.expand_all');
+});
+const isActionUnfoldAllLabel = computed(() => {
+    return isActionUnfoldAll.value ? t('globals.expand_all') : t('globals.unfold_all');
+});
+const isActionExpandAllDisabled = computed(() => {
+    return !rows.value.length;
+});
+const isActionUnfoldAllDisabled = computed(() => {
+    return !rows.value.length;
+});
+const isActionExpandAllTooltip = computed(() => {
+    return isActionExpandAll.value ? t('globals.unfold_all') : t('globals.expand_all');
+});
+const isActionUnfoldAllTooltip = computed(() => {
+    return isActionUnfoldAll.value ? t('globals.expand_all') : t('globals.unfold_all');
+});
+const isActionExpandAllIconClass = computed(() => {
+    return isActionExpandAll.value ? 'vn:unfold_less' : 'vn:expand_more';
+});
+const isActionUnfoldAllIconClass = computed(() => {
+    return isActionUnfoldAll.value ? 'vn:expand_more' : 'vn:unfold_less';
+});
+const isActionExpandAllIconClassColor = computed(() => {
+    return isActionExpandAll.value ? 'primary' : 'grey-4';
+});
+const isActionUnfoldAllIconClassColor = computed(() => {
+    return isActionUnfoldAll.value ? 'primary' : 'grey-4';
+});
+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;
+};
 const expanded = ref([]);
 // const initialExpanded = rows.filter((r, i) => i % 3 === 0).map((r) => r.index);
 </script>
@@ -240,14 +313,14 @@ const expanded = ref([]);
             <div>
                 {{ t('Total entries') }}:
                 <QChip :dense="$q.screen.lt.sm" text-color="white">
-                    {{ totalRows.totalPrice }} €
+                    {{ toCurrency(totalRows.totalPrice) }}
                 </QChip>
             </div>
             <QSeparator dark vertical />
             <div>
                 {{ t('Total stems entries') }}:
                 <QChip :dense="$q.screen.lt.sm" text-color="white">
-                    {{ totalRows.totalQuantity }}
+                    {{ toNumber(totalRows.totalQuantity) }}
                 </QChip>
             </div>
         </div>
@@ -258,34 +331,63 @@ const expanded = ref([]);
         </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"
-            :table-colspan="9"
             row-key="id"
-            virtual-scroll
-            :virtual-scroll-item-size="48"
-            :pagination="{
-                rowsPerPage: 0,
-            }"
-            :rows-per-page-options="[0]"
             v-model:expanded="expanded"
+            :grid="$q.screen.lt.md"
         >
-            <template v-slot:header="props">
+            <template #header="props">
                 <QTr :props="props">
                     <QTh auto-width />
 
                     <QTh v-for="col in props.cols" :key="col.name" :props="props">
-                        {{ col.label }}
+                        <span v-text="col.label" />
                     </QTh>
                 </QTr>
             </template>
 
-            <template v-slot:body="props">
+            <!-- Template especial para la columna 'id' -->
-                <QTr :props="props" :key="`m_${props.row.id}`" class="bg-travel">
+            <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"
+                    @click="props.expand = !props.expand"
+                >
                     <QTd auto-width>
                         <QToggle
                             v-model="props.expand"
@@ -295,55 +397,66 @@ const expanded = ref([]);
                     </QTd>
 
                     <QTd v-for="col in props.cols" :key="col.name" :props="props">
+                        <span @click.stop class="link" v-if="col.name === 'id'">
                             {{ col.value }}
+                            <EntryDescriptorProxy :id="col.value" />
+                        </span>
+
+                        <span v-else v-text="col.value" />
                     </QTd>
                 </QTr>
+
                 <QTr
                     v-show="props.expand"
                     :props="props"
-                    :key="`e_${props.row.id}`"
+                    :key="`expedition_${props.row.id}`"
-                    class="q-virtual-scroll--with-prev"
                 >
-                    <QTd colspan="100%">
+                    <QTd colspan="12" style="padding: 1px 0">
                         <QTable
-                            flat
-                            bordered
                             color="secondary"
                             card-class="bg-travel text-white "
+                            style-class="height: 30px"
                             table-header-class=" text-white"
                             ref="tableRef"
                             :rows="props.row.buys"
                             :columns="columns"
                             hide-header
-                            :table-colspan="9"
                             row-key="id"
                             virtual-scroll
-                            :virtual-scroll-item-size="48"
-                            :pagination="{
-                                rowsPerPage: 0,
-                            }"
-                            :rows-per-page-options="[0]"
                             v-model:expanded="expanded"
                         >
-                            <template v-slot:header="props">
+                            <template #body="props">
-                                <QTr :props="props">
+                                <!-- <QTr
-                                    <QTh
+                                    v-if="props.rowIndex === 0"
-                                        v-for="col in props.cols"
+                                    :key="`rowHeader_${props.row.id}`"
-                                        :key="col.name"
                                     :props="props"
                                 >
-                                        {{ col.label }}
-                                    </QTh>
-                                </QTr>
-                            </template>
-                            <template v-slot:body="props">
-                                <QTr :props="props" :key="`m_${props.row.id}`">
                                     <QTd
                                         v-for="col in props.cols"
                                         :key="col.name"
                                         :props="props"
                                     >
-                                        {{ col.value }}
+                                        <span v-text="col.label" />
+                                    </QTd>
+                                </QTr> -->
+                                <QTr :props="props" :key="`m_${props.row.id}`">
+                                    <QTd
+                                        v-for="col in props.cols"
+                                        :key="col.name"
+                                        :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>
                                     </QTd>
                                 </QTr>
                             </template>
@@ -453,6 +566,24 @@ const expanded = ref([]);
     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;
+}
 </style>
 
 <i18n>