From bf66d4ec998a461bedb6113843d8c858dc2b1264 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Sun, 25 Feb 2024 22:02:52 -0300
Subject: [PATCH 1/9] Table column filters

---
 src/pages/Entry/EntryLatestBuys.vue | 425 +++++++++++++++++++++++++++-
 1 file changed, 416 insertions(+), 9 deletions(-)

diff --git a/src/pages/Entry/EntryLatestBuys.vue b/src/pages/Entry/EntryLatestBuys.vue
index f4a423f3b..32f975ca7 100644
--- a/src/pages/Entry/EntryLatestBuys.vue
+++ b/src/pages/Entry/EntryLatestBuys.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, ref, computed } from 'vue';
+import { onMounted, ref, computed, reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
@@ -8,11 +8,14 @@ import FetchedTags from 'components/ui/FetchedTags.vue';
 import EntryDescriptorProxy from './Card/EntryDescriptorProxy.vue';
 import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
 import EditTableCellValueForm from 'src/components/EditTableCellValueForm.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 
 import { useStateStore } from 'stores/useStateStore';
 import { toDate, toCurrency } from 'src/filters';
 import { useSession } from 'composables/useSession';
 import { dashIfEmpty } from 'src/filters';
+import { useArrayData } from 'composables/useArrayData';
 
 const router = useRouter();
 const session = useSession();
@@ -21,11 +24,72 @@ const stateStore = useStateStore();
 const { t } = useI18n();
 
 const rowsFetchDataRef = ref(null);
+const itemTypesOptions = ref([]);
+const originsOptions = ref([]);
+const itemFamiliesOptions = ref([]);
+const intrastatOptions = ref([]);
+const packagingsOptions = ref([]);
 const editTableCellDialogRef = ref(null);
 const visibleColumns = ref([]);
 const allColumnNames = ref([]);
-const rows = ref([]);
+
+const exprBuilder = (param, value) => {
+    switch (param) {
+        case 'id':
+        case 'size':
+        case 'weightByPiece':
+        case 'isActive':
+        case 'family':
+        case 'minPrice':
+        case 'packingOut':
+            return { [`i.${param}`]: value };
+        case 'name':
+        case 'description':
+            return { [`i.${param}`]: { like: `%${value}%` } };
+        case 'code':
+            return { 'it.code': value };
+        case 'intrastat':
+            return { 'intr.description': value };
+        case 'origin':
+            return { 'ori.code': value };
+        case 'landing':
+            return { [`lb.${param}`]: value };
+        case 'packing':
+        case 'grouping':
+        case 'quantity':
+        case 'entryFk':
+        case 'buyingValue':
+        case 'freightValue':
+        case 'comissionValue':
+        case 'packageValue':
+        case 'isIgnored':
+        case 'price2':
+        case 'price3':
+        case 'ektFk':
+        case 'weight':
+        case 'packagingFk':
+            return { [`b.${param}`]: value };
+    }
+};
+
+const params = reactive({});
+const arrayData = useArrayData('EntryLatestBuys', {
+    url: 'Buys/latestBuysFilter',
+    order: ['itemFk DESC'],
+    exprBuilder: exprBuilder,
+});
+const store = arrayData.store;
+const rows = computed(() => store.data);
 const rowsSelected = ref([]);
+
+const getInputEvents = (col) => {
+    return col.columnFilter.type === 'select'
+        ? { 'update:modelValue': () => applyColumnFilter(col) }
+        : {
+              'keyup.enter': () => applyColumnFilter(col),
+          };
+};
+
 const columns = computed(() => [
     {
         label: t('entry.latestBuys.picture'),
@@ -37,12 +101,32 @@ const columns = computed(() => [
         name: 'itemFk',
         field: 'itemFk',
         align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
     },
     {
         label: t('entry.latestBuys.packing'),
         field: 'packing',
         name: 'packing',
         align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
         format: (val) => dashIfEmpty(val),
     },
     {
@@ -50,6 +134,16 @@ const columns = computed(() => [
         field: 'grouping',
         name: 'grouping',
         align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
         format: (val) => dashIfEmpty(val),
     },
     {
@@ -57,12 +151,32 @@ const columns = computed(() => [
         field: 'quantity',
         name: 'quantity',
         align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
     },
     {
         label: t('entry.latestBuys.description'),
         field: 'description',
         name: 'description',
         align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
         format: (val) => dashIfEmpty(val),
     },
     {
@@ -70,35 +184,104 @@ const columns = computed(() => [
         field: 'size',
         name: 'size',
         align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
     },
     {
         label: t('entry.latestBuys.tags'),
         name: 'tags',
         align: 'left',
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
     },
     {
         label: t('entry.latestBuys.type'),
         field: 'code',
         name: 'type',
         align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnSelectFilter,
+            type: 'select',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                options: itemTypesOptions.value,
+                'option-value': 'code',
+                'option-label': 'code',
+                dense: true,
+            },
+        },
     },
     {
         label: t('entry.latestBuys.intrastat'),
         field: 'intrastat',
         name: 'intrastat',
         align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnSelectFilter,
+            type: 'select',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                options: intrastatOptions.value,
+                'option-value': 'description',
+                'option-label': 'description',
+                dense: true,
+            },
+        },
     },
     {
         label: t('entry.latestBuys.origin'),
         field: 'origin',
         name: 'origin',
         align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnSelectFilter,
+            type: 'select',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                options: originsOptions.value,
+                'option-value': 'code',
+                'option-label': 'code',
+                dense: true,
+            },
+        },
     },
     {
         label: t('entry.latestBuys.weightByPiece'),
         field: 'weightByPiece',
         name: 'weightByPiece',
         align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
+
         format: (val) => dashIfEmpty(val),
     },
     {
@@ -106,24 +289,67 @@ const columns = computed(() => [
         field: 'isActive',
         name: 'isActive',
         align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
     },
     {
         label: t('entry.latestBuys.family'),
         field: 'family',
         name: 'family',
         align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnSelectFilter,
+            type: 'select',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                options: itemFamiliesOptions.value,
+                'option-value': 'code',
+                'option-label': 'code',
+                dense: true,
+            },
+        },
     },
     {
         label: t('entry.latestBuys.entryFk'),
         field: 'entryFk',
         name: 'entryFk',
         align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
     },
     {
         label: t('entry.latestBuys.buyingValue'),
         field: 'buyingValue',
         name: 'buyingValue',
         align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
         format: (val) => toCurrency(val),
     },
     {
@@ -131,6 +357,16 @@ const columns = computed(() => [
         field: 'freightValue',
         name: 'freightValue',
         align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
         format: (val) => toCurrency(val),
     },
     {
@@ -138,6 +374,16 @@ const columns = computed(() => [
         field: 'comissionValue',
         name: 'comissionValue',
         align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
         format: (val) => toCurrency(val),
     },
     {
@@ -145,6 +391,16 @@ const columns = computed(() => [
         field: 'packageValue',
         name: 'packageValue',
         align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
         format: (val) => toCurrency(val),
     },
     {
@@ -152,12 +408,33 @@ const columns = computed(() => [
         field: 'isIgnored',
         name: 'isIgnored',
         align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
     },
     {
         label: t('entry.latestBuys.price2'),
         field: 'price2',
         name: 'price2',
         align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
+
         format: (val) => toCurrency(val),
     },
     {
@@ -165,6 +442,16 @@ const columns = computed(() => [
         field: 'price3',
         name: 'price3',
         align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
         format: (val) => toCurrency(val),
     },
     {
@@ -172,6 +459,16 @@ const columns = computed(() => [
         field: 'minPrice',
         name: 'minPrice',
         align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
         format: (val) => toCurrency(val),
     },
     {
@@ -179,6 +476,16 @@ const columns = computed(() => [
         field: 'ektFk',
         name: 'ektFk',
         align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
         format: (val) => dashIfEmpty(val),
     },
     {
@@ -186,18 +493,51 @@ const columns = computed(() => [
         field: 'weight',
         name: 'weight',
         align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
     },
     {
         label: t('entry.latestBuys.packagingFk'),
         field: 'packagingFk',
         name: 'packagingFk',
         align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnSelectFilter,
+            type: 'select',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                options: packagingsOptions.value,
+                'option-value': 'id',
+                'option-label': 'id',
+                dense: true,
+            },
+        },
     },
     {
         label: t('entry.latestBuys.packingOut'),
         field: 'packingOut',
         name: 'packingOut',
         align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
         format: (val) => dashIfEmpty(val),
     },
     {
@@ -205,6 +545,16 @@ const columns = computed(() => [
         field: 'landing',
         name: 'landing',
         align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
         format: (val) => toDate(val),
     },
 ]);
@@ -234,20 +584,58 @@ const redirectToEntryBuys = (entryFk) => {
     router.push({ name: 'EntryBuys', params: { id: entryFk } });
 };
 
+const applyColumnFilter = async (col) => {
+    try {
+        if (!col.columnFilter.filterValue) {
+            delete params[col.field];
+        } else {
+            params[col.field] = col.columnFilter.filterValue;
+        }
+
+        await arrayData.applyFilter({ params });
+    } catch (err) {
+        console.error('Error applying column filter', err);
+    }
+};
+
 onMounted(async () => {
     stateStore.rightDrawer = true;
     const filteredColumns = columns.value.filter((col) => col.name !== 'picture');
     allColumnNames.value = filteredColumns.map((col) => col.name);
+    await arrayData.fetch({ append: false });
 });
 </script>
 
 <template>
     <FetchData
-        ref="rowsFetchDataRef"
-        url="Buys/latestBuysFilter"
-        :filter="{ order: 'itemFk DESC', limit: 20 }"
-        @on-fetch="(data) => (rows = data)"
+        url="ItemTypes"
+        :filter="{ fields: ['code'], order: 'code ASC', limit: 30 }"
         auto-load
+        @on-fetch="(data) => (itemTypesOptions = data)"
+    />
+    <FetchData
+        url="Origins"
+        :filter="{ fields: ['code'], order: 'code ASC', limit: 30 }"
+        auto-load
+        @on-fetch="(data) => (originsOptions = data)"
+    />
+    <FetchData
+        url="ItemFamilies"
+        :filter="{ fields: ['code'], order: 'code ASC', limit: 30 }"
+        auto-load
+        @on-fetch="(data) => (itemFamiliesOptions = data)"
+    />
+    <FetchData
+        url="Packagings"
+        :filter="{ fields: ['id'], order: 'id ASC', limit: 30 }"
+        auto-load
+        @on-fetch="(data) => (packagingsOptions = data)"
+    />
+    <FetchData
+        url="Intrastats"
+        :filter="{ fields: ['description'], order: 'description ASC', limit: 30 }"
+        auto-load
+        @on-fetch="(data) => (intrastatOptions = data)"
     />
     <QToolbar class="bg-vn-dark justify-end">
         <div id="st-data">
@@ -265,15 +653,34 @@ onMounted(async () => {
         <QTable
             :rows="rows"
             :columns="columns"
-            hide-bottom
             selection="multiple"
             row-key="id"
             :pagination="{ rowsPerPage: 0 }"
             class="full-width q-mt-md"
             :visible-columns="visibleColumns"
             v-model:selected="rowsSelected"
+            :no-data-label="t('globals.noResults')"
             @row-click="(_, row) => redirectToEntryBuys(row.entryFk)"
         >
+            <template #top-row="{ cols }">
+                <QTr>
+                    <QTd />
+                    <QTd
+                        v-for="(col, index) in cols"
+                        :key="index"
+                        style="max-width: 100px"
+                    >
+                        <component
+                            :is="col.columnFilter.component"
+                            v-if="col.name !== 'picture'"
+                            v-model="col.columnFilter.filterValue"
+                            v-bind="col.columnFilter.attrs"
+                            v-on="col.columnFilter.event(col)"
+                            dense
+                        />
+                    </QTd>
+                </QTr>
+            </template>
             <template #body-cell-picture="{ row }">
                 <QTd>
                     <QImg
@@ -288,7 +695,7 @@ onMounted(async () => {
             </template>
             <template #body-cell-itemFk="{ row }">
                 <QTd @click.stop>
-                    <QBtn flat color="blue">
+                    <QBtn flat color="primary">
                         {{ row.itemFk }}
                     </QBtn>
                 </QTd>
@@ -300,7 +707,7 @@ onMounted(async () => {
             </template>
             <template #body-cell-entryFk="{ row }">
                 <QTd @click.stop>
-                    <QBtn flat color="blue">
+                    <QBtn flat color="primary">
                         <EntryDescriptorProxy :id="row.entryFk" />
                         {{ row.entryFk }}
                     </QBtn>

From 546df84db1c637e7a99abc89a6c287547723c477 Mon Sep 17 00:00:00 2001
From: pablone <pablone@verdnatura.es>
Date: Mon, 26 Feb 2024 19:06:21 +0100
Subject: [PATCH 2/9] remove(claimRma): refs #6349 remove all references

---
 src/components/common/VnLog.vue         |   2 -
 src/i18n/en/index.js                    |   8 --
 src/i18n/es/index.js                    |   8 --
 src/pages/Claim/Card/ClaimBasicData.vue |   8 --
 src/pages/Claim/Card/ClaimRma.vue       | 145 --------------------
 src/pages/Claim/Card/ClaimSummary.vue   |   1 -
 src/pages/Claim/ClaimRmaList.vue        | 171 ------------------------
 src/router/modules/claim.js             |  23 +---
 8 files changed, 1 insertion(+), 365 deletions(-)
 delete mode 100644 src/pages/Claim/Card/ClaimRma.vue
 delete mode 100644 src/pages/Claim/ClaimRmaList.vue

diff --git a/src/components/common/VnLog.vue b/src/components/common/VnLog.vue
index 6368a3e52..be5a6583c 100644
--- a/src/components/common/VnLog.vue
+++ b/src/components/common/VnLog.vue
@@ -1036,7 +1036,6 @@ en:
         claimStateFk: Claim State
         workerFk: Worker
         clientFk: Customer
-        rma: RMA
         responsibility: Responsibility
         packages: Packages
 es:
@@ -1076,7 +1075,6 @@ es:
         claimStateFk: Estado de la reclamación
         workerFk: Trabajador
         clientFk: Cliente
-        rma: RMA
         responsibility: Responsabilidad
         packages: Bultos
 </i18n>
diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 9e0ad7c9b..2670369fb 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -483,11 +483,9 @@ export default {
             claims: 'Claims',
             list: 'List',
             createClaim: 'Create claim',
-            rmaList: 'RMA',
             summary: 'Summary',
             basicData: 'Basic Data',
             lines: 'Lines',
-            rma: 'RMA',
             photos: 'Photos',
             development: 'Development',
             log: 'Audit logs',
@@ -504,10 +502,6 @@ export default {
             code: 'Code',
             records: 'records',
         },
-        rma: {
-            user: 'User',
-            created: 'Created',
-        },
         card: {
             claimId: 'Claim ID',
             assignedTo: 'Assigned',
@@ -547,7 +541,6 @@ export default {
             responsible: 'Responsible',
             worker: 'Worker',
             redelivery: 'Redelivery',
-            returnOfMaterial: 'RMA',
         },
         basicData: {
             customer: 'Customer',
@@ -555,7 +548,6 @@ export default {
             created: 'Created',
             state: 'State',
             picked: 'Picked',
-            returnOfMaterial: 'Return of material authorization (RMA)',
         },
         photo: {
             fileDescription: 'Claim id {claimId} from client {clientName} id {clientId}',
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index 6083dfad7..844993522 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -482,11 +482,9 @@ export default {
             claims: 'Reclamaciones',
             list: 'Listado',
             createClaim: 'Crear reclamación',
-            rmaList: 'RMA',
             summary: 'Resumen',
             basicData: 'Datos básicos',
             lines: 'Líneas',
-            rma: 'RMA',
             development: 'Trazabilidad',
             photos: 'Fotos',
             log: 'Registros de auditoría',
@@ -503,10 +501,6 @@ export default {
             code: 'Código',
             records: 'registros',
         },
-        rma: {
-            user: 'Usuario',
-            created: 'Creado',
-        },
         card: {
             claimId: 'ID reclamación',
             assignedTo: 'Asignada a',
@@ -546,7 +540,6 @@ export default {
             responsible: 'Responsable',
             worker: 'Trabajador',
             redelivery: 'Devolución',
-            returnOfMaterial: 'RMA',
         },
         basicData: {
             customer: 'Cliente',
@@ -554,7 +547,6 @@ export default {
             created: 'Creada',
             state: 'Estado',
             picked: 'Recogida',
-            returnOfMaterial: 'Autorización de retorno de materiales (RMA)',
         },
         photo: {
             fileDescription:
diff --git a/src/pages/Claim/Card/ClaimBasicData.vue b/src/pages/Claim/Card/ClaimBasicData.vue
index 35f93c736..b5bf2bb42 100644
--- a/src/pages/Claim/Card/ClaimBasicData.vue
+++ b/src/pages/Claim/Card/ClaimBasicData.vue
@@ -24,7 +24,6 @@ const claimFilter = {
         'workerFk',
         'claimStateFk',
         'packages',
-        'rma',
         'hasToPickUp',
     ],
     include: [
@@ -169,13 +168,6 @@ const statesFilter = {
                         type="number"
                     />
                 </div>
-                <div class="col">
-                    <VnInput
-                        v-model="data.rma"
-                        :label="t('claim.basicData.returnOfMaterial')"
-                        :rules="validate('claim.rma')"
-                    />
-                </div>
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
diff --git a/src/pages/Claim/Card/ClaimRma.vue b/src/pages/Claim/Card/ClaimRma.vue
deleted file mode 100644
index bba901d7b..000000000
--- a/src/pages/Claim/Card/ClaimRma.vue
+++ /dev/null
@@ -1,145 +0,0 @@
-<script setup>
-import axios from 'axios';
-import { watch, ref, computed, onUnmounted, onMounted } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useQuasar } from 'quasar';
-import CrudModel from 'components/CrudModel.vue';
-import { useState } from 'src/composables/useState';
-
-import { toDate } from 'src/filters';
-
-const quasar = useQuasar();
-const state = useState();
-const { t } = useI18n();
-const selected = ref([]);
-const claimRmaRef = ref();
-const claim = computed(() => state.get('ClaimDescriptor'));
-
-const claimRmaFilter = {
-    include: {
-        relation: 'worker',
-        scope: {
-            include: {
-                relation: 'user',
-            },
-        },
-    },
-    order: 'created DESC',
-    where: {
-        code: claim.value?.rma,
-    },
-};
-
-async function addRow() {
-    if (!claim.value.rma) {
-        return quasar.notify({
-            message: `This claim is not associated to any RMA`,
-            type: 'negative',
-        });
-    }
-    const formData = {
-        code: claim.value.rma,
-    };
-
-    await axios.post(`ClaimRmas`, formData);
-    await claimRmaRef.value.reload();
-
-    quasar.notify({
-        type: 'positive',
-        message: t('globals.rowAdded'),
-        icon: 'check',
-    });
-}
-
-onMounted(() => {
-    if (claim.value) claimRmaRef.value.reload();
-});
-watch(
-    claim,
-    () => {
-        claimRmaRef.value.reload();
-    },
-    { deep: true }
-);
-</script>
-<template>
-    <div class="column items-center">
-        <div class="list">
-            <CrudModel
-                data-key="ClaimRma"
-                url="ClaimRmas"
-                model="ClaimRma"
-                :filter="claimRmaFilter"
-                v-model:selected="selected"
-                ref="claimRmaRef"
-                :default-save="false"
-                :default-reset="false"
-                :default-remove="false"
-            >
-                <template #body="{ rows }">
-                    <QCard>
-                        <template v-for="(row, index) of rows" :key="row.id">
-                            <QItem class="q-pa-none items-start">
-                                <QItemSection class="q-pa-md">
-                                    <QList>
-                                        <QItem class="q-pa-none">
-                                            <QItemSection>
-                                                <QItemLabel caption>
-                                                    {{ t('claim.rma.user') }}
-                                                </QItemLabel>
-                                                <QItemLabel>
-                                                    {{ row?.worker?.user?.name }}
-                                                </QItemLabel>
-                                            </QItemSection>
-                                        </QItem>
-                                        <QItem class="q-pa-none">
-                                            <QItemSection>
-                                                <QItemLabel caption>
-                                                    {{ t('claim.rma.created') }}
-                                                </QItemLabel>
-                                                <QItemLabel>
-                                                    {{
-                                                        toDate(row.created, {
-                                                            timeStyle: 'medium',
-                                                        })
-                                                    }}
-                                                </QItemLabel>
-                                            </QItemSection>
-                                        </QItem>
-                                    </QList>
-                                </QItemSection>
-                                <QCardActions vertical class="justify-between">
-                                    <QBtn
-                                        flat
-                                        round
-                                        color="orange"
-                                        icon="vn:bin"
-                                        @click="claimRmaRef.remove([row])"
-                                    >
-                                        <QTooltip>{{ t('globals.remove') }}</QTooltip>
-                                    </QBtn>
-                                </QCardActions>
-                            </QItem>
-                            <QSeparator v-if="index !== rows.length - 1" />
-                        </template>
-                    </QCard>
-                </template>
-            </CrudModel>
-        </div>
-    </div>
-    <QPageSticky position="bottom-right" :offset="[25, 25]">
-        <QBtn fab color="primary" icon="add" @click="addRow()" />
-    </QPageSticky>
-</template>
-
-<style lang="scss" scoped>
-.list {
-    width: 100%;
-    max-width: 60em;
-}
-</style>
-
-<i18n>
-es:
-    This claim is not associated to any RMA: Esta reclamación no está asociada a ninguna ARM
-</i18n>
diff --git a/src/pages/Claim/Card/ClaimSummary.vue b/src/pages/Claim/Card/ClaimSummary.vue
index cdc1f15be..97bd79830 100644
--- a/src/pages/Claim/Card/ClaimSummary.vue
+++ b/src/pages/Claim/Card/ClaimSummary.vue
@@ -211,7 +211,6 @@ function openDialog(dmsId) {
                         />
                     </template>
                 </VnLv>
-                <VnLv :label="t('claim.summary.returnOfMaterial')" :value="claim.rma" />
                 <QCheckbox
                     :align-items="right"
                     :label="t('claim.basicData.picked')"
diff --git a/src/pages/Claim/ClaimRmaList.vue b/src/pages/Claim/ClaimRmaList.vue
deleted file mode 100644
index b906e32fa..000000000
--- a/src/pages/Claim/ClaimRmaList.vue
+++ /dev/null
@@ -1,171 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useQuasar } from 'quasar';
-
-import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import VnConfirm from 'src/components/ui/VnConfirm.vue';
-import VnInput from 'src/components/common/VnInput.vue';
-
-import { useArrayData } from 'src/composables/useArrayData';
-import axios from 'axios';
-
-const quasar = useQuasar();
-const { t } = useI18n();
-
-const arrayData = useArrayData('ClaimRmaList');
-const isLoading = ref(false);
-const input = ref();
-
-const newRma = ref({
-    code: '',
-    crated: Date.vnNew(),
-});
-
-function onInputUpdate(value) {
-    newRma.value.code = value.toUpperCase();
-}
-
-async function submit() {
-    const formData = newRma.value;
-    if (formData.code === '') return;
-
-    isLoading.value = true;
-    await axios.post('ClaimRmas', formData);
-    await arrayData.refresh();
-    isLoading.value = false;
-    input.value.$el.focus();
-
-    newRma.value = {
-        code: '',
-        created: Date.vnNew(),
-    };
-}
-
-function confirm(id) {
-    quasar
-        .dialog({
-            component: VnConfirm,
-            componentProps: {
-                data: { id },
-                promise: remove,
-            },
-        })
-        .onOk(async () => await arrayData.refresh());
-}
-
-async function remove({ id }) {
-    await axios.delete(`ClaimRmas/${id}`);
-    quasar.notify({
-        type: 'positive',
-        message: t('globals.rowRemoved'),
-    });
-}
-</script>
-
-<template>
-    <QPage class="column items-center q-pa-md sticky">
-        <QPageSticky expand position="top" :offset="[16, 16]">
-            <QCard class="card q-pa-md">
-                <QForm @submit="submit">
-                    <VnInput
-                        ref="input"
-                        v-model="newRma.code"
-                        :label="t('claim.rmaList.code')"
-                        @update:model-value="onInputUpdate"
-                        class="q-mb-md"
-                        :readonly="isLoading"
-                        :loading="isLoading"
-                        autofocus
-                    />
-                    <div class="text-caption">
-                        {{ arrayData.totalRows }} {{ t('claim.rmaList.records') }}
-                    </div>
-                </QForm>
-            </QCard>
-        </QPageSticky>
-        <div class="vn-card-list">
-            <VnPaginate
-                data-key="ClaimRmaList"
-                url="ClaimRmas"
-                order="id DESC"
-                :offset="50"
-                auto-load
-            >
-                <template #body="{ rows }">
-                    <QCard class="card">
-                        <template v-if="isLoading">
-                            <QItem class="q-pa-none items-start">
-                                <QItemSection class="q-pa-md">
-                                    <QList>
-                                        <QItem class="q-pa-none">
-                                            <QItemSection>
-                                                <QItemLabel caption>
-                                                    <QSkeleton />
-                                                </QItemLabel>
-                                                <QItemLabel>
-                                                    <QSkeleton type="text" />
-                                                </QItemLabel>
-                                            </QItemSection>
-                                        </QItem>
-                                    </QList>
-                                </QItemSection>
-                                <QCardActions vertical class="justify-between">
-                                    <QSkeleton
-                                        type="circle"
-                                        class="q-mb-md"
-                                        size="40px"
-                                    />
-                                </QCardActions>
-                            </QItem>
-                            <QSeparator />
-                        </template>
-                        <template v-for="row of rows" :key="row.id">
-                            <QItem class="q-pa-none items-start">
-                                <QItemSection class="q-pa-md">
-                                    <QList>
-                                        <QItem class="q-pa-none">
-                                            <QItemSection>
-                                                <QItemLabel caption>{{
-                                                    t('claim.rmaList.code')
-                                                }}</QItemLabel>
-                                                <QItemLabel>{{ row.code }}</QItemLabel>
-                                            </QItemSection>
-                                        </QItem>
-                                    </QList>
-                                </QItemSection>
-                                <QCardActions vertical class="justify-between">
-                                    <QBtn
-                                        flat
-                                        round
-                                        color="primary"
-                                        icon="vn:bin"
-                                        @click="confirm(row.id)"
-                                    >
-                                        <QTooltip>{{ t('globals.remove') }}</QTooltip>
-                                    </QBtn>
-                                </QCardActions>
-                            </QItem>
-                            <QSeparator />
-                        </template>
-                    </QCard>
-                </template>
-            </VnPaginate>
-        </div>
-    </QPage>
-</template>
-
-<style lang="scss" scoped>
-.sticky {
-    padding-top: 156px;
-}
-
-.card {
-    width: 100%;
-    max-width: 60em;
-}
-
-.q-page-sticky {
-    z-index: 2998;
-}
-</style>
diff --git a/src/router/modules/claim.js b/src/router/modules/claim.js
index 1dfd75cff..30e6fffb3 100644
--- a/src/router/modules/claim.js
+++ b/src/router/modules/claim.js
@@ -10,11 +10,10 @@ export default {
     component: RouterView,
     redirect: { name: 'ClaimMain' },
     menus: {
-        main: ['ClaimList', 'ClaimRmaList'],
+        main: ['ClaimList'],
         card: [
             'ClaimBasicData',
             'ClaimLines',
-            'ClaimRma',
             'ClaimPhotos',
             'ClaimLog',
             'ClaimNotes',
@@ -38,16 +37,6 @@ export default {
                     },
                     component: () => import('src/pages/Claim/ClaimList.vue'),
                 },
-                {
-                    name: 'ClaimRmaList',
-                    path: 'rma',
-                    meta: {
-                        title: 'rmaList',
-                        icon: 'vn:barcode',
-                        roles: ['claimManager'],
-                    },
-                    component: () => import('src/pages/Claim/ClaimRmaList.vue'),
-                },
             ],
         },
         {
@@ -84,16 +73,6 @@ export default {
                     },
                     component: () => import('src/pages/Claim/Card/ClaimLines.vue'),
                 },
-                {
-                    name: 'ClaimRma',
-                    path: 'rma',
-                    meta: {
-                        title: 'rma',
-                        icon: 'vn:barcode',
-                        roles: ['claimManager'],
-                    },
-                    component: () => import('src/pages/Claim/Card/ClaimRma.vue'),
-                },
                 {
                     name: 'ClaimPhotos',
                     path: 'photos',

From 50218d6ddfe27b5a1e235ddc761829ce03b17efd Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 27 Feb 2024 07:32:51 -0300
Subject: [PATCH 3/9] WIP

---
 src/pages/Entry/EntryLatestBuys.vue       |  10 +-
 src/pages/Entry/EntryLatestBuysFilter.vue | 479 ++++++++++++++++++++++
 2 files changed, 488 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/Entry/EntryLatestBuysFilter.vue

diff --git a/src/pages/Entry/EntryLatestBuys.vue b/src/pages/Entry/EntryLatestBuys.vue
index 32f975ca7..7c5e03285 100644
--- a/src/pages/Entry/EntryLatestBuys.vue
+++ b/src/pages/Entry/EntryLatestBuys.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, ref, computed, reactive } from 'vue';
+import { onMounted, ref, computed, reactive, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
@@ -10,6 +10,7 @@ import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
 import EditTableCellValueForm from 'src/components/EditTableCellValueForm.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import EntryLatestBuysFilter from './EntryLatestBuysFilter.vue';
 
 import { useStateStore } from 'stores/useStateStore';
 import { toDate, toCurrency } from 'src/filters';
@@ -604,6 +605,8 @@ onMounted(async () => {
     allColumnNames.value = filteredColumns.map((col) => col.name);
     await arrayData.fetch({ append: false });
 });
+
+onUnmounted(() => (stateStore.rightDrawer = false));
 </script>
 
 <template>
@@ -649,6 +652,11 @@ onMounted(async () => {
         <QSpace />
         <div id="st-actions"></div>
     </QToolbar>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <EntryLatestBuysFilter data-key="OrderCatalogList" :tags="tags" />
+        </QScrollArea>
+    </QDrawer>
     <QPage class="column items-center q-pa-md">
         <QTable
             :rows="rows"
diff --git a/src/pages/Entry/EntryLatestBuysFilter.vue b/src/pages/Entry/EntryLatestBuysFilter.vue
new file mode 100644
index 000000000..e715b4d8d
--- /dev/null
+++ b/src/pages/Entry/EntryLatestBuysFilter.vue
@@ -0,0 +1,479 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+// import VnInput from 'components/common/VnInput.vue';
+import FetchData from 'components/FetchData.vue';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+// import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
+
+import axios from 'axios';
+
+const { t } = useI18n();
+const route = useRoute();
+const props = defineProps({
+    dataKey: {
+        type: String,
+        required: true,
+    },
+    tags: {
+        type: Array,
+        required: true,
+    },
+});
+
+const itemCategories = ref(null);
+const selectedCategoryFk = ref(null);
+const selectedTypeFk = ref(null);
+const itemTypesOptions = ref([]);
+const itemTypeWorkersOptions = ref([]);
+const suppliersOptions = ref([]);
+
+const categoryList = computed(() => {
+    return (itemCategories.value || [])
+        .filter((category) => category.display)
+        .map((category) => ({
+            ...category,
+            icon: `vn:${(category.icon || '').split('-')[1]}`,
+        }));
+});
+
+const selectCategory = async (params, categoryId, search) => {
+    if (params.categoryFk === categoryId) {
+        resetCategory();
+        params.categoryFk = null;
+        return;
+    }
+
+    selectedCategoryFk.value = categoryId;
+    params.categoryFk = categoryId;
+    console.log('params:: ', params);
+    await fetchItemTypes(categoryId);
+    search();
+};
+
+const resetCategory = () => {
+    selectedCategoryFk.value = null;
+    itemTypesOptions.value = null;
+};
+
+const fetchItemTypes = async (id) => {
+    try {
+        const filter = {
+            fields: ['id', 'name', 'categoryFk'],
+            where: { categoryFk: id },
+            include: 'category',
+            order: 'name ASC',
+        };
+        const { data } = await axios.get('ItemTypes', {
+            params: { filter: JSON.stringify(filter) },
+        });
+        itemTypesOptions.value = data;
+    } catch (err) {
+        console.error('Error fetching item types', err);
+    }
+};
+
+// const selectedOrder = ref(null);
+// const orderList = [
+//     { way: 'ASC', name: 'Ascendant' },
+//     { way: 'DESC', name: 'Descendant' },
+// ];
+
+// const selectedOrderField = ref(null);
+// const OrderFields = [
+//     { field: 'relevancy DESC, name', name: 'Relevancy', priority: 999 },
+//     { field: 'showOrder, price', name: 'Color and price', priority: 999 },
+//     { field: 'name', name: 'Name', priority: 999 },
+//     { field: 'price', name: 'Price', priority: 999 },
+// ];
+
+// const clearFilter = (key) => {
+//     if (key === 'categoryFk') {
+//         resetCategory();
+//     }
+// };
+
+// const onFilterInit = async ({ params }) => {
+//     if (params.typeFk) {
+//         selectedTypeFk.value = params.typeFk;
+//     }
+//     if (params.categoryFk) {
+//         await loadTypes(params.categoryFk);
+//         selectedCategoryFk.value = params.categoryFk;
+//     }
+//     if (params.orderBy) {
+//         orderByParam.value = JSON.parse(params.orderBy);
+//         selectedOrder.value = orderByParam.value?.way;
+//         selectedOrderField.value = orderByParam.value?.field;
+//     }
+// };
+
+// const selectedCategory = computed(() =>
+//     (itemCategories.value || []).find(
+//         (category) => category?.id === selectedCategoryFk.value
+//     )
+// );
+
+// const selectedType = computed(() => {
+//     return (typeList.value || []).find((type) => type?.id === selectedTypeFk.value);
+// });
+
+// function exprBuilder(param, value) {
+//     switch (param) {
+//         case 'categoryFk':
+//         case 'typeFk':
+//             return { [param]: value };
+//         case 'search':
+//             return { 'i.name': { like: `%${value}%` } };
+//     }
+// }
+
+// const selectedTag = ref(null);
+// const tagValues = ref([{}]);
+// const tagOptions = ref(null);
+// const isButtonDisabled = computed(
+//     () => !selectedTag.value || tagValues.value.some((item) => !item.value)
+// );
+
+// const applyTagFilter = (params, search) => {
+//     if (!tagValues.value?.length) {
+//         params.tagGroups = null;
+//         search();
+//         return;
+//     }
+//     if (!params.tagGroups) {
+//         params.tagGroups = [];
+//     }
+//     params.tagGroups.push(
+//         JSON.stringify({
+//             values: tagValues.value,
+//             tagSelection: {
+//                 ...selectedTag.value,
+//                 orgShowField: selectedTag.value.name,
+//             },
+//             tagFk: selectedTag.value.tagFk,
+//         })
+//     );
+//     search();
+//     selectedTag.value = null;
+//     tagValues.value = [{}];
+// };
+
+// const removeTagChip = (selection, params, search) => {
+//     if (params.tagGroups) {
+//         params.tagGroups = (params.tagGroups || []).filter(
+//             (value) => value !== selection
+//         );
+//     }
+//     search();
+// };
+
+// const orderByParam = ref(null);
+
+// const onOrderFieldChange = (value, params, search) => {
+//     const orderBy = Object.assign({}, orderByParam.value, { field: value.field });
+//     params.orderBy = JSON.stringify(orderBy);
+//     search();
+// };
+
+// const onOrderChange = (value, params, search) => {
+//     const orderBy = Object.assign({}, orderByParam.value, { way: value.way });
+//     params.orderBy = JSON.stringify(orderBy);
+//     search();
+// };
+
+const getCategoryClass = (category, params) => {
+    if (category.id === params?.categoryFk) {
+        return 'active';
+    }
+};
+</script>
+
+<template>
+    <FetchData
+        url="ItemCategories"
+        limit="30"
+        auto-load
+        @on-fetch="(data) => (itemCategories = data)"
+    />
+    <FetchData
+        url="TicketRequests/getItemTypeWorker"
+        limit="30"
+        auto-load
+        :filter="{ fields: ['id', 'nickname'], order: 'nickname ASC', limit: 30 }"
+        @on-fetch="(data) => (itemTypeWorkersOptions = data)"
+    />
+    <FetchData
+        url="Suppliers"
+        limit="30"
+        auto-load
+        :filter="{ fields: ['id', 'name', 'nickname'], order: 'name ASC', limit: 30 }"
+        @on-fetch="(data) => (suppliersOptions = data)"
+    />
+    <VnFilterPanel
+        :data-key="props.dataKey"
+        :expr-builder="exprBuilder"
+        @init="onFilterInit"
+        @remove="clearFilter"
+    >
+        <template #tags="{ tag, formatFn }">
+            <div class="q-gutter-x-xs">
+                <strong>{{ t(`params.${tag.label}`) }}: </strong>
+                <span>{{ formatFn(tag.value) }}</span>
+            </div>
+        </template>
+        <!-- <template #customTags="{ tags: customTags, params, searchFn }">
+            <template v-for="tag in customTags" :key="tag.label">
+                <template v-if="tag.label === 'tagGroups'">
+                    <VnFilterPanelChip
+                        v-for="chip in tag.value"
+                        :key="chip"
+                        removable
+                        @remove="removeTagChip(chip, params, searchFn)"
+                    >
+                        <strong> {{ JSON.parse(chip).tagSelection?.name }}: </strong>
+                        <span>{{
+                            (JSON.parse(chip).values || [])
+                                .map((item) => item.value)
+                                .join(' | ')
+                        }}</span>
+                    </VnFilterPanelChip>
+                </template>
+            </template>
+        </template> -->
+        <template #body="{ params, searchFn }">
+            <QItem class="category-filter q-mt-md">
+                <div
+                    v-for="category in categoryList"
+                    :key="category.name"
+                    :class="['category', getCategoryClass(category, params)]"
+                >
+                    <QIcon
+                        :name="category.icon"
+                        class="category-icon"
+                        @click="selectCategory(params, category.id, searchFn)"
+                    >
+                        <QTooltip>
+                            {{ t(category.name) }}
+                        </QTooltip>
+                    </QIcon>
+                </div>
+            </QItem>
+            <QItem class="q-my-md">
+                <QItemSection>
+                    <VnSelectFilter
+                        :label="t('params.typeFk')"
+                        v-model="params.typeFk"
+                        :options="itemTypesOptions"
+                        option-value="id"
+                        option-label="name"
+                        dense
+                        outlined
+                        rounded
+                        use-input
+                        :disable="!selectedCategoryFk"
+                        @update:model-value="
+                            (value) => {
+                                selectedTypeFk = value;
+                                searchFn();
+                            }
+                        "
+                    >
+                        <template #option="{ itemProps, opt }">
+                            <QItem v-bind="itemProps">
+                                <QItemSection>
+                                    <QItemLabel>{{ opt.name }}</QItemLabel>
+                                    <QItemLabel caption>
+                                        {{ opt.categoryName }}
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelectFilter>
+                </QItemSection>
+            </QItem>
+            <QSeparator />
+            <QItem class="q-my-md">
+                <QItemSection>
+                    <VnSelectFilter
+                        :label="t('params.buyer')"
+                        v-model="params.salesPersonFk"
+                        :options="itemTypeWorkersOptions"
+                        option-value="id"
+                        option-label="nickname"
+                        dense
+                        outlined
+                        rounded
+                        use-input
+                        @update:model-value="searchFn()"
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem class="q-my-md">
+                <QItemSection>
+                    <VnSelectFilter
+                        :label="t('params.supplier')"
+                        v-model="params.supplierFk"
+                        :options="suppliersOptions"
+                        option-value="id"
+                        option-label="name"
+                        dense
+                        outlined
+                        rounded
+                        use-input
+                        @update:model-value="searchFn()"
+                    >
+                        <template #option="{ itemProps, opt }">
+                            <QItem v-bind="itemProps">
+                                <QItemSection>
+                                    <QItemLabel>{{ opt.name }}</QItemLabel>
+                                    <QItemLabel caption>
+                                        {{ opt.nickname }}
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelectFilter>
+                </QItemSection>
+            </QItem>
+            <QItem class="q-my-md">
+                <QItemSection>
+                    <VnInputDate
+                        :label="t('params.from')"
+                        v-model="params.from"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem class="q-my-md">
+                <QItemSection>
+                    <VnInputDate
+                        :label="t('params.to')"
+                        v-model="params.to"
+                        is-outlined
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <QCheckbox
+                        :label="t('params.active')"
+                        v-model="params.active"
+                        toggle-indeterminate
+                    />
+                </QItemSection>
+                <QItemSection>
+                    <QCheckbox
+                        :label="t('params.visible')"
+                        v-model="params.visible"
+                        toggle-indeterminate
+                    />
+                </QItemSection>
+            </QItem>
+            <QItem>
+                <QItemSection>
+                    <QCheckbox
+                        :label="t('params.floramondo')"
+                        v-model="params.floramondo"
+                        toggle-indeterminate
+                    />
+                </QItemSection>
+            </QItem>
+        </template>
+    </VnFilterPanel>
+</template>
+
+<style lang="scss" scoped>
+.category-filter {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 12px;
+
+    .category {
+        flex: 1;
+        flex-shrink: 0;
+        display: flex;
+        justify-content: center;
+
+        &.active {
+            .category-icon {
+                background-color: $primary;
+            }
+        }
+    }
+
+    .category-icon {
+        border-radius: 50%;
+        background-color: var(--vn-light-gray);
+        font-size: 2.6rem;
+        padding: 8px;
+        cursor: pointer;
+    }
+}
+
+.filter-icon {
+    font-size: 24px;
+    color: $primary;
+    padding: 0 4px;
+    cursor: pointer;
+}
+
+.filter-input {
+    flex-shrink: 1;
+    min-width: 0;
+}
+
+.filter-value {
+    display: flex;
+    align-items: center;
+}
+</style>
+
+<i18n>
+en:
+    params:
+        orderBy: Order By
+        tag: Tag
+        value: Value
+        order: Order
+
+        supplier: Supplier
+        from: From
+        to: To
+        active: Is active
+        visible: Is visible
+        floramondo: Is floramondo
+        salesPersonFk: Buyer
+        categoryFk: Category
+        typeFk: Type
+es:
+    params:
+        orderBy: Ordenar por
+        tag: Etiqueta
+        value: Valor
+        order: Orden
+
+        supplier: Proveedor
+        from: Desde
+        to: Hasta
+        active: Activo
+        visible: Visible
+        floramondo: Floramondo
+        salesPersonFk: Comprador
+        categoryFk: Categoría
+        typeFk: Tipo
+
+    Plant: Planta
+    Flower: Flor
+    Handmade: Confección
+    Green: Verde
+    Accessories: Complemento
+    Fruit: Fruta
+
+
+</i18n>

From 2774c68f19944c0e66d75303c0255452151f45e6 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Mon, 4 Mar 2024 09:06:29 -0300
Subject: [PATCH 4/9] Right filter panel WIP

---
 src/pages/Entry/EntryLatestBuys.vue       |   2 +-
 src/pages/Entry/EntryLatestBuysFilter.vue | 314 ++++++++++------------
 2 files changed, 138 insertions(+), 178 deletions(-)

diff --git a/src/pages/Entry/EntryLatestBuys.vue b/src/pages/Entry/EntryLatestBuys.vue
index 7c5e03285..65747d2e2 100644
--- a/src/pages/Entry/EntryLatestBuys.vue
+++ b/src/pages/Entry/EntryLatestBuys.vue
@@ -654,7 +654,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
     </QToolbar>
     <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
         <QScrollArea class="fit text-grey-8">
-            <EntryLatestBuysFilter data-key="OrderCatalogList" :tags="tags" />
+            <EntryLatestBuysFilter data-key="EntryLatestBuys" :tags="tags" />
         </QScrollArea>
     </QDrawer>
     <QPage class="column items-center q-pa-md">
diff --git a/src/pages/Entry/EntryLatestBuysFilter.vue b/src/pages/Entry/EntryLatestBuysFilter.vue
index e715b4d8d..55f75d0c5 100644
--- a/src/pages/Entry/EntryLatestBuysFilter.vue
+++ b/src/pages/Entry/EntryLatestBuysFilter.vue
@@ -1,36 +1,31 @@
 <script setup>
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
 
-// import VnInput from 'components/common/VnInput.vue';
+import VnInput from 'components/common/VnInput.vue';
 import FetchData from 'components/FetchData.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnSelectFilter from 'components/common/VnSelectFilter.vue';
-// import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
 
 import axios from 'axios';
 
 const { t } = useI18n();
-const route = useRoute();
 const props = defineProps({
     dataKey: {
         type: String,
         required: true,
     },
-    tags: {
-        type: Array,
-        required: true,
-    },
 });
 
-const itemCategories = ref(null);
+const itemCategories = ref([]);
 const selectedCategoryFk = ref(null);
 const selectedTypeFk = ref(null);
 const itemTypesOptions = ref([]);
 const itemTypeWorkersOptions = ref([]);
 const suppliersOptions = ref([]);
+const tagOptions = ref([]);
+const tagValues = ref([]);
 
 const categoryList = computed(() => {
     return (itemCategories.value || [])
@@ -41,16 +36,26 @@ const categoryList = computed(() => {
         }));
 });
 
+const selectedCategory = computed(() =>
+    (itemCategories.value || []).find(
+        (category) => category?.id === selectedCategoryFk.value
+    )
+);
+
+const selectedType = computed(() => {
+    return (itemTypesOptions.value || []).find(
+        (type) => type?.id === selectedTypeFk.value
+    );
+});
+
 const selectCategory = async (params, categoryId, search) => {
     if (params.categoryFk === categoryId) {
         resetCategory();
         params.categoryFk = null;
         return;
     }
-
     selectedCategoryFk.value = categoryId;
     params.categoryFk = categoryId;
-    console.log('params:: ', params);
     await fetchItemTypes(categoryId);
     search();
 };
@@ -60,6 +65,8 @@ const resetCategory = () => {
     itemTypesOptions.value = null;
 };
 
+const applyTags = () => {};
+
 const fetchItemTypes = async (id) => {
     try {
         const filter = {
@@ -77,120 +84,31 @@ const fetchItemTypes = async (id) => {
     }
 };
 
-// const selectedOrder = ref(null);
-// const orderList = [
-//     { way: 'ASC', name: 'Ascendant' },
-//     { way: 'DESC', name: 'Descendant' },
-// ];
-
-// const selectedOrderField = ref(null);
-// const OrderFields = [
-//     { field: 'relevancy DESC, name', name: 'Relevancy', priority: 999 },
-//     { field: 'showOrder, price', name: 'Color and price', priority: 999 },
-//     { field: 'name', name: 'Name', priority: 999 },
-//     { field: 'price', name: 'Price', priority: 999 },
-// ];
-
-// const clearFilter = (key) => {
-//     if (key === 'categoryFk') {
-//         resetCategory();
-//     }
-// };
-
-// const onFilterInit = async ({ params }) => {
-//     if (params.typeFk) {
-//         selectedTypeFk.value = params.typeFk;
-//     }
-//     if (params.categoryFk) {
-//         await loadTypes(params.categoryFk);
-//         selectedCategoryFk.value = params.categoryFk;
-//     }
-//     if (params.orderBy) {
-//         orderByParam.value = JSON.parse(params.orderBy);
-//         selectedOrder.value = orderByParam.value?.way;
-//         selectedOrderField.value = orderByParam.value?.field;
-//     }
-// };
-
-// const selectedCategory = computed(() =>
-//     (itemCategories.value || []).find(
-//         (category) => category?.id === selectedCategoryFk.value
-//     )
-// );
-
-// const selectedType = computed(() => {
-//     return (typeList.value || []).find((type) => type?.id === selectedTypeFk.value);
-// });
-
-// function exprBuilder(param, value) {
-//     switch (param) {
-//         case 'categoryFk':
-//         case 'typeFk':
-//             return { [param]: value };
-//         case 'search':
-//             return { 'i.name': { like: `%${value}%` } };
-//     }
-// }
-
-// const selectedTag = ref(null);
-// const tagValues = ref([{}]);
-// const tagOptions = ref(null);
-// const isButtonDisabled = computed(
-//     () => !selectedTag.value || tagValues.value.some((item) => !item.value)
-// );
-
-// const applyTagFilter = (params, search) => {
-//     if (!tagValues.value?.length) {
-//         params.tagGroups = null;
-//         search();
-//         return;
-//     }
-//     if (!params.tagGroups) {
-//         params.tagGroups = [];
-//     }
-//     params.tagGroups.push(
-//         JSON.stringify({
-//             values: tagValues.value,
-//             tagSelection: {
-//                 ...selectedTag.value,
-//                 orgShowField: selectedTag.value.name,
-//             },
-//             tagFk: selectedTag.value.tagFk,
-//         })
-//     );
-//     search();
-//     selectedTag.value = null;
-//     tagValues.value = [{}];
-// };
-
-// const removeTagChip = (selection, params, search) => {
-//     if (params.tagGroups) {
-//         params.tagGroups = (params.tagGroups || []).filter(
-//             (value) => value !== selection
-//         );
-//     }
-//     search();
-// };
-
-// const orderByParam = ref(null);
-
-// const onOrderFieldChange = (value, params, search) => {
-//     const orderBy = Object.assign({}, orderByParam.value, { field: value.field });
-//     params.orderBy = JSON.stringify(orderBy);
-//     search();
-// };
-
-// const onOrderChange = (value, params, search) => {
-//     const orderBy = Object.assign({}, orderByParam.value, { way: value.way });
-//     params.orderBy = JSON.stringify(orderBy);
-//     search();
-// };
-
 const getCategoryClass = (category, params) => {
     if (category.id === params?.categoryFk) {
         return 'active';
     }
 };
+
+const getSelectedTagValues = async (tag) => {
+    try {
+        console.log('tag:: ', tag);
+        const filter = {
+            fields: ['value'],
+            order: 'value ASC',
+            limit: 30,
+        };
+
+        const params = { filter: JSON.stringify(filter) };
+        const { data } = await axios.get(`Tags/${tag.selectedTag.id}/filterValue`, {
+            params,
+        });
+        tag.valueOptions = data;
+        console.log('tag.valueOptions:: ', tag.valueOptions);
+    } catch (err) {
+        console.error('Error getting selected tag values');
+    }
+};
 </script>
 
 <template>
@@ -214,6 +132,13 @@ const getCategoryClass = (category, params) => {
         :filter="{ fields: ['id', 'name', 'nickname'], order: 'name ASC', limit: 30 }"
         @on-fetch="(data) => (suppliersOptions = data)"
     />
+    <FetchData
+        url="Tags"
+        :filter="{ fields: ['id', 'name', 'isFree'] }"
+        auto-load
+        limit="30"
+        @on-fetch="(data) => (tagOptions = data)"
+    />
     <VnFilterPanel
         :data-key="props.dataKey"
         :expr-builder="exprBuilder"
@@ -221,47 +146,33 @@ const getCategoryClass = (category, params) => {
         @remove="clearFilter"
     >
         <template #tags="{ tag, formatFn }">
-            <div class="q-gutter-x-xs">
+            <strong v-if="tag.label === 'categoryFk'">
+                {{ t(selectedCategory?.name || '') }}
+            </strong>
+            <strong v-else-if="tag.label === 'typeFk'">
+                {{ t(selectedType?.name || '') }}
+            </strong>
+            <div v-else class="q-gutter-x-xs">
                 <strong>{{ t(`params.${tag.label}`) }}: </strong>
                 <span>{{ formatFn(tag.value) }}</span>
             </div>
         </template>
-        <!-- <template #customTags="{ tags: customTags, params, searchFn }">
-            <template v-for="tag in customTags" :key="tag.label">
-                <template v-if="tag.label === 'tagGroups'">
-                    <VnFilterPanelChip
-                        v-for="chip in tag.value"
-                        :key="chip"
-                        removable
-                        @remove="removeTagChip(chip, params, searchFn)"
-                    >
-                        <strong> {{ JSON.parse(chip).tagSelection?.name }}: </strong>
-                        <span>{{
-                            (JSON.parse(chip).values || [])
-                                .map((item) => item.value)
-                                .join(' | ')
-                        }}</span>
-                    </VnFilterPanelChip>
-                </template>
-            </template>
-        </template> -->
         <template #body="{ params, searchFn }">
             <QItem class="category-filter q-mt-md">
-                <div
+                <QBtn
+                    dense
+                    flat
+                    round
                     v-for="category in categoryList"
                     :key="category.name"
                     :class="['category', getCategoryClass(category, params)]"
+                    :icon="category.icon"
+                    @click="selectCategory(params, category.id, searchFn)"
                 >
-                    <QIcon
-                        :name="category.icon"
-                        class="category-icon"
-                        @click="selectCategory(params, category.id, searchFn)"
-                    >
-                        <QTooltip>
-                            {{ t(category.name) }}
-                        </QTooltip>
-                    </QIcon>
-                </div>
+                    <QTooltip>
+                        {{ t(category.name) }}
+                    </QTooltip>
+                </QBtn>
             </QItem>
             <QItem class="q-my-md">
                 <QItemSection>
@@ -300,7 +211,7 @@ const getCategoryClass = (category, params) => {
             <QItem class="q-my-md">
                 <QItemSection>
                     <VnSelectFilter
-                        :label="t('params.buyer')"
+                        :label="t('params.salesPersonFk')"
                         v-model="params.salesPersonFk"
                         :options="itemTypeWorkersOptions"
                         option-value="id"
@@ -346,6 +257,7 @@ const getCategoryClass = (category, params) => {
                         :label="t('params.from')"
                         v-model="params.from"
                         is-outlined
+                        @update:model-value="searchFn()"
                     />
                 </QItemSection>
             </QItem>
@@ -355,6 +267,7 @@ const getCategoryClass = (category, params) => {
                         :label="t('params.to')"
                         v-model="params.to"
                         is-outlined
+                        @update:model-value="searchFn()"
                     />
                 </QItemSection>
             </QItem>
@@ -364,6 +277,7 @@ const getCategoryClass = (category, params) => {
                         :label="t('params.active')"
                         v-model="params.active"
                         toggle-indeterminate
+                        @update:model-value="searchFn()"
                     />
                 </QItemSection>
                 <QItemSection>
@@ -371,6 +285,7 @@ const getCategoryClass = (category, params) => {
                         :label="t('params.visible')"
                         v-model="params.visible"
                         toggle-indeterminate
+                        @update:model-value="searchFn()"
                     />
                 </QItemSection>
             </QItem>
@@ -380,9 +295,69 @@ const getCategoryClass = (category, params) => {
                         :label="t('params.floramondo')"
                         v-model="params.floramondo"
                         toggle-indeterminate
+                        @update:model-value="searchFn()"
                     />
                 </QItemSection>
             </QItem>
+
+            <QItem
+                v-for="(value, index) in tagValues"
+                :key="value"
+                class="q-mt-md filter-value bg-red"
+            >
+                <QItemSection class="col">
+                    <VnSelectFilter
+                        :label="t('params.tag')"
+                        v-model="value.selectedTag"
+                        :options="tagOptions"
+                        option-label="name"
+                        dense
+                        outlined
+                        rounded
+                        :emit-value="false"
+                        use-input
+                        @update:model-value="getSelectedTagValues(value)"
+                    />
+                </QItemSection>
+                <QItemSection class="col">
+                    <VnSelectFilter
+                        v-if="!value?.isFree && value.valueOptions"
+                        :label="t('params.value')"
+                        v-model="value.value"
+                        :options="value.valueOptions || []"
+                        option-value="value"
+                        option-label="value"
+                        dense
+                        outlined
+                        rounded
+                        emit-value
+                        use-input
+                        :disable="!value"
+                        class="filter-input"
+                        @update:model-value="applyTags()"
+                    />
+                    <VnInput
+                        v-else
+                        v-model="value.value"
+                        :label="t('params.value')"
+                        :disable="!value"
+                        is-outlined
+                        class="filter-input"
+                    />
+                </QItemSection>
+                <QIcon
+                    name="delete"
+                    class="filter-icon"
+                    @click="(tagValues || []).splice(index, 1)"
+                />
+            </QItem>
+            <QItem class="q-mt-lg">
+                <QIcon
+                    name="add_circle"
+                    class="filter-icon"
+                    @click="tagValues.push({})"
+                />
+            </QItem>
         </template>
     </VnFilterPanel>
 </template>
@@ -395,25 +370,16 @@ const getCategoryClass = (category, params) => {
     gap: 12px;
 
     .category {
-        flex: 1;
-        flex-shrink: 0;
-        display: flex;
-        justify-content: center;
+        padding: 8px;
+        width: 60px;
+        height: 60px;
+        font-size: 1.4rem;
+        background-color: var(--vn-light-gray);
 
         &.active {
-            .category-icon {
-                background-color: $primary;
-            }
+            background-color: $primary;
         }
     }
-
-    .category-icon {
-        border-radius: 50%;
-        background-color: var(--vn-light-gray);
-        font-size: 2.6rem;
-        padding: 8px;
-        cursor: pointer;
-    }
 }
 
 .filter-icon {
@@ -437,11 +403,6 @@ const getCategoryClass = (category, params) => {
 <i18n>
 en:
     params:
-        orderBy: Order By
-        tag: Tag
-        value: Value
-        order: Order
-
         supplier: Supplier
         from: From
         to: To
@@ -451,13 +412,10 @@ en:
         salesPersonFk: Buyer
         categoryFk: Category
         typeFk: Type
+        tag: Tag
+        value: Value
 es:
     params:
-        orderBy: Ordenar por
-        tag: Etiqueta
-        value: Valor
-        order: Orden
-
         supplier: Proveedor
         from: Desde
         to: Hasta
@@ -467,6 +425,8 @@ es:
         salesPersonFk: Comprador
         categoryFk: Categoría
         typeFk: Tipo
+        tag: Etiqueta
+        value: Valor
 
     Plant: Planta
     Flower: Flor

From 6eee05249d3e9c7cd168d085ea0393fa122a8885 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Mon, 4 Mar 2024 22:08:44 -0300
Subject: [PATCH 5/9] Entry latest buys side filter panel

---
 src/pages/Entry/EntryLatestBuys.vue       |  9 +---
 src/pages/Entry/EntryLatestBuysFilter.vue | 61 ++++++++++++++++++-----
 2 files changed, 50 insertions(+), 20 deletions(-)

diff --git a/src/pages/Entry/EntryLatestBuys.vue b/src/pages/Entry/EntryLatestBuys.vue
index 65747d2e2..8672f9445 100644
--- a/src/pages/Entry/EntryLatestBuys.vue
+++ b/src/pages/Entry/EntryLatestBuys.vue
@@ -587,13 +587,8 @@ const redirectToEntryBuys = (entryFk) => {
 
 const applyColumnFilter = async (col) => {
     try {
-        if (!col.columnFilter.filterValue) {
-            delete params[col.field];
-        } else {
-            params[col.field] = col.columnFilter.filterValue;
-        }
-
-        await arrayData.applyFilter({ params });
+        params[col.field] = col.columnFilter.filterValue;
+        await arrayData.addFilter({ params });
     } catch (err) {
         console.error('Error applying column filter', err);
     }
diff --git a/src/pages/Entry/EntryLatestBuysFilter.vue b/src/pages/Entry/EntryLatestBuysFilter.vue
index 55f75d0c5..23361ffb3 100644
--- a/src/pages/Entry/EntryLatestBuysFilter.vue
+++ b/src/pages/Entry/EntryLatestBuysFilter.vue
@@ -7,6 +7,7 @@ import FetchData from 'components/FetchData.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
 
 import axios from 'axios';
 
@@ -50,8 +51,8 @@ const selectedType = computed(() => {
 
 const selectCategory = async (params, categoryId, search) => {
     if (params.categoryFk === categoryId) {
-        resetCategory();
-        params.categoryFk = null;
+        resetCategory(params);
+        search();
         return;
     }
     selectedCategoryFk.value = categoryId;
@@ -60,12 +61,25 @@ const selectCategory = async (params, categoryId, search) => {
     search();
 };
 
-const resetCategory = () => {
+const resetCategory = (params) => {
     selectedCategoryFk.value = null;
     itemTypesOptions.value = null;
+    if (params) {
+        params.categoryFk = null;
+        params.typeFk = null;
+    }
 };
 
-const applyTags = () => {};
+const applyTags = (params, search) => {
+    params.tags = tagValues.value
+        .filter((tag) => tag.selectedTag && tag.value)
+        .map((tag) => ({
+            tagFk: tag.selectedTag.id,
+            tagName: tag.selectedTag.name,
+            value: tag.value,
+        }));
+    search();
+};
 
 const fetchItemTypes = async (id) => {
     try {
@@ -92,7 +106,7 @@ const getCategoryClass = (category, params) => {
 
 const getSelectedTagValues = async (tag) => {
     try {
-        console.log('tag:: ', tag);
+        tag.value = null;
         const filter = {
             fields: ['value'],
             order: 'value ASC',
@@ -104,11 +118,15 @@ const getSelectedTagValues = async (tag) => {
             params,
         });
         tag.valueOptions = data;
-        console.log('tag.valueOptions:: ', tag.valueOptions);
     } catch (err) {
         console.error('Error getting selected tag values');
     }
 };
+
+const removeTag = (index, params, search) => {
+    (tagValues.value || []).splice(index, 1);
+    applyTags(params, search);
+};
 </script>
 
 <template>
@@ -142,6 +160,7 @@ const getSelectedTagValues = async (tag) => {
     <VnFilterPanel
         :data-key="props.dataKey"
         :expr-builder="exprBuilder"
+        :custom-tags="['tags']"
         @init="onFilterInit"
         @remove="clearFilter"
     >
@@ -157,6 +176,21 @@ const getSelectedTagValues = async (tag) => {
                 <span>{{ formatFn(tag.value) }}</span>
             </div>
         </template>
+        <template #customTags="{ tags: customTags, params }">
+            <template v-for="tag in customTags" :key="tag.label">
+                <VnFilterPanelChip
+                    v-for="chip in tag.value"
+                    :key="chip"
+                    removable
+                    @remove="removeTagChip(chip, params, searchFn)"
+                >
+                    <div class="q-gutter-x-xs">
+                        <strong>{{ chip.tagName }}: </strong>
+                        <span>"{{ chip.value }}"</span>
+                    </div>
+                </VnFilterPanelChip>
+            </template>
+        </template>
         <template #body="{ params, searchFn }">
             <QItem class="category-filter q-mt-md">
                 <QBtn
@@ -303,7 +337,7 @@ const getSelectedTagValues = async (tag) => {
             <QItem
                 v-for="(value, index) in tagValues"
                 :key="value"
-                class="q-mt-md filter-value bg-red"
+                class="q-mt-md filter-value"
             >
                 <QItemSection class="col">
                     <VnSelectFilter
@@ -316,12 +350,13 @@ const getSelectedTagValues = async (tag) => {
                         rounded
                         :emit-value="false"
                         use-input
+                        :is-clearable="false"
                         @update:model-value="getSelectedTagValues(value)"
                     />
                 </QItemSection>
                 <QItemSection class="col">
                     <VnSelectFilter
-                        v-if="!value?.isFree && value.valueOptions"
+                        v-if="!value?.selectedTag?.isFree && value.valueOptions"
                         :label="t('params.value')"
                         v-model="value.value"
                         :options="value.valueOptions || []"
@@ -333,8 +368,9 @@ const getSelectedTagValues = async (tag) => {
                         emit-value
                         use-input
                         :disable="!value"
+                        :is-clearable="false"
                         class="filter-input"
-                        @update:model-value="applyTags()"
+                        @update:model-value="applyTags(params, searchFn)"
                     />
                     <VnInput
                         v-else
@@ -343,12 +379,14 @@ const getSelectedTagValues = async (tag) => {
                         :disable="!value"
                         is-outlined
                         class="filter-input"
+                        :is-clearable="false"
+                        @keyup.enter="applyTags(params, searchFn)"
                     />
                 </QItemSection>
                 <QIcon
                     name="delete"
                     class="filter-icon"
-                    @click="(tagValues || []).splice(index, 1)"
+                    @click="removeTag(index, params, searchFn)"
                 />
             </QItem>
             <QItem class="q-mt-lg">
@@ -427,13 +465,10 @@ es:
         typeFk: Tipo
         tag: Etiqueta
         value: Valor
-
     Plant: Planta
     Flower: Flor
     Handmade: Confección
     Green: Verde
     Accessories: Complemento
     Fruit: Fruta
-
-
 </i18n>

From b010f8ec3ef6de9169fdca22e9cb79c347f19ed2 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 5 Mar 2024 09:17:09 -0300
Subject: [PATCH 6/9] Add links to invoice out summary table

---
 .../InvoiceOut/Card/InvoiceOutSummary.vue     | 35 +++++++++++++------
 1 file changed, 25 insertions(+), 10 deletions(-)

diff --git a/src/pages/InvoiceOut/Card/InvoiceOutSummary.vue b/src/pages/InvoiceOut/Card/InvoiceOutSummary.vue
index 5a56a3957..d74969319 100644
--- a/src/pages/InvoiceOut/Card/InvoiceOutSummary.vue
+++ b/src/pages/InvoiceOut/Card/InvoiceOutSummary.vue
@@ -7,6 +7,8 @@ import { toCurrency, toDate } from 'src/filters';
 import CardSummary from 'components/ui/CardSummary.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import { getUrl } from 'src/composables/getUrl';
+import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
+import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
 
 onMounted(async () => {
     fetch();
@@ -67,29 +69,33 @@ const taxColumns = ref([
 const ticketsColumns = ref([
     {
         name: 'item',
-        label: 'invoiceOut.summary.ticketId',
+        label: t('invoiceOut.summary.ticketId'),
         field: (row) => row.id,
         sortable: true,
+        align: 'left',
     },
     {
         name: 'quantity',
-        label: 'invoiceOut.summary.nickname',
+        label: t('invoiceOut.summary.nickname'),
         field: (row) => row.nickname,
         sortable: true,
+        align: 'left',
     },
     {
         name: 'landed',
-        label: 'invoiceOut.summary.shipped',
+        label: t('invoiceOut.summary.shipped'),
         field: (row) => row.shipped,
         format: (value) => toDate(value),
         sortable: true,
+        align: 'left',
     },
     {
         name: 'landed',
-        label: 'invoiceOut.summary.totalWithVat',
+        label: t('invoiceOut.summary.totalWithVat'),
         field: (row) => row.totalWithVat,
         format: (value) => toCurrency(value),
         sortable: true,
+        align: 'left',
     },
 ]);
 </script>
@@ -144,12 +150,21 @@ const ticketsColumns = ref([
                     {{ t('invoiceOut.summary.tickets') }}
                 </div>
                 <QTable v-if="tickets" :columns="ticketsColumns" :rows="tickets" flat>
-                    <template #header="props">
-                        <QTr :props="props">
-                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
-                                {{ t(col.label) }}
-                            </QTh>
-                        </QTr>
+                    <template #body-cell-item="{ value }">
+                        <QTd>
+                            <QBtn flat color="primary">
+                                {{ value }}
+                                <TicketDescriptorProxy :id="value" />
+                            </QBtn>
+                        </QTd>
+                    </template>
+                    <template #body-cell-quantity="{ value, row }">
+                        <QTd>
+                            <QBtn flat color="primary" dense>
+                                {{ value }}
+                                <CustomerDescriptorProxy :id="row.id" />
+                            </QBtn>
+                        </QTd>
                     </template>
                 </QTable>
             </QCard>

From 6969daf90fbc9905417f492b49a997b991b9f555 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 5 Mar 2024 09:18:10 -0300
Subject: [PATCH 7/9] Revert "Add links to invoice out summary table"

This reverts commit b010f8ec3ef6de9169fdca22e9cb79c347f19ed2.
---
 .../InvoiceOut/Card/InvoiceOutSummary.vue     | 35 ++++++-------------
 1 file changed, 10 insertions(+), 25 deletions(-)

diff --git a/src/pages/InvoiceOut/Card/InvoiceOutSummary.vue b/src/pages/InvoiceOut/Card/InvoiceOutSummary.vue
index d74969319..5a56a3957 100644
--- a/src/pages/InvoiceOut/Card/InvoiceOutSummary.vue
+++ b/src/pages/InvoiceOut/Card/InvoiceOutSummary.vue
@@ -7,8 +7,6 @@ import { toCurrency, toDate } from 'src/filters';
 import CardSummary from 'components/ui/CardSummary.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import { getUrl } from 'src/composables/getUrl';
-import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
-import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
 
 onMounted(async () => {
     fetch();
@@ -69,33 +67,29 @@ const taxColumns = ref([
 const ticketsColumns = ref([
     {
         name: 'item',
-        label: t('invoiceOut.summary.ticketId'),
+        label: 'invoiceOut.summary.ticketId',
         field: (row) => row.id,
         sortable: true,
-        align: 'left',
     },
     {
         name: 'quantity',
-        label: t('invoiceOut.summary.nickname'),
+        label: 'invoiceOut.summary.nickname',
         field: (row) => row.nickname,
         sortable: true,
-        align: 'left',
     },
     {
         name: 'landed',
-        label: t('invoiceOut.summary.shipped'),
+        label: 'invoiceOut.summary.shipped',
         field: (row) => row.shipped,
         format: (value) => toDate(value),
         sortable: true,
-        align: 'left',
     },
     {
         name: 'landed',
-        label: t('invoiceOut.summary.totalWithVat'),
+        label: 'invoiceOut.summary.totalWithVat',
         field: (row) => row.totalWithVat,
         format: (value) => toCurrency(value),
         sortable: true,
-        align: 'left',
     },
 ]);
 </script>
@@ -150,21 +144,12 @@ const ticketsColumns = ref([
                     {{ t('invoiceOut.summary.tickets') }}
                 </div>
                 <QTable v-if="tickets" :columns="ticketsColumns" :rows="tickets" flat>
-                    <template #body-cell-item="{ value }">
-                        <QTd>
-                            <QBtn flat color="primary">
-                                {{ value }}
-                                <TicketDescriptorProxy :id="value" />
-                            </QBtn>
-                        </QTd>
-                    </template>
-                    <template #body-cell-quantity="{ value, row }">
-                        <QTd>
-                            <QBtn flat color="primary" dense>
-                                {{ value }}
-                                <CustomerDescriptorProxy :id="row.id" />
-                            </QBtn>
-                        </QTd>
+                    <template #header="props">
+                        <QTr :props="props">
+                            <QTh v-for="col in props.cols" :key="col.name" :props="props">
+                                {{ t(col.label) }}
+                            </QTh>
+                        </QTr>
                     </template>
                 </QTable>
             </QCard>

From 44d7f98cdcc9b15eb530776f99d8e78556feb800 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 6 Mar 2024 18:22:15 -0300
Subject: [PATCH 8/9] Add item descriptor

---
 src/pages/Entry/EntryLatestBuys.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/pages/Entry/EntryLatestBuys.vue b/src/pages/Entry/EntryLatestBuys.vue
index 3c7b72823..217a25870 100644
--- a/src/pages/Entry/EntryLatestBuys.vue
+++ b/src/pages/Entry/EntryLatestBuys.vue
@@ -11,6 +11,7 @@ import EditTableCellValueForm from 'src/components/EditTableCellValueForm.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 import EntryLatestBuysFilter from './EntryLatestBuysFilter.vue';
+import ItemDescriptorProxy from '../Item/Card/ItemDescriptorProxy.vue';
 
 import { useStateStore } from 'stores/useStateStore';
 import { toDate, toCurrency } from 'src/filters';
@@ -701,6 +702,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                     <QBtn flat color="primary">
                         {{ row.itemFk }}
                     </QBtn>
+                    <ItemDescriptorProxy :id="row.itemFk" />
                 </QTd>
             </template>
             <template #body-cell-tags="{ row }">

From 2449488927837d247432614b79bd948b1e358732 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 6 Mar 2024 19:00:50 -0300
Subject: [PATCH 9/9] Changes

---
 src/components/EditTableCellValueForm.vue | 45 ++++++++++++-----------
 1 file changed, 23 insertions(+), 22 deletions(-)

diff --git a/src/components/EditTableCellValueForm.vue b/src/components/EditTableCellValueForm.vue
index 6d3b7b08b..9e48889a0 100644
--- a/src/components/EditTableCellValueForm.vue
+++ b/src/components/EditTableCellValueForm.vue
@@ -71,13 +71,9 @@ const closeForm = () => {
             <span ref="closeButton" class="close-icon" v-close-popup>
                 <QIcon name="close" size="sm" />
             </span>
-            <h1 class="title">
-                {{
-                    t('editBuyTitle', {
-                        buysAmount: rows.length,
-                    })
-                }}
-            </h1>
+            <span class="title">{{ t('Edit') }}</span>
+            <span class="countLines">{{ ` ${rows.length} ` }}</span>
+            <span class="title">{{ t('buy(s)') }}</span>
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
                     <VnSelectFilter
@@ -94,23 +90,23 @@ const closeForm = () => {
                 </div>
             </VnRow>
             <div class="q-mt-lg row justify-end">
-                <QBtn
-                    :label="t('globals.save')"
-                    type="submit"
-                    color="primary"
-                    :disabled="isLoading"
-                    :loading="isLoading"
-                />
                 <QBtn
                     :label="t('globals.cancel')"
                     type="reset"
                     color="primary"
                     flat
-                    class="q-ml-sm"
                     :disabled="isLoading"
                     :loading="isLoading"
                     v-close-popup
                 />
+                <QBtn
+                    :label="t('globals.save')"
+                    type="submit"
+                    color="primary"
+                    class="q-ml-sm"
+                    :disabled="isLoading"
+                    :loading="isLoading"
+                />
             </div>
         </QCard>
     </QForm>
@@ -129,13 +125,18 @@ const closeForm = () => {
     right: 20px;
     cursor: pointer;
 }
+
+.countLines {
+    font-size: 24px;
+    color: $primary;
+    font-weight: bold;
+}
 </style>
 
 <i18n>
-    en:
-        editBuyTitle: Edit {buysAmount} buy(s)
-    es:
-        editBuyTitle: Editar {buysAmount} compra(s)
-        Field to edit: Campo a editar
-        Value: Valor
-    </i18n>
+es:
+    Edit: Editar
+    buy(s): compra(s)
+    Field to edit: Campo a editar
+    Value: Valor
+</i18n>