From 161922da0934ad2a9e57fb5143a374a8e408453d Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Fri, 26 Apr 2024 15:17:03 +0200
Subject: [PATCH 001/167] feat: refs #6825 create vnTable and add in
 CustomerExtendedList

---
 src/components/common/VnTable.vue             | 243 ++++++++
 .../ExtendedList/CustomerExtendedList.vue     | 121 ++--
 .../CustomerExtendedListBackup.vue            | 571 ++++++++++++++++++
 3 files changed, 877 insertions(+), 58 deletions(-)
 create mode 100644 src/components/common/VnTable.vue
 create mode 100644 src/pages/Customer/ExtendedList/CustomerExtendedListBackup.vue

diff --git a/src/components/common/VnTable.vue b/src/components/common/VnTable.vue
new file mode 100644
index 000000000..a537c5215
--- /dev/null
+++ b/src/components/common/VnTable.vue
@@ -0,0 +1,243 @@
+<script setup>
+import { ref, onMounted, markRaw } from 'vue';
+import VnPaginate from 'components/ui/VnPaginate.vue';
+import VnBreadcrumbs from 'components/common/VnBreadcrumbs.vue';
+import { useI18n } from 'vue-i18n';
+
+/* basic input */
+import VnSelect from 'src/components/common/VnSelect.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+import { QCheckbox } from 'quasar';
+// import VnLv from 'src/components/ui/VnLv.vue';
+
+const $props = defineProps({
+    columns: {
+        type: Array,
+        required: true,
+    },
+    columnsTable: {
+        type: Array,
+        default: () => [],
+    },
+    defaultMode: {
+        type: String, // 'table', 'list', 'card 2/3'
+        default: 'list',
+    },
+    reponsive: {
+        type: Boolean,
+        default: true,
+    },
+    columnSearch: {
+        type: Boolean,
+        default: true,
+    },
+    rightSearch: {
+        type: Boolean,
+        default: true,
+    },
+});
+const { t } = useI18n();
+const mode = ref('list');
+const selected = ref([]);
+const tableModes = [
+    {
+        icon: 'view_column',
+        title: t('table view'),
+        class: 'q-mr-lg',
+        value: 'table',
+    },
+    {
+        icon: 'lists',
+        title: t('list view'),
+        value: 'list',
+    },
+    {
+        icon: 'apps',
+        title: t('grid view'),
+        value: 'card',
+    },
+];
+const basicInputs = {
+    input: markRaw(VnInput),
+    number: markRaw(VnInput),
+    date: markRaw(VnInputDate),
+    checkbox: markRaw(QCheckbox),
+    select: markRaw(VnSelect),
+};
+//     {
+//         isId: Boolean
+//         align: 'left',
+//         field: 'hasFile',
+//         label: t('globals.original'),
+//         name: 'hasFile',
+//         component: QCheckbox ?? span,
+//         cardVisible: Boolean
+//         props: (prop) => ({
+//             disable: true,
+//             'model-value': Boolean(prop.value),
+//         }),
+//     },
+onMounted(() => {
+    mode.value = $props.defaultMode;
+});
+</script>
+<template>
+    <VnPaginate v-bind="$attrs" class="q-px-md">
+        <template #body="{ rows }">
+            <QTable
+                class="vnTable"
+                :columns="columns"
+                :rows="rows"
+                row-key="$index"
+                selection="multiple"
+                v-model:selected="selected"
+                :grid="($q.screen.lt.md && reponsive) || mode != 'table'"
+                table-header-class="bg-grey-8"
+                flat
+                :virtual-scroll-item-size="48"
+                :pagination="pagination"
+                :rows-per-page-options="[0]"
+                style="height: 85vh"
+                :card-container-class="mode == 'list' ? 'grid-one' : 'grid-three'"
+            >
+                <template #top-left>
+                    <VnBreadcrumbs />
+                </template>
+                <template #top-right>
+                    <QBtn icon="visibility" title="asd" class="bg-dark q-mr-lg" dense />
+                    <QBtnToggle
+                        v-model="mode"
+                        toggle-color="primary"
+                        class="bg-dark"
+                        dense
+                        :options="tableModes"
+                    />
+                    <QBtn icon="filter_alt" title="asd" class="bg-dark q-ml-lg" dense />
+                </template>
+                <!-- VnTableColumn¿?-->
+                <template #header-cell="{ col }">
+                    <QTh auto-width :class="`text-${col.align ?? 'left'}`">
+                        <span>{{ col.label }}</span>
+                        <QInput
+                            v-if="columnSearch"
+                            dense
+                            outlined
+                            :type="col.component == 'number' ? 'number' : 'text'"
+                        />
+                    </QTh>
+                </template>
+                <template #body-cell="{ props, row, col }">
+                    <QTd auto-width :class="`text-${col.align ?? 'left'}`">
+                        <!-- {{ row[col.field] }} -->
+                        <component
+                            v-if="col.component"
+                            class="col-content"
+                            :is="basicInputs[col.component] ?? col.component"
+                            v-bind="col.props && col.props(props)"
+                            @click="col.event && col.event(props)"
+                        />
+                        <span v-else> {{ row[col.field] }}</span>
+                    </QTd>
+                </template>
+                <template #item="{ row, cols }">
+                    <QCard bordered flat>
+                        <QCardSection horizontal>
+                            <QChip color="primary">1234123</QChip>
+                        </QCardSection>
+                        <QCardSection class="q-pa-md">
+                            <div
+                                v-for="(prop, index) of Object.entries(row)"
+                                :key="index"
+                            >
+                                <div
+                                    v-if="cols[index]?.cardVisible && !cols[index]?.isId"
+                                >
+                                    <component
+                                        v-if="cols[index]?.component"
+                                        class="cols[index]-content"
+                                        :is="
+                                            basicInputs[cols[index]?.component] ??
+                                            cols[index]?.component
+                                        "
+                                        v-bind="
+                                            cols[index]?.props && cols[index]?.props(row)
+                                        "
+                                        @click="
+                                            cols[index]?.event && cols[index]?.event(row)
+                                        "
+                                    />
+                                    <span v-else> {{ prop[0] }} : {{ prop[1] }}</span>
+                                </div>
+                            </div>
+                        </QCardSection>
+                    </QCard>
+                </template>
+            </QTable>
+        </template>
+    </VnPaginate>
+</template>
+<style lang="scss">
+.q-checkbox {
+    & .q-checkbox__label {
+        color: #f5b351; /* use global*/
+    }
+    & .q-checkbox__inner {
+        color: #f5b351; /* use global*/
+    }
+}
+.q-table--dark .q-table__bottom,
+.q-table--dark thead,
+.q-table--dark tr,
+.q-table--dark th,
+.q-table--dark td {
+    border-color: #222222; /* use global*/
+}
+
+.q-table__container > div:first-child {
+    background-color: #222222;
+}
+
+/* Works on Firefox */
+* {
+    scrollbar-width: thin;
+    scrollbar-color: #f5b351 transparent;
+}
+
+/* Works on Chrome, Edge, and Safari */
+*::-webkit-scrollbar {
+    width: 12px;
+}
+
+*::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+    background-color: transparent;
+    border-radius: 20px;
+    border: 3px solid #f5b351;
+}
+
+.grid-one {
+    display: grid;
+    grid-template-columns: repeat(1, 1fr);
+    grid-gap: 10px;
+}
+
+.grid-three {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 10px;
+}
+
+/*.vnTable {
+    thead tr th {
+        position: sticky;
+        z-index: 1;
+    }
+    thead tr:first-child th {
+        top: 0;
+    }
+}*/
+</style>
diff --git a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
index a24d3211a..789e90834 100644
--- a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
+++ b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
@@ -2,6 +2,8 @@
 import { ref, computed, onBeforeMount, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnTable from 'components/common/VnTable.vue';
 
 import { QBtn, QIcon } from 'quasar';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
@@ -266,28 +268,30 @@ const tableColumnComponents = {
 const columns = computed(() => [
     {
         align: 'left',
-        field: '',
-        label: '',
+        field: 'customerStatus',
+        label: 'customerStatus',
         name: 'customerStatus',
-        format: () => ' ',
     },
     {
         align: 'left',
         field: 'id',
         label: t('customer.extendedList.tableVisibleColumns.id'),
         name: 'id',
+        isId: true,
     },
     {
         align: 'left',
         field: 'name',
         label: t('customer.extendedList.tableVisibleColumns.name'),
         name: 'name',
+        cardVisible: true,
     },
     {
         align: 'left',
         field: 'fi',
         label: t('customer.extendedList.tableVisibleColumns.fi'),
         name: 'fi',
+        cardVisible: true,
     },
     {
         align: 'left',
@@ -494,7 +498,7 @@ const selectSalesPersonId = (id) => (selectedSalesPersonId.value = id);
             />
         </QScrollArea>
     </QDrawer>
-    <VnSubToolbar>
+    <!-- <VnSubToolbar>
         <template #st-actions>
             <TableVisibleColumns
                 :all-columns="allColumnNames"
@@ -505,62 +509,63 @@ const selectSalesPersonId = (id) => (selectedSalesPersonId.value = id);
                 "
             />
         </template>
-    </VnSubToolbar>
+    </VnSubToolbar> -->
 
-    <QPage class="column items-center q-pa-md">
-        <QTable
-            :columns="columns"
-            :rows="rows"
-            class="full-width q-mt-md"
-            row-key="id"
-            :visible-columns="visibleColumns"
-            @row-click="(evt, row, id) => navigateToTravelId(row.id)"
-        >
+    <VnTable
+        data-key="CustomerExtendedList"
+        :columns="columns"
+        :rows="rows"
+        class="full-width q-mt-md"
+        row-key="id"
+        :visible-columns="visibleColumns"
+        @row-click="(evt, row, id) => navigateToTravelId(row.id)"
+    >
+        <!--
+            default-mode="table"
             <template #body-cell="{ col, value }">
-                <QTd @click="stopEventPropagation($event, col)">
-                    {{ value }}
-                </QTd>
-            </template>
-            <template #body-cell-id="props">
-                <QTd @click="stopEventPropagation($event, props.col)">
-                    <component
-                        :is="tableColumnComponents[props.col.name].component"
-                        class="col-content"
-                        v-bind="tableColumnComponents[props.col.name].props(props)"
-                        @click="tableColumnComponents[props.col.name].event(props)"
-                    >
-                        <CustomerDescriptorProxy :id="props.row.id" />
-                        {{ props.row.id }}
-                    </component>
-                </QTd>
-            </template>
-            <template #body-cell-salesPersonFk="props">
-                <QTd @click="stopEventPropagation($event, props.col)">
-                    <component
-                        v-if="props.row.salesPerson"
-                        class="col-content"
-                        :is="tableColumnComponents[props.col.name].component"
-                        v-bind="tableColumnComponents[props.col.name].props(props)"
-                        @click="tableColumnComponents[props.col.name].event(props)"
-                    >
-                        <WorkerDescriptorProxy :id="props.row.salesPersonFk" />
-                        {{ props.row.salesPerson }}
-                    </component>
-                    <span class="col-content" v-else>-</span>
-                </QTd>
-            </template>
-            <template #body-cell-actions="props">
-                <QTd @click="stopEventPropagation($event, props.col)">
-                    <component
-                        :is="tableColumnComponents[props.col.name].component"
-                        class="col-content"
-                        v-bind="tableColumnComponents[props.col.name].props(props)"
-                        @click="tableColumnComponents[props.col.name].event(props)"
-                    />
-                </QTd>
-            </template>
-        </QTable>
-    </QPage>
+            <QTd @click="stopEventPropagation($event, col)">
+                {{ value }}
+            </QTd>
+        </template>
+        <template #body-cell-id="props">
+            <QTd @click="stopEventPropagation($event, props.col)">
+                <component
+                    :is="tableColumnComponents[props.col.name].component"
+                    class="col-content"
+                    v-bind="tableColumnComponents[props.col.name].props(props)"
+                    @click="tableColumnComponents[props.col.name].event(props)"
+                >
+                    <CustomerDescriptorProxy :id="props.row.id" />
+                    {{ props.row.id }}
+                </component>
+            </QTd>
+        </template>
+        <template #body-cell-salesPersonFk="props">
+            <QTd @click="stopEventPropagation($event, props.col)">
+                <component
+                    v-if="props.row.salesPerson"
+                    class="col-content"
+                    :is="tableColumnComponents[props.col.name].component"
+                    v-bind="tableColumnComponents[props.col.name].props(props)"
+                    @click="tableColumnComponents[props.col.name].event(props)"
+                >
+                    <WorkerDescriptorProxy :id="props.row.salesPersonFk" />
+                    {{ props.row.salesPerson }}
+                </component>
+                <span class="col-content" v-else>-</span>
+            </QTd>
+        </template>
+        <template #body-cell-actions="props">
+            <QTd @click="stopEventPropagation($event, props.col)">
+                <component
+                    :is="tableColumnComponents[props.col.name].component"
+                    class="col-content"
+                    v-bind="tableColumnComponents[props.col.name].props(props)"
+                    @click="tableColumnComponents[props.col.name].event(props)"
+                />
+            </QTd>
+        </template> -->
+    </VnTable>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/pages/Customer/ExtendedList/CustomerExtendedListBackup.vue b/src/pages/Customer/ExtendedList/CustomerExtendedListBackup.vue
new file mode 100644
index 000000000..a24d3211a
--- /dev/null
+++ b/src/pages/Customer/ExtendedList/CustomerExtendedListBackup.vue
@@ -0,0 +1,571 @@
+<script setup>
+import { ref, computed, onBeforeMount, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+
+import { QBtn, QIcon } from 'quasar';
+import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
+import CustomerExtendedListActions from './CustomerExtendedListActions.vue';
+import CustomerExtendedListFilter from './CustomerExtendedListFilter.vue';
+import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+
+import { useArrayData } from 'composables/useArrayData';
+import { useStateStore } from 'stores/useStateStore';
+import { toDate } from 'src/filters';
+
+const { t } = useI18n();
+const router = useRouter();
+const stateStore = useStateStore();
+
+const arrayData = ref(null);
+
+onBeforeMount(async () => {
+    arrayData.value = useArrayData('CustomerExtendedList', {
+        url: 'Clients/extendedListFilter',
+        limit: 0,
+    });
+    await arrayData.value.fetch({ append: false });
+    stateStore.rightDrawer = true;
+});
+
+onMounted(() => {
+    const filteredColumns = columns.value.filter(
+        (col) => col.name !== 'actions' && col.name !== 'customerStatus'
+    );
+    allColumnNames.value = filteredColumns.map((col) => col.name);
+});
+
+const rows = computed(() => arrayData.value.store.data);
+
+const selectedCustomerId = ref(0);
+const selectedSalesPersonId = ref(0);
+const allColumnNames = ref([]);
+const visibleColumns = ref([]);
+
+const tableColumnComponents = {
+    customerStatus: {
+        component: QIcon,
+        props: (prop) => ({
+            name: !prop.row.isActive
+                ? 'vn:disabled'
+                : prop.row.isActive && prop.row.isFreezed
+                ? 'vn:frozen'
+                : '',
+            color: 'primary',
+            size: 'sm',
+        }),
+        event: () => {},
+    },
+    id: {
+        component: QBtn,
+        props: () => ({ flat: true, color: 'blue' }),
+        event: (prop) => {
+            selectCustomerId(prop.row.id);
+        },
+    },
+    name: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    fi: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    salesPersonFk: {
+        component: QBtn,
+        props: () => ({ flat: true, color: 'blue' }),
+        event: (prop) => selectSalesPersonId(prop.row.salesPersonFk),
+    },
+    credit: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    creditInsurance: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    phone: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    mobile: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    street: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    countryFk: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    provinceFk: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    city: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    postcode: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    email: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    created: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    businessTypeFk: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    payMethodFk: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    sageTaxTypeFk: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    sageTransactionTypeFk: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    isActive: {
+        component: QIcon,
+        props: (prop) => ({
+            name: prop.row.isActive ? 'check' : 'close',
+            color: prop.row.isActive ? 'positive' : 'negative',
+            size: 'sm',
+        }),
+        event: () => {},
+    },
+    isVies: {
+        component: QIcon,
+        props: (prop) => ({
+            name: prop.row.isVies ? 'check' : 'close',
+            color: prop.row.isVies ? 'positive' : 'negative',
+            size: 'sm',
+        }),
+        event: () => {},
+    },
+    isTaxDataChecked: {
+        component: QIcon,
+        props: (prop) => ({
+            name: prop.row.isTaxDataChecked ? 'check' : 'close',
+            color: prop.row.isTaxDataChecked ? 'positive' : 'negative',
+            size: 'sm',
+        }),
+        event: () => {},
+    },
+    isEqualizated: {
+        component: QIcon,
+        props: (prop) => ({
+            name: prop.row.isEqualizated ? 'check' : 'close',
+            color: prop.row.isEqualizated ? 'positive' : 'negative',
+            size: 'sm',
+        }),
+        event: () => {},
+    },
+    isFreezed: {
+        component: QIcon,
+        props: (prop) => ({
+            name: prop.row.isFreezed ? 'check' : 'close',
+            color: prop.row.isFreezed ? 'positive' : 'negative',
+            size: 'sm',
+        }),
+        event: () => {},
+    },
+    hasToInvoice: {
+        component: QIcon,
+        props: (prop) => ({
+            name: prop.row.hasToInvoice ? 'check' : 'close',
+            color: prop.row.hasToInvoice ? 'positive' : 'negative',
+            size: 'sm',
+        }),
+        event: () => {},
+    },
+    hasToInvoiceByAddress: {
+        component: QIcon,
+        props: (prop) => ({
+            name: prop.row.hasToInvoiceByAddress ? 'check' : 'close',
+            color: prop.row.hasToInvoiceByAddress ? 'positive' : 'negative',
+            size: 'sm',
+        }),
+        event: () => {},
+    },
+    isToBeMailed: {
+        component: QIcon,
+        props: (prop) => ({
+            name: prop.row.isToBeMailed ? 'check' : 'close',
+            color: prop.row.isToBeMailed ? 'positive' : 'negative',
+            size: 'sm',
+        }),
+        event: () => {},
+    },
+    hasLcr: {
+        component: QIcon,
+        props: (prop) => ({
+            name: prop.row.hasLcr ? 'check' : 'close',
+            color: prop.row.hasLcr ? 'positive' : 'negative',
+            size: 'sm',
+        }),
+        event: () => {},
+    },
+    hasCoreVnl: {
+        component: QIcon,
+        props: (prop) => ({
+            name: prop.row.hasCoreVnl ? 'check' : 'close',
+            color: prop.row.hasCoreVnl ? 'positive' : 'negative',
+            size: 'sm',
+        }),
+        event: () => {},
+    },
+    hasSepaVnl: {
+        component: QIcon,
+        props: (prop) => ({
+            name: prop.row.hasSepaVnl ? 'check' : 'close',
+            color: prop.row.hasSepaVnl ? 'positive' : 'negative',
+            size: 'sm',
+        }),
+        event: () => {},
+    },
+    actions: {
+        component: CustomerExtendedListActions,
+        props: (prop) => ({
+            id: prop.row.id,
+        }),
+        event: () => {},
+    },
+};
+
+const columns = computed(() => [
+    {
+        align: 'left',
+        field: '',
+        label: '',
+        name: 'customerStatus',
+        format: () => ' ',
+    },
+    {
+        align: 'left',
+        field: 'id',
+        label: t('customer.extendedList.tableVisibleColumns.id'),
+        name: 'id',
+    },
+    {
+        align: 'left',
+        field: 'name',
+        label: t('customer.extendedList.tableVisibleColumns.name'),
+        name: 'name',
+    },
+    {
+        align: 'left',
+        field: 'fi',
+        label: t('customer.extendedList.tableVisibleColumns.fi'),
+        name: 'fi',
+    },
+    {
+        align: 'left',
+        field: 'salesPerson',
+        label: t('customer.extendedList.tableVisibleColumns.salesPersonFk'),
+        name: 'salesPersonFk',
+    },
+    {
+        align: 'left',
+        field: 'credit',
+        label: t('customer.extendedList.tableVisibleColumns.credit'),
+        name: 'credit',
+    },
+    {
+        align: 'left',
+        field: 'creditInsurance',
+        label: t('customer.extendedList.tableVisibleColumns.creditInsurance'),
+        name: 'creditInsurance',
+    },
+    {
+        align: 'left',
+        field: 'phone',
+        label: t('customer.extendedList.tableVisibleColumns.phone'),
+        name: 'phone',
+    },
+    {
+        align: 'left',
+        field: 'mobile',
+        label: t('customer.extendedList.tableVisibleColumns.mobile'),
+        name: 'mobile',
+    },
+    {
+        align: 'left',
+        field: 'street',
+        label: t('customer.extendedList.tableVisibleColumns.street'),
+        name: 'street',
+    },
+    {
+        align: 'left',
+        field: 'country',
+        label: t('customer.extendedList.tableVisibleColumns.countryFk'),
+        name: 'countryFk',
+    },
+    {
+        align: 'left',
+        field: 'province',
+        label: t('customer.extendedList.tableVisibleColumns.provinceFk'),
+        name: 'provinceFk',
+    },
+    {
+        align: 'left',
+        field: 'city',
+        label: t('customer.extendedList.tableVisibleColumns.city'),
+        name: 'city',
+    },
+    {
+        align: 'left',
+        field: 'postcode',
+        label: t('customer.extendedList.tableVisibleColumns.postcode'),
+        name: 'postcode',
+    },
+    {
+        align: 'left',
+        field: 'email',
+        label: t('customer.extendedList.tableVisibleColumns.email'),
+        name: 'email',
+    },
+    {
+        align: 'left',
+        field: 'created',
+        label: t('customer.extendedList.tableVisibleColumns.created'),
+        name: 'created',
+        format: (value) => toDate(value),
+    },
+    {
+        align: 'left',
+        field: 'businessType',
+        label: t('customer.extendedList.tableVisibleColumns.businessTypeFk'),
+        name: 'businessTypeFk',
+    },
+    {
+        align: 'left',
+        field: 'payMethod',
+        label: t('customer.extendedList.tableVisibleColumns.payMethodFk'),
+        name: 'payMethodFk',
+    },
+    {
+        align: 'left',
+        field: 'sageTaxType',
+        label: t('customer.extendedList.tableVisibleColumns.sageTaxTypeFk'),
+        name: 'sageTaxTypeFk',
+    },
+    {
+        align: 'left',
+        field: 'sageTransactionType',
+        label: t('customer.extendedList.tableVisibleColumns.sageTransactionTypeFk'),
+        name: 'sageTransactionTypeFk',
+    },
+    {
+        align: 'left',
+        field: 'isActive',
+        label: t('customer.extendedList.tableVisibleColumns.isActive'),
+        name: 'isActive',
+        format: () => ' ',
+    },
+    {
+        align: 'left',
+        field: 'isVies',
+        label: t('customer.extendedList.tableVisibleColumns.isVies'),
+        name: 'isVies',
+        format: () => ' ',
+    },
+    {
+        align: 'left',
+        field: 'isTaxDataChecked',
+        label: t('customer.extendedList.tableVisibleColumns.isTaxDataChecked'),
+        name: 'isTaxDataChecked',
+        format: () => ' ',
+    },
+    {
+        align: 'left',
+        field: 'isEqualizated',
+        label: t('customer.extendedList.tableVisibleColumns.isEqualizated'),
+        name: 'isEqualizated',
+        format: () => ' ',
+    },
+    {
+        align: 'left',
+        field: 'isFreezed',
+        label: t('customer.extendedList.tableVisibleColumns.isFreezed'),
+        name: 'isFreezed',
+        format: () => ' ',
+    },
+    {
+        align: 'left',
+        field: 'hasToInvoice',
+        label: t('customer.extendedList.tableVisibleColumns.hasToInvoice'),
+        name: 'hasToInvoice',
+        format: () => ' ',
+    },
+    {
+        align: 'left',
+        field: 'hasToInvoiceByAddress',
+        label: t('customer.extendedList.tableVisibleColumns.hasToInvoiceByAddress'),
+        name: 'hasToInvoiceByAddress',
+        format: () => ' ',
+    },
+    {
+        align: 'left',
+        field: 'isToBeMailed',
+        label: t('customer.extendedList.tableVisibleColumns.isToBeMailed'),
+        name: 'isToBeMailed',
+        format: () => ' ',
+    },
+    {
+        align: 'left',
+        field: 'hasLcr',
+        label: t('customer.extendedList.tableVisibleColumns.hasLcr'),
+        name: 'hasLcr',
+        format: () => ' ',
+    },
+    {
+        align: 'left',
+        field: 'hasCoreVnl',
+        label: t('customer.extendedList.tableVisibleColumns.hasCoreVnl'),
+        name: 'hasCoreVnl',
+        format: () => ' ',
+    },
+    {
+        align: 'left',
+        field: 'hasSepaVnl',
+        label: t('customer.extendedList.tableVisibleColumns.hasSepaVnl'),
+        name: 'hasSepaVnl',
+        format: () => ' ',
+    },
+    {
+        align: 'right',
+        field: 'actions',
+        label: '',
+        name: 'actions',
+    },
+]);
+
+const stopEventPropagation = (event, col) => {
+    if (!['id', 'salesPersonFk'].includes(col.name)) return;
+    event.preventDefault();
+    event.stopPropagation();
+};
+
+const navigateToTravelId = (id) => router.push({ path: `/customer/${id}` });
+
+const selectCustomerId = (id) => (selectedCustomerId.value = id);
+
+const selectSalesPersonId = (id) => (selectedSalesPersonId.value = id);
+</script>
+
+<template>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <CustomerExtendedListFilter
+                v-if="visibleColumns.length !== 0"
+                data-key="CustomerExtendedList"
+                :visible-columns="visibleColumns"
+            />
+        </QScrollArea>
+    </QDrawer>
+    <VnSubToolbar>
+        <template #st-actions>
+            <TableVisibleColumns
+                :all-columns="allColumnNames"
+                table-code="clientsDetail"
+                labels-traductions-path="customer.extendedList.tableVisibleColumns"
+                @on-config-saved="
+                    visibleColumns = ['customerStatus', ...$event, 'actions']
+                "
+            />
+        </template>
+    </VnSubToolbar>
+
+    <QPage class="column items-center q-pa-md">
+        <QTable
+            :columns="columns"
+            :rows="rows"
+            class="full-width q-mt-md"
+            row-key="id"
+            :visible-columns="visibleColumns"
+            @row-click="(evt, row, id) => navigateToTravelId(row.id)"
+        >
+            <template #body-cell="{ col, value }">
+                <QTd @click="stopEventPropagation($event, col)">
+                    {{ value }}
+                </QTd>
+            </template>
+            <template #body-cell-id="props">
+                <QTd @click="stopEventPropagation($event, props.col)">
+                    <component
+                        :is="tableColumnComponents[props.col.name].component"
+                        class="col-content"
+                        v-bind="tableColumnComponents[props.col.name].props(props)"
+                        @click="tableColumnComponents[props.col.name].event(props)"
+                    >
+                        <CustomerDescriptorProxy :id="props.row.id" />
+                        {{ props.row.id }}
+                    </component>
+                </QTd>
+            </template>
+            <template #body-cell-salesPersonFk="props">
+                <QTd @click="stopEventPropagation($event, props.col)">
+                    <component
+                        v-if="props.row.salesPerson"
+                        class="col-content"
+                        :is="tableColumnComponents[props.col.name].component"
+                        v-bind="tableColumnComponents[props.col.name].props(props)"
+                        @click="tableColumnComponents[props.col.name].event(props)"
+                    >
+                        <WorkerDescriptorProxy :id="props.row.salesPersonFk" />
+                        {{ props.row.salesPerson }}
+                    </component>
+                    <span class="col-content" v-else>-</span>
+                </QTd>
+            </template>
+            <template #body-cell-actions="props">
+                <QTd @click="stopEventPropagation($event, props.col)">
+                    <component
+                        :is="tableColumnComponents[props.col.name].component"
+                        class="col-content"
+                        v-bind="tableColumnComponents[props.col.name].props(props)"
+                        @click="tableColumnComponents[props.col.name].event(props)"
+                    />
+                </QTd>
+            </template>
+        </QTable>
+    </QPage>
+</template>
+
+<style lang="scss" scoped>
+.col-content {
+    border-radius: 4px;
+    padding: 6px;
+}
+</style>

From e0379dd1bc5d2dc565e0052b1e15b7e006c76605 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Sun, 28 Apr 2024 18:47:44 +0200
Subject: [PATCH 002/167] feat: refs #6825 fix modes

---
 src/components/common/VnTable.vue | 131 +++++++++++++++++++++---------
 1 file changed, 94 insertions(+), 37 deletions(-)

diff --git a/src/components/common/VnTable.vue b/src/components/common/VnTable.vue
index a537c5215..2f60fb634 100644
--- a/src/components/common/VnTable.vue
+++ b/src/components/common/VnTable.vue
@@ -1,14 +1,14 @@
 <script setup>
-import { ref, onMounted, markRaw } from 'vue';
+import { ref, onMounted, markRaw, computed } from 'vue';
+import { QCheckbox, useQuasar } from 'quasar';
+import { useI18n } from 'vue-i18n';
 import VnPaginate from 'components/ui/VnPaginate.vue';
 import VnBreadcrumbs from 'components/common/VnBreadcrumbs.vue';
-import { useI18n } from 'vue-i18n';
 
 /* basic input */
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
-import { QCheckbox } from 'quasar';
 // import VnLv from 'src/components/ui/VnLv.vue';
 
 const $props = defineProps({
@@ -38,26 +38,32 @@ const $props = defineProps({
     },
 });
 const { t } = useI18n();
+const $q = useQuasar();
 const mode = ref('list');
 const selected = ref([]);
-const tableModes = [
-    {
-        icon: 'view_column',
-        title: t('table view'),
-        class: 'q-mr-lg',
-        value: 'table',
-    },
-    {
-        icon: 'lists',
-        title: t('list view'),
-        value: 'list',
-    },
-    {
-        icon: 'apps',
-        title: t('grid view'),
-        value: 'card',
-    },
-];
+const tableModes = computed(() => {
+    const modes = [
+        {
+            icon: 'view_column',
+            title: t('table view'),
+            value: 'table',
+        },
+        {
+            icon: 'lists',
+            title: t('list view'),
+            value: 'list',
+        },
+    ];
+    if (!$q.screen.lt.md)
+        modes.push({
+            icon: 'apps',
+            title: t('grid view'),
+            value: 'card',
+            disable: () => console.log('called'),
+        });
+
+    return modes;
+});
 const basicInputs = {
     input: markRaw(VnInput),
     number: markRaw(VnInput),
@@ -78,6 +84,7 @@ const basicInputs = {
 //             'model-value': Boolean(prop.value),
 //         }),
 //     },
+//  vnTableOpitons y hacer bucle
 onMounted(() => {
     mode.value = $props.defaultMode;
 });
@@ -85,6 +92,7 @@ onMounted(() => {
 <template>
     <VnPaginate v-bind="$attrs" class="q-px-md">
         <template #body="{ rows }">
+            <!-- :grid="($q.screen.lt.md && reponsive) || mode != 'table'"  -->
             <QTable
                 class="vnTable"
                 :columns="columns"
@@ -92,20 +100,28 @@ onMounted(() => {
                 row-key="$index"
                 selection="multiple"
                 v-model:selected="selected"
-                :grid="($q.screen.lt.md && reponsive) || mode != 'table'"
+                :grid="mode != 'table'"
                 table-header-class="bg-grey-8"
-                flat
                 :virtual-scroll-item-size="48"
                 :pagination="pagination"
                 :rows-per-page-options="[0]"
-                style="height: 85vh"
-                :card-container-class="mode == 'list' ? 'grid-one' : 'grid-three'"
+                style="max-height: 90vh"
+                :card-container-class="
+                    mode == 'list' || $q.screen.lt.md ? 'grid-one' : 'grid-three'
+                "
+                flat
             >
                 <template #top-left>
                     <VnBreadcrumbs />
                 </template>
                 <template #top-right>
-                    <QBtn icon="visibility" title="asd" class="bg-dark q-mr-lg" dense />
+                    <QBtn
+                        icon="visibility"
+                        title="asd"
+                        class="bg-dark q-mr-md"
+                        dense
+                        v-if="mode == 'table'"
+                    />
                     <QBtnToggle
                         v-model="mode"
                         toggle-color="primary"
@@ -113,17 +129,20 @@ onMounted(() => {
                         dense
                         :options="tableModes"
                     />
-                    <QBtn icon="filter_alt" title="asd" class="bg-dark q-ml-lg" dense />
+                    <QBtn icon="filter_alt" title="asd" class="bg-dark q-ml-md" dense />
                 </template>
                 <!-- VnTableColumn¿?-->
                 <template #header-cell="{ col }">
-                    <QTh auto-width :class="`text-${col.align ?? 'left'}`">
-                        <span>{{ col.label }}</span>
+                    <QTh auto-width>
+                        <div class="q-pa-sm" :class="`text-${col.align ?? 'left'}`">
+                            {{ col.label }}
+                        </div>
+                        <hr class="q-ma-none divisor-line" />
                         <QInput
                             v-if="columnSearch"
                             dense
-                            outlined
                             :type="col.component == 'number' ? 'number' : 'text'"
+                            class="q-px-md q-pb-xs"
                         />
                     </QTh>
                 </template>
@@ -132,7 +151,6 @@ onMounted(() => {
                         <!-- {{ row[col.field] }} -->
                         <component
                             v-if="col.component"
-                            class="col-content"
                             :is="basicInputs[col.component] ?? col.component"
                             v-bind="col.props && col.props(props)"
                             @click="col.event && col.event(props)"
@@ -143,9 +161,21 @@ onMounted(() => {
                 <template #item="{ row, cols }">
                     <QCard bordered flat>
                         <QCardSection horizontal>
-                            <QChip color="primary">1234123</QChip>
+                            <span
+                                v-for="(prop, index) of Object.entries(row)"
+                                :key="index"
+                            >
+                                <QChip
+                                    color="primary"
+                                    v-if="cols[index]?.isId"
+                                    square
+                                    :title="t(cols[index].label)"
+                                >
+                                    {{ prop[1] }}
+                                </QChip>
+                            </span>
                         </QCardSection>
-                        <QCardSection class="q-pa-md">
+                        <QCardSection>
                             <div
                                 v-for="(prop, index) of Object.entries(row)"
                                 :key="index"
@@ -153,9 +183,9 @@ onMounted(() => {
                                 <div
                                     v-if="cols[index]?.cardVisible && !cols[index]?.isId"
                                 >
+                                    {{ t(cols[index].label) }} :
                                     <component
                                         v-if="cols[index]?.component"
-                                        class="cols[index]-content"
                                         :is="
                                             basicInputs[cols[index]?.component] ??
                                             cols[index]?.component
@@ -167,10 +197,27 @@ onMounted(() => {
                                             cols[index]?.event && cols[index]?.event(row)
                                         "
                                     />
-                                    <span v-else> {{ prop[0] }} : {{ prop[1] }}</span>
+                                    <span v-else>
+                                        {{ prop[1] }}
+                                    </span>
                                 </div>
                             </div>
                         </QCardSection>
+                        <QCardSection>
+                            <span
+                                v-for="(prop, index) of Object.entries(row)"
+                                :key="index"
+                            >
+                                <QChip
+                                    color="primary"
+                                    v-if="cols[index]?.isId"
+                                    square
+                                    :title="t(cols[index].label)"
+                                >
+                                    {{ prop[1] }}
+                                </QChip>
+                            </span>
+                        </QCardSection>
                     </QCard>
                 </template>
             </QTable>
@@ -231,7 +278,17 @@ onMounted(() => {
     grid-gap: 10px;
 }
 
-/*.vnTable {
+.divisor-line {
+    height: 1px;
+    background-color: var(--vn-section-color);
+    border: none;
+}
+
+.q-table th {
+    padding: 0;
+}
+
+.vnTable {
     thead tr th {
         position: sticky;
         z-index: 1;
@@ -239,5 +296,5 @@ onMounted(() => {
     thead tr:first-child th {
         top: 0;
     }
-}*/
+}
 </style>

From ed3c9db9191e289a12680bd30879a4319a147e8a Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Mon, 29 Apr 2024 15:12:49 +0200
Subject: [PATCH 003/167] feat: refs #6825 create vnTableColumn, cardActions

---
 src/components/common/VnTable.vue             | 129 ++++++++----------
 src/components/common/VnTableColumn.vue       |  39 ++++++
 .../ExtendedList/CustomerExtendedList.vue     |  64 +++++----
 3 files changed, 132 insertions(+), 100 deletions(-)
 create mode 100644 src/components/common/VnTableColumn.vue

diff --git a/src/components/common/VnTable.vue b/src/components/common/VnTable.vue
index 2f60fb634..278c3d207 100644
--- a/src/components/common/VnTable.vue
+++ b/src/components/common/VnTable.vue
@@ -1,15 +1,11 @@
 <script setup>
-import { ref, onMounted, markRaw, computed } from 'vue';
-import { QCheckbox, useQuasar } from 'quasar';
+import { ref, onMounted, computed } from 'vue';
+import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import VnPaginate from 'components/ui/VnPaginate.vue';
 import VnBreadcrumbs from 'components/common/VnBreadcrumbs.vue';
-
-/* basic input */
-import VnSelect from 'src/components/common/VnSelect.vue';
-import VnInput from 'src/components/common/VnInput.vue';
-import VnInputDate from 'src/components/common/VnInputDate.vue';
-// import VnLv from 'src/components/ui/VnLv.vue';
+import VnTableColumn from 'src/components/common/VnTableColumn.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
 
 const $props = defineProps({
     columns: {
@@ -64,13 +60,6 @@ const tableModes = computed(() => {
 
     return modes;
 });
-const basicInputs = {
-    input: markRaw(VnInput),
-    number: markRaw(VnInput),
-    date: markRaw(VnInputDate),
-    checkbox: markRaw(QCheckbox),
-    select: markRaw(VnSelect),
-};
 //     {
 //         isId: Boolean
 //         align: 'left',
@@ -84,7 +73,7 @@ const basicInputs = {
 //             'model-value': Boolean(prop.value),
 //         }),
 //     },
-//  vnTableOpitons y hacer bucle
+//      vnTableOpitons y hacer bucle
 onMounted(() => {
     mode.value = $props.defaultMode;
 });
@@ -146,19 +135,12 @@ onMounted(() => {
                         />
                     </QTh>
                 </template>
-                <template #body-cell="{ props, row, col }">
+                <template #body-cell="{ row, col }">
                     <QTd auto-width :class="`text-${col.align ?? 'left'}`">
-                        <!-- {{ row[col.field] }} -->
-                        <component
-                            v-if="col.component"
-                            :is="basicInputs[col.component] ?? col.component"
-                            v-bind="col.props && col.props(props)"
-                            @click="col.event && col.event(props)"
-                        />
-                        <span v-else> {{ row[col.field] }}</span>
+                        <VnTableColumn :column="col" :row />
                     </QTd>
                 </template>
-                <template #item="{ row, cols }">
+                <template #item="{ row, cols, colsMap }">
                     <QCard bordered flat>
                         <QCardSection horizontal>
                             <span
@@ -166,57 +148,47 @@ onMounted(() => {
                                 :key="index"
                             >
                                 <QChip
-                                    color="primary"
-                                    v-if="cols[index]?.isId"
+                                    color="primary-light"
                                     square
+                                    v-if="cols[index]?.isId"
                                     :title="t(cols[index].label)"
+                                    class="no-margin"
                                 >
                                     {{ prop[1] }}
                                 </QChip>
                             </span>
                         </QCardSection>
-                        <QCardSection>
-                            <div
-                                v-for="(prop, index) of Object.entries(row)"
-                                :key="index"
-                            >
-                                <div
-                                    v-if="cols[index]?.cardVisible && !cols[index]?.isId"
-                                >
-                                    {{ t(cols[index].label) }} :
-                                    <component
-                                        v-if="cols[index]?.component"
-                                        :is="
-                                            basicInputs[cols[index]?.component] ??
-                                            cols[index]?.component
+                        <QCardSection class="row justify-between q-pa-sm">
+                            <div>
+                                <div v-for="col of colsMap" :key="col.field">
+                                    <div
+                                        v-if="
+                                            col.cardVisible &&
+                                            !col.isId &&
+                                            col.field != 'tableActions'
                                         "
-                                        v-bind="
-                                            cols[index]?.props && cols[index]?.props(row)
-                                        "
-                                        @click="
-                                            cols[index]?.event && cols[index]?.event(row)
-                                        "
-                                    />
-                                    <span v-else>
-                                        {{ prop[1] }}
-                                    </span>
+                                    >
+                                        <VnLv :label="`${col.label}:`">
+                                            <template #value>
+                                                <VnTableColumn :column="col" :row />
+                                            </template>
+                                        </VnLv>
+                                    </div>
                                 </div>
                             </div>
-                        </QCardSection>
-                        <QCardSection>
-                            <span
-                                v-for="(prop, index) of Object.entries(row)"
-                                :key="index"
-                            >
-                                <QChip
-                                    color="primary"
-                                    v-if="cols[index]?.isId"
-                                    square
-                                    :title="t(cols[index].label)"
-                                >
-                                    {{ prop[1] }}
-                                </QChip>
-                            </span>
+                            <div v-if="colsMap.tableActions" class="column">
+                                <QBtn
+                                    v-for="(btn, index) of colsMap.tableActions.actions"
+                                    :key="index"
+                                    :title="btn.title"
+                                    :icon="btn.icon"
+                                    :outline="!btn.isPrimary"
+                                    size="sm"
+                                    class="q-pa-sm q-mb-sm"
+                                    :class="{ 'bg-primary-light': btn.isPrimary }"
+                                    @click.stop="btn.action(row)"
+                                />
+                            </div>
                         </QCardSection>
                     </QCard>
                 </template>
@@ -225,12 +197,22 @@ onMounted(() => {
     </VnPaginate>
 </template>
 <style lang="scss">
+* {
+    --primary-light: #f5b351;
+}
+.bg-primary-light {
+    background-color: var(--primary-light);
+    color: var(--vn-section-color);
+}
+.text-primary-light {
+    color: var(--primary-light);
+}
 .q-checkbox {
     & .q-checkbox__label {
-        color: #f5b351; /* use global*/
+        color: var(--primary-light); /* use global*/
     }
     & .q-checkbox__inner {
-        color: #f5b351; /* use global*/
+        color: var(--primary-light); /* use global*/
     }
 }
 .q-table--dark .q-table__bottom,
@@ -248,7 +230,7 @@ onMounted(() => {
 /* Works on Firefox */
 * {
     scrollbar-width: thin;
-    scrollbar-color: #f5b351 transparent;
+    scrollbar-color: var(--primary-light) transparent;
 }
 
 /* Works on Chrome, Edge, and Safari */
@@ -263,7 +245,7 @@ onMounted(() => {
 *::-webkit-scrollbar-thumb {
     background-color: transparent;
     border-radius: 20px;
-    border: 3px solid #f5b351;
+    border: 3px solid var(--primary-light);
 }
 
 .grid-one {
@@ -297,4 +279,9 @@ onMounted(() => {
         top: 0;
     }
 }
+
+.vn-label-value {
+    display: flex;
+    flex-direction: row;
+}
 </style>
diff --git a/src/components/common/VnTableColumn.vue b/src/components/common/VnTableColumn.vue
new file mode 100644
index 000000000..7cee83a8e
--- /dev/null
+++ b/src/components/common/VnTableColumn.vue
@@ -0,0 +1,39 @@
+<template>
+    <component
+        v-if="column.component"
+        :is="components[column.component] ?? column.component"
+        v-bind="column.props && column.props(row)"
+        @click="column.event && column.event(row)"
+    />
+    <span v-else>{{ dashIfEmpty(row[column.field]) }}</span>
+</template>
+<script setup>
+import { markRaw } from 'vue';
+import { QIcon, QCheckbox } from 'quasar';
+import { dashIfEmpty } from 'src/filters';
+
+/* basic input */
+import VnSelect from 'src/components/common/VnSelect.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+
+const components = {
+    input: markRaw(VnInput),
+    number: markRaw(VnInput),
+    date: markRaw(VnInputDate),
+    checkbox: markRaw(QCheckbox),
+    select: markRaw(VnSelect),
+    icon: markRaw(QIcon),
+};
+
+defineProps({
+    column: {
+        type: Object,
+        required: true,
+    },
+    row: {
+        type: Object,
+        required: true,
+    },
+});
+</script>
diff --git a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
index 789e90834..444726ad2 100644
--- a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
+++ b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
@@ -1,19 +1,15 @@
 <script setup>
-import { ref, computed, onBeforeMount, onMounted } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import VnInput from 'src/components/common/VnInput.vue';
 import VnTable from 'components/common/VnTable.vue';
+import CustomerSummary from '../Card/CustomerSummary.vue';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 
 import { QBtn, QIcon } from 'quasar';
-import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
-import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
 import CustomerExtendedListActions from './CustomerExtendedListActions.vue';
 import CustomerExtendedListFilter from './CustomerExtendedListFilter.vue';
-import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
-import { useArrayData } from 'composables/useArrayData';
 import { useStateStore } from 'stores/useStateStore';
 import { toDate } from 'src/filters';
 
@@ -21,17 +17,6 @@ const { t } = useI18n();
 const router = useRouter();
 const stateStore = useStateStore();
 
-const arrayData = ref(null);
-
-onBeforeMount(async () => {
-    arrayData.value = useArrayData('CustomerExtendedList', {
-        url: 'Clients/extendedListFilter',
-        limit: 0,
-    });
-    await arrayData.value.fetch({ append: false });
-    stateStore.rightDrawer = true;
-});
-
 onMounted(() => {
     const filteredColumns = columns.value.filter(
         (col) => col.name !== 'actions' && col.name !== 'customerStatus'
@@ -39,8 +24,6 @@ onMounted(() => {
     allColumnNames.value = filteredColumns.map((col) => col.name);
 });
 
-const rows = computed(() => arrayData.value.store.data);
-
 const selectedCustomerId = ref(0);
 const selectedSalesPersonId = ref(0);
 const allColumnNames = ref([]);
@@ -264,6 +247,17 @@ const tableColumnComponents = {
         event: () => {},
     },
 };
+const { viewSummary } = useSummaryDialog();
+const redirectToCreateView = (row) => {
+    router.push({
+        name: 'TicketList',
+        query: {
+            params: JSON.stringify({
+                clientFk: row.id,
+            }),
+        },
+    });
+};
 
 const columns = computed(() => [
     {
@@ -284,14 +278,12 @@ const columns = computed(() => [
         field: 'name',
         label: t('customer.extendedList.tableVisibleColumns.name'),
         name: 'name',
-        cardVisible: true,
     },
     {
         align: 'left',
         field: 'fi',
         label: t('customer.extendedList.tableVisibleColumns.fi'),
         name: 'fi',
-        cardVisible: true,
     },
     {
         align: 'left',
@@ -316,12 +308,14 @@ const columns = computed(() => [
         field: 'phone',
         label: t('customer.extendedList.tableVisibleColumns.phone'),
         name: 'phone',
+        cardVisible: true,
     },
     {
         align: 'left',
         field: 'mobile',
         label: t('customer.extendedList.tableVisibleColumns.mobile'),
         name: 'mobile',
+        cardVisible: true,
     },
     {
         align: 'left',
@@ -358,6 +352,7 @@ const columns = computed(() => [
         field: 'email',
         label: t('customer.extendedList.tableVisibleColumns.email'),
         name: 'email',
+        cardVisible: true,
     },
     {
         align: 'left',
@@ -469,9 +464,22 @@ const columns = computed(() => [
     },
     {
         align: 'right',
-        field: 'actions',
+        field: 'tableActions',
         label: '',
-        name: 'actions',
+        name: 'tableActions',
+        actions: [
+            {
+                title: t('Client ticket list'),
+                icon: 'vn:ticket',
+                action: redirectToCreateView,
+                isPrimary: true,
+            },
+            {
+                title: t('Client ticket list'),
+                icon: 'preview',
+                action: (row) => viewSummary(row.id, CustomerSummary),
+            },
+        ],
     },
 ]);
 
@@ -513,12 +521,10 @@ const selectSalesPersonId = (id) => (selectedSalesPersonId.value = id);
 
     <VnTable
         data-key="CustomerExtendedList"
+        url="Clients/extendedListFilter"
+        order="id DESC"
         :columns="columns"
-        :rows="rows"
-        class="full-width q-mt-md"
-        row-key="id"
-        :visible-columns="visibleColumns"
-        @row-click="(evt, row, id) => navigateToTravelId(row.id)"
+        auto-load
     >
         <!--
             default-mode="table"

From a75b33a8243aee3e2dfa206429ce4065b7d8b60a Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Thu, 2 May 2024 15:01:54 +0200
Subject: [PATCH 004/167] feat: refs #6825 qchip color

---
 src/components/common/VnTable.vue             | 122 +++++++++++-------
 src/components/ui/VnPaginate.vue              |   6 -
 .../ExtendedList/CustomerExtendedList.vue     |   3 +-
 3 files changed, 75 insertions(+), 56 deletions(-)

diff --git a/src/components/common/VnTable.vue b/src/components/common/VnTable.vue
index 278c3d207..cdce05d3a 100644
--- a/src/components/common/VnTable.vue
+++ b/src/components/common/VnTable.vue
@@ -17,8 +17,8 @@ const $props = defineProps({
         default: () => [],
     },
     defaultMode: {
-        type: String, // 'table', 'list', 'card 2/3'
-        default: 'list',
+        type: String,
+        default: 'list', // 'table', 'list', 'card'
     },
     reponsive: {
         type: Boolean,
@@ -135,62 +135,70 @@ onMounted(() => {
                         />
                     </QTh>
                 </template>
+
                 <template #body-cell="{ row, col }">
                     <QTd auto-width :class="`text-${col.align ?? 'left'}`">
                         <VnTableColumn :column="col" :row />
                     </QTd>
                 </template>
-                <template #item="{ row, cols, colsMap }">
-                    <QCard bordered flat>
-                        <QCardSection horizontal>
-                            <span
-                                v-for="(prop, index) of Object.entries(row)"
-                                :key="index"
-                            >
-                                <QChip
-                                    color="primary-light"
-                                    square
-                                    v-if="cols[index]?.isId"
-                                    :title="t(cols[index].label)"
-                                    class="no-margin"
-                                >
-                                    {{ prop[1] }}
-                                </QChip>
-                            </span>
-                        </QCardSection>
-                        <QCardSection class="row justify-between q-pa-sm">
-                            <div>
-                                <div v-for="col of colsMap" :key="col.field">
-                                    <div
-                                        v-if="
-                                            col.cardVisible &&
-                                            !col.isId &&
-                                            col.field != 'tableActions'
+                <template #item="{ row, colsMap }">
+                    <TransitionGroup name="grid" tag="div" class="grid">
+                        <QCard bordered flat>
+                            <QCardSection horizontal>
+                                <span v-for="(col, index) of colsMap" :key="col.field">
+                                    {{ index }}
+                                    <QChip
+                                        :class="
+                                            col.color
+                                                ? col.color(row)
+                                                : col.isId == 1
+                                                ? 'bg-primary-light'
+                                                : 'bg-secondary'
                                         "
+                                        square
+                                        v-if="col.isId"
+                                        :title="t(col.label)"
+                                        class="no-margin"
                                     >
-                                        <VnLv :label="`${col.label}:`">
-                                            <template #value>
-                                                <VnTableColumn :column="col" :row />
-                                            </template>
-                                        </VnLv>
+                                        {{ row[col.field] }}
+                                    </QChip>
+                                </span>
+                            </QCardSection>
+                            <QCardSection class="row justify-between q-pa-sm">
+                                <div>
+                                    <div v-for="col of colsMap" :key="col.field">
+                                        <div
+                                            v-if="
+                                                col.cardVisible &&
+                                                !col.isId &&
+                                                col.field != 'tableActions'
+                                            "
+                                        >
+                                            <VnLv :label="`${col.label}:`">
+                                                <template #value>
+                                                    <VnTableColumn :column="col" :row />
+                                                </template>
+                                            </VnLv>
+                                        </div>
                                     </div>
                                 </div>
-                            </div>
-                            <div v-if="colsMap.tableActions" class="column">
-                                <QBtn
-                                    v-for="(btn, index) of colsMap.tableActions.actions"
-                                    :key="index"
-                                    :title="btn.title"
-                                    :icon="btn.icon"
-                                    :outline="!btn.isPrimary"
-                                    size="sm"
-                                    class="q-pa-sm q-mb-sm"
-                                    :class="{ 'bg-primary-light': btn.isPrimary }"
-                                    @click.stop="btn.action(row)"
-                                />
-                            </div>
-                        </QCardSection>
-                    </QCard>
+                                <div v-if="colsMap.tableActions" class="column">
+                                    <QBtn
+                                        v-for="(btn, index) of colsMap.tableActions
+                                            .actions"
+                                        :key="index"
+                                        :title="btn.title"
+                                        :icon="btn.icon"
+                                        :outline="!btn.isPrimary"
+                                        size="sm"
+                                        class="q-pa-sm q-mb-sm"
+                                        :class="{ 'bg-primary-light': btn.isPrimary }"
+                                        @click.stop="btn.action(row)"
+                                    />
+                                </div>
+                            </QCardSection>
+                        </QCard>
+                    </TransitionGroup>
                 </template>
             </QTable>
         </template>
@@ -204,6 +212,11 @@ onMounted(() => {
     background-color: var(--primary-light);
     color: var(--vn-section-color);
 }
+
+.bg-secondary {
+    background-color: var(--vn-page-color);
+    color: var(--vn-text-colo);
+}
 .text-primary-light {
     color: var(--primary-light);
 }
@@ -260,6 +273,17 @@ onMounted(() => {
     grid-gap: 10px;
 }
 
+// WIP TRANSITIONS
+// .grid-item {
+//     background-color: red;
+//     transition: all 500ms ease;
+// }
+
+// .grid-move {
+//     background-color: #6b7280 !important;
+//     transform: scale(0.9);
+// }
+
 .divisor-line {
     height: 1px;
     background-color: var(--vn-section-color);
diff --git a/src/components/ui/VnPaginate.vue b/src/components/ui/VnPaginate.vue
index 4dae312ce..6bbf44684 100644
--- a/src/components/ui/VnPaginate.vue
+++ b/src/components/ui/VnPaginate.vue
@@ -192,12 +192,6 @@ defineExpose({ fetch, addFilter });
             <QSpinner color="orange" size="md" />
         </div>
     </QInfiniteScroll>
-    <div
-        v-if="!isLoading && store.hasMoreData"
-        class="w-full flex justify-center q-mt-md"
-    >
-        <QBtn color="primary" :label="t('Load more data')" @click="paginate()" />
-    </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
index 444726ad2..83eb91b9a 100644
--- a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
+++ b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
@@ -271,13 +271,14 @@ const columns = computed(() => [
         field: 'id',
         label: t('customer.extendedList.tableVisibleColumns.id'),
         name: 'id',
-        isId: true,
+        isId: 1,
     },
     {
         align: 'left',
         field: 'name',
         label: t('customer.extendedList.tableVisibleColumns.name'),
         name: 'name',
+        isId: 2,
     },
     {
         align: 'left',

From b76b2fd8a06194e0cb9531fef72ee62ee0adb7ea Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Fri, 3 May 2024 15:03:54 +0200
Subject: [PATCH 005/167] feat: refs #6825 VnTableFilter and VnPanelFilter init

---
 src/components/common/VnTable.vue             | 183 +++++++++++-------
 src/components/common/VnTableFilter.vue       | 108 +++++++++++
 src/components/common/VnTableFilterMore.vue   |  13 ++
 src/components/common/VnTableObj.json         |  33 ++++
 src/components/ui/VnFilterPanel.vue           |   6 +-
 .../ExtendedList/CustomerExtendedList.vue     |   9 +
 6 files changed, 280 insertions(+), 72 deletions(-)
 create mode 100644 src/components/common/VnTableFilter.vue
 create mode 100644 src/components/common/VnTableFilterMore.vue
 create mode 100644 src/components/common/VnTableObj.json

diff --git a/src/components/common/VnTable.vue b/src/components/common/VnTable.vue
index cdce05d3a..66296311f 100644
--- a/src/components/common/VnTable.vue
+++ b/src/components/common/VnTable.vue
@@ -1,11 +1,17 @@
 <script setup>
 import { ref, onMounted, computed } from 'vue';
-import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
+import { useQuasar } from 'quasar';
+
+import { useStateStore } from 'stores/useStateStore';
+
 import VnPaginate from 'components/ui/VnPaginate.vue';
+import VnFilterPanel from 'components/ui/VnFilterPanel.vue';
+import VnLv from 'components/ui/VnLv.vue';
+
 import VnBreadcrumbs from 'components/common/VnBreadcrumbs.vue';
-import VnTableColumn from 'src/components/common/VnTableColumn.vue';
-import VnLv from 'src/components/ui/VnLv.vue';
+import VnTableColumn from 'components/common/VnTableColumn.vue';
+import VnTableFilter from 'components/common/VnTableFilter.vue';
 
 const $props = defineProps({
     columns: {
@@ -35,8 +41,11 @@ const $props = defineProps({
 });
 const { t } = useI18n();
 const $q = useQuasar();
+const stateStore = useStateStore();
+
 const mode = ref('list');
 const selected = ref([]);
+const filters = ref({});
 const tableModes = computed(() => {
     const modes = [
         {
@@ -60,25 +69,38 @@ const tableModes = computed(() => {
 
     return modes;
 });
-//     {
-//         isId: Boolean
-//         align: 'left',
-//         field: 'hasFile',
-//         label: t('globals.original'),
-//         name: 'hasFile',
-//         component: QCheckbox ?? span,
-//         cardVisible: Boolean
-//         props: (prop) => ({
-//             disable: true,
-//             'model-value': Boolean(prop.value),
-//         }),
-//     },
-//      vnTableOpitons y hacer bucle
+
 onMounted(() => {
     mode.value = $props.defaultMode;
+    stateStore.rightDrawer = true;
 });
+
+function columnsCard(cols) {
+    return Object.values(cols).filter(
+        (col) => col.cardVisible && !col.isId && col.field != 'tableActions'
+    );
+}
 </script>
 <template>
+    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+        <QScrollArea class="fit text-grey-8">
+            <VnFilterPanel
+                :data-key="$attrs['data-key']"
+                :search-button="true"
+                :params="filters"
+            >
+                <template #body>
+                    <VnTableFilter
+                        :column="col"
+                        :data-key="$attrs['data-key']"
+                        v-for="col of columns"
+                        :key="col.id"
+                        v-model="filters[col.field]"
+                    />
+                </template>
+            </VnFilterPanel>
+        </QScrollArea>
+    </QDrawer>
     <VnPaginate v-bind="$attrs" class="q-px-md">
         <template #body="{ rows }">
             <!-- :grid="($q.screen.lt.md && reponsive) || mode != 'table'"  -->
@@ -118,42 +140,45 @@ onMounted(() => {
                         dense
                         :options="tableModes"
                     />
-                    <QBtn icon="filter_alt" title="asd" class="bg-dark q-ml-md" dense />
+                    <QBtn
+                        icon="filter_alt"
+                        title="asd"
+                        class="bg-dark q-ml-md"
+                        dense
+                        @click="stateStore.toggleRightDrawer()"
+                    />
                 </template>
-                <!-- VnTableColumn¿?-->
                 <template #header-cell="{ col }">
-                    <QTh auto-width>
-                        <div class="q-pa-sm" :class="`text-${col.align ?? 'left'}`">
-                            {{ col.label }}
-                        </div>
-                        <hr class="q-ma-none divisor-line" />
-                        <QInput
-                            v-if="columnSearch"
-                            dense
-                            :type="col.component == 'number' ? 'number' : 'text'"
-                            class="q-px-md q-pb-xs"
+                    <QTh auto-width style="min-width: 100px">
+                        <VnTableFilter
+                            :column="col"
+                            :show-title="true"
+                            :data-key="$attrs['data-key']"
+                            v-model="filters[col.field]"
                         />
                     </QTh>
                 </template>
 
-                <template #body-cell="{ row, col }">
+                <template #body-cell="{ col, row }">
+                    <!-- Columns -->
                     <QTd auto-width :class="`text-${col.align ?? 'left'}`">
-                        <VnTableColumn :column="col" :row />
+                        <VnTableColumn :column="col" :row="row" />
                     </QTd>
                 </template>
                 <template #item="{ row, colsMap }">
-                    <TransitionGroup name="grid" tag="div" class="grid">
-                        <QCard bordered flat>
-                            <QCardSection horizontal>
-                                <span v-for="(col, index) of colsMap" :key="col.field">
-                                    {{ index }}
+                    <!-- <TransitionGroup name="grid" tag="div" class="grid"> -->
+                    <QCard bordered flat class="row no-wrap justify-between">
+                        <QCardSection vertical class="no-margin no-padding w-80">
+                            <!-- Chips -->
+                            <QCardSection horizontal class="w-80">
+                                <span v-for="col of colsMap" :key="col.field">
                                     <QChip
                                         :class="
                                             col.color
                                                 ? col.color(row)
                                                 : col.isId == 1
                                                 ? 'bg-primary-light'
-                                                : 'bg-secondary'
+                                                : 'bg-chip-secondary'
                                         "
                                         square
                                         v-if="col.isId"
@@ -164,41 +189,51 @@ onMounted(() => {
                                     </QChip>
                                 </span>
                             </QCardSection>
-                            <QCardSection class="row justify-between q-pa-sm">
-                                <div>
-                                    <div v-for="col of colsMap" :key="col.field">
-                                        <div
-                                            v-if="
-                                                col.cardVisible &&
-                                                !col.isId &&
-                                                col.field != 'tableActions'
-                                            "
-                                        >
-                                            <VnLv :label="`${col.label}:`">
-                                                <template #value>
-                                                    <VnTableColumn :column="col" :row />
-                                                </template>
-                                            </VnLv>
-                                        </div>
+                            <!-- Fields -->
+                            <QCardSection
+                                class="q-pa-sm w-80"
+                                :class="
+                                    mode == 'list' || $q.screen.lt.md
+                                        ? 'grid-three'
+                                        : 'grid-one'
+                                "
+                            >
+                                <div v-for="col of columnsCard(colsMap)" :key="col.field">
+                                    <div
+                                        v-if="
+                                            col.cardVisible &&
+                                            !col.isId &&
+                                            col.field != 'tableActions'
+                                        "
+                                    >
+                                        <VnLv :label="`${col.label}:`">
+                                            <template #value>
+                                                <VnTableColumn :column="col" :row />
+                                            </template>
+                                        </VnLv>
                                     </div>
                                 </div>
-                                <div v-if="colsMap.tableActions" class="column">
-                                    <QBtn
-                                        v-for="(btn, index) of colsMap.tableActions
-                                            .actions"
-                                        :key="index"
-                                        :title="btn.title"
-                                        :icon="btn.icon"
-                                        :outline="!btn.isPrimary"
-                                        size="sm"
-                                        class="q-pa-sm q-mb-sm"
-                                        :class="{ 'bg-primary-light': btn.isPrimary }"
-                                        @click.stop="btn.action(row)"
-                                    />
-                                </div>
                             </QCardSection>
-                        </QCard>
-                    </TransitionGroup>
+                        </QCardSection>
+                        <!-- Actions -->
+                        <QCardSection
+                            v-if="colsMap.tableActions"
+                            class="column flex-center w-10 no-margin q-pa-xs q-gutter-y-xs"
+                        >
+                            <QBtn
+                                v-for="(btn, index) of colsMap.tableActions.actions"
+                                :key="index"
+                                :title="btn.title"
+                                :icon="btn.icon"
+                                :outline="!btn.isPrimary"
+                                size="sm"
+                                class="q-pa-sm"
+                                :class="{ 'bg-primary-light': btn.isPrimary }"
+                                @click.stop="btn.action(row)"
+                            />
+                        </QCardSection>
+                    </QCard>
+                    <!-- </TransitionGroup> -->
                 </template>
             </QTable>
         </template>
@@ -213,7 +248,7 @@ onMounted(() => {
     color: var(--vn-section-color);
 }
 
-.bg-secondary {
+.bg-chip-secondary {
     background-color: var(--vn-page-color);
     color: var(--vn-text-colo);
 }
@@ -308,4 +343,12 @@ onMounted(() => {
     display: flex;
     flex-direction: row;
 }
+
+.w-80 {
+    width: 80%;
+}
+
+.w-20 {
+    width: 20%;
+}
 </style>
diff --git a/src/components/common/VnTableFilter.vue b/src/components/common/VnTableFilter.vue
new file mode 100644
index 000000000..1d1860680
--- /dev/null
+++ b/src/components/common/VnTableFilter.vue
@@ -0,0 +1,108 @@
+<template>
+    <div
+        v-if="showTitle && column"
+        class="q-pt-sm q-px-sm ellipsis"
+        :class="`text-${column.align ?? 'left'}`"
+    >
+        {{ column.label }}
+    </div>
+    <div
+        v-if="columnFilter !== false && column.field != 'tableActions'"
+        class="row no-wrap"
+    >
+        <hr class="q-ma-none divisor-line" v-if="showTitle" />
+        <component
+            v-if="columnFilter?.component"
+            :is="isBasicComponent?.component ?? columnFilter.component"
+            v-model="model"
+            v-bind="columnFilter.attrs"
+            v-on="isBasicComponent?.event ?? columnFilter.event"
+            dense
+        />
+        <span v-else class="full-width">
+            <QInput
+                v-model="model"
+                dense
+                class="q-px-sm q-pb-xs q-pt-none"
+                :label="showTitle ? '' : column.label"
+                @keyup.enter="addFilter"
+            >
+                <template #append> </template>
+            </QInput>
+        </span>
+    </div>
+    <div v-else-if="showTitle" style="height: 45px"><!-- fixme! --></div>
+</template>
+<script setup>
+import { markRaw, computed, defineModel } from 'vue';
+import { QCheckbox } from 'quasar';
+import { useArrayData } from 'composables/useArrayData';
+
+/* basic input */
+import VnSelect from 'components/common/VnSelect.vue';
+import VnInput from 'components/common/VnInput.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
+
+const $props = defineProps({
+    column: {
+        type: Object,
+        required: true,
+    },
+    showTitle: {
+        type: Boolean,
+        default: false,
+    },
+    dataKey: {
+        type: String,
+        required: true,
+    },
+    addModel: {
+        type: Object,
+        default: () => {},
+    },
+});
+const model = defineModel();
+const arrayData = useArrayData($props.dataKey);
+const columnFilter = computed(() => $props.column?.columnFilter);
+const isBasicComponent = computed(
+    () => components[$props.column?.columnFilter?.component]
+);
+
+const updateEvent = { 'update:modelValue': addFilter };
+const enterEvent = { 'keyup.enter': addFilter };
+const components = {
+    input: {
+        component: markRaw(VnInput),
+        event: enterEvent,
+    },
+    number: {
+        component: markRaw(VnInput),
+        event: enterEvent,
+    },
+    date: {
+        component: markRaw(VnInputDate),
+        event: updateEvent,
+    },
+    checkbox: {
+        component: markRaw(QCheckbox),
+        event: updateEvent,
+    },
+    select: {
+        component: markRaw(VnSelect),
+        event: updateEvent,
+    },
+};
+
+async function addFilter() {
+    const value = model.value == '' ? null : model.value;
+    const prefix = columnFilter.value?.inWhere?.prefix;
+    let field = columnFilter.value?.field ?? $props.column.field;
+    field = prefix ? prefix + '.' + field : field;
+    const toFilter = { [field]: value };
+    const filter = columnFilter.value?.inWhere
+        ? { filter: { where: toFilter } }
+        : { params: toFilter };
+
+    await arrayData.addFilter(filter);
+}
+</script>
diff --git a/src/components/common/VnTableFilterMore.vue b/src/components/common/VnTableFilterMore.vue
new file mode 100644
index 000000000..fd4880431
--- /dev/null
+++ b/src/components/common/VnTableFilterMore.vue
@@ -0,0 +1,13 @@
+<template>
+    <QSelect dense icon="filter_alt" flat size="xs" :options="filterOptions"> </QSelect>
+</template>
+<script setup>
+const model = defineModel();
+
+const filterOptions = [{ label: '%' }, { label: '<' }, { label: '>' }];
+
+async function encapsulate(field) {
+    // ejemplo
+    // si es % que te ponga {like: `%${field}%`}
+}
+</script>
diff --git a/src/components/common/VnTableObj.json b/src/components/common/VnTableObj.json
new file mode 100644
index 000000000..ceaedd647
--- /dev/null
+++ b/src/components/common/VnTableObj.json
@@ -0,0 +1,33 @@
+//     {
+//         isId: Boolean
+//         align: 'left',
+//         field: 'hasFile',
+//         label: t('globals.original'),
+//         name: 'hasFile',
+//         component: QCheckbox ?? span,
+//         cardVisible: Boolean
+//         isId: 1/2
+//         color: function
+//         props: (prop) => ({
+//             disable: true,
+//             'model-value': Boolean(prop.value),
+//         }),
+//         tableActions:  {
+//     field: 'tableActions',
+//     name: 'tableActions',
+//     actions: [
+//         {
+//             title: t('Client ticket list'),
+//             icon: 'vn:ticket',
+//             action: redirectToCreateView,
+//             isPrimary: true,
+//         },
+//         {
+//             title: t('Client ticket list'),
+//             icon: 'preview',
+//             action: (row) => viewSummary(row.id, CustomerSummary),
+//         },
+//     ],
+// },
+//     },
+//      tableActions y hacer bucle
diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue
index eb0bbbe66..380bafb03 100644
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@@ -62,6 +62,8 @@ onMounted(() => {
     if (Object.keys(store.userParams).length > 0) {
         userParams.value = JSON.parse(JSON.stringify(store.userParams));
     }
+
+    console.log('userParams.value: ', userParams.value);
     emit('init', { params: userParams.value });
 });
 
@@ -165,7 +167,7 @@ function formatValue(value) {
 </script>
 
 <template>
-    <QForm @submit="search" id="filterPanelForm">
+    <div id="filterPanelForm">
         <QList dense>
             <QItem class="q-mt-xs">
                 <QItemSection top>
@@ -255,7 +257,7 @@ function formatValue(value) {
             </QItem>
             <QSeparator />
         </template>
-    </QForm>
+    </div>
     <QInnerLoading
         :label="t('globals.pleaseWait')"
         :showing="isLoading"
diff --git a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
index 83eb91b9a..29aeb97b4 100644
--- a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
+++ b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
@@ -265,6 +265,7 @@ const columns = computed(() => [
         field: 'customerStatus',
         label: 'customerStatus',
         name: 'customerStatus',
+        columnFilter: false,
     },
     {
         align: 'left',
@@ -272,6 +273,9 @@ const columns = computed(() => [
         label: t('customer.extendedList.tableVisibleColumns.id'),
         name: 'id',
         isId: 1,
+        columnFilter: {
+            field: 'search',
+        },
     },
     {
         align: 'left',
@@ -279,6 +283,11 @@ const columns = computed(() => [
         label: t('customer.extendedList.tableVisibleColumns.name'),
         name: 'name',
         isId: 2,
+        columnFilter: {
+            inWhere: {
+                prefix: 'c',
+            },
+        },
     },
     {
         align: 'left',

From 5ed2a821940bfa6258cc7fe530be34a0d2eb263c Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Mon, 6 May 2024 14:50:15 +0200
Subject: [PATCH 006/167] feat: refs #6739 transferInvoice new checkbox and
 functionality

---
 src/components/TransferInvoiceForm.vue | 104 ++++++++++++++++++++++---
 1 file changed, 95 insertions(+), 9 deletions(-)

diff --git a/src/components/TransferInvoiceForm.vue b/src/components/TransferInvoiceForm.vue
index de3196e2c..637ebda64 100644
--- a/src/components/TransferInvoiceForm.vue
+++ b/src/components/TransferInvoiceForm.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, reactive } from 'vue';
+import { ref, reactive, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
@@ -21,6 +21,8 @@ const $props = defineProps({
 const { t } = useI18n();
 const router = useRouter();
 const { notify } = useNotify();
+const checked = ref(true);
+let skip = 0;
 
 const transferInvoiceParams = reactive({
     id: $props.invoiceOutData?.id,
@@ -36,15 +38,74 @@ const closeForm = () => {
     if (closeButton.value) closeButton.value.click();
 };
 
+onMounted(async () => {
+    await fetchClients();
+});
+
+const fetchClients = async () => {
+    try {
+        const filter = {
+            skip: skip,
+            order: 'id DESC',
+            limit: 10,
+        };
+        const { data } = await axios.get('http://localhost:9000/api/Clients/filter', {
+            params: {
+                filter: serializeFilter(filter),
+            },
+        });
+        clientsOptions.value = [...clientsOptions.value, ...data];
+        skip += 10;
+    } catch (error) {
+        console.error('Error fetching clients:', error);
+    }
+};
+
+const serializeFilter = (filter) => {
+    let serializedFilter = '{';
+    for (const key in filter) {
+        serializedFilter += `"${key}":${JSON.stringify(filter[key])},`;
+    }
+    serializedFilter = serializedFilter.slice(0, -1);
+    serializedFilter += '}';
+    return serializedFilter;
+};
+
+const handleScroll = async () => {
+    const selectEl = document.querySelector('.vn-select');
+    if (selectEl.scrollTop + selectEl.clientHeight >= selectEl.scrollHeight) {
+        await fetchClients();
+    }
+};
+
 const transferInvoice = async () => {
     try {
-        const { data } = await axios.post(
-            'InvoiceOuts/transferInvoice',
-            transferInvoiceParams
+        const clientDetails = await axios.get(
+            `Clients/${transferInvoiceParams.newClientFk}`
         );
-        notify(t('Transferred invoice'), 'positive');
-        closeForm();
-        router.push('InvoiceOutSummary', { id: data.id });
+        const hasToInvoiceByAddress = clientDetails.data.hasToInvoiceByAddress;
+
+        if (checked.value && hasToInvoiceByAddress) {
+            const confirmed = confirm(t('confirmationInfo'));
+
+            if (confirmed) {
+                const { data } = await axios.post(
+                    'InvoiceOuts/transferInvoice',
+                    transferInvoiceParams
+                );
+                notify(t('Transferred invoice'), 'positive');
+                closeForm();
+                router.push('InvoiceOutSummary', { id: data.id });
+            }
+        } else {
+            const { data } = await axios.post(
+                'InvoiceOuts/transferInvoice',
+                transferInvoiceParams
+            );
+            notify(t('Transferred invoice'), 'positive');
+            closeForm();
+            router.push('InvoiceOutSummary', { id: data.id });
+        }
     } catch (err) {
         console.error('Error transfering invoice', err);
     }
@@ -61,13 +122,23 @@ const transferInvoice = async () => {
     <FetchData
         url="CplusRectificationTypes"
         :filter="{ order: 'description' }"
-        @on-fetch="(data) => (rectificativeTypeOptions = data)"
+        @on-fetch="
+            (data) => (
+                (rectificativeTypeOptions = data),
+                (transferInvoiceParams.cplusRectificationTypeFk = data[1].id)
+            )
+        "
         auto-load
     />
     <FetchData
         url="SiiTypeInvoiceOuts"
         :filter="{ where: { code: { like: 'R%' } } }"
-        @on-fetch="(data) => (siiTypeInvoiceOutsOptions = data)"
+        @on-fetch="
+            (data) => (
+                (siiTypeInvoiceOutsOptions = data),
+                (transferInvoiceParams.siiTypeInvoiceOutFk = data[3].id)
+            )
+        "
         auto-load
     />
     <FetchData
@@ -92,6 +163,7 @@ const transferInvoice = async () => {
                         option-value="id"
                         v-model="transferInvoiceParams.newClientFk"
                         :required="true"
+                        @scroll="handleScroll"
                     >
                         <template #option="scope">
                             <QItem v-bind="scope.itemProps">
@@ -152,11 +224,22 @@ const transferInvoice = async () => {
                     />
                 </div>
             </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div>
+                    <QCheckbox :label="t('Bill destination client')" v-model="checked" />
+                    <QIcon name="info" class="cursor-info q-ml-sm" size="sm">
+                        <QTooltip>{{ t('checkInfo') }}</QTooltip>
+                    </QIcon>
+                </div>
+            </VnRow>
         </template>
     </FormPopup>
 </template>
 
 <i18n>
+en:
+    checkInfo: New tickets from the destination customer will be generated in the consignee by default.
+    confirmationInfo: Destination customer is marked to bill in the consignee, do you want to continue?
 es:
     Transfer invoice: Transferir factura
     Transfer client: Transferir cliente
@@ -165,4 +248,7 @@ es:
     Class: Clase
     Type: Tipo
     Transferred invoice: Factura transferida
+    Bill destination client: Facturar cliente destino
+    checkInfo: Los nuevos tickets del cliente destino, serán generados en el consignatario por defecto.
+    confirmationInfo: El cliente destino tiene marcado facturar por consignatario, desea continuar?
 </i18n>

From 6a6a47bc82f03bb5a0b1dec94519a656b5a5cc69 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Mon, 6 May 2024 15:26:57 +0200
Subject: [PATCH 007/167] feat: refs #6825 right filter panel

---
 src/components/common/VnSelect.vue            | 13 +++-
 src/components/common/VnTable.vue             | 76 +++++++++++++++----
 src/components/common/VnTableFilter.vue       | 38 +++++++---
 src/components/ui/VnFilterPanel.vue           | 39 +++++++---
 .../ExtendedList/CustomerExtendedList.vue     | 10 +--
 5 files changed, 132 insertions(+), 44 deletions(-)

diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index 05c74f00a..0fea2180b 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -16,11 +16,11 @@ const $props = defineProps({
     },
     optionLabel: {
         type: [String],
-        default: '',
+        default: 'name',
     },
     optionValue: {
         type: String,
-        default: '',
+        default: 'id',
     },
     url: {
         type: String,
@@ -108,11 +108,18 @@ async function fetchFilter(val) {
 
     const { fields, sortBy, limit } = $props;
     let key = optionLabel.value;
+    console.log('key: ', key);
 
     if (new RegExp(/\d/g).test(val)) key = optionValue.value;
+    console.log('key: ', key);
 
     const where = { [key]: { like: `%${val}%` } };
-    return dataRef.value.fetch({ fields, where, order: sortBy, limit });
+    const fetchOptions = { where, order: sortBy, limit };
+    console.log('where: ', where);
+    console.log('fields: ', fields);
+    if (fields) fetchOptions.fields = fields;
+    console.log('fetchOptions: ', fetchOptions);
+    return dataRef.value.fetch(fetchOptions);
 }
 
 async function filterHandler(val, update) {
diff --git a/src/components/common/VnTable.vue b/src/components/common/VnTable.vue
index 66296311f..b18f34779 100644
--- a/src/components/common/VnTable.vue
+++ b/src/components/common/VnTable.vue
@@ -168,9 +168,9 @@ function columnsCard(cols) {
                 <template #item="{ row, colsMap }">
                     <!-- <TransitionGroup name="grid" tag="div" class="grid"> -->
                     <QCard bordered flat class="row no-wrap justify-between">
-                        <QCardSection vertical class="no-margin no-padding w-80">
+                        <QCardSection vertical class="no-margin no-padding full-width">
                             <!-- Chips -->
-                            <QCardSection horizontal class="w-80">
+                            <QCardSection horizontal>
                                 <span v-for="col of colsMap" :key="col.field">
                                     <QChip
                                         :class="
@@ -191,27 +191,30 @@ function columnsCard(cols) {
                             </QCardSection>
                             <!-- Fields -->
                             <QCardSection
-                                class="q-pa-sm w-80"
+                                class="q-pa-sm q-pr-lg"
                                 :class="
-                                    mode == 'list' || $q.screen.lt.md
-                                        ? 'grid-three'
-                                        : 'grid-one'
+                                    $q.screen.lt.md || mode == 'card'
+                                        ? 'flex-one'
+                                        : 'flex-three'
                                 "
                             >
-                                <div v-for="col of columnsCard(colsMap)" :key="col.field">
-                                    <div
+                                <div
+                                    v-for="col of columnsCard(colsMap)"
+                                    :key="col.field"
+                                    class="fields"
+                                >
+                                    <VnLv
                                         v-if="
                                             col.cardVisible &&
                                             !col.isId &&
                                             col.field != 'tableActions'
                                         "
+                                        :label="`${col.label}:`"
                                     >
-                                        <VnLv :label="`${col.label}:`">
-                                            <template #value>
-                                                <VnTableColumn :column="col" :row />
-                                            </template>
-                                        </VnLv>
-                                    </div>
+                                        <template #value>
+                                            <VnTableColumn :column="col" :row />
+                                        </template>
+                                    </VnLv>
                                 </div>
                             </QCardSection>
                         </QCardSection>
@@ -304,8 +307,51 @@ function columnsCard(cols) {
 
 .grid-three {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(auto-fit, minmax(350px, 1px));
+    max-width: 100%;
     grid-gap: 10px;
+    margin: 0 auto;
+}
+
+.flex-three {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    div.fields {
+        width: 50%;
+        .vn-label-value {
+            display: flex;
+            justify-content: flex-start;
+            gap: 2%;
+            width: 100%;
+            .label {
+                width: 25%;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                flex-grow: 0;
+                flex-shrink: 0;
+            }
+            .value {
+                width: 65%;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+        }
+    }
+}
+
+.flex-one {
+    display: flex;
+    flex-flow: row wrap;
+    div.fields {
+        width: 100%;
+        .vn-label-value {
+            display: flex;
+            gap: 2%;
+        }
+    }
 }
 
 // WIP TRANSITIONS
diff --git a/src/components/common/VnTableFilter.vue b/src/components/common/VnTableFilter.vue
index 1d1860680..4a2bfc6e4 100644
--- a/src/components/common/VnTableFilter.vue
+++ b/src/components/common/VnTableFilter.vue
@@ -15,7 +15,7 @@
             v-if="columnFilter?.component"
             :is="isBasicComponent?.component ?? columnFilter.component"
             v-model="model"
-            v-bind="columnFilter.attrs"
+            v-bind="{ ...columnFilter.attrs, ...isBasicComponent?.attrs }"
             v-on="isBasicComponent?.event ?? columnFilter.event"
             dense
         />
@@ -90,19 +90,35 @@ const components = {
     select: {
         component: markRaw(VnSelect),
         event: updateEvent,
+        attrs: {
+            class: 'full-width q-px-sm',
+            label: $props.showTitle ? '' : $props.column.label,
+        },
     },
 };
 
-async function addFilter() {
-    const value = model.value == '' ? null : model.value;
-    const prefix = columnFilter.value?.inWhere?.prefix;
-    let field = columnFilter.value?.field ?? $props.column.field;
-    field = prefix ? prefix + '.' + field : field;
-    const toFilter = { [field]: value };
-    const filter = columnFilter.value?.inWhere
-        ? { filter: { where: toFilter } }
-        : { params: toFilter };
+// async function addFilter() {
+//     const value = model.value == '' ? null : model.value;
+//     const prefix = columnFilter.value?.inWhere?.prefix;
+//     let field = columnFilter.value?.field ?? $props.column.field;
+//     field = prefix ? prefix + '.' + field : field;
+//     const toFilter = { [field]: value };
+//     const filter = columnFilter.value?.inWhere
+//         ? { filter: { where: toFilter } }
+//         : { params: toFilter };
 
-    await arrayData.addFilter(filter);
+//     console.log('filter: ', filter);
+//     await arrayData.addFilter(filter);
+// }
+
+async function addFilter(event) {
+    let value = model.value == '' ? null : model.value;
+    if (event && typeof event !== 'object') {
+        value = event;
+    }
+    let field = columnFilter.value?.field ?? $props.column.field;
+    const toFilter = { [field]: value };
+
+    await arrayData.addFilter({ params: toFilter });
 }
 </script>
diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue
index 380bafb03..838cdd444 100644
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@@ -67,18 +67,36 @@ onMounted(() => {
     emit('init', { params: userParams.value });
 });
 
+function setUserParams(params) {
+    if (!params) {
+        userParams.value = {};
+    } else {
+        userParams.value = params;
+    }
+}
+
 watch(
     () => route.query.params,
     (val) => {
-        if (!val) {
-            userParams.value = {};
-        } else {
-            const parsedParams = JSON.parse(val);
-            userParams.value = { ...parsedParams };
-        }
+        setUserParams(val);
     }
 );
 
+watch(
+    () => arrayData.store.userParams,
+    (val) => {
+        setUserParams(val);
+    }
+);
+
+watch(
+    () => arrayData.store.filter,
+    (val) => {
+        console.log('watch filter: ', val);
+    },
+    { deep: true }
+);
+
 const isLoading = ref(false);
 async function search() {
     store.filter.where = {};
@@ -131,14 +149,15 @@ async function clearFilters() {
     emit('clear');
 }
 
-const tagsList = computed(() =>
-    Object.entries(userParams.value)
+const tagsList = computed(() => {
+    console.log('userParams.value: ', userParams.value);
+    return Object.entries(userParams.value)
         .filter(([key, value]) => value && !(props.hiddenTags || []).includes(key))
         .map(([key, value]) => ({
             label: key,
             value: value,
-        }))
-);
+        }));
+});
 
 const tags = computed(() =>
     tagsList.value.filter((tag) => !(props.customTags || []).includes(tag.label))
diff --git a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
index 29aeb97b4..0cacf57d9 100644
--- a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
+++ b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
@@ -275,6 +275,11 @@ const columns = computed(() => [
         isId: 1,
         columnFilter: {
             field: 'search',
+            component: 'select',
+            attrs: {
+                url: 'Clients',
+                fields: ['id', 'name'],
+            },
         },
     },
     {
@@ -283,11 +288,6 @@ const columns = computed(() => [
         label: t('customer.extendedList.tableVisibleColumns.name'),
         name: 'name',
         isId: 2,
-        columnFilter: {
-            inWhere: {
-                prefix: 'c',
-            },
-        },
     },
     {
         align: 'left',

From 7befca94bda44686025779d90232b53152ee7e19 Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Tue, 7 May 2024 10:35:48 +0200
Subject: [PATCH 008/167] refactor: refs #6739 new confirmation window

---
 src/components/TransferInvoiceForm.vue | 41 +++++++++++---------------
 1 file changed, 18 insertions(+), 23 deletions(-)

diff --git a/src/components/TransferInvoiceForm.vue b/src/components/TransferInvoiceForm.vue
index 637ebda64..b3c40b696 100644
--- a/src/components/TransferInvoiceForm.vue
+++ b/src/components/TransferInvoiceForm.vue
@@ -2,7 +2,8 @@
 import { ref, reactive, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-
+import { useQuasar } from 'quasar';
+import VnConfirm from 'components/ui/VnConfirm.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import FetchData from 'components/FetchData.vue';
 import VnSelect from 'components/common/VnSelect.vue';
@@ -18,6 +19,7 @@ const $props = defineProps({
     },
 });
 
+const quasar = useQuasar();
 const { t } = useI18n();
 const router = useRouter();
 const { notify } = useNotify();
@@ -77,35 +79,28 @@ const handleScroll = async () => {
         await fetchClients();
     }
 };
-
 const transferInvoice = async () => {
     try {
         const clientDetails = await axios.get(
             `Clients/${transferInvoiceParams.newClientFk}`
         );
-        const hasToInvoiceByAddress = clientDetails.data.hasToInvoiceByAddress;
 
-        if (checked.value && hasToInvoiceByAddress) {
-            const confirmed = confirm(t('confirmationInfo'));
+        if (checked.value && clientDetails.data.hasToInvoiceByAddress)
+            quasar.dialog({
+                component: VnConfirm,
+                componentProps: {
+                    title: t('Bill destination client'),
+                    message: t('confirmationInfo'),
+                },
+            });
 
-            if (confirmed) {
-                const { data } = await axios.post(
-                    'InvoiceOuts/transferInvoice',
-                    transferInvoiceParams
-                );
-                notify(t('Transferred invoice'), 'positive');
-                closeForm();
-                router.push('InvoiceOutSummary', { id: data.id });
-            }
-        } else {
-            const { data } = await axios.post(
-                'InvoiceOuts/transferInvoice',
-                transferInvoiceParams
-            );
-            notify(t('Transferred invoice'), 'positive');
-            closeForm();
-            router.push('InvoiceOutSummary', { id: data.id });
-        }
+        const { data } = await axios.post(
+            'InvoiceOuts/transferInvoice',
+            transferInvoiceParams
+        );
+        notify(t('Transferred invoice'), 'positive');
+        closeForm();
+        router.push('InvoiceOutSummary', { id: data.id });
     } catch (err) {
         console.error('Error transfering invoice', err);
     }

From bc1a79ac6853c26a1947db1635121616467cff0c Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Tue, 7 May 2024 11:27:39 +0200
Subject: [PATCH 009/167] refactor: refs #6739 updated transferInvoice function

---
 src/components/TransferInvoiceForm.vue | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/TransferInvoiceForm.vue b/src/components/TransferInvoiceForm.vue
index b3c40b696..279ed822d 100644
--- a/src/components/TransferInvoiceForm.vue
+++ b/src/components/TransferInvoiceForm.vue
@@ -80,6 +80,16 @@ const handleScroll = async () => {
     }
 };
 const transferInvoice = async () => {
+    const params = {
+        id: transferInvoiceParams.id,
+        cplusRectificationTypeFk: transferInvoiceParams.cplusRectificationTypeFk,
+        invoiceCorrectionTypeFk: transferInvoiceParams.invoiceCorrectionTypeFk,
+        newClientFk: transferInvoiceParams.newClientFk,
+        refFk: transferInvoiceParams.refFk,
+        siiTypeInvoiceOutFk: transferInvoiceParams.siiTypeInvoiceOutFk,
+        checked: checked.value,
+    };
+
     try {
         const clientDetails = await axios.get(
             `Clients/${transferInvoiceParams.newClientFk}`
@@ -94,10 +104,7 @@ const transferInvoice = async () => {
                 },
             });
 
-        const { data } = await axios.post(
-            'InvoiceOuts/transferInvoice',
-            transferInvoiceParams
-        );
+        const { data } = await axios.post('InvoiceOuts/transferInvoice', params);
         notify(t('Transferred invoice'), 'positive');
         closeForm();
         router.push('InvoiceOutSummary', { id: data.id });

From 1ba3a3151ced2b572c27736307b83c773cc6f6bf Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Tue, 7 May 2024 14:54:53 +0200
Subject: [PATCH 010/167] feat: refs #6825 scroll for table mode

---
 src/components/common/VnTable.vue | 32 +++++++++++++++++++++----------
 src/components/ui/VnPaginate.vue  |  2 +-
 2 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/src/components/common/VnTable.vue b/src/components/common/VnTable.vue
index b18f34779..85d15bec3 100644
--- a/src/components/common/VnTable.vue
+++ b/src/components/common/VnTable.vue
@@ -45,7 +45,8 @@ const stateStore = useStateStore();
 
 const mode = ref('list');
 const selected = ref([]);
-const filters = ref({});
+const params = ref({});
+const VnPaginateRef = ref();
 const tableModes = computed(() => {
     const modes = [
         {
@@ -84,10 +85,11 @@ function columnsCard(cols) {
 <template>
     <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
         <QScrollArea class="fit text-grey-8">
+            {{ params }}
             <VnFilterPanel
                 :data-key="$attrs['data-key']"
                 :search-button="true"
-                :params="filters"
+                v-model:params="params"
             >
                 <template #body>
                     <VnTableFilter
@@ -95,13 +97,19 @@ function columnsCard(cols) {
                         :data-key="$attrs['data-key']"
                         v-for="col of columns"
                         :key="col.id"
-                        v-model="filters[col.field]"
+                        v-model="params[col.field]"
                     />
                 </template>
             </VnFilterPanel>
         </QScrollArea>
     </QDrawer>
-    <VnPaginate v-bind="$attrs" class="q-px-md">
+    <VnPaginate
+        v-bind="$attrs"
+        class="q-px-md"
+        :limit="20"
+        ref="VnPaginateRef"
+        :disable-infinite-scroll="mode == 'table'"
+    >
         <template #body="{ rows }">
             <!-- :grid="($q.screen.lt.md && reponsive) || mode != 'table'"  -->
             <QTable
@@ -113,14 +121,15 @@ function columnsCard(cols) {
                 v-model:selected="selected"
                 :grid="mode != 'table'"
                 table-header-class="bg-grey-8"
-                :virtual-scroll-item-size="48"
-                :pagination="pagination"
-                :rows-per-page-options="[0]"
-                style="max-height: 90vh"
                 :card-container-class="
                     mode == 'list' || $q.screen.lt.md ? 'grid-one' : 'grid-three'
                 "
                 flat
+                :style="mode == 'table' && 'max-height: 92vh'"
+                virtual-scroll
+                @virtual-scroll="
+                    (event) => event.index > rows.length - 2 && VnPaginateRef.paginate()
+                "
             >
                 <template #top-left>
                     <VnBreadcrumbs />
@@ -154,7 +163,7 @@ function columnsCard(cols) {
                             :column="col"
                             :show-title="true"
                             :data-key="$attrs['data-key']"
-                            v-model="filters[col.field]"
+                            v-model="params[col.field]"
                         />
                     </QTh>
                 </template>
@@ -309,7 +318,7 @@ function columnsCard(cols) {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(350px, 1px));
     max-width: 100%;
-    grid-gap: 10px;
+    grid-gap: 12px;
     margin: 0 auto;
 }
 
@@ -383,6 +392,9 @@ function columnsCard(cols) {
     thead tr:first-child th {
         top: 0;
     }
+    .q-table__top {
+        top: 0;
+    }
 }
 
 .vn-label-value {
diff --git a/src/components/ui/VnPaginate.vue b/src/components/ui/VnPaginate.vue
index 1995cebdd..65ed39683 100644
--- a/src/components/ui/VnPaginate.vue
+++ b/src/components/ui/VnPaginate.vue
@@ -145,7 +145,7 @@ async function onLoad(index, done) {
     done(isDone);
 }
 
-defineExpose({ fetch, addFilter });
+defineExpose({ fetch, addFilter, paginate });
 </script>
 
 <template>

From a64d3339952fe463b48add4382d354a32c6d5d2f Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Fri, 10 May 2024 07:04:03 +0200
Subject: [PATCH 011/167] refactor: refs #6739 requested changes

---
 src/components/TransferInvoiceForm.vue | 115 ++++++++++---------------
 1 file changed, 46 insertions(+), 69 deletions(-)

diff --git a/src/components/TransferInvoiceForm.vue b/src/components/TransferInvoiceForm.vue
index 279ed822d..ecb99f55a 100644
--- a/src/components/TransferInvoiceForm.vue
+++ b/src/components/TransferInvoiceForm.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, reactive, onMounted } from 'vue';
+import { ref, reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
@@ -24,14 +24,12 @@ const { t } = useI18n();
 const router = useRouter();
 const { notify } = useNotify();
 const checked = ref(true);
-let skip = 0;
-
 const transferInvoiceParams = reactive({
     id: $props.invoiceOutData?.id,
     refFk: $props.invoiceOutData?.ref,
 });
+
 const closeButton = ref(null);
-const clientsOptions = ref([]);
 const rectificativeTypeOptions = ref([]);
 const siiTypeInvoiceOutsOptions = ref([]);
 const invoiceCorrectionTypesOptions = ref([]);
@@ -40,46 +38,14 @@ const closeForm = () => {
     if (closeButton.value) closeButton.value.click();
 };
 
-onMounted(async () => {
-    await fetchClients();
-});
-
-const fetchClients = async () => {
-    try {
-        const filter = {
-            skip: skip,
-            order: 'id DESC',
-            limit: 10,
-        };
-        const { data } = await axios.get('http://localhost:9000/api/Clients/filter', {
-            params: {
-                filter: serializeFilter(filter),
-            },
-        });
-        clientsOptions.value = [...clientsOptions.value, ...data];
-        skip += 10;
-    } catch (error) {
-        console.error('Error fetching clients:', error);
-    }
+const selectedClient = (client) => {
+    transferInvoiceParams.selectedClientData = client;
 };
 
-const serializeFilter = (filter) => {
-    let serializedFilter = '{';
-    for (const key in filter) {
-        serializedFilter += `"${key}":${JSON.stringify(filter[key])},`;
-    }
-    serializedFilter = serializedFilter.slice(0, -1);
-    serializedFilter += '}';
-    return serializedFilter;
-};
-
-const handleScroll = async () => {
-    const selectEl = document.querySelector('.vn-select');
-    if (selectEl.scrollTop + selectEl.clientHeight >= selectEl.scrollHeight) {
-        await fetchClients();
-    }
-};
 const transferInvoice = async () => {
+    const hasToInvoiceByAddress =
+        transferInvoiceParams.selectedClientData.hasToInvoiceByAddress;
+
     const params = {
         id: transferInvoiceParams.id,
         cplusRectificationTypeFk: transferInvoiceParams.cplusRectificationTypeFk,
@@ -91,18 +57,27 @@ const transferInvoice = async () => {
     };
 
     try {
-        const clientDetails = await axios.get(
-            `Clients/${transferInvoiceParams.newClientFk}`
-        );
-
-        if (checked.value && clientDetails.data.hasToInvoiceByAddress)
-            quasar.dialog({
-                component: VnConfirm,
-                componentProps: {
-                    title: t('Bill destination client'),
-                    message: t('confirmationInfo'),
-                },
+        if (checked.value && hasToInvoiceByAddress) {
+            const response = await new Promise((resolve) => {
+                quasar
+                    .dialog({
+                        component: VnConfirm,
+                        componentProps: {
+                            title: t('Bill destination client'),
+                            message: t('transferInvoiceInfo'),
+                        },
+                    })
+                    .onOk(() => {
+                        resolve(true);
+                    })
+                    .onCancel(() => {
+                        resolve(false);
+                    });
             });
+            if (!response) {
+                return;
+            }
+        }
 
         const { data } = await axios.post('InvoiceOuts/transferInvoice', params);
         notify(t('Transferred invoice'), 'positive');
@@ -115,19 +90,15 @@ const transferInvoice = async () => {
 </script>
 
 <template>
-    <FetchData
-        url="Clients"
-        @on-fetch="(data) => (clientsOptions = data)"
-        :filter="{ fields: ['id', 'name'], order: 'id', limit: 30 }"
-        auto-load
-    />
     <FetchData
         url="CplusRectificationTypes"
         :filter="{ order: 'description' }"
         @on-fetch="
             (data) => (
                 (rectificativeTypeOptions = data),
-                (transferInvoiceParams.cplusRectificationTypeFk = data[1].id)
+                (transferInvoiceParams.cplusRectificationTypeFk = data.filter(
+                    (type) => type.description == 'I – Por diferencias'
+                )[0].id)
             )
         "
         auto-load
@@ -138,7 +109,9 @@ const transferInvoice = async () => {
         @on-fetch="
             (data) => (
                 (siiTypeInvoiceOutsOptions = data),
-                (transferInvoiceParams.siiTypeInvoiceOutFk = data[3].id)
+                (transferInvoiceParams.siiTypeInvoiceOutFk = data.filter(
+                    (type) => type.code == 'R4'
+                )[0].id)
             )
         "
         auto-load
@@ -159,20 +132,23 @@ const transferInvoice = async () => {
                 <div class="col">
                     <VnSelect
                         :label="t('Client')"
-                        :options="clientsOptions"
                         hide-selected
                         option-label="name"
                         option-value="id"
                         v-model="transferInvoiceParams.newClientFk"
                         :required="true"
-                        @scroll="handleScroll"
+                        url="Clients"
+                        :fields="['id', 'name', 'hasToInvoiceByAddress']"
+                        auto-load
                     >
                         <template #option="scope">
-                            <QItem v-bind="scope.itemProps">
+                            <QItem
+                                v-bind="scope.itemProps"
+                                @click="selectedClient(scope.opt)"
+                            >
                                 <QItemSection>
                                     <QItemLabel>
-                                        #{{ scope.opt?.id }} -
-                                        {{ scope.opt?.name }}
+                                        #{{ scope.opt?.id }} - {{ scope.opt?.name }}
                                     </QItemLabel>
                                 </QItemSection>
                             </QItem>
@@ -230,7 +206,7 @@ const transferInvoice = async () => {
                 <div>
                     <QCheckbox :label="t('Bill destination client')" v-model="checked" />
                     <QIcon name="info" class="cursor-info q-ml-sm" size="sm">
-                        <QTooltip>{{ t('checkInfo') }}</QTooltip>
+                        <QTooltip>{{ t('transferInvoiceInfo') }}</QTooltip>
                     </QIcon>
                 </div>
             </VnRow>
@@ -241,7 +217,8 @@ const transferInvoice = async () => {
 <i18n>
 en:
     checkInfo: New tickets from the destination customer will be generated in the consignee by default.
-    confirmationInfo: Destination customer is marked to bill in the consignee, do you want to continue?
+    transferInvoiceInfo: Destination customer is marked to bill in the consignee, do you want to continue?
+    confirmTransferInvoice: The destination customer has selected to bill in the consignee, do you want to continue?
 es:
     Transfer invoice: Transferir factura
     Transfer client: Transferir cliente
@@ -251,6 +228,6 @@ es:
     Type: Tipo
     Transferred invoice: Factura transferida
     Bill destination client: Facturar cliente destino
-    checkInfo: Los nuevos tickets del cliente destino, serán generados en el consignatario por defecto.
-    confirmationInfo: El cliente destino tiene marcado facturar por consignatario, desea continuar?
+    transferInvoiceInfo: Los nuevos tickets del cliente destino, serán generados en el consignatario por defecto.
+    confirmTransferInvoice: El cliente destino tiene marcado facturar por consignatario, desea continuar?
 </i18n>

From c223bbe0eaa6b5e6d06fe57d938e1f3adfbd75ec Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Mon, 13 May 2024 14:16:01 +0200
Subject: [PATCH 012/167] fea(VnTable)t: refs #6825 create VnComponent, add
 rowClick and redirect

---
 src/components/common/VnComponent.vue         |  36 ++
 src/components/common/VnSelect.vue            |   5 -
 src/components/common/VnTable.vue             | 310 +++++++++---------
 src/components/common/VnTableColumn.vue       |  27 +-
 src/components/common/VnTableFilter.vue       |  12 +-
 src/components/ui/VnFilterPanel.vue           |  13 +-
 .../ExtendedList/CustomerExtendedList.vue     |  37 ++-
 7 files changed, 252 insertions(+), 188 deletions(-)
 create mode 100644 src/components/common/VnComponent.vue

diff --git a/src/components/common/VnComponent.vue b/src/components/common/VnComponent.vue
new file mode 100644
index 000000000..6514c1ba6
--- /dev/null
+++ b/src/components/common/VnComponent.vue
@@ -0,0 +1,36 @@
+<template>
+    <span v-for="toComponent of componentArray" :key="toComponent.field">
+        <component
+            v-if="toComponent?.component"
+            :is="
+                (components && components[toComponent.component]) ?? toComponent.component
+            "
+            v-bind="toComponent.props && toComponent.props(value)"
+            @click="toComponent.event && toComponent.event(value)"
+        />
+    </span>
+</template>
+<script setup>
+import { computed } from 'vue';
+const $props = defineProps({
+    prop: {
+        type: Object,
+        required: true,
+    },
+    components: {
+        type: Object,
+        default: () => {},
+        required: false,
+    },
+    value: {
+        type: Object,
+        default: () => {},
+        required: false,
+    },
+});
+
+const componentArray = computed(() => {
+    if (typeof $props.prop === 'object') return [$props.prop];
+    return $props.prop;
+});
+</script>
diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index e98c4e264..656beed48 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -108,17 +108,12 @@ async function fetchFilter(val) {
 
     const { fields, sortBy, limit } = $props;
     let key = optionLabel.value;
-    console.log('key: ', key);
 
     if (new RegExp(/\d/g).test(val)) key = optionValue.value;
-    console.log('key: ', key);
 
     const where = { [key]: { like: `%${val}%` } };
     const fetchOptions = { where, order: sortBy, limit };
-    console.log('where: ', where);
-    console.log('fields: ', fields);
     if (fields) fetchOptions.fields = fields;
-    console.log('fetchOptions: ', fetchOptions);
     return dataRef.value.fetch(fetchOptions);
 }
 
diff --git a/src/components/common/VnTable.vue b/src/components/common/VnTable.vue
index 85d15bec3..8d130ea6b 100644
--- a/src/components/common/VnTable.vue
+++ b/src/components/common/VnTable.vue
@@ -1,15 +1,13 @@
 <script setup>
 import { ref, onMounted, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useQuasar } from 'quasar';
+import { useRouter } from 'vue-router';
 
 import { useStateStore } from 'stores/useStateStore';
-
 import VnPaginate from 'components/ui/VnPaginate.vue';
 import VnFilterPanel from 'components/ui/VnFilterPanel.vue';
 import VnLv from 'components/ui/VnLv.vue';
 
-import VnBreadcrumbs from 'components/common/VnBreadcrumbs.vue';
 import VnTableColumn from 'components/common/VnTableColumn.vue';
 import VnTableFilter from 'components/common/VnTableFilter.vue';
 
@@ -24,7 +22,7 @@ const $props = defineProps({
     },
     defaultMode: {
         type: String,
-        default: 'list', // 'table', 'list', 'card'
+        default: 'card', // 'table', 'card'
     },
     reponsive: {
         type: Boolean,
@@ -38,49 +36,71 @@ const $props = defineProps({
         type: Boolean,
         default: true,
     },
+    rowClick: {
+        type: Function,
+        default: null,
+    },
+    redirect: {
+        type: String,
+        default: null,
+    },
 });
 const { t } = useI18n();
-const $q = useQuasar();
 const stateStore = useStateStore();
+const router = useRouter();
 
-const mode = ref('list');
+const mode = ref('card');
 const selected = ref([]);
 const params = ref({});
 const VnPaginateRef = ref();
-const tableModes = computed(() => {
-    const modes = [
-        {
-            icon: 'view_column',
-            title: t('table view'),
-            value: 'table',
-        },
-        {
-            icon: 'lists',
-            title: t('list view'),
-            value: 'list',
-        },
-    ];
-    if (!$q.screen.lt.md)
-        modes.push({
-            icon: 'apps',
-            title: t('grid view'),
-            value: 'card',
-            disable: () => console.log('called'),
-        });
-
-    return modes;
-});
+const tableModes = [
+    {
+        icon: 'view_column',
+        title: t('table view'),
+        value: 'table',
+    },
+    {
+        icon: 'grid_view',
+        title: t('grid view'),
+        value: 'card',
+        disable: () => console.log('called'),
+    },
+];
 
 onMounted(() => {
     mode.value = $props.defaultMode;
     stateStore.rightDrawer = true;
 });
 
-function columnsCard(cols) {
-    return Object.values(cols).filter(
-        (col) => col.cardVisible && !col.isId && col.field != 'tableActions'
-    );
-}
+const cardTemplate = computed(() => {
+    let chips = [];
+    let visible = [];
+    let title;
+    let actions;
+    for (const col of $props.columns) {
+        if (col.field == 'tableActions') {
+            actions = col;
+            continue;
+        }
+        if (col.chip) {
+            chips.push(col);
+            continue;
+        }
+        if (col.isTitle) {
+            title = col;
+            continue;
+        }
+        if (col.cardVisible) visible.push(col);
+    }
+    return { chips, title, visible, actions };
+});
+
+const rowClickFunction = computed(() => {
+    if ($props.rowClick) return $props.rowClick;
+    if ($props.redirect)
+        return ({ id }) => router.push({ path: `/${$props.redirect}/${id}` });
+    return null;
+});
 </script>
 <template>
     <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
@@ -90,6 +110,7 @@ function columnsCard(cols) {
                 :data-key="$attrs['data-key']"
                 :search-button="true"
                 v-model:params="params"
+                @remove="(key) => console.log('HA LELGADO', key)"
             >
                 <template #body>
                     <VnTableFilter
@@ -116,23 +137,22 @@ function columnsCard(cols) {
                 class="vnTable"
                 :columns="columns"
                 :rows="rows"
-                row-key="$index"
+                row-key="id"
                 selection="multiple"
                 v-model:selected="selected"
                 :grid="mode != 'table'"
                 table-header-class="bg-grey-8"
-                :card-container-class="
-                    mode == 'list' || $q.screen.lt.md ? 'grid-one' : 'grid-three'
-                "
+                card-container-class="grid-three"
                 flat
                 :style="mode == 'table' && 'max-height: 92vh'"
                 virtual-scroll
                 @virtual-scroll="
                     (event) => event.index > rows.length - 2 && VnPaginateRef.paginate()
                 "
+                @row-click="(_, row) => rowClickFunction(row)"
             >
                 <template #top-left>
-                    <VnBreadcrumbs />
+                    <slot name="top-left"></slot>
                 </template>
                 <template #top-right>
                     <QBtn
@@ -175,77 +195,104 @@ function columnsCard(cols) {
                     </QTd>
                 </template>
                 <template #item="{ row, colsMap }">
-                    <!-- <TransitionGroup name="grid" tag="div" class="grid"> -->
-                    <QCard bordered flat class="row no-wrap justify-between">
-                        <QCardSection vertical class="no-margin no-padding full-width">
-                            <!-- Chips -->
-                            <QCardSection horizontal>
-                                <span v-for="col of colsMap" :key="col.field">
-                                    <QChip
-                                        :class="
-                                            col.color
-                                                ? col.color(row)
-                                                : col.isId == 1
-                                                ? 'bg-primary-light'
-                                                : 'bg-chip-secondary'
-                                        "
-                                        square
-                                        v-if="col.isId"
-                                        :title="t(col.label)"
-                                        class="no-margin"
-                                    >
-                                        {{ row[col.field] }}
-                                    </QChip>
-                                </span>
-                            </QCardSection>
-                            <!-- Fields -->
-                            <QCardSection
-                                class="q-pa-sm q-pr-lg"
-                                :class="
-                                    $q.screen.lt.md || mode == 'card'
-                                        ? 'flex-one'
-                                        : 'flex-three'
-                                "
-                            >
-                                <div
-                                    v-for="col of columnsCard(colsMap)"
-                                    :key="col.field"
-                                    class="fields"
-                                >
-                                    <VnLv
-                                        v-if="
-                                            col.cardVisible &&
-                                            !col.isId &&
-                                            col.field != 'tableActions'
-                                        "
-                                        :label="`${col.label}:`"
-                                    >
-                                        <template #value>
-                                            <VnTableColumn :column="col" :row />
-                                        </template>
-                                    </VnLv>
-                                </div>
-                            </QCardSection>
-                        </QCardSection>
-                        <!-- Actions -->
-                        <QCardSection
-                            v-if="colsMap.tableActions"
-                            class="column flex-center w-10 no-margin q-pa-xs q-gutter-y-xs"
+                    <component
+                        :is="$props.redirect ? 'router-link' : 'span'"
+                        :to="`/${$props.redirect}/` + row.id"
+                    >
+                        <QCard
+                            bordered
+                            flat
+                            class="row no-wrap justify-between cursor-pointer"
+                            @row-click="
+                                (_, row) => {
+                                    $props.rowClick && $props.rowClick(row);
+                                }
+                            "
                         >
-                            <QBtn
-                                v-for="(btn, index) of colsMap.tableActions.actions"
-                                :key="index"
-                                :title="btn.title"
-                                :icon="btn.icon"
-                                :outline="!btn.isPrimary"
-                                size="sm"
-                                class="q-pa-sm"
-                                :class="{ 'bg-primary-light': btn.isPrimary }"
-                                @click.stop="btn.action(row)"
-                            />
-                        </QCardSection>
-                    </QCard>
-                    <!-- </TransitionGroup> -->
+                            <QCardSection
+                                vertical
+                                class="no-margin no-padding full-width"
+                            >
+                                <!-- Chips -->
+                                <QCardSection
+                                    v-if="cardTemplate.chips.length"
+                                    class="no-margin q-px-xs q-py-none"
+                                >
+                                    <span
+                                        v-for="col of cardTemplate.chips"
+                                        :key="col.field"
+                                    >
+                                        <QChip
+                                            v-if="col.chip.condition(row[col.field], row)"
+                                            :title="t(col.label)"
+                                            :class="
+                                                col.chip.color
+                                                    ? col.chip.color(row)
+                                                    : !col.chip.icon &&
+                                                      'bg-chip-secondary'
+                                            "
+                                            dense
+                                            square
+                                        >
+                                            <span v-if="!col.chip.icon">{{
+                                                row[col.field]
+                                            }}</span>
+                                            <QIcon
+                                                v-else
+                                                :name="col.chip.icon"
+                                                color="primary-light"
+                                            />
+                                        </QChip>
+                                    </span>
+                                    <slot name="afterChip" :row="row"></slot>
+                                </QCardSection>
+                                <!-- Title -->
+                                <QCardSection
+                                    v-if="cardTemplate.title"
+                                    class="q-pl-sm q-py-none text-primary-light text-bold text-h6"
+                                >
+                                    {{ row[cardTemplate.title.field] }}
+                                </QCardSection>
+                                <!-- Fields -->
+                                <QCardSection class="q-pl-sm q-pr-lg q-py-xs flex-one">
+                                    <div
+                                        v-for="col of cardTemplate.visible"
+                                        :key="col.field"
+                                        class="fields"
+                                    >
+                                        <VnLv
+                                            v-if="
+                                                col.cardVisible &&
+                                                !col.isChip &&
+                                                col.field != 'tableActions'
+                                            "
+                                            :label="`${col.label}:`"
+                                        >
+                                            <template #value>
+                                                <VnTableColumn :column="col" :row />
+                                            </template>
+                                        </VnLv>
+                                    </div>
+                                </QCardSection>
+                            </QCardSection>
+                            <!-- Actions -->
+                            <QCardSection
+                                v-if="colsMap.tableActions"
+                                class="column flex-center w-10 no-margin q-pa-xs q-gutter-y-xs"
+                            >
+                                <QBtn
+                                    v-for="(btn, index) of colsMap.tableActions.actions"
+                                    :key="index"
+                                    :title="btn.title"
+                                    :icon="btn.icon"
+                                    class="q-pa-xs"
+                                    flat
+                                    :class="{ 'text-primary-light': btn.isPrimary }"
+                                    @click.prevent="btn.action(row)"
+                                />
+                            </QCardSection>
+                        </QCard>
+                    </component>
                 </template>
             </QTable>
         </template>
@@ -262,7 +309,7 @@ function columnsCard(cols) {
 
 .bg-chip-secondary {
     background-color: var(--vn-page-color);
-    color: var(--vn-text-colo);
+    color: var(--vn-text-color);
 }
 .text-primary-light {
     color: var(--primary-light);
@@ -290,7 +337,7 @@ function columnsCard(cols) {
 /* Works on Firefox */
 * {
     scrollbar-width: thin;
-    scrollbar-color: var(--primary-light) transparent;
+    scrollbar-color: grey transparent;
 }
 
 /* Works on Chrome, Edge, and Safari */
@@ -305,52 +352,17 @@ function columnsCard(cols) {
 *::-webkit-scrollbar-thumb {
     background-color: transparent;
     border-radius: 20px;
-    border: 3px solid var(--primary-light);
-}
-
-.grid-one {
-    display: grid;
-    grid-template-columns: repeat(1, 1fr);
-    grid-gap: 10px;
+    border: 3px solid grey;
 }
 
 .grid-three {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(350px, 1px));
+    grid-template-columns: repeat(auto-fit, minmax(350px, max-content));
     max-width: 100%;
-    grid-gap: 12px;
+    grid-gap: 20px;
     margin: 0 auto;
 }
 
-.flex-three {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    div.fields {
-        width: 50%;
-        .vn-label-value {
-            display: flex;
-            justify-content: flex-start;
-            gap: 2%;
-            width: 100%;
-            .label {
-                width: 25%;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-                flex-grow: 0;
-                flex-shrink: 0;
-            }
-            .value {
-                width: 65%;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-            }
-        }
-    }
-}
-
 .flex-one {
     display: flex;
     flex-flow: row wrap;
diff --git a/src/components/common/VnTableColumn.vue b/src/components/common/VnTableColumn.vue
index 7cee83a8e..cfa455046 100644
--- a/src/components/common/VnTableColumn.vue
+++ b/src/components/common/VnTableColumn.vue
@@ -1,11 +1,23 @@
 <template>
-    <component
+    <VnComponent
+        v-if="column.before"
+        :prop="column.before"
+        :components="components"
+        :value="row"
+    />
+    <VnComponent
         v-if="column.component"
-        :is="components[column.component] ?? column.component"
-        v-bind="column.props && column.props(row)"
-        @click="column.event && column.event(row)"
+        :prop="column"
+        :components="components"
+        :value="row"
     />
     <span v-else>{{ dashIfEmpty(row[column.field]) }}</span>
+    <VnComponent
+        v-if="column.after"
+        :prop="column.after"
+        :components="components"
+        :value="row"
+    />
 </template>
 <script setup>
 import { markRaw } from 'vue';
@@ -13,9 +25,10 @@ import { QIcon, QCheckbox } from 'quasar';
 import { dashIfEmpty } from 'src/filters';
 
 /* basic input */
-import VnSelect from 'src/components/common/VnSelect.vue';
-import VnInput from 'src/components/common/VnInput.vue';
-import VnInputDate from 'src/components/common/VnInputDate.vue';
+import VnSelect from 'components/common/VnSelect.vue';
+import VnInput from 'components/common/VnInput.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
+import VnComponent from 'components/common/VnComponent.vue';
 
 const components = {
     input: markRaw(VnInput),
diff --git a/src/components/common/VnTableFilter.vue b/src/components/common/VnTableFilter.vue
index 4a2bfc6e4..e2dd95b1e 100644
--- a/src/components/common/VnTableFilter.vue
+++ b/src/components/common/VnTableFilter.vue
@@ -1,4 +1,5 @@
 <template>
+    {{ model }}
     <div
         v-if="showTitle && column"
         class="q-pt-sm q-px-sm ellipsis"
@@ -69,7 +70,7 @@ const isBasicComponent = computed(
 );
 
 const updateEvent = { 'update:modelValue': addFilter };
-const enterEvent = { 'keyup.enter': addFilter };
+const enterEvent = { 'keyup.enter': () => addFilter(model.value) };
 const components = {
     input: {
         component: markRaw(VnInput),
@@ -111,11 +112,10 @@ const components = {
 //     await arrayData.addFilter(filter);
 // }
 
-async function addFilter(event) {
-    let value = model.value == '' ? null : model.value;
-    if (event && typeof event !== 'object') {
-        value = event;
-    }
+async function addFilter(value) {
+    if (value && typeof value === 'object') value = model.value;
+    console.log('VALUE: ', value);
+    value = value == '' ? null : value;
     let field = columnFilter.value?.field ?? $props.column.field;
     const toFilter = { [field]: value };
 
diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue
index 9cc764938..0895be870 100644
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@@ -8,6 +8,7 @@ import toDate from 'filters/toDate';
 import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
 
 const { t } = useI18n();
+const params = defineModel('params');
 const props = defineProps({
     dataKey: {
         type: String,
@@ -18,11 +19,6 @@ const props = defineProps({
         required: false,
         default: false,
     },
-    params: {
-        type: Object,
-        required: false,
-        default: null,
-    },
     showAll: {
         type: Boolean,
         default: true,
@@ -58,12 +54,10 @@ const store = arrayData.store;
 const userParams = ref({});
 
 onMounted(() => {
-    if (props.params) userParams.value = JSON.parse(JSON.stringify(props.params));
+    if (params.value) userParams.value = JSON.parse(JSON.stringify(params.value));
     if (Object.keys(store.userParams).length > 0) {
         userParams.value = JSON.parse(JSON.stringify(store.userParams));
     }
-
-    console.log('userParams.value: ', userParams.value);
     emit('init', { params: userParams.value });
 });
 
@@ -168,6 +162,9 @@ const customTags = computed(() =>
 
 async function remove(key) {
     userParams.value[key] = null;
+    delete params.value[key];
+    console.log('key: ', key);
+    console.log('params: ', params.value);
     await arrayData.applyFilter({ params: userParams.value });
     emit('remove', key);
 }
diff --git a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
index 0cacf57d9..1afd9357e 100644
--- a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
+++ b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
@@ -10,6 +10,8 @@ import { QBtn, QIcon } from 'quasar';
 import CustomerExtendedListActions from './CustomerExtendedListActions.vue';
 import CustomerExtendedListFilter from './CustomerExtendedListFilter.vue';
 
+import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
+
 import { useStateStore } from 'stores/useStateStore';
 import { toDate } from 'src/filters';
 
@@ -272,7 +274,9 @@ const columns = computed(() => [
         field: 'id',
         label: t('customer.extendedList.tableVisibleColumns.id'),
         name: 'id',
-        isId: 1,
+        chip: {
+            condition: () => true,
+        },
         columnFilter: {
             field: 'search',
             component: 'select',
@@ -287,7 +291,7 @@ const columns = computed(() => [
         field: 'name',
         label: t('customer.extendedList.tableVisibleColumns.name'),
         name: 'name',
-        isId: 2,
+        isTitle: true,
     },
     {
         align: 'left',
@@ -319,6 +323,12 @@ const columns = computed(() => [
         label: t('customer.extendedList.tableVisibleColumns.phone'),
         name: 'phone',
         cardVisible: true,
+        after: {
+            component: VnLinkPhone,
+            props: (prop) => ({
+                'phone-number': prop.phone,
+            }),
+        },
     },
     {
         align: 'left',
@@ -400,77 +410,76 @@ const columns = computed(() => [
         field: 'isActive',
         label: t('customer.extendedList.tableVisibleColumns.isActive'),
         name: 'isActive',
-        format: () => ' ',
+        chip: {
+            color: null,
+            condition: (value) => !value,
+            icon: 'vn:disabled',
+        },
     },
     {
         align: 'left',
         field: 'isVies',
         label: t('customer.extendedList.tableVisibleColumns.isVies'),
         name: 'isVies',
-        format: () => ' ',
     },
     {
         align: 'left',
         field: 'isTaxDataChecked',
         label: t('customer.extendedList.tableVisibleColumns.isTaxDataChecked'),
         name: 'isTaxDataChecked',
-        format: () => ' ',
     },
     {
         align: 'left',
         field: 'isEqualizated',
         label: t('customer.extendedList.tableVisibleColumns.isEqualizated'),
         name: 'isEqualizated',
-        format: () => ' ',
     },
     {
         align: 'left',
         field: 'isFreezed',
         label: t('customer.extendedList.tableVisibleColumns.isFreezed'),
         name: 'isFreezed',
-        format: () => ' ',
+        chip: {
+            color: null,
+            condition: (v, { isActive, isFreezed }) => isActive && isFreezed == true,
+            icon: 'vn:frozen',
+        },
     },
     {
         align: 'left',
         field: 'hasToInvoice',
         label: t('customer.extendedList.tableVisibleColumns.hasToInvoice'),
         name: 'hasToInvoice',
-        format: () => ' ',
     },
     {
         align: 'left',
         field: 'hasToInvoiceByAddress',
         label: t('customer.extendedList.tableVisibleColumns.hasToInvoiceByAddress'),
         name: 'hasToInvoiceByAddress',
-        format: () => ' ',
     },
     {
         align: 'left',
         field: 'isToBeMailed',
         label: t('customer.extendedList.tableVisibleColumns.isToBeMailed'),
         name: 'isToBeMailed',
-        format: () => ' ',
     },
     {
         align: 'left',
         field: 'hasLcr',
         label: t('customer.extendedList.tableVisibleColumns.hasLcr'),
         name: 'hasLcr',
-        format: () => ' ',
     },
     {
         align: 'left',
         field: 'hasCoreVnl',
         label: t('customer.extendedList.tableVisibleColumns.hasCoreVnl'),
         name: 'hasCoreVnl',
-        format: () => ' ',
     },
     {
         align: 'left',
         field: 'hasSepaVnl',
         label: t('customer.extendedList.tableVisibleColumns.hasSepaVnl'),
         name: 'hasSepaVnl',
-        format: () => ' ',
     },
     {
         align: 'right',
@@ -534,7 +543,9 @@ const selectSalesPersonId = (id) => (selectedSalesPersonId.value = id);
         url="Clients/extendedListFilter"
         order="id DESC"
         :columns="columns"
+        default-mode="card"
         auto-load
+        redirect="customer"
     >
         <!--
             default-mode="table"

From 598d116848567cfbf94d12aa77a3b4186b52cba9 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Thu, 16 May 2024 13:38:15 +0200
Subject: [PATCH 013/167] feat: refs #6825 share filters, create popup

---
 src/components/common/VnComponent.vue         | 11 +++-
 src/components/common/VnSelect.vue            |  2 +-
 src/components/common/VnTable.vue             | 63 +++++++++++++------
 src/components/common/VnTableColumn.vue       | 61 ++++++++++++------
 src/components/common/VnTableCreate.vue       | 34 ++++++++++
 src/components/common/VnTableFilter.vue       |  7 +--
 src/components/ui/VnFilterPanel.vue           |  4 +-
 .../ExtendedList/CustomerExtendedList.vue     | 32 +++++++++-
 8 files changed, 160 insertions(+), 54 deletions(-)
 create mode 100644 src/components/common/VnTableCreate.vue

diff --git a/src/components/common/VnComponent.vue b/src/components/common/VnComponent.vue
index 6514c1ba6..e411059c2 100644
--- a/src/components/common/VnComponent.vue
+++ b/src/components/common/VnComponent.vue
@@ -5,13 +5,20 @@
             :is="
                 (components && components[toComponent.component]) ?? toComponent.component
             "
-            v-bind="toComponent.props && toComponent.props(value)"
+            v-bind="
+                typeof toComponent.attrs == 'function'
+                    ? toComponent.attrs(value)
+                    : toComponent.attrs
+            "
             @click="toComponent.event && toComponent.event(value)"
+            v-model="model"
         />
     </span>
 </template>
 <script setup>
-import { computed } from 'vue';
+import { computed, defineModel } from 'vue';
+
+const model = defineModel();
 const $props = defineProps({
     prop: {
         type: Object,
diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index 656beed48..a589f31e5 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -111,7 +111,7 @@ async function fetchFilter(val) {
 
     if (new RegExp(/\d/g).test(val)) key = optionValue.value;
 
-    const where = { [key]: { like: `%${val}%` } };
+    const where = { ...{ [key]: { like: `%${val}%` } }, ...$props.where };
     const fetchOptions = { where, order: sortBy, limit };
     if (fields) fetchOptions.fields = fields;
     return dataRef.value.fetch(fetchOptions);
diff --git a/src/components/common/VnTable.vue b/src/components/common/VnTable.vue
index 8d130ea6b..1c23ac733 100644
--- a/src/components/common/VnTable.vue
+++ b/src/components/common/VnTable.vue
@@ -10,6 +10,7 @@ import VnLv from 'components/ui/VnLv.vue';
 
 import VnTableColumn from 'components/common/VnTableColumn.vue';
 import VnTableFilter from 'components/common/VnTableFilter.vue';
+import VnTableCreate from 'components/common/VnTableCreate.vue';
 
 const $props = defineProps({
     columns: {
@@ -44,6 +45,10 @@ const $props = defineProps({
         type: String,
         default: null,
     },
+    create: {
+        type: Object,
+        default: null,
+    },
 });
 const { t } = useI18n();
 const stateStore = useStateStore();
@@ -53,6 +58,7 @@ const mode = ref('card');
 const selected = ref([]);
 const params = ref({});
 const VnPaginateRef = ref();
+const showForm = ref(false);
 const tableModes = [
     {
         icon: 'view_column',
@@ -73,26 +79,27 @@ onMounted(() => {
 });
 
 const cardTemplate = computed(() => {
-    let chips = [];
-    let visible = [];
+    const chips = [];
+    const visible = [];
+    const create = [];
     let title;
     let actions;
     for (const col of $props.columns) {
         if (col.field == 'tableActions') {
             actions = col;
-            continue;
         }
         if (col.chip) {
             chips.push(col);
-            continue;
         }
         if (col.isTitle) {
             title = col;
-            continue;
+        }
+        if (col.create) {
+            create.push(col);
         }
         if (col.cardVisible) visible.push(col);
     }
-    return { chips, title, visible, actions };
+    return { chips, title, visible, actions, create };
 });
 
 const rowClickFunction = computed(() => {
@@ -105,12 +112,10 @@ const rowClickFunction = computed(() => {
 <template>
     <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
         <QScrollArea class="fit text-grey-8">
-            {{ params }}
             <VnFilterPanel
                 :data-key="$attrs['data-key']"
                 :search-button="true"
-                v-model:params="params"
-                @remove="(key) => console.log('HA LELGADO', key)"
+                v-model="params"
             >
                 <template #body>
                     <VnTableFilter
@@ -118,9 +123,10 @@ const rowClickFunction = computed(() => {
                         :data-key="$attrs['data-key']"
                         v-for="col of columns"
                         :key="col.id"
-                        v-model="params[col.field]"
+                        v-model="params[col.columnFilter?.field ?? col.field]"
                     />
                 </template>
+                <slot name="moreFilterPanel" :params="params" :columns="columns" />
             </VnFilterPanel>
         </QScrollArea>
     </QDrawer>
@@ -203,7 +209,7 @@ const rowClickFunction = computed(() => {
                             bordered
                             flat
                             class="row no-wrap justify-between cursor-pointer"
-                            @row-click="
+                            @click="
                                 (_, row) => {
                                     $props.rowClick && $props.rowClick(row);
                                 }
@@ -254,20 +260,15 @@ const rowClickFunction = computed(() => {
                                     {{ row[cardTemplate.title.field] }}
                                 </QCardSection>
                                 <!-- Fields -->
-                                <QCardSection class="q-pl-sm q-pr-lg q-py-xs flex-one">
+                                <QCardSection
+                                    class="q-pl-sm q-pr-lg q-py-xs flex-one no-pointer-events"
+                                >
                                     <div
                                         v-for="col of cardTemplate.visible"
                                         :key="col.field"
                                         class="fields"
                                     >
-                                        <VnLv
-                                            v-if="
-                                                col.cardVisible &&
-                                                !col.isChip &&
-                                                col.field != 'tableActions'
-                                            "
-                                            :label="`${col.label}:`"
-                                        >
+                                        <VnLv :label="`${col.label}:`">
                                             <template #value>
                                                 <VnTableColumn :column="col" :row />
                                             </template>
@@ -297,6 +298,23 @@ const rowClickFunction = computed(() => {
             </QTable>
         </template>
     </VnPaginate>
+    <!-- AÑADIR EN EL OBJETO LA POSIBILIDAD DE PONER QUE ESE CAMPO SIRVE PARA LA CREACION Y MOSTARLO EN UN POPUP-->
+    <!-- AÑADIR SLOT PARA AÑADIR MAS CAMPOS -->
+    <!-- AÑADIR SLOT SETEAR EL POPUP -->
+    <QPageSticky v-if="create" :offset="[20, 20]">
+        <QBtn @click="showForm = !showForm" color="primary" fab icon="add" />
+        <!-- <QTooltip>
+            {{ t('New client') }}
+        </QTooltip> -->
+    </QPageSticky>
+    <QDialog v-model="showForm" transition-show="scale" transition-hide="scale">
+        <VnTableCreate
+            :columns="cardTemplate.create"
+            :model="$attrs['data-key'] + 'Create'"
+            :create="create"
+        />
+        <!--  v-bind="$attrs.create" -->
+    </QDialog>
 </template>
 <style lang="scss">
 * {
@@ -421,4 +439,9 @@ const rowClickFunction = computed(() => {
 .w-20 {
     width: 20%;
 }
+
+.cursor-text {
+    pointer-events: all;
+    cursor: text;
+}
 </style>
diff --git a/src/components/common/VnTableColumn.vue b/src/components/common/VnTableColumn.vue
index cfa455046..232cf93bb 100644
--- a/src/components/common/VnTableColumn.vue
+++ b/src/components/common/VnTableColumn.vue
@@ -1,26 +1,29 @@
 <template>
     <VnComponent
-        v-if="column.before"
-        :prop="column.before"
+        v-if="col.before"
+        :prop="col.before"
         :components="components"
-        :value="row"
+        :value="value"
     />
+    {{ col?.component }}
     <VnComponent
-        v-if="column.component"
-        :prop="column"
+        v-if="col.component"
+        :prop="col"
         :components="components"
-        :value="row"
+        :value="value"
+        v-model="model"
     />
-    <span v-else>{{ dashIfEmpty(row[column.field]) }}</span>
+    <!--  ?? [defaultComponent]  -->
+    <span v-else>{{ dashIfEmpty(row[col.field]) }}</span>
     <VnComponent
-        v-if="column.after"
-        :prop="column.after"
+        v-if="col.after"
+        :prop="col.after"
         :components="components"
-        :value="row"
+        :value="value"
     />
 </template>
 <script setup>
-import { markRaw } from 'vue';
+import { markRaw, computed, defineModel } from 'vue';
 import { QIcon, QCheckbox } from 'quasar';
 import { dashIfEmpty } from 'src/filters';
 
@@ -30,6 +33,23 @@ import VnInput from 'components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 import VnComponent from 'components/common/VnComponent.vue';
 
+const model = defineModel();
+const $props = defineProps({
+    column: {
+        type: Object,
+        required: true,
+    },
+    row: {
+        type: Object,
+        required: true,
+    },
+    default: {
+        type: [Object, String],
+        required: false,
+        default: null,
+    },
+});
+
 const components = {
     input: markRaw(VnInput),
     number: markRaw(VnInput),
@@ -39,14 +59,15 @@ const components = {
     icon: markRaw(QIcon),
 };
 
-defineProps({
-    column: {
-        type: Object,
-        required: true,
-    },
-    row: {
-        type: Object,
-        required: true,
-    },
+const value = computed(() =>
+    $props.column.format ? $props.column.format($props.row) : $props.row
+);
+
+const col = computed(() => {
+    const newColumn = { ...$props.column };
+    console.log('newColumn: ', newColumn);
+    console.log('newColumn.componen: ', newColumn.component);
+    if ($props.default && !newColumn.component) newColumn.component = $props.default;
+    return newColumn;
 });
 </script>
diff --git a/src/components/common/VnTableCreate.vue b/src/components/common/VnTableCreate.vue
new file mode 100644
index 000000000..1ce642746
--- /dev/null
+++ b/src/components/common/VnTableCreate.vue
@@ -0,0 +1,34 @@
+<script setup>
+import FormModelPopup from 'components/FormModelPopup.vue';
+import VnTableColumn from 'components/common/VnTableColumn.vue';
+
+const $props = defineProps({
+    columns: {
+        type: Object,
+        required: true,
+    },
+    create: {
+        type: Object,
+        required: true,
+    },
+});
+</script>
+<template>
+    <FormModelPopup v-bind="{ ...$attrs, ...$props.create }">
+        <template #form-inputs="{ data }">
+            <VnTableColumn
+                v-for="column of $props.columns"
+                :key="column.field"
+                :column="{
+                    ...(column ?? column.create),
+                    ...{
+                        attrs: column,
+                    },
+                }"
+                :row="{}"
+                default="input"
+                v-model="data[column.field]"
+            />
+        </template>
+    </FormModelPopup>
+</template>
diff --git a/src/components/common/VnTableFilter.vue b/src/components/common/VnTableFilter.vue
index e2dd95b1e..331575538 100644
--- a/src/components/common/VnTableFilter.vue
+++ b/src/components/common/VnTableFilter.vue
@@ -1,5 +1,4 @@
 <template>
-    {{ model }}
     <div
         v-if="showTitle && column"
         class="q-pt-sm q-px-sm ellipsis"
@@ -16,7 +15,7 @@
             v-if="columnFilter?.component"
             :is="isBasicComponent?.component ?? columnFilter.component"
             v-model="model"
-            v-bind="{ ...columnFilter.attrs, ...isBasicComponent?.attrs }"
+            v-bind="{ ...isBasicComponent?.attrs, ...columnFilter.attrs }"
             v-on="isBasicComponent?.event ?? columnFilter.event"
             dense
         />
@@ -57,10 +56,6 @@ const $props = defineProps({
         type: String,
         required: true,
     },
-    addModel: {
-        type: Object,
-        default: () => {},
-    },
 });
 const model = defineModel();
 const arrayData = useArrayData($props.dataKey);
diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue
index 9cadf2ef5..cb7ab5e5f 100644
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@@ -8,7 +8,7 @@ import useRedirect from 'src/composables/useRedirect';
 import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
 
 const { t } = useI18n();
-const params = defineModel('params');
+const params = defineModel();
 const props = defineProps({
     dataKey: {
         type: String,
@@ -165,7 +165,7 @@ const customTags = computed(() =>
 
 async function remove(key) {
     userParams.value[key] = null;
-    delete params.value[key];
+    params.value[key] = undefined;
     console.log('key: ', key);
     console.log('params: ', params.value);
     await arrayData.applyFilter({ params: userParams.value });
diff --git a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
index 1afd9357e..89a63440c 100644
--- a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
+++ b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
@@ -292,6 +292,7 @@ const columns = computed(() => [
         label: t('customer.extendedList.tableVisibleColumns.name'),
         name: 'name',
         isTitle: true,
+        create: true,
     },
     {
         align: 'left',
@@ -301,9 +302,25 @@ const columns = computed(() => [
     },
     {
         align: 'left',
-        field: 'salesPerson',
+        field: 'salesPersonFk',
         label: t('customer.extendedList.tableVisibleColumns.salesPersonFk'),
         name: 'salesPersonFk',
+        columnFilter: {
+            component: 'select',
+            attrs: {
+                url: 'Workers/activeWithInheritedRole',
+                fields: ['id', 'name'],
+                where: { role: 'salesPerson' },
+            },
+        },
+        create: {
+            component: 'select',
+            attrs: {
+                url: 'Workers/activeWithInheritedRole',
+                fields: ['id', 'name'],
+                where: { role: 'salesPerson' },
+            },
+        },
     },
     {
         align: 'left',
@@ -379,7 +396,7 @@ const columns = computed(() => [
         field: 'created',
         label: t('customer.extendedList.tableVisibleColumns.created'),
         name: 'created',
-        format: (value) => toDate(value),
+        format: ({ created }) => toDate(created),
     },
     {
         align: 'left',
@@ -541,11 +558,20 @@ const selectSalesPersonId = (id) => (selectedSalesPersonId.value = id);
     <VnTable
         data-key="CustomerExtendedList"
         url="Clients/extendedListFilter"
+        url-create="Clients/createWithUser"
+        :create="{
+            urlCreate: 'Clients/createWithUser',
+            title: 'Create client',
+            formInitialData: {
+                active: true,
+                isEqualizated: false,
+            },
+        }"
         order="id DESC"
         :columns="columns"
         default-mode="card"
-        auto-load
         redirect="customer"
+        auto-load
     >
         <!--
             default-mode="table"

From d00801b0669a2007e9d0106e9fafee74dfc0dec2 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Fri, 17 May 2024 13:00:57 +0200
Subject: [PATCH 014/167] feat: refs #6825 VnComponent mix component and attrs
 Form to create new row

---
 src/components/common/VnComponent.vue         | 33 +++++--
 src/components/common/VnInput.vue             |  8 +-
 src/components/common/VnSelect.vue            |  8 +-
 src/components/common/VnTable.vue             | 40 +++++++--
 src/components/common/VnTableColumn.vue       | 88 +++++++++++++++----
 src/components/common/VnTableCreate.vue       |  7 +-
 src/components/common/VnTableFilter.vue       | 50 ++++++-----
 src/components/ui/VnFilterPanel.vue           |  4 +-
 src/i18n/locale/en.yml                        |  3 +-
 src/i18n/locale/es.yml                        |  3 +-
 .../ExtendedList/CustomerExtendedList.vue     | 77 ++++++++++++----
 11 files changed, 233 insertions(+), 88 deletions(-)

diff --git a/src/components/common/VnComponent.vue b/src/components/common/VnComponent.vue
index e411059c2..364f8044f 100644
--- a/src/components/common/VnComponent.vue
+++ b/src/components/common/VnComponent.vue
@@ -2,17 +2,12 @@
     <span v-for="toComponent of componentArray" :key="toComponent.field">
         <component
             v-if="toComponent?.component"
-            :is="
-                (components && components[toComponent.component]) ?? toComponent.component
-            "
-            v-bind="
-                typeof toComponent.attrs == 'function'
-                    ? toComponent.attrs(value)
-                    : toComponent.attrs
-            "
-            @click="toComponent.event && toComponent.event(value)"
+            :is="mix(toComponent).component"
+            v-bind="mix(toComponent).attrs"
+            v-on="mix(toComponent).event"
             v-model="model"
         />
+        <!-- @click="toComponent.event && toComponent.event(value)"  -->
     </span>
 </template>
 <script setup>
@@ -40,4 +35,24 @@ const componentArray = computed(() => {
     if (typeof $props.prop === 'object') return [$props.prop];
     return $props.prop;
 });
+
+function mix(toComponent) {
+    const { component, attrs, event } = toComponent;
+    const customComponent = $props.components[component];
+    return {
+        component: customComponent?.component ?? component,
+        attrs: {
+            ...toValueAttrs(attrs),
+            ...toValueAttrs(customComponent?.attrs),
+            ...toComponent,
+            ...toValueAttrs(customComponent?.forceAttrs),
+        },
+        event: event ?? customComponent?.event,
+    };
+}
+
+function toValueAttrs(attrs) {
+    if (!attrs) return;
+    return typeof attrs == 'function' ? attrs($props.value) : attrs;
+}
 </script>
diff --git a/src/components/common/VnInput.vue b/src/components/common/VnInput.vue
index 684770e9c..f37d0dc6d 100644
--- a/src/components/common/VnInput.vue
+++ b/src/components/common/VnInput.vue
@@ -2,7 +2,12 @@
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-const emit = defineEmits(['update:modelValue', 'update:options', 'keyup.enter']);
+const emit = defineEmits([
+    'update:modelValue',
+    'update:options',
+    'keyup.enter',
+    'remove',
+]);
 
 const $props = defineProps({
     modelValue: {
@@ -43,6 +48,7 @@ const onEnterPress = () => {
 
 const handleValue = (val = null) => {
     value.value = val;
+    emit('remove');
 };
 
 const focus = () => {
diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index a589f31e5..9e3e50eed 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -22,6 +22,10 @@ const $props = defineProps({
         type: String,
         default: 'id',
     },
+    optionFilter: {
+        type: String,
+        default: null,
+    },
     url: {
         type: String,
         default: '',
@@ -59,7 +63,7 @@ const $props = defineProps({
 const { t } = useI18n();
 const requiredFieldRule = (val) => val ?? t('globals.fieldRequired');
 
-const { optionLabel, optionValue, options, modelValue } = toRefs($props);
+const { optionLabel, optionValue, optionFilter, options, modelValue } = toRefs($props);
 const myOptions = ref([]);
 const myOptionsOriginal = ref([]);
 const vnSelectRef = ref();
@@ -109,7 +113,7 @@ async function fetchFilter(val) {
     const { fields, sortBy, limit } = $props;
     let key = optionLabel.value;
 
-    if (new RegExp(/\d/g).test(val)) key = optionValue.value;
+    if (new RegExp(/\d/g).test(val)) key = optionFilter.value ?? optionValue.value;
 
     const where = { ...{ [key]: { like: `%${val}%` } }, ...$props.where };
     const fetchOptions = { where, order: sortBy, limit };
diff --git a/src/components/common/VnTable.vue b/src/components/common/VnTable.vue
index 1c23ac733..9cd3ac4a4 100644
--- a/src/components/common/VnTable.vue
+++ b/src/components/common/VnTable.vue
@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
 import { useStateStore } from 'stores/useStateStore';
+import FormModelPopup from 'components/FormModelPopup.vue';
 import VnPaginate from 'components/ui/VnPaginate.vue';
 import VnFilterPanel from 'components/ui/VnFilterPanel.vue';
 import VnLv from 'components/ui/VnLv.vue';
@@ -189,7 +190,7 @@ const rowClickFunction = computed(() => {
                             :column="col"
                             :show-title="true"
                             :data-key="$attrs['data-key']"
-                            v-model="params[col.field]"
+                            v-model="params[col.columnFilter?.field ?? col.field]"
                         />
                     </QTh>
                 </template>
@@ -197,7 +198,12 @@ const rowClickFunction = computed(() => {
                 <template #body-cell="{ col, row }">
                     <!-- Columns -->
                     <QTd auto-width :class="`text-${col.align ?? 'left'}`">
-                        <VnTableColumn :column="col" :row="row" />
+                        <VnTableColumn
+                            :column="col"
+                            :row="row"
+                            :is-editable="false"
+                            v-model="row[col.field]"
+                        />
                     </QTd>
                 </template>
                 <template #item="{ row, colsMap }">
@@ -308,12 +314,24 @@ const rowClickFunction = computed(() => {
         </QTooltip> -->
     </QPageSticky>
     <QDialog v-model="showForm" transition-show="scale" transition-hide="scale">
-        <VnTableCreate
-            :columns="cardTemplate.create"
+        <FormModelPopup
+            v-bind="{ ...$attrs, ...create }"
             :model="$attrs['data-key'] + 'Create'"
-            :create="create"
-        />
-        <!--  v-bind="$attrs.create" -->
+        >
+            <template #form-inputs="{ data }">
+                <div class="grid-create">
+                    <VnTableColumn
+                        v-for="column of cardTemplate.create"
+                        :key="column.field"
+                        :column="column"
+                        :row="{}"
+                        default="input"
+                        v-model="data[column.field]"
+                    />
+                    <slot name="more-create-dialog" :data="data" />
+                </div>
+            </template>
+        </FormModelPopup>
     </QDialog>
 </template>
 <style lang="scss">
@@ -381,6 +399,14 @@ const rowClickFunction = computed(() => {
     margin: 0 auto;
 }
 
+.grid-create {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, max-content));
+    max-width: 100%;
+    grid-gap: 20px;
+    margin: 0 auto;
+}
+
 .flex-one {
     display: flex;
     flex-flow: row wrap;
diff --git a/src/components/common/VnTableColumn.vue b/src/components/common/VnTableColumn.vue
index 232cf93bb..decfe3386 100644
--- a/src/components/common/VnTableColumn.vue
+++ b/src/components/common/VnTableColumn.vue
@@ -4,8 +4,8 @@
         :prop="col.before"
         :components="components"
         :value="value"
+        v-model="model"
     />
-    {{ col?.component }}
     <VnComponent
         v-if="col.component"
         :prop="col"
@@ -13,13 +13,13 @@
         :value="value"
         v-model="model"
     />
-    <!--  ?? [defaultComponent]  -->
     <span v-else>{{ dashIfEmpty(row[col.field]) }}</span>
     <VnComponent
         v-if="col.after"
         :prop="col.after"
         :components="components"
         :value="value"
+        v-model="model"
     />
 </template>
 <script setup>
@@ -45,29 +45,85 @@ const $props = defineProps({
     },
     default: {
         type: [Object, String],
-        required: false,
+        default: null,
+    },
+    componentProp: {
+        type: String,
+        default: null,
+    },
+    isEditable: {
+        type: Boolean,
+        default: true,
+    },
+    components: {
+        type: Object,
         default: null,
     },
 });
 
-const components = {
-    input: markRaw(VnInput),
-    number: markRaw(VnInput),
-    date: markRaw(VnInputDate),
-    checkbox: markRaw(QCheckbox),
-    select: markRaw(VnSelect),
-    icon: markRaw(QIcon),
+const defaultComponents = {
+    input: {
+        component: markRaw(VnInput),
+        attrs: {
+            disable: !$props.isEditable,
+        },
+    },
+    number: {
+        component: markRaw(VnInput),
+        attrs: {
+            disable: !$props.isEditable,
+        },
+    },
+    date: {
+        component: markRaw(VnInputDate),
+        attrs: {
+            disable: !$props.isEditable,
+        },
+    },
+    checkbox: {
+        component: markRaw(QCheckbox),
+        attrs: (prop) => {
+            return {
+                disable: !$props.isEditable,
+                // 'true-value': 1,
+                // 'false-value': 0,
+                // 'model-value': Boolean(prop),
+            };
+        },
+        forceAttrs: {
+            label: null,
+        },
+    },
+    select: {
+        component: markRaw(VnSelect),
+        attrs: {
+            disable: !$props.isEditable,
+        },
+    },
+    icon: {
+        component: markRaw(QIcon),
+    },
 };
 
-const value = computed(() =>
-    $props.column.format ? $props.column.format($props.row) : $props.row
-);
+const value = computed(() => {
+    return $props.column.format ? $props.column.format($props.row) : $props.row;
+});
 
 const col = computed(() => {
-    const newColumn = { ...$props.column };
-    console.log('newColumn: ', newColumn);
-    console.log('newColumn.componen: ', newColumn.component);
+    let newColumn = { ...$props.column };
+    const specific = newColumn[$props.componentProp];
+    if (specific) {
+        newColumn = {
+            ...newColumn,
+            ...specific,
+            ...specific.attrs,
+            ...specific.forceAttrs,
+        };
+    }
     if ($props.default && !newColumn.component) newColumn.component = $props.default;
+
     return newColumn;
 });
+
+const components = computed(() => $props.components ?? defaultComponents);
 </script>
diff --git a/src/components/common/VnTableCreate.vue b/src/components/common/VnTableCreate.vue
index 1ce642746..fb6504f56 100644
--- a/src/components/common/VnTableCreate.vue
+++ b/src/components/common/VnTableCreate.vue
@@ -19,12 +19,7 @@ const $props = defineProps({
             <VnTableColumn
                 v-for="column of $props.columns"
                 :key="column.field"
-                :column="{
-                    ...(column ?? column.create),
-                    ...{
-                        attrs: column,
-                    },
-                }"
+                :column="column"
                 :row="{}"
                 default="input"
                 v-model="data[column.field]"
diff --git a/src/components/common/VnTableFilter.vue b/src/components/common/VnTableFilter.vue
index 331575538..212eab1b1 100644
--- a/src/components/common/VnTableFilter.vue
+++ b/src/components/common/VnTableFilter.vue
@@ -11,24 +11,15 @@
         class="row no-wrap"
     >
         <hr class="q-ma-none divisor-line" v-if="showTitle" />
-        <component
-            v-if="columnFilter?.component"
-            :is="isBasicComponent?.component ?? columnFilter.component"
-            v-model="model"
-            v-bind="{ ...isBasicComponent?.attrs, ...columnFilter.attrs }"
-            v-on="isBasicComponent?.event ?? columnFilter.event"
-            dense
-        />
-        <span v-else class="full-width">
-            <QInput
+        <span class="full-width">
+            <VnTableColumn
+                :column="$props.column"
+                :row="{}"
+                default="input"
                 v-model="model"
-                dense
-                class="q-px-sm q-pb-xs q-pt-none"
-                :label="showTitle ? '' : column.label"
-                @keyup.enter="addFilter"
-            >
-                <template #append> </template>
-            </QInput>
+                :components="components"
+                :component-prop="`columnFilter`"
+            />
         </span>
     </div>
     <div v-else-if="showTitle" style="height: 45px"><!-- fixme! --></div>
@@ -42,6 +33,7 @@ import { useArrayData } from 'composables/useArrayData';
 import VnSelect from 'components/common/VnSelect.vue';
 import VnInput from 'components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
+import VnTableColumn from 'components/common/VnTableColumn.vue';
 
 const $props = defineProps({
     column: {
@@ -60,16 +52,23 @@ const $props = defineProps({
 const model = defineModel();
 const arrayData = useArrayData($props.dataKey);
 const columnFilter = computed(() => $props.column?.columnFilter);
-const isBasicComponent = computed(
-    () => components[$props.column?.columnFilter?.component]
-);
 
 const updateEvent = { 'update:modelValue': addFilter };
-const enterEvent = { 'keyup.enter': () => addFilter(model.value) };
+const enterEvent = {
+    'keyup.enter': () => addFilter(model.value),
+    remove: () => addFilter(null),
+};
 const components = {
     input: {
         component: markRaw(VnInput),
         event: enterEvent,
+        attrs: {
+            class: 'q-px-sm q-pb-xs q-pt-none',
+            dense: true,
+        },
+        forceAttrs: {
+            label: $props.showTitle ? '' : $props.column.label,
+        },
     },
     number: {
         component: markRaw(VnInput),
@@ -82,12 +81,18 @@ const components = {
     checkbox: {
         component: markRaw(QCheckbox),
         event: updateEvent,
+        forceAttrs: {
+            label: $props.showTitle ? '' : $props.column.label,
+        },
     },
     select: {
         component: markRaw(VnSelect),
         event: updateEvent,
         attrs: {
-            class: 'full-width q-px-sm',
+            class: 'q-px-md q-pb-xs q-pt-none',
+            dense: true,
+        },
+        forceAttrs: {
             label: $props.showTitle ? '' : $props.column.label,
         },
     },
@@ -109,7 +114,6 @@ const components = {
 
 async function addFilter(value) {
     if (value && typeof value === 'object') value = model.value;
-    console.log('VALUE: ', value);
     value = value == '' ? null : value;
     let field = columnFilter.value?.field ?? $props.column.field;
     const toFilter = { [field]: value };
diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue
index cb7ab5e5f..c37652b15 100644
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@@ -58,6 +58,7 @@ onMounted(() => {
     if (params.value) userParams.value = JSON.parse(JSON.stringify(params.value));
     if (Object.keys(store.userParams).length > 0) {
         userParams.value = JSON.parse(JSON.stringify(store.userParams));
+        params.value = { ...params.value, ...userParams.value };
     }
     emit('init', { params: userParams.value });
 });
@@ -147,7 +148,6 @@ async function clearFilters() {
 }
 
 const tagsList = computed(() => {
-    console.log('userParams.value: ', userParams.value);
     return Object.entries(userParams.value)
         .filter(([key, value]) => value && !(props.hiddenTags || []).includes(key))
         .map(([key, value]) => ({
@@ -166,8 +166,6 @@ const customTags = computed(() =>
 async function remove(key) {
     userParams.value[key] = null;
     params.value[key] = undefined;
-    console.log('key: ', key);
-    console.log('params: ', params.value);
     await arrayData.applyFilter({ params: userParams.value });
     emit('remove', key);
 }
diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index 7dc5777bf..b90cf479b 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -270,7 +270,8 @@ customer:
     extendedList:
         tableVisibleColumns:
             id: Identifier
-            name: Name
+            name: Comercial name
+            socialName: Business name
             fi: Tax number
             salesPersonFk: Salesperson
             credit: Credit
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index ad7c8d4aa..6bd7fb2cd 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -268,7 +268,8 @@ customer:
     extendedList:
         tableVisibleColumns:
             id: Identificador
-            name: Nombre
+            name: Nombre Comercial
+            socialName: Razón social
             fi: NIF / CIF
             salesPersonFk: Comercial
             credit: Crédito
diff --git a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
index 89a63440c..44e083db6 100644
--- a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
+++ b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
@@ -3,6 +3,7 @@ import { ref, computed, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import VnTable from 'components/common/VnTable.vue';
+import VnLocation from 'src/components/common/VnLocation.vue';
 import CustomerSummary from '../Card/CustomerSummary.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 
@@ -30,6 +31,7 @@ const selectedCustomerId = ref(0);
 const selectedSalesPersonId = ref(0);
 const allColumnNames = ref([]);
 const visibleColumns = ref([]);
+const postcodesOptions = ref([]);
 
 const tableColumnComponents = {
     customerStatus: {
@@ -278,8 +280,8 @@ const columns = computed(() => [
             condition: () => true,
         },
         columnFilter: {
-            field: 'search',
             component: 'select',
+            field: 'search',
             attrs: {
                 url: 'Clients',
                 fields: ['id', 'name'],
@@ -294,33 +296,32 @@ const columns = computed(() => [
         isTitle: true,
         create: true,
     },
+    {
+        align: 'left',
+        field: 'socialName',
+        label: t('customer.extendedList.tableVisibleColumns.socialName'),
+        isTitle: true,
+        create: true,
+    },
     {
         align: 'left',
         field: 'fi',
         label: t('customer.extendedList.tableVisibleColumns.fi'),
         name: 'fi',
+        create: true,
     },
     {
         align: 'left',
         field: 'salesPersonFk',
         label: t('customer.extendedList.tableVisibleColumns.salesPersonFk'),
         name: 'salesPersonFk',
-        columnFilter: {
-            component: 'select',
-            attrs: {
-                url: 'Workers/activeWithInheritedRole',
-                fields: ['id', 'name'],
-                where: { role: 'salesPerson' },
-            },
-        },
-        create: {
-            component: 'select',
-            attrs: {
-                url: 'Workers/activeWithInheritedRole',
-                fields: ['id', 'name'],
-                where: { role: 'salesPerson' },
-            },
+        component: 'select',
+        attrs: {
+            url: 'Workers/activeWithInheritedRole',
+            fields: ['id', 'name'],
+            where: { role: 'salesPerson' },
         },
+        create: true,
     },
     {
         align: 'left',
@@ -359,6 +360,7 @@ const columns = computed(() => [
         field: 'street',
         label: t('customer.extendedList.tableVisibleColumns.street'),
         name: 'street',
+        create: true,
     },
     {
         align: 'left',
@@ -400,9 +402,16 @@ const columns = computed(() => [
     },
     {
         align: 'left',
-        field: 'businessType',
+        field: 'businessTypeFk',
         label: t('customer.extendedList.tableVisibleColumns.businessTypeFk'),
         name: 'businessTypeFk',
+        create: true,
+        component: 'select',
+        attrs: {
+            url: 'BusinessTypes',
+            optionLabel: 'description',
+            optionValue: 'code',
+        },
     },
     {
         align: 'left',
@@ -450,6 +459,8 @@ const columns = computed(() => [
         field: 'isEqualizated',
         label: t('customer.extendedList.tableVisibleColumns.isEqualizated'),
         name: 'isEqualizated',
+        component: 'checkbox',
+        created: true,
     },
     {
         align: 'left',
@@ -473,6 +484,7 @@ const columns = computed(() => [
         field: 'hasToInvoiceByAddress',
         label: t('customer.extendedList.tableVisibleColumns.hasToInvoiceByAddress'),
         name: 'hasToInvoiceByAddress',
+        component: 'checkbox',
     },
     {
         align: 'left',
@@ -530,6 +542,14 @@ const navigateToTravelId = (id) => router.push({ path: `/customer/${id}` });
 const selectCustomerId = (id) => (selectedCustomerId.value = id);
 
 const selectSalesPersonId = (id) => (selectedSalesPersonId.value = id);
+
+function handleLocation(data, location) {
+    const { town, code, provinceFk, countryFk } = location ?? {};
+    data.postcode = code;
+    data.city = town;
+    data.provinceFk = provinceFk;
+    data.countryFk = countryFk;
+}
 </script>
 
 <template>
@@ -569,10 +589,29 @@ const selectSalesPersonId = (id) => (selectedSalesPersonId.value = id);
         }"
         order="id DESC"
         :columns="columns"
-        default-mode="card"
-        redirect="customer"
+        default-mode="table"
         auto-load
     >
+        <template #more-create-dialog="{ data }">
+            <QInput :label="t('Email')" clearable type="email" v-model="data.email">
+                <template #append>
+                    <QIcon name="info" class="cursor-info">
+                        <QTooltip max-width="400px">{{
+                            t('customer.basicData.youCanSaveMultipleEmails')
+                        }}</QTooltip>
+                    </QIcon>
+                </template>
+            </QInput>
+            <QInput v-model="data.userName" :label="t('Web user')" />
+            <VnLocation
+                :roles-allowed-to-create="['deliveryAssistant']"
+                :options="postcodesOptions"
+                v-model="data.location"
+                @update:model-value="(location) => handleLocation(data, location)"
+            >
+            </VnLocation>
+        </template>
+        <!-- redirect="customer" -->
         <!--
             default-mode="table"
             <template #body-cell="{ col, value }">

From a3a4e9b570551902a47ca02a927da300b172dc12 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Fri, 17 May 2024 15:13:56 +0200
Subject: [PATCH 015/167] feat(VnTable): refs #6825 fix ellipsis and add titles

---
 src/components/common/VnTable.vue       | 37 ++++++++++++++-----------
 src/components/common/VnTableColumn.vue |  2 +-
 2 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/src/components/common/VnTable.vue b/src/components/common/VnTable.vue
index 9cd3ac4a4..56f3b1744 100644
--- a/src/components/common/VnTable.vue
+++ b/src/components/common/VnTable.vue
@@ -221,10 +221,7 @@ const rowClickFunction = computed(() => {
                                 }
                             "
                         >
-                            <QCardSection
-                                vertical
-                                class="no-margin no-padding full-width"
-                            >
+                            <QCardSection vertical class="no-margin no-padding w-80">
                                 <!-- Chips -->
                                 <QCardSection
                                     v-if="cardTemplate.chips.length"
@@ -261,14 +258,14 @@ const rowClickFunction = computed(() => {
                                 <!-- Title -->
                                 <QCardSection
                                     v-if="cardTemplate.title"
-                                    class="q-pl-sm q-py-none text-primary-light text-bold text-h6"
+                                    class="q-pl-sm q-py-none text-primary-light text-bold text-h6 cardEllipsis"
                                 >
-                                    {{ row[cardTemplate.title.field] }}
+                                    <span :title="row[cardTemplate.title.field]">{{
+                                        row[cardTemplate.title.field]
+                                    }}</span>
                                 </QCardSection>
                                 <!-- Fields -->
-                                <QCardSection
-                                    class="q-pl-sm q-pr-lg q-py-xs flex-one no-pointer-events"
-                                >
+                                <QCardSection class="q-pl-sm q-pr-lg q-py-xs flex-one">
                                     <div
                                         v-for="col of cardTemplate.visible"
                                         :key="col.field"
@@ -304,14 +301,11 @@ const rowClickFunction = computed(() => {
             </QTable>
         </template>
     </VnPaginate>
-    <!-- AÑADIR EN EL OBJETO LA POSIBILIDAD DE PONER QUE ESE CAMPO SIRVE PARA LA CREACION Y MOSTARLO EN UN POPUP-->
-    <!-- AÑADIR SLOT PARA AÑADIR MAS CAMPOS -->
-    <!-- AÑADIR SLOT SETEAR EL POPUP -->
     <QPageSticky v-if="create" :offset="[20, 20]">
         <QBtn @click="showForm = !showForm" color="primary" fab icon="add" />
-        <!-- <QTooltip>
-            {{ t('New client') }}
-        </QTooltip> -->
+        <QTooltip>
+            {{ create.title }}
+        </QTooltip>
     </QPageSticky>
     <QDialog v-model="showForm" transition-show="scale" transition-hide="scale">
         <FormModelPopup
@@ -393,7 +387,7 @@ const rowClickFunction = computed(() => {
 
 .grid-three {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(350px, max-content));
+    grid-template-columns: repeat(auto-fit, minmax(400px, max-content));
     max-width: 100%;
     grid-gap: 20px;
     margin: 0 auto;
@@ -456,6 +450,17 @@ const rowClickFunction = computed(() => {
 .vn-label-value {
     display: flex;
     flex-direction: row;
+    .value {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}
+
+.cardEllipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .w-80 {
diff --git a/src/components/common/VnTableColumn.vue b/src/components/common/VnTableColumn.vue
index decfe3386..2f8712b1a 100644
--- a/src/components/common/VnTableColumn.vue
+++ b/src/components/common/VnTableColumn.vue
@@ -13,7 +13,7 @@
         :value="value"
         v-model="model"
     />
-    <span v-else>{{ dashIfEmpty(row[col.field]) }}</span>
+    <span :title="row[col.field]" v-else>{{ dashIfEmpty(row[col.field]) }}</span>
     <VnComponent
         v-if="col.after"
         :prop="col.after"

From 478fe23cec0ba2460608827dd2caaf642918a185 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Mon, 20 May 2024 13:58:47 +0200
Subject: [PATCH 016/167] fix(VnTable): refs #6825 fix events and css

---
 src/components/common/VnTable.vue             | 71 +++++++++++--------
 src/css/app.scss                              |  7 ++
 src/css/quasar.variables.scss                 |  2 +-
 .../ExtendedList/CustomerExtendedList.vue     |  8 +--
 4 files changed, 49 insertions(+), 39 deletions(-)

diff --git a/src/components/common/VnTable.vue b/src/components/common/VnTable.vue
index 56f3b1744..0216c0063 100644
--- a/src/components/common/VnTable.vue
+++ b/src/components/common/VnTable.vue
@@ -107,12 +107,17 @@ const rowClickFunction = computed(() => {
     if ($props.rowClick) return $props.rowClick;
     if ($props.redirect)
         return ({ id }) => router.push({ path: `/${$props.redirect}/${id}` });
-    return null;
+    return () => {};
 });
+
+const stopEventPropagation = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+};
 </script>
 <template>
     <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <QScrollArea class="fit text-grey-8">
+        <QScrollArea class="fit">
             <VnFilterPanel
                 :data-key="$attrs['data-key']"
                 :search-button="true"
@@ -148,7 +153,7 @@ const rowClickFunction = computed(() => {
                 selection="multiple"
                 v-model:selected="selected"
                 :grid="mode != 'table'"
-                table-header-class="bg-grey-8"
+                table-header-class="bg-header"
                 card-container-class="grid-three"
                 flat
                 :style="mode == 'table' && 'max-height: 92vh'"
@@ -165,21 +170,21 @@ const rowClickFunction = computed(() => {
                     <QBtn
                         icon="visibility"
                         title="asd"
-                        class="bg-dark q-mr-md"
+                        class="bg-vn-section-color q-mr-md"
                         dense
                         v-if="mode == 'table'"
                     />
                     <QBtnToggle
                         v-model="mode"
                         toggle-color="primary"
-                        class="bg-dark"
+                        class="bg-vn-section-color"
                         dense
                         :options="tableModes"
                     />
                     <QBtn
                         icon="filter_alt"
                         title="asd"
-                        class="bg-dark q-ml-md"
+                        class="bg-vn-section-color q-ml-md"
                         dense
                         @click="stateStore.toggleRightDrawer()"
                     />
@@ -230,6 +235,8 @@ const rowClickFunction = computed(() => {
                                     <span
                                         v-for="col of cardTemplate.chips"
                                         :key="col.field"
+                                        @click="stopEventPropagation($event)"
+                                        class="cursor-text"
                                     >
                                         <QChip
                                             v-if="col.chip.condition(row[col.field], row)"
@@ -260,9 +267,12 @@ const rowClickFunction = computed(() => {
                                     v-if="cardTemplate.title"
                                     class="q-pl-sm q-py-none text-primary-light text-bold text-h6 cardEllipsis"
                                 >
-                                    <span :title="row[cardTemplate.title.field]">{{
-                                        row[cardTemplate.title.field]
-                                    }}</span>
+                                    <span
+                                        :title="row[cardTemplate.title.field]"
+                                        @click="stopEventPropagation($event)"
+                                        class="cursor-text"
+                                        >{{ row[cardTemplate.title.field] }}</span
+                                    >
                                 </QCardSection>
                                 <!-- Fields -->
                                 <QCardSection class="q-pl-sm q-pr-lg q-py-xs flex-one">
@@ -273,7 +283,11 @@ const rowClickFunction = computed(() => {
                                     >
                                         <VnLv :label="`${col.label}:`">
                                             <template #value>
-                                                <VnTableColumn :column="col" :row />
+                                                <span
+                                                    @click="stopEventPropagation($event)"
+                                                >
+                                                    <VnTableColumn :column="col" :row />
+                                                </span>
                                             </template>
                                         </VnLv>
                                     </div>
@@ -283,6 +297,7 @@ const rowClickFunction = computed(() => {
                             <QCardSection
                                 v-if="colsMap.tableActions"
                                 class="column flex-center w-10 no-margin q-pa-xs q-gutter-y-xs"
+                                @click="stopEventPropagation($event)"
                             >
                                 <QBtn
                                     v-for="(btn, index) of colsMap.tableActions.actions"
@@ -292,7 +307,7 @@ const rowClickFunction = computed(() => {
                                     class="q-pa-xs"
                                     flat
                                     :class="{ 'text-primary-light': btn.isPrimary }"
-                                    @click.prevent="btn.action(row)"
+                                    @click="btn.action(row)"
                                 />
                             </QCardSection>
                         </QCard>
@@ -329,39 +344,29 @@ const rowClickFunction = computed(() => {
     </QDialog>
 </template>
 <style lang="scss">
-* {
-    --primary-light: #f5b351;
-}
-.bg-primary-light {
-    background-color: var(--primary-light);
-    color: var(--vn-section-color);
-}
-
 .bg-chip-secondary {
     background-color: var(--vn-page-color);
     color: var(--vn-text-color);
 }
-.text-primary-light {
-    color: var(--primary-light);
-}
-.q-checkbox {
-    & .q-checkbox__label {
-        color: var(--primary-light); /* use global*/
-    }
-    & .q-checkbox__inner {
-        color: var(--primary-light); /* use global*/
+
+.bg-header {
+    background-color: #5d5d5d;
+    color: var(--vn-page-color);
+    * {
+        font-weight: bold !important;
     }
 }
+
 .q-table--dark .q-table__bottom,
 .q-table--dark thead,
 .q-table--dark tr,
 .q-table--dark th,
 .q-table--dark td {
-    border-color: #222222; /* use global*/
+    border-color: #222222;
 }
 
 .q-table__container > div:first-child {
-    background-color: #222222;
+    background-color: var(--vn-page-color);
 }
 
 /* Works on Firefox */
@@ -382,7 +387,7 @@ const rowClickFunction = computed(() => {
 *::-webkit-scrollbar-thumb {
     background-color: transparent;
     border-radius: 20px;
-    border: 3px solid grey;
+    border: 3px solid var(--vn-page-color);
 }
 
 .grid-three {
@@ -454,6 +459,9 @@ const rowClickFunction = computed(() => {
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
+        pointer-events: all;
+        cursor: text;
+        user-select: all;
     }
 }
 
@@ -474,5 +482,6 @@ const rowClickFunction = computed(() => {
 .cursor-text {
     pointer-events: all;
     cursor: text;
+    user-select: all;
 }
 </style>
diff --git a/src/css/app.scss b/src/css/app.scss
index 2e524e693..819c27178 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -115,6 +115,13 @@ select:-webkit-autofill {
     background-color: var(--vn-accent-color);
 }
 
+.text-primary-light {
+    color: $primary-light !important;
+}
+.bg-primary-light {
+    background: $primary-light !important;
+}
+
 .fill-icon {
     font-variation-settings: 'FILL' 1;
 }
diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
index 899ae4397..304c8b821 100644
--- a/src/css/quasar.variables.scss
+++ b/src/css/quasar.variables.scss
@@ -28,7 +28,7 @@ $color-link: #66bfff;
 $color-spacer-light: #a3a3a31f;
 $color-spacer: #7979794d;
 $border-thin-light: 1px solid $color-spacer-light;
-$primary-light: lighten($primary, 35%);
+$primary-light: #f5b351;
 $dark-shadow-color: black;
 $layout-shadow-dark: 0 0 10px 2px #00000033, 0 0px 10px #0000003d;
 $spacing-md: 16px;
diff --git a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
index 44e083db6..b96b19044 100644
--- a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
+++ b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
@@ -264,13 +264,6 @@ const redirectToCreateView = (row) => {
 };
 
 const columns = computed(() => [
-    {
-        align: 'left',
-        field: 'customerStatus',
-        label: 'customerStatus',
-        name: 'customerStatus',
-        columnFilter: false,
-    },
     {
         align: 'left',
         field: 'id',
@@ -590,6 +583,7 @@ function handleLocation(data, location) {
         order="id DESC"
         :columns="columns"
         default-mode="table"
+        redirect="customer"
         auto-load
     >
         <template #more-create-dialog="{ data }">

From 65c22a710393f2fa0130f9fa813efad876240669 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Mon, 20 May 2024 15:08:34 +0200
Subject: [PATCH 017/167] feat(VnTable): refs #6825 VnTableChip component

---
 src/components/common/VnTable.vue             | 76 ++++++++-----------
 src/components/common/VnTableChip.vue         | 53 +++++++++++++
 src/components/common/VnTableColumn.vue       | 48 ++++++------
 src/components/common/VnTableCreate.vue       | 29 -------
 .../ExtendedList/CustomerExtendedList.vue     |  2 +-
 5 files changed, 111 insertions(+), 97 deletions(-)
 create mode 100644 src/components/common/VnTableChip.vue
 delete mode 100644 src/components/common/VnTableCreate.vue

diff --git a/src/components/common/VnTable.vue b/src/components/common/VnTable.vue
index 0216c0063..1b8f0b2ea 100644
--- a/src/components/common/VnTable.vue
+++ b/src/components/common/VnTable.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, computed } from 'vue';
+import { ref, onMounted, computed, defineModel } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
@@ -11,17 +11,10 @@ import VnLv from 'components/ui/VnLv.vue';
 
 import VnTableColumn from 'components/common/VnTableColumn.vue';
 import VnTableFilter from 'components/common/VnTableFilter.vue';
-import VnTableCreate from 'components/common/VnTableCreate.vue';
+import VnTableChip from 'components/common/VnTableChip.vue';
 
+const columns = defineModel();
 const $props = defineProps({
-    columns: {
-        type: Array,
-        required: true,
-    },
-    columnsTable: {
-        type: Array,
-        default: () => [],
-    },
     defaultMode: {
         type: String,
         default: 'card', // 'table', 'card'
@@ -85,11 +78,12 @@ const cardTemplate = computed(() => {
     const create = [];
     let title;
     let actions;
-    for (const col of $props.columns) {
+    for (const col of columns.value) {
         if (col.field == 'tableActions') {
             actions = col;
         }
         if (col.chip) {
+            if (!chips.length) setChipColumn();
             chips.push(col);
         }
         if (col.isTitle) {
@@ -110,10 +104,22 @@ const rowClickFunction = computed(() => {
     return () => {};
 });
 
-const stopEventPropagation = (event) => {
+function stopEventPropagation(event) {
     event.preventDefault();
     event.stopPropagation();
-};
+}
+
+function setChipColumn() {
+    console.log('SETTING', columns.value);
+    columns.value.unshift({
+        align: 'left',
+        field: 'status',
+        label: t('status'),
+        name: 'status',
+        customFilter: false,
+    });
+    console.log('SETTING', columns.value);
+}
 </script>
 <template>
     <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
@@ -199,7 +205,15 @@ const stopEventPropagation = (event) => {
                         />
                     </QTh>
                 </template>
-
+                <template #body-cell-chips="{ col }">
+                    <QTd auto-width :class="`text-${col.align ?? 'left'}`">
+                        <VnTableChip :columns="cardTemplate.chips" :row="row">
+                            <template #afterChip>
+                                <slot name="afterChip" :row="row"></slot>
+                            </template>
+                        </VnTableChip>
+                    </QTd>
+                </template>
                 <template #body-cell="{ col, row }">
                     <!-- Columns -->
                     <QTd auto-width :class="`text-${col.align ?? 'left'}`">
@@ -232,35 +246,11 @@ const stopEventPropagation = (event) => {
                                     v-if="cardTemplate.chips.length"
                                     class="no-margin q-px-xs q-py-none"
                                 >
-                                    <span
-                                        v-for="col of cardTemplate.chips"
-                                        :key="col.field"
-                                        @click="stopEventPropagation($event)"
-                                        class="cursor-text"
-                                    >
-                                        <QChip
-                                            v-if="col.chip.condition(row[col.field], row)"
-                                            :title="t(col.label)"
-                                            :class="
-                                                col.chip.color
-                                                    ? col.chip.color(row)
-                                                    : !col.chip.icon &&
-                                                      'bg-chip-secondary'
-                                            "
-                                            dense
-                                            square
-                                        >
-                                            <span v-if="!col.chip.icon">{{
-                                                row[col.field]
-                                            }}</span>
-                                            <QIcon
-                                                v-else
-                                                :name="col.chip.icon"
-                                                color="primary-light"
-                                            />
-                                        </QChip>
-                                    </span>
-                                    <slot name="afterChip" :row="row"></slot>
+                                    <VnTableChip :columns="cardTemplate.chips" :row="row">
+                                        <template #afterChip>
+                                            <slot name="afterChip" :row="row"></slot>
+                                        </template>
+                                    </VnTableChip>
                                 </QCardSection>
                                 <!-- Title -->
                                 <QCardSection
diff --git a/src/components/common/VnTableChip.vue b/src/components/common/VnTableChip.vue
new file mode 100644
index 000000000..c4a5a602a
--- /dev/null
+++ b/src/components/common/VnTableChip.vue
@@ -0,0 +1,53 @@
+<script setup>
+defineProps({
+    columns: {
+        type: Array,
+        required: true,
+    },
+    row: {
+        type: Object,
+        default: null,
+    },
+});
+
+function stopEventPropagation(event) {
+    event.preventDefault();
+    event.stopPropagation();
+}
+</script>
+<template>
+    <span
+        v-for="col of columns"
+        :key="col.field"
+        @click="stopEventPropagation($event)"
+        class="cursor-text"
+    >
+        <QChip
+            v-if="col.chip.condition(row[col.field], row)"
+            :title="col.label"
+            :class="
+                col.chip.color
+                    ? col.chip.color(row)
+                    : !col.chip.icon && 'bg-chip-secondary'
+            "
+            dense
+            square
+        >
+            <span v-if="!col.chip.icon">{{ row[col.field] }}</span>
+            <QIcon v-else :name="col.chip.icon" color="primary-light" />
+        </QChip>
+    </span>
+    <slot name="afterChip" :row="row"></slot>
+</template>
+<style lang="scss">
+.bg-chip-secondary {
+    background-color: var(--vn-page-color);
+    color: var(--vn-text-color);
+}
+
+.cursor-text {
+    pointer-events: all;
+    cursor: text;
+    user-select: all;
+}
+</style>
diff --git a/src/components/common/VnTableColumn.vue b/src/components/common/VnTableColumn.vue
index 2f8712b1a..62db2a76a 100644
--- a/src/components/common/VnTableColumn.vue
+++ b/src/components/common/VnTableColumn.vue
@@ -1,27 +1,3 @@
-<template>
-    <VnComponent
-        v-if="col.before"
-        :prop="col.before"
-        :components="components"
-        :value="value"
-        v-model="model"
-    />
-    <VnComponent
-        v-if="col.component"
-        :prop="col"
-        :components="components"
-        :value="value"
-        v-model="model"
-    />
-    <span :title="row[col.field]" v-else>{{ dashIfEmpty(row[col.field]) }}</span>
-    <VnComponent
-        v-if="col.after"
-        :prop="col.after"
-        :components="components"
-        :value="value"
-        v-model="model"
-    />
-</template>
 <script setup>
 import { markRaw, computed, defineModel } from 'vue';
 import { QIcon, QCheckbox } from 'quasar';
@@ -127,3 +103,27 @@ const col = computed(() => {
 
 const components = computed(() => $props.components ?? defaultComponents);
 </script>
+<template>
+    <VnComponent
+        v-if="col.before"
+        :prop="col.before"
+        :components="components"
+        :value="value"
+        v-model="model"
+    />
+    <VnComponent
+        v-if="col.component"
+        :prop="col"
+        :components="components"
+        :value="value"
+        v-model="model"
+    />
+    <span :title="row[col.field]" v-else>{{ dashIfEmpty(row[col.field]) }}</span>
+    <VnComponent
+        v-if="col.after"
+        :prop="col.after"
+        :components="components"
+        :value="value"
+        v-model="model"
+    />
+</template>
diff --git a/src/components/common/VnTableCreate.vue b/src/components/common/VnTableCreate.vue
deleted file mode 100644
index fb6504f56..000000000
--- a/src/components/common/VnTableCreate.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<script setup>
-import FormModelPopup from 'components/FormModelPopup.vue';
-import VnTableColumn from 'components/common/VnTableColumn.vue';
-
-const $props = defineProps({
-    columns: {
-        type: Object,
-        required: true,
-    },
-    create: {
-        type: Object,
-        required: true,
-    },
-});
-</script>
-<template>
-    <FormModelPopup v-bind="{ ...$attrs, ...$props.create }">
-        <template #form-inputs="{ data }">
-            <VnTableColumn
-                v-for="column of $props.columns"
-                :key="column.field"
-                :column="column"
-                :row="{}"
-                default="input"
-                v-model="data[column.field]"
-            />
-        </template>
-    </FormModelPopup>
-</template>
diff --git a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
index b96b19044..f68a4e6a9 100644
--- a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
+++ b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
@@ -581,7 +581,7 @@ function handleLocation(data, location) {
             },
         }"
         order="id DESC"
-        :columns="columns"
+        v-model="columns"
         default-mode="table"
         redirect="customer"
         auto-load

From a715122a66d16c9fad461426197c89a28fa5b92c Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Tue, 21 May 2024 08:50:05 +0200
Subject: [PATCH 018/167] feat(VnTable): refs #6825 dinamic columns

---
 src/components/common/VnTable.vue             | 107 +++++++++++-------
 .../ExtendedList/CustomerExtendedList.vue     |   3 +-
 2 files changed, 66 insertions(+), 44 deletions(-)

diff --git a/src/components/common/VnTable.vue b/src/components/common/VnTable.vue
index 1b8f0b2ea..1f4af98cf 100644
--- a/src/components/common/VnTable.vue
+++ b/src/components/common/VnTable.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, computed, defineModel } from 'vue';
+import { ref, onMounted, computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
@@ -13,13 +13,16 @@ import VnTableColumn from 'components/common/VnTableColumn.vue';
 import VnTableFilter from 'components/common/VnTableFilter.vue';
 import VnTableChip from 'components/common/VnTableChip.vue';
 
-const columns = defineModel();
 const $props = defineProps({
+    columns: {
+        type: Array,
+        required: true,
+    },
     defaultMode: {
         type: String,
         default: 'card', // 'table', 'card'
     },
-    reponsive: {
+    responsive: {
         type: Boolean,
         default: true,
     },
@@ -53,6 +56,7 @@ const selected = ref([]);
 const params = ref({});
 const VnPaginateRef = ref();
 const showForm = ref(false);
+const splittedColumns = ref({ columns: [] });
 const tableModes = [
     {
         icon: 'view_column',
@@ -72,30 +76,52 @@ onMounted(() => {
     stateStore.rightDrawer = true;
 });
 
-const cardTemplate = computed(() => {
-    const chips = [];
-    const visible = [];
-    const create = [];
-    let title;
-    let actions;
-    for (const col of columns.value) {
+watch(
+    () => $props.columns,
+    (value) => splitColumns(value),
+    { immediate: true }
+);
+
+function splitColumns(columns) {
+    splittedColumns.value = {
+        columns: [],
+        chips: [],
+        create: [],
+        visible: [],
+    };
+
+    for (const col of columns) {
+        if (!col) continue;
         if (col.field == 'tableActions') {
-            actions = col;
+            splittedColumns.value.actions = col;
         }
         if (col.chip) {
-            if (!chips.length) setChipColumn();
-            chips.push(col);
+            splittedColumns.value.chips.push(col);
         }
         if (col.isTitle) {
-            title = col;
+            splittedColumns.value.title = col;
         }
         if (col.create) {
-            create.push(col);
+            splittedColumns.value.create.push(col);
         }
-        if (col.cardVisible) visible.push(col);
+        if (col.cardVisible) splittedColumns.value.visible.push(col);
+        splittedColumns.value.columns.push(col);
     }
-    return { chips, title, visible, actions, create };
-});
+    // Status column
+    if (splittedColumns.value.chips.length) {
+        splittedColumns.value.columnChips = splittedColumns.value.chips.filter(
+            (c) => !c.isId
+        );
+        if (splittedColumns.value.columnChips.length)
+            splittedColumns.value.columns.unshift({
+                align: 'left',
+                field: 'status',
+                label: t('status'),
+                name: 'status',
+                customFilter: false,
+            });
+    }
+}
 
 const rowClickFunction = computed(() => {
     if ($props.rowClick) return $props.rowClick;
@@ -108,18 +134,6 @@ function stopEventPropagation(event) {
     event.preventDefault();
     event.stopPropagation();
 }
-
-function setChipColumn() {
-    console.log('SETTING', columns.value);
-    columns.value.unshift({
-        align: 'left',
-        field: 'status',
-        label: t('status'),
-        name: 'status',
-        customFilter: false,
-    });
-    console.log('SETTING', columns.value);
-}
 </script>
 <template>
     <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
@@ -133,12 +147,16 @@ function setChipColumn() {
                     <VnTableFilter
                         :column="col"
                         :data-key="$attrs['data-key']"
-                        v-for="col of columns"
+                        v-for="col of splittedColumns.columns"
                         :key="col.id"
                         v-model="params[col.columnFilter?.field ?? col.field]"
                     />
                 </template>
-                <slot name="moreFilterPanel" :params="params" :columns="columns" />
+                <slot
+                    name="moreFilterPanel"
+                    :params="params"
+                    :columns="splittedColumns.columns"
+                />
             </VnFilterPanel>
         </QScrollArea>
     </QDrawer>
@@ -153,7 +171,7 @@ function setChipColumn() {
             <!-- :grid="($q.screen.lt.md && reponsive) || mode != 'table'"  -->
             <QTable
                 class="vnTable"
-                :columns="columns"
+                :columns="splittedColumns.columns"
                 :rows="rows"
                 row-key="id"
                 selection="multiple"
@@ -196,7 +214,7 @@ function setChipColumn() {
                     />
                 </template>
                 <template #header-cell="{ col }">
-                    <QTh auto-width style="min-width: 100px">
+                    <QTh auto-width style="min-width: 100px" v-if="$props.columnSearch">
                         <VnTableFilter
                             :column="col"
                             :show-title="true"
@@ -205,9 +223,9 @@ function setChipColumn() {
                         />
                     </QTh>
                 </template>
-                <template #body-cell-chips="{ col }">
+                <template #body-cell-status="{ col, row }">
                     <QTd auto-width :class="`text-${col.align ?? 'left'}`">
-                        <VnTableChip :columns="cardTemplate.chips" :row="row">
+                        <VnTableChip :columns="splittedColumns.columnChips" :row="row">
                             <template #afterChip>
                                 <slot name="afterChip" :row="row"></slot>
                             </template>
@@ -243,10 +261,13 @@ function setChipColumn() {
                             <QCardSection vertical class="no-margin no-padding w-80">
                                 <!-- Chips -->
                                 <QCardSection
-                                    v-if="cardTemplate.chips.length"
+                                    v-if="splittedColumns.chips.length"
                                     class="no-margin q-px-xs q-py-none"
                                 >
-                                    <VnTableChip :columns="cardTemplate.chips" :row="row">
+                                    <VnTableChip
+                                        :columns="splittedColumns.chips"
+                                        :row="row"
+                                    >
                                         <template #afterChip>
                                             <slot name="afterChip" :row="row"></slot>
                                         </template>
@@ -254,20 +275,20 @@ function setChipColumn() {
                                 </QCardSection>
                                 <!-- Title -->
                                 <QCardSection
-                                    v-if="cardTemplate.title"
+                                    v-if="splittedColumns.title"
                                     class="q-pl-sm q-py-none text-primary-light text-bold text-h6 cardEllipsis"
                                 >
                                     <span
-                                        :title="row[cardTemplate.title.field]"
+                                        :title="row[splittedColumns.title.field]"
                                         @click="stopEventPropagation($event)"
                                         class="cursor-text"
-                                        >{{ row[cardTemplate.title.field] }}</span
+                                        >{{ row[splittedColumns.title.field] }}</span
                                     >
                                 </QCardSection>
                                 <!-- Fields -->
                                 <QCardSection class="q-pl-sm q-pr-lg q-py-xs flex-one">
                                     <div
-                                        v-for="col of cardTemplate.visible"
+                                        v-for="col of splittedColumns.visible"
                                         :key="col.field"
                                         class="fields"
                                     >
@@ -320,7 +341,7 @@ function setChipColumn() {
             <template #form-inputs="{ data }">
                 <div class="grid-create">
                     <VnTableColumn
-                        v-for="column of cardTemplate.create"
+                        v-for="column of splittedColumns.create"
                         :key="column.field"
                         :column="column"
                         :row="{}"
diff --git a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
index f68a4e6a9..024a2ad7b 100644
--- a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
+++ b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
@@ -272,6 +272,7 @@ const columns = computed(() => [
         chip: {
             condition: () => true,
         },
+        isId: true,
         columnFilter: {
             component: 'select',
             field: 'search',
@@ -581,7 +582,7 @@ function handleLocation(data, location) {
             },
         }"
         order="id DESC"
-        v-model="columns"
+        :columns="columns"
         default-mode="table"
         redirect="customer"
         auto-load

From 4ae580543b09ed7b3fe6c8ec44649441c20fdb13 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Wed, 22 May 2024 14:20:38 +0200
Subject: [PATCH 019/167] feat(VnTable): refs #6825 execute function when
 create

---
 src/components/common/VnTable.vue             | 34 ++++++++++++++-----
 src/components/common/VnTableColumn.vue       | 12 ++++---
 src/components/common/VnTableFilter.vue       |  2 +-
 src/components/ui/VnFilterPanel.vue           | 12 ++-----
 .../ExtendedList/CustomerExtendedList.vue     | 25 +++++++++++++-
 5 files changed, 59 insertions(+), 26 deletions(-)

diff --git a/src/components/common/VnTable.vue b/src/components/common/VnTable.vue
index 1f4af98cf..877788061 100644
--- a/src/components/common/VnTable.vue
+++ b/src/components/common/VnTable.vue
@@ -54,7 +54,7 @@ const router = useRouter();
 const mode = ref('card');
 const selected = ref([]);
 const params = ref({});
-const VnPaginateRef = ref();
+const VnPaginateRef = ref({});
 const showForm = ref(false);
 const splittedColumns = ref({ columns: [] });
 const tableModes = [
@@ -118,22 +118,34 @@ function splitColumns(columns) {
                 field: 'status',
                 label: t('status'),
                 name: 'status',
-                customFilter: false,
+                columnFilter: false,
             });
     }
 }
 
 const rowClickFunction = computed(() => {
     if ($props.rowClick) return $props.rowClick;
-    if ($props.redirect)
-        return ({ id }) => router.push({ path: `/${$props.redirect}/${id}` });
+    if ($props.redirect) return ({ id }) => redirectFn(id);
     return () => {};
 });
 
+function redirectFn(id) {
+    router.push({ path: `/${$props.redirect}/${id}` });
+}
+
 function stopEventPropagation(event) {
     event.preventDefault();
     event.stopPropagation();
 }
+
+function reload() {
+    VnPaginateRef.value.fetch();
+}
+
+defineExpose({
+    reload,
+    redirect: redirectFn,
+});
 </script>
 <template>
     <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
@@ -240,6 +252,7 @@ function stopEventPropagation(event) {
                             :row="row"
                             :is-editable="false"
                             v-model="row[col.field]"
+                            component-prop="columnField"
                         />
                     </QTd>
                 </template>
@@ -317,7 +330,11 @@ function stopEventPropagation(event) {
                                     :icon="btn.icon"
                                     class="q-pa-xs"
                                     flat
-                                    :class="{ 'text-primary-light': btn.isPrimary }"
+                                    :class="
+                                        btn.isPrimary
+                                            ? 'text-primary-light'
+                                            : 'color-vn-text '
+                                    "
                                     @click="btn.action(row)"
                                 />
                             </QCardSection>
@@ -337,6 +354,7 @@ function stopEventPropagation(event) {
         <FormModelPopup
             v-bind="{ ...$attrs, ...create }"
             :model="$attrs['data-key'] + 'Create'"
+            @on-data-saved="(_, res) => create.onDataSaved(res)"
         >
             <template #form-inputs="{ data }">
                 <div class="grid-create">
@@ -362,10 +380,7 @@ function stopEventPropagation(event) {
 
 .bg-header {
     background-color: #5d5d5d;
-    color: var(--vn-page-color);
-    * {
-        font-weight: bold !important;
-    }
+    color: var(--vn-text-color);
 }
 
 .q-table--dark .q-table__bottom,
@@ -466,6 +481,7 @@ function stopEventPropagation(event) {
 .vn-label-value {
     display: flex;
     flex-direction: row;
+    color: var(--vn-text-color);
     .value {
         overflow: hidden;
         text-overflow: ellipsis;
diff --git a/src/components/common/VnTableColumn.vue b/src/components/common/VnTableColumn.vue
index 62db2a76a..c68aa895e 100644
--- a/src/components/common/VnTableColumn.vue
+++ b/src/components/common/VnTableColumn.vue
@@ -82,7 +82,9 @@ const defaultComponents = {
 };
 
 const value = computed(() => {
-    return $props.column.format ? $props.column.format($props.row) : $props.row;
+    return $props.column.format
+        ? $props.column.format($props.row, dashIfEmpty)
+        : dashIfEmpty($props.row[$props.column.field]);
 });
 
 const col = computed(() => {
@@ -108,22 +110,22 @@ const components = computed(() => $props.components ?? defaultComponents);
         v-if="col.before"
         :prop="col.before"
         :components="components"
-        :value="value"
+        :value="$props.row"
         v-model="model"
     />
     <VnComponent
         v-if="col.component"
         :prop="col"
         :components="components"
-        :value="value"
+        :value="$props.row"
         v-model="model"
     />
-    <span :title="row[col.field]" v-else>{{ dashIfEmpty(row[col.field]) }}</span>
+    <span :title="value" v-else>{{ value }}</span>
     <VnComponent
         v-if="col.after"
         :prop="col.after"
         :components="components"
-        :value="value"
+        :value="$props.row"
         v-model="model"
     />
 </template>
diff --git a/src/components/common/VnTableFilter.vue b/src/components/common/VnTableFilter.vue
index 212eab1b1..bfb62a0cf 100644
--- a/src/components/common/VnTableFilter.vue
+++ b/src/components/common/VnTableFilter.vue
@@ -18,7 +18,7 @@
                 default="input"
                 v-model="model"
                 :components="components"
-                :component-prop="`columnFilter`"
+                component-prop="columnFilter"
             />
         </span>
     </div>
diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue
index c37652b15..f128e7177 100644
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@@ -85,14 +85,6 @@ watch(
     }
 );
 
-watch(
-    () => arrayData.store.filter,
-    (val) => {
-        console.log('watch filter: ', val);
-    },
-    { deep: true }
-);
-
 const isLoading = ref(false);
 async function search() {
     store.filter.where = {};
@@ -184,7 +176,7 @@ function formatValue(value) {
 </script>
 
 <template>
-    <div id="filterPanelForm">
+    <QForm id="filterPanelForm">
         <QList dense>
             <QItem class="q-mt-xs">
                 <QItemSection top>
@@ -274,7 +266,7 @@ function formatValue(value) {
             </QItem>
             <QSeparator />
         </template>
-    </div>
+    </QForm>
     <QInnerLoading
         :label="t('globals.pleaseWait')"
         :showing="isLoading"
diff --git a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
index 024a2ad7b..c0d96eca7 100644
--- a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
+++ b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
@@ -32,6 +32,7 @@ const selectedSalesPersonId = ref(0);
 const allColumnNames = ref([]);
 const visibleColumns = ref([]);
 const postcodesOptions = ref([]);
+const tableRef = ref();
 
 const tableColumnComponents = {
     customerStatus: {
@@ -316,6 +317,10 @@ const columns = computed(() => [
             where: { role: 'salesPerson' },
         },
         create: true,
+        columnField: {
+            component: null,
+        },
+        format: (row, dashIfEmpty) => dashIfEmpty(row.salesPerson),
     },
     {
         align: 'left',
@@ -406,6 +411,10 @@ const columns = computed(() => [
             optionLabel: 'description',
             optionValue: 'code',
         },
+        columnField: {
+            component: null,
+        },
+        format: (row, dashIfEmpty) => dashIfEmpty(row.businessType),
     },
     {
         align: 'left',
@@ -463,7 +472,7 @@ const columns = computed(() => [
         name: 'isFreezed',
         chip: {
             color: null,
-            condition: (v, { isActive, isFreezed }) => isActive && isFreezed == true,
+            condition: (v, { isActive, isFreezed }) => isActive && isFreezed,
             icon: 'vn:frozen',
         },
     },
@@ -570,15 +579,29 @@ function handleLocation(data, location) {
     </VnSubToolbar> -->
 
     <VnTable
+        ref="tableRef"
         data-key="CustomerExtendedList"
         url="Clients/extendedListFilter"
         url-create="Clients/createWithUser"
         :create="{
             urlCreate: 'Clients/createWithUser',
             title: 'Create client',
+            onDataSaved: ({ id }) => tableRef.redirect(id),
             formInitialData: {
                 active: true,
                 isEqualizated: false,
+                name: 'FFFF',
+                socialName: 'FFFFFF',
+                fi: '58233369H',
+                salesPersonFk: 15,
+                street: 'FASD',
+                businessTypeFk: 'individual',
+                email: 'adddssssd@asd.es',
+                userName: 'asdasdax',
+                postcode: '46680',
+                city: 'Algemesi',
+                provinceFk: 1,
+                countryFk: 1,
             },
         }"
         order="id DESC"

From 569df64d8df7cfdd69ab06c8c6b0b99c42cf0f6e Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Thu, 23 May 2024 09:05:57 +0200
Subject: [PATCH 020/167] feat(VnTable): refs #6825 move to folder. fix
 checkboxs

---
 .../VnTableChip.vue => VnTable/VnChip.vue}    |  0
 .../VnColumn.vue}                             |  7 +-
 .../VnFilter.vue}                             | 86 ++++++++++---------
 .../{common => VnTable}/VnTable.vue           | 42 ++++-----
 src/components/common/VnComponent.vue         |  1 -
 src/components/common/VnSelect.vue            |  4 -
 src/components/common/VnTableFilterMore.vue   | 13 ---
 src/components/common/VnTableObj.json         | 33 -------
 src/components/ui/VnFilterPanel.vue           | 10 ++-
 .../ExtendedList/CustomerExtendedList.vue     | 17 ++--
 10 files changed, 83 insertions(+), 130 deletions(-)
 rename src/components/{common/VnTableChip.vue => VnTable/VnChip.vue} (100%)
 rename src/components/{common/VnTableColumn.vue => VnTable/VnColumn.vue} (95%)
 rename src/components/{common/VnTableFilter.vue => VnTable/VnFilter.vue} (71%)
 rename src/components/{common => VnTable}/VnTable.vue (94%)
 delete mode 100644 src/components/common/VnTableFilterMore.vue
 delete mode 100644 src/components/common/VnTableObj.json

diff --git a/src/components/common/VnTableChip.vue b/src/components/VnTable/VnChip.vue
similarity index 100%
rename from src/components/common/VnTableChip.vue
rename to src/components/VnTable/VnChip.vue
diff --git a/src/components/common/VnTableColumn.vue b/src/components/VnTable/VnColumn.vue
similarity index 95%
rename from src/components/common/VnTableColumn.vue
rename to src/components/VnTable/VnColumn.vue
index c68aa895e..6e3323a62 100644
--- a/src/components/common/VnTableColumn.vue
+++ b/src/components/VnTable/VnColumn.vue
@@ -61,9 +61,10 @@ const defaultComponents = {
         attrs: (prop) => {
             return {
                 disable: !$props.isEditable,
-                // 'true-value': 1,
-                // 'false-value': 0,
-                // 'model-value': Boolean(prop),
+                'true-value': 1,
+                'false-value': 0,
+                'model-value': Boolean(prop),
+                class: 'no-padding',
             };
         },
         forceAttrs: {
diff --git a/src/components/common/VnTableFilter.vue b/src/components/VnTable/VnFilter.vue
similarity index 71%
rename from src/components/common/VnTableFilter.vue
rename to src/components/VnTable/VnFilter.vue
index bfb62a0cf..f4e0c0343 100644
--- a/src/components/common/VnTableFilter.vue
+++ b/src/components/VnTable/VnFilter.vue
@@ -1,29 +1,3 @@
-<template>
-    <div
-        v-if="showTitle && column"
-        class="q-pt-sm q-px-sm ellipsis"
-        :class="`text-${column.align ?? 'left'}`"
-    >
-        {{ column.label }}
-    </div>
-    <div
-        v-if="columnFilter !== false && column.field != 'tableActions'"
-        class="row no-wrap"
-    >
-        <hr class="q-ma-none divisor-line" v-if="showTitle" />
-        <span class="full-width">
-            <VnTableColumn
-                :column="$props.column"
-                :row="{}"
-                default="input"
-                v-model="model"
-                :components="components"
-                component-prop="columnFilter"
-            />
-        </span>
-    </div>
-    <div v-else-if="showTitle" style="height: 45px"><!-- fixme! --></div>
-</template>
 <script setup>
 import { markRaw, computed, defineModel } from 'vue';
 import { QCheckbox } from 'quasar';
@@ -33,7 +7,7 @@ import { useArrayData } from 'composables/useArrayData';
 import VnSelect from 'components/common/VnSelect.vue';
 import VnInput from 'components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
-import VnTableColumn from 'components/common/VnTableColumn.vue';
+import VnTableColumn from 'components/VnTable/VnColumn.vue';
 
 const $props = defineProps({
     column: {
@@ -65,6 +39,7 @@ const components = {
         attrs: {
             class: 'q-px-sm q-pb-xs q-pt-none',
             dense: true,
+            filled: !$props.showTitle,
         },
         forceAttrs: {
             label: $props.showTitle ? '' : $props.column.label,
@@ -73,14 +48,26 @@ const components = {
     number: {
         component: markRaw(VnInput),
         event: enterEvent,
+        attrs: {
+            dense: true,
+            class: 'q-px-md q-pb-xs q-pt-none',
+        },
     },
     date: {
         component: markRaw(VnInputDate),
         event: updateEvent,
+        attrs: {
+            dense: true,
+            class: 'q-px-md q-pb-xs q-pt-none',
+        },
     },
     checkbox: {
         component: markRaw(QCheckbox),
         event: updateEvent,
+        attrs: {
+            dense: true,
+            class: 'q-pa-sm q-mt-md',
+        },
         forceAttrs: {
             label: $props.showTitle ? '' : $props.column.label,
         },
@@ -91,6 +78,7 @@ const components = {
         attrs: {
             class: 'q-px-md q-pb-xs q-pt-none',
             dense: true,
+            filled: !$props.showTitle,
         },
         forceAttrs: {
             label: $props.showTitle ? '' : $props.column.label,
@@ -98,20 +86,6 @@ const components = {
     },
 };
 
-// async function addFilter() {
-//     const value = model.value == '' ? null : model.value;
-//     const prefix = columnFilter.value?.inWhere?.prefix;
-//     let field = columnFilter.value?.field ?? $props.column.field;
-//     field = prefix ? prefix + '.' + field : field;
-//     const toFilter = { [field]: value };
-//     const filter = columnFilter.value?.inWhere
-//         ? { filter: { where: toFilter } }
-//         : { params: toFilter };
-
-//     console.log('filter: ', filter);
-//     await arrayData.addFilter(filter);
-// }
-
 async function addFilter(value) {
     if (value && typeof value === 'object') value = model.value;
     value = value == '' ? null : value;
@@ -120,4 +94,34 @@ async function addFilter(value) {
 
     await arrayData.addFilter({ params: toFilter });
 }
+
+function alignRow() {
+    if ($props.column.align == 'left') return 'justify-start';
+    if ($props.column.align == 'right') return 'justify-end';
+    return 'justify-center';
+}
 </script>
+<template>
+    <div
+        v-if="showTitle && column"
+        class="q-pt-sm q-px-sm ellipsis"
+        :class="`text-${column.align ?? 'left'}`"
+    >
+        {{ column.label }}
+    </div>
+    <div
+        v-if="columnFilter !== false && column.field != 'tableActions'"
+        class="row no-wrap full-width"
+        :class="alignRow()"
+    >
+        <VnTableColumn
+            :column="$props.column"
+            :row="{}"
+            default="input"
+            v-model="model"
+            :components="components"
+            component-prop="columnFilter"
+        />
+    </div>
+    <div v-else-if="showTitle" style="height: 45px"><!-- fixme! --></div>
+</template>
diff --git a/src/components/common/VnTable.vue b/src/components/VnTable/VnTable.vue
similarity index 94%
rename from src/components/common/VnTable.vue
rename to src/components/VnTable/VnTable.vue
index 877788061..b2e5ee22f 100644
--- a/src/components/common/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -2,6 +2,7 @@
 import { ref, onMounted, computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
+import { useQuasar } from 'quasar';
 
 import { useStateStore } from 'stores/useStateStore';
 import FormModelPopup from 'components/FormModelPopup.vue';
@@ -9,9 +10,9 @@ import VnPaginate from 'components/ui/VnPaginate.vue';
 import VnFilterPanel from 'components/ui/VnFilterPanel.vue';
 import VnLv from 'components/ui/VnLv.vue';
 
-import VnTableColumn from 'components/common/VnTableColumn.vue';
-import VnTableFilter from 'components/common/VnTableFilter.vue';
-import VnTableChip from 'components/common/VnTableChip.vue';
+import VnTableColumn from 'components/VnTable/VnColumn.vue';
+import VnTableFilter from 'components/VnTable/VnFilter.vue';
+import VnTableChip from 'components/VnTable/VnChip.vue';
 
 const $props = defineProps({
     columns: {
@@ -22,10 +23,6 @@ const $props = defineProps({
         type: String,
         default: 'card', // 'table', 'card'
     },
-    responsive: {
-        type: Boolean,
-        default: true,
-    },
     columnSearch: {
         type: Boolean,
         default: true,
@@ -50,6 +47,7 @@ const $props = defineProps({
 const { t } = useI18n();
 const stateStore = useStateStore();
 const router = useRouter();
+const quasar = useQuasar();
 
 const mode = ref('card');
 const selected = ref([]);
@@ -72,7 +70,7 @@ const tableModes = [
 ];
 
 onMounted(() => {
-    mode.value = $props.defaultMode;
+    mode.value = quasar.platform.is.mobile ? 'card' : $props.defaultMode;
     stateStore.rightDrawer = true;
 });
 
@@ -91,19 +89,10 @@ function splitColumns(columns) {
     };
 
     for (const col of columns) {
-        if (!col) continue;
-        if (col.field == 'tableActions') {
-            splittedColumns.value.actions = col;
-        }
-        if (col.chip) {
-            splittedColumns.value.chips.push(col);
-        }
-        if (col.isTitle) {
-            splittedColumns.value.title = col;
-        }
-        if (col.create) {
-            splittedColumns.value.create.push(col);
-        }
+        if (col.field == 'tableActions') splittedColumns.value.actions = col;
+        if (col.chip) splittedColumns.value.chips.push(col);
+        if (col.isTitle) splittedColumns.value.title = col;
+        if (col.create) splittedColumns.value.create.push(col);
         if (col.cardVisible) splittedColumns.value.visible.push(col);
         splittedColumns.value.columns.push(col);
     }
@@ -148,7 +137,13 @@ defineExpose({
 });
 </script>
 <template>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+    <QDrawer
+        v-if="$props.rightSearch"
+        v-model="stateStore.rightDrawer"
+        side="right"
+        :width="256"
+        show-if-above
+    >
         <QScrollArea class="fit">
             <VnFilterPanel
                 :data-key="$attrs['data-key']"
@@ -180,7 +175,6 @@ defineExpose({
         :disable-infinite-scroll="mode == 'table'"
     >
         <template #body="{ rows }">
-            <!-- :grid="($q.screen.lt.md && reponsive) || mode != 'table'"  -->
             <QTable
                 class="vnTable"
                 :columns="splittedColumns.columns"
@@ -246,7 +240,7 @@ defineExpose({
                 </template>
                 <template #body-cell="{ col, row }">
                     <!-- Columns -->
-                    <QTd auto-width :class="`text-${col.align ?? 'left'}`">
+                    <QTd class="no-padding" :class="`text-${col.align ?? 'left'}`">
                         <VnTableColumn
                             :column="col"
                             :row="row"
diff --git a/src/components/common/VnComponent.vue b/src/components/common/VnComponent.vue
index 364f8044f..cf6ceba32 100644
--- a/src/components/common/VnComponent.vue
+++ b/src/components/common/VnComponent.vue
@@ -7,7 +7,6 @@
             v-on="mix(toComponent).event"
             v-model="model"
         />
-        <!-- @click="toComponent.event && toComponent.event(value)"  -->
     </span>
 </template>
 <script setup>
diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index b25011154..9e3e50eed 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -26,10 +26,6 @@ const $props = defineProps({
         type: String,
         default: null,
     },
-    optionFilter: {
-        type: String,
-        default: null,
-    },
     url: {
         type: String,
         default: '',
diff --git a/src/components/common/VnTableFilterMore.vue b/src/components/common/VnTableFilterMore.vue
deleted file mode 100644
index fd4880431..000000000
--- a/src/components/common/VnTableFilterMore.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-    <QSelect dense icon="filter_alt" flat size="xs" :options="filterOptions"> </QSelect>
-</template>
-<script setup>
-const model = defineModel();
-
-const filterOptions = [{ label: '%' }, { label: '<' }, { label: '>' }];
-
-async function encapsulate(field) {
-    // ejemplo
-    // si es % que te ponga {like: `%${field}%`}
-}
-</script>
diff --git a/src/components/common/VnTableObj.json b/src/components/common/VnTableObj.json
deleted file mode 100644
index ceaedd647..000000000
--- a/src/components/common/VnTableObj.json
+++ /dev/null
@@ -1,33 +0,0 @@
-//     {
-//         isId: Boolean
-//         align: 'left',
-//         field: 'hasFile',
-//         label: t('globals.original'),
-//         name: 'hasFile',
-//         component: QCheckbox ?? span,
-//         cardVisible: Boolean
-//         isId: 1/2
-//         color: function
-//         props: (prop) => ({
-//             disable: true,
-//             'model-value': Boolean(prop.value),
-//         }),
-//         tableActions:  {
-//     field: 'tableActions',
-//     name: 'tableActions',
-//     actions: [
-//         {
-//             title: t('Client ticket list'),
-//             icon: 'vn:ticket',
-//             action: redirectToCreateView,
-//             isPrimary: true,
-//         },
-//         {
-//             title: t('Client ticket list'),
-//             icon: 'preview',
-//             action: (row) => viewSummary(row.id, CustomerSummary),
-//         },
-//     ],
-// },
-//     },
-//      tableActions y hacer bucle
diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue
index f128e7177..78f8c3833 100644
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@@ -89,14 +89,15 @@ const isLoading = ref(false);
 async function search() {
     store.filter.where = {};
     isLoading.value = true;
-    const params = { ...userParams.value };
+    console.log('params.value: ', params.value);
+    const filter = { ...userParams.value, ...params.value };
     store.userParamsChanged = true;
     store.filter.skip = 0;
     store.skip = 0;
-    const { params: newParams } = await arrayData.addFilter({ params });
+    const { params: newParams } = await arrayData.addFilter({ params: filter });
     userParams.value = newParams;
 
-    if (!props.showAll && !Object.values(params).length) store.data = [];
+    if (!props.showAll && !Object.values(filter).length) store.data = [];
 
     isLoading.value = false;
     emit('search');
@@ -128,6 +129,7 @@ async function clearFilters() {
     for (const key of removableFilters) {
         newParams[key] = userParams.value[key];
     }
+    params.value = {};
     userParams.value = { ...newParams }; // Actualizar los params con los removibles
     await arrayData.applyFilter({ params: userParams.value });
 
@@ -176,7 +178,7 @@ function formatValue(value) {
 </script>
 
 <template>
-    <QForm id="filterPanelForm">
+    <QForm @submit="search" id="filterPanelForm">
         <QList dense>
             <QItem class="q-mt-xs">
                 <QItemSection top>
diff --git a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
index 2de8cb9aa..ee8fdc395 100644
--- a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
+++ b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
@@ -2,7 +2,7 @@
 import { ref, computed, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import VnTable from 'components/common/VnTable.vue';
+import VnTable from 'components/VnTable/VnTable.vue';
 import VnLocation from 'src/components/common/VnLocation.vue';
 import CustomerSummary from '../Card/CustomerSummary.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
@@ -303,12 +303,6 @@ const columns = computed(() => [
         isTitle: true,
         create: true,
     },
-    {
-        align: 'left',
-        field: 'socialName',
-        label: t('customer.extendedList.tableVisibleColumns.socialName'),
-        name: 'socialName',
-    },
     {
         align: 'left',
         field: 'fi',
@@ -455,18 +449,21 @@ const columns = computed(() => [
             condition: (value) => !value,
             icon: 'vn:disabled',
         },
+        component: 'checkbox',
     },
     {
         align: 'left',
         field: 'isVies',
         label: t('customer.extendedList.tableVisibleColumns.isVies'),
         name: 'isVies',
+        component: 'checkbox',
     },
     {
         align: 'left',
         field: 'isTaxDataChecked',
         label: t('customer.extendedList.tableVisibleColumns.isTaxDataChecked'),
         name: 'isTaxDataChecked',
+        component: 'checkbox',
     },
     {
         align: 'left',
@@ -486,12 +483,14 @@ const columns = computed(() => [
             condition: (v, { isActive, isFreezed }) => isActive && isFreezed,
             icon: 'vn:frozen',
         },
+        component: 'checkbox',
     },
     {
         align: 'left',
         field: 'hasToInvoice',
         label: t('customer.extendedList.tableVisibleColumns.hasToInvoice'),
         name: 'hasToInvoice',
+        component: 'checkbox',
     },
     {
         align: 'left',
@@ -505,24 +504,28 @@ const columns = computed(() => [
         field: 'isToBeMailed',
         label: t('customer.extendedList.tableVisibleColumns.isToBeMailed'),
         name: 'isToBeMailed',
+        component: 'checkbox',
     },
     {
         align: 'left',
         field: 'hasLcr',
         label: t('customer.extendedList.tableVisibleColumns.hasLcr'),
         name: 'hasLcr',
+        component: 'checkbox',
     },
     {
         align: 'left',
         field: 'hasCoreVnl',
         label: t('customer.extendedList.tableVisibleColumns.hasCoreVnl'),
         name: 'hasCoreVnl',
+        component: 'checkbox',
     },
     {
         align: 'left',
         field: 'hasSepaVnl',
         label: t('customer.extendedList.tableVisibleColumns.hasSepaVnl'),
         name: 'hasSepaVnl',
+        component: 'checkbox',
     },
     {
         align: 'right',

From c4441eed1fe8ce02409ef1fcea18ff752fcb503c Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Thu, 23 May 2024 09:25:28 +0200
Subject: [PATCH 021/167] fix(VnTable): refs #6825 checkbox align and color

---
 src/components/VnTable/VnFilter.vue | 20 +++++++------
 src/components/VnTable/VnTable.vue  | 44 +++++++++++++++++------------
 2 files changed, 37 insertions(+), 27 deletions(-)

diff --git a/src/components/VnTable/VnFilter.vue b/src/components/VnTable/VnFilter.vue
index f4e0c0343..c527a0e59 100644
--- a/src/components/VnTable/VnFilter.vue
+++ b/src/components/VnTable/VnFilter.vue
@@ -111,17 +111,19 @@ function alignRow() {
     </div>
     <div
         v-if="columnFilter !== false && column.field != 'tableActions'"
-        class="row no-wrap full-width"
+        class="row no-wrap"
         :class="alignRow()"
     >
-        <VnTableColumn
-            :column="$props.column"
-            :row="{}"
-            default="input"
-            v-model="model"
-            :components="components"
-            component-prop="columnFilter"
-        />
+        <span :class="$props.column.component != 'checkbox' ? 'full-width' : alignRow()">
+            <VnTableColumn
+                :column="$props.column"
+                :row="{}"
+                default="input"
+                v-model="model"
+                :components="components"
+                component-prop="columnFilter"
+            />
+        </span>
     </div>
     <div v-else-if="showTitle" style="height: 45px"><!-- fixme! --></div>
 </template>
diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index b2e5ee22f..590748523 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -240,7 +240,10 @@ defineExpose({
                 </template>
                 <template #body-cell="{ col, row }">
                     <!-- Columns -->
-                    <QTd class="no-padding" :class="`text-${col.align ?? 'left'}`">
+                    <QTd
+                        class="no-padding no-margin"
+                        :class="`text-${col.align ?? 'left'}`"
+                    >
                         <VnTableColumn
                             :column="col"
                             :row="row"
@@ -366,6 +369,13 @@ defineExpose({
         </FormModelPopup>
     </QDialog>
 </template>
+<i18n>
+    en:
+        status: Status
+    es:
+        status: Estados
+    </i18n>
+
 <style lang="scss">
 .bg-chip-secondary {
     background-color: var(--vn-page-color);
@@ -438,23 +448,6 @@ defineExpose({
     }
 }
 
-// WIP TRANSITIONS
-// .grid-item {
-//     background-color: red;
-//     transition: all 500ms ease;
-// }
-
-// .grid-move {
-//     background-color: #6b7280 !important;
-//     transform: scale(0.9);
-// }
-
-.divisor-line {
-    height: 1px;
-    background-color: var(--vn-section-color);
-    border: none;
-}
-
 .q-table th {
     padding: 0;
 }
@@ -470,6 +463,21 @@ defineExpose({
     .q-table__top {
         top: 0;
     }
+    tbody {
+        .q-checkbox {
+            display: flex;
+            margin-bottom: 9px;
+            & .q-checkbox__label {
+                margin-left: 31px;
+                color: var(--vn-text-color);
+            }
+            & .q-checkbox__inner {
+                position: absolute;
+                left: 0;
+                color: var(--vn-label-color);
+            }
+        }
+    }
 }
 
 .vn-label-value {

From ac77fea3d75b2614b96d92300629180de5b2be94 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Thu, 23 May 2024 10:09:17 +0200
Subject: [PATCH 022/167] feat(VnTable): refs #6825 remove field prop. Add
 actions in table

---
 src/components/VnTable/VnChip.vue             |   6 +-
 src/components/VnTable/VnColumn.vue           |   2 +-
 src/components/VnTable/VnFilter.vue           |   5 +-
 src/components/VnTable/VnTable.vue            |  50 ++-
 src/components/common/VnComponent.vue         |   2 +-
 src/components/ui/VnFilterPanel.vue           |   1 -
 .../ExtendedList/CustomerExtendedList.vue     | 408 +-----------------
 7 files changed, 57 insertions(+), 417 deletions(-)

diff --git a/src/components/VnTable/VnChip.vue b/src/components/VnTable/VnChip.vue
index c4a5a602a..626c16c45 100644
--- a/src/components/VnTable/VnChip.vue
+++ b/src/components/VnTable/VnChip.vue
@@ -18,12 +18,12 @@ function stopEventPropagation(event) {
 <template>
     <span
         v-for="col of columns"
-        :key="col.field"
+        :key="col.name"
         @click="stopEventPropagation($event)"
         class="cursor-text"
     >
         <QChip
-            v-if="col.chip.condition(row[col.field], row)"
+            v-if="col.chip.condition(row[col.name], row)"
             :title="col.label"
             :class="
                 col.chip.color
@@ -33,7 +33,7 @@ function stopEventPropagation(event) {
             dense
             square
         >
-            <span v-if="!col.chip.icon">{{ row[col.field] }}</span>
+            <span v-if="!col.chip.icon">{{ row[col.name] }}</span>
             <QIcon v-else :name="col.chip.icon" color="primary-light" />
         </QChip>
     </span>
diff --git a/src/components/VnTable/VnColumn.vue b/src/components/VnTable/VnColumn.vue
index 6e3323a62..416748ae8 100644
--- a/src/components/VnTable/VnColumn.vue
+++ b/src/components/VnTable/VnColumn.vue
@@ -85,7 +85,7 @@ const defaultComponents = {
 const value = computed(() => {
     return $props.column.format
         ? $props.column.format($props.row, dashIfEmpty)
-        : dashIfEmpty($props.row[$props.column.field]);
+        : dashIfEmpty($props.row[$props.column.name]);
 });
 
 const col = computed(() => {
diff --git a/src/components/VnTable/VnFilter.vue b/src/components/VnTable/VnFilter.vue
index c527a0e59..871a82318 100644
--- a/src/components/VnTable/VnFilter.vue
+++ b/src/components/VnTable/VnFilter.vue
@@ -67,6 +67,7 @@ const components = {
         attrs: {
             dense: true,
             class: 'q-pa-sm q-mt-md',
+            'toggle-indeterminate': true,
         },
         forceAttrs: {
             label: $props.showTitle ? '' : $props.column.label,
@@ -89,7 +90,7 @@ const components = {
 async function addFilter(value) {
     if (value && typeof value === 'object') value = model.value;
     value = value == '' ? null : value;
-    let field = columnFilter.value?.field ?? $props.column.field;
+    let field = columnFilter.value?.name ?? $props.column.name;
     const toFilter = { [field]: value };
 
     await arrayData.addFilter({ params: toFilter });
@@ -110,7 +111,7 @@ function alignRow() {
         {{ column.label }}
     </div>
     <div
-        v-if="columnFilter !== false && column.field != 'tableActions'"
+        v-if="columnFilter !== false && column.name != 'tableActions'"
         class="row no-wrap"
         :class="alignRow()"
     >
diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index 590748523..b7ac12237 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -89,7 +89,7 @@ function splitColumns(columns) {
     };
 
     for (const col of columns) {
-        if (col.field == 'tableActions') splittedColumns.value.actions = col;
+        if (col.name == 'tableActions') splittedColumns.value.actions = col;
         if (col.chip) splittedColumns.value.chips.push(col);
         if (col.isTitle) splittedColumns.value.title = col;
         if (col.create) splittedColumns.value.create.push(col);
@@ -104,9 +104,8 @@ function splitColumns(columns) {
         if (splittedColumns.value.columnChips.length)
             splittedColumns.value.columns.unshift({
                 align: 'left',
-                field: 'status',
                 label: t('status'),
-                name: 'status',
+                name: 'tableStatus',
                 columnFilter: false,
             });
     }
@@ -156,7 +155,7 @@ defineExpose({
                         :data-key="$attrs['data-key']"
                         v-for="col of splittedColumns.columns"
                         :key="col.id"
-                        v-model="params[col.columnFilter?.field ?? col.field]"
+                        v-model="params[col.columnFilter?.name ?? col.name]"
                     />
                 </template>
                 <slot
@@ -197,13 +196,13 @@ defineExpose({
                     <slot name="top-left"></slot>
                 </template>
                 <template #top-right>
-                    <QBtn
+                    <!-- <QBtn
                         icon="visibility"
                         title="asd"
                         class="bg-vn-section-color q-mr-md"
                         dense
                         v-if="mode == 'table'"
-                    />
+                    /> -->
                     <QBtnToggle
                         v-model="mode"
                         toggle-color="primary"
@@ -225,11 +224,11 @@ defineExpose({
                             :column="col"
                             :show-title="true"
                             :data-key="$attrs['data-key']"
-                            v-model="params[col.columnFilter?.field ?? col.field]"
+                            v-model="params[col.columnFilter?.name ?? col.name]"
                         />
                     </QTh>
                 </template>
-                <template #body-cell-status="{ col, row }">
+                <template #body-cell-tableStatus="{ col, row }">
                     <QTd auto-width :class="`text-${col.align ?? 'left'}`">
                         <VnTableChip :columns="splittedColumns.columnChips" :row="row">
                             <template #afterChip>
@@ -248,11 +247,27 @@ defineExpose({
                             :column="col"
                             :row="row"
                             :is-editable="false"
-                            v-model="row[col.field]"
+                            v-model="row[col.name]"
                             component-prop="columnField"
                         />
                     </QTd>
                 </template>
+                <template #body-cell-tableActions="{ col, row }">
+                    <QTd auto-width :class="`text-${col.align ?? 'left'} `">
+                        <QBtn
+                            v-for="(btn, index) of col.actions"
+                            :key="index"
+                            :title="btn.title"
+                            :icon="btn.icon"
+                            class="q-px-sm"
+                            flat
+                            :class="
+                                btn.isPrimary ? 'text-primary-light' : 'color-vn-text '
+                            "
+                            @click="btn.action(row)"
+                        />
+                    </QTd>
+                </template>
                 <template #item="{ row, colsMap }">
                     <component
                         :is="$props.redirect ? 'router-link' : 'span'"
@@ -289,17 +304,17 @@ defineExpose({
                                     class="q-pl-sm q-py-none text-primary-light text-bold text-h6 cardEllipsis"
                                 >
                                     <span
-                                        :title="row[splittedColumns.title.field]"
+                                        :title="row[splittedColumns.title.name]"
                                         @click="stopEventPropagation($event)"
                                         class="cursor-text"
-                                        >{{ row[splittedColumns.title.field] }}</span
+                                        >{{ row[splittedColumns.title.name] }}</span
                                     >
                                 </QCardSection>
                                 <!-- Fields -->
                                 <QCardSection class="q-pl-sm q-pr-lg q-py-xs flex-one">
                                     <div
                                         v-for="col of splittedColumns.visible"
-                                        :key="col.field"
+                                        :key="col.name"
                                         class="fields"
                                     >
                                         <VnLv :label="`${col.label}:`">
@@ -321,7 +336,8 @@ defineExpose({
                                 @click="stopEventPropagation($event)"
                             >
                                 <QBtn
-                                    v-for="(btn, index) of colsMap.tableActions.actions"
+                                    v-for="(btn, index) of splittedColumns.actions
+                                        .actions"
                                     :key="index"
                                     :title="btn.title"
                                     :icon="btn.icon"
@@ -357,11 +373,11 @@ defineExpose({
                 <div class="grid-create">
                     <VnTableColumn
                         v-for="column of splittedColumns.create"
-                        :key="column.field"
+                        :key="column.name"
                         :column="column"
                         :row="{}"
                         default="input"
-                        v-model="data[column.field]"
+                        v-model="data[column.name]"
                     />
                     <slot name="more-create-dialog" :data="data" />
                 </div>
@@ -478,6 +494,10 @@ defineExpose({
             }
         }
     }
+    .sticky {
+        position: sticky;
+        z-index: 1;
+    }
 }
 
 .vn-label-value {
diff --git a/src/components/common/VnComponent.vue b/src/components/common/VnComponent.vue
index cf6ceba32..52cee86bb 100644
--- a/src/components/common/VnComponent.vue
+++ b/src/components/common/VnComponent.vue
@@ -1,5 +1,5 @@
 <template>
-    <span v-for="toComponent of componentArray" :key="toComponent.field">
+    <span v-for="toComponent of componentArray" :key="toComponent.name">
         <component
             v-if="toComponent?.component"
             :is="mix(toComponent).component"
diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue
index 78f8c3833..cd5e96cee 100644
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@@ -89,7 +89,6 @@ const isLoading = ref(false);
 async function search() {
     store.filter.where = {};
     isLoading.value = true;
-    console.log('params.value: ', params.value);
     const filter = { ...userParams.value, ...params.value };
     store.userParamsChanged = true;
     store.filter.skip = 0;
diff --git a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
index ee8fdc395..81da2b407 100644
--- a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
+++ b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
@@ -7,281 +7,28 @@ import VnLocation from 'src/components/common/VnLocation.vue';
 import CustomerSummary from '../Card/CustomerSummary.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 
-import { QBtn, QIcon } from 'quasar';
-import CustomerExtendedListActions from './CustomerExtendedListActions.vue';
-import CustomerExtendedListFilter from './CustomerExtendedListFilter.vue';
-
 import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
 
-import { useStateStore } from 'stores/useStateStore';
 import { toDate } from 'src/filters';
 
 const { t } = useI18n();
 const router = useRouter();
-const stateStore = useStateStore();
 
-onMounted(() => {
-    const filteredColumns = columns.value.filter(
-        (col) => col.name !== 'actions' && col.name !== 'customerStatus'
-    );
-    allColumnNames.value = filteredColumns.map((col) => col.name);
-});
-
-const selectedCustomerId = ref(0);
-const selectedSalesPersonId = ref(0);
-const allColumnNames = ref([]);
-const visibleColumns = ref([]);
 const postcodesOptions = ref([]);
 const tableRef = ref();
 
-const tableColumnComponents = {
-    customerStatus: {
-        component: QIcon,
-        props: (prop) => ({
-            name: !prop.row.isActive
-                ? 'vn:disabled'
-                : prop.row.isActive && prop.row.isFreezed
-                ? 'vn:frozen'
-                : '',
-            color: 'primary',
-            size: 'sm',
-        }),
-        event: () => {},
-    },
-    id: {
-        component: QBtn,
-        props: () => ({ flat: true, color: 'blue' }),
-        event: (prop) => {
-            selectCustomerId(prop.row.id);
-        },
-    },
-    name: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    socialName: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    fi: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    salesPersonFk: {
-        component: QBtn,
-        props: () => ({ flat: true, color: 'blue' }),
-        event: (prop) => selectSalesPersonId(prop.row.salesPersonFk),
-    },
-    credit: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    creditInsurance: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    phone: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    mobile: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    street: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    countryFk: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    provinceFk: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    city: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    postcode: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    email: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    created: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    businessTypeFk: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    payMethodFk: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    sageTaxTypeFk: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    sageTransactionTypeFk: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    isActive: {
-        component: QIcon,
-        props: (prop) => ({
-            name: prop.row.isActive ? 'check' : 'close',
-            color: prop.row.isActive ? 'positive' : 'negative',
-            size: 'sm',
-        }),
-        event: () => {},
-    },
-    isVies: {
-        component: QIcon,
-        props: (prop) => ({
-            name: prop.row.isVies ? 'check' : 'close',
-            color: prop.row.isVies ? 'positive' : 'negative',
-            size: 'sm',
-        }),
-        event: () => {},
-    },
-    isTaxDataChecked: {
-        component: QIcon,
-        props: (prop) => ({
-            name: prop.row.isTaxDataChecked ? 'check' : 'close',
-            color: prop.row.isTaxDataChecked ? 'positive' : 'negative',
-            size: 'sm',
-        }),
-        event: () => {},
-    },
-    isEqualizated: {
-        component: QIcon,
-        props: (prop) => ({
-            name: prop.row.isEqualizated ? 'check' : 'close',
-            color: prop.row.isEqualizated ? 'positive' : 'negative',
-            size: 'sm',
-        }),
-        event: () => {},
-    },
-    isFreezed: {
-        component: QIcon,
-        props: (prop) => ({
-            name: prop.row.isFreezed ? 'check' : 'close',
-            color: prop.row.isFreezed ? 'positive' : 'negative',
-            size: 'sm',
-        }),
-        event: () => {},
-    },
-    hasToInvoice: {
-        component: QIcon,
-        props: (prop) => ({
-            name: prop.row.hasToInvoice ? 'check' : 'close',
-            color: prop.row.hasToInvoice ? 'positive' : 'negative',
-            size: 'sm',
-        }),
-        event: () => {},
-    },
-    hasToInvoiceByAddress: {
-        component: QIcon,
-        props: (prop) => ({
-            name: prop.row.hasToInvoiceByAddress ? 'check' : 'close',
-            color: prop.row.hasToInvoiceByAddress ? 'positive' : 'negative',
-            size: 'sm',
-        }),
-        event: () => {},
-    },
-    isToBeMailed: {
-        component: QIcon,
-        props: (prop) => ({
-            name: prop.row.isToBeMailed ? 'check' : 'close',
-            color: prop.row.isToBeMailed ? 'positive' : 'negative',
-            size: 'sm',
-        }),
-        event: () => {},
-    },
-    hasLcr: {
-        component: QIcon,
-        props: (prop) => ({
-            name: prop.row.hasLcr ? 'check' : 'close',
-            color: prop.row.hasLcr ? 'positive' : 'negative',
-            size: 'sm',
-        }),
-        event: () => {},
-    },
-    hasCoreVnl: {
-        component: QIcon,
-        props: (prop) => ({
-            name: prop.row.hasCoreVnl ? 'check' : 'close',
-            color: prop.row.hasCoreVnl ? 'positive' : 'negative',
-            size: 'sm',
-        }),
-        event: () => {},
-    },
-    hasSepaVnl: {
-        component: QIcon,
-        props: (prop) => ({
-            name: prop.row.hasSepaVnl ? 'check' : 'close',
-            color: prop.row.hasSepaVnl ? 'positive' : 'negative',
-            size: 'sm',
-        }),
-        event: () => {},
-    },
-    actions: {
-        component: CustomerExtendedListActions,
-        props: (prop) => ({
-            id: prop.row.id,
-        }),
-        event: () => {},
-    },
-};
-const { viewSummary } = useSummaryDialog();
-const redirectToCreateView = (row) => {
-    router.push({
-        name: 'TicketList',
-        query: {
-            params: JSON.stringify({
-                clientFk: row.id,
-            }),
-        },
-    });
-};
-
 const columns = computed(() => [
     {
         align: 'left',
-        field: 'id',
-        label: t('customer.extendedList.tableVisibleColumns.id'),
         name: 'id',
+        label: t('customer.extendedList.tableVisibleColumns.id'),
         chip: {
             condition: () => true,
         },
         isId: true,
         columnFilter: {
             component: 'select',
-            field: 'search',
+            name: 'search',
             attrs: {
                 url: 'Clients',
                 fields: ['id', 'name'],
@@ -290,7 +37,6 @@ const columns = computed(() => [
     },
     {
         align: 'left',
-        field: 'name',
         label: t('customer.extendedList.tableVisibleColumns.name'),
         name: 'name',
         isTitle: true,
@@ -298,21 +44,19 @@ const columns = computed(() => [
     },
     {
         align: 'left',
-        field: 'socialName',
+        name: 'socialName',
         label: t('customer.extendedList.tableVisibleColumns.socialName'),
         isTitle: true,
         create: true,
     },
     {
         align: 'left',
-        field: 'fi',
         label: t('customer.extendedList.tableVisibleColumns.fi'),
         name: 'fi',
         create: true,
     },
     {
         align: 'left',
-        field: 'salesPersonFk',
         label: t('customer.extendedList.tableVisibleColumns.salesPersonFk'),
         name: 'salesPersonFk',
         component: 'select',
@@ -329,19 +73,16 @@ const columns = computed(() => [
     },
     {
         align: 'left',
-        field: 'credit',
         label: t('customer.extendedList.tableVisibleColumns.credit'),
         name: 'credit',
     },
     {
         align: 'left',
-        field: 'creditInsurance',
         label: t('customer.extendedList.tableVisibleColumns.creditInsurance'),
         name: 'creditInsurance',
     },
     {
         align: 'left',
-        field: 'phone',
         label: t('customer.extendedList.tableVisibleColumns.phone'),
         name: 'phone',
         cardVisible: true,
@@ -354,59 +95,50 @@ const columns = computed(() => [
     },
     {
         align: 'left',
-        field: 'mobile',
         label: t('customer.extendedList.tableVisibleColumns.mobile'),
         name: 'mobile',
         cardVisible: true,
     },
     {
         align: 'left',
-        field: 'street',
         label: t('customer.extendedList.tableVisibleColumns.street'),
         name: 'street',
         create: true,
     },
     {
         align: 'left',
-        field: 'country',
         label: t('customer.extendedList.tableVisibleColumns.countryFk'),
-        name: 'countryFk',
+        name: 'country',
     },
     {
         align: 'left',
-        field: 'province',
         label: t('customer.extendedList.tableVisibleColumns.provinceFk'),
         name: 'provinceFk',
     },
     {
         align: 'left',
-        field: 'city',
         label: t('customer.extendedList.tableVisibleColumns.city'),
         name: 'city',
     },
     {
         align: 'left',
-        field: 'postcode',
         label: t('customer.extendedList.tableVisibleColumns.postcode'),
         name: 'postcode',
     },
     {
         align: 'left',
-        field: 'email',
         label: t('customer.extendedList.tableVisibleColumns.email'),
         name: 'email',
         cardVisible: true,
     },
     {
         align: 'left',
-        field: 'created',
         label: t('customer.extendedList.tableVisibleColumns.created'),
         name: 'created',
         format: ({ created }) => toDate(created),
     },
     {
         align: 'left',
-        field: 'businessTypeFk',
         label: t('customer.extendedList.tableVisibleColumns.businessTypeFk'),
         name: 'businessTypeFk',
         create: true,
@@ -423,25 +155,21 @@ const columns = computed(() => [
     },
     {
         align: 'left',
-        field: 'payMethod',
         label: t('customer.extendedList.tableVisibleColumns.payMethodFk'),
         name: 'payMethodFk',
     },
     {
         align: 'left',
-        field: 'sageTaxType',
         label: t('customer.extendedList.tableVisibleColumns.sageTaxTypeFk'),
         name: 'sageTaxTypeFk',
     },
     {
         align: 'left',
-        field: 'sageTransactionType',
         label: t('customer.extendedList.tableVisibleColumns.sageTransactionTypeFk'),
         name: 'sageTransactionTypeFk',
     },
     {
         align: 'left',
-        field: 'isActive',
         label: t('customer.extendedList.tableVisibleColumns.isActive'),
         name: 'isActive',
         chip: {
@@ -453,21 +181,18 @@ const columns = computed(() => [
     },
     {
         align: 'left',
-        field: 'isVies',
         label: t('customer.extendedList.tableVisibleColumns.isVies'),
         name: 'isVies',
         component: 'checkbox',
     },
     {
         align: 'left',
-        field: 'isTaxDataChecked',
         label: t('customer.extendedList.tableVisibleColumns.isTaxDataChecked'),
         name: 'isTaxDataChecked',
         component: 'checkbox',
     },
     {
         align: 'left',
-        field: 'isEqualizated',
         label: t('customer.extendedList.tableVisibleColumns.isEqualizated'),
         name: 'isEqualizated',
         component: 'checkbox',
@@ -475,7 +200,6 @@ const columns = computed(() => [
     },
     {
         align: 'left',
-        field: 'isFreezed',
         label: t('customer.extendedList.tableVisibleColumns.isFreezed'),
         name: 'isFreezed',
         chip: {
@@ -487,49 +211,42 @@ const columns = computed(() => [
     },
     {
         align: 'left',
-        field: 'hasToInvoice',
         label: t('customer.extendedList.tableVisibleColumns.hasToInvoice'),
         name: 'hasToInvoice',
         component: 'checkbox',
     },
     {
         align: 'left',
-        field: 'hasToInvoiceByAddress',
         label: t('customer.extendedList.tableVisibleColumns.hasToInvoiceByAddress'),
         name: 'hasToInvoiceByAddress',
         component: 'checkbox',
     },
     {
         align: 'left',
-        field: 'isToBeMailed',
         label: t('customer.extendedList.tableVisibleColumns.isToBeMailed'),
         name: 'isToBeMailed',
         component: 'checkbox',
     },
     {
         align: 'left',
-        field: 'hasLcr',
         label: t('customer.extendedList.tableVisibleColumns.hasLcr'),
         name: 'hasLcr',
         component: 'checkbox',
     },
     {
         align: 'left',
-        field: 'hasCoreVnl',
         label: t('customer.extendedList.tableVisibleColumns.hasCoreVnl'),
         name: 'hasCoreVnl',
         component: 'checkbox',
     },
     {
         align: 'left',
-        field: 'hasSepaVnl',
         label: t('customer.extendedList.tableVisibleColumns.hasSepaVnl'),
         name: 'hasSepaVnl',
         component: 'checkbox',
     },
     {
         align: 'right',
-        field: 'tableActions',
         label: '',
         name: 'tableActions',
         actions: [
@@ -548,18 +265,18 @@ const columns = computed(() => [
     },
 ]);
 
-const stopEventPropagation = (event, col) => {
-    if (!['id', 'salesPersonFk'].includes(col.name)) return;
-    event.preventDefault();
-    event.stopPropagation();
+const { viewSummary } = useSummaryDialog();
+const redirectToCreateView = (row) => {
+    router.push({
+        name: 'TicketList',
+        query: {
+            params: JSON.stringify({
+                clientFk: row.id,
+            }),
+        },
+    });
 };
 
-const navigateToTravelId = (id) => router.push({ path: `/customer/${id}` });
-
-const selectCustomerId = (id) => (selectedCustomerId.value = id);
-
-const selectSalesPersonId = (id) => (selectedSalesPersonId.value = id);
-
 function handleLocation(data, location) {
     const { town, code, provinceFk, countryFk } = location ?? {};
     data.postcode = code;
@@ -570,45 +287,6 @@ function handleLocation(data, location) {
 </script>
 
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#actions-append">
-            <div class="row q-gutter-x-sm">
-                <QBtn
-                    flat
-                    @click="stateStore.toggleRightDrawer()"
-                    round
-                    dense
-                    icon="menu"
-                >
-                    <QTooltip bottom anchor="bottom right">
-                        {{ t('globals.collapseMenu') }}
-                    </QTooltip>
-                </QBtn>
-            </div>
-        </Teleport></template
-    >
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <QScrollArea class="fit text-grey-8">
-            <CustomerExtendedListFilter
-                v-if="visibleColumns.length !== 0"
-                data-key="CustomerExtendedList"
-                :visible-columns="visibleColumns"
-            />
-        </QScrollArea>
-    </QDrawer>
-    <!-- <VnSubToolbar>
-        <template #st-actions>
-            <TableVisibleColumns
-                :all-columns="allColumnNames"
-                table-code="clientsDetail"
-                labels-traductions-path="customer.extendedList.tableVisibleColumns"
-                @on-config-saved="
-                    visibleColumns = ['customerStatus', ...$event, 'actions']
-                "
-            />
-        </template>
-    </VnSubToolbar> -->
-
     <VnTable
         ref="tableRef"
         data-key="CustomerExtendedList"
@@ -621,18 +299,6 @@ function handleLocation(data, location) {
             formInitialData: {
                 active: true,
                 isEqualizated: false,
-                name: 'FFFF',
-                socialName: 'FFFFFF',
-                fi: '58233369H',
-                salesPersonFk: 15,
-                street: 'FASD',
-                businessTypeFk: 'individual',
-                email: 'adddssssd@asd.es',
-                userName: 'asdasdax',
-                postcode: '46680',
-                city: 'Algemesi',
-                provinceFk: 1,
-                countryFk: 1,
             },
         }"
         order="id DESC"
@@ -660,52 +326,6 @@ function handleLocation(data, location) {
             >
             </VnLocation>
         </template>
-        <!-- redirect="customer" -->
-        <!--
-            default-mode="table"
-            <template #body-cell="{ col, value }">
-            <QTd @click="stopEventPropagation($event, col)">
-                {{ value }}
-            </QTd>
-        </template>
-        <template #body-cell-id="props">
-            <QTd @click="stopEventPropagation($event, props.col)">
-                <component
-                    :is="tableColumnComponents[props.col.name].component"
-                    class="col-content"
-                    v-bind="tableColumnComponents[props.col.name].props(props)"
-                    @click="tableColumnComponents[props.col.name].event(props)"
-                >
-                    <CustomerDescriptorProxy :id="props.row.id" />
-                    {{ props.row.id }}
-                </component>
-            </QTd>
-        </template>
-        <template #body-cell-salesPersonFk="props">
-            <QTd @click="stopEventPropagation($event, props.col)">
-                <component
-                    v-if="props.row.salesPerson"
-                    class="col-content"
-                    :is="tableColumnComponents[props.col.name].component"
-                    v-bind="tableColumnComponents[props.col.name].props(props)"
-                    @click="tableColumnComponents[props.col.name].event(props)"
-                >
-                    <WorkerDescriptorProxy :id="props.row.salesPersonFk" />
-                    {{ props.row.salesPerson }}
-                </component>
-                <span class="col-content" v-else>-</span>
-            </QTd>
-        </template>
-        <template #body-cell-actions="props">
-            <QTd @click="stopEventPropagation($event, props.col)">
-                <component
-                    :is="tableColumnComponents[props.col.name].component"
-                    class="col-content"
-                    v-bind="tableColumnComponents[props.col.name].props(props)"
-                    @click="tableColumnComponents[props.col.name].event(props)"
-                />
-            </QTd>
-        </template> -->
     </VnTable>
 </template>
 

From d50e2ada0fd3bec3a98e092aabc032226390c4f8 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Thu, 23 May 2024 10:39:14 +0200
Subject: [PATCH 023/167] feat(VnTable): refs #6825 actions sticky

---
 src/components/VnTable/VnTable.vue | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index b7ac12237..853c64ed6 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -228,6 +228,9 @@ defineExpose({
                         />
                     </QTh>
                 </template>
+                <template #header-cell-tableActions>
+                    <QTh auto-width class="sticky" />
+                </template>
                 <template #body-cell-tableStatus="{ col, row }">
                     <QTd auto-width :class="`text-${col.align ?? 'left'}`">
                         <VnTableChip :columns="splittedColumns.columnChips" :row="row">
@@ -253,7 +256,11 @@ defineExpose({
                     </QTd>
                 </template>
                 <template #body-cell-tableActions="{ col, row }">
-                    <QTd auto-width :class="`text-${col.align ?? 'left'} `">
+                    <QTd
+                        auto-width
+                        :class="`text-${col.align ?? 'left'}`"
+                        class="sticky no-padding"
+                    >
                         <QBtn
                             v-for="(btn, index) of col.actions"
                             :key="index"
@@ -357,7 +364,7 @@ defineExpose({
             </QTable>
         </template>
     </VnPaginate>
-    <QPageSticky v-if="create" :offset="[20, 20]">
+    <QPageSticky v-if="create" :offset="[20, 20]" style="z-index: 2">
         <QBtn @click="showForm = !showForm" color="primary" fab icon="add" />
         <QTooltip>
             {{ create.title }}
@@ -496,8 +503,12 @@ defineExpose({
     }
     .sticky {
         position: sticky;
+        right: 0;
         z-index: 1;
     }
+    td.sticky {
+        background-color: var(--q-dark);
+    }
 }
 
 .vn-label-value {

From 859cdd891a82e4326697dd40d9538ef03e8cd603 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Thu, 23 May 2024 10:39:17 +0200
Subject: [PATCH 024/167] feat(VnTable): refs #6825 actions sticky

---
 src/pages/Customer/ExtendedList/CustomerExtendedList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
index 81da2b407..f03868789 100644
--- a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
+++ b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
@@ -204,7 +204,7 @@ const columns = computed(() => [
         name: 'isFreezed',
         chip: {
             color: null,
-            condition: (v, { isActive, isFreezed }) => isActive && isFreezed,
+            condition: (value) => value,
             icon: 'vn:frozen',
         },
         component: 'checkbox',

From 2ec4e3540f1e96b6b67bd63ad41ffda7d13d3272 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Thu, 23 May 2024 10:44:41 +0200
Subject: [PATCH 025/167] fix(VnTable): refs #6825 fix click sticky column

---
 src/components/VnTable/VnChip.vue  | 7 ++++---
 src/components/VnTable/VnTable.vue | 1 +
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/VnTable/VnChip.vue b/src/components/VnTable/VnChip.vue
index 626c16c45..2569eec37 100644
--- a/src/components/VnTable/VnChip.vue
+++ b/src/components/VnTable/VnChip.vue
@@ -25,11 +25,12 @@ function stopEventPropagation(event) {
         <QChip
             v-if="col.chip.condition(row[col.name], row)"
             :title="col.label"
-            :class="
+            :class="[
                 col.chip.color
                     ? col.chip.color(row)
-                    : !col.chip.icon && 'bg-chip-secondary'
-            "
+                    : !col.chip.icon && 'bg-chip-secondary',
+                col.chip.icon && 'q-px-none',
+            ]"
             dense
             square
         >
diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index 853c64ed6..e85a3692e 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -260,6 +260,7 @@ defineExpose({
                         auto-width
                         :class="`text-${col.align ?? 'left'}`"
                         class="sticky no-padding"
+                        @click="stopEventPropagation($event)"
                     >
                         <QBtn
                             v-for="(btn, index) of col.actions"

From 89e1b3581a4c668e72fd82691adf86e5a06c1363 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Thu, 23 May 2024 13:50:44 +0200
Subject: [PATCH 026/167] feat(VnTable): refs #6825 use checkbox if startsWith
 'is' or 'has'

---
 src/components/VnTable/VnColumn.vue           |  5 ++++
 src/components/VnTable/VnFilter.vue           | 30 +++++++++----------
 src/components/VnTable/VnTable.vue            |  4 +--
 .../ExtendedList/CustomerExtendedList.vue     | 11 -------
 4 files changed, 21 insertions(+), 29 deletions(-)

diff --git a/src/components/VnTable/VnColumn.vue b/src/components/VnTable/VnColumn.vue
index 416748ae8..d8cd25033 100644
--- a/src/components/VnTable/VnColumn.vue
+++ b/src/components/VnTable/VnColumn.vue
@@ -99,6 +99,11 @@ const col = computed(() => {
             ...specific.forceAttrs,
         };
     }
+    if (
+        (newColumn.name.startsWith('is') || newColumn.name.startsWith('has')) &&
+        !newColumn.component
+    )
+        newColumn.component = 'checkbox';
     if ($props.default && !newColumn.component) newColumn.component = $props.default;
 
     return newColumn;
diff --git a/src/components/VnTable/VnFilter.vue b/src/components/VnTable/VnFilter.vue
index 871a82318..000683670 100644
--- a/src/components/VnTable/VnFilter.vue
+++ b/src/components/VnTable/VnFilter.vue
@@ -66,7 +66,7 @@ const components = {
         event: updateEvent,
         attrs: {
             dense: true,
-            class: 'q-pa-sm q-mt-md',
+            class: $props.showTitle ? 'q-py-sm q-mt-md' : 'q-px-md q-py-xs',
             'toggle-indeterminate': true,
         },
         forceAttrs: {
@@ -89,7 +89,7 @@ const components = {
 
 async function addFilter(value) {
     if (value && typeof value === 'object') value = model.value;
-    value = value == '' ? null : value;
+    value = value === '' ? null : value;
     let field = columnFilter.value?.name ?? $props.column.name;
     const toFilter = { [field]: value };
 
@@ -97,9 +97,9 @@ async function addFilter(value) {
 }
 
 function alignRow() {
-    if ($props.column.align == 'left') return 'justify-start';
-    if ($props.column.align == 'right') return 'justify-end';
-    return 'justify-center';
+    if ($props.column.align == 'left') return 'justify-start items-start';
+    if ($props.column.align == 'right') return 'justify-end items-end';
+    return 'flex-center';
 }
 </script>
 <template>
@@ -112,19 +112,17 @@ function alignRow() {
     </div>
     <div
         v-if="columnFilter !== false && column.name != 'tableActions'"
-        class="row no-wrap"
+        class="full-width"
         :class="alignRow()"
     >
-        <span :class="$props.column.component != 'checkbox' ? 'full-width' : alignRow()">
-            <VnTableColumn
-                :column="$props.column"
-                :row="{}"
-                default="input"
-                v-model="model"
-                :components="components"
-                component-prop="columnFilter"
-            />
-        </span>
+        <VnTableColumn
+            :column="$props.column"
+            :row="{}"
+            default="input"
+            v-model="model"
+            :components="components"
+            component-prop="columnFilter"
+        />
     </div>
     <div v-else-if="showTitle" style="height: 45px"><!-- fixme! --></div>
 </template>
diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index e85a3692e..703b24c48 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -479,7 +479,7 @@ defineExpose({
 .vnTable {
     thead tr th {
         position: sticky;
-        z-index: 1;
+        z-index: 2;
     }
     thead tr:first-child th {
         top: 0;
@@ -505,10 +505,10 @@ defineExpose({
     .sticky {
         position: sticky;
         right: 0;
-        z-index: 1;
     }
     td.sticky {
         background-color: var(--q-dark);
+        z-index: 1;
     }
 }
 
diff --git a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
index f03868789..f857abf4c 100644
--- a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
+++ b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
@@ -177,25 +177,21 @@ const columns = computed(() => [
             condition: (value) => !value,
             icon: 'vn:disabled',
         },
-        component: 'checkbox',
     },
     {
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.isVies'),
         name: 'isVies',
-        component: 'checkbox',
     },
     {
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.isTaxDataChecked'),
         name: 'isTaxDataChecked',
-        component: 'checkbox',
     },
     {
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.isEqualizated'),
         name: 'isEqualizated',
-        component: 'checkbox',
         created: true,
     },
     {
@@ -207,43 +203,36 @@ const columns = computed(() => [
             condition: (value) => value,
             icon: 'vn:frozen',
         },
-        component: 'checkbox',
     },
     {
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.hasToInvoice'),
         name: 'hasToInvoice',
-        component: 'checkbox',
     },
     {
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.hasToInvoiceByAddress'),
         name: 'hasToInvoiceByAddress',
-        component: 'checkbox',
     },
     {
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.isToBeMailed'),
         name: 'isToBeMailed',
-        component: 'checkbox',
     },
     {
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.hasLcr'),
         name: 'hasLcr',
-        component: 'checkbox',
     },
     {
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.hasCoreVnl'),
         name: 'hasCoreVnl',
-        component: 'checkbox',
     },
     {
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.hasSepaVnl'),
         name: 'hasSepaVnl',
-        component: 'checkbox',
     },
     {
         align: 'right',

From 98159de2573746932c62154ab24d1ba4cd732e12 Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Thu, 23 May 2024 13:55:06 +0200
Subject: [PATCH 027/167] refactor: refs #6896 end migration orders

---
 src/pages/Order/Card/OrderCatalogFilter.vue | 152 ++++++-----
 src/pages/Order/Card/OrderCatalogItem.vue   |   5 +-
 src/pages/Order/Card/OrderForm.vue          |  65 +++--
 src/pages/Order/OrderCatalog.vue            |  20 +-
 src/pages/Order/OrderLines.vue              | 270 +++++++++++++-------
 5 files changed, 330 insertions(+), 182 deletions(-)

diff --git a/src/pages/Order/Card/OrderCatalogFilter.vue b/src/pages/Order/Card/OrderCatalogFilter.vue
index 04748a8c8..af593008f 100644
--- a/src/pages/Order/Card/OrderCatalogFilter.vue
+++ b/src/pages/Order/Card/OrderCatalogFilter.vue
@@ -3,14 +3,15 @@ import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import axios from 'axios';
-
 import VnInput from 'components/common/VnInput.vue';
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnSelect from 'components/common/VnSelect.vue';
 import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
+import { useValidator } from 'src/composables/useValidator';
 
 const { t } = useI18n();
+
 const route = useRoute();
 const props = defineProps({
     dataKey: {
@@ -21,32 +22,34 @@ const props = defineProps({
         type: Array,
         required: true,
     },
+    tagValue: {
+        type: Array,
+        required: true,
+    },
 });
 
 const categoryList = ref(null);
 const selectedCategoryFk = ref(null);
 const typeList = ref(null);
 const selectedTypeFk = ref(null);
-
+const validationsStore = useValidator();
+const selectedOrder = ref(null);
+const selectedOrderField = ref(null);
+const moreFields = ref([]);
+const moreFieldsOrder = ref([]);
+const createValue = (val, done) => {
+    if (val.length > 2) {
+        // if (!tagOptions.value.includes(val)) {
+        // done(tagOptions.value, 'add-unique');
+        // }
+        tagValues.value.push({ value: val });
+    }
+};
 const resetCategory = () => {
     selectedCategoryFk.value = null;
     typeList.value = null;
 };
 
-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();
@@ -72,21 +75,6 @@ const loadTypes = async (categoryFk) => {
     typeList.value = data;
 };
 
-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(() =>
     (categoryList.value || []).find(
         (category) => category?.id === selectedCategoryFk.value
@@ -109,12 +97,25 @@ function exprBuilder(param, value) {
 
 const selectedTag = ref(null);
 const tagValues = ref([{}]);
-const tagOptions = ref(null);
-const isButtonDisabled = computed(
-    () => !selectedTag.value || tagValues.value.some((item) => !item.value)
-);
+const tagOptions = ref([]);
 
 const applyTagFilter = (params, search) => {
+    // console.log('params: ', params);
+    // if (!selectedTag.value) {
+    //     console.log('values: ', selectedTag?.value?.name);
+
+    //     params.tagGroups.push(
+    //         JSON.stringify({
+    //             values: selectedTag?.value?.name,
+    //             // tagSelection: {
+    //             //     ...selectedTag.value,
+    //             //     orgShowField: selectedTag?.value?.name,
+    //             // },
+    //         })
+    //     );
+    //     search();
+    //     return;
+    // }
     if (!tagValues.value?.length) {
         params.tagGroups = null;
         search();
@@ -125,12 +126,12 @@ const applyTagFilter = (params, search) => {
     }
     params.tagGroups.push(
         JSON.stringify({
-            values: tagValues.value,
+            values: tagValues.value.filter((obj) => Object.keys(obj).length > 0),
             tagSelection: {
                 ...selectedTag.value,
-                orgShowField: selectedTag.value.name,
+                orgShowField: selectedTag?.value?.name,
             },
-            tagFk: selectedTag.value.tagFk,
+            tagFk: selectedTag?.value?.tagFk,
         })
     );
     search();
@@ -155,12 +156,6 @@ const onOrderFieldChange = (value, params, search) => {
     search();
 };
 
-const onOrderChange = (value, params, search) => {
-    const orderBy = Object.assign({}, orderByParam.value, { way: value.way });
-    params.orderBy = JSON.stringify(orderBy);
-    search();
-};
-
 const setCategoryList = (data) => {
     categoryList.value = (data || [])
         .filter((category) => category.display)
@@ -168,6 +163,10 @@ const setCategoryList = (data) => {
             ...category,
             icon: `vn:${(category.icon || '').split('-')[1]}`,
         }));
+    const _moreFields = ['ASC', 'DESC'];
+    const _moreFieldsTypes = ['Relevancy', 'ColorAndPrice', 'Name', 'Price'];
+    moreFields.value = useLang(_moreFields);
+    moreFieldsOrder.value = useLang(_moreFieldsTypes);
 };
 
 const getCategoryClass = (category, params) => {
@@ -175,6 +174,20 @@ const getCategoryClass = (category, params) => {
         return 'active';
     }
 };
+
+const useLang = (values) => {
+    const { models } = validationsStore;
+    const properties = models.Item?.properties || {};
+    return values.map((name) => {
+        let prop = properties[name];
+        const label = t(`params.${name}`);
+        return {
+            name,
+            label,
+            type: prop ? prop.type : null,
+        };
+    });
+};
 </script>
 
 <template>
@@ -184,7 +197,6 @@ const getCategoryClass = (category, params) => {
         :hidden-tags="['orderFk', 'orderBy']"
         :expr-builder="exprBuilder"
         :custom-tags="['tagGroups']"
-        @init="onFilterInit"
         @remove="clearFilter"
     >
         <template #tags="{ tag, formatFn }">
@@ -274,17 +286,13 @@ const getCategoryClass = (category, params) => {
             <QItem class="q-my-md">
                 <QItemSection>
                     <VnSelect
-                        :label="t('params.order')"
+                        :label="t('Order')"
                         v-model="selectedOrder"
-                        :options="orderList || []"
-                        option-value="way"
-                        option-label="name"
+                        :options="moreFields"
+                        option-label="label"
                         dense
                         outlined
                         rounded
-                        :emit-value="false"
-                        use-input
-                        :is-clearable="false"
                         @update:model-value="
                             (value) => onOrderChange(value, params, searchFn)
                         "
@@ -294,17 +302,14 @@ const getCategoryClass = (category, params) => {
             <QItem class="q-mb-md">
                 <QItemSection>
                     <VnSelect
-                        :label="t('params.order')"
+                        :label="t('Order by')"
                         v-model="selectedOrderField"
-                        :options="OrderFields || []"
-                        option-value="field"
-                        option-label="name"
+                        :options="moreFieldsOrder"
+                        option-label="label"
+                        option-value="name"
                         dense
                         outlined
                         rounded
-                        :emit-value="false"
-                        use-input
-                        :is-clearable="false"
                         @update:model-value="
                             (value) => onOrderFieldChange(value, params, searchFn)
                         "
@@ -341,10 +346,9 @@ const getCategoryClass = (category, params) => {
                     class="filter-input"
                 />
                 <VnSelect
-                    v-else
                     :label="t('params.value')"
                     v-model="value.value"
-                    :options="tagOptions || []"
+                    :options="tagValue || []"
                     option-value="value"
                     option-label="value"
                     dense
@@ -352,17 +356,18 @@ const getCategoryClass = (category, params) => {
                     rounded
                     emit-value
                     use-input
-                    :disable="!selectedTag"
                     class="filter-input"
-                />
-
+                    @new-value="createValue"
+                >
+                </VnSelect>
                 <FetchData
-                    v-if="selectedTag && !selectedTag.isFree"
-                    :url="`Tags/${selectedTag?.id}/filterValue`"
+                    v-if="selectedTag"
+                    :url="`Tags/${selectedTag}/filterValue`"
                     limit="30"
                     auto-load
                     @on-fetch="(data) => (tagOptions = data)"
                 />
+                {{ console.log('selectedTag: ', selectedTag) }}
 
                 <QIcon
                     name="delete"
@@ -388,7 +393,6 @@ const getCategoryClass = (category, params) => {
                         rounded
                         type="button"
                         unelevated
-                        :disable="isButtonDisabled"
                         @click.stop="applyTagFilter(params, searchFn)"
                     />
                 </QItemSection>
@@ -453,6 +457,12 @@ en:
         tag: Tag
         value: Value
         order: Order
+        ASC: Ascendant
+        DESC: Descendant
+        Relevancy: Relevancy
+        ColorAndPrice: Color and price
+        Name: Name
+        Price: Price
 es:
     params:
         type: Tipo
@@ -460,6 +470,14 @@ es:
         tag: Etiqueta
         value: Valor
         order: Orden
+        ASC: Ascendiente
+        DESC: Descendiente
+        Relevancy: Relevancia
+        ColorAndPrice: Color y precio
+        Name: Nombre
+        Price: Precio
+    Order: Orden
+    Order by: Ordenar por
     Plant: Planta
     Flower: Flor
     Handmade: Confección
diff --git a/src/pages/Order/Card/OrderCatalogItem.vue b/src/pages/Order/Card/OrderCatalogItem.vue
index 0e1005493..a2c78305e 100644
--- a/src/pages/Order/Card/OrderCatalogItem.vue
+++ b/src/pages/Order/Card/OrderCatalogItem.vue
@@ -59,7 +59,10 @@ const dialog = ref(null);
                 </template>
                 <div class="footer">
                     <div class="price">
-                        <p>{{ item.available }} {{ t('to') }} {{ item.price }}</p>
+                        <p>
+                            {{ item.available }} {{ t('to') }}
+                            {{ toCurrency(item.price) }}
+                        </p>
                         <QIcon name="add_circle" class="icon">
                             <QTooltip>{{ t('globals.add') }}</QTooltip>
                             <QPopupProxy ref="dialog">
diff --git a/src/pages/Order/Card/OrderForm.vue b/src/pages/Order/Card/OrderForm.vue
index 08ed074e5..26188f440 100644
--- a/src/pages/Order/Card/OrderForm.vue
+++ b/src/pages/Order/Card/OrderForm.vue
@@ -1,6 +1,6 @@
 <script setup>
-import { useRoute } from 'vue-router';
-import { reactive, ref, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import axios from 'axios';
 import { useState } from 'composables/useState';
@@ -16,6 +16,7 @@ const route = useRoute();
 const state = useState();
 const ORDER_MODEL = 'order';
 
+const router = useRouter();
 const isNew = Boolean(!route.params.id);
 const initialFormState = reactive({
     clientFk: null,
@@ -26,21 +27,20 @@ const initialFormState = reactive({
 const clientList = ref([]);
 const agencyList = ref([]);
 const addressList = ref([]);
+const clientId = ref(null);
 
-const onClientsFetched = async (data) => {
-    try {
-        clientList.value = data;
-        initialFormState.clientFk = Number(route.query?.clientFk) || null;
+const onClientsFetched = (data) => {
+    clientList.value = data;
+    initialFormState.clientFk = Number(route.query?.clientFk) || null;
+    clientId.value = initialFormState.clientFk;
 
-        if (initialFormState.clientFk) {
-            const { defaultAddressFk } = clientList.value.find(
-                (client) => client.id === initialFormState.clientFk
-            );
-
-            if (defaultAddressFk) await fetchAddressList(defaultAddressFk);
-        }
-    } catch (err) {
-        console.error('Error fetching clients', err);
+    const client = clientList.value.find(
+        (client) => client.id === initialFormState.clientFk
+    );
+    if (client && client.defaultAddressFk) {
+        fetchAddressList(client.defaultAddressFk);
+    } else {
+        throw new Error(t(`No default address found for the client`));
     }
 };
 
@@ -55,7 +55,6 @@ const fetchAddressList = async (addressId) => {
             },
         });
         addressList.value = data;
-        //  Set address by default
         if (addressList.value?.length === 1) {
             state.get(ORDER_MODEL).addressFk = addressList.value[0].id;
         }
@@ -121,6 +120,21 @@ const orderFilter = {
         },
     ],
 };
+
+const onClientChange = async (clientId) => {
+    try {
+        const { data } = await axios.get(`Clients/${clientId}`);
+        console.log('info cliente: ', data);
+
+        await fetchAddressList(data.defaultAddressFk);
+    } catch (error) {
+        console.error('Error al cambiar el cliente:', error);
+    }
+};
+
+async function onDataSaved(data) {
+    await router.push({ path: `/order/${data}/catalog` });
+}
 </script>
 
 <template>
@@ -134,13 +148,15 @@ const orderFilter = {
     <div class="q-pa-md">
         <FormModel
             :url="!isNew ? `Orders/${route.params.id}` : null"
-            :url-create="isNew ? 'Orders/new' : null"
+            :url-create="'Orders/new'"
+            @on-data-saved="onDataSaved"
             :model="ORDER_MODEL"
             :form-initial-data="isNew ? initialFormState : null"
             :observe-form-changes="!isNew"
             :mapper="isNew ? orderMapper : null"
             :filter="orderFilter"
             @on-fetch="fetchOrderDetails"
+            auto-load
         >
             <template #form="{ data }">
                 <VnRow class="row q-gutter-md q-mb-md">
@@ -151,9 +167,7 @@ const orderFilter = {
                         option-value="id"
                         option-label="name"
                         hide-selected
-                        @update:model-value="
-                            (client) => fetchAddressList(client.defaultAddressFk)
-                        "
+                        @update:model-value="onClientChange"
                     >
                         <template #option="scope">
                             <QItem v-bind="scope.itemProps">
@@ -170,12 +184,10 @@ const orderFilter = {
                         v-model="data.addressFk"
                         :options="addressList"
                         option-value="id"
-                        option-label="nickname"
+                        option-label="street"
                         hide-selected
                         :disable="!addressList?.length"
-                        @update:model-value="
-                            () => fetchAgencyList(data.landed, data.addressFk)
-                        "
+                        @update:model-value="onAddressChange"
                     >
                         <template #option="scope">
                             <QItem v-bind="scope.itemProps">
@@ -216,3 +228,8 @@ const orderFilter = {
         </FormModel>
     </div>
 </template>
+
+<i18n>
+    es:
+        No default address found for the client: No hay ninguna dirección asociada a este cliente.
+</i18n>
diff --git a/src/pages/Order/OrderCatalog.vue b/src/pages/Order/OrderCatalog.vue
index 1ed03c47d..c5d379d1e 100644
--- a/src/pages/Order/OrderCatalog.vue
+++ b/src/pages/Order/OrderCatalog.vue
@@ -35,6 +35,20 @@ function extractTags(items) {
         });
     });
     tags.value = resultTags;
+    extractValueTags(items);
+}
+
+const tagValue = ref([]);
+
+function extractValueTags(items) {
+    const resultValueTags = items.flatMap((x) =>
+        Object.keys(x)
+            .filter((k) => /^value\d+$/.test(k))
+            .map((v) => x[v])
+            .filter((v) => v)
+            .sort()
+    );
+    tagValue.value = resultValueTags;
 }
 </script>
 
@@ -66,7 +80,11 @@ function extractTags(items) {
     </Teleport>
     <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
         <QScrollArea class="fit text-grey-8">
-            <OrderCatalogFilter data-key="OrderCatalogList" :tags="tags" />
+            <OrderCatalogFilter
+                data-key="OrderCatalogList"
+                :tag-value="tagValue"
+                :tags="tags"
+            />
         </QScrollArea>
     </QDrawer>
     <QPage class="column items-center q-pa-md">
diff --git a/src/pages/Order/OrderLines.vue b/src/pages/Order/OrderLines.vue
index 5a31598e1..89860ad86 100644
--- a/src/pages/Order/OrderLines.vue
+++ b/src/pages/Order/OrderLines.vue
@@ -7,13 +7,13 @@ import { useQuasar } from 'quasar';
 import VnPaginate from 'components/ui/VnPaginate.vue';
 import FetchData from 'components/FetchData.vue';
 import VnLv from 'components/ui/VnLv.vue';
-import CardList from 'components/ui/CardList.vue';
 import FetchedTags from 'components/ui/FetchedTags.vue';
 import VnConfirm from 'components/ui/VnConfirm.vue';
 
 import { toCurrency, toDate } from 'src/filters';
 import { useSession } from 'composables/useSession';
 import axios from 'axios';
+import ItemDescriptorProxy from '../Item/Card/ItemDescriptorProxy.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -43,6 +43,7 @@ function confirmRemove(item) {
 }
 
 async function remove(item) {
+    console.log('item: ', item);
     await axios.post('OrderRows/removes', {
         actualOrderId: route.params.id,
         rows: [item.id],
@@ -61,6 +62,35 @@ async function confirmOrder() {
         type: 'positive',
     });
 }
+
+const detailsColumns = ref([
+    {
+        name: 'item',
+        label: t('order.summary.item'),
+        field: (row) => row?.item?.id,
+        sortable: true,
+    },
+    {
+        name: 'description',
+        label: t('globals.description'),
+        field: (row) => row?.item?.name,
+    },
+    {
+        name: 'quantity',
+        label: t('order.summary.quantity'),
+        field: (row) => row?.quantity,
+    },
+    {
+        name: 'price',
+        label: t('order.summary.price'),
+        field: (row) => toCurrency(row?.price),
+    },
+    {
+        name: 'amount',
+        label: t('order.summary.amount'),
+        field: (row) => toCurrency(row?.quantity * row?.price),
+    },
+]);
 </script>
 
 <template>
@@ -83,30 +113,33 @@ async function confirmOrder() {
         auto-load
     />
     <QPage :key="componentKey" class="column items-center q-pa-md">
-        <div class="vn-card-list">
+        <div class="order-list">
             <div v-if="!orderSummary.total" class="no-result">
                 {{ t('globals.noResults') }}
             </div>
-            <QCard v-else class="order-lines-summary q-pa-lg">
-                <p class="header text-right block">
-                    {{ t('summary') }}
-                </p>
-                <VnLv
-                    v-if="orderSummary.vat && orderSummary.total"
-                    :label="t('subtotal')"
-                    :value="toCurrency(orderSummary.total - orderSummary.vat)"
-                />
-                <VnLv
-                    v-if="orderSummary.vat"
-                    :label="t('VAT')"
-                    :value="toCurrency(orderSummary?.vat)"
-                />
-                <VnLv
-                    v-if="orderSummary.total"
-                    :label="t('total')"
-                    :value="toCurrency(orderSummary?.total)"
-                />
-            </QCard>
+
+            <QDrawer side="right" :width="300" show-if-above>
+                <QCard class="order-lines-summary q-pa-lg">
+                    <p class="header text-right block">
+                        {{ t('summary') }}
+                    </p>
+                    <VnLv
+                        v-if="orderSummary.vat && orderSummary.total"
+                        :label="t('subtotal')"
+                        :value="toCurrency(orderSummary.total - orderSummary.vat)"
+                    />
+                    <VnLv
+                        v-if="orderSummary.vat"
+                        :label="t('VAT')"
+                        :value="toCurrency(orderSummary?.vat)"
+                    />
+                    <VnLv
+                        v-if="orderSummary.total"
+                        :label="t('total')"
+                        :value="toCurrency(orderSummary?.total)"
+                    />
+                </QCard>
+            </QDrawer>
             <VnPaginate
                 data-key="OrderLines"
                 url="OrderRows"
@@ -125,74 +158,108 @@ async function confirmOrder() {
                 }"
             >
                 <template #body="{ rows }">
-                    <div class="catalog-list q-mt-xl">
-                        <CardList
-                            v-for="row in rows"
-                            :key="row.id"
-                            :id="row.id"
-                            :title="row?.item?.name"
-                            class="cursor-inherit"
+                    <div class="q-pa-md">
+                        <QTable
+                            :columns="detailsColumns"
+                            :rows="rows"
+                            flat
+                            style="text-align: center"
                         >
-                            <template #title>
-                                <div class="flex items-center">
-                                    <div class="image-wrapper q-mr-md">
+                            <template #header="props">
+                                <QTr :props="props" class="tr-header">
+                                    <QTh></QTh>
+                                    <QTh auto-width>{{ t('item') }}</QTh>
+                                    <QTh>{{ t('globals.description') }}</QTh>
+                                    <QTh>{{ t('warehouse') }}</QTh>
+                                    <QTh>{{ t('shipped') }}</QTh>
+                                    <QTh auto-width>
+                                        {{ t('order.summary.quantity') }}
+                                    </QTh>
+                                    <QTh auto-width>{{ t('order.summary.price') }}</QTh>
+                                    <QTh auto-width>{{ t('amount') }}</QTh>
+                                    <QTh></QTh>
+                                </QTr>
+                            </template>
+                            <template #body="props">
+                                <QTr :props="props">
+                                    <QTd>
+                                        {{ console.log('props: ', props.row.item.id) }}
                                         <QImg
-                                            :src="`/api/Images/catalog/50x50/${row?.item?.id}/download?access_token=${token}`"
+                                            :src="`/api/Images/catalog/50x50/${props.row.item?.id}/download?access_token=${token}`"
                                             spinner-color="primary"
                                             :ratio="1"
                                             height="50"
                                             width="50"
-                                            class="image"
+                                            class="image-wrapper"
+                                            style="cursor: pointer"
                                         />
-                                    </div>
-                                    <div
-                                        class="title text-primary text-weight-bold text-h5"
+                                    </QTd>
+                                    <QTd key="item" :props="props" class="item">
+                                        <span class="link">
+                                            <QBtn flat>
+                                                {{ props.row.item?.id }}
+                                            </QBtn>
+                                            <ItemDescriptorProxy
+                                                :id="props.row.item?.id"
+                                            />
+                                        </span>
+                                    </QTd>
+                                    <QTd
+                                        key="description"
+                                        :props="props"
+                                        class="description-cell"
                                     >
-                                        {{ row?.item?.name }}
-                                    </div>
-                                    <QChip class="q-chip-color" outline size="sm">
-                                        {{ t('ID') }}: {{ row.id }}
-                                    </QChip>
-                                </div>
+                                        <div class="row full-width justify-between">
+                                            {{ props.row.item.name }}
+                                            <div
+                                                v-if="props.row.item.subName"
+                                                class="subName"
+                                            >
+                                                {{ props.row.item.subName.toUpperCase() }}
+                                            </div>
+                                        </div>
+                                        <FetchedTags
+                                            :item="props.row.item"
+                                            :max-length="6"
+                                            class="fetched-tags"
+                                        />
+                                    </QTd>
+                                    <QTd>
+                                        {{ props.row.warehouse.name }}
+                                    </QTd>
+                                    <QTd>
+                                        {{ toDate(props.row.shipped) }}
+                                    </QTd>
+                                    <QTd key="quantity" :props="props">
+                                        {{ props.row.quantity }}
+                                    </QTd>
+                                    <QTd key="price" :props="props">
+                                        {{ toCurrency(props.row.price) }}
+                                    </QTd>
+                                    <QTd key="amount" :props="props">
+                                        {{
+                                            toCurrency(
+                                                props.row?.quantity * props.row?.price
+                                            )
+                                        }}
+                                    </QTd>
+                                    <QTd>
+                                        <QIcon
+                                            name="delete"
+                                            color="primary"
+                                            size="sm"
+                                            class="cursor-pointer"
+                                            @click.stop="confirmRemove(props.row)"
+                                            style="margin-left: 40%"
+                                        >
+                                            <QTooltip>{{
+                                                t('Remove thermograph')
+                                            }}</QTooltip>
+                                        </QIcon>
+                                    </QTd>
+                                </QTr>
                             </template>
-                            <template #list-items>
-                                <div class="q-mb-sm">
-                                    <span class="text-uppercase subname">
-                                        {{ row.item.subName }}
-                                    </span>
-                                    <fetched-tags :item="row.item" :max-length="5" />
-                                </div>
-                                <VnLv :label="t('item')" :value="String(row.item.id)" />
-                                <VnLv
-                                    :label="t('warehouse')"
-                                    :value="row.warehouse.name"
-                                />
-                                <VnLv
-                                    :label="t('shipped')"
-                                    :value="toDate(row.shipped)"
-                                />
-                                <VnLv
-                                    :label="t('quantity')"
-                                    :value="String(row.quantity)"
-                                />
-                                <VnLv
-                                    :label="t('price')"
-                                    :value="toCurrency(row.price)"
-                                />
-                                <VnLv
-                                    :label="t('amount')"
-                                    :value="toCurrency(row.price * row.quantity)"
-                                />
-                            </template>
-                            <template #actions v-if="!order?.isConfirmed">
-                                <QBtn
-                                    :label="t('remove')"
-                                    @click.stop="confirmRemove(row)"
-                                    color="primary"
-                                    style="margin-top: 15px"
-                                />
-                            </template>
-                        </CardList>
+                        </QTable>
                     </div>
                 </template>
             </VnPaginate>
@@ -239,14 +306,7 @@ async function confirmOrder() {
 .image-wrapper {
     height: 50px;
     width: 50px;
-
-    .image {
-        border-radius: 50%;
-    }
-}
-
-.subname {
-    color: var(--vn-label-color);
+    border-radius: 50%;
 }
 
 .no-result {
@@ -255,6 +315,38 @@ async function confirmOrder() {
     color: var(--vn-label-color);
     text-align: center;
 }
+
+.description {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: left;
+    height: auto;
+    padding-top: 12px;
+    padding-bottom: 12px;
+
+    .name {
+        display: flex;
+        align-items: center;
+        padding-bottom: 8px;
+
+        & > * {
+            flex: 1;
+        }
+    }
+}
+
+.description-cell {
+    width: 25%;
+}
+.fetched-tags {
+    max-width: 90%;
+}
+
+.subName {
+    text-transform: uppercase;
+    color: var(--vn-label-color);
+}
 </style>
 <i18n>
 en:

From 6e59f3ae1254a0ab195a5ab6afa6d7dd137d8aca Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Thu, 23 May 2024 14:05:58 +0200
Subject: [PATCH 028/167] refactor: refs #6896 fix qdrawer

---
 src/pages/Order/OrderLines.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Order/OrderLines.vue b/src/pages/Order/OrderLines.vue
index 89860ad86..71452522a 100644
--- a/src/pages/Order/OrderLines.vue
+++ b/src/pages/Order/OrderLines.vue
@@ -118,7 +118,7 @@ const detailsColumns = ref([
                 {{ t('globals.noResults') }}
             </div>
 
-            <QDrawer side="right" :width="300" show-if-above>
+            <QDrawer side="right" :width="270" show-if-above>
                 <QCard class="order-lines-summary q-pa-lg">
                     <p class="header text-right block">
                         {{ t('summary') }}

From d73b5b6f4c8fe2df9d609f4f4975814bd16c7903 Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Thu, 23 May 2024 15:06:57 +0200
Subject: [PATCH 029/167] refactor: refs #6739 changed router.push

---
 src/components/TransferInvoiceForm.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/TransferInvoiceForm.vue b/src/components/TransferInvoiceForm.vue
index 418257304..c79c23741 100644
--- a/src/components/TransferInvoiceForm.vue
+++ b/src/components/TransferInvoiceForm.vue
@@ -81,8 +81,7 @@ const transferInvoice = async () => {
 
         const { data } = await axios.post('InvoiceOuts/transferInvoice', params);
         notify(t('Transferred invoice'), 'positive');
-        closeForm();
-        router.push('InvoiceOutSummary', { id: data.id });
+        if (data.id) router.push({ name: 'InvoiceOutSummary', params: { id: data.id } });
     } catch (err) {
         console.error('Error transfering invoice', err);
     }

From f0b1919157e565950e8fb686dfda53717b151d29 Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Thu, 23 May 2024 15:08:03 +0200
Subject: [PATCH 030/167] refactor: refs #6739 deleted useless const

---
 src/components/TransferInvoiceForm.vue | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/components/TransferInvoiceForm.vue b/src/components/TransferInvoiceForm.vue
index c79c23741..f69bf6b83 100644
--- a/src/components/TransferInvoiceForm.vue
+++ b/src/components/TransferInvoiceForm.vue
@@ -29,15 +29,10 @@ const transferInvoiceParams = reactive({
     refFk: $props.invoiceOutData?.ref,
 });
 
-const closeButton = ref(null);
 const rectificativeTypeOptions = ref([]);
 const siiTypeInvoiceOutsOptions = ref([]);
 const invoiceCorrectionTypesOptions = ref([]);
 
-const closeForm = () => {
-    if (closeButton.value) closeButton.value.click();
-};
-
 const selectedClient = (client) => {
     transferInvoiceParams.selectedClientData = client;
 };

From 696f6b4c05aa4a14ea48db004feda34ff4c326dd Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Mon, 27 May 2024 09:27:14 +0200
Subject: [PATCH 031/167] feat(VnTable): refs #6825 addInWhere

---
 src/components/VnTable/VnFilter.vue           | 10 +++++--
 .../ExtendedList/CustomerExtendedList.vue     | 28 ++++++++++++++++++-
 2 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/src/components/VnTable/VnFilter.vue b/src/components/VnTable/VnFilter.vue
index 000683670..ba573f612 100644
--- a/src/components/VnTable/VnFilter.vue
+++ b/src/components/VnTable/VnFilter.vue
@@ -89,11 +89,15 @@ const components = {
 
 async function addFilter(value) {
     if (value && typeof value === 'object') value = model.value;
-    value = value === '' ? null : value;
+    value = value === '' ? undefined : value;
     let field = columnFilter.value?.name ?? $props.column.name;
-    const toFilter = { [field]: value };
 
-    await arrayData.addFilter({ params: toFilter });
+    let params = { [field]: value };
+    if (columnFilter.value?.inWhere) {
+        if (columnFilter.value.prefix) field = columnFilter.value.prefix + '.' + field;
+        params = { filter: { where: params } };
+    }
+    await arrayData.addFilter({ params });
 }
 
 function alignRow() {
diff --git a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
index f857abf4c..e865c7224 100644
--- a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
+++ b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
@@ -75,11 +75,17 @@ const columns = computed(() => [
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.credit'),
         name: 'credit',
+        columnFilter: {
+            inWhere: true,
+        },
     },
     {
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.creditInsurance'),
         name: 'creditInsurance',
+        columnFilter: {
+            inWhere: true,
+        },
     },
     {
         align: 'left',
@@ -98,6 +104,9 @@ const columns = computed(() => [
         label: t('customer.extendedList.tableVisibleColumns.mobile'),
         name: 'mobile',
         cardVisible: true,
+        columnFilter: {
+            inWhere: true,
+        },
     },
     {
         align: 'left',
@@ -108,12 +117,29 @@ const columns = computed(() => [
     {
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.countryFk'),
-        name: 'country',
+        name: 'countryFk',
+        columnFilter: {
+            component: 'select',
+            inWhere: true,
+            prefix: 'c',
+            attrs: {
+                url: 'Countries',
+            },
+        },
+        format: (row, dashIfEmpty) => dashIfEmpty(row.country),
     },
     {
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.provinceFk'),
         name: 'provinceFk',
+        component: 'select',
+        attrs: {
+            url: 'Provinces',
+        },
+        columnField: {
+            component: null,
+        },
+        format: (row, dashIfEmpty) => dashIfEmpty(row.province),
     },
     {
         align: 'left',

From 88c2af555cbf3583d248f7b13c5612bcd23c8d99 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Mon, 27 May 2024 09:28:04 +0200
Subject: [PATCH 032/167] fix(ArrayData): refs #6825 router.replace and use
 filter.where

---
 src/components/VnTable/VnTable.vue            |   6 +-
 src/components/ui/VnFilterPanel.vue           |  55 +-
 src/composables/useArrayData.js               |  16 +-
 .../CustomerExtendedListBackup.vue            | 571 ------------------
 4 files changed, 46 insertions(+), 602 deletions(-)
 delete mode 100644 src/pages/Customer/ExtendedList/CustomerExtendedListBackup.vue

diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index 703b24c48..044444c44 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -148,6 +148,7 @@ defineExpose({
                 :data-key="$attrs['data-key']"
                 :search-button="true"
                 v-model="params"
+                :disable-submit-event="true"
             >
                 <template #body>
                     <VnTableFilter
@@ -242,10 +243,7 @@ defineExpose({
                 </template>
                 <template #body-cell="{ col, row }">
                     <!-- Columns -->
-                    <QTd
-                        class="no-padding no-margin"
-                        :class="`text-${col.align ?? 'left'}`"
-                    >
+                    <QTd class="no-margin" :class="`text-${col.align ?? 'left'}`">
                         <VnTableColumn
                             :column="col"
                             :row="row"
diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue
index cd5e96cee..e28085331 100644
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@@ -42,6 +42,10 @@ const props = defineProps({
         type: Array,
         default: () => [],
     },
+    disableSubmitEvent: {
+        type: Boolean,
+        default: false,
+    },
 });
 
 const emit = defineEmits(['refresh', 'clear', 'search', 'init', 'remove']);
@@ -58,7 +62,11 @@ onMounted(() => {
     if (params.value) userParams.value = JSON.parse(JSON.stringify(params.value));
     if (Object.keys(store.userParams).length > 0) {
         userParams.value = JSON.parse(JSON.stringify(store.userParams));
-        params.value = { ...params.value, ...userParams.value };
+        params.value = {
+            ...params.value,
+            ...userParams.value,
+            ...userParams.value?.filter?.where,
+        };
     }
     emit('init', { params: userParams.value });
 });
@@ -67,7 +75,7 @@ function setUserParams(params) {
     if (!params) {
         userParams.value = {};
     } else {
-        userParams.value = params;
+        userParams.value = typeof params == 'string' ? JSON.parse(params) : params;
     }
 }
 
@@ -86,7 +94,9 @@ watch(
 );
 
 const isLoading = ref(false);
-async function search() {
+async function search(evt) {
+    if (evt && props.disableSubmitEvent) return;
+
     store.filter.where = {};
     isLoading.value = true;
     const filter = { ...userParams.value, ...params.value };
@@ -141,23 +151,33 @@ async function clearFilters() {
 }
 
 const tagsList = computed(() => {
-    return Object.entries(userParams.value)
-        .filter(([key, value]) => value && !(props.hiddenTags || []).includes(key))
-        .map(([key, value]) => ({
-            label: key,
-            value: value,
-        }));
+    const tagList = [];
+    const params = {
+        ...userParams.value,
+    };
+    const where = params?.filter?.where;
+    if (where) {
+        Object.assign(params, where);
+    }
+    delete params.filter;
+    for (const key of Object.keys(params)) {
+        const value = params[key];
+        if (!value || (props.hiddenTags || []).includes(key)) continue;
+        tagList.push({ key, value });
+    }
+    return tagList;
 });
 
 const tags = computed(() =>
-    tagsList.value.filter((tag) => !(props.customTags || []).includes(tag.label))
+    tagsList.value.filter((tag) => !(props.customTags || []).includes(tag.key))
 );
 const customTags = computed(() =>
-    tagsList.value.filter((tag) => (props.customTags || []).includes(tag.label))
+    tagsList.value.filter((tag) => (props.customTags || []).includes(tag.key))
 );
 
 async function remove(key) {
-    userParams.value[key] = null;
+    delete userParams.value[key];
+    delete userParams.value.filter.where[key];
     params.value[key] = undefined;
     await arrayData.applyFilter({ params: userParams.value });
     emit('remove', key);
@@ -224,13 +244,13 @@ function formatValue(value) {
                 <div>
                     <VnFilterPanelChip
                         v-for="chip of tags"
-                        :key="chip.label"
-                        :removable="!unremovableParams.includes(chip.label)"
-                        @remove="remove(chip.label)"
+                        :key="chip.key"
+                        :removable="!unremovableParams.includes(chip.key)"
+                        @remove="remove(chip.key)"
                     >
                         <slot name="tags" :tag="chip" :format-fn="formatValue">
                             <div class="q-gutter-x-xs">
-                                <strong>{{ chip.label }}:</strong>
+                                <strong>{{ chip.key }}:</strong>
                                 <span>"{{ chip.value }}"</span>
                             </div>
                         </slot>
@@ -260,8 +280,9 @@ function formatValue(value) {
                         dense
                         icon="search"
                         rounded
-                        type="submit"
+                        :type="disableSubmitEvent ? 'button' : 'submit'"
                         unelevated
+                        @click="search()"
                     />
                 </QItemSection>
             </QItem>
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index e2465f5ba..ba6f62810 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -1,5 +1,5 @@
 import { onMounted, ref, computed } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRouter, useRoute } from 'vue-router';
 import axios from 'axios';
 import { useArrayDataStore } from 'stores/useArrayDataStore';
 import { buildFilter } from 'filters/filterPanel';
@@ -13,6 +13,7 @@ export function useArrayData(key, userOptions) {
 
     const store = arrayDataStore.get(key);
     const route = useRoute();
+    const router = useRouter();
     let canceller = null;
 
     const page = ref(1);
@@ -189,15 +190,10 @@ export function useArrayData(key, userOptions) {
         if (store.userParams && Object.keys(store.userParams).length !== 0)
             query.params = JSON.stringify(store.userParams);
 
-        const url = new URL(window.location.href);
-        const { hash: currentHash } = url;
-        const [currentRoute] = currentHash.split('?');
-
-        const params = new URLSearchParams();
-        for (const param in query) params.append(param, query[param]);
-
-        url.hash = currentRoute + '?' + params.toString();
-        window.history.pushState({}, '', url.hash);
+        router.replace({
+            path: route.path,
+            query,
+        });
     }
 
     const totalRows = computed(() => (store.data && store.data.length) || 0);
diff --git a/src/pages/Customer/ExtendedList/CustomerExtendedListBackup.vue b/src/pages/Customer/ExtendedList/CustomerExtendedListBackup.vue
deleted file mode 100644
index a24d3211a..000000000
--- a/src/pages/Customer/ExtendedList/CustomerExtendedListBackup.vue
+++ /dev/null
@@ -1,571 +0,0 @@
-<script setup>
-import { ref, computed, onBeforeMount, onMounted } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
-
-import { QBtn, QIcon } from 'quasar';
-import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
-import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
-import CustomerExtendedListActions from './CustomerExtendedListActions.vue';
-import CustomerExtendedListFilter from './CustomerExtendedListFilter.vue';
-import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-
-import { useArrayData } from 'composables/useArrayData';
-import { useStateStore } from 'stores/useStateStore';
-import { toDate } from 'src/filters';
-
-const { t } = useI18n();
-const router = useRouter();
-const stateStore = useStateStore();
-
-const arrayData = ref(null);
-
-onBeforeMount(async () => {
-    arrayData.value = useArrayData('CustomerExtendedList', {
-        url: 'Clients/extendedListFilter',
-        limit: 0,
-    });
-    await arrayData.value.fetch({ append: false });
-    stateStore.rightDrawer = true;
-});
-
-onMounted(() => {
-    const filteredColumns = columns.value.filter(
-        (col) => col.name !== 'actions' && col.name !== 'customerStatus'
-    );
-    allColumnNames.value = filteredColumns.map((col) => col.name);
-});
-
-const rows = computed(() => arrayData.value.store.data);
-
-const selectedCustomerId = ref(0);
-const selectedSalesPersonId = ref(0);
-const allColumnNames = ref([]);
-const visibleColumns = ref([]);
-
-const tableColumnComponents = {
-    customerStatus: {
-        component: QIcon,
-        props: (prop) => ({
-            name: !prop.row.isActive
-                ? 'vn:disabled'
-                : prop.row.isActive && prop.row.isFreezed
-                ? 'vn:frozen'
-                : '',
-            color: 'primary',
-            size: 'sm',
-        }),
-        event: () => {},
-    },
-    id: {
-        component: QBtn,
-        props: () => ({ flat: true, color: 'blue' }),
-        event: (prop) => {
-            selectCustomerId(prop.row.id);
-        },
-    },
-    name: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    fi: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    salesPersonFk: {
-        component: QBtn,
-        props: () => ({ flat: true, color: 'blue' }),
-        event: (prop) => selectSalesPersonId(prop.row.salesPersonFk),
-    },
-    credit: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    creditInsurance: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    phone: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    mobile: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    street: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    countryFk: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    provinceFk: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    city: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    postcode: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    email: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    created: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    businessTypeFk: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    payMethodFk: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    sageTaxTypeFk: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    sageTransactionTypeFk: {
-        component: 'span',
-        props: () => {},
-        event: () => {},
-    },
-    isActive: {
-        component: QIcon,
-        props: (prop) => ({
-            name: prop.row.isActive ? 'check' : 'close',
-            color: prop.row.isActive ? 'positive' : 'negative',
-            size: 'sm',
-        }),
-        event: () => {},
-    },
-    isVies: {
-        component: QIcon,
-        props: (prop) => ({
-            name: prop.row.isVies ? 'check' : 'close',
-            color: prop.row.isVies ? 'positive' : 'negative',
-            size: 'sm',
-        }),
-        event: () => {},
-    },
-    isTaxDataChecked: {
-        component: QIcon,
-        props: (prop) => ({
-            name: prop.row.isTaxDataChecked ? 'check' : 'close',
-            color: prop.row.isTaxDataChecked ? 'positive' : 'negative',
-            size: 'sm',
-        }),
-        event: () => {},
-    },
-    isEqualizated: {
-        component: QIcon,
-        props: (prop) => ({
-            name: prop.row.isEqualizated ? 'check' : 'close',
-            color: prop.row.isEqualizated ? 'positive' : 'negative',
-            size: 'sm',
-        }),
-        event: () => {},
-    },
-    isFreezed: {
-        component: QIcon,
-        props: (prop) => ({
-            name: prop.row.isFreezed ? 'check' : 'close',
-            color: prop.row.isFreezed ? 'positive' : 'negative',
-            size: 'sm',
-        }),
-        event: () => {},
-    },
-    hasToInvoice: {
-        component: QIcon,
-        props: (prop) => ({
-            name: prop.row.hasToInvoice ? 'check' : 'close',
-            color: prop.row.hasToInvoice ? 'positive' : 'negative',
-            size: 'sm',
-        }),
-        event: () => {},
-    },
-    hasToInvoiceByAddress: {
-        component: QIcon,
-        props: (prop) => ({
-            name: prop.row.hasToInvoiceByAddress ? 'check' : 'close',
-            color: prop.row.hasToInvoiceByAddress ? 'positive' : 'negative',
-            size: 'sm',
-        }),
-        event: () => {},
-    },
-    isToBeMailed: {
-        component: QIcon,
-        props: (prop) => ({
-            name: prop.row.isToBeMailed ? 'check' : 'close',
-            color: prop.row.isToBeMailed ? 'positive' : 'negative',
-            size: 'sm',
-        }),
-        event: () => {},
-    },
-    hasLcr: {
-        component: QIcon,
-        props: (prop) => ({
-            name: prop.row.hasLcr ? 'check' : 'close',
-            color: prop.row.hasLcr ? 'positive' : 'negative',
-            size: 'sm',
-        }),
-        event: () => {},
-    },
-    hasCoreVnl: {
-        component: QIcon,
-        props: (prop) => ({
-            name: prop.row.hasCoreVnl ? 'check' : 'close',
-            color: prop.row.hasCoreVnl ? 'positive' : 'negative',
-            size: 'sm',
-        }),
-        event: () => {},
-    },
-    hasSepaVnl: {
-        component: QIcon,
-        props: (prop) => ({
-            name: prop.row.hasSepaVnl ? 'check' : 'close',
-            color: prop.row.hasSepaVnl ? 'positive' : 'negative',
-            size: 'sm',
-        }),
-        event: () => {},
-    },
-    actions: {
-        component: CustomerExtendedListActions,
-        props: (prop) => ({
-            id: prop.row.id,
-        }),
-        event: () => {},
-    },
-};
-
-const columns = computed(() => [
-    {
-        align: 'left',
-        field: '',
-        label: '',
-        name: 'customerStatus',
-        format: () => ' ',
-    },
-    {
-        align: 'left',
-        field: 'id',
-        label: t('customer.extendedList.tableVisibleColumns.id'),
-        name: 'id',
-    },
-    {
-        align: 'left',
-        field: 'name',
-        label: t('customer.extendedList.tableVisibleColumns.name'),
-        name: 'name',
-    },
-    {
-        align: 'left',
-        field: 'fi',
-        label: t('customer.extendedList.tableVisibleColumns.fi'),
-        name: 'fi',
-    },
-    {
-        align: 'left',
-        field: 'salesPerson',
-        label: t('customer.extendedList.tableVisibleColumns.salesPersonFk'),
-        name: 'salesPersonFk',
-    },
-    {
-        align: 'left',
-        field: 'credit',
-        label: t('customer.extendedList.tableVisibleColumns.credit'),
-        name: 'credit',
-    },
-    {
-        align: 'left',
-        field: 'creditInsurance',
-        label: t('customer.extendedList.tableVisibleColumns.creditInsurance'),
-        name: 'creditInsurance',
-    },
-    {
-        align: 'left',
-        field: 'phone',
-        label: t('customer.extendedList.tableVisibleColumns.phone'),
-        name: 'phone',
-    },
-    {
-        align: 'left',
-        field: 'mobile',
-        label: t('customer.extendedList.tableVisibleColumns.mobile'),
-        name: 'mobile',
-    },
-    {
-        align: 'left',
-        field: 'street',
-        label: t('customer.extendedList.tableVisibleColumns.street'),
-        name: 'street',
-    },
-    {
-        align: 'left',
-        field: 'country',
-        label: t('customer.extendedList.tableVisibleColumns.countryFk'),
-        name: 'countryFk',
-    },
-    {
-        align: 'left',
-        field: 'province',
-        label: t('customer.extendedList.tableVisibleColumns.provinceFk'),
-        name: 'provinceFk',
-    },
-    {
-        align: 'left',
-        field: 'city',
-        label: t('customer.extendedList.tableVisibleColumns.city'),
-        name: 'city',
-    },
-    {
-        align: 'left',
-        field: 'postcode',
-        label: t('customer.extendedList.tableVisibleColumns.postcode'),
-        name: 'postcode',
-    },
-    {
-        align: 'left',
-        field: 'email',
-        label: t('customer.extendedList.tableVisibleColumns.email'),
-        name: 'email',
-    },
-    {
-        align: 'left',
-        field: 'created',
-        label: t('customer.extendedList.tableVisibleColumns.created'),
-        name: 'created',
-        format: (value) => toDate(value),
-    },
-    {
-        align: 'left',
-        field: 'businessType',
-        label: t('customer.extendedList.tableVisibleColumns.businessTypeFk'),
-        name: 'businessTypeFk',
-    },
-    {
-        align: 'left',
-        field: 'payMethod',
-        label: t('customer.extendedList.tableVisibleColumns.payMethodFk'),
-        name: 'payMethodFk',
-    },
-    {
-        align: 'left',
-        field: 'sageTaxType',
-        label: t('customer.extendedList.tableVisibleColumns.sageTaxTypeFk'),
-        name: 'sageTaxTypeFk',
-    },
-    {
-        align: 'left',
-        field: 'sageTransactionType',
-        label: t('customer.extendedList.tableVisibleColumns.sageTransactionTypeFk'),
-        name: 'sageTransactionTypeFk',
-    },
-    {
-        align: 'left',
-        field: 'isActive',
-        label: t('customer.extendedList.tableVisibleColumns.isActive'),
-        name: 'isActive',
-        format: () => ' ',
-    },
-    {
-        align: 'left',
-        field: 'isVies',
-        label: t('customer.extendedList.tableVisibleColumns.isVies'),
-        name: 'isVies',
-        format: () => ' ',
-    },
-    {
-        align: 'left',
-        field: 'isTaxDataChecked',
-        label: t('customer.extendedList.tableVisibleColumns.isTaxDataChecked'),
-        name: 'isTaxDataChecked',
-        format: () => ' ',
-    },
-    {
-        align: 'left',
-        field: 'isEqualizated',
-        label: t('customer.extendedList.tableVisibleColumns.isEqualizated'),
-        name: 'isEqualizated',
-        format: () => ' ',
-    },
-    {
-        align: 'left',
-        field: 'isFreezed',
-        label: t('customer.extendedList.tableVisibleColumns.isFreezed'),
-        name: 'isFreezed',
-        format: () => ' ',
-    },
-    {
-        align: 'left',
-        field: 'hasToInvoice',
-        label: t('customer.extendedList.tableVisibleColumns.hasToInvoice'),
-        name: 'hasToInvoice',
-        format: () => ' ',
-    },
-    {
-        align: 'left',
-        field: 'hasToInvoiceByAddress',
-        label: t('customer.extendedList.tableVisibleColumns.hasToInvoiceByAddress'),
-        name: 'hasToInvoiceByAddress',
-        format: () => ' ',
-    },
-    {
-        align: 'left',
-        field: 'isToBeMailed',
-        label: t('customer.extendedList.tableVisibleColumns.isToBeMailed'),
-        name: 'isToBeMailed',
-        format: () => ' ',
-    },
-    {
-        align: 'left',
-        field: 'hasLcr',
-        label: t('customer.extendedList.tableVisibleColumns.hasLcr'),
-        name: 'hasLcr',
-        format: () => ' ',
-    },
-    {
-        align: 'left',
-        field: 'hasCoreVnl',
-        label: t('customer.extendedList.tableVisibleColumns.hasCoreVnl'),
-        name: 'hasCoreVnl',
-        format: () => ' ',
-    },
-    {
-        align: 'left',
-        field: 'hasSepaVnl',
-        label: t('customer.extendedList.tableVisibleColumns.hasSepaVnl'),
-        name: 'hasSepaVnl',
-        format: () => ' ',
-    },
-    {
-        align: 'right',
-        field: 'actions',
-        label: '',
-        name: 'actions',
-    },
-]);
-
-const stopEventPropagation = (event, col) => {
-    if (!['id', 'salesPersonFk'].includes(col.name)) return;
-    event.preventDefault();
-    event.stopPropagation();
-};
-
-const navigateToTravelId = (id) => router.push({ path: `/customer/${id}` });
-
-const selectCustomerId = (id) => (selectedCustomerId.value = id);
-
-const selectSalesPersonId = (id) => (selectedSalesPersonId.value = id);
-</script>
-
-<template>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-        <QScrollArea class="fit text-grey-8">
-            <CustomerExtendedListFilter
-                v-if="visibleColumns.length !== 0"
-                data-key="CustomerExtendedList"
-                :visible-columns="visibleColumns"
-            />
-        </QScrollArea>
-    </QDrawer>
-    <VnSubToolbar>
-        <template #st-actions>
-            <TableVisibleColumns
-                :all-columns="allColumnNames"
-                table-code="clientsDetail"
-                labels-traductions-path="customer.extendedList.tableVisibleColumns"
-                @on-config-saved="
-                    visibleColumns = ['customerStatus', ...$event, 'actions']
-                "
-            />
-        </template>
-    </VnSubToolbar>
-
-    <QPage class="column items-center q-pa-md">
-        <QTable
-            :columns="columns"
-            :rows="rows"
-            class="full-width q-mt-md"
-            row-key="id"
-            :visible-columns="visibleColumns"
-            @row-click="(evt, row, id) => navigateToTravelId(row.id)"
-        >
-            <template #body-cell="{ col, value }">
-                <QTd @click="stopEventPropagation($event, col)">
-                    {{ value }}
-                </QTd>
-            </template>
-            <template #body-cell-id="props">
-                <QTd @click="stopEventPropagation($event, props.col)">
-                    <component
-                        :is="tableColumnComponents[props.col.name].component"
-                        class="col-content"
-                        v-bind="tableColumnComponents[props.col.name].props(props)"
-                        @click="tableColumnComponents[props.col.name].event(props)"
-                    >
-                        <CustomerDescriptorProxy :id="props.row.id" />
-                        {{ props.row.id }}
-                    </component>
-                </QTd>
-            </template>
-            <template #body-cell-salesPersonFk="props">
-                <QTd @click="stopEventPropagation($event, props.col)">
-                    <component
-                        v-if="props.row.salesPerson"
-                        class="col-content"
-                        :is="tableColumnComponents[props.col.name].component"
-                        v-bind="tableColumnComponents[props.col.name].props(props)"
-                        @click="tableColumnComponents[props.col.name].event(props)"
-                    >
-                        <WorkerDescriptorProxy :id="props.row.salesPersonFk" />
-                        {{ props.row.salesPerson }}
-                    </component>
-                    <span class="col-content" v-else>-</span>
-                </QTd>
-            </template>
-            <template #body-cell-actions="props">
-                <QTd @click="stopEventPropagation($event, props.col)">
-                    <component
-                        :is="tableColumnComponents[props.col.name].component"
-                        class="col-content"
-                        v-bind="tableColumnComponents[props.col.name].props(props)"
-                        @click="tableColumnComponents[props.col.name].event(props)"
-                    />
-                </QTd>
-            </template>
-        </QTable>
-    </QPage>
-</template>
-
-<style lang="scss" scoped>
-.col-content {
-    border-radius: 4px;
-    padding: 6px;
-}
-</style>

From d4fbd99473d75b94b2b7444294558217376f40eb Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Mon, 27 May 2024 09:40:48 +0200
Subject: [PATCH 033/167] refs #7406 table formation

---
 src/pages/Worker/Card/WorkerFormation.vue | 84 +++++++++++++++++++++++
 1 file changed, 84 insertions(+)
 create mode 100644 src/pages/Worker/Card/WorkerFormation.vue

diff --git a/src/pages/Worker/Card/WorkerFormation.vue b/src/pages/Worker/Card/WorkerFormation.vue
new file mode 100644
index 000000000..f8e458e1b
--- /dev/null
+++ b/src/pages/Worker/Card/WorkerFormation.vue
@@ -0,0 +1,84 @@
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import VnTable from 'components/VnTable/VnTable.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
+const tableRef = ref();
+const { t } = useI18n();
+const columns = computed(() => [
+    {
+        align: 'left',
+        name: 'course',
+        label: t('worker.formation.tableVisibleColumns.course'),
+        isTitle: true,
+        component: 'select',
+        attrs: {
+            url: 'Workers/trainingCourse',
+            fields: ['id', 'name'],
+        },
+        create: true,
+    },
+    {
+        align: 'left',
+        name: 'startDate',
+        label: t('worker.formation.tableVisibleColumns.startDate'),
+        isTitle: true,
+        component: VnInputDate,
+        props: (prop) => ({
+            disable: true,
+            'model-value': prop.row.started,
+        }),
+        create: true,
+    },
+    {
+        align: 'left',
+        name: 'endDate',
+        label: t('worker.formation.tableVisibleColumns.endDate'),
+        isTitle: true,
+        component: VnInputDate,
+        props: (prop) => ({
+            disable: true,
+            'model-value': prop.row.ended,
+        }),
+        create: true,
+    },
+    {
+        align: 'left',
+        name: 'center',
+        label: t('worker.formation.tableVisibleColumns.center'),
+        isTitle: true,
+        component: 'select',
+        attrs: {
+            url: 'Workers/trainingCenter',
+            fields: ['id', 'name'],
+        },
+        create: true,
+    },
+    {
+        align: 'left',
+        name: 'invoice',
+    },
+]);
+</script>
+<template>
+    <VnTable
+        ref="tableRef"
+        data-key="WorkerFormation"
+        url="Workers/trainingCourse"
+        url-create="Workers/trainingCourse"
+        :create="{
+            urlCreate: 'Workers/trainingCourse',
+            title: 'Create trainingCourse',
+            onDataSaved: ({ id }) => tableRef.redirect(id),
+            formInitialData: {
+                active: true,
+                isEqualizated: false,
+            },
+        }"
+        order="id DESC"
+        :columns="columns"
+        default-mode="table"
+        auto-load
+    ></VnTable>
+</template>

From c865bc2ed45331d4083aad3d0eaf7ec0bcc1c8aa Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Mon, 27 May 2024 10:07:32 +0200
Subject: [PATCH 034/167] refs #7406 fix props

---
 src/pages/Worker/Card/WorkerFormation.vue | 38 +++++++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/src/pages/Worker/Card/WorkerFormation.vue b/src/pages/Worker/Card/WorkerFormation.vue
index f8e458e1b..312acf4f2 100644
--- a/src/pages/Worker/Card/WorkerFormation.vue
+++ b/src/pages/Worker/Card/WorkerFormation.vue
@@ -58,6 +58,44 @@ const columns = computed(() => [
     {
         align: 'left',
         name: 'invoice',
+        label: t('worker.formation.tableVisibleColumns.invoice'),
+        isTitle: true,
+        component: 'input',
+    },
+    {
+        align: 'left',
+        name: 'amount',
+        label: t('worker.formation.tableVisibleColumns.amount'),
+        isTitle: true,
+        component: 'input',
+        props: (prop) => ({
+            disable: true,
+            'model-value': prop.row.amount,
+        }),
+        create: true,
+    },
+    {
+        align: 'left',
+        name: 'remark',
+        label: t('worker.formation.tableVisibleColumns.remark'),
+        isTitle: true,
+        component: 'checkbox',
+        props: (prop) => ({
+            disable: true,
+            'model-value': prop.row.remark,
+        }),
+        create: true,
+    },
+    {
+        align: 'left',
+        name: 'hasDiploma',
+        label: t('worker.formation.tableVisibleColumns.hasDiploma'),
+        isTitle: true,
+        props: (prop) => ({
+            disable: true,
+            'model-value': prop.row.hasDiploma,
+        }),
+        create: true,
     },
 ]);
 </script>

From ef52c9b0c0a6920c0dfd9d89c6beb18edc39f9a5 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Mon, 27 May 2024 10:42:47 +0200
Subject: [PATCH 035/167] refs #7406 routes trad

---
 src/i18n/locale/en.yml       |  2 +-
 src/i18n/locale/es.yml       |  1 +
 src/router/modules/worker.js | 10 ++++++++++
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index 3853e3ab6..3eb464937 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -830,7 +830,7 @@ worker:
         calendar: Calendar
         timeControl: Time control
         locker: Locker
-
+        formation: Formation
     list:
         name: Name
         email: Email
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index a8b9ecd51..652fb7e6e 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -828,6 +828,7 @@ worker:
         calendar: Calendario
         timeControl: Control de horario
         locker: Taquilla
+        formation: Formación
     list:
         name: Nombre
         email: Email
diff --git a/src/router/modules/worker.js b/src/router/modules/worker.js
index 384978d13..281ee08a0 100644
--- a/src/router/modules/worker.js
+++ b/src/router/modules/worker.js
@@ -23,6 +23,7 @@ export default {
             'WorkerDms',
             'WorkerTimeControl',
             'WorkerLocker',
+            'WorkerFormation',
         ],
         departmentCard: ['BasicData'],
     },
@@ -177,6 +178,15 @@ export default {
                     },
                     component: () => import('src/pages/Worker/Card/WorkerLocker.vue'),
                 },
+                {
+                    name: 'WorkerFormation',
+                    path: 'formation',
+                    meta: {
+                        title: 'formation',
+                        icon: 'clinical_notes',
+                    },
+                    component: () => import('src/pages/Worker/Card/WorkerFormation.vue'),
+                },
             ],
         },
     ],

From d207482e3aae69529994c681f126a78650662caa Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Mon, 27 May 2024 11:27:33 +0200
Subject: [PATCH 036/167] refs #7406 fix url

---
 src/pages/Worker/Card/WorkerFormation.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/Worker/Card/WorkerFormation.vue b/src/pages/Worker/Card/WorkerFormation.vue
index 312acf4f2..2e27a2a96 100644
--- a/src/pages/Worker/Card/WorkerFormation.vue
+++ b/src/pages/Worker/Card/WorkerFormation.vue
@@ -103,8 +103,8 @@ const columns = computed(() => [
     <VnTable
         ref="tableRef"
         data-key="WorkerFormation"
-        url="Workers/trainingCourse"
-        url-create="Workers/trainingCourse"
+        url="`Workers/${entityId}/trainingCourse`"
+        url-create="`Workers/${entityId}/trainingCourse`"
         :create="{
             urlCreate: 'Workers/trainingCourse',
             title: 'Create trainingCourse',

From a4baa88cb4e49c384c6a686731d75b77ece45133 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Mon, 27 May 2024 14:36:50 +0200
Subject: [PATCH 037/167] fix(VnTable): refs #6825 VnInputDate

---
 src/components/VnTable/VnColumn.vue           |  2 ++
 src/components/VnTable/VnFilter.vue           | 19 +++++++++++----
 src/components/VnTable/VnTable.vue            | 23 +++++++++++++++----
 src/components/common/VnInputDate.vue         |  2 +-
 .../ExtendedList/CustomerExtendedList.vue     | 17 +++++++++++++-
 5 files changed, 53 insertions(+), 10 deletions(-)

diff --git a/src/components/VnTable/VnColumn.vue b/src/components/VnTable/VnColumn.vue
index d8cd25033..c8a9a97b7 100644
--- a/src/components/VnTable/VnColumn.vue
+++ b/src/components/VnTable/VnColumn.vue
@@ -53,7 +53,9 @@ const defaultComponents = {
     date: {
         component: markRaw(VnInputDate),
         attrs: {
+            readonly: true,
             disable: !$props.isEditable,
+            style: 'min-width: 125px',
         },
     },
     checkbox: {
diff --git a/src/components/VnTable/VnFilter.vue b/src/components/VnTable/VnFilter.vue
index ba573f612..0eb2e2a19 100644
--- a/src/components/VnTable/VnFilter.vue
+++ b/src/components/VnTable/VnFilter.vue
@@ -40,6 +40,7 @@ const components = {
             class: 'q-px-sm q-pb-xs q-pt-none',
             dense: true,
             filled: !$props.showTitle,
+            clearable: true,
         },
         forceAttrs: {
             label: $props.showTitle ? '' : $props.column.label,
@@ -50,7 +51,12 @@ const components = {
         event: enterEvent,
         attrs: {
             dense: true,
-            class: 'q-px-md q-pb-xs q-pt-none',
+            class: 'q-px-sm q-pb-xs q-pt-none',
+            clearable: true,
+            filled: !$props.showTitle,
+        },
+        forceAttrs: {
+            label: $props.showTitle ? '' : $props.column.label,
         },
     },
     date: {
@@ -58,7 +64,12 @@ const components = {
         event: updateEvent,
         attrs: {
             dense: true,
-            class: 'q-px-md q-pb-xs q-pt-none',
+            class: 'q-px-sm q-pb-xs q-pt-none',
+            filled: !$props.showTitle,
+            style: 'min-width: 150px',
+        },
+        forceAttrs: {
+            label: $props.showTitle ? '' : $props.column.label,
         },
     },
     checkbox: {
@@ -94,8 +105,8 @@ async function addFilter(value) {
 
     let params = { [field]: value };
     if (columnFilter.value?.inWhere) {
-        if (columnFilter.value.prefix) field = columnFilter.value.prefix + '.' + field;
-        params = { filter: { where: params } };
+        if (columnFilter.value.alias) field = columnFilter.value.alias + '.' + field;
+        params = { filter: { where: { [field]: value } } };
     }
     await arrayData.addFilter({ params });
 }
diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index 044444c44..7488f0db9 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -130,6 +130,13 @@ function reload() {
     VnPaginateRef.value.fetch();
 }
 
+function columnName(col) {
+    const column = Object.assign({}, col, col.columnFilter);
+    let name = column.name;
+    if (column.alias) name = column.alias + '.' + name;
+    return name;
+}
+
 defineExpose({
     reload,
     redirect: redirectFn,
@@ -156,7 +163,7 @@ defineExpose({
                         :data-key="$attrs['data-key']"
                         v-for="col of splittedColumns.columns"
                         :key="col.id"
-                        v-model="params[col.columnFilter?.name ?? col.name]"
+                        v-model="params[columnName(col)]"
                     />
                 </template>
                 <slot
@@ -225,7 +232,7 @@ defineExpose({
                             :column="col"
                             :show-title="true"
                             :data-key="$attrs['data-key']"
-                            v-model="params[col.columnFilter?.name ?? col.name]"
+                            v-model="params[columnName(col)]"
                         />
                     </QTh>
                 </template>
@@ -243,7 +250,11 @@ defineExpose({
                 </template>
                 <template #body-cell="{ col, row }">
                     <!-- Columns -->
-                    <QTd class="no-margin" :class="`text-${col.align ?? 'left'}`">
+                    <QTd
+                        auto-width
+                        class="no-margin q-px-xs"
+                        :class="`text-${col.align ?? 'left'}`"
+                    >
                         <VnTableColumn
                             :column="col"
                             :row="row"
@@ -328,7 +339,11 @@ defineExpose({
                                                 <span
                                                     @click="stopEventPropagation($event)"
                                                 >
-                                                    <VnTableColumn :column="col" :row />
+                                                    <VnTableColumn
+                                                        :column="col"
+                                                        :row
+                                                        component-prop="columnField"
+                                                    />
                                                 </span>
                                             </template>
                                         </VnLv>
diff --git a/src/components/common/VnInputDate.vue b/src/components/common/VnInputDate.vue
index fe0866292..3c1a12f24 100644
--- a/src/components/common/VnInputDate.vue
+++ b/src/components/common/VnInputDate.vue
@@ -97,7 +97,7 @@ const styleAttrs = computed(() => {
                 <QIcon
                     name="close"
                     size="xs"
-                    v-if="hover && value"
+                    v-if="hover && value && !readonly"
                     @click="onDateUpdate(null)"
                 ></QIcon>
                 <QIcon name="event" class="cursor-pointer">
diff --git a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
index e865c7224..3edb680fa 100644
--- a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
+++ b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
@@ -75,6 +75,7 @@ const columns = computed(() => [
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.credit'),
         name: 'credit',
+        component: 'number',
         columnFilter: {
             inWhere: true,
         },
@@ -83,6 +84,7 @@ const columns = computed(() => [
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.creditInsurance'),
         name: 'creditInsurance',
+        component: 'number',
         columnFilter: {
             inWhere: true,
         },
@@ -98,6 +100,10 @@ const columns = computed(() => [
                 'phone-number': prop.phone,
             }),
         },
+        component: 'number',
+        columnField: {
+            component: null,
+        },
     },
     {
         align: 'left',
@@ -105,6 +111,7 @@ const columns = computed(() => [
         name: 'mobile',
         cardVisible: true,
         columnFilter: {
+            component: 'number',
             inWhere: true,
         },
     },
@@ -113,6 +120,9 @@ const columns = computed(() => [
         label: t('customer.extendedList.tableVisibleColumns.street'),
         name: 'street',
         create: true,
+        columnFilter: {
+            inWhere: true,
+        },
     },
     {
         align: 'left',
@@ -121,7 +131,7 @@ const columns = computed(() => [
         columnFilter: {
             component: 'select',
             inWhere: true,
-            prefix: 'c',
+            alias: 'c',
             attrs: {
                 url: 'Countries',
             },
@@ -162,6 +172,11 @@ const columns = computed(() => [
         label: t('customer.extendedList.tableVisibleColumns.created'),
         name: 'created',
         format: ({ created }) => toDate(created),
+        component: 'date',
+        columnFilter: {
+            alias: 'c',
+            inWhere: true,
+        },
     },
     {
         align: 'left',

From 947496e0a1b5efe32999e4b5438a1e20b2b0b11a Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Mon, 27 May 2024 14:43:03 +0200
Subject: [PATCH 038/167] refs #7406 fix components

---
 src/pages/Worker/Card/WorkerFormation.vue | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/pages/Worker/Card/WorkerFormation.vue b/src/pages/Worker/Card/WorkerFormation.vue
index 2e27a2a96..8485f4a5b 100644
--- a/src/pages/Worker/Card/WorkerFormation.vue
+++ b/src/pages/Worker/Card/WorkerFormation.vue
@@ -2,10 +2,13 @@
 import { ref, computed, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
+import { useRoute } from 'vue-router';
 import VnTable from 'components/VnTable/VnTable.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 const tableRef = ref();
 const { t } = useI18n();
+const route = useRoute();
+const entityId = computed(() => route.params.id);
 const columns = computed(() => [
     {
         align: 'left',
@@ -23,7 +26,6 @@ const columns = computed(() => [
         align: 'left',
         name: 'startDate',
         label: t('worker.formation.tableVisibleColumns.startDate'),
-        isTitle: true,
         component: VnInputDate,
         props: (prop) => ({
             disable: true,
@@ -35,7 +37,6 @@ const columns = computed(() => [
         align: 'left',
         name: 'endDate',
         label: t('worker.formation.tableVisibleColumns.endDate'),
-        isTitle: true,
         component: VnInputDate,
         props: (prop) => ({
             disable: true,
@@ -47,7 +48,6 @@ const columns = computed(() => [
         align: 'left',
         name: 'center',
         label: t('worker.formation.tableVisibleColumns.center'),
-        isTitle: true,
         component: 'select',
         attrs: {
             url: 'Workers/trainingCenter',
@@ -59,14 +59,12 @@ const columns = computed(() => [
         align: 'left',
         name: 'invoice',
         label: t('worker.formation.tableVisibleColumns.invoice'),
-        isTitle: true,
         component: 'input',
     },
     {
         align: 'left',
         name: 'amount',
         label: t('worker.formation.tableVisibleColumns.amount'),
-        isTitle: true,
         component: 'input',
         props: (prop) => ({
             disable: true,
@@ -78,7 +76,6 @@ const columns = computed(() => [
         align: 'left',
         name: 'remark',
         label: t('worker.formation.tableVisibleColumns.remark'),
-        isTitle: true,
         component: 'checkbox',
         props: (prop) => ({
             disable: true,
@@ -90,7 +87,6 @@ const columns = computed(() => [
         align: 'left',
         name: 'hasDiploma',
         label: t('worker.formation.tableVisibleColumns.hasDiploma'),
-        isTitle: true,
         props: (prop) => ({
             disable: true,
             'model-value': prop.row.hasDiploma,
@@ -103,8 +99,8 @@ const columns = computed(() => [
     <VnTable
         ref="tableRef"
         data-key="WorkerFormation"
-        url="`Workers/${entityId}/trainingCourse`"
-        url-create="`Workers/${entityId}/trainingCourse`"
+        :url="`Workers/${entityId}/trainingCourse`"
+        :url-create="`Workers/${entityId}/trainingCourse`"
         :create="{
             urlCreate: 'Workers/trainingCourse',
             title: 'Create trainingCourse',

From d8512e2033cf9377485b72e232b142bb140848e3 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Mon, 27 May 2024 18:23:33 +0200
Subject: [PATCH 039/167] refs #7406 fix trad

---
 src/i18n/locale/en.yml                    | 10 ++++++++++
 src/i18n/locale/es.yml                    | 10 ++++++++++
 src/pages/Worker/Card/WorkerFormation.vue |  3 ++-
 3 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index 3eb464937..91d88f252 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -900,6 +900,16 @@ worker:
         payMethods: Pay method
         iban: IBAN
         bankEntity: Swift / BIC
+    formation:
+        tableVisibleColumns:
+            course: Curso
+            startDate: Fecha Inicio
+            endDate: Fecha Fin
+            center: Centro Formación
+            invoice: Factura
+            amount: Importe
+            remark: Bonficado
+            hasDiploma: Diploma
     imageNotFound: Image not found
 wagon:
     pageTitles:
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index 652fb7e6e..29fe52508 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -889,6 +889,16 @@ worker:
         payMethods: Método de pago
         iban: IBAN
         bankEntity: Swift / BIC
+    formation:
+        tableVisibleColumns:
+            course: Curso
+            startDate: Fecha Inicio
+            endDate: Fecha Fin
+            center: Centro Formación
+            invoice: Factura
+            amount: Importe
+            remark: Bonficado
+            hasDiploma: Diploma
     imageNotFound: No se ha encontrado la imagen
 wagon:
     pageTitles:
diff --git a/src/pages/Worker/Card/WorkerFormation.vue b/src/pages/Worker/Card/WorkerFormation.vue
index 8485f4a5b..e68f7abf9 100644
--- a/src/pages/Worker/Card/WorkerFormation.vue
+++ b/src/pages/Worker/Card/WorkerFormation.vue
@@ -17,7 +17,7 @@ const columns = computed(() => [
         isTitle: true,
         component: 'select',
         attrs: {
-            url: 'Workers/trainingCourse',
+            url: 'TrainingCourse/trainingCourseType',
             fields: ['id', 'name'],
         },
         create: true,
@@ -114,5 +114,6 @@ const columns = computed(() => [
         :columns="columns"
         default-mode="table"
         auto-load
+        :right-search="false"
     ></VnTable>
 </template>

From ffe15da7cfe5bcc47b75b083c56726cea9acd847 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Tue, 28 May 2024 10:41:24 +0200
Subject: [PATCH 040/167] refs #7406 fix VnTable columns

---
 src/pages/Travel/Card/TravelThermographs.vue |  6 +-
 src/pages/Worker/Card/WorkerFormation.vue    | 64 +++++++++-----------
 2 files changed, 33 insertions(+), 37 deletions(-)

diff --git a/src/pages/Travel/Card/TravelThermographs.vue b/src/pages/Travel/Card/TravelThermographs.vue
index d2195beb4..1898a58d6 100644
--- a/src/pages/Travel/Card/TravelThermographs.vue
+++ b/src/pages/Travel/Card/TravelThermographs.vue
@@ -13,7 +13,7 @@ import useNotify from 'src/composables/useNotify.js';
 import { toDate } from 'src/filters';
 import { downloadFile } from 'src/composables/downloadFile';
 
-const route = useRoute();
+const {{id}} = useRoute();
 const quasar = useQuasar();
 const router = useRouter();
 const { t } = useI18n();
@@ -29,7 +29,7 @@ const thermographFilter = {
             fields: ['id', 'name'],
         },
     },
-    where: { travelFk: route.params.id },
+    where: { travelFk: id },
     order: ['created'],
 };
 
@@ -137,7 +137,7 @@ const removeThermograph = async (id) => {
         data-key="TravelThermographs"
         url="TravelThermographs"
         :filter="thermographFilter"
-        :params="{ travelFk: route.params.id }"
+        :params="{ travelFk: id }"
         auto-load
     >
         <template #body="{ rows }">
diff --git a/src/pages/Worker/Card/WorkerFormation.vue b/src/pages/Worker/Card/WorkerFormation.vue
index e68f7abf9..c8fd50303 100644
--- a/src/pages/Worker/Card/WorkerFormation.vue
+++ b/src/pages/Worker/Card/WorkerFormation.vue
@@ -1,7 +1,6 @@
 <script setup>
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
 import { useRoute } from 'vue-router';
 import VnTable from 'components/VnTable/VnTable.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
@@ -9,50 +8,54 @@ const tableRef = ref();
 const { t } = useI18n();
 const route = useRoute();
 const entityId = computed(() => route.params.id);
+const courseFilter = {
+    include: [
+        {
+            relation: 'trainingCourseType',
+            scope: {
+                fields: ['id', 'name'],
+            },
+        },
+        {
+            relation: 'trainingCenter',
+            scope: {
+                fields: ['id', 'name'],
+            },
+        },
+    ],
+};
 const columns = computed(() => [
     {
         align: 'left',
-        name: 'course',
+        name: 'trainingCourseTypeFk',
         label: t('worker.formation.tableVisibleColumns.course'),
         isTitle: true,
         component: 'select',
-        attrs: {
-            url: 'TrainingCourse/trainingCourseType',
-            fields: ['id', 'name'],
-        },
+        field: 'trainingCourseTypeFk',
         create: true,
     },
     {
         align: 'left',
-        name: 'startDate',
+        name: 'started',
         label: t('worker.formation.tableVisibleColumns.startDate'),
         component: VnInputDate,
-        props: (prop) => ({
-            disable: true,
-            'model-value': prop.row.started,
-        }),
+        field: 'started',
         create: true,
     },
     {
         align: 'left',
-        name: 'endDate',
+        name: 'ended',
         label: t('worker.formation.tableVisibleColumns.endDate'),
         component: VnInputDate,
-        props: (prop) => ({
-            disable: true,
-            'model-value': prop.row.ended,
-        }),
+        field: 'ended',
         create: true,
     },
     {
         align: 'left',
-        name: 'center',
+        name: 'centerFk',
         label: t('worker.formation.tableVisibleColumns.center'),
         component: 'select',
-        attrs: {
-            url: 'Workers/trainingCenter',
-            fields: ['id', 'name'],
-        },
+        field: 'centerFk',
         create: true,
     },
     {
@@ -60,16 +63,14 @@ const columns = computed(() => [
         name: 'invoice',
         label: t('worker.formation.tableVisibleColumns.invoice'),
         component: 'input',
+        field: 'invoice',
     },
     {
         align: 'left',
         name: 'amount',
         label: t('worker.formation.tableVisibleColumns.amount'),
         component: 'input',
-        props: (prop) => ({
-            disable: true,
-            'model-value': prop.row.amount,
-        }),
+        field: 'amount',
         create: true,
     },
     {
@@ -77,20 +78,14 @@ const columns = computed(() => [
         name: 'remark',
         label: t('worker.formation.tableVisibleColumns.remark'),
         component: 'checkbox',
-        props: (prop) => ({
-            disable: true,
-            'model-value': prop.row.remark,
-        }),
+        field: 'remark',
         create: true,
     },
     {
         align: 'left',
         name: 'hasDiploma',
         label: t('worker.formation.tableVisibleColumns.hasDiploma'),
-        props: (prop) => ({
-            disable: true,
-            'model-value': prop.row.hasDiploma,
-        }),
+        field: 'hasDiploma',
         create: true,
     },
 ]);
@@ -101,6 +96,7 @@ const columns = computed(() => [
         data-key="WorkerFormation"
         :url="`Workers/${entityId}/trainingCourse`"
         :url-create="`Workers/${entityId}/trainingCourse`"
+        :filter="courseFilter"
         :create="{
             urlCreate: 'Workers/trainingCourse',
             title: 'Create trainingCourse',

From 264d887fb454c59cef294bb0b39cdb4e5c0e0eac Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Tue, 28 May 2024 12:09:03 +0200
Subject: [PATCH 041/167] refs #7406 fix Tb components create

---
 src/components/ui/VnPaginate.vue          |  5 +++
 src/pages/Worker/Card/WorkerFormation.vue | 38 ++++++++++++++++-------
 2 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/src/components/ui/VnPaginate.vue b/src/components/ui/VnPaginate.vue
index 58dd0d313..d3000bc64 100644
--- a/src/components/ui/VnPaginate.vue
+++ b/src/components/ui/VnPaginate.vue
@@ -26,6 +26,10 @@ const props = defineProps({
         type: Object,
         default: null,
     },
+    userFilter: {
+        type: Object,
+        default: null,
+    },
     where: {
         type: Object,
         default: null,
@@ -78,6 +82,7 @@ const arrayData = useArrayData(props.dataKey, {
     where: props.where,
     limit: props.limit,
     order: props.order,
+    userFilter: props.userFilter,
     userParams: props.userParams,
     exprBuilder: props.exprBuilder,
     keepOpts: props.keepOpts,
diff --git a/src/pages/Worker/Card/WorkerFormation.vue b/src/pages/Worker/Card/WorkerFormation.vue
index c8fd50303..02a3cdba2 100644
--- a/src/pages/Worker/Card/WorkerFormation.vue
+++ b/src/pages/Worker/Card/WorkerFormation.vue
@@ -30,9 +30,14 @@ const columns = computed(() => [
         name: 'trainingCourseTypeFk',
         label: t('worker.formation.tableVisibleColumns.course'),
         isTitle: true,
-        component: 'select',
-        field: 'trainingCourseTypeFk',
         create: true,
+        component: 'select',
+        attrs: {
+            url: 'TrainingCourseTypes',
+            fields: ['id', 'name'],
+        },
+        disable: false,
+        inWhere: true,
     },
     {
         align: 'left',
@@ -41,6 +46,7 @@ const columns = computed(() => [
         component: VnInputDate,
         field: 'started',
         create: true,
+        cardVisible: true,
     },
     {
         align: 'left',
@@ -54,9 +60,15 @@ const columns = computed(() => [
         align: 'left',
         name: 'centerFk',
         label: t('worker.formation.tableVisibleColumns.center'),
-        component: 'select',
         field: 'centerFk',
         create: true,
+        component: 'select',
+        attrs: {
+            url: 'TrainingCenters',
+            fields: ['id', 'name'],
+        },
+        disable: false,
+        inWhere: true,
     },
     {
         align: 'left',
@@ -77,16 +89,21 @@ const columns = computed(() => [
         align: 'left',
         name: 'remark',
         label: t('worker.formation.tableVisibleColumns.remark'),
-        component: 'checkbox',
-        field: 'remark',
         create: true,
+        chip: {
+            color: null,
+            condition: (value) => value,
+        },
     },
     {
         align: 'left',
         name: 'hasDiploma',
         label: t('worker.formation.tableVisibleColumns.hasDiploma'),
-        field: 'hasDiploma',
         create: true,
+        chip: {
+            color: null,
+            condition: (value) => value,
+        },
     },
 ]);
 </script>
@@ -96,14 +113,13 @@ const columns = computed(() => [
         data-key="WorkerFormation"
         :url="`Workers/${entityId}/trainingCourse`"
         :url-create="`Workers/${entityId}/trainingCourse`"
-        :filter="courseFilter"
+        :user-filter="courseFilter"
         :create="{
-            urlCreate: 'Workers/trainingCourse',
+            urlCreate: 'trainingCourses',
             title: 'Create trainingCourse',
-            onDataSaved: ({ id }) => tableRef.redirect(id),
+            onDataSaved: () => tableRef.reload(),
             formInitialData: {
-                active: true,
-                isEqualizated: false,
+                workerFk: entityId,
             },
         }"
         order="id DESC"

From 92244ad96b723a1de0c4f83d3181ee171aa9daa1 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Wed, 29 May 2024 07:47:47 +0200
Subject: [PATCH 042/167] feat(VnTable): refs #6825 merge where's

---
 src/components/VnTable/VnFilter.vue           |   2 +-
 src/composables/useArrayData.js               |  15 +-
 .../ExtendedList/CustomerExtendedList.vue     |  61 ++
 .../CustomerExtendedListActions.vue           |  60 --
 .../CustomerExtendedListFilter.vue            | 571 ------------------
 5 files changed, 76 insertions(+), 633 deletions(-)
 delete mode 100644 src/pages/Customer/ExtendedList/CustomerExtendedListActions.vue
 delete mode 100644 src/pages/Customer/ExtendedList/CustomerExtendedListFilter.vue

diff --git a/src/components/VnTable/VnFilter.vue b/src/components/VnTable/VnFilter.vue
index 0eb2e2a19..d572b8be0 100644
--- a/src/components/VnTable/VnFilter.vue
+++ b/src/components/VnTable/VnFilter.vue
@@ -106,7 +106,7 @@ async function addFilter(value) {
     let params = { [field]: value };
     if (columnFilter.value?.inWhere) {
         if (columnFilter.value.alias) field = columnFilter.value.alias + '.' + field;
-        params = { filter: { where: { [field]: value } } };
+        return await arrayData.addFilterWhere(params);
     }
     await arrayData.addFilter({ params });
 }
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index ba6f62810..81a2bf01a 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -150,6 +150,13 @@ export function useArrayData(key, userOptions) {
         return { filter, params };
     }
 
+    async function addFilterWhere(where) {
+        const storedFilter = { ...store.userFilter };
+        if (!storedFilter?.where) storedFilter.where = {};
+        where = { ...storedFilter.where, ...where };
+        await addFilter({ filter: { where } });
+    }
+
     function sanitizerParams(params, exprBuilder) {
         for (const param in params) {
             if (params[param] === '' || params[param] === null) {
@@ -188,7 +195,12 @@ export function useArrayData(key, userOptions) {
         if (store.limit) query.limit = store.limit;
         if (store.skip) query.skip = store.skip;
         if (store.userParams && Object.keys(store.userParams).length !== 0)
-            query.params = JSON.stringify(store.userParams);
+            query.params = store.userParams;
+        if (store.userFilter && Object.keys(store.userFilter).length !== 0) {
+            if (!query.params) query.params = {};
+            query.params.filter = store.userFilter;
+        }
+        if (query.params) query.params = JSON.stringify(query.params);
 
         router.replace({
             path: route.path,
@@ -203,6 +215,7 @@ export function useArrayData(key, userOptions) {
         fetch,
         applyFilter,
         addFilter,
+        addFilterWhere,
         refresh,
         destroy,
         loadMore,
diff --git a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
index 3edb680fa..3a026763d 100644
--- a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
+++ b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
@@ -198,16 +198,44 @@ const columns = computed(() => [
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.payMethodFk'),
         name: 'payMethodFk',
+        columnFilter: {
+            component: 'select',
+            attrs: {
+                url: 'PayMethods',
+            },
+            inWhere: true,
+        },
+        format: (row, dashIfEmpty) => dashIfEmpty(row.payMethod),
     },
     {
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.sageTaxTypeFk'),
         name: 'sageTaxTypeFk',
+        columnFilter: {
+            component: 'select',
+            attrs: {
+                optionLabel: 'vat',
+                url: 'SageTaxTypes',
+            },
+            alias: 'sti',
+            inWhere: true,
+        },
+        format: (row, dashIfEmpty) => dashIfEmpty(row.sageTaxType),
     },
     {
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.sageTransactionTypeFk'),
         name: 'sageTransactionTypeFk',
+        columnFilter: {
+            component: 'select',
+            attrs: {
+                optionLabel: 'transaction',
+                url: 'SageTransactionTypes',
+            },
+            alias: 'stt',
+            inWhere: true,
+        },
+        format: (row, dashIfEmpty) => dashIfEmpty(row.sageTransactionType),
     },
     {
         align: 'left',
@@ -218,22 +246,34 @@ const columns = computed(() => [
             condition: (value) => !value,
             icon: 'vn:disabled',
         },
+        columnFilter: {
+            inWhere: true,
+        },
     },
     {
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.isVies'),
         name: 'isVies',
+        columnFilter: {
+            inWhere: true,
+        },
     },
     {
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.isTaxDataChecked'),
         name: 'isTaxDataChecked',
+        columnFilter: {
+            inWhere: true,
+        },
     },
     {
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.isEqualizated'),
         name: 'isEqualizated',
         created: true,
+        columnFilter: {
+            inWhere: true,
+        },
     },
     {
         align: 'left',
@@ -244,36 +284,57 @@ const columns = computed(() => [
             condition: (value) => value,
             icon: 'vn:frozen',
         },
+        columnFilter: {
+            inWhere: true,
+        },
     },
     {
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.hasToInvoice'),
         name: 'hasToInvoice',
+        columnFilter: {
+            inWhere: true,
+        },
     },
     {
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.hasToInvoiceByAddress'),
         name: 'hasToInvoiceByAddress',
+        columnFilter: {
+            inWhere: true,
+        },
     },
     {
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.isToBeMailed'),
         name: 'isToBeMailed',
+        columnFilter: {
+            inWhere: true,
+        },
     },
     {
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.hasLcr'),
         name: 'hasLcr',
+        columnFilter: {
+            inWhere: true,
+        },
     },
     {
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.hasCoreVnl'),
         name: 'hasCoreVnl',
+        columnFilter: {
+            inWhere: true,
+        },
     },
     {
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.hasSepaVnl'),
         name: 'hasSepaVnl',
+        columnFilter: {
+            inWhere: true,
+        },
     },
     {
         align: 'right',
diff --git a/src/pages/Customer/ExtendedList/CustomerExtendedListActions.vue b/src/pages/Customer/ExtendedList/CustomerExtendedListActions.vue
deleted file mode 100644
index 8355c7560..000000000
--- a/src/pages/Customer/ExtendedList/CustomerExtendedListActions.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<script setup>
-import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
-import CustomerSummary from '../Card/CustomerSummary.vue';
-import { useSummaryDialog } from 'src/composables/useSummaryDialog';
-
-const { t } = useI18n();
-const router = useRouter();
-const { viewSummary } = useSummaryDialog();
-
-const $props = defineProps({
-    id: {
-        type: Number,
-        required: true,
-    },
-});
-
-const redirectToCreateView = () => {
-    router.push({
-        name: 'TicketList',
-        query: {
-            params: JSON.stringify({
-                clientFk: $props.id,
-            }),
-        },
-    });
-};
-</script>
-
-<template>
-    <div>
-        <QIcon
-            @click.stop="redirectToCreateView"
-            color="primary"
-            name="vn:ticket"
-            size="sm"
-        >
-            <QTooltip>
-                {{ t('Client ticket list') }}
-            </QTooltip>
-        </QIcon>
-        <QIcon
-            @click.stop="viewSummary($props.id, CustomerSummary)"
-            class="q-ml-md"
-            color="primary"
-            name="preview"
-            size="sm"
-        >
-            <QTooltip>
-                {{ t('Preview') }}
-            </QTooltip>
-        </QIcon>
-    </div>
-</template>
-
-<i18n>
-es:
-    Client ticket list: Listado de tickets del cliente
-    Preview: Vista previa
-</i18n>
diff --git a/src/pages/Customer/ExtendedList/CustomerExtendedListFilter.vue b/src/pages/Customer/ExtendedList/CustomerExtendedListFilter.vue
deleted file mode 100644
index 1be20f26c..000000000
--- a/src/pages/Customer/ExtendedList/CustomerExtendedListFilter.vue
+++ /dev/null
@@ -1,571 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-import FetchData from 'components/FetchData.vue';
-import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
-import VnSelect from 'components/common/VnSelect.vue';
-import VnInput from 'src/components/common/VnInput.vue';
-import VnInputDate from 'components/common/VnInputDate.vue';
-import { dateRange } from 'src/filters';
-
-const props = defineProps({
-    dataKey: {
-        type: String,
-        required: true,
-    },
-    visibleColumns: {
-        type: Array,
-        required: true,
-    },
-});
-
-const { t } = useI18n();
-
-const clients = ref();
-const workers = ref();
-const countriesOptions = ref([]);
-const provincesOptions = ref([]);
-const paymethodsOptions = ref([]);
-const businessTypesOptions = ref([]);
-const sageTaxTypesOptions = ref([]);
-const sageTransactionTypesOptions = ref([]);
-
-const visibleColumnsSet = computed(() => new Set(props.visibleColumns));
-
-const exprBuilder = (param, value) => {
-    switch (param) {
-        case 'created':
-            return {
-                'c.created': {
-                    between: dateRange(value),
-                },
-            };
-        case 'id':
-        case 'name':
-        case 'socialName':
-        case 'fi':
-        case 'credit':
-        case 'creditInsurance':
-        case 'phone':
-        case 'mobile':
-        case 'street':
-        case 'city':
-        case 'postcode':
-        case 'email':
-        case 'isActive':
-        case 'isVies':
-        case 'isTaxDataChecked':
-        case 'isEqualizated':
-        case 'isFreezed':
-        case 'hasToInvoice':
-        case 'hasToInvoiceByAddress':
-        case 'isToBeMailed':
-        case 'hasSepaVnl':
-        case 'hasLcr':
-        case 'hasCoreVnl':
-        case 'countryFk':
-        case 'provinceFk':
-        case 'salesPersonFk':
-        case 'businessTypeFk':
-        case 'payMethodFk':
-        case 'sageTaxTypeFk':
-        case 'sageTransactionTypeFk':
-            return { [`c.${param}`]: value };
-    }
-};
-
-const shouldRenderColumn = (colName) => {
-    return visibleColumnsSet.value.has(colName);
-};
-</script>
-
-<template>
-    <FetchData
-        url="Clients"
-        :filter="{ where: { role: 'socialName' } }"
-        @on-fetch="(data) => (clients = data)"
-        auto-load
-    />
-    <FetchData
-        url="Workers/activeWithInheritedRole"
-        :filter="{ where: { role: 'salesPerson' } }"
-        @on-fetch="(data) => (workers = data)"
-        auto-load
-    />
-    <FetchData
-        url="Workers/activeWithInheritedRole"
-        :filter="{ where: { role: 'salesPerson' } }"
-        @on-fetch="(data) => (workers = data)"
-        auto-load
-    />
-    <FetchData
-        url="Countries"
-        :filter="{ fields: ['id', 'country'], order: 'country ASC' }"
-        @on-fetch="(data) => (countriesOptions = data)"
-        auto-load
-    />
-    <FetchData
-        ref="provincesFetchDataRef"
-        @on-fetch="(data) => (provincesOptions = data)"
-        auto-load
-        url="Provinces"
-    />
-    <FetchData
-        url="Paymethods"
-        @on-fetch="(data) => (paymethodsOptions = data)"
-        auto-load
-    />
-    <FetchData
-        url="BusinessTypes"
-        @on-fetch="(data) => (businessTypesOptions = data)"
-        auto-load
-    />
-    <FetchData
-        url="SageTaxTypes"
-        auto-load
-        @on-fetch="(data) => (sageTaxTypesOptions = data)"
-    />
-    <FetchData
-        url="sageTransactionTypes"
-        auto-load
-        @on-fetch="(data) => (sageTransactionTypesOptions = data)"
-    />
-    <VnFilterPanel
-        :data-key="props.dataKey"
-        :search-button="true"
-        :expr-builder="exprBuilder"
-    >
-        <template #tags="{ tag, formatFn }">
-            <div class="q-gutter-x-xs">
-                <strong
-                    >{{ t(`customer.extendedList.tableVisibleColumns.${tag.label}`) }}:
-                </strong>
-                <span>{{ formatFn(tag.value) }}</span>
-            </div>
-        </template>
-        <template #body="{ params, searchFn }">
-            <QItem v-if="shouldRenderColumn('id')">
-                <QItemSection>
-                    <VnInput
-                        :label="t('customer.extendedList.tableVisibleColumns.id')"
-                        v-model="params.id"
-                        is-outlined
-                        clearable
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem v-if="shouldRenderColumn('name')">
-                <QItemSection>
-                    <VnInput
-                        :label="t('customer.extendedList.tableVisibleColumns.name')"
-                        v-model="params.name"
-                        is-outlined
-                    />
-                </QItemSection>
-            </QItem>
-            <!-- <QItem class="q-mb-sm">
-                    <QItemSection v-if="!clients">
-                        <QSkeleton type="QInput" class="full-width" />
-                    </QItemSection>
-                    <QItemSection v-if="clients">
-                        <VnSelect
-                            :label="t('Social name')"
-                            v-model="params.socialName"
-                            @update:model-value="searchFn()"
-                            :options="clients"
-                            option-value="socialName"
-                            option-label="socialName"
-                            emit-value
-                            map-options
-                            use-input
-                            hide-selected
-                            dense
-                            outlined
-                            rounded
-                            :input-debounce="0"
-                        />
-                    </QItemSection>
-                </QItem> -->
-            <QItem v-if="shouldRenderColumn('fi')">
-                <QItemSection>
-                    <VnInput
-                        :label="t('customer.extendedList.tableVisibleColumns.fi')"
-                        v-model="params.fi"
-                        is-outlined
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem v-if="shouldRenderColumn('salesPersonFk')">
-                <QItemSection v-if="!workers">
-                    <QSkeleton type="QInput" class="full-width" />
-                </QItemSection>
-                <QItemSection v-if="workers">
-                    <VnSelect
-                        :label="
-                            t('customer.extendedList.tableVisibleColumns.salesPersonFk')
-                        "
-                        v-model="params.salesPersonFk"
-                        @update:model-value="searchFn()"
-                        :options="workers"
-                        option-value="id"
-                        option-label="name"
-                        emit-value
-                        map-options
-                        use-input
-                        hide-selected
-                        dense
-                        outlined
-                        rounded
-                        :input-debounce="0"
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem v-if="shouldRenderColumn('credit')">
-                <QItemSection>
-                    <VnInput
-                        :label="t('customer.extendedList.tableVisibleColumns.credit')"
-                        v-model="params.credit"
-                        is-outlined
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem v-if="shouldRenderColumn('creditInsurance')">
-                <QItemSection>
-                    <VnInput
-                        :label="
-                            t('customer.extendedList.tableVisibleColumns.creditInsurance')
-                        "
-                        v-model="params.creditInsurance"
-                        is-outlined
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem v-if="shouldRenderColumn('phone')">
-                <QItemSection>
-                    <VnInput
-                        :label="t('customer.extendedList.tableVisibleColumns.phone')"
-                        v-model="params.phone"
-                        is-outlined
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem v-if="shouldRenderColumn('mobile')">
-                <QItemSection>
-                    <VnInput
-                        :label="t('customer.extendedList.tableVisibleColumns.mobile')"
-                        v-model="params.mobile"
-                        is-outlined
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem v-if="shouldRenderColumn('street')">
-                <QItemSection>
-                    <VnInput
-                        :label="t('customer.extendedList.tableVisibleColumns.street')"
-                        v-model="params.street"
-                        is-outlined
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem v-if="shouldRenderColumn('countryFk')">
-                <QItemSection>
-                    <VnSelect
-                        :label="t('customer.extendedList.tableVisibleColumns.countryFk')"
-                        v-model="params.countryFk"
-                        @update:model-value="searchFn()"
-                        :options="countriesOptions"
-                        option-value="id"
-                        option-label="country"
-                        map-options
-                        hide-selected
-                        dense
-                        outlined
-                        rounded
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem v-if="shouldRenderColumn('provinceFk')">
-                <QItemSection>
-                    <VnSelect
-                        :label="t('customer.extendedList.tableVisibleColumns.provinceFk')"
-                        v-model="params.provinceFk"
-                        @update:model-value="searchFn()"
-                        :options="provincesOptions"
-                        option-value="id"
-                        option-label="name"
-                        map-options
-                        hide-selected
-                        dense
-                        outlined
-                        rounded
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem v-if="shouldRenderColumn('city')">
-                <QItemSection>
-                    <VnInput
-                        :label="t('customer.extendedList.tableVisibleColumns.city')"
-                        v-model="params.city"
-                        is-outlined
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem v-if="shouldRenderColumn('postcode')">
-                <QItemSection>
-                    <VnInput
-                        :label="t('customer.extendedList.tableVisibleColumns.postcode')"
-                        v-model="params.postcode"
-                        is-outlined
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem v-if="shouldRenderColumn('email')">
-                <QItemSection>
-                    <VnInput
-                        :label="t('customer.extendedList.tableVisibleColumns.email')"
-                        v-model="params.email"
-                        is-outlined
-                    />
-                </QItemSection>
-            </QItem>
-
-            <QItem v-if="shouldRenderColumn('created')">
-                <QItemSection>
-                    <VnInputDate
-                        v-model="params.created"
-                        :label="t('customer.extendedList.tableVisibleColumns.created')"
-                        @update:model-value="searchFn()"
-                        is-outlined
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem v-if="shouldRenderColumn('businessTypeFk')">
-                <QItemSection>
-                    <VnSelect
-                        :label="
-                            t('customer.extendedList.tableVisibleColumns.businessTypeFk')
-                        "
-                        v-model="params.businessTypeFk"
-                        :options="businessTypesOptions"
-                        @update:model-value="searchFn()"
-                        option-value="code"
-                        option-label="description"
-                        map-options
-                        hide-selected
-                        dense
-                        outlined
-                        rounded
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem v-if="shouldRenderColumn('payMethodFk')">
-                <QItemSection>
-                    <VnSelect
-                        :label="
-                            t('customer.extendedList.tableVisibleColumns.payMethodFk')
-                        "
-                        v-model="params.payMethodFk"
-                        :options="paymethodsOptions"
-                        @update:model-value="searchFn()"
-                        option-value="id"
-                        option-label="name"
-                        map-options
-                        hide-selected
-                        dense
-                        outlined
-                        rounded
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem v-if="shouldRenderColumn('sageTaxTypeFk')">
-                <QItemSection>
-                    <VnSelect
-                        :label="
-                            t('customer.extendedList.tableVisibleColumns.sageTaxTypeFk')
-                        "
-                        v-model="params.sageTaxTypeFk"
-                        @update:model-value="searchFn()"
-                        :options="sageTaxTypesOptions"
-                        option-value="id"
-                        option-label="vat"
-                        map-options
-                        hide-selected
-                        dense
-                        outlined
-                        rounded
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem v-if="shouldRenderColumn('sageTransactionTypeFk')">
-                <QItemSection>
-                    <VnSelect
-                        :label="
-                            t(
-                                'customer.extendedList.tableVisibleColumns.sageTransactionTypeFk'
-                            )
-                        "
-                        v-model="params.sageTransactionTypeFk"
-                        @update:model-value="searchFn()"
-                        :options="sageTransactionTypesOptions"
-                        option-value="id"
-                        option-label="transaction"
-                        map-options
-                        hide-selected
-                        dense
-                        outlined
-                        rounded
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem v-if="shouldRenderColumn('isActive') || shouldRenderColumn('isVies')">
-                <QItemSection v-if="shouldRenderColumn('isActive')">
-                    <QCheckbox
-                        v-model="params.isActive"
-                        @update:model-value="searchFn()"
-                        :label="t('customer.extendedList.tableVisibleColumns.isActive')"
-                        toggle-indeterminate
-                        :false-value="undefined"
-                    />
-                </QItemSection>
-                <QItemSection v-if="shouldRenderColumn('isVies')">
-                    <QCheckbox
-                        v-model="params.isVies"
-                        @update:model-value="searchFn()"
-                        :label="t('customer.extendedList.tableVisibleColumns.isVies')"
-                        toggle-indeterminate
-                        :false-value="undefined"
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem
-                v-if="
-                    shouldRenderColumn('isEqualizated') ||
-                    shouldRenderColumn('isTaxDataChecked')
-                "
-            >
-                <QItemSection v-if="shouldRenderColumn('isTaxDataChecked')">
-                    <QCheckbox
-                        v-model="params.isTaxDataChecked"
-                        @update:model-value="searchFn()"
-                        :label="
-                            t(
-                                'customer.extendedList.tableVisibleColumns.isTaxDataChecked'
-                            )
-                        "
-                        toggle-indeterminate
-                        :false-value="undefined"
-                    />
-                </QItemSection>
-                <QItemSection v-if="shouldRenderColumn('isEqualizated')">
-                    <QCheckbox
-                        v-model="params.isEqualizated"
-                        @update:model-value="searchFn()"
-                        :label="
-                            t('customer.extendedList.tableVisibleColumns.isEqualizated')
-                        "
-                        toggle-indeterminate
-                        :false-value="undefined"
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem
-                v-if="
-                    shouldRenderColumn('hasToInvoice') || shouldRenderColumn('isFreezed')
-                "
-            >
-                <QItemSection v-if="shouldRenderColumn('isFreezed')">
-                    <QCheckbox
-                        v-model="params.isFreezed"
-                        @update:model-value="searchFn()"
-                        :label="t('customer.extendedList.tableVisibleColumns.isFreezed')"
-                        toggle-indeterminate
-                        :false-value="undefined"
-                    />
-                </QItemSection>
-                <QItemSection v-if="shouldRenderColumn('hasToInvoice')">
-                    <QCheckbox
-                        v-model="params.hasToInvoice"
-                        @update:model-value="searchFn()"
-                        :label="
-                            t('customer.extendedList.tableVisibleColumns.hasToInvoice')
-                        "
-                        toggle-indeterminate
-                        :false-value="undefined"
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem
-                v-if="
-                    shouldRenderColumn('isToBeMailed') ||
-                    shouldRenderColumn('hasToInvoiceByAddress')
-                "
-            >
-                <QItemSection v-if="shouldRenderColumn('hasToInvoiceByAddress')">
-                    <QCheckbox
-                        v-model="params.hasToInvoiceByAddress"
-                        @update:model-value="searchFn()"
-                        :label="
-                            t(
-                                'customer.extendedList.tableVisibleColumns.hasToInvoiceByAddress'
-                            )
-                        "
-                        toggle-indeterminate
-                        :false-value="undefined"
-                    />
-                </QItemSection>
-                <QItemSection v-if="shouldRenderColumn('isToBeMailed')">
-                    <QCheckbox
-                        v-model="params.isToBeMailed"
-                        @update:model-value="searchFn()"
-                        :label="
-                            t('customer.extendedList.tableVisibleColumns.isToBeMailed')
-                        "
-                        toggle-indeterminate
-                        :false-value="undefined"
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem
-                v-if="shouldRenderColumn('hasLcr') || shouldRenderColumn('hasCoreVnl')"
-            >
-                <QItemSection v-if="shouldRenderColumn('hasLcr')">
-                    <QCheckbox
-                        v-model="params.hasLcr"
-                        @update:model-value="searchFn()"
-                        :label="t('customer.extendedList.tableVisibleColumns.hasLcr')"
-                        toggle-indeterminate
-                        :false-value="undefined"
-                    />
-                </QItemSection>
-                <QItemSection v-if="shouldRenderColumn('hasCoreVnl')">
-                    <QCheckbox
-                        v-model="params.hasCoreVnl"
-                        @update:model-value="searchFn()"
-                        :label="t('customer.extendedList.tableVisibleColumns.hasCoreVnl')"
-                        toggle-indeterminate
-                        :false-value="undefined"
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem v-if="shouldRenderColumn('hasSepaVnl')">
-                <QItemSection>
-                    <QCheckbox
-                        v-model="params.hasSepaVnl"
-                        @update:model-value="searchFn()"
-                        :label="t('customer.extendedList.tableVisibleColumns.hasSepaVnl')"
-                        toggle-indeterminate
-                        :false-value="undefined"
-                    />
-                </QItemSection>
-            </QItem>
-
-            <QSeparator />
-        </template>
-    </VnFilterPanel>
-</template>
-
-<i18n>
-es:
-    Social name: Razón social
-</i18n>

From 18e3e611e9a9e543f4a687775a4eaf96662052b0 Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Mon, 3 Jun 2024 10:53:16 +0200
Subject: [PATCH 043/167] refactor: refs #6739 changed invoice functions' name

---
 src/components/TransferInvoiceForm.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/TransferInvoiceForm.vue b/src/components/TransferInvoiceForm.vue
index f69bf6b83..d60eb7a14 100644
--- a/src/components/TransferInvoiceForm.vue
+++ b/src/components/TransferInvoiceForm.vue
@@ -37,7 +37,7 @@ const selectedClient = (client) => {
     transferInvoiceParams.selectedClientData = client;
 };
 
-const transferInvoice = async () => {
+const makeInvoice = async () => {
     const hasToInvoiceByAddress =
         transferInvoiceParams.selectedClientData.hasToInvoiceByAddress;
 
@@ -116,7 +116,7 @@ const transferInvoice = async () => {
         auto-load
     />
     <FormPopup
-        @on-submit="transferInvoice()"
+        @on-submit="makeInvoice()"
         :title="t('Transfer invoice')"
         :custom-submit-button-label="t('Transfer client')"
         :default-cancel-button="false"

From adf7c3a13920695d6c2528ca42a9b691d8f71b5d Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Tue, 4 Jun 2024 09:54:45 +0200
Subject: [PATCH 044/167] feat: refs #6896 new filters

---
 src/pages/Order/Card/OrderCatalogFilter.vue | 123 ++++++++++++--------
 1 file changed, 73 insertions(+), 50 deletions(-)

diff --git a/src/pages/Order/Card/OrderCatalogFilter.vue b/src/pages/Order/Card/OrderCatalogFilter.vue
index af593008f..46bb80b21 100644
--- a/src/pages/Order/Card/OrderCatalogFilter.vue
+++ b/src/pages/Order/Card/OrderCatalogFilter.vue
@@ -3,12 +3,12 @@ import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import axios from 'axios';
-import VnInput from 'components/common/VnInput.vue';
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnSelect from 'components/common/VnSelect.vue';
 import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
 import { useValidator } from 'src/composables/useValidator';
+import VnInput from 'src/components/common/VnInput.vue';
 
 const { t } = useI18n();
 
@@ -39,9 +39,9 @@ const moreFields = ref([]);
 const moreFieldsOrder = ref([]);
 const createValue = (val, done) => {
     if (val.length > 2) {
-        // if (!tagOptions.value.includes(val)) {
-        // done(tagOptions.value, 'add-unique');
-        // }
+        if (!tagOptions.value.includes(val)) {
+            done(tagOptions.value, 'add-unique');
+        }
         tagValues.value.push({ value: val });
     }
 };
@@ -100,22 +100,6 @@ const tagValues = ref([{}]);
 const tagOptions = ref([]);
 
 const applyTagFilter = (params, search) => {
-    // console.log('params: ', params);
-    // if (!selectedTag.value) {
-    //     console.log('values: ', selectedTag?.value?.name);
-
-    //     params.tagGroups.push(
-    //         JSON.stringify({
-    //             values: selectedTag?.value?.name,
-    //             // tagSelection: {
-    //             //     ...selectedTag.value,
-    //             //     orgShowField: selectedTag?.value?.name,
-    //             // },
-    //         })
-    //     );
-    //     search();
-    //     return;
-    // }
     if (!tagValues.value?.length) {
         params.tagGroups = null;
         search();
@@ -148,14 +132,42 @@ const removeTagChip = (selection, params, search) => {
     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) => {
+    const tagObj = JSON.parse(params.orderBy);
+    tagObj.way = value.name;
+    params.orderBy = JSON.stringify(tagObj);
 };
 
+const onOrderFieldChange = (value, params) => {
+    console.log('value: ', value);
+    console.log('params: ', params);
+    const tagObj = JSON.parse(params.orderBy);
+    switch (value) {
+        case 'Relevancy':
+            tagObj.field = value + ' DESC, name';
+            params.orderBy = JSON.stringify(tagObj);
+            console.log('params: ', params);
+            break;
+        case 'ColorAndPrice':
+            tagObj.field = 'showOrder, price';
+            params.orderBy = JSON.stringify(tagObj);
+            console.log('params: ', params);
+            break;
+        case 'Name':
+            tagObj.field = 'name';
+            params.orderBy = JSON.stringify(tagObj);
+            console.log('params: ', params);
+            break;
+        case 'Price':
+            tagObj.field = 'price';
+            params.orderBy = JSON.stringify(tagObj);
+            console.log('params: ', params);
+            break;
+    }
+};
+
+const _moreFields = ['ASC', 'DESC'];
+const _moreFieldsTypes = ['Relevancy', 'ColorAndPrice', 'Name', 'Price'];
 const setCategoryList = (data) => {
     categoryList.value = (data || [])
         .filter((category) => category.display)
@@ -163,8 +175,6 @@ const setCategoryList = (data) => {
             ...category,
             icon: `vn:${(category.icon || '').split('-')[1]}`,
         }));
-    const _moreFields = ['ASC', 'DESC'];
-    const _moreFieldsTypes = ['Relevancy', 'ColorAndPrice', 'Name', 'Price'];
     moreFields.value = useLang(_moreFields);
     moreFieldsOrder.value = useLang(_moreFieldsTypes);
 };
@@ -195,11 +205,13 @@ const useLang = (values) => {
     <VnFilterPanel
         :data-key="props.dataKey"
         :hidden-tags="['orderFk', 'orderBy']"
+        :unremovable-params="['orderFk', 'orderBy']"
         :expr-builder="exprBuilder"
         :custom-tags="['tagGroups']"
         @remove="clearFilter"
     >
         <template #tags="{ tag, formatFn }">
+            {{ console.log('tag: ', tag) }}
             <strong v-if="tag.label === 'categoryFk'">
                 {{ t(selectedCategory?.name || '') }}
             </strong>
@@ -293,9 +305,7 @@ const useLang = (values) => {
                         dense
                         outlined
                         rounded
-                        @update:model-value="
-                            (value) => onOrderChange(value, params, searchFn)
-                        "
+                        @update:model-value="(value) => onOrderChange(value, params)"
                     />
                 </QItemSection>
             </QItem>
@@ -310,9 +320,7 @@ const useLang = (values) => {
                         dense
                         outlined
                         rounded
-                        @update:model-value="
-                            (value) => onOrderFieldChange(value, params, searchFn)
-                        "
+                        @update:model-value="(value) => onOrderFieldChange(value, params)"
                     />
                 </QItemSection>
             </QItem>
@@ -338,14 +346,15 @@ const useLang = (values) => {
                 :key="value"
                 class="q-mt-md filter-value"
             >
-                <VnInput
-                    v-if="selectedTag?.isFree"
-                    v-model="value.value"
-                    :label="t('params.value')"
-                    is-outlined
-                    class="filter-input"
+                <FetchData
+                    v-if="selectedTag"
+                    :url="`Tags/${selectedTag}/filterValue`"
+                    limit="30"
+                    auto-load
+                    @on-fetch="(data) => (tagOptions = data)"
                 />
                 <VnSelect
+                    v-if="!selectedTag"
                     :label="t('params.value')"
                     v-model="value.value"
                     :options="tagValue || []"
@@ -358,17 +367,31 @@ const useLang = (values) => {
                     use-input
                     class="filter-input"
                     @new-value="createValue"
-                >
-                </VnSelect>
-                <FetchData
-                    v-if="selectedTag"
-                    :url="`Tags/${selectedTag}/filterValue`"
-                    limit="30"
-                    auto-load
-                    @on-fetch="(data) => (tagOptions = data)"
                 />
-                {{ console.log('selectedTag: ', selectedTag) }}
-
+                <VnSelect
+                    v-else-if="selectedTag === 1"
+                    :label="t('params.value')"
+                    v-model="value.value"
+                    :options="tagOptions || []"
+                    option-value="value"
+                    option-label="value"
+                    dense
+                    outlined
+                    rounded
+                    emit-value
+                    use-input
+                    class="filter-input"
+                    @new-value="createValue"
+                />
+                <VnInput
+                    v-else
+                    :label="t('params.value')"
+                    v-model="value.value"
+                    dense
+                    outlined
+                    rounded
+                    class="filter-input"
+                />
                 <QIcon
                     name="delete"
                     class="filter-icon"

From cb4a5f8d1b891eb34e1c2088cb9bf2bd0b7ac4dc Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Wed, 5 Jun 2024 10:38:40 +0200
Subject: [PATCH 045/167] fix: refs #6825 css

---
 src/components/FormModel.vue       |  2 ++
 src/components/VnTable/VnTable.vue | 30 ++++++++++++++++++++++++++----
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue
index 2c2acb61c..0874a5bbc 100644
--- a/src/components/FormModel.vue
+++ b/src/components/FormModel.vue
@@ -196,6 +196,8 @@ async function save() {
     } catch (err) {
         console.error(err);
         notify('errors.writeRequest', 'negative');
+        hasChanges.value = false;
+        isLoading.value = false;
     }
     isLoading.value = false;
 }
diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index 7488f0db9..93bcfdddb 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -43,6 +43,10 @@ const $props = defineProps({
         type: Object,
         default: null,
     },
+    cardClass: {
+        type: String,
+        default: 'flex-one',
+    },
 });
 const { t } = useI18n();
 const stateStore = useStateStore();
@@ -300,7 +304,11 @@ defineExpose({
                                 }
                             "
                         >
-                            <QCardSection vertical class="no-margin no-padding w-80">
+                            <QCardSection
+                                vertical
+                                class="no-margin no-padding"
+                                :class="colsMap.tableActions ? 'w-80' : 'fit'"
+                            >
                                 <!-- Chips -->
                                 <QCardSection
                                     v-if="splittedColumns.chips.length"
@@ -324,17 +332,21 @@ defineExpose({
                                         :title="row[splittedColumns.title.name]"
                                         @click="stopEventPropagation($event)"
                                         class="cursor-text"
-                                        >{{ row[splittedColumns.title.name] }}</span
                                     >
+                                        {{ row[splittedColumns.title.name] }}
+                                    </span>
                                 </QCardSection>
                                 <!-- Fields -->
-                                <QCardSection class="q-pl-sm q-pr-lg q-py-xs flex-one">
+                                <QCardSection
+                                    class="q-pl-sm q-pr-lg q-py-xs"
+                                    :class="$props.cardClass"
+                                >
                                     <div
                                         v-for="col of splittedColumns.visible"
                                         :key="col.name"
                                         class="fields"
                                     >
-                                        <VnLv :label="`${col.label}:`">
+                                        <VnLv :label="col.label && `${col.label}:`">
                                             <template #value>
                                                 <span
                                                     @click="stopEventPropagation($event)"
@@ -545,6 +557,16 @@ defineExpose({
     white-space: nowrap;
 }
 
+.grid-two {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, max-content));
+    max-width: 100%;
+    margin: 0 auto;
+    overflow: scroll;
+    white-space: wrap;
+    width: 100%;
+}
+
 .w-80 {
     width: 80%;
 }

From 68e49e2ffa654feedb21856351394295c2b676b2 Mon Sep 17 00:00:00 2001
From: pablone <pablone@verdnatura.es>
Date: Fri, 7 Jun 2024 07:52:50 +0200
Subject: [PATCH 046/167] fix: refs #7129 fix some issues on load and tools

---
 src/i18n/locale/en.yml               | 12 ++++++++
 src/i18n/locale/es.yml               | 13 ++++++++
 src/pages/Route/Card/RouteFilter.vue |  1 +
 src/pages/Route/RouteAutonomous.vue  | 16 ++++++++--
 src/pages/Route/RouteList.vue        | 46 +++++++++++++++-------------
 src/pages/Route/RouteTickets.vue     |  3 --
 6 files changed, 64 insertions(+), 27 deletions(-)

diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index 95bd871aa..17a2dd860 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -979,6 +979,18 @@ route:
             shipped: Preparation date
             viewCmr: View CMR
             downloadCmrs: Download CMRs
+    columnLabels:
+        ID: Id
+        vehicle: Vehicle
+        description: Description
+        isServed: Served
+        worker: Worker
+        date: Date
+        started: Started
+        actions: Actions
+        agency: Agency
+        volume: Volume
+        finished: Finished
 supplier:
     pageTitles:
         suppliers: Suppliers
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index 0cbcc984b..56c526f8b 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -101,6 +101,7 @@ globals:
         zonesList: Zonas
         deliveryList: Días de entrega
         upcomingList: Próximos repartos
+        workers: Trabajadores
     created: Fecha creación
     worker: Trabajador
     now: Ahora
@@ -967,6 +968,18 @@ route:
             shipped: Fecha preparación
             viewCmr: Ver CMR
             downloadCmrs: Descargar CMRs
+    columnLabels:
+        Id: Id
+        vehicle: Vehículo
+        description: Descripción
+        isServed: Servida
+        worker: Trabajador
+        date: Fecha
+        started: Iniciada
+        actions: Acciones
+        agency: Agencia
+        volume: Volumen
+        finished: Finalizada
 supplier:
     pageTitles:
         suppliers: Proveedores
diff --git a/src/pages/Route/Card/RouteFilter.vue b/src/pages/Route/Card/RouteFilter.vue
index 050e7c71d..f0215370f 100644
--- a/src/pages/Route/Card/RouteFilter.vue
+++ b/src/pages/Route/Card/RouteFilter.vue
@@ -240,4 +240,5 @@ es:
     From: Desde
     To: Hasta
     Served: Servida
+    Days Onward: Días en adelante
 </i18n>
diff --git a/src/pages/Route/RouteAutonomous.vue b/src/pages/Route/RouteAutonomous.vue
index 238dce070..f34e0671f 100644
--- a/src/pages/Route/RouteAutonomous.vue
+++ b/src/pages/Route/RouteAutonomous.vue
@@ -38,7 +38,7 @@ const selectedRows = ref([]);
 const columns = computed(() => [
     {
         name: 'ID',
-        label: t('ID'),
+        label: 'Id',
         field: (row) => row.routeFk,
         sortable: true,
         align: 'left',
@@ -116,7 +116,11 @@ const columns = computed(() => [
 
 const refreshKey = ref(0);
 
-const total = computed(() => selectedRows.value.reduce((item) => item?.price || 0, 0));
+const total = ref(() => {
+    console.log('selectedRows.value: ', selectedRows.value);
+    return selectedRows.value.reduce((item) => item?.price || 0, 0);
+});
+console.log('total: ', total);
 
 const openDmsUploadDialog = async () => {
     dmsDialog.value.rowsToCreateInvoiceIn = selectedRows.value
@@ -225,6 +229,7 @@ function navigateToRouteSummary(event, row) {
                     </QBtn>
                 </QCard>
             </div>
+            {{ total }}
             <VnPaginate
                 :key="refreshKey"
                 data-key="RouteAutonomousList"
@@ -324,6 +329,13 @@ function navigateToRouteSummary(event, row) {
         cursor: pointer;
     }
 }
+
+th:last-child,
+td:last-child {
+    background-color: var(--vn-section-color);
+    position: sticky;
+    right: 0;
+}
 </style>
 <i18n>
 es:
diff --git a/src/pages/Route/RouteList.vue b/src/pages/Route/RouteList.vue
index 3e7c14dd1..c3788eef1 100644
--- a/src/pages/Route/RouteList.vue
+++ b/src/pages/Route/RouteList.vue
@@ -22,18 +22,27 @@ import RouteListTicketsDialog from 'pages/Route/Card/RouteListTicketsDialog.vue'
 import { useQuasar } from 'quasar';
 import { useArrayData } from 'composables/useArrayData';
 
-const stateStore = useStateStore();
 const { t } = useI18n();
 const { validate } = useValidator();
+const { viewSummary } = useSummaryDialog();
+const stateStore = useStateStore();
 const quasar = useQuasar();
 const session = useSession();
-const { viewSummary } = useSummaryDialog();
+const paginate = ref();
 const visibleColumns = ref([]);
 const selectedRows = ref([]);
+const workers = ref([]);
+const agencyList = ref([]);
+const vehicleList = ref([]);
+const allColumnNames = ref([]);
+const confirmationDialog = ref(false);
+const startingDate = ref(null);
+const refreshKey = ref(0);
+
 const columns = computed(() => [
     {
-        name: 'ID',
-        label: t('ID'),
+        name: 'Id',
+        label: t('Id'),
         field: (row) => row.id,
         sortable: true,
         align: 'center',
@@ -108,14 +117,12 @@ const columns = computed(() => [
         align: 'right',
     },
 ]);
+
 const arrayData = useArrayData('EntryLatestBuys', {
     url: 'Buys/latestBuysFilter',
     order: ['itemFk DESC'],
 });
-const refreshKey = ref(0);
-const workers = ref([]);
-const agencyList = ref([]);
-const vehicleList = ref([]);
+
 const updateRoute = async (route) => {
     try {
         return await axios.patch(`Routes/${route.id}`, route);
@@ -123,9 +130,6 @@ const updateRoute = async (route) => {
         return err;
     }
 };
-const allColumnNames = ref([]);
-const confirmationDialog = ref(false);
-const startingDate = ref(null);
 
 const cloneRoutes = () => {
     axios.post('Routes/clone', {
@@ -134,6 +138,7 @@ const cloneRoutes = () => {
     });
     refreshKey.value++;
     startingDate.value = null;
+    paginate.value.fetch();
 };
 
 const showRouteReport = () => {
@@ -153,15 +158,13 @@ const showRouteReport = () => {
     window.open(url, '_blank');
 };
 
-const markAsServed = () => {
-    selectedRows.value.forEach((row) => {
-        if (row?.id) {
-            axios.patch(`Routes/${row?.id}`, { isOk: true });
-        }
+function markAsServed() {
+    selectedRows.value.forEach(async (row) => {
+        if (row?.id) await axios.patch(`Routes/${row?.id}`, { isOk: true });
     });
     refreshKey.value++;
     startingDate.value = null;
-};
+}
 
 const openTicketsDialog = (id) => {
     if (!id) {
@@ -178,11 +181,9 @@ const openTicketsDialog = (id) => {
 };
 
 onMounted(async () => {
-    stateStore.rightDrawer = true;
     allColumnNames.value = columns.value.map((col) => col.name);
     await arrayData.fetch({ append: false });
 });
-onUnmounted(() => (stateStore.rightDrawer = false));
 </script>
 
 <template>
@@ -246,7 +247,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                     class="LeftIcon"
                     :all-columns="allColumnNames"
                     table-code="routesList"
-                    labels-traductions-path="globals"
+                    labels-traductions-path="route.columnLabels"
                     @on-config-saved="visibleColumns = [...$event]"
                 />
             </template>
@@ -274,7 +275,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                     color="primary"
                     class="q-mr-sm"
                     :disable="!selectedRows?.length"
-                    @click="markAsServed"
+                    @click="markAsServed()"
                 >
                     <QTooltip>{{ t('Mark as served') }}</QTooltip>
                 </QBtn>
@@ -518,7 +519,6 @@ en:
     hourStarted: Started hour
     hourFinished: Finished hour
 es:
-    ID: ID
     Worker: Trabajador
     Agency: Agencia
     Vehicle: Vehículo
@@ -539,4 +539,6 @@ es:
     Summary: Resumen
     Route is closed: La ruta está cerrada
     Route is not served: La ruta no está servida
+    hourStarted: Hora de inicio
+    hourFinished: Hora de fin
 </i18n>
diff --git a/src/pages/Route/RouteTickets.vue b/src/pages/Route/RouteTickets.vue
index 0efcd6e0c..ba3e855d6 100644
--- a/src/pages/Route/RouteTickets.vue
+++ b/src/pages/Route/RouteTickets.vue
@@ -15,14 +15,11 @@ import VnConfirm from 'components/ui/VnConfirm.vue';
 import FetchData from 'components/FetchData.vue';
 import { openBuscaman } from 'src/utils/buscaman';
 import SendSmsDialog from 'components/common/SendSmsDialog.vue';
-import RouteSearchbar from 'pages/Route/Card/RouteSearchbar.vue';
-import { useStateStore } from 'stores/useStateStore';
 
 const { t } = useI18n();
 const quasar = useQuasar();
 const route = useRoute();
 
-const stateStore = useStateStore();
 const selectedRows = ref([]);
 const columns = computed(() => [
     {

From aa2601ac456b35d1f991649e27288bd46f7b4a79 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Mon, 10 Jun 2024 09:15:17 +0200
Subject: [PATCH 047/167] feat(WorkerFormation): add columnFilter

---
 src/pages/Worker/Card/WorkerFormation.vue | 20 ++++++++------------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/src/pages/Worker/Card/WorkerFormation.vue b/src/pages/Worker/Card/WorkerFormation.vue
index 02a3cdba2..97d829140 100644
--- a/src/pages/Worker/Card/WorkerFormation.vue
+++ b/src/pages/Worker/Card/WorkerFormation.vue
@@ -37,7 +37,9 @@ const columns = computed(() => [
             fields: ['id', 'name'],
         },
         disable: false,
-        inWhere: true,
+        columnFilter: {
+            inWhere: true,
+        },
     },
     {
         align: 'left',
@@ -60,7 +62,6 @@ const columns = computed(() => [
         align: 'left',
         name: 'centerFk',
         label: t('worker.formation.tableVisibleColumns.center'),
-        field: 'centerFk',
         create: true,
         component: 'select',
         attrs: {
@@ -68,7 +69,9 @@ const columns = computed(() => [
             fields: ['id', 'name'],
         },
         disable: false,
-        inWhere: true,
+        columnFilter: {
+            inWhere: true,
+        },
     },
     {
         align: 'left',
@@ -90,20 +93,13 @@ const columns = computed(() => [
         name: 'remark',
         label: t('worker.formation.tableVisibleColumns.remark'),
         create: true,
-        chip: {
-            color: null,
-            condition: (value) => value,
-        },
+        component: 'checkbox',
     },
     {
         align: 'left',
         name: 'hasDiploma',
         label: t('worker.formation.tableVisibleColumns.hasDiploma'),
         create: true,
-        chip: {
-            color: null,
-            condition: (value) => value,
-        },
     },
 ]);
 </script>
@@ -113,7 +109,7 @@ const columns = computed(() => [
         data-key="WorkerFormation"
         :url="`Workers/${entityId}/trainingCourse`"
         :url-create="`Workers/${entityId}/trainingCourse`"
-        :user-filter="courseFilter"
+        :filter="courseFilter"
         :create="{
             urlCreate: 'trainingCourses',
             title: 'Create trainingCourse',

From bbf847e1a0650ab67e59f93ddd79050e12f4c739 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Mon, 10 Jun 2024 09:19:42 +0200
Subject: [PATCH 048/167] feat(url): sepate filters

---
 src/components/VnTable/VnFilter.vue           |   7 +-
 src/components/VnTable/VnTable.vue            |  44 +++++-
 src/components/common/VnCard.vue              |  11 +-
 src/components/common/VnSelect.vue            |   1 +
 src/components/ui/VnFilterPanel.vue           | 126 ++++++++----------
 src/components/ui/VnPaginate.vue              |   8 +-
 src/components/ui/VnSearchbar.vue             |  27 ++--
 src/composables/useArrayData.js               |  68 ++++++----
 src/composables/useRedirect.js                |  25 ----
 src/stores/useArrayDataStore.js               |   2 +
 .../__tests__/composables/useRedirect.spec.js |  52 --------
 11 files changed, 165 insertions(+), 206 deletions(-)
 delete mode 100644 src/composables/useRedirect.js
 delete mode 100644 test/vitest/__tests__/composables/useRedirect.spec.js

diff --git a/src/components/VnTable/VnFilter.vue b/src/components/VnTable/VnFilter.vue
index d572b8be0..1d4ec6c1a 100644
--- a/src/components/VnTable/VnFilter.vue
+++ b/src/components/VnTable/VnFilter.vue
@@ -22,9 +22,13 @@ const $props = defineProps({
         type: String,
         required: true,
     },
+    searchUrl: {
+        type: String,
+        default: 'params',
+    },
 });
 const model = defineModel();
-const arrayData = useArrayData($props.dataKey);
+const arrayData = useArrayData($props.dataKey, { searchUrl: $props.searchUrl });
 const columnFilter = computed(() => $props.column?.columnFilter);
 
 const updateEvent = { 'update:modelValue': addFilter };
@@ -99,6 +103,7 @@ const components = {
 };
 
 async function addFilter(value) {
+    value ||= undefined;
     if (value && typeof value === 'object') value = model.value;
     value = value === '' ? undefined : value;
     let field = columnFilter.value?.name ?? $props.column.name;
diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index 93bcfdddb..35fb7a395 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -1,7 +1,7 @@
 <script setup>
-import { ref, onMounted, computed, watch } from 'vue';
+import { ref, onMounted, computed, watch, useAttrs } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
 
 import { useStateStore } from 'stores/useStateStore';
@@ -47,15 +47,22 @@ const $props = defineProps({
         type: String,
         default: 'flex-one',
     },
+    searchUrl: {
+        type: String,
+        default: 'table',
+    },
 });
+const attrs = useAttrs();
 const { t } = useI18n();
 const stateStore = useStateStore();
+const route = useRoute();
 const router = useRouter();
 const quasar = useQuasar();
 
 const mode = ref('card');
 const selected = ref([]);
-const params = ref({});
+const routeQuery = JSON.parse(route?.query[$props.searchUrl] ?? '{}');
+const params = ref({ ...routeQuery, ...routeQuery.filter?.where });
 const VnPaginateRef = ref({});
 const showForm = ref(false);
 const splittedColumns = ref({ columns: [] });
@@ -76,6 +83,7 @@ const tableModes = [
 onMounted(() => {
     mode.value = quasar.platform.is.mobile ? 'card' : $props.defaultMode;
     stateStore.rightDrawer = true;
+    setUserParams(route.query[$props.searchUrl]);
 });
 
 watch(
@@ -84,6 +92,27 @@ watch(
     { immediate: true }
 );
 
+// try without
+watch(
+    () => route.params.id,
+    () => reload(attrs)
+);
+
+watch(
+    () => route.query[$props.searchUrl],
+    (val) => setUserParams(val)
+);
+
+function setUserParams(watchedParams) {
+    if (!watchedParams) return;
+
+    if (typeof watchedParams == 'string') watchedParams = JSON.parse(watchedParams);
+    const where = JSON.parse(watchedParams?.filter)?.where;
+    watchedParams = { ...watchedParams, ...where };
+    delete watchedParams.filter;
+    params.value = { ...params.value, ...watchedParams };
+}
+
 function splitColumns(columns) {
     splittedColumns.value = {
         columns: [],
@@ -130,12 +159,12 @@ function stopEventPropagation(event) {
     event.stopPropagation();
 }
 
-function reload() {
-    VnPaginateRef.value.fetch();
+function reload(params) {
+    VnPaginateRef.value.fetch(params);
 }
 
 function columnName(col) {
-    const column = Object.assign({}, col, col.columnFilter);
+    const column = { ...col, ...col.columnFilter };
     let name = column.name;
     if (column.alias) name = column.alias + '.' + name;
     return name;
@@ -160,6 +189,7 @@ defineExpose({
                 :search-button="true"
                 v-model="params"
                 :disable-submit-event="true"
+                :search-url="searchUrl"
             >
                 <template #body>
                     <VnTableFilter
@@ -183,6 +213,7 @@ defineExpose({
         class="q-px-md"
         :limit="20"
         ref="VnPaginateRef"
+        :search-url="searchUrl"
         :disable-infinite-scroll="mode == 'table'"
     >
         <template #body="{ rows }">
@@ -237,6 +268,7 @@ defineExpose({
                             :show-title="true"
                             :data-key="$attrs['data-key']"
                             v-model="params[columnName(col)]"
+                            :search-url="searchUrl"
                         />
                     </QTh>
                 </template>
diff --git a/src/components/common/VnCard.vue b/src/components/common/VnCard.vue
index 58cb12708..258ed64e4 100644
--- a/src/components/common/VnCard.vue
+++ b/src/components/common/VnCard.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { onBeforeMount, computed, watchEffect } from 'vue';
-import { useRoute, onBeforeRouteUpdate } from 'vue-router';
+import { useRoute } from 'vue-router';
 import { useArrayData } from 'src/composables/useArrayData';
 import { useStateStore } from 'stores/useStateStore';
 import useCardSize from 'src/composables/useCardSize';
@@ -39,15 +39,6 @@ onBeforeMount(async () => {
     await arrayData.fetch({ append: false });
 });
 
-if (props.baseUrl) {
-    onBeforeRouteUpdate(async (to, from) => {
-        if (to.params.id !== from.params.id) {
-            arrayData.store.url = `${props.baseUrl}/${route.params.id}`;
-            await arrayData.fetch({ append: false });
-        }
-    });
-}
-
 watchEffect(() => {
     if (Array.isArray(arrayData.store.data))
         arrayData.store.data = arrayData.store.data[0];
diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index 9e3e50eed..04ccca889 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -180,6 +180,7 @@ watch(modelValue, (newValue) => {
     >
         <template v-if="isClearable" #append>
             <QIcon
+                v-show="value"
                 name="close"
                 @click.stop="value = null"
                 class="cursor-pointer"
diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue
index e28085331..ee6f1028b 100644
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@@ -4,12 +4,11 @@ import { useI18n } from 'vue-i18n';
 import { useArrayData } from 'composables/useArrayData';
 import { useRoute } from 'vue-router';
 import toDate from 'filters/toDate';
-import useRedirect from 'src/composables/useRedirect';
 import VnFilterPanelChip from 'components/ui/VnFilterPanelChip.vue';
 
 const { t } = useI18n();
-const params = defineModel();
-const props = defineProps({
+const params = defineModel({ default: {}, required: true, type: Object });
+const $props = defineProps({
     dataKey: {
         type: String,
         required: true,
@@ -46,82 +45,72 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    searchUrl: {
+        type: String,
+        default: 'params',
+    },
 });
 
 const emit = defineEmits(['refresh', 'clear', 'search', 'init', 'remove']);
 
-const arrayData = useArrayData(props.dataKey, {
-    exprBuilder: props.exprBuilder,
+const arrayData = useArrayData($props.dataKey, {
+    exprBuilder: $props.exprBuilder,
+    searchUrl: $props.searchUrl,
+    navigate: {},
 });
 const route = useRoute();
 const store = arrayData.store;
-const userParams = ref({});
-const { navigate } = useRedirect();
 
 onMounted(() => {
-    if (params.value) userParams.value = JSON.parse(JSON.stringify(params.value));
-    if (Object.keys(store.userParams).length > 0) {
-        userParams.value = JSON.parse(JSON.stringify(store.userParams));
-        params.value = {
-            ...params.value,
-            ...userParams.value,
-            ...userParams.value?.filter?.where,
-        };
-    }
-    emit('init', { params: userParams.value });
+    emit('init', { params: params.value });
 });
 
-function setUserParams(params) {
-    if (!params) {
-        userParams.value = {};
-    } else {
-        userParams.value = typeof params == 'string' ? JSON.parse(params) : params;
-    }
+function setUserParams(watchedParams) {
+    if (!watchedParams) return;
+
+    if (typeof watchedParams == 'string') watchedParams = JSON.parse(watchedParams);
+    watchedParams = { ...watchedParams, ...watchedParams.filter?.where };
+    delete watchedParams.filter;
+    params.value = { ...params.value, ...watchedParams };
 }
 
 watch(
-    () => route.query.params,
-    (val) => {
-        setUserParams(val);
-    }
+    () => route.query[$props.searchUrl],
+    (val) => setUserParams(val)
 );
 
 watch(
     () => arrayData.store.userParams,
-    (val) => {
-        setUserParams(val);
-    }
+    (val) => setUserParams(val)
 );
 
 const isLoading = ref(false);
 async function search(evt) {
-    if (evt && props.disableSubmitEvent) return;
+    if (evt && $props.disableSubmitEvent) return;
 
     store.filter.where = {};
     isLoading.value = true;
-    const filter = { ...userParams.value, ...params.value };
+    const filter = { ...params.value };
     store.userParamsChanged = true;
     store.filter.skip = 0;
     store.skip = 0;
-    const { params: newParams } = await arrayData.addFilter({ params: filter });
-    userParams.value = newParams;
+    const { params: newParams } = await arrayData.addFilter({ params: params.value });
+    params.value = newParams;
 
-    if (!props.showAll && !Object.values(filter).length) store.data = [];
+    if (!$props.showAll && !Object.values(filter).length) store.data = [];
 
     isLoading.value = false;
     emit('search');
-    navigate(store.data, {});
 }
 
 async function reload() {
     isLoading.value = true;
-    const params = Object.values(userParams.value).filter((param) => param);
+    const params = Object.values(params.value).filter((param) => param);
 
     await arrayData.fetch({ append: false });
-    if (!props.showAll && !params.length) store.data = [];
+    if (!$props.showAll && !params.length) store.data = [];
     isLoading.value = false;
     emit('refresh');
-    navigate(store.data, {});
 }
 
 async function clearFilters() {
@@ -130,19 +119,19 @@ async function clearFilters() {
     store.filter.skip = 0;
     store.skip = 0;
     // Filtrar los params no removibles
-    const removableFilters = Object.keys(userParams.value).filter((param) =>
-        props.unremovableParams.includes(param)
+    const removableFilters = Object.keys(params.value).filter((param) =>
+        $props.unremovableParams.includes(param)
     );
     const newParams = {};
     // Conservar solo los params que no son removibles
     for (const key of removableFilters) {
-        newParams[key] = userParams.value[key];
+        newParams[key] = params.value[key];
     }
     params.value = {};
-    userParams.value = { ...newParams }; // Actualizar los params con los removibles
-    await arrayData.applyFilter({ params: userParams.value });
+    params.value = { ...newParams }; // Actualizar los params con los removibles
+    await arrayData.applyFilter({ params: params.value });
 
-    if (!props.showAll) {
+    if (!$props.showAll) {
         store.data = [];
     }
 
@@ -152,34 +141,26 @@ async function clearFilters() {
 
 const tagsList = computed(() => {
     const tagList = [];
-    const params = {
-        ...userParams.value,
-    };
-    const where = params?.filter?.where;
-    if (where) {
-        Object.assign(params, where);
-    }
-    delete params.filter;
-    for (const key of Object.keys(params)) {
-        const value = params[key];
-        if (!value || (props.hiddenTags || []).includes(key)) continue;
-        tagList.push({ key, value });
+    for (const key of Object.keys(params.value)) {
+        const value = params.value[key];
+        if (!value || ($props.hiddenTags || []).includes(key)) continue;
+        tagList.push({ label: key, value });
     }
     return tagList;
 });
 
-const tags = computed(() =>
-    tagsList.value.filter((tag) => !(props.customTags || []).includes(tag.key))
-);
+const tags = computed(() => {
+    return tagsList.value.filter((tag) => !($props.customTags || []).includes(tag.key));
+});
 const customTags = computed(() =>
-    tagsList.value.filter((tag) => (props.customTags || []).includes(tag.key))
+    tagsList.value.filter((tag) => ($props.customTags || []).includes(tag.key))
 );
 
 async function remove(key) {
-    delete userParams.value[key];
-    delete userParams.value.filter.where[key];
+    delete params.value[key];
+    delete params.value.filter?.where[key];
     params.value[key] = undefined;
-    await arrayData.applyFilter({ params: userParams.value });
+    await arrayData.applyFilter({ params: params.value });
     emit('remove', key);
 }
 
@@ -242,15 +223,16 @@ function formatValue(value) {
                     {{ t(`No filters applied`) }}
                 </div>
                 <div>
+                    {{ tags }}
                     <VnFilterPanelChip
                         v-for="chip of tags"
-                        :key="chip.key"
-                        :removable="!unremovableParams.includes(chip.key)"
-                        @remove="remove(chip.key)"
+                        :key="chip.label"
+                        :removable="!unremovableParams.includes(chip.label)"
+                        @remove="remove(chip.label)"
                     >
                         <slot name="tags" :tag="chip" :format-fn="formatValue">
                             <div class="q-gutter-x-xs">
-                                <strong>{{ chip.key }}:</strong>
+                                <strong>{{ chip.label }}:</strong>
                                 <span>"{{ chip.value }}"</span>
                             </div>
                         </slot>
@@ -258,7 +240,7 @@ function formatValue(value) {
                     <slot
                         v-if="$slots.customTags"
                         name="customTags"
-                        :params="userParams"
+                        :params="params"
                         :tags="customTags"
                         :format-fn="formatValue"
                         :search-fn="search"
@@ -268,9 +250,9 @@ function formatValue(value) {
             <QSeparator />
         </QList>
         <QList dense class="list q-gutter-y-sm q-mt-sm">
-            <slot name="body" :params="userParams" :search-fn="search"></slot>
+            <slot name="body" :params="params" :search-fn="search"></slot>
         </QList>
-        <template v-if="props.searchButton">
+        <template v-if="$props.searchButton">
             <QItem>
                 <QItemSection class="q-py-sm">
                     <QBtn
@@ -282,7 +264,6 @@ function formatValue(value) {
                         rounded
                         :type="disableSubmitEvent ? 'button' : 'submit'"
                         unelevated
-                        @click="search()"
                     />
                 </QItemSection>
             </QItem>
@@ -295,7 +276,6 @@ function formatValue(value) {
         color="primary"
     />
 </template>
-
 <style scoped lang="scss">
 .list {
     width: 256px;
diff --git a/src/components/ui/VnPaginate.vue b/src/components/ui/VnPaginate.vue
index 58dd0d313..c3b556e23 100644
--- a/src/components/ui/VnPaginate.vue
+++ b/src/components/ui/VnPaginate.vue
@@ -58,6 +58,10 @@ const props = defineProps({
         type: Function,
         default: null,
     },
+    searchUrl: {
+        type: String,
+        default: null,
+    },
     disableInfiniteScroll: {
         type: Boolean,
         default: false,
@@ -81,6 +85,7 @@ const arrayData = useArrayData(props.dataKey, {
     userParams: props.userParams,
     exprBuilder: props.exprBuilder,
     keepOpts: props.keepOpts,
+    searchUrl: props.searchUrl,
 });
 const store = arrayData.store;
 
@@ -99,7 +104,8 @@ const addFilter = async (filter, params) => {
     await arrayData.addFilter({ filter, params });
 };
 
-async function fetch() {
+async function fetch(params) {
+    useArrayData(props.dataKey, params);
     store.filter.skip = 0;
     store.skip = 0;
     await arrayData.fetch({ append: false });
diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index 38dcf97d1..2791907b8 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -3,7 +3,6 @@ import { onMounted, ref } from 'vue';
 import { useQuasar } from 'quasar';
 import { useArrayData } from 'composables/useArrayData';
 import VnInput from 'src/components/common/VnInput.vue';
-import useRedirect from 'src/composables/useRedirect';
 import { useI18n } from 'vue-i18n';
 
 const quasar = useQuasar();
@@ -16,17 +15,14 @@ const props = defineProps({
     },
     label: {
         type: String,
-        required: false,
         default: 'Search',
     },
     info: {
         type: String,
-        required: false,
         default: '',
     },
     redirect: {
         type: Boolean,
-        required: false,
         default: true,
     },
     url: {
@@ -67,10 +63,20 @@ const props = defineProps({
     },
 });
 
-const arrayData = useArrayData(props.dataKey, { ...props });
-const { store } = arrayData;
 const searchText = ref('');
-const { navigate } = useRedirect();
+let arrayDataProps = { ...props };
+if (props.redirect)
+    arrayDataProps = {
+        ...props,
+        ...{
+            navigate: {
+                customRouteRedirectName: props.customRouteRedirectName,
+                searchText: searchText.value,
+            },
+        },
+    };
+let arrayData = useArrayData(props.dataKey, arrayDataProps);
+let store = arrayData.store;
 
 onMounted(() => {
     const params = store.userParams;
@@ -90,13 +96,6 @@ async function search() {
             search: searchText.value,
         },
     });
-
-    if (!props.redirect) return;
-
-    navigate(store.data, {
-        customRouteRedirectName: props.customRouteRedirectName,
-        searchText: searchText.value,
-    });
 }
 </script>
 
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index 81a2bf01a..aabbfbc5b 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -23,8 +23,13 @@ export function useArrayData(key, userOptions) {
         store.skip = 0;
 
         const query = route.query;
-        if (query.params) {
-            store.userParams = JSON.parse(query.params);
+        const searchUrl = store.searchUrl;
+        if (query[searchUrl]) {
+            const params = JSON.parse(query[searchUrl]);
+            const filter = params?.filter;
+            delete params.filter;
+            store.userParams = { ...params, ...store.userParams };
+            store.userFilter = { ...JSON.parse(filter), ...store.userFilter };
         }
     });
 
@@ -41,13 +46,15 @@ export function useArrayData(key, userOptions) {
             'userParams',
             'userFilter',
             'exprBuilder',
+            'searchUrl',
+            'navigate',
         ];
         if (typeof userOptions === 'object') {
             for (const option in userOptions) {
                 const isEmpty = userOptions[option] == null || userOptions[option] === '';
                 if (isEmpty || !allowedOptions.includes(option)) continue;
 
-                if (Object.prototype.hasOwnProperty.call(store, option)) {
+                if (Object.hasOwn(store, option)) {
                     const defaultOpts = userOptions[option];
                     store[option] = userOptions.keepOpts?.includes(option)
                         ? Object.assign(defaultOpts, store[option])
@@ -88,8 +95,8 @@ export function useArrayData(key, userOptions) {
 
         Object.assign(params, userParams);
 
-        store.isLoading = true;
         store.currentFilter = params;
+        store.isLoading = true;
         const response = await axios.get(store.url, {
             signal: canceller.signal,
             params,
@@ -119,6 +126,10 @@ export function useArrayData(key, userOptions) {
         }
     }
 
+    function deleteOption(option) {
+        delete store[option];
+    }
+
     function cancelRequest() {
         if (canceller) {
             canceller.abort();
@@ -129,7 +140,7 @@ export function useArrayData(key, userOptions) {
     async function applyFilter({ filter, params }) {
         if (filter) store.userFilter = filter;
         store.filter = {};
-        if (params) store.userParams = Object.assign({}, params);
+        if (params) store.userParams = { ...params };
 
         const response = await fetch({ append: false });
         return response;
@@ -138,7 +149,7 @@ export function useArrayData(key, userOptions) {
     async function addFilter({ filter, params }) {
         if (filter) store.userFilter = Object.assign(store.userFilter, filter);
 
-        let userParams = Object.assign({}, store.userParams, params);
+        let userParams = { ...store.userParams, ...params };
         userParams = sanitizerParams(userParams, store?.exprBuilder);
 
         store.userParams = userParams;
@@ -163,9 +174,7 @@ export function useArrayData(key, userOptions) {
                 delete store.userParams[param];
                 delete params[param];
                 if (store.filter?.where) {
-                    const key = Object.keys(
-                        exprBuilder && exprBuilder(param) ? exprBuilder(param) : param
-                    );
+                    const key = Object.keys(exprBuilder ? exprBuilder(param) : param);
                     if (key[0]) delete store.filter.where[key[0]];
                     if (Object.keys(store.filter.where).length === 0) {
                         delete store.filter.where;
@@ -190,22 +199,32 @@ export function useArrayData(key, userOptions) {
     }
 
     function updateStateParams() {
-        const query = {};
-        if (store.order) query.order = store.order;
-        if (store.limit) query.limit = store.limit;
-        if (store.skip) query.skip = store.skip;
-        if (store.userParams && Object.keys(store.userParams).length !== 0)
-            query.params = store.userParams;
-        if (store.userFilter && Object.keys(store.userFilter).length !== 0) {
-            if (!query.params) query.params = {};
-            query.params.filter = store.userFilter;
-        }
-        if (query.params) query.params = JSON.stringify(query.params);
+        const newUrl = { path: route.path, query: { ...(route.query ?? {}) } };
+        newUrl.query[store.searchUrl] = JSON.stringify(store.currentFilter);
 
-        router.replace({
-            path: route.path,
-            query,
-        });
+        if (store.navigate) {
+            const { customRouteRedirectName, searchText } = store.navigate;
+            if (customRouteRedirectName)
+                return router.push({
+                    name: customRouteRedirectName,
+                    params: { id: searchText },
+                });
+            const { matched: matches } = router.currentRoute.value;
+            const { path } = matches.at(-1);
+
+            const to =
+                store?.data?.length === 1
+                    ? path.replace(/\/(list|:id)|-list/, `/${store.data[0].id}`)
+                    : path.replace(/:id.*/, '');
+
+            if (route.path != to) {
+                store.userParams = {};
+                store.userFilter = {};
+                return router.push({ path: to });
+            }
+        }
+
+        router.replace(newUrl);
     }
 
     const totalRows = computed(() => (store.data && store.data.length) || 0);
@@ -223,5 +242,6 @@ export function useArrayData(key, userOptions) {
         totalRows,
         updateStateParams,
         isLoading,
+        deleteOption,
     };
 }
diff --git a/src/composables/useRedirect.js b/src/composables/useRedirect.js
deleted file mode 100644
index c1470718b..000000000
--- a/src/composables/useRedirect.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { useRouter } from 'vue-router';
-
-export default function useRedirect() {
-    const router = useRouter();
-
-    const navigate = (data, { customRouteRedirectName, searchText }) => {
-        if (customRouteRedirectName)
-            return router.push({
-                name: customRouteRedirectName,
-                params: { id: searchText },
-            });
-
-        const { matched: matches } = router.currentRoute.value;
-        const { path } = matches.at(-1);
-
-        const to =
-            data.length === 1
-                ? path.replace(/\/(list|:id)|-list/, `/${data[0].id}`)
-                : path.replace(/:id.*/, '');
-
-        router.push({ path: to });
-    };
-
-    return { navigate };
-}
diff --git a/src/stores/useArrayDataStore.js b/src/stores/useArrayDataStore.js
index 115c161dd..ebe32f8d0 100644
--- a/src/stores/useArrayDataStore.js
+++ b/src/stores/useArrayDataStore.js
@@ -21,6 +21,8 @@ export const useArrayDataStore = defineStore('arrayDataStore', () => {
             isLoading: false,
             userParamsChanged: false,
             exprBuilder: null,
+            searchUrl: 'params',
+            navigate: null,
         };
     }
 
diff --git a/test/vitest/__tests__/composables/useRedirect.spec.js b/test/vitest/__tests__/composables/useRedirect.spec.js
deleted file mode 100644
index ce56189b9..000000000
--- a/test/vitest/__tests__/composables/useRedirect.spec.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import { vi, describe, expect, it, beforeEach, beforeAll } from 'vitest';
-import useRedirect from 'src/composables/useRedirect';
-import { useRouter } from 'vue-router';
-
-vi.mock('vue-router');
-
-describe('useRedirect', () => {
-    useRouter.mockReturnValue({
-        push: vi.fn(),
-        currentRoute: {
-            value: {
-                matched: [
-                    { path: '/' },
-                    { path: '/customer' },
-                    { path: '/customer/:id' },
-                    { path: '/customer/:id/basic-data' },
-                ],
-            },
-        },
-    });
-    const data = [];
-    let navigate;
-    let spy;
-
-    beforeAll(() => {
-        const { navigate: navigateFn } = useRedirect();
-        navigate = navigateFn;
-        spy = useRouter().push;
-    });
-
-    beforeEach(() => {
-        data.length = 0;
-        spy.mockReset();
-    });
-
-    it('should redirect to list page if there are several results', async () => {
-        data.push({ id: 1, name: 'employee' }, { id: 2, name: 'boss' });
-        navigate(data, {});
-        expect(spy).toHaveBeenCalledWith({ path: '/customer/' });
-    });
-
-    it('should redirect to list page if there is no results', async () => {
-        navigate(data, {});
-        expect(spy).toHaveBeenCalledWith({ path: '/customer/' });
-    });
-
-    it('should redirect to basic-data page if there is only one result', async () => {
-        data.push({ id: 1, name: 'employee' });
-        navigate(data, {});
-        expect(spy).toHaveBeenCalledWith({ path: '/customer/1/basic-data' });
-    });
-});

From 128904970bb793d698f879f4bacb3a0d71659def Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Mon, 10 Jun 2024 11:53:47 +0200
Subject: [PATCH 049/167] fix(url): filter

---
 src/components/ui/VnFilterPanel.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue
index ee6f1028b..23e932c34 100644
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@@ -35,7 +35,7 @@ const $props = defineProps({
     },
     hiddenTags: {
         type: Array,
-        default: () => [],
+        default: () => ['filter'],
     },
     customTags: {
         type: Array,
@@ -158,7 +158,7 @@ const customTags = computed(() =>
 
 async function remove(key) {
     delete params.value[key];
-    delete params.value.filter?.where[key];
+    delete params.value.filter?.where?.[key];
     params.value[key] = undefined;
     await arrayData.applyFilter({ params: params.value });
     emit('remove', key);
@@ -223,7 +223,6 @@ function formatValue(value) {
                     {{ t(`No filters applied`) }}
                 </div>
                 <div>
-                    {{ tags }}
                     <VnFilterPanelChip
                         v-for="chip of tags"
                         :key="chip.label"

From ed07b4d620cae13d9a4f441e199acbb41d80eda2 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Mon, 10 Jun 2024 13:14:24 +0200
Subject: [PATCH 050/167] fix(url): redirect

---
 src/components/common/VnCard.vue | 14 ++------------
 src/composables/useArrayData.js  | 18 ++++++++++++++----
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/components/common/VnCard.vue b/src/components/common/VnCard.vue
index 258ed64e4..a49e01b76 100644
--- a/src/components/common/VnCard.vue
+++ b/src/components/common/VnCard.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { onBeforeMount, computed, watchEffect } from 'vue';
+import { computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useArrayData } from 'src/composables/useArrayData';
 import { useStateStore } from 'stores/useStateStore';
@@ -29,20 +29,10 @@ const url = computed(() => {
     return props.customUrl;
 });
 
-const arrayData = useArrayData(props.dataKey, {
+useArrayData(props.dataKey, {
     url: url.value,
     filter: props.filter,
 });
-
-onBeforeMount(async () => {
-    if (!props.baseUrl) arrayData.store.filter.where = { id: route.params.id };
-    await arrayData.fetch({ append: false });
-});
-
-watchEffect(() => {
-    if (Array.isArray(arrayData.store.data))
-        arrayData.store.data = arrayData.store.data[0];
-});
 </script>
 <template>
     <template v-if="stateStore.isHeaderMounted()">
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index aabbfbc5b..88dfb7f22 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -1,4 +1,4 @@
-import { onMounted, ref, computed } from 'vue';
+import { onMounted, ref, computed, onUnmounted } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import axios from 'axios';
 import { useArrayDataStore } from 'stores/useArrayDataStore';
@@ -18,6 +18,10 @@ export function useArrayData(key, userOptions) {
 
     const page = ref(1);
 
+    onUnmounted(() => {
+        destroy();
+    });
+
     onMounted(() => {
         setOptions();
         store.skip = 0;
@@ -30,6 +34,7 @@ export function useArrayData(key, userOptions) {
             delete params.filter;
             store.userParams = { ...params, ...store.userParams };
             store.userFilter = { ...JSON.parse(filter), ...store.userFilter };
+            console.log('store.userParams', store.userParams, store.userFilter);
         }
     });
 
@@ -121,6 +126,7 @@ export function useArrayData(key, userOptions) {
     }
 
     function destroy() {
+        console.log('DESTROY', key);
         if (arrayDataStore.get(key)) {
             arrayDataStore.clear(key);
         }
@@ -217,10 +223,14 @@ export function useArrayData(key, userOptions) {
                     ? path.replace(/\/(list|:id)|-list/, `/${store.data[0].id}`)
                     : path.replace(/:id.*/, '');
 
+            console.log('to: ', to, store.userParams, store.userFilter, route.query);
             if (route.path != to) {
-                store.userParams = {};
-                store.userFilter = {};
-                return router.push({ path: to });
+                destroy();
+                const pushUrl = { path: to };
+                if (to.endsWith('/list') || to.endsWith('/'))
+                    pushUrl.query = newUrl.query;
+                console.log('pushUrl: ', to, pushUrl.query);
+                return router.push(pushUrl);
             }
         }
 

From 4e2358d722e99a3bba1bddbbd1fe2dc36957d506 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 11 Jun 2024 11:58:06 +0200
Subject: [PATCH 051/167] fix: point 3

---
 src/router/modules/department.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/router/modules/department.js b/src/router/modules/department.js
index dfd5e64ba..9aab40534 100644
--- a/src/router/modules/department.js
+++ b/src/router/modules/department.js
@@ -9,7 +9,7 @@ export default {
         moduleName: 'Department',
     },
     component: RouterView,
-    redirect: { name: 'DepartmentCard' },
+    redirect: { name: 'WorkerDepartment' },
     menus: {
         main: [],
         card: ['DepartmentBasicData'],

From fe2412f6d903572cca25727a2421a4f80a6a944a Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 11 Jun 2024 11:58:20 +0200
Subject: [PATCH 052/167] fix: point 1

---
 src/pages/Department/Card/DepartmentDescriptorProxy.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/Department/Card/DepartmentDescriptorProxy.vue b/src/pages/Department/Card/DepartmentDescriptorProxy.vue
index 07a6b6af1..5b556f655 100644
--- a/src/pages/Department/Card/DepartmentDescriptorProxy.vue
+++ b/src/pages/Department/Card/DepartmentDescriptorProxy.vue
@@ -1,6 +1,6 @@
 <script setup>
 import DepartmentDescriptor from './DepartmentDescriptor.vue';
-import DepartmentSummaryDialog from './DepartmentSummaryDialog.vue';
+import DepartmentSummary from './DepartmentSummary.vue';
 
 const $props = defineProps({
     id: {
@@ -15,7 +15,7 @@ const $props = defineProps({
         <DepartmentDescriptor
             v-if="$props.id"
             :id="$props.id"
-            :summary="DepartmentSummaryDialog"
+            :summary="DepartmentSummary"
         />
     </QPopupProxy>
 </template>

From 25f4d1f6548ab92234db28881714411c7c36cd30 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 11 Jun 2024 11:58:27 +0200
Subject: [PATCH 053/167] fix: point 3

---
 src/components/ui/CardSummary.vue               | 6 +++++-
 src/pages/Department/Card/DepartmentSummary.vue | 1 +
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/ui/CardSummary.vue b/src/components/ui/CardSummary.vue
index ae9a43578..62efc6727 100644
--- a/src/components/ui/CardSummary.vue
+++ b/src/components/ui/CardSummary.vue
@@ -22,6 +22,10 @@ const props = defineProps({
         type: String,
         default: '',
     },
+    moduleName: {
+        type: String,
+        default: null,
+    },
 });
 const emit = defineEmits(['onFetch']);
 const route = useRoute();
@@ -83,7 +87,7 @@ function existSummary(routes) {
                             v-if="showRedirectToSummaryIcon"
                             class="header link"
                             :to="{
-                                name: `${route.meta.moduleName}Summary`,
+                                name: `${moduleName ?? route.meta.moduleName}Summary`,
                                 params: { id: entityId || entity.id },
                             }"
                         >
diff --git a/src/pages/Department/Card/DepartmentSummary.vue b/src/pages/Department/Card/DepartmentSummary.vue
index 6377ac779..ecbb39ed0 100644
--- a/src/pages/Department/Card/DepartmentSummary.vue
+++ b/src/pages/Department/Card/DepartmentSummary.vue
@@ -32,6 +32,7 @@ onMounted(async () => {
         :url="`Departments/${entityId}`"
         class="full-width"
         style="max-width: 900px"
+        module-name="Department"
     >
         <template #header="{ entity }">
             <div>{{ entity.name }}</div>

From 14e27f193e0c69e68d00b98c32677afb1be9f901 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Tue, 11 Jun 2024 15:00:03 +0200
Subject: [PATCH 054/167] =?UTF-8?q?feat:=20adapt=20tu=20VnTable=20?=
 =?UTF-8?q?=E2=86=92=20CrudModel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Worker/Card/WorkerFormation.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/Worker/Card/WorkerFormation.vue b/src/pages/Worker/Card/WorkerFormation.vue
index 97d829140..e2486a168 100644
--- a/src/pages/Worker/Card/WorkerFormation.vue
+++ b/src/pages/Worker/Card/WorkerFormation.vue
@@ -109,6 +109,7 @@ const columns = computed(() => [
         data-key="WorkerFormation"
         :url="`Workers/${entityId}/trainingCourse`"
         :url-create="`Workers/${entityId}/trainingCourse`"
+        save-url="TrainingCourses/crud"
         :filter="courseFilter"
         :create="{
             urlCreate: 'trainingCourses',
@@ -123,5 +124,5 @@ const columns = computed(() => [
         default-mode="table"
         auto-load
         :right-search="false"
-    ></VnTable>
+    />
 </template>

From 00da1c2808801bc9d4f4abac9de422386a6fb88d Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Tue, 11 Jun 2024 15:00:43 +0200
Subject: [PATCH 055/167] =?UTF-8?q?feat:=20adapt=20tu=20VnTable=20?=
 =?UTF-8?q?=E2=86=92=20CrudModel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CrudModel.vue       |  8 +++++---
 src/components/VnTable/VnTable.vue | 17 ++++++++++-------
 src/components/ui/VnPaginate.vue   |  7 +++++++
 src/composables/useArrayData.js    |  4 ----
 4 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/src/components/CrudModel.vue b/src/components/CrudModel.vue
index fe15d2db1..078c95b2a 100644
--- a/src/components/CrudModel.vue
+++ b/src/components/CrudModel.vue
@@ -89,6 +89,7 @@ defineExpose({
     saveChanges,
     getChanges,
     formData,
+    vnPaginateRef,
 });
 
 async function fetch(data) {
@@ -271,8 +272,9 @@ function isEmpty(obj) {
     if (obj.length > 0) return false;
 }
 
-async function reload() {
-    vnPaginateRef.value.fetch();
+async function reload(params) {
+    const data = await vnPaginateRef.value.fetch(params);
+    fetch(data);
 }
 
 watch(formUrl, async () => {
@@ -284,10 +286,10 @@ watch(formUrl, async () => {
     <VnPaginate
         :url="url"
         :limit="limit"
-        v-bind="$attrs"
         @on-fetch="fetch"
         :skeleton="false"
         ref="vnPaginateRef"
+        v-bind="$attrs"
     >
         <template #body v-if="formData">
             <slot
diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index 35fb7a395..897b75fc4 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -6,7 +6,7 @@ import { useQuasar } from 'quasar';
 
 import { useStateStore } from 'stores/useStateStore';
 import FormModelPopup from 'components/FormModelPopup.vue';
-import VnPaginate from 'components/ui/VnPaginate.vue';
+import CrudModel from 'src/components/CrudModel.vue';
 import VnFilterPanel from 'components/ui/VnFilterPanel.vue';
 import VnLv from 'components/ui/VnLv.vue';
 
@@ -63,7 +63,7 @@ const mode = ref('card');
 const selected = ref([]);
 const routeQuery = JSON.parse(route?.query[$props.searchUrl] ?? '{}');
 const params = ref({ ...routeQuery, ...routeQuery.filter?.where });
-const VnPaginateRef = ref({});
+const CrudModelRef = ref({});
 const showForm = ref(false);
 const splittedColumns = ref({ columns: [] });
 const tableModes = [
@@ -160,7 +160,7 @@ function stopEventPropagation(event) {
 }
 
 function reload(params) {
-    VnPaginateRef.value.fetch(params);
+    CrudModelRef.value.reload(params);
 }
 
 function columnName(col) {
@@ -198,6 +198,7 @@ defineExpose({
                         v-for="col of splittedColumns.columns"
                         :key="col.id"
                         v-model="params[columnName(col)]"
+                        :search-url="searchUrl"
                     />
                 </template>
                 <slot
@@ -208,11 +209,11 @@ defineExpose({
             </VnFilterPanel>
         </QScrollArea>
     </QDrawer>
-    <VnPaginate
+    <CrudModel
         v-bind="$attrs"
         class="q-px-md"
         :limit="20"
-        ref="VnPaginateRef"
+        ref="CrudModelRef"
         :search-url="searchUrl"
         :disable-infinite-scroll="mode == 'table'"
     >
@@ -231,7 +232,9 @@ defineExpose({
                 :style="mode == 'table' && 'max-height: 92vh'"
                 virtual-scroll
                 @virtual-scroll="
-                    (event) => event.index > rows.length - 2 && VnPaginateRef.paginate()
+                    (event) =>
+                        event.index > rows.length - 2 &&
+                        CrudModelRef.vnPaginateRef.paginate()
                 "
                 @row-click="(_, row) => rowClickFunction(row)"
             >
@@ -421,7 +424,7 @@ defineExpose({
                 </template>
             </QTable>
         </template>
-    </VnPaginate>
+    </CrudModel>
     <QPageSticky v-if="create" :offset="[20, 20]" style="z-index: 2">
         <QBtn @click="showForm = !showForm" color="primary" fab icon="add" />
         <QTooltip>
diff --git a/src/components/ui/VnPaginate.vue b/src/components/ui/VnPaginate.vue
index c3b556e23..a188a5059 100644
--- a/src/components/ui/VnPaginate.vue
+++ b/src/components/ui/VnPaginate.vue
@@ -100,6 +100,11 @@ watch(
     }
 );
 
+watch(
+    () => store.data,
+    (data) => emit('onFetch', data)
+);
+
 const addFilter = async (filter, params) => {
     await arrayData.addFilter({ filter, params });
 };
@@ -113,6 +118,7 @@ async function fetch(params) {
         isLoading.value = false;
     }
     emit('onFetch', store.data);
+    return store.data;
 }
 
 async function paginate() {
@@ -144,6 +150,7 @@ function endPagination() {
     emit('onPaginate');
 }
 async function onLoad(index, done) {
+    console.log('onLoad?');
     if (!store.data) return done();
 
     if (store.data.length === 0 || !props.url) return done(false);
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index c20260c59..6db4251e1 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -34,7 +34,6 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
             delete params.filter;
             store.userParams = { ...params, ...store.userParams };
             store.userFilter = { ...JSON.parse(filter), ...store.userFilter };
-            console.log('store.userParams', store.userParams, store.userFilter);
         }
     });
 
@@ -126,7 +125,6 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
     }
 
     function destroy() {
-        console.log('DESTROY', key);
         if (arrayDataStore.get(key)) {
             arrayDataStore.clear(key);
         }
@@ -223,13 +221,11 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
                     ? path.replace(/\/(list|:id)|-list/, `/${store.data[0].id}`)
                     : path.replace(/:id.*/, '');
 
-            console.log('to: ', to, store.userParams, store.userFilter, route.query);
             if (route.path != to) {
                 destroy();
                 const pushUrl = { path: to };
                 if (to.endsWith('/list') || to.endsWith('/'))
                     pushUrl.query = newUrl.query;
-                console.log('pushUrl: ', to, pushUrl.query);
                 return router.push(pushUrl);
             }
         }

From a7b805a4abab6d1040843906e8c89db0a35d5164 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Tue, 11 Jun 2024 16:24:07 +0200
Subject: [PATCH 056/167] stash departmentFilter

---
 .../Defaulter/CustomerDefaulterFilter.vue     | 26 +++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/src/pages/Customer/Defaulter/CustomerDefaulterFilter.vue b/src/pages/Customer/Defaulter/CustomerDefaulterFilter.vue
index 9220bd7c0..9c7f6f470 100644
--- a/src/pages/Customer/Defaulter/CustomerDefaulterFilter.vue
+++ b/src/pages/Customer/Defaulter/CustomerDefaulterFilter.vue
@@ -20,6 +20,7 @@ const clients = ref();
 const salespersons = ref();
 const countries = ref();
 const authors = ref();
+const departments = ref();
 </script>
 
 <template>
@@ -36,6 +37,7 @@ const authors = ref();
         auto-load
         url="Workers/activeWithInheritedRole"
     />
+    <FetchData @on-fetch="(data) => (departments = data)" auto-load url="Departments" />
 
     <VnFilterPanel :data-key="props.dataKey" :search-button="true">
         <template #tags="{ tag, formatFn }">
@@ -94,6 +96,30 @@ const authors = ref();
                 </QItemSection>
             </QItem>
 
+            <QItem class="q-mb-sm">
+                <QItemSection v-if="departments">
+                    <VnSelect
+                        :input-debounce="0"
+                        :label="t('Departments')"
+                        :options="departments"
+                        dense
+                        emit-value
+                        hide-selected
+                        map-options
+                        option-label="name"
+                        option-value="id"
+                        outlined
+                        rounded
+                        use-input
+                        v-model="params.departmentFk"
+                        @update:model-value="searchFn()"
+                    />
+                </QItemSection>
+                <QItemSection v-else>
+                    <QSkeleton class="full-width" type="QInput" />
+                </QItemSection>
+            </QItem>
+
             <QItem class="q-mb-sm">
                 <QItemSection v-if="countries">
                     <VnSelect

From 89f6873b03778d377d1d205e09e65a1ee48de83f Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 11 Jun 2024 22:40:07 -0300
Subject: [PATCH 057/167] WIP

---
 src/pages/Ticket/Card/TicketEditMana.vue | 150 ++++++++
 src/pages/Ticket/Card/TicketSale.vue     | 456 ++++++++++++++++++++++-
 src/pages/Ticket/locale/en.yml           |  10 +
 src/pages/Ticket/locale/es.yml           |  10 +
 4 files changed, 625 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/Ticket/Card/TicketEditMana.vue
 create mode 100644 src/pages/Ticket/locale/en.yml

diff --git a/src/pages/Ticket/Card/TicketEditMana.vue b/src/pages/Ticket/Card/TicketEditMana.vue
new file mode 100644
index 000000000..d563e49f7
--- /dev/null
+++ b/src/pages/Ticket/Card/TicketEditMana.vue
@@ -0,0 +1,150 @@
+<script setup>
+import { ref, onMounted, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { toCurrency } from 'src/filters';
+import VnInput from 'src/components/common/VnInput.vue';
+
+import axios from 'axios';
+import useNotify from 'src/composables/useNotify.js';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+    type: {
+        type: String,
+        default: 'price', // 'discount' or 'price
+    },
+});
+
+const { t } = useI18n();
+const { notify } = useNotify();
+
+const edit = ref({});
+const usesMana = ref(null);
+
+const inputLabel = computed(() => ($props.type === 'price' ? t('Price') : t('Discount')));
+
+const getUsesMana = async () => {
+    const { data } = await axios.get('Sales/usesMana');
+    usesMana.value = data;
+};
+
+const getMana = async () => {
+    const { data } = await axios.get(`Tickets/${$props.id}/getSalesPersonMana`);
+    edit.value.mana = data;
+    await getUsesMana();
+    console.log('edit', edit.value);
+    // this.$.$applyAsync(() => {
+    //     this.$.editDiscount.relocate();
+    //     this.$.editPricePopover.relocate();
+    // });
+};
+
+const updatePrice = async () => {
+    try {
+        const sale = edit.value.sale;
+        const newPrice = edit.value.price;
+        if (newPrice != null && newPrice != sale.price) {
+            await axios.post(`Sales/${sale.id}/updatePrice`, { newPrice });
+            sale.price = newPrice;
+            edit.value = null;
+            notify('globals.dataSaved', 'positive');
+
+            // this.$http
+            //     .post(query, { newPrice })
+            //     .then((res) => {
+            //         sale.price = res.data.price;
+            //         this.edit = null;
+            //         this.vnApp.showSuccess(this.$t('Data saved!'));
+            //     })
+            //     .finally(() => this.resetChanges());
+        }
+        await getMana();
+    } catch (err) {
+        console.error('Error updating price', err);
+    }
+};
+
+const getNewPrice = () => {
+    if (edit.value.sale) {
+        const sale = edit.value.sale;
+        let newDiscount = sale.discount;
+        let newPrice = edit.value.price || sale.price;
+
+        if (edit.value.discount != null) newDiscount = edit.value.discount;
+
+        if (edit.value.price != null) newPrice = edit.value.price;
+
+        const price = sale.quantity * newPrice;
+        const discount = (newDiscount * price) / 100;
+
+        return price - discount;
+    }
+
+    return 0;
+};
+onMounted(async () => {
+    await getMana();
+});
+</script>
+
+<template>
+    <QPopupProxy>
+        <div class="container">
+            <QSpinner v-if="!edit.mana" color="orange" size="md" />
+            <div v-else>
+                <div class="header">Mana: {{ toCurrency(edit.mana) }}</div>
+                <div class="q-pa-md">
+                    <VnInput
+                        v-model.number="edit.price"
+                        :label="inputLabel"
+                        @change="updatePrice(row)"
+                    />
+                    <div class="column items-center q-mt-lg">
+                        <span class="text-primary">{{ t('New price') }}</span>
+                        <span class="text-subtitle1">{{
+                            toCurrency(getNewPrice())
+                        }}</span>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <QBtn color="primary" class="no-border-radius" dense style="width: 50%">
+                    {{ t('globals.cancel') }}
+                </QBtn>
+                <QBtn color="primary" class="no-border-radius" dense style="width: 50%">
+                    {{ t('globals.save') }}
+                </QBtn>
+            </div>
+        </div>
+    </QPopupProxy>
+</template>
+
+<style lang="scss" scoped>
+.container {
+    background-color: $dark;
+    width: 230px;
+}
+
+.header {
+    height: 54px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: $primary;
+    font-size: 1.2rem;
+    font-weight: bold;
+    min-width: 230px;
+}
+</style>
+
+<i18n>
+es:
+    Price: Precio
+    Discount: Descuento
+    New price: Nuevo precio
+</i18n>
diff --git a/src/pages/Ticket/Card/TicketSale.vue b/src/pages/Ticket/Card/TicketSale.vue
index 02cccaff2..ae737bfee 100644
--- a/src/pages/Ticket/Card/TicketSale.vue
+++ b/src/pages/Ticket/Card/TicketSale.vue
@@ -1 +1,455 @@
-<template>Ticket sale</template>
+<script setup>
+import { onMounted, ref, computed, reactive, onUnmounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter, useRoute } from 'vue-router';
+
+import FetchData from 'components/FetchData.vue';
+import FetchedTags from 'components/ui/FetchedTags.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
+import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+// import ItemSummary from '../Item/Card/ItemSummary.vue';
+import VnPaginate from 'components/ui/VnPaginate.vue';
+import TicketEditManaProxy from './TicketEditMana.vue';
+
+import { useStateStore } from 'stores/useStateStore';
+import { useSession } from 'composables/useSession';
+import { toCurrency, toPercentage } from 'src/filters';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+import { useVnConfirm } from 'composables/useVnConfirm';
+import axios from 'axios';
+import RightMenu from 'src/components/common/RightMenu.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import useNotify from 'src/composables/useNotify.js';
+
+const route = useRoute();
+const router = useRouter();
+const { getTokenMultimedia } = useSession();
+const token = getTokenMultimedia();
+const stateStore = useStateStore();
+const { t } = useI18n();
+const { openConfirmationModal } = useVnConfirm();
+const { notify } = useNotify();
+const salesDataRef = ref(null);
+
+const isLocked = ref(false);
+const isTicketEditable = ref(false);
+const salesOptions = ref([]);
+const allColumnNames = ref([]);
+const itemsWithNameOptions = ref([]);
+const manaCode = ref('mana');
+
+const columns = computed(() => [
+    {
+        label: '',
+        name: 'statusIcons',
+        align: 'left',
+    },
+    {
+        label: '',
+        name: 'picture',
+        align: 'left',
+    },
+    {
+        label: t('ticketSale.visible'),
+        name: 'visible',
+        field: 'visible',
+        align: 'left',
+        sortable: true,
+    },
+    {
+        label: t('ticketSale.available'),
+        name: 'available',
+        field: 'available',
+        align: 'left',
+        sortable: true,
+    },
+    {
+        label: t('ticketSale.id'),
+        name: 'itemFk',
+        field: 'itemFk',
+        align: 'left',
+        sortable: true,
+    },
+    {
+        label: t('ticketSale.quantity'),
+        name: 'quantity',
+        field: 'quantity',
+        align: 'left',
+        sortable: true,
+    },
+    {
+        label: t('ticketSale.item'),
+        name: 'item',
+        field: 'item',
+        align: 'left',
+        sortable: true,
+    },
+    {
+        label: t('ticketSale.price'),
+        name: 'price',
+        field: 'price',
+        align: 'left',
+        sortable: true,
+        format: (val) => toCurrency(val),
+    },
+    {
+        label: t('ticketSale.discount'),
+        name: 'discount',
+        field: 'discount',
+        align: 'left',
+        sortable: true,
+    },
+    {
+        label: t('ticketSale.amount'),
+        name: 'amount',
+        field: 'amount',
+        align: 'left',
+        sortable: true,
+    },
+    {
+        label: t('ticketSale.packaging'),
+        name: 'packaging',
+        field: 'packaging',
+        align: 'left',
+        sortable: true,
+    },
+    {
+        label: '',
+        name: 'actions',
+        align: 'left',
+        columnFilter: null,
+    },
+]);
+
+const redirectToItemCreate = () => {
+    router.push({ name: 'ItemCreate' });
+};
+
+// const redirectToItemSummary = (id) => {
+//     router.push({ name: 'ItemSummary', params: { id } });
+// };
+
+// const cloneItem = async (itemFk) => {
+//     try {
+//         const { data } = await axios.post(`Items/${itemFk}/clone`);
+//         if (!data) return;
+//         router.push({ name: 'ItemTags', params: { id: data.id } });
+//     } catch (err) {
+//         console.error('Error cloning item', err);
+//     }
+// };
+
+const resetChanges = async () => salesDataRef.value.fetch();
+
+const updateQuantity = async (sale) => {
+    console.log('updateQuantity');
+    try {
+        const payload = { quantity: sale.quantity };
+
+        await axios.post(`Sales/${sale.id}/updateQuantity`, payload);
+        notify('globals.dataSaved', 'positive');
+        await resetChanges();
+    } catch (err) {
+        console.error('Error updating quantity', err);
+    }
+};
+
+const addSale = async (sale) => {
+    try {
+        const payload = {
+            barcode: sale.itemFk,
+            quantity: sale.quantity,
+        };
+
+        const { data } = await axios.post(`tickets/${route.params.id}/addSale`, payload);
+
+        if (!data) return;
+
+        const newSale = data;
+        sale.id = newSale.id;
+        sale.image = newSale.item.image;
+        sale.subName = newSale.item.subName;
+        sale.concept = newSale.concept;
+        sale.quantity = newSale.quantity;
+        sale.discount = newSale.discount;
+        sale.price = newSale.price;
+        sale.item = newSale.item;
+
+        notify('globals.dataSaved', 'positive');
+        await resetChanges();
+    } catch (err) {
+        console.error('Error adding sale', err);
+    }
+};
+
+const changeQuantity = (sale) => {
+    if (!sale.itemFk || sale.quantity == null) return;
+
+    if (!sale.id) return addSale(sale);
+
+    updateQuantity(sale);
+};
+
+const updateConcept = async (sale) => {
+    try {
+        const data = { newConcept: sale.concept };
+        await axios.post(`Sales/${sale.id}/updateConcept`, data);
+        notify('globals.dataSaved', 'positive');
+        await resetChanges();
+    } catch (err) {
+        console.error('Error updating concept', err);
+    }
+};
+
+onMounted(async () => {
+    stateStore.rightDrawer = true;
+    const filteredColumns = columns.value.filter(
+        (col) => col.name !== 'picture' && col.name !== 'actions'
+    );
+    allColumnNames.value = filteredColumns.map((col) => col.name);
+});
+
+onUnmounted(() => (stateStore.rightDrawer = false));
+</script>
+
+<template>
+    <FetchData
+        :url="`Tickets/${route.params.id}/isEditable`"
+        auto-load
+        @on-fetch="(data) => (isTicketEditable = data)"
+    />
+    <FetchData
+        :url="`Tickets/${route.params.id}/isLocked`"
+        auto-load
+        @on-fetch="(data) => (isLocked = data)"
+    />
+    <FetchData
+        ref="salesDataRef"
+        :url="`Tickets/${route.params.id}/getSales`"
+        auto-load
+        @on-fetch="(data) => (salesOptions = data)"
+    />
+    <FetchData
+        url="Items/withName"
+        :filter="{ fields: ['id', 'name'], order: 'id DESC' }"
+        auto-load
+        @on-fetch="(data) => (itemsWithNameOptions = data)"
+    />
+    <VnSubToolbar>
+        <template #st-data> </template>
+    </VnSubToolbar>
+    <RightMenu>
+        <template #right-panel>
+            <ItemListFilter data-key="ItemList" />
+        </template>
+    </RightMenu>
+    <!-- <VnPaginate
+        ref="paginateRef"
+        data-key="ItemList"
+        url="Items/filter"
+        :order="['isActive DESC', 'name', 'id']"
+        :limit="12"
+        :expr-builder="exprBuilder"
+        :user-params="params"
+        :keep-opts="['userParams']"
+        :offset="50"
+        auto-load
+    >
+        <template #body="{ rows }"> -->
+    <QTable
+        :rows="salesOptions"
+        :columns="columns"
+        row-key="id"
+        :pagination="{ rowsPerPage: 0 }"
+        class="full-width q-mt-md"
+        selection="multiple"
+        :no-data-label="t('globals.noResults')"
+    >
+        <template #body-cell-statusIcons="{ row }">
+            <QTd class="q-gutter-x-xs">
+                <router-link
+                    v-if="row.claim?.claimFk"
+                    :to="{ name: 'ClaimBasicData', params: { id: row.claim?.claimFk } }"
+                >
+                    <QIcon color="primary" name="vn:claims" size="xs">
+                        <QTooltip>
+                            {{ t('ticket.summary.unavailable') }}:
+                            {{ row.claim?.claimFk }}
+                        </QTooltip>
+                    </QIcon>
+                </router-link>
+                <QIcon v-if="row.visible < 0" color="primary" name="warning" size="xs">
+                    <QTooltip>
+                        {{ t('ticketSale.visible') }}: {{ row.visible || 0 }}
+                    </QTooltip>
+                </QIcon>
+                <QIcon v-if="row.reserved" color="primary" name="vn:reserva" size="xs">
+                    <QTooltip>
+                        {{ t('ticket.summary.reserved') }}
+                    </QTooltip>
+                </QIcon>
+                <QIcon
+                    v-if="row.itemShortage"
+                    color="primary"
+                    name="vn:unavailable"
+                    size="xs"
+                >
+                    <QTooltip>
+                        {{ t('ticket.summary.itemShortage') }}
+                    </QTooltip>
+                </QIcon>
+                <QIcon
+                    v-if="row.hasComponentLack"
+                    color="primary"
+                    name="vn:components"
+                    size="xs"
+                >
+                    <QTooltip>
+                        {{ t('ticket.summary.hasComponentLack') }}
+                    </QTooltip>
+                </QIcon>
+            </QTd>
+        </template>
+        <template #body-cell-picture="{ row }">
+            <QTd>
+                <QImg
+                    :src="`/api/Images/catalog/50x50/${row.itemFk}/download?access_token=${token}`"
+                    spinner-color="primary"
+                    :ratio="1"
+                    height="50px"
+                    width="50px"
+                    style="border-radius: 50%"
+                />
+            </QTd>
+        </template>
+        <template #body-cell-visible="{ row }">
+            <QTd @click.stop>
+                <QBadge :color="row.visible < 0 ? 'alert' : 'transparent'" dense>
+                    {{ row.visible }}
+                </QBadge>
+            </QTd>
+        </template>
+        <template #body-cell-available="{ row }">
+            <QTd @click.stop>
+                <QBadge :color="row.available < 0 ? 'alert' : 'transparent'" dense>
+                    {{ row.available }}
+                </QBadge>
+            </QTd>
+        </template>
+        <template #body-cell-itemFk="{ row }">
+            <QTd @click.stop>
+                <div v-if="row.id">
+                    <QBtn flat color="primary" dense>
+                        {{ row.itemFk }}
+                    </QBtn>
+                    <ItemDescriptorProxy :id="row.itemFk" />
+                </div>
+                <VnSelect
+                    v-else
+                    :options="itemsWithNameOptions"
+                    hide-selected
+                    option-label="name"
+                    option-value="id"
+                    v-model="row.itemFk"
+                >
+                    <template #option="scope">
+                        <QItem v-bind="scope.itemProps">
+                            <QItemSection>
+                                <QItemLabel> #{{ scope.opt?.id }} </QItemLabel>
+                                <QItemLabel caption>{{ scope.opt?.name }}</QItemLabel>
+                            </QItemSection>
+                        </QItem>
+                    </template>
+                </VnSelect>
+            </QTd>
+        </template>
+        <template #body-cell-quantity="{ row }">
+            <QTd @click.stop>
+                <VnInput v-model.number="row.quantity" @change="changeQuantity(row)" />
+            </QTd>
+        </template>
+        <template #body-cell-item="{ row }">
+            <QTd class="col">
+                <div class="column">
+                    <span>{{ row.concept }}</span>
+                    <span class="color-vn-label">{{ row.item?.subName }}</span>
+                    <FetchedTags :item="row.item" :max-length="6" />
+                </div>
+                <QPopupProxy>
+                    <VnInput v-model="row.concept" @change="updateConcept(row)" />
+                </QPopupProxy>
+            </QTd>
+        </template>
+        <template #body-cell-price="{ row }">
+            <QTd @click.stop>
+                <QBtn flat color="primary" dense>
+                    {{ toCurrency(row.price) }}
+                </QBtn>
+                <TicketEditManaProxy
+                    :id="route.params.id"
+                    @reset-changes="resetChanges()"
+                />
+            </QTd>
+        </template>
+        <template #body-cell-discount="{ row }">
+            <QTd @click.stop>
+                <QBtn flat color="primary" dense>
+                    {{ toPercentage(row.discount) }}
+                </QBtn>
+                <TicketEditManaProxy
+                    :id="route.params.id"
+                    @reset-changes="resetChanges()"
+                />
+            </QTd>
+        </template>
+        <!-- <template #body-cell-actions="{ row }">
+                        <QTd>
+                            <QIcon
+                                @click.stop="
+                                    openConfirmationModal(
+                                        t(`All it's properties will be copied`),
+                                        t('Do you want to clone this item?'),
+                                        () => cloneItem(row.id)
+                                    )
+                                "
+                                class="q-ml-sm"
+                                color="primary"
+                                name="vn:clone"
+                                size="sm"
+                            >
+                                <QTooltip>
+                                    {{ t('globals.clone') }}
+                                </QTooltip>
+                            </QIcon>
+                            <QIcon
+                                @click.stop="viewSummary(row.id, ItemSummary)"
+                                class="q-ml-md"
+                                color="primary"
+                                name="preview"
+                                size="sm"
+                            >
+                                <QTooltip class="text-no-wrap">
+                                    {{ t('Preview') }}
+                                </QTooltip>
+                            </QIcon>
+                        </QTd>
+                    </template> -->
+    </QTable>
+    <pre>{{ salesOptions }}</pre>
+    <!-- </template>
+    </VnPaginate> -->
+
+    <QPageSticky :offset="[20, 20]">
+        <QBtn @click="redirectToItemCreate()" color="primary" fab icon="add" />
+        <QTooltip class="text-no-wrap">
+            {{ t('New item') }}
+        </QTooltip>
+    </QPageSticky>
+</template>
+
+<i18n>
+es:
+    New item: Nuevo artículo
+</i18n>
diff --git a/src/pages/Ticket/locale/en.yml b/src/pages/Ticket/locale/en.yml
new file mode 100644
index 000000000..2b59eefd4
--- /dev/null
+++ b/src/pages/Ticket/locale/en.yml
@@ -0,0 +1,10 @@
+ticketSale:
+    id: Id
+    visible: Visible
+    available: Available
+    quantity: Quantity
+    item: Item
+    price: Price
+    discount: Disc
+    amount: Amount
+    packaging: Packaging
diff --git a/src/pages/Ticket/locale/es.yml b/src/pages/Ticket/locale/es.yml
index 5348b29b9..2c2bb8b05 100644
--- a/src/pages/Ticket/locale/es.yml
+++ b/src/pages/Ticket/locale/es.yml
@@ -1,2 +1,12 @@
 Search ticket: Buscar ticket
 You can search by ticket id or alias: Puedes buscar por id o alias del ticket
+ticketSale:
+    id: Id
+    visible: Visible
+    available: Disponible
+    quantity: Cantidad
+    item: Artículo
+    price: Precio
+    discount: Dto
+    amount: Cantidad
+    packaging: Encajado

From d7237463ea6ad0902fc300e4884c7f00564f4f19 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Wed, 12 Jun 2024 11:00:10 +0200
Subject: [PATCH 058/167] feat(WorkerFormation): is-editable and use-model

---
 src/pages/Worker/Card/WorkerFormation.vue | 17 +++++------------
 1 file changed, 5 insertions(+), 12 deletions(-)

diff --git a/src/pages/Worker/Card/WorkerFormation.vue b/src/pages/Worker/Card/WorkerFormation.vue
index e2486a168..52b22a295 100644
--- a/src/pages/Worker/Card/WorkerFormation.vue
+++ b/src/pages/Worker/Card/WorkerFormation.vue
@@ -3,7 +3,6 @@ import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import VnTable from 'components/VnTable/VnTable.vue';
-import VnInputDate from 'components/common/VnInputDate.vue';
 const tableRef = ref();
 const { t } = useI18n();
 const route = useRoute();
@@ -36,16 +35,12 @@ const columns = computed(() => [
             url: 'TrainingCourseTypes',
             fields: ['id', 'name'],
         },
-        disable: false,
-        columnFilter: {
-            inWhere: true,
-        },
     },
     {
         align: 'left',
         name: 'started',
         label: t('worker.formation.tableVisibleColumns.startDate'),
-        component: VnInputDate,
+        component: 'date',
         field: 'started',
         create: true,
         cardVisible: true,
@@ -54,7 +49,7 @@ const columns = computed(() => [
         align: 'left',
         name: 'ended',
         label: t('worker.formation.tableVisibleColumns.endDate'),
-        component: VnInputDate,
+        component: 'date',
         field: 'ended',
         create: true,
     },
@@ -68,10 +63,6 @@ const columns = computed(() => [
             url: 'TrainingCenters',
             fields: ['id', 'name'],
         },
-        disable: false,
-        columnFilter: {
-            inWhere: true,
-        },
     },
     {
         align: 'left',
@@ -92,8 +83,8 @@ const columns = computed(() => [
         align: 'left',
         name: 'remark',
         label: t('worker.formation.tableVisibleColumns.remark'),
-        create: true,
         component: 'checkbox',
+        create: true,
     },
     {
         align: 'left',
@@ -124,5 +115,7 @@ const columns = computed(() => [
         default-mode="table"
         auto-load
         :right-search="false"
+        :is-editable="true"
+        :use-model="true"
     />
 </template>

From c4cbd7f156918c04ce08be162b416d32f95ed51c Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Wed, 12 Jun 2024 11:01:18 +0200
Subject: [PATCH 059/167] feat(VnTable): is-editable and use-model. fix:
 checkbox

---
 src/components/VnTable/VnColumn.vue | 16 +++++++++------
 src/components/VnTable/VnFilter.vue |  2 +-
 src/components/VnTable/VnTable.vue  | 31 ++++++++++-------------------
 src/css/app.scss                    | 23 +++++++++++++++++++++
 4 files changed, 44 insertions(+), 28 deletions(-)

diff --git a/src/components/VnTable/VnColumn.vue b/src/components/VnTable/VnColumn.vue
index c8a9a97b7..17751c7dd 100644
--- a/src/components/VnTable/VnColumn.vue
+++ b/src/components/VnTable/VnColumn.vue
@@ -61,13 +61,17 @@ const defaultComponents = {
     checkbox: {
         component: markRaw(QCheckbox),
         attrs: (prop) => {
-            return {
+            const defaultAttrs = {
                 disable: !$props.isEditable,
-                'true-value': 1,
-                'false-value': 0,
                 'model-value': Boolean(prop),
                 class: 'no-padding',
             };
+
+            if (typeof prop == 'number') {
+                defaultAttrs['true-value'] = 1;
+                defaultAttrs['false-value'] = 0;
+            }
+            return defaultAttrs;
         },
         forceAttrs: {
             label: null,
@@ -118,14 +122,14 @@ const components = computed(() => $props.components ?? defaultComponents);
         v-if="col.before"
         :prop="col.before"
         :components="components"
-        :value="$props.row"
+        :value="model"
         v-model="model"
     />
     <VnComponent
         v-if="col.component"
         :prop="col"
         :components="components"
-        :value="$props.row"
+        :value="model"
         v-model="model"
     />
     <span :title="value" v-else>{{ value }}</span>
@@ -133,7 +137,7 @@ const components = computed(() => $props.components ?? defaultComponents);
         v-if="col.after"
         :prop="col.after"
         :components="components"
-        :value="$props.row"
+        :value="model"
         v-model="model"
     />
 </template>
diff --git a/src/components/VnTable/VnFilter.vue b/src/components/VnTable/VnFilter.vue
index 1d4ec6c1a..e638ddd8e 100644
--- a/src/components/VnTable/VnFilter.vue
+++ b/src/components/VnTable/VnFilter.vue
@@ -103,7 +103,7 @@ const components = {
 };
 
 async function addFilter(value) {
-    value ||= undefined;
+    value ??= undefined;
     if (value && typeof value === 'object') value = model.value;
     value = value === '' ? undefined : value;
     let field = columnFilter.value?.name ?? $props.column.name;
diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index 897b75fc4..bcca17cab 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -51,6 +51,14 @@ const $props = defineProps({
         type: String,
         default: 'table',
     },
+    isEditable: {
+        type: Boolean,
+        default: null,
+    },
+    useModel: {
+        type: Boolean,
+        default: false,
+    },
 });
 const attrs = useAttrs();
 const { t } = useI18n();
@@ -127,6 +135,8 @@ function splitColumns(columns) {
         if (col.isTitle) splittedColumns.value.title = col;
         if (col.create) splittedColumns.value.create.push(col);
         if (col.cardVisible) splittedColumns.value.visible.push(col);
+        if ($props.isEditable && col.disable == null) col.disable = false;
+        if ($props.useModel) col.columnFilter = { ...col.columnFilter, inWhere: true };
         splittedColumns.value.columns.push(col);
     }
     // Status column
@@ -483,27 +493,6 @@ defineExpose({
     background-color: var(--vn-page-color);
 }
 
-/* Works on Firefox */
-* {
-    scrollbar-width: thin;
-    scrollbar-color: grey transparent;
-}
-
-/* Works on Chrome, Edge, and Safari */
-*::-webkit-scrollbar {
-    width: 12px;
-}
-
-*::-webkit-scrollbar-track {
-    background: transparent;
-}
-
-*::-webkit-scrollbar-thumb {
-    background-color: transparent;
-    border-radius: 20px;
-    border: 3px solid var(--vn-page-color);
-}
-
 .grid-three {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(400px, max-content));
diff --git a/src/css/app.scss b/src/css/app.scss
index b1c93ac9d..f6c873e90 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -196,3 +196,26 @@ input::-webkit-inner-spin-button {
 .q-scrollarea__content {
     max-width: 100%;
 }
+
+/* ===== Scrollbar CSS ===== /
+/ Firefox */
+
+* {
+    scrollbar-width: auto;
+    scrollbar-color: var(--vn-label-color) transparent;
+}
+
+/* Chrome, Edge, and Safari */
+*::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+}
+
+*::-webkit-scrollbar-thumb {
+    background-color: var(--vn-label-color);
+    border-radius: 10px;
+}
+
+*::-webkit-scrollbar-track {
+    background: transparent;
+}

From e464608a9fc6c69a93c424248b6d00d0d801cba8 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Wed, 12 Jun 2024 14:01:10 +0200
Subject: [PATCH 060/167] refs #7391 fix url, fix filters

---
 src/components/common/VnSelect.vue            |  4 +-
 .../Customer/Defaulter/CustomerDefaulter.vue  | 36 +++-------------
 .../Defaulter/CustomerDefaulterFilter.vue     | 41 +++++++------------
 3 files changed, 24 insertions(+), 57 deletions(-)

diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index 493f094ce..7b79e3279 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -116,7 +116,9 @@ async function fetchFilter(val) {
     if (new RegExp(/\d/g).test(val)) key = optionFilter.value ?? optionValue.value;
 
     const where = { ...{ [key]: { like: `%${val}%` } }, ...$props.where };
-    return dataRef.value.fetch({ fields, where, order: sortBy, limit });
+    const fetchOptions = { where, order: sortBy, limit };
+    if (fields) fetchOptions.fields = fields;
+    return dataRef.value.fetch(fetchOptions);
 }
 
 async function filterHandler(val, update) {
diff --git a/src/pages/Customer/Defaulter/CustomerDefaulter.vue b/src/pages/Customer/Defaulter/CustomerDefaulter.vue
index b98d755f3..02217d7ae 100644
--- a/src/pages/Customer/Defaulter/CustomerDefaulter.vue
+++ b/src/pages/Customer/Defaulter/CustomerDefaulter.vue
@@ -25,7 +25,7 @@ const balanceDueTotal = ref(0);
 const selected = ref([]);
 
 const tableColumnComponents = {
-    client: {
+    clientFk: {
         component: QBtn,
         props: () => ({ flat: true, class: 'link', noCaps: true }),
         event: () => {},
@@ -43,7 +43,7 @@ const tableColumnComponents = {
         props: () => ({ flat: true, class: 'link', noCaps: true }),
         event: () => {},
     },
-    department: {
+    departmentName: {
         component: 'span',
         props: () => {},
         event: () => {},
@@ -105,12 +105,12 @@ const columns = computed(() => [
         align: 'left',
         field: 'clientName',
         label: t('Client'),
-        name: 'client',
+        name: 'clientFk',
         sortable: true,
     },
     {
         align: 'left',
-        field: 'isWorker',
+        field: ({ isWorker }) => Boolean(isWorker),
         label: t('Is worker'),
         name: 'isWorker',
     },
@@ -125,7 +125,7 @@ const columns = computed(() => [
         align: 'left',
         field: 'departmentName',
         label: t('Department'),
-        name: 'department',
+        name: 'departmentName',
         sortable: true,
     },
     {
@@ -207,48 +207,24 @@ const viewAddObservation = (rowsSelected) => {
     });
 };
 
-const departments = ref(new Map());
-
 const onFetch = async (data) => {
-    const salesPersonFks = data.map((item) => item.salesPersonFk);
-    const departmentNames = salesPersonFks.map(async (salesPersonFk) => {
-        try {
-            const { data: workerDepartment } = await axios.get(
-                `WorkerDepartments/${salesPersonFk}`
-            );
-            const { data: department } = await axios.get(
-                `Departments/${workerDepartment.departmentFk}`
-            );
-            departments.value.set(salesPersonFk, department.name);
-        } catch (error) {
-            console.error('Err: ', error);
-        }
-    });
     const recoveryData = await axios.get('Recoveries');
-
     const recoveries = recoveryData.data.map(({ clientFk, finished }) => ({
         clientFk,
         finished,
     }));
 
-    await Promise.all(departmentNames);
-
     data.forEach((item) => {
-        item.departmentName = departments.value.get(item.salesPersonFk);
-        item.isWorker = item.businessTypeFk === 'worker';
         const recovery = recoveries.find(({ clientFk }) => clientFk === item.clientFk);
         item.finished = recovery?.finished === null;
     });
-
-    for (const element of data) element.isWorker = element.businessTypeFk === 'worker';
-
     balanceDueTotal.value = data.reduce((acc, { amount = 0 }) => acc + amount, 0);
 };
 
 function exprBuilder(param, value) {
     switch (param) {
         case 'clientFk':
-            return { [`d.${param}`]: value?.id };
+            return { [`d.${param}`]: value };
         case 'creditInsurance':
         case 'amount':
         case 'workerFk':
diff --git a/src/pages/Customer/Defaulter/CustomerDefaulterFilter.vue b/src/pages/Customer/Defaulter/CustomerDefaulterFilter.vue
index 9c7f6f470..6b4d8baaa 100644
--- a/src/pages/Customer/Defaulter/CustomerDefaulterFilter.vue
+++ b/src/pages/Customer/Defaulter/CustomerDefaulterFilter.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnInput from 'src/components/common/VnInput.vue';
@@ -16,7 +15,6 @@ const props = defineProps({
     },
 });
 
-const clients = ref();
 const salespersons = ref();
 const countries = ref();
 const authors = ref();
@@ -24,7 +22,6 @@ const departments = ref();
 </script>
 
 <template>
-    <FetchData @on-fetch="(data) => (clients = data)" auto-load url="Clients" />
     <FetchData
         :filter="{ where: { role: 'salesPerson' } }"
         @on-fetch="(data) => (salespersons = data)"
@@ -49,29 +46,22 @@ const departments = ref();
 
         <template #body="{ params, searchFn }">
             <QItem class="q-mb-sm">
-                <QItemSection v-if="clients">
-                    <VnSelect
-                        :label="t('Client')"
-                        :options="clients"
-                        dense
-                        emit-value
-                        hide-selected
-                        map-options
-                        option-label="name"
-                        option-value="id"
-                        outlined
-                        rounded
-                        use-input
-                        v-model="params.clientFk"
-                        @update:model-value="searchFn()"
-                        auto-load
-                    />
-                </QItemSection>
-                <QItemSection v-else>
-                    <QSkeleton class="full-width" type="QInput" />
-                </QItemSection>
+                <VnSelect
+                    :label="t('Client')"
+                    url="Clients"
+                    dense
+                    option-label="name"
+                    option-value="id"
+                    outlined
+                    rounded
+                    emit-value
+                    hide-selected
+                    map-options
+                    v-model="params.clientFk"
+                    use-input
+                    @update:model-value="searchFn()"
+                />
             </QItem>
-
             <QItem class="q-mb-sm">
                 <QItemSection v-if="salespersons">
                     <VnSelect
@@ -95,7 +85,6 @@ const departments = ref();
                     <QSkeleton class="full-width" type="QInput" />
                 </QItemSection>
             </QItem>
-
             <QItem class="q-mb-sm">
                 <QItemSection v-if="departments">
                     <VnSelect

From 975e8f06c0a7b4c4d700bc58132dc366fe20da3b Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Thu, 13 Jun 2024 13:56:19 -0300
Subject: [PATCH 061/167] WIP

---
 src/components/ui/ItemPicture.vue        |  34 ++
 src/filters/toPercentage.js              |  10 +-
 src/pages/Ticket/Card/TicketEditMana.vue | 124 ++----
 src/pages/Ticket/Card/TicketSale.vue     | 483 +++++++++++++++++------
 src/pages/Ticket/locale/en.yml           |   9 +
 src/pages/Ticket/locale/es.yml           |  11 +-
 6 files changed, 451 insertions(+), 220 deletions(-)
 create mode 100644 src/components/ui/ItemPicture.vue

diff --git a/src/components/ui/ItemPicture.vue b/src/components/ui/ItemPicture.vue
new file mode 100644
index 000000000..e76414618
--- /dev/null
+++ b/src/components/ui/ItemPicture.vue
@@ -0,0 +1,34 @@
+<script setup>
+defineProps({
+    url: { type: String, required: true },
+    width: { type: String, default: '50px' },
+    height: { type: String, default: '50px' },
+    iconSize: { type: String, default: 'md' },
+});
+</script>
+<template>
+    <QImg
+        :src="url"
+        :height="height"
+        :width="width"
+        :ratio="1"
+        spinner-color="primary"
+        style="border-radius: 50%"
+    >
+        <template #error>
+            <div class="icon-container">
+                <QIcon name="photo" :size="iconSize" style="opacity: 0.4" />
+            </div>
+        </template>
+    </QImg>
+</template>
+
+<style lang="scss" scoped>
+.icon-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+</style>
diff --git a/src/filters/toPercentage.js b/src/filters/toPercentage.js
index d701cb9e7..e2b49ce22 100644
--- a/src/filters/toPercentage.js
+++ b/src/filters/toPercentage.js
@@ -1,6 +1,7 @@
 import { useI18n } from 'vue-i18n';
 
 export default function (value, fractionSize = 2) {
+    console.log('toPercentage value: ', value);
     if (value == null || value === '') return;
 
     const { locale } = useI18n();
@@ -8,11 +9,8 @@ export default function (value, fractionSize = 2) {
     const options = {
         style: 'percent',
         minimumFractionDigits: fractionSize,
-        maximumFractionDigits: fractionSize
+        maximumFractionDigits: fractionSize,
     };
 
-    return new Intl.NumberFormat(locale, options)
-        .format(parseFloat(value));
-
-
-}
\ No newline at end of file
+    return new Intl.NumberFormat(locale, options).format(parseFloat(value));
+}
diff --git a/src/pages/Ticket/Card/TicketEditMana.vue b/src/pages/Ticket/Card/TicketEditMana.vue
index d563e49f7..dc082d660 100644
--- a/src/pages/Ticket/Card/TicketEditMana.vue
+++ b/src/pages/Ticket/Card/TicketEditMana.vue
@@ -1,121 +1,73 @@
 <script setup>
-import { ref, onMounted, computed } from 'vue';
+import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import { toCurrency } from 'src/filters';
-import VnInput from 'src/components/common/VnInput.vue';
-
-import axios from 'axios';
-import useNotify from 'src/composables/useNotify.js';
 
 const $props = defineProps({
     id: {
-        type: Number,
+        type: String,
         required: true,
     },
-    type: {
-        type: String,
-        default: 'price', // 'discount' or 'price
+    mana: {
+        type: Number,
+        default: null,
+    },
+    newPrice: {
+        type: Number,
+        default: 0,
     },
 });
 
+const emit = defineEmits(['save', 'cancel']);
+
 const { t } = useI18n();
-const { notify } = useNotify();
+const QPopupProxyRef = ref(null);
 
-const edit = ref({});
-const usesMana = ref(null);
-
-const inputLabel = computed(() => ($props.type === 'price' ? t('Price') : t('Discount')));
-
-const getUsesMana = async () => {
-    const { data } = await axios.get('Sales/usesMana');
-    usesMana.value = data;
+const save = () => {
+    emit('save');
+    QPopupProxyRef.value.hide();
 };
 
-const getMana = async () => {
-    const { data } = await axios.get(`Tickets/${$props.id}/getSalesPersonMana`);
-    edit.value.mana = data;
-    await getUsesMana();
-    console.log('edit', edit.value);
-    // this.$.$applyAsync(() => {
-    //     this.$.editDiscount.relocate();
-    //     this.$.editPricePopover.relocate();
-    // });
+const cancel = () => {
+    emit('cancel');
+    QPopupProxyRef.value.hide();
 };
-
-const updatePrice = async () => {
-    try {
-        const sale = edit.value.sale;
-        const newPrice = edit.value.price;
-        if (newPrice != null && newPrice != sale.price) {
-            await axios.post(`Sales/${sale.id}/updatePrice`, { newPrice });
-            sale.price = newPrice;
-            edit.value = null;
-            notify('globals.dataSaved', 'positive');
-
-            // this.$http
-            //     .post(query, { newPrice })
-            //     .then((res) => {
-            //         sale.price = res.data.price;
-            //         this.edit = null;
-            //         this.vnApp.showSuccess(this.$t('Data saved!'));
-            //     })
-            //     .finally(() => this.resetChanges());
-        }
-        await getMana();
-    } catch (err) {
-        console.error('Error updating price', err);
-    }
-};
-
-const getNewPrice = () => {
-    if (edit.value.sale) {
-        const sale = edit.value.sale;
-        let newDiscount = sale.discount;
-        let newPrice = edit.value.price || sale.price;
-
-        if (edit.value.discount != null) newDiscount = edit.value.discount;
-
-        if (edit.value.price != null) newPrice = edit.value.price;
-
-        const price = sale.quantity * newPrice;
-        const discount = (newDiscount * price) / 100;
-
-        return price - discount;
-    }
-
-    return 0;
-};
-onMounted(async () => {
-    await getMana();
-});
 </script>
 
 <template>
-    <QPopupProxy>
+    <QPopupProxy ref="QPopupProxyRef">
         <div class="container">
-            <QSpinner v-if="!edit.mana" color="orange" size="md" />
+            <QSpinner v-if="!$props.mana" color="orange" size="md" />
             <div v-else>
-                <div class="header">Mana: {{ toCurrency(edit.mana) }}</div>
+                <div class="header">Mana: {{ toCurrency($props.mana) }}</div>
                 <div class="q-pa-md">
-                    <VnInput
-                        v-model.number="edit.price"
-                        :label="inputLabel"
-                        @change="updatePrice(row)"
-                    />
+                    <slot />
                     <div class="column items-center q-mt-lg">
                         <span class="text-primary">{{ t('New price') }}</span>
                         <span class="text-subtitle1">{{
-                            toCurrency(getNewPrice())
+                            toCurrency($props.newPrice)
                         }}</span>
                     </div>
                 </div>
             </div>
             <div class="row">
-                <QBtn color="primary" class="no-border-radius" dense style="width: 50%">
+                <QBtn
+                    color="primary"
+                    class="no-border-radius"
+                    dense
+                    style="width: 50%"
+                    @click="cancel()"
+                >
                     {{ t('globals.cancel') }}
                 </QBtn>
-                <QBtn color="primary" class="no-border-radius" dense style="width: 50%">
+                <QBtn
+                    color="primary"
+                    class="no-border-radius"
+                    dense
+                    style="width: 50%"
+                    @click="save()"
+                >
                     {{ t('globals.save') }}
                 </QBtn>
             </div>
@@ -144,7 +96,5 @@ onMounted(async () => {
 
 <i18n>
 es:
-    Price: Precio
-    Discount: Descuento
     New price: Nuevo precio
 </i18n>
diff --git a/src/pages/Ticket/Card/TicketSale.vue b/src/pages/Ticket/Card/TicketSale.vue
index ae737bfee..a093beafa 100644
--- a/src/pages/Ticket/Card/TicketSale.vue
+++ b/src/pages/Ticket/Card/TicketSale.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, ref, computed, reactive, onUnmounted } from 'vue';
+import { onMounted, ref, computed, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter, useRoute } from 'vue-router';
 
@@ -8,20 +8,18 @@ import FetchedTags from 'components/ui/FetchedTags.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
-import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
-// import ItemSummary from '../Item/Card/ItemSummary.vue';
-import VnPaginate from 'components/ui/VnPaginate.vue';
 import TicketEditManaProxy from './TicketEditMana.vue';
+import ItemPicture from 'src/components/ui/ItemPicture.vue';
+import RightMenu from 'src/components/common/RightMenu.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 import { useStateStore } from 'stores/useStateStore';
 import { useSession } from 'composables/useSession';
-import { toCurrency, toPercentage } from 'src/filters';
-import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+import { toCurrency, toPercentage, dashIfEmpty } from 'src/filters';
+import { useArrayData } from 'composables/useArrayData';
 import { useVnConfirm } from 'composables/useVnConfirm';
-import axios from 'axios';
-import RightMenu from 'src/components/common/RightMenu.vue';
-import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import useNotify from 'src/composables/useNotify.js';
+import axios from 'axios';
 
 const route = useRoute();
 const router = useRouter();
@@ -29,16 +27,23 @@ const { getTokenMultimedia } = useSession();
 const token = getTokenMultimedia();
 const stateStore = useStateStore();
 const { t } = useI18n();
-const { openConfirmationModal } = useVnConfirm();
 const { notify } = useNotify();
+const { openConfirmationModal } = useVnConfirm();
 const salesDataRef = ref(null);
+const editPriceProxyRef = ref(null);
 
+const arrayData = useArrayData('ticketData');
+const { store } = arrayData;
+
+const ticketConfig = ref(null);
 const isLocked = ref(false);
 const isTicketEditable = ref(false);
-const salesOptions = ref([]);
-const allColumnNames = ref([]);
+const sales = ref([]);
 const itemsWithNameOptions = ref([]);
+const selectedSales = ref([]);
+const mana = ref(null);
 const manaCode = ref('mana');
+const ticketState = computed(() => store.data?.ticketState?.state?.code);
 
 const columns = computed(() => [
     {
@@ -107,50 +112,56 @@ const columns = computed(() => [
         field: 'amount',
         align: 'left',
         sortable: true,
+        format: (val) => toCurrency(val),
     },
     {
         label: t('ticketSale.packaging'),
-        name: 'packaging',
-        field: 'packaging',
+        name: 'itemPackingTypeFk',
+        field: 'item',
         align: 'left',
         sortable: true,
+        format: (val) => dashIfEmpty(val?.itemPackingTypeFk),
     },
     {
         label: '',
-        name: 'actions',
+        name: 'history',
         align: 'left',
         columnFilter: null,
     },
 ]);
 
-const redirectToItemCreate = () => {
-    router.push({ name: 'ItemCreate' });
+const getConfig = async () => {
+    let filter = {
+        fields: ['daysForWarningClaim'],
+    };
+    const { data } = await axios.get(`TicketConfigs`, { filter });
+    ticketConfig.value = data;
 };
 
-// const redirectToItemSummary = (id) => {
-//     router.push({ name: 'ItemSummary', params: { id } });
-// };
+const getSaleTotal = (sale) => {
+    if (sale.quantity == null || sale.price == null) return null;
 
-// const cloneItem = async (itemFk) => {
-//     try {
-//         const { data } = await axios.post(`Items/${itemFk}/clone`);
-//         if (!data) return;
-//         router.push({ name: 'ItemTags', params: { id: data.id } });
-//     } catch (err) {
-//         console.error('Error cloning item', err);
-//     }
-// };
+    const price = sale.quantity * sale.price;
+    const discount = (sale.discount * price) / 100;
 
-const resetChanges = async () => salesDataRef.value.fetch();
+    return price - discount;
+};
+
+const onSalesFetched = (salesData) => {
+    sales.value = salesData;
+    for (let sale of salesData) sale.amount = getSaleTotal(sale);
+};
+
+const resetChanges = async () => {
+    arrayData.fetch({ append: false });
+    salesDataRef.value.fetch();
+};
 
 const updateQuantity = async (sale) => {
-    console.log('updateQuantity');
     try {
         const payload = { quantity: sale.quantity };
-
         await axios.post(`Sales/${sale.id}/updateQuantity`, payload);
         notify('globals.dataSaved', 'positive');
-        await resetChanges();
     } catch (err) {
         console.error('Error updating quantity', err);
     }
@@ -178,15 +189,15 @@ const addSale = async (sale) => {
         sale.item = newSale.item;
 
         notify('globals.dataSaved', 'positive');
-        await resetChanges();
     } catch (err) {
         console.error('Error adding sale', err);
     }
 };
 
 const changeQuantity = (sale) => {
+    console.log('edit.quantity', edit.value.quantity);
+    console.log('sale.quantity', sale.quantity);
     if (!sale.itemFk || sale.quantity == null) return;
-
     if (!sale.id) return addSale(sale);
 
     updateQuantity(sale);
@@ -197,18 +208,165 @@ const updateConcept = async (sale) => {
         const data = { newConcept: sale.concept };
         await axios.post(`Sales/${sale.id}/updateConcept`, data);
         notify('globals.dataSaved', 'positive');
-        await resetChanges();
     } catch (err) {
         console.error('Error updating concept', err);
     }
 };
 
+const DEFAULT_EDIT = { price: null, discount: null, sale: null, sales: null };
+const edit = ref({ ...DEFAULT_EDIT });
+const usesMana = ref(null);
+
+const getUsesMana = async () => {
+    const { data } = await axios.get('Sales/usesMana');
+    usesMana.value = data;
+};
+
+const getMana = async () => {
+    const { data } = await axios.get(`Tickets/${route.params.id}/getSalesPersonMana`);
+    mana.value = data;
+    await getUsesMana();
+};
+
+const selectedValidSales = () => {
+    if (!sales.value) return;
+    return selectedSales.value.filter((sale) => sale.id != undefined);
+};
+
+const onOpenEditPricePopover = async (sale) => {
+    await getMana();
+    edit.value = {
+        sale: JSON.parse(JSON.stringify(sale)),
+        price: sale.price,
+    };
+};
+
+const onOpenEditDiscountPopover = async (sale) => {
+    await getMana();
+    if (isLocked.value) return;
+    if (sale) {
+        edit.value = {
+            sale: JSON.parse(JSON.stringify(sale)),
+            discount: sale.discount,
+        };
+    } else {
+        edit.value = {
+            discount: null,
+            sales: selectedValidSales(),
+        };
+    }
+};
+
+const updatePrice = async (sale) => {
+    try {
+        const newPrice = edit.value.price;
+        if (newPrice != null && newPrice != sale.price) {
+            await axios.post(`Sales/${sale.id}/updatePrice`, { newPrice });
+            sale.price = newPrice;
+            edit.value = { ...DEFAULT_EDIT };
+            notify('globals.dataSaved', 'positive');
+        }
+        await getMana();
+    } catch (err) {
+        console.error('Error updating price', err);
+    }
+};
+
+const changeDiscount = (sale) => {
+    const newDiscount = edit.value.discount;
+    if (newDiscount != null && newDiscount != sale.discount) updateDiscount([sale]);
+};
+
+const updateDiscount = async (sales) => {
+    const saleIds = sales.map((sale) => sale.id);
+    const params = {
+        salesIds: saleIds,
+        newDiscount: edit.value.discount,
+        manaCode: manaCode.value,
+    };
+    await axios.post(`Tickets/${route.params.id}/updateDiscount`, params);
+    notify('globals.dataSaved', 'positive');
+    for (let sale of sales) sale.discount = edit.value.discount;
+    edit.value = { ...DEFAULT_EDIT };
+};
+
+const getNewPrice = computed(() => {
+    if (edit.value?.sale) {
+        const sale = edit.value.sale;
+        let newDiscount = sale.discount;
+        let newPrice = edit.value.price || sale.price;
+
+        if (edit.value.discount != null) newDiscount = edit.value.discount;
+
+        if (edit.value.price != null) newPrice = edit.value.price;
+
+        const price = sale.quantity * newPrice;
+        const discount = (newDiscount * price) / 100;
+        return price - discount;
+    }
+
+    return 0;
+});
+
+const newOrderFromTicket = async () => {
+    try {
+        const { data } = await axios.post(`Orders/newFromTicket`, {
+            ticketFk: Number(route.params.id),
+        });
+        const routeData = router.resolve({ name: 'OrderCatalog', params: { id: data } });
+        window.open(routeData.href, '_blank');
+    } catch (err) {
+        console.error('Error creating new order', err);
+    }
+};
+
+const goToLog = (saleId) => {
+    //TODO: Redireccionar cuando exista la vista TicketLog
+    // router.push({
+    //     name: 'TicketLog',
+    //     params: {
+    //         originId: route.params.id,
+    //         changedModel: 'Sale',
+    //         changedModelId: saleId,
+    //     },
+    // });
+};
+
+const changeTicketState = async (val) => {
+    try {
+        const params = { ticketFk: route.params.id, code: val };
+        await axios.post('Tickets/state', params);
+        notify('globals.dataSaved', 'positive');
+        await resetChanges();
+    } catch (err) {
+        console.error('Error changing ticket state', err);
+    }
+};
+
+const removeSelectedSales = () => {
+    selectedSales.value.forEach((sale) => {
+        const index = sales.value.indexOf(sale);
+        sales.value.splice(index, 1);
+    });
+};
+
+const removeSales = async () => {
+    try {
+        const sales = selectedValidSales();
+        const params = { sales: sales, ticketId: store.data.id };
+        await axios.post('Sales/deleteSales', params);
+        removeSelectedSales();
+        notify('globals.dataSaved', 'positive');
+    } catch (err) {
+        console.error('Error deleting sales', err);
+    }
+};
+
+const insertRow = () => sales.value.push({ ...DEFAULT_EDIT });
+
 onMounted(async () => {
     stateStore.rightDrawer = true;
-    const filteredColumns = columns.value.filter(
-        (col) => col.name !== 'picture' && col.name !== 'actions'
-    );
-    allColumnNames.value = filteredColumns.map((col) => col.name);
+    await getConfig();
 });
 
 onUnmounted(() => (stateStore.rightDrawer = false));
@@ -229,7 +387,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
         ref="salesDataRef"
         :url="`Tickets/${route.params.id}/getSales`"
         auto-load
-        @on-fetch="(data) => (salesOptions = data)"
+        @on-fetch="(data) => onSalesFetched(data)"
     />
     <FetchData
         url="Items/withName"
@@ -238,33 +396,73 @@ onUnmounted(() => (stateStore.rightDrawer = false));
         @on-fetch="(data) => (itemsWithNameOptions = data)"
     />
     <VnSubToolbar>
-        <template #st-data> </template>
+        <template #st-actions>
+            <QBtnGroup push class="q-gutter-x-sm" flat>
+                <QBtn
+                    color="primary"
+                    icon="delete"
+                    :disable="!isTicketEditable || !selectedSales.length"
+                    @click="
+                        openConfirmationModal(
+                            t('Continue anyway?'),
+                            t('You are going to delete lines of the ticket'),
+                            removeSales
+                        )
+                    "
+                >
+                    <QTooltip>{{ t('Remove lines') }}</QTooltip>
+                </QBtn>
+                <QBtn
+                    :label="t('ticketSale.ok')"
+                    color="primary"
+                    :disable="!isTicketEditable || ticketState === 'OK'"
+                    @click="changeTicketState('OK')"
+                >
+                    <QTooltip>{{ t(`Change ticket state to 'Ok'`) }}</QTooltip>
+                </QBtn>
+            </QBtnGroup>
+        </template>
     </VnSubToolbar>
     <RightMenu>
         <template #right-panel>
-            <ItemListFilter data-key="ItemList" />
+            <div
+                class="q-pa-md q-mb-md q-ma-md color-vn-text"
+                style="border: 2px solid black"
+            >
+                <QCardSection class="justify-center text-subtitle1" horizontal>
+                    <span class="q-mr-xs color-vn-label"
+                        >{{ t('ticketSale.subtotal') }}:
+                    </span>
+                    <span>{{ toCurrency(store.data?.totalWithoutVat) }}</span>
+                </QCardSection>
+                <QCardSection class="justify-center text-subtitle1" horizontal>
+                    <span class="q-mr-xs color-vn-label">
+                        {{ t('ticketSale.tax') }}:
+                    </span>
+                    <span>{{
+                        toCurrency(store.data?.totalWithVat - store.data?.totalWithoutVat)
+                    }}</span>
+                </QCardSection>
+                <QCardSection
+                    class="justify-center text-weight-bold text-subtitle1"
+                    horizontal
+                >
+                    <span class="q-mr-xs color-vn-label">
+                        {{ t('ticketSale.total') }}:
+                    </span>
+                    <span>{{ toCurrency(store.data?.totalWithVat) }}</span>
+                </QCardSection>
+            </div>
         </template>
     </RightMenu>
-    <!-- <VnPaginate
-        ref="paginateRef"
-        data-key="ItemList"
-        url="Items/filter"
-        :order="['isActive DESC', 'name', 'id']"
-        :limit="12"
-        :expr-builder="exprBuilder"
-        :user-params="params"
-        :keep-opts="['userParams']"
-        :offset="50"
-        auto-load
-    >
-        <template #body="{ rows }"> -->
     <QTable
-        :rows="salesOptions"
+        :rows="sales"
         :columns="columns"
         row-key="id"
         :pagination="{ rowsPerPage: 0 }"
         class="full-width q-mt-md"
         selection="multiple"
+        v-model:selected="selectedSales"
         :no-data-label="t('globals.noResults')"
     >
         <template #body-cell-statusIcons="{ row }">
@@ -275,7 +473,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 >
                     <QIcon color="primary" name="vn:claims" size="xs">
                         <QTooltip>
-                            {{ t('ticket.summary.unavailable') }}:
+                            {{ t('ticketSale.claim') }}:
                             {{ row.claim?.claimFk }}
                         </QTooltip>
                     </QIcon>
@@ -287,7 +485,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 </QIcon>
                 <QIcon v-if="row.reserved" color="primary" name="vn:reserva" size="xs">
                     <QTooltip>
-                        {{ t('ticket.summary.reserved') }}
+                        {{ t('ticketSale.reserved') }}
                     </QTooltip>
                 </QIcon>
                 <QIcon
@@ -297,7 +495,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                     size="xs"
                 >
                     <QTooltip>
-                        {{ t('ticket.summary.itemShortage') }}
+                        {{ t('ticketSale.noVisible') }}
                     </QTooltip>
                 </QIcon>
                 <QIcon
@@ -307,20 +505,15 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                     size="xs"
                 >
                     <QTooltip>
-                        {{ t('ticket.summary.hasComponentLack') }}
+                        {{ t('ticketSale.hasComponentLack') }}
                     </QTooltip>
                 </QIcon>
             </QTd>
         </template>
         <template #body-cell-picture="{ row }">
             <QTd>
-                <QImg
-                    :src="`/api/Images/catalog/50x50/${row.itemFk}/download?access_token=${token}`"
-                    spinner-color="primary"
-                    :ratio="1"
-                    height="50px"
-                    width="50px"
-                    style="border-radius: 50%"
+                <ItemPicture
+                    :url="`/api/Images/catalog/50x50/${row.itemFk}/download?access_token=${token}`"
                 />
             </QTd>
         </template>
@@ -352,6 +545,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                     hide-selected
                     option-label="name"
                     option-value="id"
+                    @update:model-value="changeQuantity(row)"
                     v-model="row.itemFk"
                 >
                     <template #option="scope">
@@ -367,7 +561,14 @@ onUnmounted(() => (stateStore.rightDrawer = false));
         </template>
         <template #body-cell-quantity="{ row }">
             <QTd @click.stop>
-                <VnInput v-model.number="row.quantity" @change="changeQuantity(row)" />
+                <VnInput
+                    v-if="isTicketEditable"
+                    v-model.number="row.quantity"
+                    @keyup.enter="changeQuantity(row)"
+                    @blur="changeQuantity(row)"
+                    @focus="edit.quantity = row.quantity"
+                />
+                <span v-else>{{ row.quantity }}</span>
             </QTd>
         </template>
         <template #body-cell-item="{ row }">
@@ -375,76 +576,100 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 <div class="column">
                     <span>{{ row.concept }}</span>
                     <span class="color-vn-label">{{ row.item?.subName }}</span>
-                    <FetchedTags :item="row.item" :max-length="6" />
+                    <FetchedTags v-if="row.item" :item="row.item" :max-length="6" />
+                    <QPopupProxy v-if="row.id && isTicketEditable">
+                        <VnInput v-model="row.concept" @change="updateConcept(row)" />
+                    </QPopupProxy>
                 </div>
-                <QPopupProxy>
-                    <VnInput v-model="row.concept" @change="updateConcept(row)" />
-                </QPopupProxy>
             </QTd>
         </template>
         <template #body-cell-price="{ row }">
-            <QTd @click.stop>
-                <QBtn flat color="primary" dense>
-                    {{ toCurrency(row.price) }}
-                </QBtn>
-                <TicketEditManaProxy
-                    :id="route.params.id"
-                    @reset-changes="resetChanges()"
-                />
+            <QTd>
+                <template v-if="isTicketEditable && row.id">
+                    <QBtn flat color="primary" dense @click="onOpenEditPricePopover(row)">
+                        {{ toCurrency(row.price) }}
+                    </QBtn>
+                    <TicketEditManaProxy
+                        ref="editPriceProxyRef"
+                        :mana="mana"
+                        :new-price="getNewPrice"
+                        @save="updatePrice(row)"
+                        @cancel="updatePrice(row)"
+                    >
+                        <VnInput
+                            v-model.number="edit.price"
+                            :label="t('ticketSale.price')"
+                            type="number"
+                        />
+                    </TicketEditManaProxy>
+                </template>
+                <span v-else>{{ toCurrency(row.price) }}</span>
             </QTd>
         </template>
         <template #body-cell-discount="{ row }">
-            <QTd @click.stop>
-                <QBtn flat color="primary" dense>
-                    {{ toPercentage(row.discount) }}
-                </QBtn>
-                <TicketEditManaProxy
-                    :id="route.params.id"
-                    @reset-changes="resetChanges()"
-                />
+            <QTd>
+                <template v-if="!isLocked && row.id">
+                    <QBtn
+                        flat
+                        color="primary"
+                        dense
+                        @click="onOpenEditDiscountPopover(row)"
+                    >
+                        {{ toPercentage(row.discount / 100) }}
+                    </QBtn>
+                    <TicketEditManaProxy
+                        :mana="mana"
+                        :new-price="getNewPrice"
+                        @save="changeDiscount(row)"
+                        @cancel="changeDiscount(row)"
+                    >
+                        <VnInput
+                            v-model.number="edit.discount"
+                            :label="t('ticketSale.discount')"
+                            type="number"
+                        />
+                    </TicketEditManaProxy>
+                </template>
+                <span v-else>{{ toPercentage(row.discount / 100) }}</span>
             </QTd>
         </template>
-        <!-- <template #body-cell-actions="{ row }">
-                        <QTd>
-                            <QIcon
-                                @click.stop="
-                                    openConfirmationModal(
-                                        t(`All it's properties will be copied`),
-                                        t('Do you want to clone this item?'),
-                                        () => cloneItem(row.id)
-                                    )
-                                "
-                                class="q-ml-sm"
-                                color="primary"
-                                name="vn:clone"
-                                size="sm"
-                            >
-                                <QTooltip>
-                                    {{ t('globals.clone') }}
-                                </QTooltip>
-                            </QIcon>
-                            <QIcon
-                                @click.stop="viewSummary(row.id, ItemSummary)"
-                                class="q-ml-md"
-                                color="primary"
-                                name="preview"
-                                size="sm"
-                            >
-                                <QTooltip class="text-no-wrap">
-                                    {{ t('Preview') }}
-                                </QTooltip>
-                            </QIcon>
-                        </QTd>
-                    </template> -->
+        <template #body-cell-history="{ row }">
+            <QTd v-if="row.hasLogs">
+                <QBtn
+                    @click.stop="goToLog(row.id)"
+                    color="primary"
+                    icon="history"
+                    size="md"
+                    flat
+                >
+                    <QTooltip class="text-no-wrap">
+                        {{ t('ticketSale.history') }}
+                    </QTooltip>
+                </QBtn>
+            </QTd>
+        </template>
+        <template #bottom-row>
+            <QBtn
+                class="cursor-pointer fill-icon q-ml-md q-my-lg"
+                color="primary"
+                icon="add_circle"
+                size="md"
+                round
+                flat
+                :disable="!isTicketEditable"
+                @click="insertRow()"
+            >
+                <QTooltip>
+                    {{ t('Add item') }}
+                </QTooltip>
+            </QBtn>
+        </template>
     </QTable>
-    <pre>{{ salesOptions }}</pre>
-    <!-- </template>
-    </VnPaginate> -->
 
     <QPageSticky :offset="[20, 20]">
-        <QBtn @click="redirectToItemCreate()" color="primary" fab icon="add" />
+        <QBtn @click="newOrderFromTicket()" color="primary" fab icon="add" />
         <QTooltip class="text-no-wrap">
-            {{ t('New item') }}
+            {{ t('Add item to basket') }}
         </QTooltip>
     </QPageSticky>
 </template>
@@ -452,4 +677,10 @@ onUnmounted(() => (stateStore.rightDrawer = false));
 <i18n>
 es:
     New item: Nuevo artículo
+    Add item to basket: Añadir artículo a la cesta
+    Change ticket state to 'Ok': Cambiar estado del ticket a 'Ok'
+    Remove lines: Eliminar líneas
+    Continue anyway?: ¿Continuar de todas formas?
+    You are going to delete lines of the ticket: Vas a eliminar lineas del ticket
+    Add item: Añadir artículo
 </i18n>
diff --git a/src/pages/Ticket/locale/en.yml b/src/pages/Ticket/locale/en.yml
index 2b59eefd4..a5819e4df 100644
--- a/src/pages/Ticket/locale/en.yml
+++ b/src/pages/Ticket/locale/en.yml
@@ -8,3 +8,12 @@ ticketSale:
     discount: Disc
     amount: Amount
     packaging: Packaging
+    subtotal: Subtotal
+    tax: VAT
+    total: Total
+    history: History
+    claim: Claim
+    reserved: Reserved
+    noVisible: Not visible
+    hasComponentLack: Component lack
+    ok: Ok
diff --git a/src/pages/Ticket/locale/es.yml b/src/pages/Ticket/locale/es.yml
index 2c2bb8b05..15c19eb14 100644
--- a/src/pages/Ticket/locale/es.yml
+++ b/src/pages/Ticket/locale/es.yml
@@ -8,5 +8,14 @@ ticketSale:
     item: Artículo
     price: Precio
     discount: Dto
-    amount: Cantidad
+    amount: Importe
     packaging: Encajado
+    subtotal: Subtotal
+    tax: IVA
+    total: Total
+    history: Historial
+    claim: Reclamación
+    reserved: Reservado
+    noVisible: No visible
+    hasComponentLack: Faltan componentes
+    ok: Ok

From 531f4bb8cd621a42ea226a879a30d6b24923ab32 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Thu, 13 Jun 2024 14:14:46 -0300
Subject: [PATCH 062/167] Avoid firing request if quantity does not change

---
 src/filters/toPercentage.js          |  1 -
 src/pages/Ticket/Card/TicketSale.vue | 12 +++++++-----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/filters/toPercentage.js b/src/filters/toPercentage.js
index e2b49ce22..9b5e953c0 100644
--- a/src/filters/toPercentage.js
+++ b/src/filters/toPercentage.js
@@ -1,7 +1,6 @@
 import { useI18n } from 'vue-i18n';
 
 export default function (value, fractionSize = 2) {
-    console.log('toPercentage value: ', value);
     if (value == null || value === '') return;
 
     const { locale } = useI18n();
diff --git a/src/pages/Ticket/Card/TicketSale.vue b/src/pages/Ticket/Card/TicketSale.vue
index a093beafa..4ae710d17 100644
--- a/src/pages/Ticket/Card/TicketSale.vue
+++ b/src/pages/Ticket/Card/TicketSale.vue
@@ -195,11 +195,13 @@ const addSale = async (sale) => {
 };
 
 const changeQuantity = (sale) => {
-    console.log('edit.quantity', edit.value.quantity);
-    console.log('sale.quantity', sale.quantity);
-    if (!sale.itemFk || sale.quantity == null) return;
+    if (
+        !sale.itemFk ||
+        sale.quantity == null ||
+        edit.value?.oldQuantity === sale.quantity
+    )
+        return;
     if (!sale.id) return addSale(sale);
-
     updateQuantity(sale);
 };
 
@@ -566,7 +568,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                     v-model.number="row.quantity"
                     @keyup.enter="changeQuantity(row)"
                     @blur="changeQuantity(row)"
-                    @focus="edit.quantity = row.quantity"
+                    @focus="edit.oldQuantity = row.quantity"
                 />
                 <span v-else>{{ row.quantity }}</span>
             </QTd>

From 8c3262bcdf93555c7ff3e232f058424ce7336efd Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Thu, 13 Jun 2024 15:36:30 -0300
Subject: [PATCH 063/167] Add change state dropdown action

---
 src/components/common/VnSelect.vue   | 11 ++++++--
 src/pages/Ticket/Card/TicketSale.vue | 40 ++++++++++++++++++++++------
 src/pages/Ticket/locale/en.yml       |  1 +
 src/pages/Ticket/locale/es.yml       |  1 +
 4 files changed, 43 insertions(+), 10 deletions(-)

diff --git a/src/components/common/VnSelect.vue b/src/components/common/VnSelect.vue
index 493f094ce..6d1ca762c 100644
--- a/src/components/common/VnSelect.vue
+++ b/src/components/common/VnSelect.vue
@@ -1,6 +1,5 @@
 <script setup>
-import { ref, toRefs, computed, watch } from 'vue';
-import { onMounted } from 'vue';
+import { ref, toRefs, computed, watch, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import FetchData from 'src/components/FetchData.vue';
 const emit = defineEmits(['update:modelValue', 'update:options']);
@@ -58,6 +57,10 @@ const $props = defineProps({
         type: [Number, String],
         default: '30',
     },
+    focusOnMount: {
+        type: Boolean,
+        default: false,
+    },
 });
 
 const { t } = useI18n();
@@ -146,6 +149,10 @@ watch(modelValue, (newValue) => {
     if (!myOptions.value.some((option) => option[optionValue.value] == newValue))
         fetchFilter(newValue);
 });
+
+onMounted(async () => {
+    if ($props.focusOnMount) setTimeout(() => vnSelectRef.value.showPopup(), 300);
+});
 </script>
 
 <template>
diff --git a/src/pages/Ticket/Card/TicketSale.vue b/src/pages/Ticket/Card/TicketSale.vue
index 4ae710d17..823a7a439 100644
--- a/src/pages/Ticket/Card/TicketSale.vue
+++ b/src/pages/Ticket/Card/TicketSale.vue
@@ -31,6 +31,7 @@ const { notify } = useNotify();
 const { openConfirmationModal } = useVnConfirm();
 const salesDataRef = ref(null);
 const editPriceProxyRef = ref(null);
+const stateBtnDropdownRef = ref(null);
 
 const arrayData = useArrayData('ticketData');
 const { store } = arrayData;
@@ -40,6 +41,7 @@ const isLocked = ref(false);
 const isTicketEditable = ref(false);
 const sales = ref([]);
 const itemsWithNameOptions = ref([]);
+const editableStatesOptions = ref([]);
 const selectedSales = ref([]);
 const mana = ref(null);
 const manaCode = ref('mana');
@@ -336,6 +338,7 @@ const goToLog = (saleId) => {
 
 const changeTicketState = async (val) => {
     try {
+        stateBtnDropdownRef.value.hide();
         const params = { ticketFk: route.params.id, code: val };
         await axios.post('Tickets/state', params);
         notify('globals.dataSaved', 'positive');
@@ -397,9 +400,38 @@ onUnmounted(() => (stateStore.rightDrawer = false));
         auto-load
         @on-fetch="(data) => (itemsWithNameOptions = data)"
     />
+    <FetchData
+        url="States/editableStates"
+        :filter="{ fields: ['code', 'name', 'id', 'alertLevel'], order: 'name ASC' }"
+        auto-load
+        @on-fetch="(data) => (editableStatesOptions = data)"
+    />
     <VnSubToolbar>
         <template #st-actions>
             <QBtnGroup push class="q-gutter-x-sm" flat>
+                <QBtn
+                    :label="t('ticketSale.ok')"
+                    color="primary"
+                    :disable="!isTicketEditable || ticketState === 'OK'"
+                    @click="changeTicketState('OK')"
+                >
+                    <QTooltip>{{ t(`Change ticket state to 'Ok'`) }}</QTooltip>
+                </QBtn>
+                <QBtnDropdown
+                    ref="stateBtnDropdownRef"
+                    color="primary"
+                    :label="t('ticketSale.state')"
+                >
+                    <VnSelect
+                        :options="editableStatesOptions"
+                        hide-selected
+                        option-label="name"
+                        option-value="code"
+                        hide-dropdown-icon
+                        focus-on-mount
+                        @update:model-value="changeTicketState"
+                    />
+                </QBtnDropdown>
                 <QBtn
                     color="primary"
                     icon="delete"
@@ -414,14 +446,6 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 >
                     <QTooltip>{{ t('Remove lines') }}</QTooltip>
                 </QBtn>
-                <QBtn
-                    :label="t('ticketSale.ok')"
-                    color="primary"
-                    :disable="!isTicketEditable || ticketState === 'OK'"
-                    @click="changeTicketState('OK')"
-                >
-                    <QTooltip>{{ t(`Change ticket state to 'Ok'`) }}</QTooltip>
-                </QBtn>
             </QBtnGroup>
         </template>
     </VnSubToolbar>
diff --git a/src/pages/Ticket/locale/en.yml b/src/pages/Ticket/locale/en.yml
index a5819e4df..34239f9b3 100644
--- a/src/pages/Ticket/locale/en.yml
+++ b/src/pages/Ticket/locale/en.yml
@@ -17,3 +17,4 @@ ticketSale:
     noVisible: Not visible
     hasComponentLack: Component lack
     ok: Ok
+    state: State
diff --git a/src/pages/Ticket/locale/es.yml b/src/pages/Ticket/locale/es.yml
index 15c19eb14..75a8cc57c 100644
--- a/src/pages/Ticket/locale/es.yml
+++ b/src/pages/Ticket/locale/es.yml
@@ -19,3 +19,4 @@ ticketSale:
     noVisible: No visible
     hasComponentLack: Faltan componentes
     ok: Ok
+    state: Estado

From 42042ea3cdf968396b8ae33434b6841e41048838 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Fri, 14 Jun 2024 09:19:51 +0200
Subject: [PATCH 064/167] fix: SkeletonTable

---
 src/components/CrudModel.vue        |  2 +-
 src/components/VnTable/VnColumn.vue | 18 ++++++++++-
 src/components/VnTable/VnFilter.vue |  5 ++-
 src/components/ui/SkeletonTable.vue | 49 ++++++++++++++++++-----------
 src/composables/useArrayData.js     |  9 ++++++
 5 files changed, 60 insertions(+), 23 deletions(-)

diff --git a/src/components/CrudModel.vue b/src/components/CrudModel.vue
index 078c95b2a..e58d342ce 100644
--- a/src/components/CrudModel.vue
+++ b/src/components/CrudModel.vue
@@ -300,7 +300,7 @@ watch(formUrl, async () => {
             ></slot>
         </template>
     </VnPaginate>
-    <SkeletonTable v-if="!formData" />
+    <SkeletonTable v-if="!formData" :columns="$attrs.columns?.length" />
     <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
         <QBtnGroup push style="column-gap: 10px">
             <slot name="moreBeforeActions" />
diff --git a/src/components/VnTable/VnColumn.vue b/src/components/VnTable/VnColumn.vue
index 17751c7dd..9f8614fe5 100644
--- a/src/components/VnTable/VnColumn.vue
+++ b/src/components/VnTable/VnColumn.vue
@@ -35,6 +35,10 @@ const $props = defineProps({
         type: Object,
         default: null,
     },
+    showLabel: {
+        type: Boolean,
+        default: null,
+    },
 });
 
 const defaultComponents = {
@@ -43,12 +47,18 @@ const defaultComponents = {
         attrs: {
             disable: !$props.isEditable,
         },
+        forceAttrs: {
+            label: $props.showLabel && $props.column.label,
+        },
     },
     number: {
         component: markRaw(VnInput),
         attrs: {
             disable: !$props.isEditable,
         },
+        forceAttrs: {
+            label: $props.showLabel && $props.column.label,
+        },
     },
     date: {
         component: markRaw(VnInputDate),
@@ -57,6 +67,9 @@ const defaultComponents = {
             disable: !$props.isEditable,
             style: 'min-width: 125px',
         },
+        forceAttrs: {
+            label: $props.showLabel && $props.column.label,
+        },
     },
     checkbox: {
         component: markRaw(QCheckbox),
@@ -74,7 +87,7 @@ const defaultComponents = {
             return defaultAttrs;
         },
         forceAttrs: {
-            label: null,
+            label: $props.showLabel && $props.column.label,
         },
     },
     select: {
@@ -82,6 +95,9 @@ const defaultComponents = {
         attrs: {
             disable: !$props.isEditable,
         },
+        forceAttrs: {
+            label: $props.showLabel && $props.column.label,
+        },
     },
     icon: {
         component: markRaw(QIcon),
diff --git a/src/components/VnTable/VnFilter.vue b/src/components/VnTable/VnFilter.vue
index e638ddd8e..1b3e3a773 100644
--- a/src/components/VnTable/VnFilter.vue
+++ b/src/components/VnTable/VnFilter.vue
@@ -108,12 +108,11 @@ async function addFilter(value) {
     value = value === '' ? undefined : value;
     let field = columnFilter.value?.name ?? $props.column.name;
 
-    let params = { [field]: value };
     if (columnFilter.value?.inWhere) {
         if (columnFilter.value.alias) field = columnFilter.value.alias + '.' + field;
-        return await arrayData.addFilterWhere(params);
+        return await arrayData.addFilterWhere({ [field]: value });
     }
-    await arrayData.addFilter({ params });
+    await arrayData.addFilter({ [field]: value });
 }
 
 function alignRow() {
diff --git a/src/components/ui/SkeletonTable.vue b/src/components/ui/SkeletonTable.vue
index e35e2c9b0..3163cd73f 100644
--- a/src/components/ui/SkeletonTable.vue
+++ b/src/components/ui/SkeletonTable.vue
@@ -1,25 +1,38 @@
+<script setup>
+defineProps({
+    columns: {
+        type: Number,
+        default: 6,
+    },
+});
+</script>
 <template>
-    <div class="q-pa-md w">
-        <div class="row q-gutter-md q-mb-md">
-            <QSkeleton type="rect" square />
-            <QSkeleton type="rect" square />
-            <QSkeleton type="rect" square />
-            <QSkeleton type="rect" square />
-            <QSkeleton type="rect" square />
-            <QSkeleton type="rect" square />
-       </div>
-       <div class="row q-gutter-md q-mb-md" v-for="n in 5" :key="n">
-            <QSkeleton type="QInput" square />
-            <QSkeleton type="QInput" square />
-            <QSkeleton type="QInput" square />
-            <QSkeleton type="QInput" square />
-            <QSkeleton type="QInput" square />
-            <QSkeleton type="QInput" square />
+    <div class="q-pa-md q-mx-md container">
+        <div class="row q-gutter-md q-mb-md justify-around no-wrap">
+            <QSkeleton type="rect" square v-for="n in columns" :key="n" class="column" />
+        </div>
+        <div
+            class="row q-gutter-md q-mb-md justify-around no-wrap"
+            v-for="n in 5"
+            :key="n"
+        >
+            <QSkeleton
+                type="QInput"
+                square
+                v-for="m in columns"
+                :key="m"
+                class="column"
+            />
         </div>
     </div>
 </template>
 <style lang="scss" scoped>
-.w {
-    width: 80vw;
+.container {
+    width: 100%;
+    overflow-x: hidden;
+}
+.column {
+    flex-shrink: 0;
+    width: 200px;
 }
 </style>
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index 6db4251e1..e59e02003 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -66,10 +66,19 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
                 }
             }
         }
+        console.log('setOptions store.url: ', store.url);
     }
 
     async function fetch({ append = false, updateRouter = true }) {
         if (!store.url) return;
+        console.log('store.url: ', store.url);
+        console.log('userOptions.url: ', userOptions.url);
+        console.log('route.params.id: ', route.params.id);
+        // const urlSplited = store.url.split('/');
+        // if (!isNaN(+urlSplited[1]) && urlSplited[1] != route.params.id) {
+        //     urlSplited[1] = route.params.id;
+        //     store.url = urlSplited.join('/');
+        // }
 
         cancelRequest();
         canceller = new AbortController();

From bea756d7cb0d7c4b7a3f631190564cdb73212f59 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Fri, 14 Jun 2024 10:53:02 +0200
Subject: [PATCH 065/167] feat(vnTable): reload data when change url

---
 src/boot/qformMixin.js             |  1 -
 src/components/CrudModel.vue       | 17 +++++++++++++----
 src/components/VnTable/VnTable.vue |  7 +------
 src/components/ui/VnPaginate.vue   | 10 +++++++---
 src/composables/useArrayData.js    |  9 ---------
 5 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/src/boot/qformMixin.js b/src/boot/qformMixin.js
index a809140b0..0bf1f9795 100644
--- a/src/boot/qformMixin.js
+++ b/src/boot/qformMixin.js
@@ -27,7 +27,6 @@ export default {
                 this.$el.addEventListener('keyup', function (evt) {
                     if (evt.key === 'Enter') {
                         const input = evt.target;
-                        console.log('input', input);
                         if (input.type == 'textarea' && evt.shiftKey) {
                             evt.preventDefault();
                             let { selectionStart, selectionEnd } = input;
diff --git a/src/components/CrudModel.vue b/src/components/CrudModel.vue
index e58d342ce..8d0935288 100644
--- a/src/components/CrudModel.vue
+++ b/src/components/CrudModel.vue
@@ -75,6 +75,7 @@ const originalData = ref();
 const vnPaginateRef = ref();
 const formData = ref();
 const saveButtonRef = ref(null);
+const watchChanges = ref();
 const formUrl = computed(() => $props.url);
 
 const emit = defineEmits(['onFetch', 'update:selected', 'saveChanges']);
@@ -98,19 +99,26 @@ async function fetch(data) {
         data.map((d) => (d.$index = $index++));
     }
 
-    originalData.value = data && JSON.parse(JSON.stringify(data));
-    formData.value = data && JSON.parse(JSON.stringify(data));
-    watch(formData, () => (hasChanges.value = true), { deep: true });
+    resetData(data);
 
     emit('onFetch', data);
     return data;
 }
 
+function resetData(data) {
+    if (!data) return;
+    originalData.value = JSON.parse(JSON.stringify(data));
+    formData.value = JSON.parse(JSON.stringify(data));
+
+    if (watchChanges.value) watchChanges.value(); //destoy watcher
+    watchChanges.value = watch(formData, () => (hasChanges.value = true), { deep: true });
+}
+
 async function reset() {
     await fetch(originalData.value);
     hasChanges.value = false;
 }
-// eslint-disable-next-line vue/no-dupe-keys
+
 function filter(value, update, filterOptions) {
     update(
         () => {
@@ -287,6 +295,7 @@ watch(formUrl, async () => {
         :url="url"
         :limit="limit"
         @on-fetch="fetch"
+        @on-change="resetData"
         :skeleton="false"
         ref="vnPaginateRef"
         v-bind="$attrs"
diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index bcca17cab..2aefc20fb 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -100,12 +100,6 @@ watch(
     { immediate: true }
 );
 
-// try without
-watch(
-    () => route.params.id,
-    () => reload(attrs)
-);
-
 watch(
     () => route.query[$props.searchUrl],
     (val) => setUserParams(val)
@@ -226,6 +220,7 @@ defineExpose({
         ref="CrudModelRef"
         :search-url="searchUrl"
         :disable-infinite-scroll="mode == 'table'"
+        @save-changes="reload"
     >
         <template #body="{ rows }">
             <QTable
diff --git a/src/components/ui/VnPaginate.vue b/src/components/ui/VnPaginate.vue
index a188a5059..625f8b845 100644
--- a/src/components/ui/VnPaginate.vue
+++ b/src/components/ui/VnPaginate.vue
@@ -68,7 +68,7 @@ const props = defineProps({
     },
 });
 
-const emit = defineEmits(['onFetch', 'onPaginate']);
+const emit = defineEmits(['onFetch', 'onPaginate', 'onChange']);
 const isLoading = ref(false);
 const pagination = ref({
     sortBy: props.order,
@@ -102,7 +102,12 @@ watch(
 
 watch(
     () => store.data,
-    (data) => emit('onFetch', data)
+    (data) => emit('onChange', data)
+);
+
+watch(
+    () => props.url,
+    (url) => fetch({ url })
 );
 
 const addFilter = async (filter, params) => {
@@ -150,7 +155,6 @@ function endPagination() {
     emit('onPaginate');
 }
 async function onLoad(index, done) {
-    console.log('onLoad?');
     if (!store.data) return done();
 
     if (store.data.length === 0 || !props.url) return done(false);
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index e59e02003..6db4251e1 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -66,19 +66,10 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
                 }
             }
         }
-        console.log('setOptions store.url: ', store.url);
     }
 
     async function fetch({ append = false, updateRouter = true }) {
         if (!store.url) return;
-        console.log('store.url: ', store.url);
-        console.log('userOptions.url: ', userOptions.url);
-        console.log('route.params.id: ', route.params.id);
-        // const urlSplited = store.url.split('/');
-        // if (!isNaN(+urlSplited[1]) && urlSplited[1] != route.params.id) {
-        //     urlSplited[1] = route.params.id;
-        //     store.url = urlSplited.join('/');
-        // }
 
         cancelRequest();
         canceller = new AbortController();

From cb87d2b41990a44a8e7fe8c87d73f87b223a51f1 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Fri, 14 Jun 2024 11:35:33 +0200
Subject: [PATCH 066/167] fix(VnFilter): filter with params

---
 src/components/VnTable/VnFilter.vue | 2 +-
 src/composables/useArrayData.js     | 5 -----
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/components/VnTable/VnFilter.vue b/src/components/VnTable/VnFilter.vue
index 1b3e3a773..c2fadbb95 100644
--- a/src/components/VnTable/VnFilter.vue
+++ b/src/components/VnTable/VnFilter.vue
@@ -112,7 +112,7 @@ async function addFilter(value) {
         if (columnFilter.value.alias) field = columnFilter.value.alias + '.' + field;
         return await arrayData.addFilterWhere({ [field]: value });
     }
-    await arrayData.addFilter({ [field]: value });
+    await arrayData.addFilter({ params: { [field]: value } });
 }
 
 function alignRow() {
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index 6db4251e1..3b50b60ad 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -18,10 +18,6 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
 
     const page = ref(1);
 
-    onUnmounted(() => {
-        destroy();
-    });
-
     onMounted(() => {
         setOptions();
         store.skip = 0;
@@ -222,7 +218,6 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
                     : path.replace(/:id.*/, '');
 
             if (route.path != to) {
-                destroy();
                 const pushUrl = { path: to };
                 if (to.endsWith('/list') || to.endsWith('/'))
                     pushUrl.query = newUrl.query;

From b282ce540e4dfb9cc64734fb92305798aca01542 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Fri, 14 Jun 2024 11:39:05 +0200
Subject: [PATCH 067/167] remove unnecessay

---
 src/pages/Customer/ExtendedList/CustomerExtendedList.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
index c164ba101..22404ac1e 100644
--- a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
+++ b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import VnTable from 'components/VnTable/VnTable.vue';
@@ -10,7 +10,6 @@ import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
 
 import { toDate } from 'src/filters';
-import RightMenu from 'src/components/common/RightMenu.vue';
 
 const { t } = useI18n();
 const router = useRouter();

From fe69521b0b600edac49c0324eb18856dc38eff64 Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Fri, 14 Jun 2024 11:44:02 +0200
Subject: [PATCH 068/167] fix: refs #6739 changed checkbox field

---
 src/components/TransferInvoiceForm.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TransferInvoiceForm.vue b/src/components/TransferInvoiceForm.vue
index d60eb7a14..b4f89fa74 100644
--- a/src/components/TransferInvoiceForm.vue
+++ b/src/components/TransferInvoiceForm.vue
@@ -48,7 +48,7 @@ const makeInvoice = async () => {
         newClientFk: transferInvoiceParams.newClientFk,
         refFk: transferInvoiceParams.refFk,
         siiTypeInvoiceOutFk: transferInvoiceParams.siiTypeInvoiceOutFk,
-        checked: checked.value,
+        makeInvoice: checked.value,
     };
 
     try {

From f86bc9791b4d6ae6e6e336ac71fc06c2717e746a Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Fri, 14 Jun 2024 11:49:29 +0200
Subject: [PATCH 069/167] fix: fix warnings

---
 src/components/VnTable/VnTable.vue                       | 3 +--
 src/components/common/VnComponent.vue                    | 6 ++----
 src/pages/Customer/ExtendedList/CustomerExtendedList.vue | 4 ++--
 3 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index 2aefc20fb..72d086911 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, computed, watch, useAttrs } from 'vue';
+import { ref, onMounted, computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
@@ -60,7 +60,6 @@ const $props = defineProps({
         default: false,
     },
 });
-const attrs = useAttrs();
 const { t } = useI18n();
 const stateStore = useStateStore();
 const route = useRoute();
diff --git a/src/components/common/VnComponent.vue b/src/components/common/VnComponent.vue
index 52cee86bb..f9848ffc3 100644
--- a/src/components/common/VnComponent.vue
+++ b/src/components/common/VnComponent.vue
@@ -4,7 +4,7 @@
             v-if="toComponent?.component"
             :is="mix(toComponent).component"
             v-bind="mix(toComponent).attrs"
-            v-on="mix(toComponent).event"
+            v-on="mix(toComponent).event ?? {}"
             v-model="model"
         />
     </span>
@@ -21,12 +21,10 @@ const $props = defineProps({
     components: {
         type: Object,
         default: () => {},
-        required: false,
     },
     value: {
-        type: Object,
+        type: [Object, Number, String],
         default: () => {},
-        required: false,
     },
 });
 
diff --git a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
index 22404ac1e..a54673a66 100644
--- a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
+++ b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, markRaw } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import VnTable from 'components/VnTable/VnTable.vue';
@@ -95,7 +95,7 @@ const columns = computed(() => [
         name: 'phone',
         cardVisible: true,
         after: {
-            component: VnLinkPhone,
+            component: markRaw(VnLinkPhone),
             props: (prop) => ({
                 'phone-number': prop.phone,
             }),

From 20e0c84035156d635b8e2fc55d8034aca426bcce Mon Sep 17 00:00:00 2001
From: pablone <pablone@verdnatura.es>
Date: Fri, 14 Jun 2024 13:10:47 +0200
Subject: [PATCH 070/167] fix: refs #7129 fix module routes

---
 src/i18n/locale/en.yml                     |  2 +-
 src/pages/Claim/Card/ClaimLines.vue        |  2 +-
 src/pages/Route/Roadmap/RoadmapSummary.vue |  3 ++-
 src/pages/Route/RouteAutonomous.vue        | 16 ++++++++++++----
 src/pages/Route/RouteRoadmap.vue           |  3 ++-
 5 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index 65a0dd3df..5f57d2707 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -992,7 +992,7 @@ route:
             viewCmr: View CMR
             downloadCmrs: Download CMRs
     columnLabels:
-        ID: Id
+        Id: Id
         vehicle: Vehicle
         description: Description
         isServed: Served
diff --git a/src/pages/Claim/Card/ClaimLines.vue b/src/pages/Claim/Card/ClaimLines.vue
index 52fbfca98..4f2f6daf0 100644
--- a/src/pages/Claim/Card/ClaimLines.vue
+++ b/src/pages/Claim/Card/ClaimLines.vue
@@ -122,7 +122,7 @@ async function fetchMana() {
 }
 
 async function updateDiscount({ saleFk, discount, canceller }) {
-    const body = { salesIds: [saleFk], newDiscount: discount };
+    const body = { salesIds: [saleFk], newDiscount: discount, manaCode: 'mana' };
     const claimId = claim.value.ticketFk;
     const query = `Tickets/${claimId}/updateDiscount`;
 
diff --git a/src/pages/Route/Roadmap/RoadmapSummary.vue b/src/pages/Route/Roadmap/RoadmapSummary.vue
index e9969c2f7..6c397bcc1 100644
--- a/src/pages/Route/Roadmap/RoadmapSummary.vue
+++ b/src/pages/Route/Roadmap/RoadmapSummary.vue
@@ -67,6 +67,7 @@ const filter = {
             },
         },
     ],
+    where: { id: entityId },
 };
 
 const openAddStopDialog = () => {
@@ -84,7 +85,7 @@ const openAddStopDialog = () => {
         <CardSummary
             data-key="RoadmapSummary"
             ref="summary"
-            :url="`Roadmaps/${entityId}`"
+            :url="`Roadmaps`"
             :filter="filter"
         >
             <template #header-left>
diff --git a/src/pages/Route/RouteAutonomous.vue b/src/pages/Route/RouteAutonomous.vue
index 4086d2b2c..8dd535d29 100644
--- a/src/pages/Route/RouteAutonomous.vue
+++ b/src/pages/Route/RouteAutonomous.vue
@@ -117,9 +117,8 @@ const columns = computed(() => [
 
 const refreshKey = ref(0);
 
-const total = ref(() => {
-    console.log('selectedRows.value: ', selectedRows.value);
-    return selectedRows.value.reduce((item) => item?.price || 0, 0);
+const total = computed(() => {
+    return selectedRows.value.reduce((sum, item) => sum + item.price, 0);
 });
 console.log('total: ', total);
 
@@ -209,9 +208,18 @@ function navigateToRouteSummary(event, row) {
                             {{ t('Create invoiceIn') }}
                         </QTooltip>
                     </QBtn>
+                    <QBtn
+                        icon="vn:invoice-in-create"
+                        color="primary"
+                        :disable="!selectedRows?.length"
+                        @click="printVariables()"
+                    >
+                        <QTooltip>
+                            {{ t('printVariables') }}
+                        </QTooltip>
+                    </QBtn>
                 </QCard>
             </div>
-            {{ total }}
             <VnPaginate
                 :key="refreshKey"
                 data-key="RouteAutonomousList"
diff --git a/src/pages/Route/RouteRoadmap.vue b/src/pages/Route/RouteRoadmap.vue
index cecc2b2c3..1987ce730 100644
--- a/src/pages/Route/RouteRoadmap.vue
+++ b/src/pages/Route/RouteRoadmap.vue
@@ -129,7 +129,8 @@ function confirmRemove() {
 }
 
 function navigateToRoadmapSummary(event, row) {
-    router.push({ name: 'RoadmapSummary', params: { id: row.id } });
+    console.log('row.id : ', row.id);
+    router.push({ name: 'RoadmapSummary', params: { id: 1 } });
 }
 </script>
 

From ac56d6d9d760b054389389480c4b4949b93c63f6 Mon Sep 17 00:00:00 2001
From: pablone <pablone@verdnatura.es>
Date: Fri, 14 Jun 2024 13:12:12 +0200
Subject: [PATCH 071/167] feat: refs #7129 fix some code and add order

---
 src/pages/Agency/AgencyList.vue       |  1 -
 src/pages/Route/Card/RouteSummary.vue | 68 ++++++++++++++-------------
 src/pages/Route/Cmr/CmrList.vue       |  8 +---
 src/pages/Route/RouteAutonomous.vue   | 11 -----
 src/pages/Route/RouteList.vue         | 39 ++++++++-------
 src/pages/Route/RouteRoadmap.vue      |  1 -
 src/pages/Route/RouteTickets.vue      |  2 +-
 7 files changed, 59 insertions(+), 71 deletions(-)

diff --git a/src/pages/Agency/AgencyList.vue b/src/pages/Agency/AgencyList.vue
index de335738d..ec6506ba0 100644
--- a/src/pages/Agency/AgencyList.vue
+++ b/src/pages/Agency/AgencyList.vue
@@ -33,7 +33,6 @@ function exprBuilder(param, value) {
                 url="Agencies"
                 order="name"
                 :expr-builder="exprBuilder"
-                auto-load
             >
                 <template #body="{ rows }">
                     <CardList
diff --git a/src/pages/Route/Card/RouteSummary.vue b/src/pages/Route/Card/RouteSummary.vue
index ac03a8231..653508fe8 100644
--- a/src/pages/Route/Card/RouteSummary.vue
+++ b/src/pages/Route/Card/RouteSummary.vue
@@ -3,14 +3,15 @@ import { computed, onMounted, onUnmounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useStateStore } from 'stores/useStateStore';
-import CardSummary from 'components/ui/CardSummary.vue';
-import VnLv from 'components/ui/VnLv.vue';
 import { QIcon } from 'quasar';
 import { dashIfEmpty, toCurrency, toDate, toHour } from 'src/filters';
+import { openBuscaman } from 'src/utils/buscaman';
+import CardSummary from 'components/ui/CardSummary.vue';
 import WorkerDescriptorProxy from 'pages/Worker/Card/WorkerDescriptorProxy.vue';
 import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
 import TicketDescriptorProxy from 'pages/Ticket/Card/TicketDescriptorProxy.vue';
-import { openBuscaman } from 'src/utils/buscaman';
+import VnLv from 'components/ui/VnLv.vue';
+import VnTitle from 'src/components/common/VnTitle.vue';
 
 const $props = defineProps({
     id: {
@@ -127,8 +128,14 @@ const ticketColumns = ref([
                 <span>{{ `${entity?.route.id} - ${entity?.route?.description}` }}</span>
             </template>
             <template #body="{ entity }">
+                <QCard class="vn-max">
+                    <VnTitle
+                        :url="`#/route/${entityId}/basic-data`"
+                        :text="t('globals.pageTitles.basicData')"
+                    />
+                </QCard>
+
                 <QCard class="vn-one">
-                    <VnLv :label="t('ID')" :value="entity?.route.id" />
                     <VnLv
                         :label="t('route.summary.date')"
                         :value="toDate(entity?.route.created)"
@@ -153,24 +160,6 @@ const ticketColumns = ref([
                         :label="t('route.summary.cost')"
                         :value="toCurrency(entity.route?.cost)"
                     />
-                </QCard>
-                <QCard class="vn-one">
-                    <VnLv
-                        :label="t('route.summary.started')"
-                        :value="toHour(entity?.route.started)"
-                    />
-                    <VnLv
-                        :label="t('route.summary.finished')"
-                        :value="toHour(entity?.route.finished)"
-                    />
-                    <VnLv
-                        :label="t('route.summary.kmStart')"
-                        :value="dashIfEmpty(entity?.route?.kmStart)"
-                    />
-                    <VnLv
-                        :label="t('route.summary.kmEnd')"
-                        :value="dashIfEmpty(entity?.route?.kmEnd)"
-                    />
                     <VnLv
                         :label="t('route.summary.volume')"
                         :value="`${dashIfEmpty(entity?.route?.m3)} / ${dashIfEmpty(
@@ -192,19 +181,32 @@ const ticketColumns = ref([
                     />
                 </QCard>
                 <QCard class="vn-one">
-                    <div class="header">
-                        {{ t('globals.description') }}
-                    </div>
-                    <p>
-                        {{ dashIfEmpty(entity?.route?.description) }}
-                    </p>
+                    <VnLv
+                        :label="t('route.summary.started')"
+                        :value="toHour(entity?.route.started)"
+                    />
+                    <VnLv
+                        :label="t('route.summary.finished')"
+                        :value="toHour(entity?.route.finished)"
+                    />
+                    <VnLv
+                        :label="t('route.summary.kmStart')"
+                        :value="dashIfEmpty(entity?.route?.kmStart)"
+                    />
+                    <VnLv
+                        :label="t('route.summary.kmEnd')"
+                        :value="dashIfEmpty(entity?.route?.kmEnd)"
+                    />
+                    <VnLv
+                        :label="t('globals.description')"
+                        :value="dashIfEmpty(entity?.route?.description)"
+                    />
                 </QCard>
-
                 <QCard class="vn-max">
-                    <a class="header" :href="`#/route/${entityId}/tickets`">
-                        {{ t('route.summary.tickets') }}
-                        <QIcon name="open_in_new" color="primary" />
-                    </a>
+                    <VnTitle
+                        :url="`#/route/${entityId}/tickets`"
+                        :text="t('route.summary.tickets')"
+                    />
                     <QTable
                         :columns="ticketColumns"
                         :rows="entity?.tickets"
diff --git a/src/pages/Route/Cmr/CmrList.vue b/src/pages/Route/Cmr/CmrList.vue
index cbfc3751a..19c352ac1 100644
--- a/src/pages/Route/Cmr/CmrList.vue
+++ b/src/pages/Route/Cmr/CmrList.vue
@@ -105,13 +105,7 @@ function downloadPdfs() {
     </RightMenu>
     <div class="column items-center">
         <div class="list">
-            <VnPaginate
-                data-key="CmrList"
-                :url="`Routes/cmrs`"
-                order="cmrFk DESC"
-                limit="null"
-                auto-load
-            >
+            <VnPaginate data-key="CmrList" :url="`Routes/cmrs`" order="cmrFk DESC">
                 <template #body="{ rows }">
                     <QTable
                         :columns="columns"
diff --git a/src/pages/Route/RouteAutonomous.vue b/src/pages/Route/RouteAutonomous.vue
index 8dd535d29..91a2e33d5 100644
--- a/src/pages/Route/RouteAutonomous.vue
+++ b/src/pages/Route/RouteAutonomous.vue
@@ -208,16 +208,6 @@ function navigateToRouteSummary(event, row) {
                             {{ t('Create invoiceIn') }}
                         </QTooltip>
                     </QBtn>
-                    <QBtn
-                        icon="vn:invoice-in-create"
-                        color="primary"
-                        :disable="!selectedRows?.length"
-                        @click="printVariables()"
-                    >
-                        <QTooltip>
-                            {{ t('printVariables') }}
-                        </QTooltip>
-                    </QBtn>
                 </QCard>
             </div>
             <VnPaginate
@@ -225,7 +215,6 @@ function navigateToRouteSummary(event, row) {
                 data-key="RouteAutonomousList"
                 url="AgencyTerms/filter"
                 :limit="20"
-                auto-load
             >
                 <template #body="{ rows }">
                     <div class="q-pa-md">
diff --git a/src/pages/Route/RouteList.vue b/src/pages/Route/RouteList.vue
index 3e4d8e18a..edec43fec 100644
--- a/src/pages/Route/RouteList.vue
+++ b/src/pages/Route/RouteList.vue
@@ -1,32 +1,34 @@
 <script setup>
-import VnPaginate from 'components/ui/VnPaginate.vue';
 import { useStateStore } from 'stores/useStateStore';
 import { useI18n } from 'vue-i18n';
-import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { dashIfEmpty, toHour } from 'src/filters';
-import VnSelect from 'components/common/VnSelect.vue';
-import FetchData from 'components/FetchData.vue';
 import { useValidator } from 'composables/useValidator';
+import { useSession } from 'composables/useSession';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+import { useArrayData } from 'composables/useArrayData';
+import { useQuasar } from 'quasar';
+
+import axios from 'axios';
+import RouteSearchbar from 'pages/Route/Card/RouteSearchbar.vue';
+import FetchData from 'components/FetchData.vue';
+import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
+import RouteSummary from 'pages/Route/Card/RouteSummary.vue';
+import RouteFilter from 'pages/Route/Card/RouteFilter.vue';
+import RouteListTicketsDialog from 'pages/Route/Card/RouteListTicketsDialog.vue';
+import RightMenu from 'src/components/common/RightMenu.vue';
+
+import VnPaginate from 'components/ui/VnPaginate.vue';
+import VnSelect from 'components/common/VnSelect.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 import VnInput from 'components/common/VnInput.vue';
 import VnInputTime from 'components/common/VnInputTime.vue';
-import axios from 'axios';
-import RouteSearchbar from 'pages/Route/Card/RouteSearchbar.vue';
-import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
-import RouteFilter from 'pages/Route/Card/RouteFilter.vue';
-import RouteSummary from 'pages/Route/Card/RouteSummary.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
-import { useSession } from 'composables/useSession';
-import { useSummaryDialog } from 'src/composables/useSummaryDialog';
-import RouteListTicketsDialog from 'pages/Route/Card/RouteListTicketsDialog.vue';
-import { useQuasar } from 'quasar';
-import { useArrayData } from 'composables/useArrayData';
-import RightMenu from 'src/components/common/RightMenu.vue';
 
 const { t } = useI18n();
 const { validate } = useValidator();
 const { viewSummary } = useSummaryDialog();
-const stateStore = useStateStore();
 const quasar = useQuasar();
 const session = useSession();
 const paginate = ref();
@@ -211,6 +213,10 @@ onMounted(async () => {
                 <QBtn flat :label="t('Cancel')" v-close-popup class="text-primary" />
                 <QBtn color="primary" v-close-popup @click="cloneRoutes">
                     {{ t('globals.clone') }}
+                    <VnLv
+                        :label="t('route.summary.packages')"
+                        :value="getTotalPackages(entity.tickets)"
+                    />
                 </QBtn>
             </QCardActions>
         </QCard>
@@ -270,7 +276,6 @@ onMounted(async () => {
                 url="Routes/filter"
                 :order="['created ASC', 'started ASC', 'id ASC']"
                 :limit="20"
-                auto-load
             >
                 <template #body="{ rows }">
                     <div class="q-pa-md route-table">
diff --git a/src/pages/Route/RouteRoadmap.vue b/src/pages/Route/RouteRoadmap.vue
index 1987ce730..602c1725c 100644
--- a/src/pages/Route/RouteRoadmap.vue
+++ b/src/pages/Route/RouteRoadmap.vue
@@ -194,7 +194,6 @@ function navigateToRoadmapSummary(event, row) {
                 url="Roadmaps"
                 :limit="20"
                 :filter="filter"
-                auto-load
             >
                 <template #body="{ rows }">
                     <div class="q-pa-md">
diff --git a/src/pages/Route/RouteTickets.vue b/src/pages/Route/RouteTickets.vue
index ba3e855d6..fc9087032 100644
--- a/src/pages/Route/RouteTickets.vue
+++ b/src/pages/Route/RouteTickets.vue
@@ -141,7 +141,7 @@ const setOrderedPriority = async () => {
 };
 
 const sortRoutes = async () => {
-    await axios.get(`Routes/${route.params?.id}/guessPriority/`);
+    await axios.patch(`Routes/${route.params?.id}/guessPriority/`);
     refreshKey.value++;
 };
 

From 05d7a61468e51538b3cd54b6c207ae6578214025 Mon Sep 17 00:00:00 2001
From: pablone <pablone@verdnatura.es>
Date: Fri, 14 Jun 2024 14:40:40 +0200
Subject: [PATCH 072/167] fix: refs #7129 remove fix from claim lines

---
 src/pages/Claim/Card/ClaimLines.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Claim/Card/ClaimLines.vue b/src/pages/Claim/Card/ClaimLines.vue
index 4f2f6daf0..52fbfca98 100644
--- a/src/pages/Claim/Card/ClaimLines.vue
+++ b/src/pages/Claim/Card/ClaimLines.vue
@@ -122,7 +122,7 @@ async function fetchMana() {
 }
 
 async function updateDiscount({ saleFk, discount, canceller }) {
-    const body = { salesIds: [saleFk], newDiscount: discount, manaCode: 'mana' };
+    const body = { salesIds: [saleFk], newDiscount: discount };
     const claimId = claim.value.ticketFk;
     const query = `Tickets/${claimId}/updateDiscount`;
 

From d9d54a351f6bd6b2fe12e94dabda40174b6d79ee Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Fri, 14 Jun 2024 14:54:52 +0200
Subject: [PATCH 073/167] fix(VnTable): showLabel

---
 src/components/VnTable/VnTable.vue | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index 72d086911..8c781ba26 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -385,15 +385,24 @@ defineExpose({
                                         :key="col.name"
                                         class="fields"
                                     >
-                                        <VnLv :label="col.label && `${col.label}:`">
+                                        <VnLv
+                                            :label="
+                                                !col.component &&
+                                                col.label &&
+                                                `${col.label}:`
+                                            "
+                                        >
                                             <template #value>
                                                 <span
                                                     @click="stopEventPropagation($event)"
                                                 >
                                                     <VnTableColumn
                                                         :column="col"
-                                                        :row
+                                                        :row="row"
+                                                        :is-editable="false"
+                                                        v-model="row[col.name]"
                                                         component-prop="columnField"
+                                                        :show-label="true"
                                                     />
                                                 </span>
                                             </template>
@@ -450,6 +459,7 @@ defineExpose({
                         :row="{}"
                         default="input"
                         v-model="data[column.name]"
+                        :show-label="true"
                     />
                     <slot name="more-create-dialog" :data="data" />
                 </div>

From 0666aeb166b0921e1634f8a65bd0e56e14e13f21 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Fri, 14 Jun 2024 15:04:02 -0300
Subject: [PATCH 074/167] Btn dropdown more actions

---
 src/components/common/VnSmsDialog.vue         |   5 +-
 src/pages/Ticket/Card/TicketEditMana.vue      |  16 +-
 src/pages/Ticket/Card/TicketSale.vue          |  31 +-
 .../Ticket/Card/TicketSaleMoreActions.vue     | 289 ++++++++++++++++++
 src/pages/Ticket/locale/en.yml                |   1 +
 src/pages/Ticket/locale/es.yml                |   1 +
 6 files changed, 322 insertions(+), 21 deletions(-)
 create mode 100644 src/pages/Ticket/Card/TicketSaleMoreActions.vue

diff --git a/src/components/common/VnSmsDialog.vue b/src/components/common/VnSmsDialog.vue
index 5b192f95d..f04ea2cb6 100644
--- a/src/components/common/VnSmsDialog.vue
+++ b/src/components/common/VnSmsDialog.vue
@@ -184,6 +184,7 @@ en:
         minAmount: 'A minimum amount of 50€ (VAT excluded) is required for your order
             { orderId } of { shipped } to receive it without additional shipping costs.'
         orderChanges: 'Order {orderId} of { shipped }: { changes }'
+        productNotAvailable: 'Verdnatura communicates: Your order {ticketFk} with reception date on {landed}. {notAvailables} not available. Sorry for the inconvenience.'
     en: English
     es: Spanish
     fr: French
@@ -203,6 +204,7 @@ es:
             Te recomendamos amplíes para no generar costes extra, provocarán un incremento de tu tarifa.
             ¡Un saludo!'
         orderChanges: 'Pedido {orderId} con llegada estimada día { landing }: { changes }'
+        productNotAvailable: 'Verdnatura le comunica: Pedido {ticketFk} con fecha de recepción {landed}. {notAvailables} no disponible/s. Disculpe las molestias.'
     en: Inglés
     es: Español
     fr: Francés
@@ -222,6 +224,7 @@ fr:
             Montant minimum nécessaire de 50 euros pour recevoir la commande { orderId } livraison { landing }.
             Merci.'
         orderChanges: 'Commande {orderId} livraison {landing} indisponible/s. Désolés pour le dérangement.'
+        productNotAvailable: 'Verdnatura communique : Votre commande {ticketFk} avec date de réception le {landed}. {notAvailables} non disponible. Nous sommes désolés pour les inconvénients.'
     en: Anglais
     es: Espagnol
     fr: Français
@@ -240,7 +243,7 @@ pt:
         minAmount: 'É necessário um valor mínimo de 50€ (sem IVA) em seu pedido
             { orderId } do dia { landing } para recebê-lo sem custos de envio adicionais.'
         orderChanges: 'Pedido { orderId } com chegada dia { landing }: { changes }'
-    en: Inglês
+        productNotAvailable: 'Verdnatura comunica: Seu pedido {ticketFk} com data de recepção em {landed}. {notAvailables} não disponível/eis. Desculpe pelo transtorno.'
     es: Espanhol
     fr: Francês
     pt: Português
diff --git a/src/pages/Ticket/Card/TicketEditMana.vue b/src/pages/Ticket/Card/TicketEditMana.vue
index dc082d660..721057515 100644
--- a/src/pages/Ticket/Card/TicketEditMana.vue
+++ b/src/pages/Ticket/Card/TicketEditMana.vue
@@ -5,10 +5,6 @@ import { useI18n } from 'vue-i18n';
 import { toCurrency } from 'src/filters';
 
 const $props = defineProps({
-    id: {
-        type: String,
-        required: true,
-    },
     mana: {
         type: Number,
         default: null,
@@ -38,16 +34,16 @@ const cancel = () => {
 <template>
     <QPopupProxy ref="QPopupProxyRef">
         <div class="container">
-            <QSpinner v-if="!$props.mana" color="orange" size="md" />
+            <QSpinner v-if="!mana" color="orange" size="md" />
             <div v-else>
-                <div class="header">Mana: {{ toCurrency($props.mana) }}</div>
+                <div class="header">Mana: {{ toCurrency(mana) }}</div>
                 <div class="q-pa-md">
                     <slot />
-                    <div class="column items-center q-mt-lg">
+                    <div v-if="newPrice" class="column items-center q-mt-lg">
                         <span class="text-primary">{{ t('New price') }}</span>
-                        <span class="text-subtitle1">{{
-                            toCurrency($props.newPrice)
-                        }}</span>
+                        <span class="text-subtitle1">
+                            {{ toCurrency($props.newPrice) }}
+                        </span>
                     </div>
                 </div>
             </div>
diff --git a/src/pages/Ticket/Card/TicketSale.vue b/src/pages/Ticket/Card/TicketSale.vue
index 823a7a439..685660782 100644
--- a/src/pages/Ticket/Card/TicketSale.vue
+++ b/src/pages/Ticket/Card/TicketSale.vue
@@ -12,6 +12,7 @@ import TicketEditManaProxy from './TicketEditMana.vue';
 import ItemPicture from 'src/components/ui/ItemPicture.vue';
 import RightMenu from 'src/components/common/RightMenu.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import TicketSaleMoreActions from './TicketSaleMoreActions.vue';
 
 import { useStateStore } from 'stores/useStateStore';
 import { useSession } from 'composables/useSession';
@@ -232,10 +233,10 @@ const getMana = async () => {
     await getUsesMana();
 };
 
-const selectedValidSales = () => {
+const selectedValidSales = computed(() => {
     if (!sales.value) return;
     return selectedSales.value.filter((sale) => sale.id != undefined);
-};
+});
 
 const onOpenEditPricePopover = async (sale) => {
     await getMana();
@@ -256,7 +257,7 @@ const onOpenEditDiscountPopover = async (sale) => {
     } else {
         edit.value = {
             discount: null,
-            sales: selectedValidSales(),
+            sales: selectedValidSales.value,
         };
     }
 };
@@ -281,16 +282,17 @@ const changeDiscount = (sale) => {
     if (newDiscount != null && newDiscount != sale.discount) updateDiscount([sale]);
 };
 
-const updateDiscount = async (sales) => {
+const updateDiscount = async (sales, newDiscount = null) => {
     const saleIds = sales.map((sale) => sale.id);
+    const _newDiscount = newDiscount || edit.value.discount;
     const params = {
         salesIds: saleIds,
-        newDiscount: edit.value.discount,
+        newDiscount: _newDiscount,
         manaCode: manaCode.value,
     };
     await axios.post(`Tickets/${route.params.id}/updateDiscount`, params);
     notify('globals.dataSaved', 'positive');
-    for (let sale of sales) sale.discount = edit.value.discount;
+    for (let sale of sales) sale.discount = _newDiscount;
     edit.value = { ...DEFAULT_EDIT };
 };
 
@@ -357,8 +359,7 @@ const removeSelectedSales = () => {
 
 const removeSales = async () => {
     try {
-        const sales = selectedValidSales();
-        const params = { sales: sales, ticketId: store.data.id };
+        const params = { sales: selectedValidSales.value, ticketId: store.data.id };
         await axios.post('Sales/deleteSales', params);
         removeSelectedSales();
         notify('globals.dataSaved', 'positive');
@@ -421,6 +422,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                     ref="stateBtnDropdownRef"
                     color="primary"
                     :label="t('ticketSale.state')"
+                    :disable="!isTicketEditable"
                 >
                     <VnSelect
                         :options="editableStatesOptions"
@@ -432,6 +434,16 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                         @update:model-value="changeTicketState"
                     />
                 </QBtnDropdown>
+                <TicketSaleMoreActions
+                    :ticket="store.data"
+                    :is-ticket-editable="isTicketEditable"
+                    :sales="selectedValidSales"
+                    :disable="!selectedSales.length"
+                    :mana="mana"
+                    :ticket-config="ticketConfig"
+                    @get-mana="getMana()"
+                    @update-discounts="updateDiscount"
+                />
                 <QBtn
                     color="primary"
                     icon="delete"
@@ -620,7 +632,6 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                         :mana="mana"
                         :new-price="getNewPrice"
                         @save="updatePrice(row)"
-                        @cancel="updatePrice(row)"
                     >
                         <VnInput
                             v-model.number="edit.price"
@@ -647,7 +658,6 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                         :mana="mana"
                         :new-price="getNewPrice"
                         @save="changeDiscount(row)"
-                        @cancel="changeDiscount(row)"
                     >
                         <VnInput
                             v-model.number="edit.discount"
@@ -709,4 +719,5 @@ es:
     Continue anyway?: ¿Continuar de todas formas?
     You are going to delete lines of the ticket: Vas a eliminar lineas del ticket
     Add item: Añadir artículo
+    Select lines to see the options: Selecciona líneas para ver las opciones
 </i18n>
diff --git a/src/pages/Ticket/Card/TicketSaleMoreActions.vue b/src/pages/Ticket/Card/TicketSaleMoreActions.vue
new file mode 100644
index 000000000..9ec6b303a
--- /dev/null
+++ b/src/pages/Ticket/Card/TicketSaleMoreActions.vue
@@ -0,0 +1,289 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useQuasar } from 'quasar';
+import { useRouter } from 'vue-router';
+
+import VnSmsDialog from 'components/common/VnSmsDialog.vue';
+import TicketEditManaProxy from './TicketEditMana.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+
+import useNotify from 'src/composables/useNotify.js';
+import axios from 'axios';
+import { toDateFormat } from 'src/filters/date';
+import { useRole } from 'src/composables/useRole';
+import { useVnConfirm } from 'composables/useVnConfirm';
+
+const emit = defineEmits(['updateDiscounts', 'getMana']);
+
+const props = defineProps({
+    disable: {
+        type: Boolean,
+        default: false,
+    },
+    isTicketEditable: {
+        type: Boolean,
+        default: false,
+    },
+    ticket: {
+        type: Object,
+        required: true,
+        default: () => {},
+    },
+    sales: {
+        type: Array,
+        default: () => [],
+    },
+    mana: {
+        type: Number,
+        default: null,
+    },
+    ticketConfig: {
+        type: Array,
+        default: () => [],
+    },
+});
+
+const router = useRouter();
+const { t } = useI18n();
+const { dialog } = useQuasar();
+const { notify } = useNotify();
+const role = useRole();
+const btnDropdownRef = ref(null);
+const { openConfirmationModal } = useVnConfirm();
+
+const newDiscount = ref(null);
+const ticket = computed(() => props.ticket);
+const isClaimable = computed(() => {
+    if (ticket.value) {
+        const landedPlusWeek = new Date(ticket.value.landed);
+        landedPlusWeek.setDate(landedPlusWeek.getDate() + 7);
+        const hasClaimManagerRole = role.hasAny('claimManager');
+        return landedPlusWeek >= Date.vnNew() || hasClaimManagerRole;
+    }
+    return false;
+});
+const hasReserves = computed(() => props.sales.some((sale) => sale.reserved == true));
+
+const sendSms = async (params) => {
+    await axios.post(`Tickets/${ticket.value.id}/sendSms`, params);
+    notify(t('SMS sent'), 'positive');
+};
+
+const showSmsDialog = (template) => {
+    const address = ticket.value.address;
+    const client = ticket.value.client;
+    const phone = address.mobile || address.phone || client.mobile || client.phone;
+    const items = props.sales.map((sale) => {
+        return `${sale.quantity} ${sale.concept}`;
+    });
+
+    const notAvailables = items.join(', ');
+
+    const data = {
+        ticketId: ticket.value.id,
+        destinationFk: ticket.value.clientFk,
+        destination: phone,
+        ticketFk: ticket.value.id,
+        created: ticket.value.updated,
+        landed: toDateFormat(ticket.value.landed),
+        notAvailables,
+    };
+
+    dialog({
+        component: VnSmsDialog,
+        componentProps: {
+            phone: phone,
+            template: template,
+            locale: client?.user?.lang ?? 'default_locale',
+            data: data,
+            promise: sendSms,
+        },
+    });
+};
+
+const calculateSalePrice = async () => {
+    if (!props.sales) return;
+
+    await axios.post(`Sales/recalculatePrice`, props.sales);
+    notify(t('globals.dataSaved'), 'positive');
+};
+
+const changeMultipleDiscount = () => {
+    const hasChanges = props.sales.some((sale) => {
+        return sale.discount != newDiscount.value;
+    });
+
+    if (newDiscount.value != null && hasChanges)
+        emit('updateDiscounts', props.sales, newDiscount.value);
+    btnDropdownRef.value.hide();
+};
+
+const createClaim = () => {
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+    const timeDifference = today.getTime() - new Date(ticket.value.landed).getTime();
+    const pastDays = Math.floor(timeDifference / 86400000);
+    if (pastDays >= props.ticketConfig[0].daysForWarningClaim)
+        openConfirmationModal(
+            t('Claim out of time'),
+            t('Do you want to continue?'),
+            onCreateClaimAccepted
+        );
+    else
+        openConfirmationModal(t('Do you want to create a claim?'), onCreateClaimAccepted);
+};
+
+const onCreateClaimAccepted = async () => {
+    try {
+        const params = { ticketId: ticket.value.id, sales: props.sales };
+        const { data } = await axios.post(`Claims/createFromSales`, params);
+        router.push({ name: 'ClaimBasicData', params: { id: data.id } });
+    } catch (error) {
+        console.error('Error creating claim: ', error);
+    }
+};
+
+const setReserved = async (reserved) => {
+    const params = { ticketId: ticket.value.id, sales: props.sales, reserved: reserved };
+    await axios.post(`Sales/reserve`, params);
+    props.sales.forEach((sale) => {
+        sale.reserved = reserved;
+    });
+};
+
+const createRefund = async (withWarehouse) => {
+    if (!props.sales) return;
+
+    const salesIds = props.sales.map((sale) => sale.id);
+    const params = { salesIds: salesIds, withWarehouse: withWarehouse, negative: true };
+    const { data } = await axios.post('Sales/clone', params);
+    const [refundTicket] = data;
+    notify(t('refundTicketCreated', { ticketId: refundTicket.id }), 'positive');
+    router.push({ name: 'TicketSale', params: { id: refundTicket.id } });
+};
+</script>
+
+<template>
+    <QBtnDropdown
+        ref="btnDropdownRef"
+        color="primary"
+        :label="t('ticketSale.more')"
+        :disable="disable"
+    >
+        <template #label>
+            <QTooltip>{{ t('Select lines to see the options') }}</QTooltip>
+        </template>
+        <QList>
+            <QItem
+                v-if="ticket"
+                clickable
+                v-close-popup
+                v-ripple
+                @click="showSmsDialog('productNotAvailable')"
+            >
+                <QItemSection>
+                    <QItemLabel>{{ t('Send shortage SMS') }}</QItemLabel>
+                </QItemSection>
+            </QItem>
+            <QItem
+                v-if="isTicketEditable"
+                clickable
+                v-close-popup
+                v-ripple
+                @click="calculateSalePrice()"
+            >
+                <QItemSection>
+                    <QItemLabel>{{ t('Recalculate price') }}</QItemLabel>
+                </QItemSection>
+            </QItem>
+            <QItem clickable v-ripple @click="emit('getMana')">
+                <QItemSection>
+                    <QItemLabel>{{ t('Update discount') }}</QItemLabel>
+                </QItemSection>
+                <TicketEditManaProxy :mana="props.mana" @save="changeMultipleDiscount()">
+                    <VnInput
+                        v-model.number="newDiscount"
+                        :label="t('ticketSale.discount')"
+                        type="number"
+                    />
+                </TicketEditManaProxy>
+            </QItem>
+            <QItem
+                v-if="isClaimable"
+                clickable
+                v-close-popup
+                v-ripple
+                @click="createClaim()"
+            >
+                <QItemSection>
+                    <QItemLabel>{{ t('Add claim') }}</QItemLabel>
+                </QItemSection>
+            </QItem>
+            <QItem
+                v-if="isTicketEditable"
+                clickable
+                v-close-popup
+                v-ripple
+                @click="setReserved(true)"
+            >
+                <QItemSection>
+                    <QItemLabel>{{ t('Mark as reserved') }}</QItemLabel>
+                </QItemSection>
+            </QItem>
+            <QItem
+                v-if="isTicketEditable && hasReserves"
+                clickable
+                v-close-popup
+                v-ripple
+                @click="setReserved(false)"
+            >
+                <QItemSection>
+                    <QItemLabel>{{ t('Unmark as reserved') }}</QItemLabel>
+                </QItemSection>
+            </QItem>
+            <QItem clickable v-ripple>
+                <QItemSection>
+                    <QItemLabel>{{ t('Refund...') }}</QItemLabel>
+                </QItemSection>
+                <QItemSection side>
+                    <QIcon name="keyboard_arrow_right" />
+                </QItemSection>
+                <QMenu anchor="top end" self="top start" auto-close bordered>
+                    <QList>
+                        <QItem v-ripple clickable @click="createRefund(true)">
+                            <QItemSection>
+                                {{ t('with warehouse') }}
+                            </QItemSection>
+                        </QItem>
+                        <QItem v-ripple clickable @click="createRefund(false)">
+                            <QItemSection>
+                                {{ t('without warehouse') }}
+                            </QItemSection>
+                        </QItem>
+                    </QList>
+                </QMenu>
+            </QItem>
+        </QList>
+    </QBtnDropdown>
+</template>
+
+<i18n>
+en:
+    refundTicketCreated: 'The following refund ticket have been created {ticketId}'
+es:
+    SMS sent: SMS enviado
+    Send shortage SMS: Enviar SMS faltas
+    Recalculate price: Recalcular precio
+    Update discount: Actualizar descuento
+    Add claim: Crear reclamación
+    Mark as reserved: Marcar como reservado
+    Unmark as reserved: Desmarcar como reservado
+    Refund...: Abono...
+    with warehouse: con almacén
+    without warehouse: sin almacén
+    Claim out of time: Reclamación fuera de plazo
+    Do you want to continue?: ¿Desea continuar?
+    Do you want to create a claim?: ¿Quieres crear una reclamación?
+    refundTicketCreated: 'The following refund ticket have been created: {ticketId}'
+</i18n>
diff --git a/src/pages/Ticket/locale/en.yml b/src/pages/Ticket/locale/en.yml
index 34239f9b3..0a3c36636 100644
--- a/src/pages/Ticket/locale/en.yml
+++ b/src/pages/Ticket/locale/en.yml
@@ -18,3 +18,4 @@ ticketSale:
     hasComponentLack: Component lack
     ok: Ok
     state: State
+    more: More
diff --git a/src/pages/Ticket/locale/es.yml b/src/pages/Ticket/locale/es.yml
index 75a8cc57c..2e6bc947e 100644
--- a/src/pages/Ticket/locale/es.yml
+++ b/src/pages/Ticket/locale/es.yml
@@ -20,3 +20,4 @@ ticketSale:
     hasComponentLack: Faltan componentes
     ok: Ok
     state: Estado
+    more: Más

From acc899b8510b86db1861e1e0a39943e27fb93d41 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Sat, 15 Jun 2024 11:28:49 -0300
Subject: [PATCH 075/167] Transfer

---
 src/components/common/VnInput.vue        |   6 +-
 src/pages/Ticket/Card/TicketSale.vue     |  40 +++++
 src/pages/Ticket/Card/TicketTransfer.vue | 195 +++++++++++++++++++++++
 src/pages/Ticket/locale/en.yml           |   3 +
 src/pages/Ticket/locale/es.yml           |   3 +
 5 files changed, 246 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/Ticket/Card/TicketTransfer.vue

diff --git a/src/components/common/VnInput.vue b/src/components/common/VnInput.vue
index c84a55122..3e0a20f03 100644
--- a/src/components/common/VnInput.vue
+++ b/src/components/common/VnInput.vue
@@ -17,6 +17,10 @@ const $props = defineProps({
         type: String,
         default: '',
     },
+    clearable: {
+        type: Boolean,
+        default: true,
+    },
 });
 
 const { t } = useI18n();
@@ -84,7 +88,7 @@ const inputRules = [
                 <QIcon
                     name="close"
                     size="xs"
-                    v-if="hover && value && !$attrs.disabled"
+                    v-if="hover && value && !$attrs.disabled && $props.clearable"
                     @click="value = null"
                 ></QIcon>
                 <QIcon v-if="info" name="info">
diff --git a/src/pages/Ticket/Card/TicketSale.vue b/src/pages/Ticket/Card/TicketSale.vue
index 685660782..92b424505 100644
--- a/src/pages/Ticket/Card/TicketSale.vue
+++ b/src/pages/Ticket/Card/TicketSale.vue
@@ -13,6 +13,7 @@ import ItemPicture from 'src/components/ui/ItemPicture.vue';
 import RightMenu from 'src/components/common/RightMenu.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import TicketSaleMoreActions from './TicketSaleMoreActions.vue';
+import TicketTransfer from './TicketTransfer.vue';
 
 import { useStateStore } from 'stores/useStateStore';
 import { useSession } from 'composables/useSession';
@@ -47,6 +48,10 @@ const selectedSales = ref([]);
 const mana = ref(null);
 const manaCode = ref('mana');
 const ticketState = computed(() => store.data?.ticketState?.state?.code);
+const transfer = ref({
+    lastActiveTickets: [],
+    sales: [],
+});
 
 const columns = computed(() => [
     {
@@ -370,6 +375,27 @@ const removeSales = async () => {
 
 const insertRow = () => sales.value.push({ ...DEFAULT_EDIT });
 
+const setTransferParams = async () => {
+    try {
+        const checkedSales = JSON.parse(JSON.stringify(selectedSales.value));
+        transfer.value = {
+            lastActiveTickets: [],
+            sales: checkedSales,
+        };
+
+        const params = { ticketId: store.data.id };
+        const { data } = await axios.get(
+            `clients/${store.data.clientFk}/lastActiveTickets`,
+            {
+                params,
+            }
+        );
+        transfer.value.lastActiveTickets = data;
+    } catch (err) {
+        console.error('Error setting transfer params', err);
+    }
+};
+
 onMounted(async () => {
     stateStore.rightDrawer = true;
     await getConfig();
@@ -458,6 +484,19 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 >
                     <QTooltip>{{ t('Remove lines') }}</QTooltip>
                 </QBtn>
+                <QBtn
+                    color="primary"
+                    icon="vn:splitline"
+                    :disable="!isTicketEditable || !selectedSales.length"
+                    @click="setTransferParams()"
+                >
+                    <QTooltip>{{ t('Transfer lines') }}</QTooltip>
+                    <TicketTransfer
+                        :transfer="transfer"
+                        :ticket="store.data"
+                        @refresh-data="resetChanges()"
+                    />
+                </QBtn>
             </QBtnGroup>
         </template>
     </VnSubToolbar>
@@ -720,4 +759,5 @@ es:
     You are going to delete lines of the ticket: Vas a eliminar lineas del ticket
     Add item: Añadir artículo
     Select lines to see the options: Selecciona líneas para ver las opciones
+    Transfer lines: Transferir líneas
 </i18n>
diff --git a/src/pages/Ticket/Card/TicketTransfer.vue b/src/pages/Ticket/Card/TicketTransfer.vue
new file mode 100644
index 000000000..b4c5babc6
--- /dev/null
+++ b/src/pages/Ticket/Card/TicketTransfer.vue
@@ -0,0 +1,195 @@
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+
+import VnInput from 'src/components/common/VnInput.vue';
+
+import { toDateFormat } from 'src/filters/date.js';
+import axios from 'axios';
+
+const $props = defineProps({
+    mana: {
+        type: Number,
+        default: null,
+    },
+    newPrice: {
+        type: Number,
+        default: 0,
+    },
+    transfer: {
+        type: Object,
+        default: () => {},
+    },
+    ticket: {
+        type: Object,
+        default: () => {},
+    },
+});
+
+const emit = defineEmits(['refreshData']);
+
+const router = useRouter();
+const { t } = useI18n();
+const QPopupProxyRef = ref(null);
+
+const _transfer = ref(null);
+
+const transferLinesColumns = computed(() => [
+    {
+        label: t('ticketSale.id'),
+        name: 'itemFk',
+        field: 'itemFk',
+        align: 'left',
+    },
+    {
+        label: t('ticketSale.item'),
+        name: 'item',
+        field: 'concept',
+        align: 'left',
+    },
+    {
+        label: t('ticketSale.quantity'),
+        name: 'quantity',
+        field: 'quantity',
+        align: 'left',
+    },
+]);
+
+const destinationTicketColumns = computed(() => [
+    {
+        label: t('ticketSale.id'),
+        name: 'id',
+        field: 'id',
+        align: 'left',
+    },
+    {
+        label: t('ticketSale.shipped'),
+        name: 'item',
+        field: 'shipped',
+        align: 'left',
+        format: (val) => toDateFormat(val),
+    },
+    {
+        label: t('ticketSale.agency'),
+        name: 'agency',
+        field: 'agencyName',
+        align: 'left',
+    },
+    {
+        label: t('ticketSale.address'),
+        name: 'address',
+        field: 'address',
+        align: 'left',
+    },
+]);
+
+const transferSales = async (ticketId) => {
+    const params = {
+        ticketId: ticketId,
+        sales: $props.transfer.sales,
+    };
+
+    const { data } = await axios.post(
+        `tickets/${$props.ticket.id}/transferSales`,
+        params
+    );
+
+    if (data && data.id === $props.ticket.id) emit('refreshData');
+    else router.push({ name: 'TicketSale', params: { id: data.id } });
+};
+
+onMounted(() => (_transfer.value = $props.transfer));
+</script>
+
+<template>
+    <QPopupProxy ref="QPopupProxyRef">
+        <QCard class="q-px-md" style="display: flex">
+            <QTable
+                v-if="transfer.sales"
+                :rows="transfer.sales"
+                :columns="transferLinesColumns"
+                :title="t('Sales to transfer')"
+                row-key="id"
+                :pagination="{ rowsPerPage: 0 }"
+                class="full-width q-mt-md"
+                :no-data-label="t('globals.noResults')"
+            >
+                <template #body-cell-quantity="{ row }">
+                    <QTd @click.stop>
+                        <VnInput
+                            v-model.number="row.quantity"
+                            :clearable="false"
+                            @keyup.enter="changeQuantity(row)"
+                            @blur="changeQuantity(row)"
+                            @focus="edit.oldQuantity = row.quantity"
+                            style="max-width: 60px"
+                        />
+                    </QTd>
+                </template>
+            </QTable>
+            <QSeparator vertical spaced />
+            <div class="col">
+                <QTable
+                    v-if="transfer.lastActiveTickets"
+                    :rows="transfer.lastActiveTickets"
+                    :columns="destinationTicketColumns"
+                    :title="t('Destination ticket')"
+                    row-key="id"
+                    :pagination="{ rowsPerPage: 0 }"
+                    class="full-width q-mt-md"
+                    :no-data-label="t('globals.noResults')"
+                >
+                    <template #body-cell-address="{ row }">
+                        <QTd @click.stop>
+                            <span>
+                                {{ row.nickname }}
+                                {{ row.name }}
+                                {{ row.street }}
+                                {{ row.postalCode }}
+                                {{ row.city }}
+                            </span>
+                            <QTooltip>
+                                {{ row.nickname }}
+                                {{ row.name }}
+                                {{ row.street }}
+                                {{ row.postalCode }}
+                                {{ row.city }}
+                            </QTooltip>
+                        </QTd>
+                    </template>
+                </QTable>
+                <QForm class="q-mt-lg">
+                    <VnInput
+                        v-model.number="_transfer.ticketId"
+                        :label="t('Transfer to ticket')"
+                        :clearable="false"
+                    >
+                        <template #append>
+                            <QBtn
+                                icon="keyboard_arrow_right"
+                                color="primary"
+                                @click="transferSales(_transfer.ticketId)"
+                                style="width: 30px"
+                            />
+                        </template>
+                    </VnInput>
+                    <QBtn
+                        :label="t('New ticket')"
+                        color="primary"
+                        class="full-width q-my-lg"
+                        @click="transferSales()"
+                    />
+                </QForm>
+            </div>
+        </QCard>
+    </QPopupProxy>
+</template>
+
+<i18n>
+es:
+    Sales to transfer: Líneas a transferir
+    Destination ticket: Ticket destinatario
+    Transfer to ticket: Transferir a ticket
+    New ticket: Nuevo ticket
+</i18n>
diff --git a/src/pages/Ticket/locale/en.yml b/src/pages/Ticket/locale/en.yml
index 0a3c36636..0b29bea6b 100644
--- a/src/pages/Ticket/locale/en.yml
+++ b/src/pages/Ticket/locale/en.yml
@@ -19,3 +19,6 @@ ticketSale:
     ok: Ok
     state: State
     more: More
+    shipped: Shipped
+    agency: Agency
+    address: Address
diff --git a/src/pages/Ticket/locale/es.yml b/src/pages/Ticket/locale/es.yml
index 2e6bc947e..fa0278c32 100644
--- a/src/pages/Ticket/locale/es.yml
+++ b/src/pages/Ticket/locale/es.yml
@@ -21,3 +21,6 @@ ticketSale:
     ok: Ok
     state: Estado
     more: Más
+    shipped: F. Envío
+    agency: Agencia
+    address: Consignatario

From c31e865faacaa7b3e62a38d338b7e4b289f2f52a Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Sat, 15 Jun 2024 12:04:31 -0300
Subject: [PATCH 076/167] Fix card searchbar routing

---
 src/pages/Ticket/Card/TicketCard.vue | 24 +++++++++----
 src/pages/Ticket/Card/TicketSale.vue | 52 +++++++++++++++++-----------
 src/pages/Ticket/locale/en.yml       |  3 ++
 src/pages/Ticket/locale/es.yml       |  3 ++
 src/pages/Zone/Card/ZoneCard.vue     |  1 +
 5 files changed, 57 insertions(+), 26 deletions(-)

diff --git a/src/pages/Ticket/Card/TicketCard.vue b/src/pages/Ticket/Card/TicketCard.vue
index 04363b506..0a0912703 100644
--- a/src/pages/Ticket/Card/TicketCard.vue
+++ b/src/pages/Ticket/Card/TicketCard.vue
@@ -1,17 +1,29 @@
 <script setup>
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import { computed } from 'vue';
+
 import VnCard from 'components/common/VnCard.vue';
 import TicketDescriptor from './TicketDescriptor.vue';
 import TicketFilter from '../TicketFilter.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+
+const routeName = computed(() => route.name);
+const searchBarDataKeys = {
+    TicketSummary: 'TicketSummary',
+    TicketSale: 'TicketSale',
+};
 </script>
 <template>
     <VnCard
         data-key="Ticket"
-        base-url="Tickets"
-        :descriptor="TicketDescriptor"
         :filter-panel="TicketFilter"
-        search-data-key="TicketList"
-        search-url="Tickets/filter"
-        searchbar-label="Search ticket"
-        searchbar-info="You can search by ticket id or alias"
+        :descriptor="TicketDescriptor"
+        :search-data-key="searchBarDataKeys[routeName]"
+        :search-custom-route-redirect="routeName"
+        :searchbar-label="t('card.search')"
+        :searchbar-info="t('card.searchInfo')"
     />
 </template>
diff --git a/src/pages/Ticket/Card/TicketSale.vue b/src/pages/Ticket/Card/TicketSale.vue
index 92b424505..3e2720ffa 100644
--- a/src/pages/Ticket/Card/TicketSale.vue
+++ b/src/pages/Ticket/Card/TicketSale.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, ref, computed, onUnmounted } from 'vue';
+import { onMounted, ref, computed, onUnmounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter, useRoute } from 'vue-router';
 
@@ -31,7 +31,6 @@ const stateStore = useStateStore();
 const { t } = useI18n();
 const { notify } = useNotify();
 const { openConfirmationModal } = useVnConfirm();
-const salesDataRef = ref(null);
 const editPriceProxyRef = ref(null);
 const stateBtnDropdownRef = ref(null);
 
@@ -53,6 +52,11 @@ const transfer = ref({
     sales: [],
 });
 
+watch(
+    () => route.params.id,
+    async () => await getSales()
+);
+
 const columns = computed(() => [
     {
         label: '',
@@ -139,11 +143,29 @@ const columns = computed(() => [
 ]);
 
 const getConfig = async () => {
-    let filter = {
-        fields: ['daysForWarningClaim'],
-    };
-    const { data } = await axios.get(`TicketConfigs`, { filter });
-    ticketConfig.value = data;
+    try {
+        let filter = {
+            fields: ['daysForWarningClaim'],
+        };
+        const { data } = await axios.get(`TicketConfigs`, { filter });
+        ticketConfig.value = data;
+    } catch (err) {
+        console.error('Error getting ticket config', err);
+    }
+};
+
+const onSalesFetched = (salesData) => {
+    sales.value = salesData;
+    for (let sale of salesData) sale.amount = getSaleTotal(sale);
+};
+
+const getSales = async () => {
+    try {
+        const { data } = await axios.get(`Tickets/${route.params.id}/getSales`);
+        onSalesFetched(data);
+    } catch (err) {
+        console.error('Error fetching sales', err);
+    }
 };
 
 const getSaleTotal = (sale) => {
@@ -155,14 +177,9 @@ const getSaleTotal = (sale) => {
     return price - discount;
 };
 
-const onSalesFetched = (salesData) => {
-    sales.value = salesData;
-    for (let sale of salesData) sale.amount = getSaleTotal(sale);
-};
-
 const resetChanges = async () => {
     arrayData.fetch({ append: false });
-    salesDataRef.value.fetch();
+    getSales();
 };
 
 const updateQuantity = async (sale) => {
@@ -398,7 +415,8 @@ const setTransferParams = async () => {
 
 onMounted(async () => {
     stateStore.rightDrawer = true;
-    await getConfig();
+    getConfig();
+    getSales();
 });
 
 onUnmounted(() => (stateStore.rightDrawer = false));
@@ -415,12 +433,6 @@ onUnmounted(() => (stateStore.rightDrawer = false));
         auto-load
         @on-fetch="(data) => (isLocked = data)"
     />
-    <FetchData
-        ref="salesDataRef"
-        :url="`Tickets/${route.params.id}/getSales`"
-        auto-load
-        @on-fetch="(data) => onSalesFetched(data)"
-    />
     <FetchData
         url="Items/withName"
         :filter="{ fields: ['id', 'name'], order: 'id DESC' }"
diff --git a/src/pages/Ticket/locale/en.yml b/src/pages/Ticket/locale/en.yml
index 0b29bea6b..d63f1e29c 100644
--- a/src/pages/Ticket/locale/en.yml
+++ b/src/pages/Ticket/locale/en.yml
@@ -22,3 +22,6 @@ ticketSale:
     shipped: Shipped
     agency: Agency
     address: Address
+card:
+    search: Search tickets
+    searchInfo: You can search by ticket id or alias
diff --git a/src/pages/Ticket/locale/es.yml b/src/pages/Ticket/locale/es.yml
index fa0278c32..4b8b70c82 100644
--- a/src/pages/Ticket/locale/es.yml
+++ b/src/pages/Ticket/locale/es.yml
@@ -24,3 +24,6 @@ ticketSale:
     shipped: F. Envío
     agency: Agencia
     address: Consignatario
+card:
+    search: Buscar tickets
+    searchInfo: Buscar tickets por identificador o alias
diff --git a/src/pages/Zone/Card/ZoneCard.vue b/src/pages/Zone/Card/ZoneCard.vue
index 1cbc01dd7..f92ee1e4e 100644
--- a/src/pages/Zone/Card/ZoneCard.vue
+++ b/src/pages/Zone/Card/ZoneCard.vue
@@ -22,6 +22,7 @@ const searchBarDataKeys = {
     ZoneEvents: 'ZoneEvents',
 };
 </script>
+
 <template>
     <VnCard
         data-key="Zone"

From 0ad6b260da1a147b3cbbb504e8e17364b0b9f83b Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Mon, 17 Jun 2024 07:32:43 +0200
Subject: [PATCH 077/167] fix(VnTable): create scss

---
 src/components/VnTable/VnTable.vue            | 13 +++++----
 src/components/common/VnComponent.vue         | 27 +++++++++++--------
 .../ExtendedList/CustomerExtendedList.vue     | 22 ++++++++-------
 3 files changed, 34 insertions(+), 28 deletions(-)

diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index 8c781ba26..e2b736ddd 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -83,7 +83,6 @@ const tableModes = [
         icon: 'grid_view',
         title: t('grid view'),
         value: 'card',
-        disable: () => console.log('called'),
     },
 ];
 
@@ -233,7 +232,7 @@ defineExpose({
                 table-header-class="bg-header"
                 card-container-class="grid-three"
                 flat
-                :style="mode == 'table' && 'max-height: 92vh'"
+                :style="mode == 'table' && 'max-height: 90vh'"
                 virtual-scroll
                 @virtual-scroll="
                     (event) =>
@@ -468,11 +467,11 @@ defineExpose({
     </QDialog>
 </template>
 <i18n>
-    en:
-        status: Status
-    es:
-        status: Estados
-    </i18n>
+en:
+    status: Status
+es:
+    status: Estados
+</i18n>
 
 <style lang="scss">
 .bg-chip-secondary {
diff --git a/src/components/common/VnComponent.vue b/src/components/common/VnComponent.vue
index f9848ffc3..56b43a4db 100644
--- a/src/components/common/VnComponent.vue
+++ b/src/components/common/VnComponent.vue
@@ -1,14 +1,3 @@
-<template>
-    <span v-for="toComponent of componentArray" :key="toComponent.name">
-        <component
-            v-if="toComponent?.component"
-            :is="mix(toComponent).component"
-            v-bind="mix(toComponent).attrs"
-            v-on="mix(toComponent).event ?? {}"
-            v-model="model"
-        />
-    </span>
-</template>
 <script setup>
 import { computed, defineModel } from 'vue';
 
@@ -53,3 +42,19 @@ function toValueAttrs(attrs) {
     return typeof attrs == 'function' ? attrs($props.value) : attrs;
 }
 </script>
+<template>
+    <span
+        v-for="toComponent of componentArray"
+        :key="toComponent.name"
+        class="column flex-center fit"
+    >
+        <component
+            v-if="toComponent?.component"
+            :is="mix(toComponent).component"
+            v-bind="mix(toComponent).attrs"
+            v-on="mix(toComponent).event ?? {}"
+            v-model="model"
+            class="fit"
+        />
+    </span>
+</template>
diff --git a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
index a54673a66..7be53ad96 100644
--- a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
+++ b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
@@ -270,7 +270,7 @@ const columns = computed(() => [
         align: 'left',
         label: t('customer.extendedList.tableVisibleColumns.isEqualizated'),
         name: 'isEqualizated',
-        created: true,
+        create: true,
         columnFilter: {
             inWhere: true,
         },
@@ -399,6 +399,13 @@ function handleLocation(data, location) {
         auto-load
     >
         <template #more-create-dialog="{ data }">
+            <VnLocation
+                :roles-allowed-to-create="['deliveryAssistant']"
+                :options="postcodesOptions"
+                v-model="data.location"
+                @update:model-value="(location) => handleLocation(data, location)"
+            />
+            <QInput v-model="data.userName" :label="t('Web user')" />
             <QInput :label="t('Email')" clearable type="email" v-model="data.email">
                 <template #append>
                     <QIcon name="info" class="cursor-info">
@@ -408,18 +415,13 @@ function handleLocation(data, location) {
                     </QIcon>
                 </template>
             </QInput>
-            <QInput v-model="data.userName" :label="t('Web user')" />
-            <VnLocation
-                :roles-allowed-to-create="['deliveryAssistant']"
-                :options="postcodesOptions"
-                v-model="data.location"
-                @update:model-value="(location) => handleLocation(data, location)"
-            >
-            </VnLocation>
         </template>
     </VnTable>
 </template>
-
+<i18n>
+es:
+    Web user: Usuario Web
+</i18n>
 <style lang="scss" scoped>
 .col-content {
     border-radius: 4px;

From 6120c98580f8ced18ff8178459fd2a5a80f50df6 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Mon, 17 Jun 2024 08:19:07 +0200
Subject: [PATCH 078/167] fix(VnTable): warns

---
 src/components/VnTable/VnTable.vue            | 432 +++++++++---------
 .../ExtendedList/CustomerExtendedList.vue     |   1 -
 2 files changed, 222 insertions(+), 211 deletions(-)

diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index e2b736ddd..bc1c65130 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -211,232 +211,244 @@ defineExpose({
             </VnFilterPanel>
         </QScrollArea>
     </QDrawer>
-    <CrudModel
-        v-bind="$attrs"
-        class="q-px-md"
-        :limit="20"
-        ref="CrudModelRef"
-        :search-url="searchUrl"
-        :disable-infinite-scroll="mode == 'table'"
-        @save-changes="reload"
-    >
-        <template #body="{ rows }">
-            <QTable
-                class="vnTable"
-                :columns="splittedColumns.columns"
-                :rows="rows"
-                row-key="id"
-                selection="multiple"
-                v-model:selected="selected"
-                :grid="mode != 'table'"
-                table-header-class="bg-header"
-                card-container-class="grid-three"
-                flat
-                :style="mode == 'table' && 'max-height: 90vh'"
-                virtual-scroll
-                @virtual-scroll="
-                    (event) =>
-                        event.index > rows.length - 2 &&
-                        CrudModelRef.vnPaginateRef.paginate()
-                "
-                @row-click="(_, row) => rowClickFunction(row)"
-            >
-                <template #top-left>
-                    <slot name="top-left"></slot>
-                </template>
-                <template #top-right>
-                    <!-- <QBtn
+    <!-- class in div to fix warn-->
+    <div class="q-px-md">
+        <CrudModel
+            v-bind="$attrs"
+            :limit="20"
+            ref="CrudModelRef"
+            :search-url="searchUrl"
+            :disable-infinite-scroll="mode == 'table'"
+            @save-changes="reload"
+        >
+            <template #body="{ rows }">
+                <QTable
+                    v-bind="$attrs"
+                    class="vnTable"
+                    :columns="splittedColumns.columns"
+                    :rows="rows"
+                    v-model:selected="selected"
+                    :grid="mode != 'table'"
+                    table-header-class="bg-header"
+                    card-container-class="grid-three"
+                    flat
+                    :style="mode == 'table' && 'max-height: 90vh'"
+                    virtual-scroll
+                    @virtual-scroll="
+                        (event) =>
+                            event.index > rows.length - 2 &&
+                            CrudModelRef.vnPaginateRef.paginate()
+                    "
+                    @row-click="(_, row) => rowClickFunction(row)"
+                >
+                    <template #top-left>
+                        <slot name="top-left"></slot>
+                    </template>
+                    <template #top-right>
+                        <!-- <QBtn
                         icon="visibility"
                         title="asd"
                         class="bg-vn-section-color q-mr-md"
                         dense
                         v-if="mode == 'table'"
                     /> -->
-                    <QBtnToggle
-                        v-model="mode"
-                        toggle-color="primary"
-                        class="bg-vn-section-color"
-                        dense
-                        :options="tableModes"
-                    />
-                    <QBtn
-                        icon="filter_alt"
-                        title="asd"
-                        class="bg-vn-section-color q-ml-md"
-                        dense
-                        @click="stateStore.toggleRightDrawer()"
-                    />
-                </template>
-                <template #header-cell="{ col }">
-                    <QTh auto-width style="min-width: 100px" v-if="$props.columnSearch">
-                        <VnTableFilter
-                            :column="col"
-                            :show-title="true"
-                            :data-key="$attrs['data-key']"
-                            v-model="params[columnName(col)]"
-                            :search-url="searchUrl"
+                        <QBtnToggle
+                            v-model="mode"
+                            toggle-color="primary"
+                            class="bg-vn-section-color"
+                            dense
+                            :options="tableModes"
                         />
-                    </QTh>
-                </template>
-                <template #header-cell-tableActions>
-                    <QTh auto-width class="sticky" />
-                </template>
-                <template #body-cell-tableStatus="{ col, row }">
-                    <QTd auto-width :class="`text-${col.align ?? 'left'}`">
-                        <VnTableChip :columns="splittedColumns.columnChips" :row="row">
-                            <template #afterChip>
-                                <slot name="afterChip" :row="row"></slot>
-                            </template>
-                        </VnTableChip>
-                    </QTd>
-                </template>
-                <template #body-cell="{ col, row }">
-                    <!-- Columns -->
-                    <QTd
-                        auto-width
-                        class="no-margin q-px-xs"
-                        :class="`text-${col.align ?? 'left'}`"
-                    >
-                        <VnTableColumn
-                            :column="col"
-                            :row="row"
-                            :is-editable="false"
-                            v-model="row[col.name]"
-                            component-prop="columnField"
-                        />
-                    </QTd>
-                </template>
-                <template #body-cell-tableActions="{ col, row }">
-                    <QTd
-                        auto-width
-                        :class="`text-${col.align ?? 'left'}`"
-                        class="sticky no-padding"
-                        @click="stopEventPropagation($event)"
-                    >
                         <QBtn
-                            v-for="(btn, index) of col.actions"
-                            :key="index"
-                            :title="btn.title"
-                            :icon="btn.icon"
-                            class="q-px-sm"
-                            flat
-                            :class="
-                                btn.isPrimary ? 'text-primary-light' : 'color-vn-text '
-                            "
-                            @click="btn.action(row)"
+                            icon="filter_alt"
+                            title="asd"
+                            class="bg-vn-section-color q-ml-md"
+                            dense
+                            @click="stateStore.toggleRightDrawer()"
                         />
-                    </QTd>
-                </template>
-                <template #item="{ row, colsMap }">
-                    <component
-                        :is="$props.redirect ? 'router-link' : 'span'"
-                        :to="`/${$props.redirect}/` + row.id"
-                    >
-                        <QCard
-                            bordered
-                            flat
-                            class="row no-wrap justify-between cursor-pointer"
-                            @click="
-                                (_, row) => {
-                                    $props.rowClick && $props.rowClick(row);
-                                }
-                            "
+                    </template>
+                    <template #header-cell="{ col }">
+                        <QTh
+                            auto-width
+                            style="min-width: 100px"
+                            v-if="$props.columnSearch"
                         >
-                            <QCardSection
-                                vertical
-                                class="no-margin no-padding"
-                                :class="colsMap.tableActions ? 'w-80' : 'fit'"
+                            <VnTableFilter
+                                :column="col"
+                                :show-title="true"
+                                :data-key="$attrs['data-key']"
+                                v-model="params[columnName(col)]"
+                                :search-url="searchUrl"
+                            />
+                        </QTh>
+                    </template>
+                    <template #header-cell-tableActions>
+                        <QTh auto-width class="sticky" />
+                    </template>
+                    <template #body-cell-tableStatus="{ col, row }">
+                        <QTd auto-width :class="`text-${col.align ?? 'left'}`">
+                            <VnTableChip
+                                :columns="splittedColumns.columnChips"
+                                :row="row"
+                            >
+                                <template #afterChip>
+                                    <slot name="afterChip" :row="row"></slot>
+                                </template>
+                            </VnTableChip>
+                        </QTd>
+                    </template>
+                    <template #body-cell="{ col, row }">
+                        <!-- Columns -->
+                        <QTd
+                            auto-width
+                            class="no-margin q-px-xs"
+                            :class="`text-${col.align ?? 'left'}`"
+                        >
+                            <VnTableColumn
+                                :column="col"
+                                :row="row"
+                                :is-editable="false"
+                                v-model="row[col.name]"
+                                component-prop="columnField"
+                            />
+                        </QTd>
+                    </template>
+                    <template #body-cell-tableActions="{ col, row }">
+                        <QTd
+                            auto-width
+                            :class="`text-${col.align ?? 'left'}`"
+                            class="sticky no-padding"
+                            @click="stopEventPropagation($event)"
+                        >
+                            <QBtn
+                                v-for="(btn, index) of col.actions"
+                                :key="index"
+                                :title="btn.title"
+                                :icon="btn.icon"
+                                class="q-px-sm"
+                                flat
+                                :class="
+                                    btn.isPrimary
+                                        ? 'text-primary-light'
+                                        : 'color-vn-text '
+                                "
+                                @click="btn.action(row)"
+                            />
+                        </QTd>
+                    </template>
+                    <template #item="{ row, colsMap }">
+                        <component
+                            :is="$props.redirect ? 'router-link' : 'span'"
+                            :to="`/${$props.redirect}/` + row.id"
+                        >
+                            <QCard
+                                bordered
+                                flat
+                                class="row no-wrap justify-between cursor-pointer"
+                                @click="
+                                    (_, row) => {
+                                        $props.rowClick && $props.rowClick(row);
+                                    }
+                                "
                             >
-                                <!-- Chips -->
                                 <QCardSection
-                                    v-if="splittedColumns.chips.length"
-                                    class="no-margin q-px-xs q-py-none"
+                                    vertical
+                                    class="no-margin no-padding"
+                                    :class="colsMap.tableActions ? 'w-80' : 'fit'"
                                 >
-                                    <VnTableChip
-                                        :columns="splittedColumns.chips"
-                                        :row="row"
+                                    <!-- Chips -->
+                                    <QCardSection
+                                        v-if="splittedColumns.chips.length"
+                                        class="no-margin q-px-xs q-py-none"
                                     >
-                                        <template #afterChip>
-                                            <slot name="afterChip" :row="row"></slot>
-                                        </template>
-                                    </VnTableChip>
-                                </QCardSection>
-                                <!-- Title -->
-                                <QCardSection
-                                    v-if="splittedColumns.title"
-                                    class="q-pl-sm q-py-none text-primary-light text-bold text-h6 cardEllipsis"
-                                >
-                                    <span
-                                        :title="row[splittedColumns.title.name]"
-                                        @click="stopEventPropagation($event)"
-                                        class="cursor-text"
-                                    >
-                                        {{ row[splittedColumns.title.name] }}
-                                    </span>
-                                </QCardSection>
-                                <!-- Fields -->
-                                <QCardSection
-                                    class="q-pl-sm q-pr-lg q-py-xs"
-                                    :class="$props.cardClass"
-                                >
-                                    <div
-                                        v-for="col of splittedColumns.visible"
-                                        :key="col.name"
-                                        class="fields"
-                                    >
-                                        <VnLv
-                                            :label="
-                                                !col.component &&
-                                                col.label &&
-                                                `${col.label}:`
-                                            "
+                                        <VnTableChip
+                                            :columns="splittedColumns.chips"
+                                            :row="row"
                                         >
-                                            <template #value>
-                                                <span
-                                                    @click="stopEventPropagation($event)"
-                                                >
-                                                    <VnTableColumn
-                                                        :column="col"
-                                                        :row="row"
-                                                        :is-editable="false"
-                                                        v-model="row[col.name]"
-                                                        component-prop="columnField"
-                                                        :show-label="true"
-                                                    />
-                                                </span>
+                                            <template #afterChip>
+                                                <slot name="afterChip" :row="row"></slot>
                                             </template>
-                                        </VnLv>
-                                    </div>
+                                        </VnTableChip>
+                                    </QCardSection>
+                                    <!-- Title -->
+                                    <QCardSection
+                                        v-if="splittedColumns.title"
+                                        class="q-pl-sm q-py-none text-primary-light text-bold text-h6 cardEllipsis"
+                                    >
+                                        <span
+                                            :title="row[splittedColumns.title.name]"
+                                            @click="stopEventPropagation($event)"
+                                            class="cursor-text"
+                                        >
+                                            {{ row[splittedColumns.title.name] }}
+                                        </span>
+                                    </QCardSection>
+                                    <!-- Fields -->
+                                    <QCardSection
+                                        class="q-pl-sm q-pr-lg q-py-xs"
+                                        :class="$props.cardClass"
+                                    >
+                                        <div
+                                            v-for="col of splittedColumns.visible"
+                                            :key="col.name"
+                                            class="fields"
+                                        >
+                                            <VnLv
+                                                :label="
+                                                    !col.component &&
+                                                    col.label &&
+                                                    `${col.label}:`
+                                                "
+                                            >
+                                                <template #value>
+                                                    <span
+                                                        @click="
+                                                            stopEventPropagation($event)
+                                                        "
+                                                    >
+                                                        <VnTableColumn
+                                                            :column="col"
+                                                            :row="row"
+                                                            :is-editable="false"
+                                                            v-model="row[col.name]"
+                                                            component-prop="columnField"
+                                                            :show-label="true"
+                                                        />
+                                                    </span>
+                                                </template>
+                                            </VnLv>
+                                        </div>
+                                    </QCardSection>
                                 </QCardSection>
-                            </QCardSection>
-                            <!-- Actions -->
-                            <QCardSection
-                                v-if="colsMap.tableActions"
-                                class="column flex-center w-10 no-margin q-pa-xs q-gutter-y-xs"
-                                @click="stopEventPropagation($event)"
-                            >
-                                <QBtn
-                                    v-for="(btn, index) of splittedColumns.actions
-                                        .actions"
-                                    :key="index"
-                                    :title="btn.title"
-                                    :icon="btn.icon"
-                                    class="q-pa-xs"
-                                    flat
-                                    :class="
-                                        btn.isPrimary
-                                            ? 'text-primary-light'
-                                            : 'color-vn-text '
-                                    "
-                                    @click="btn.action(row)"
-                                />
-                            </QCardSection>
-                        </QCard>
-                    </component>
-                </template>
-            </QTable>
-        </template>
-    </CrudModel>
+                                <!-- Actions -->
+                                <QCardSection
+                                    v-if="colsMap.tableActions"
+                                    class="column flex-center w-10 no-margin q-pa-xs q-gutter-y-xs"
+                                    @click="stopEventPropagation($event)"
+                                >
+                                    <QBtn
+                                        v-for="(btn, index) of splittedColumns.actions
+                                            .actions"
+                                        :key="index"
+                                        :title="btn.title"
+                                        :icon="btn.icon"
+                                        class="q-pa-xs"
+                                        flat
+                                        :class="
+                                            btn.isPrimary
+                                                ? 'text-primary-light'
+                                                : 'color-vn-text '
+                                        "
+                                        @click="btn.action(row)"
+                                    />
+                                </QCardSection>
+                            </QCard>
+                        </component>
+                    </template>
+                </QTable>
+            </template>
+        </CrudModel>
+    </div>
     <QPageSticky v-if="create" :offset="[20, 20]" style="z-index: 2">
         <QBtn @click="showForm = !showForm" color="primary" fab icon="add" />
         <QTooltip>
@@ -445,7 +457,7 @@ defineExpose({
     </QPageSticky>
     <QDialog v-model="showForm" transition-show="scale" transition-hide="scale">
         <FormModelPopup
-            v-bind="{ ...$attrs, ...create }"
+            v-bind="create"
             :model="$attrs['data-key'] + 'Create'"
             @on-data-saved="(_, res) => create.onDataSaved(res)"
         >
diff --git a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
index 7be53ad96..21e1ebeed 100644
--- a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
+++ b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
@@ -382,7 +382,6 @@ function handleLocation(data, location) {
         ref="tableRef"
         data-key="CustomerExtendedList"
         url="Clients/extendedListFilter"
-        url-create="Clients/createWithUser"
         :create="{
             urlCreate: 'Clients/createWithUser',
             title: 'Create client',

From 1c6fab0158ba9d48a19115b585ef54c7fdf5a04c Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Mon, 17 Jun 2024 09:53:36 +0200
Subject: [PATCH 079/167] fix(VnTable): duplicate fetch

---
 src/components/ui/VnPaginate.vue | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/ui/VnPaginate.vue b/src/components/ui/VnPaginate.vue
index 625f8b845..b59f01835 100644
--- a/src/components/ui/VnPaginate.vue
+++ b/src/components/ui/VnPaginate.vue
@@ -70,6 +70,7 @@ const props = defineProps({
 
 const emit = defineEmits(['onFetch', 'onPaginate', 'onChange']);
 const isLoading = ref(false);
+const mounted = ref(false);
 const pagination = ref({
     sortBy: props.order,
     rowsPerPage: props.limit,
@@ -89,8 +90,9 @@ const arrayData = useArrayData(props.dataKey, {
 });
 const store = arrayData.store;
 
-onMounted(() => {
-    if (props.autoLoad) fetch();
+onMounted(async () => {
+    if (props.autoLoad) await fetch();
+    mounted.value = true;
 });
 
 watch(
@@ -102,7 +104,10 @@ watch(
 
 watch(
     () => store.data,
-    (data) => emit('onChange', data)
+    (data) => {
+        console.log('EMIT CHANGE DATA');
+        emit('onChange', data);
+    }
 );
 
 watch(
@@ -155,7 +160,7 @@ function endPagination() {
     emit('onPaginate');
 }
 async function onLoad(index, done) {
-    if (!store.data) return done();
+    if (!store.data || !mounted.value) return done();
 
     if (store.data.length === 0 || !props.url) return done(false);
 

From bc31985a4d14229149e918ef6f7afc37d9a7f652 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Mon, 17 Jun 2024 09:54:19 +0200
Subject: [PATCH 080/167] remove console.log

---
 src/components/ui/VnPaginate.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/ui/VnPaginate.vue b/src/components/ui/VnPaginate.vue
index b59f01835..9a2c06b0c 100644
--- a/src/components/ui/VnPaginate.vue
+++ b/src/components/ui/VnPaginate.vue
@@ -104,10 +104,7 @@ watch(
 
 watch(
     () => store.data,
-    (data) => {
-        console.log('EMIT CHANGE DATA');
-        emit('onChange', data);
-    }
+    (data) => emit('onChange', data)
 );
 
 watch(

From 42008ef74b2a4462299080dcda27864cbccead95 Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Mon, 17 Jun 2024 09:56:16 +0200
Subject: [PATCH 081/167] feat: refs #6896 created VnImg and added to order
 module

---
 src/components/ui/VnImg.vue                 | 52 +++++++++++++++++++++
 src/pages/Item/Card/ItemDescriptorImage.vue | 11 +++--
 src/pages/Order/Card/OrderCatalogItem.vue   |  4 +-
 src/pages/Order/OrderLines.vue              | 30 +++++++-----
 4 files changed, 82 insertions(+), 15 deletions(-)
 create mode 100644 src/components/ui/VnImg.vue

diff --git a/src/components/ui/VnImg.vue b/src/components/ui/VnImg.vue
new file mode 100644
index 000000000..37dce7c67
--- /dev/null
+++ b/src/components/ui/VnImg.vue
@@ -0,0 +1,52 @@
+<script setup>
+import { ref } from 'vue';
+
+const $props = defineProps({
+    collection: {
+        type: [String, Number],
+        default: null,
+    },
+    size: {
+        type: Boolean,
+        default: false,
+    },
+    zoomSize: {
+        type: String,
+        required: true,
+    },
+    id: {
+        type: Boolean,
+        default: false,
+    },
+});
+const show = ref(false);
+</script>
+<template>
+    <QImg
+        class="img"
+        v-bind="$attrs"
+        @click="show = !show"
+        spinner-color="primary"
+        :ratio="1"
+    />
+    <QDialog v-model="show" v-if="$props.zoomSize">
+        <QImg
+            class="img_zoom"
+            v-bind="$attrs"
+            spinner-color="primary"
+            :ratio="1"
+            style="border-radius: 0%"
+        />
+    </QDialog>
+</template>
+
+<style lang="scss" scoped>
+.img {
+    cursor: pointer;
+    border-radius: 0%;
+}
+.img_zoom {
+    width: 12%;
+    height: auto;
+}
+</style>
diff --git a/src/pages/Item/Card/ItemDescriptorImage.vue b/src/pages/Item/Card/ItemDescriptorImage.vue
index f16a57548..a02f75b6b 100644
--- a/src/pages/Item/Card/ItemDescriptorImage.vue
+++ b/src/pages/Item/Card/ItemDescriptorImage.vue
@@ -3,7 +3,7 @@ import { ref, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import EditPictureForm from 'components/EditPictureForm.vue';
-
+import VnImg from 'src/components/ui/VnImg.vue';
 import { useSession } from 'src/composables/useSession';
 import axios from 'axios';
 
@@ -69,7 +69,12 @@ onMounted(async () => {
 
 <template>
     <div class="relative-position">
-        <QImg :src="image" spinner-color="primary" style="min-height: 256px">
+        <VnImg
+            :src="image"
+            spinner-color="primary"
+            style="min-height: 256px"
+            zoom-size="lg"
+        >
             <template #error>
                 <div class="absolute-full picture text-center q-pa-md flex flex-center">
                     <div>
@@ -82,7 +87,7 @@ onMounted(async () => {
                     </div>
                 </div>
             </template>
-        </QImg>
+        </VnImg>
         <QBtn
             v-if="showEditButton"
             color="primary"
diff --git a/src/pages/Order/Card/OrderCatalogItem.vue b/src/pages/Order/Card/OrderCatalogItem.vue
index a2c78305e..9e362ecd0 100644
--- a/src/pages/Order/Card/OrderCatalogItem.vue
+++ b/src/pages/Order/Card/OrderCatalogItem.vue
@@ -3,6 +3,7 @@ import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import VnLv from 'components/ui/VnLv.vue';
+import VnImg from 'src/components/ui/VnImg.vue';
 import OrderCatalogItemDialog from 'pages/Order/Card/OrderCatalogItemDialog.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 
@@ -29,10 +30,11 @@ const dialog = ref(null);
     <div class="container order-catalog-item overflow-hidden">
         <QCard class="card shadow-6">
             <div class="img-wrapper">
-                <QImg
+                <VnImg
                     :src="`/api/Images/catalog/200x200/${item.id}/download?access_token=${token}`"
                     spinner-color="primary"
                     :ratio="1"
+                    zoom-size="lg"
                     height="192"
                     width="192"
                     class="image"
diff --git a/src/pages/Order/OrderLines.vue b/src/pages/Order/OrderLines.vue
index 71452522a..ecd2fedb7 100644
--- a/src/pages/Order/OrderLines.vue
+++ b/src/pages/Order/OrderLines.vue
@@ -9,6 +9,7 @@ import FetchData from 'components/FetchData.vue';
 import VnLv from 'components/ui/VnLv.vue';
 import FetchedTags from 'components/ui/FetchedTags.vue';
 import VnConfirm from 'components/ui/VnConfirm.vue';
+import VnImg from 'components/ui/VnImg.vue';
 
 import { toCurrency, toDate } from 'src/filters';
 import { useSession } from 'composables/useSession';
@@ -183,16 +184,19 @@ const detailsColumns = ref([
                             <template #body="props">
                                 <QTr :props="props">
                                     <QTd>
-                                        {{ console.log('props: ', props.row.item.id) }}
-                                        <QImg
-                                            :src="`/api/Images/catalog/50x50/${props.row.item?.id}/download?access_token=${token}`"
-                                            spinner-color="primary"
-                                            :ratio="1"
-                                            height="50"
-                                            width="50"
-                                            class="image-wrapper"
-                                            style="cursor: pointer"
-                                        />
+                                        <div class="image-wrapper">
+                                            <VnImg
+                                                :src="`/api/Images/catalog/200x200/${props.row.item?.id}/download?access_token=${token}`"
+                                                class="image"
+                                                height="50"
+                                                width="50"
+                                                style="
+                                                    cursor: pointer;
+                                                    border-radius: 50%;
+                                                "
+                                                zoom-size="lg"
+                                            />
+                                        </div>
                                     </QTd>
                                     <QTd key="item" :props="props" class="item">
                                         <span class="link">
@@ -306,7 +310,11 @@ const detailsColumns = ref([
 .image-wrapper {
     height: 50px;
     width: 50px;
-    border-radius: 50%;
+    margin-left: 30%;
+
+    .image {
+        border-radius: 50%;
+    }
 }
 
 .no-result {

From 7c64df6600d62805d1399ee2bc5c91e3f14946bf Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Mon, 17 Jun 2024 09:58:20 +0200
Subject: [PATCH 082/167] refactor: refs #6896 fixed styles

---
 src/pages/Order/OrderLines.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/pages/Order/OrderLines.vue b/src/pages/Order/OrderLines.vue
index ecd2fedb7..667873cb4 100644
--- a/src/pages/Order/OrderLines.vue
+++ b/src/pages/Order/OrderLines.vue
@@ -311,10 +311,6 @@ const detailsColumns = ref([
     height: 50px;
     width: 50px;
     margin-left: 30%;
-
-    .image {
-        border-radius: 50%;
-    }
 }
 
 .no-result {

From a479637ee602b0a574bcf5d15e3420e00251ba6f Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Mon, 17 Jun 2024 10:14:11 +0200
Subject: [PATCH 083/167] feat: customerList is customerExtendedList

---
 src/pages/Customer/CustomerList.vue           | 491 +++++++++++++++---
 .../ExtendedList/CustomerExtendedList.vue     | 429 ---------------
 src/router/modules/customer.js                |  13 -
 3 files changed, 413 insertions(+), 520 deletions(-)
 delete mode 100644 src/pages/Customer/ExtendedList/CustomerExtendedList.vue

diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index 8677a77ca..c069810d3 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -1,94 +1,429 @@
 <script setup>
+import { ref, computed, markRaw } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
-import CustomerFilter from './CustomerFilter.vue';
-import VnLv from 'src/components/ui/VnLv.vue';
-import CardList from 'src/components/ui/CardList.vue';
-import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
-import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+import VnTable from 'components/VnTable/VnTable.vue';
+import VnLocation from 'src/components/common/VnLocation.vue';
 import CustomerSummary from './Card/CustomerSummary.vue';
-import RightMenu from 'src/components/common/RightMenu.vue';
+import { useSummaryDialog } from 'src/composables/useSummaryDialog';
+
+import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
+
+import { toDate } from 'src/filters';
 
-const router = useRouter();
 const { t } = useI18n();
+const router = useRouter();
+
+const postcodesOptions = ref([]);
+const tableRef = ref();
+
+const columns = computed(() => [
+    {
+        align: 'left',
+        name: 'id',
+        label: t('customer.extendedList.tableVisibleColumns.id'),
+        chip: {
+            condition: () => true,
+        },
+        isId: true,
+        columnFilter: {
+            component: 'select',
+            name: 'search',
+            attrs: {
+                url: 'Clients',
+                fields: ['id', 'name'],
+            },
+        },
+    },
+    {
+        align: 'left',
+        label: t('customer.extendedList.tableVisibleColumns.name'),
+        name: 'name',
+        isTitle: true,
+        create: true,
+    },
+    {
+        align: 'left',
+        name: 'socialName',
+        label: t('customer.extendedList.tableVisibleColumns.socialName'),
+        isTitle: true,
+        create: true,
+    },
+    {
+        align: 'left',
+        label: t('customer.extendedList.tableVisibleColumns.fi'),
+        name: 'fi',
+        create: true,
+    },
+    {
+        align: 'left',
+        label: t('customer.extendedList.tableVisibleColumns.salesPersonFk'),
+        name: 'salesPersonFk',
+        component: 'select',
+        attrs: {
+            url: 'Workers/activeWithInheritedRole',
+            fields: ['id', 'name'],
+            where: { role: 'salesPerson' },
+        },
+        create: true,
+        columnField: {
+            component: null,
+        },
+        format: (row, dashIfEmpty) => dashIfEmpty(row.salesPerson),
+    },
+    {
+        align: 'left',
+        label: t('customer.extendedList.tableVisibleColumns.credit'),
+        name: 'credit',
+        component: 'number',
+        columnFilter: {
+            inWhere: true,
+        },
+    },
+    {
+        align: 'left',
+        label: t('customer.extendedList.tableVisibleColumns.creditInsurance'),
+        name: 'creditInsurance',
+        component: 'number',
+        columnFilter: {
+            inWhere: true,
+        },
+    },
+    {
+        align: 'left',
+        label: t('customer.extendedList.tableVisibleColumns.phone'),
+        name: 'phone',
+        cardVisible: true,
+        after: {
+            component: markRaw(VnLinkPhone),
+            props: (prop) => ({
+                'phone-number': prop.phone,
+            }),
+        },
+        component: 'number',
+        columnField: {
+            component: null,
+        },
+    },
+    {
+        align: 'left',
+        label: t('customer.extendedList.tableVisibleColumns.mobile'),
+        name: 'mobile',
+        cardVisible: true,
+        columnFilter: {
+            component: 'number',
+            inWhere: true,
+        },
+    },
+    {
+        align: 'left',
+        label: t('customer.extendedList.tableVisibleColumns.street'),
+        name: 'street',
+        create: true,
+        columnFilter: {
+            inWhere: true,
+        },
+    },
+    {
+        align: 'left',
+        label: t('customer.extendedList.tableVisibleColumns.countryFk'),
+        name: 'countryFk',
+        columnFilter: {
+            component: 'select',
+            inWhere: true,
+            alias: 'c',
+            attrs: {
+                url: 'Countries',
+            },
+        },
+        format: (row, dashIfEmpty) => dashIfEmpty(row.country),
+    },
+    {
+        align: 'left',
+        label: t('customer.extendedList.tableVisibleColumns.provinceFk'),
+        name: 'provinceFk',
+        component: 'select',
+        attrs: {
+            url: 'Provinces',
+        },
+        columnField: {
+            component: null,
+        },
+        format: (row, dashIfEmpty) => dashIfEmpty(row.province),
+    },
+    {
+        align: 'left',
+        label: t('customer.extendedList.tableVisibleColumns.city'),
+        name: 'city',
+    },
+    {
+        align: 'left',
+        label: t('customer.extendedList.tableVisibleColumns.postcode'),
+        name: 'postcode',
+    },
+    {
+        align: 'left',
+        label: t('customer.extendedList.tableVisibleColumns.email'),
+        name: 'email',
+        cardVisible: true,
+    },
+    {
+        align: 'left',
+        label: t('customer.extendedList.tableVisibleColumns.created'),
+        name: 'created',
+        format: ({ created }) => toDate(created),
+        component: 'date',
+        columnFilter: {
+            alias: 'c',
+            inWhere: true,
+        },
+    },
+    {
+        align: 'left',
+        label: t('customer.extendedList.tableVisibleColumns.businessTypeFk'),
+        name: 'businessTypeFk',
+        create: true,
+        component: 'select',
+        attrs: {
+            url: 'BusinessTypes',
+            optionLabel: 'description',
+            optionValue: 'code',
+        },
+        columnField: {
+            component: null,
+        },
+        format: (row, dashIfEmpty) => dashIfEmpty(row.businessType),
+    },
+    {
+        align: 'left',
+        label: t('customer.extendedList.tableVisibleColumns.payMethodFk'),
+        name: 'payMethodFk',
+        columnFilter: {
+            component: 'select',
+            attrs: {
+                url: 'PayMethods',
+            },
+            inWhere: true,
+        },
+        format: (row, dashIfEmpty) => dashIfEmpty(row.payMethod),
+    },
+    {
+        align: 'left',
+        label: t('customer.extendedList.tableVisibleColumns.sageTaxTypeFk'),
+        name: 'sageTaxTypeFk',
+        columnFilter: {
+            component: 'select',
+            attrs: {
+                optionLabel: 'vat',
+                url: 'SageTaxTypes',
+            },
+            alias: 'sti',
+            inWhere: true,
+        },
+        format: (row, dashIfEmpty) => dashIfEmpty(row.sageTaxType),
+    },
+    {
+        align: 'left',
+        label: t('customer.extendedList.tableVisibleColumns.sageTransactionTypeFk'),
+        name: 'sageTransactionTypeFk',
+        columnFilter: {
+            component: 'select',
+            attrs: {
+                optionLabel: 'transaction',
+                url: 'SageTransactionTypes',
+            },
+            alias: 'stt',
+            inWhere: true,
+        },
+        format: (row, dashIfEmpty) => dashIfEmpty(row.sageTransactionType),
+    },
+    {
+        align: 'left',
+        label: t('customer.extendedList.tableVisibleColumns.isActive'),
+        name: 'isActive',
+        chip: {
+            color: null,
+            condition: (value) => !value,
+            icon: 'vn:disabled',
+        },
+        columnFilter: {
+            inWhere: true,
+        },
+    },
+    {
+        align: 'left',
+        label: t('customer.extendedList.tableVisibleColumns.isVies'),
+        name: 'isVies',
+        columnFilter: {
+            inWhere: true,
+        },
+    },
+    {
+        align: 'left',
+        label: t('customer.extendedList.tableVisibleColumns.isTaxDataChecked'),
+        name: 'isTaxDataChecked',
+        columnFilter: {
+            inWhere: true,
+        },
+    },
+    {
+        align: 'left',
+        label: t('customer.extendedList.tableVisibleColumns.isEqualizated'),
+        name: 'isEqualizated',
+        create: true,
+        columnFilter: {
+            inWhere: true,
+        },
+    },
+    {
+        align: 'left',
+        label: t('customer.extendedList.tableVisibleColumns.isFreezed'),
+        name: 'isFreezed',
+        chip: {
+            color: null,
+            condition: (value) => value,
+            icon: 'vn:frozen',
+        },
+        columnFilter: {
+            inWhere: true,
+        },
+    },
+    {
+        align: 'left',
+        label: t('customer.extendedList.tableVisibleColumns.hasToInvoice'),
+        name: 'hasToInvoice',
+        columnFilter: {
+            inWhere: true,
+        },
+    },
+    {
+        align: 'left',
+        label: t('customer.extendedList.tableVisibleColumns.hasToInvoiceByAddress'),
+        name: 'hasToInvoiceByAddress',
+        columnFilter: {
+            inWhere: true,
+        },
+    },
+    {
+        align: 'left',
+        label: t('customer.extendedList.tableVisibleColumns.isToBeMailed'),
+        name: 'isToBeMailed',
+        columnFilter: {
+            inWhere: true,
+        },
+    },
+    {
+        align: 'left',
+        label: t('customer.extendedList.tableVisibleColumns.hasLcr'),
+        name: 'hasLcr',
+        columnFilter: {
+            inWhere: true,
+        },
+    },
+    {
+        align: 'left',
+        label: t('customer.extendedList.tableVisibleColumns.hasCoreVnl'),
+        name: 'hasCoreVnl',
+        columnFilter: {
+            inWhere: true,
+        },
+    },
+    {
+        align: 'left',
+        label: t('customer.extendedList.tableVisibleColumns.hasSepaVnl'),
+        name: 'hasSepaVnl',
+        columnFilter: {
+            inWhere: true,
+        },
+    },
+    {
+        align: 'right',
+        label: '',
+        name: 'tableActions',
+        actions: [
+            {
+                title: t('Client ticket list'),
+                icon: 'vn:ticket',
+                action: redirectToCreateView,
+                isPrimary: true,
+            },
+            {
+                title: t('Client ticket list'),
+                icon: 'preview',
+                action: (row) => viewSummary(row.id, CustomerSummary),
+            },
+        ],
+    },
+]);
+
 const { viewSummary } = useSummaryDialog();
-
-function navigate(id) {
-    router.push({ path: `/customer/${id}` });
-}
-
-const redirectToCreateView = () => {
-    router.push({ name: 'CustomerCreate' });
+const redirectToCreateView = (row) => {
+    router.push({
+        name: 'TicketList',
+        query: {
+            params: JSON.stringify({
+                clientFk: row.id,
+            }),
+        },
+    });
 };
+
+function handleLocation(data, location) {
+    const { town, code, provinceFk, countryFk } = location ?? {};
+    data.postcode = code;
+    data.city = town;
+    data.provinceFk = provinceFk;
+    data.countryFk = countryFk;
+}
 </script>
 
 <template>
-    <VnSearchbar
-        :info="t('You can search by customer id or name')"
-        :label="t('Search customer')"
-        data-key="CustomerList"
-    />
-    <RightMenu>
-        <template #right-panel>
-            <CustomerFilter data-key="CustomerList" />
-        </template>
-    </RightMenu>
-    <QPage class="column items-center q-pa-md">
-        <div class="vn-card-list">
-            <VnPaginate
-                auto-load
-                data-key="CustomerList"
-                order="id DESC"
-                url="/Clients/filter"
-            >
-                <template #body="{ rows }">
-                    <CardList
-                        :id="row.id"
-                        :key="row.id"
-                        :title="row.name"
-                        @click="navigate(row.id)"
-                        v-for="row of rows"
-                    >
-                        <template #list-items>
-                            <VnLv :label="t('customer.list.email')" :value="row.email" />
-                            <VnLv :value="row.phone">
-                                <template #label>
-                                    {{ t('customer.list.phone') }}
-                                    <VnLinkPhone :phone-number="row.phone" />
-                                </template>
-                            </VnLv>
-                        </template>
-                        <template #actions>
-                            <QBtn
-                                :label="t('components.smartCard.openCard')"
-                                @click.stop="navigate(row.id)"
-                                outline
-                            />
-                            <QBtn
-                                :label="t('components.smartCard.openSummary')"
-                                @click.stop="viewSummary(row.id, CustomerSummary)"
-                                color="primary"
-                                style="margin-top: 15px"
-                            />
-                        </template>
-                    </CardList>
+    <VnTable
+        ref="tableRef"
+        data-key="CustomerExtendedList"
+        url="Clients/extendedListFilter"
+        :create="{
+            urlCreate: 'Clients/createWithUser',
+            title: 'Create client',
+            onDataSaved: ({ id }) => tableRef.redirect(id),
+            formInitialData: {
+                active: true,
+                isEqualizated: false,
+            },
+        }"
+        order="id DESC"
+        :columns="columns"
+        default-mode="table"
+        redirect="customer"
+        auto-load
+    >
+        <template #more-create-dialog="{ data }">
+            <VnLocation
+                :roles-allowed-to-create="['deliveryAssistant']"
+                :options="postcodesOptions"
+                v-model="data.location"
+                @update:model-value="(location) => handleLocation(data, location)"
+            />
+            <QInput v-model="data.userName" :label="t('Web user')" />
+            <QInput :label="t('Email')" clearable type="email" v-model="data.email">
+                <template #append>
+                    <QIcon name="info" class="cursor-info">
+                        <QTooltip max-width="400px">{{
+                            t('customer.basicData.youCanSaveMultipleEmails')
+                        }}</QTooltip>
+                    </QIcon>
                 </template>
-            </VnPaginate>
-        </div>
-        <QPageSticky :offset="[20, 20]">
-            <QBtn @click="redirectToCreateView()" color="primary" fab icon="add" />
-            <QTooltip>
-                {{ t('New client') }}
-            </QTooltip>
-        </QPageSticky>
-    </QPage>
+            </QInput>
+        </template>
+    </VnTable>
 </template>
-
 <i18n>
 es:
-    Search customer: Buscar cliente
-    You can search by customer id or name: Puedes buscar por id o nombre del cliente
-    New client: Nuevo cliente
+    Web user: Usuario Web
 </i18n>
+<style lang="scss" scoped>
+.col-content {
+    border-radius: 4px;
+    padding: 6px;
+}
+</style>
diff --git a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue b/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
deleted file mode 100644
index 21e1ebeed..000000000
--- a/src/pages/Customer/ExtendedList/CustomerExtendedList.vue
+++ /dev/null
@@ -1,429 +0,0 @@
-<script setup>
-import { ref, computed, markRaw } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
-import VnTable from 'components/VnTable/VnTable.vue';
-import VnLocation from 'src/components/common/VnLocation.vue';
-import CustomerSummary from '../Card/CustomerSummary.vue';
-import { useSummaryDialog } from 'src/composables/useSummaryDialog';
-
-import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
-
-import { toDate } from 'src/filters';
-
-const { t } = useI18n();
-const router = useRouter();
-
-const postcodesOptions = ref([]);
-const tableRef = ref();
-
-const columns = computed(() => [
-    {
-        align: 'left',
-        name: 'id',
-        label: t('customer.extendedList.tableVisibleColumns.id'),
-        chip: {
-            condition: () => true,
-        },
-        isId: true,
-        columnFilter: {
-            component: 'select',
-            name: 'search',
-            attrs: {
-                url: 'Clients',
-                fields: ['id', 'name'],
-            },
-        },
-    },
-    {
-        align: 'left',
-        label: t('customer.extendedList.tableVisibleColumns.name'),
-        name: 'name',
-        isTitle: true,
-        create: true,
-    },
-    {
-        align: 'left',
-        name: 'socialName',
-        label: t('customer.extendedList.tableVisibleColumns.socialName'),
-        isTitle: true,
-        create: true,
-    },
-    {
-        align: 'left',
-        label: t('customer.extendedList.tableVisibleColumns.fi'),
-        name: 'fi',
-        create: true,
-    },
-    {
-        align: 'left',
-        label: t('customer.extendedList.tableVisibleColumns.salesPersonFk'),
-        name: 'salesPersonFk',
-        component: 'select',
-        attrs: {
-            url: 'Workers/activeWithInheritedRole',
-            fields: ['id', 'name'],
-            where: { role: 'salesPerson' },
-        },
-        create: true,
-        columnField: {
-            component: null,
-        },
-        format: (row, dashIfEmpty) => dashIfEmpty(row.salesPerson),
-    },
-    {
-        align: 'left',
-        label: t('customer.extendedList.tableVisibleColumns.credit'),
-        name: 'credit',
-        component: 'number',
-        columnFilter: {
-            inWhere: true,
-        },
-    },
-    {
-        align: 'left',
-        label: t('customer.extendedList.tableVisibleColumns.creditInsurance'),
-        name: 'creditInsurance',
-        component: 'number',
-        columnFilter: {
-            inWhere: true,
-        },
-    },
-    {
-        align: 'left',
-        label: t('customer.extendedList.tableVisibleColumns.phone'),
-        name: 'phone',
-        cardVisible: true,
-        after: {
-            component: markRaw(VnLinkPhone),
-            props: (prop) => ({
-                'phone-number': prop.phone,
-            }),
-        },
-        component: 'number',
-        columnField: {
-            component: null,
-        },
-    },
-    {
-        align: 'left',
-        label: t('customer.extendedList.tableVisibleColumns.mobile'),
-        name: 'mobile',
-        cardVisible: true,
-        columnFilter: {
-            component: 'number',
-            inWhere: true,
-        },
-    },
-    {
-        align: 'left',
-        label: t('customer.extendedList.tableVisibleColumns.street'),
-        name: 'street',
-        create: true,
-        columnFilter: {
-            inWhere: true,
-        },
-    },
-    {
-        align: 'left',
-        label: t('customer.extendedList.tableVisibleColumns.countryFk'),
-        name: 'countryFk',
-        columnFilter: {
-            component: 'select',
-            inWhere: true,
-            alias: 'c',
-            attrs: {
-                url: 'Countries',
-            },
-        },
-        format: (row, dashIfEmpty) => dashIfEmpty(row.country),
-    },
-    {
-        align: 'left',
-        label: t('customer.extendedList.tableVisibleColumns.provinceFk'),
-        name: 'provinceFk',
-        component: 'select',
-        attrs: {
-            url: 'Provinces',
-        },
-        columnField: {
-            component: null,
-        },
-        format: (row, dashIfEmpty) => dashIfEmpty(row.province),
-    },
-    {
-        align: 'left',
-        label: t('customer.extendedList.tableVisibleColumns.city'),
-        name: 'city',
-    },
-    {
-        align: 'left',
-        label: t('customer.extendedList.tableVisibleColumns.postcode'),
-        name: 'postcode',
-    },
-    {
-        align: 'left',
-        label: t('customer.extendedList.tableVisibleColumns.email'),
-        name: 'email',
-        cardVisible: true,
-    },
-    {
-        align: 'left',
-        label: t('customer.extendedList.tableVisibleColumns.created'),
-        name: 'created',
-        format: ({ created }) => toDate(created),
-        component: 'date',
-        columnFilter: {
-            alias: 'c',
-            inWhere: true,
-        },
-    },
-    {
-        align: 'left',
-        label: t('customer.extendedList.tableVisibleColumns.businessTypeFk'),
-        name: 'businessTypeFk',
-        create: true,
-        component: 'select',
-        attrs: {
-            url: 'BusinessTypes',
-            optionLabel: 'description',
-            optionValue: 'code',
-        },
-        columnField: {
-            component: null,
-        },
-        format: (row, dashIfEmpty) => dashIfEmpty(row.businessType),
-    },
-    {
-        align: 'left',
-        label: t('customer.extendedList.tableVisibleColumns.payMethodFk'),
-        name: 'payMethodFk',
-        columnFilter: {
-            component: 'select',
-            attrs: {
-                url: 'PayMethods',
-            },
-            inWhere: true,
-        },
-        format: (row, dashIfEmpty) => dashIfEmpty(row.payMethod),
-    },
-    {
-        align: 'left',
-        label: t('customer.extendedList.tableVisibleColumns.sageTaxTypeFk'),
-        name: 'sageTaxTypeFk',
-        columnFilter: {
-            component: 'select',
-            attrs: {
-                optionLabel: 'vat',
-                url: 'SageTaxTypes',
-            },
-            alias: 'sti',
-            inWhere: true,
-        },
-        format: (row, dashIfEmpty) => dashIfEmpty(row.sageTaxType),
-    },
-    {
-        align: 'left',
-        label: t('customer.extendedList.tableVisibleColumns.sageTransactionTypeFk'),
-        name: 'sageTransactionTypeFk',
-        columnFilter: {
-            component: 'select',
-            attrs: {
-                optionLabel: 'transaction',
-                url: 'SageTransactionTypes',
-            },
-            alias: 'stt',
-            inWhere: true,
-        },
-        format: (row, dashIfEmpty) => dashIfEmpty(row.sageTransactionType),
-    },
-    {
-        align: 'left',
-        label: t('customer.extendedList.tableVisibleColumns.isActive'),
-        name: 'isActive',
-        chip: {
-            color: null,
-            condition: (value) => !value,
-            icon: 'vn:disabled',
-        },
-        columnFilter: {
-            inWhere: true,
-        },
-    },
-    {
-        align: 'left',
-        label: t('customer.extendedList.tableVisibleColumns.isVies'),
-        name: 'isVies',
-        columnFilter: {
-            inWhere: true,
-        },
-    },
-    {
-        align: 'left',
-        label: t('customer.extendedList.tableVisibleColumns.isTaxDataChecked'),
-        name: 'isTaxDataChecked',
-        columnFilter: {
-            inWhere: true,
-        },
-    },
-    {
-        align: 'left',
-        label: t('customer.extendedList.tableVisibleColumns.isEqualizated'),
-        name: 'isEqualizated',
-        create: true,
-        columnFilter: {
-            inWhere: true,
-        },
-    },
-    {
-        align: 'left',
-        label: t('customer.extendedList.tableVisibleColumns.isFreezed'),
-        name: 'isFreezed',
-        chip: {
-            color: null,
-            condition: (value) => value,
-            icon: 'vn:frozen',
-        },
-        columnFilter: {
-            inWhere: true,
-        },
-    },
-    {
-        align: 'left',
-        label: t('customer.extendedList.tableVisibleColumns.hasToInvoice'),
-        name: 'hasToInvoice',
-        columnFilter: {
-            inWhere: true,
-        },
-    },
-    {
-        align: 'left',
-        label: t('customer.extendedList.tableVisibleColumns.hasToInvoiceByAddress'),
-        name: 'hasToInvoiceByAddress',
-        columnFilter: {
-            inWhere: true,
-        },
-    },
-    {
-        align: 'left',
-        label: t('customer.extendedList.tableVisibleColumns.isToBeMailed'),
-        name: 'isToBeMailed',
-        columnFilter: {
-            inWhere: true,
-        },
-    },
-    {
-        align: 'left',
-        label: t('customer.extendedList.tableVisibleColumns.hasLcr'),
-        name: 'hasLcr',
-        columnFilter: {
-            inWhere: true,
-        },
-    },
-    {
-        align: 'left',
-        label: t('customer.extendedList.tableVisibleColumns.hasCoreVnl'),
-        name: 'hasCoreVnl',
-        columnFilter: {
-            inWhere: true,
-        },
-    },
-    {
-        align: 'left',
-        label: t('customer.extendedList.tableVisibleColumns.hasSepaVnl'),
-        name: 'hasSepaVnl',
-        columnFilter: {
-            inWhere: true,
-        },
-    },
-    {
-        align: 'right',
-        label: '',
-        name: 'tableActions',
-        actions: [
-            {
-                title: t('Client ticket list'),
-                icon: 'vn:ticket',
-                action: redirectToCreateView,
-                isPrimary: true,
-            },
-            {
-                title: t('Client ticket list'),
-                icon: 'preview',
-                action: (row) => viewSummary(row.id, CustomerSummary),
-            },
-        ],
-    },
-]);
-
-const { viewSummary } = useSummaryDialog();
-const redirectToCreateView = (row) => {
-    router.push({
-        name: 'TicketList',
-        query: {
-            params: JSON.stringify({
-                clientFk: row.id,
-            }),
-        },
-    });
-};
-
-function handleLocation(data, location) {
-    const { town, code, provinceFk, countryFk } = location ?? {};
-    data.postcode = code;
-    data.city = town;
-    data.provinceFk = provinceFk;
-    data.countryFk = countryFk;
-}
-</script>
-
-<template>
-    <VnTable
-        ref="tableRef"
-        data-key="CustomerExtendedList"
-        url="Clients/extendedListFilter"
-        :create="{
-            urlCreate: 'Clients/createWithUser',
-            title: 'Create client',
-            onDataSaved: ({ id }) => tableRef.redirect(id),
-            formInitialData: {
-                active: true,
-                isEqualizated: false,
-            },
-        }"
-        order="id DESC"
-        :columns="columns"
-        default-mode="table"
-        redirect="customer"
-        auto-load
-    >
-        <template #more-create-dialog="{ data }">
-            <VnLocation
-                :roles-allowed-to-create="['deliveryAssistant']"
-                :options="postcodesOptions"
-                v-model="data.location"
-                @update:model-value="(location) => handleLocation(data, location)"
-            />
-            <QInput v-model="data.userName" :label="t('Web user')" />
-            <QInput :label="t('Email')" clearable type="email" v-model="data.email">
-                <template #append>
-                    <QIcon name="info" class="cursor-info">
-                        <QTooltip max-width="400px">{{
-                            t('customer.basicData.youCanSaveMultipleEmails')
-                        }}</QTooltip>
-                    </QIcon>
-                </template>
-            </QInput>
-        </template>
-    </VnTable>
-</template>
-<i18n>
-es:
-    Web user: Usuario Web
-</i18n>
-<style lang="scss" scoped>
-.col-content {
-    border-radius: 4px;
-    padding: 6px;
-}
-</style>
diff --git a/src/router/modules/customer.js b/src/router/modules/customer.js
index 092d60639..3aece0dfe 100644
--- a/src/router/modules/customer.js
+++ b/src/router/modules/customer.js
@@ -14,7 +14,6 @@ export default {
         main: [
             'CustomerList',
             'CustomerPayments',
-            'CustomerExtendedList',
             'CustomerNotifications',
             'CustomerDefaulter',
         ],
@@ -70,18 +69,6 @@ export default {
                     component: () =>
                         import('src/pages/Customer/Payments/CustomerPayments.vue'),
                 },
-                {
-                    path: 'extendedList',
-                    name: 'CustomerExtendedList',
-                    meta: {
-                        title: 'extendedList',
-                        icon: 'vn:client',
-                    },
-                    component: () =>
-                        import(
-                            'src/pages/Customer/ExtendedList/CustomerExtendedList.vue'
-                        ),
-                },
                 {
                     path: 'notifications',
                     name: 'CustomerNotifications',

From fb1bd5ca7236f1f8be1281c3cb80427a4cc8b8f0 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Mon, 17 Jun 2024 11:29:36 +0200
Subject: [PATCH 084/167] fix: bug replace

---
 src/components/CrudModel.vue       | 6 +++++-
 src/components/VnTable/VnTable.vue | 3 ++-
 src/composables/useArrayData.js    | 3 ++-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/CrudModel.vue b/src/components/CrudModel.vue
index 8d0935288..c26a9c4a5 100644
--- a/src/components/CrudModel.vue
+++ b/src/components/CrudModel.vue
@@ -67,6 +67,10 @@ const $props = defineProps({
         default: '',
         description: 'It is used for redirect on click "save and continue"',
     },
+    hasSubtoolbar: {
+        type: Boolean,
+        default: true,
+    },
 });
 
 const isLoading = ref(false);
@@ -310,7 +314,7 @@ watch(formUrl, async () => {
         </template>
     </VnPaginate>
     <SkeletonTable v-if="!formData" :columns="$attrs.columns?.length" />
-    <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
+    <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown() && hasSubtoolbar">
         <QBtnGroup push style="column-gap: 10px">
             <slot name="moreBeforeActions" />
             <QBtn
diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index bc1c65130..262f85f96 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -53,7 +53,7 @@ const $props = defineProps({
     },
     isEditable: {
         type: Boolean,
-        default: null,
+        default: false,
     },
     useModel: {
         type: Boolean,
@@ -220,6 +220,7 @@ defineExpose({
             :search-url="searchUrl"
             :disable-infinite-scroll="mode == 'table'"
             @save-changes="reload"
+            :has-subtoolbar="isEditable"
         >
             <template #body="{ rows }">
                 <QTable
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index 3b50b60ad..f97ade7bf 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -1,4 +1,4 @@
-import { onMounted, ref, computed, onUnmounted } from 'vue';
+import { onMounted, ref, computed } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import axios from 'axios';
 import { useArrayDataStore } from 'stores/useArrayDataStore';
@@ -221,6 +221,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
                 const pushUrl = { path: to };
                 if (to.endsWith('/list') || to.endsWith('/'))
                     pushUrl.query = newUrl.query;
+                destroy();
                 return router.push(pushUrl);
             }
         }

From 3394eb10b01689b52b2d4066f00114467986450d Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Mon, 17 Jun 2024 12:58:58 +0200
Subject: [PATCH 085/167] fix(VnFilterPanel): remove key

---
 src/components/VnTable/VnColumn.vue | 46 +++++++++++++++--------------
 src/components/ui/VnFilterPanel.vue | 17 ++++-------
 src/pages/Customer/CustomerList.vue | 16 ++++++----
 3 files changed, 39 insertions(+), 40 deletions(-)

diff --git a/src/components/VnTable/VnColumn.vue b/src/components/VnTable/VnColumn.vue
index 9f8614fe5..6a52e0158 100644
--- a/src/components/VnTable/VnColumn.vue
+++ b/src/components/VnTable/VnColumn.vue
@@ -134,26 +134,28 @@ const col = computed(() => {
 const components = computed(() => $props.components ?? defaultComponents);
 </script>
 <template>
-    <VnComponent
-        v-if="col.before"
-        :prop="col.before"
-        :components="components"
-        :value="model"
-        v-model="model"
-    />
-    <VnComponent
-        v-if="col.component"
-        :prop="col"
-        :components="components"
-        :value="model"
-        v-model="model"
-    />
-    <span :title="value" v-else>{{ value }}</span>
-    <VnComponent
-        v-if="col.after"
-        :prop="col.after"
-        :components="components"
-        :value="model"
-        v-model="model"
-    />
+    <div class="row no-wrap fit">
+        <VnComponent
+            v-if="col.before"
+            :prop="col.before"
+            :components="components"
+            :value="model"
+            v-model="model"
+        />
+        <VnComponent
+            v-if="col.component"
+            :prop="col"
+            :components="components"
+            :value="model"
+            v-model="model"
+        />
+        <span :title="value" v-else>{{ value }}</span>
+        <VnComponent
+            v-if="col.after"
+            :prop="col.after"
+            :components="components"
+            :value="model"
+            v-model="model"
+        />
+    </div>
 </template>
diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue
index 3e892cb41..218e28600 100644
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@@ -147,7 +147,7 @@ const tagsList = computed(() => {
     const tagList = [];
     for (const key of Object.keys(params.value)) {
         const value = params.value[key];
-        if (!value || ($props.hiddenTags || []).includes(key)) continue;
+        if (value == null || ($props.hiddenTags || []).includes(key)) continue;
         tagList.push({ label: key, value });
     }
     return tagList;
@@ -161,21 +161,14 @@ const customTags = computed(() =>
 );
 
 async function remove(key) {
-    delete params.value[key];
-    delete params.value.filter?.where?.[key];
     params.value[key] = undefined;
-    await arrayData.applyFilter({ params: params.value });
+    search();
     emit('remove', key);
 }
 
 function formatValue(value) {
-    if (typeof value === 'boolean') {
-        return value ? t('Yes') : t('No');
-    }
-
-    if (isNaN(value) && !isNaN(Date.parse(value))) {
-        return toDate(value);
-    }
+    if (typeof value === 'boolean') return value ? t('Yes') : t('No');
+    if (isNaN(value) && !isNaN(Date.parse(value))) return toDate(value);
 
     return `"${value}"`;
 }
@@ -236,7 +229,7 @@ function formatValue(value) {
                         <slot name="tags" :tag="chip" :format-fn="formatValue">
                             <div class="q-gutter-x-xs">
                                 <strong>{{ chip.label }}:</strong>
-                                <span>"{{ chip.value }}"</span>
+                                <span>"{{ formatValue(chip.value) }}"</span>
                             </div>
                         </slot>
                     </VnFilterPanelChip>
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index c069810d3..7eb3cefd0 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -94,15 +94,19 @@ const columns = computed(() => [
         label: t('customer.extendedList.tableVisibleColumns.phone'),
         name: 'phone',
         cardVisible: true,
-        after: {
-            component: markRaw(VnLinkPhone),
-            props: (prop) => ({
-                'phone-number': prop.phone,
-            }),
+        columnFilter: {
+            component: 'number',
         },
-        component: 'number',
         columnField: {
             component: null,
+            after: {
+                component: markRaw(VnLinkPhone),
+                attrs: (prop) => {
+                    return {
+                        'phone-number': prop,
+                    };
+                },
+            },
         },
     },
     {

From c807b5feb278c6918bec7f02189d226c5810f9ee Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Mon, 17 Jun 2024 08:21:43 -0300
Subject: [PATCH 086/167] Weekly tickets

---
 src/i18n/locale/en.yml            |   1 +
 src/i18n/locale/es.yml            |   1 +
 src/pages/Ticket/TicketWeekly.vue | 327 ++++++++++++++++++++++++++++++
 src/pages/Ticket/locale/en.yml    |   9 +
 src/pages/Ticket/locale/es.yml    |   9 +
 src/router/modules/ticket.js      |  11 +-
 6 files changed, 357 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/Ticket/TicketWeekly.vue
 create mode 100644 src/pages/Ticket/locale/en.yml

diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index 5ef3a5472..7f212ca30 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -442,6 +442,7 @@ ticket:
         sms: Sms
         notes: Notes
         sale: Sale
+        weeklyTickets: Weekly tickets
     list:
         nickname: Nickname
         state: State
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index cfadd57b3..ff357492b 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -440,6 +440,7 @@ ticket:
         sms: Sms
         notes: Notas
         sale: Lineas del pedido
+        weeklyTickets: Tickets programados
     list:
         nickname: Alias
         state: Estado
diff --git a/src/pages/Ticket/TicketWeekly.vue b/src/pages/Ticket/TicketWeekly.vue
new file mode 100644
index 000000000..50b4c0451
--- /dev/null
+++ b/src/pages/Ticket/TicketWeekly.vue
@@ -0,0 +1,327 @@
+<script setup>
+import { onMounted, ref, computed, reactive, onUnmounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+
+import FetchData from 'components/FetchData.vue';
+import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
+import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
+import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import VnPaginate from 'components/ui/VnPaginate.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+
+import { useStateStore } from 'stores/useStateStore';
+import { dashIfEmpty } from 'src/filters';
+import { useVnConfirm } from 'composables/useVnConfirm';
+import { useArrayData } from 'composables/useArrayData';
+import useNotify from 'src/composables/useNotify.js';
+import axios from 'axios';
+
+const router = useRouter();
+const stateStore = useStateStore();
+const { t } = useI18n();
+const { openConfirmationModal } = useVnConfirm();
+const { notify } = useNotify();
+
+const paginateRef = ref(null);
+const agencyModesOptions = ref([]);
+const visibleColumns = ref([]);
+const allColumnNames = ref([]);
+
+const arrayData = useArrayData('WeeklyTickets');
+const { store } = arrayData;
+
+const weekdays = [
+    { id: 0, name: t('weekdays.mon') },
+    { id: 1, name: t('weekdays.tue') },
+    { id: 2, name: t('weekdays.wed') },
+    { id: 3, name: t('weekdays.thu') },
+    { id: 4, name: t('weekdays.fri') },
+    { id: 5, name: t('weekdays.sat') },
+    { id: 6, name: t('weekdays.sun') },
+];
+
+const exprBuilder = (param, value) => {
+    switch (param) {
+        case 'clientName':
+            return { 'c.name': value };
+        case 'nickName':
+            return { 'u.name': value };
+    }
+};
+
+const params = reactive({});
+
+const applyColumnFilter = async (col) => {
+    try {
+        const paramKey = col.columnFilter?.filterParamKey || col.field;
+        params[paramKey] = col.columnFilter.filterValue;
+        console.log('paramKey', paramKey, 'params', params);
+        await paginateRef.value.addFilter(null, params);
+    } catch (err) {
+        console.error('Error applying column filter', err);
+    }
+};
+
+const getInputEvents = (col) => ({ 'update:modelValue': () => applyColumnFilter(col) });
+
+const columns = computed(() => [
+    {
+        label: t('weeklyTickets.id'),
+        name: 'id',
+        field: 'ticketFk',
+        align: 'left',
+        sortable: true,
+        columnFilter: null,
+    },
+    {
+        label: t('weeklyTickets.client'),
+        name: 'client',
+        field: 'clientName',
+        align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
+        format: (val) => dashIfEmpty(val),
+    },
+    {
+        label: t('weeklyTickets.shipment'),
+        name: 'shipment',
+        field: 'weekDay',
+        align: 'left',
+        sortable: true,
+        columnFilter: null,
+    },
+    {
+        label: t('weeklyTickets.agency'),
+        name: 'agency',
+        field: 'agencyModeFk',
+        align: 'left',
+        sortable: true,
+        columnFilter: null,
+    },
+    {
+        label: t('weeklyTickets.warehouse'),
+        name: 'warehouse',
+        field: 'warehouseName',
+        align: 'left',
+        sortable: true,
+        columnFilter: null,
+    },
+    {
+        label: t('weeklyTickets.salesperson'),
+        field: 'salesperson',
+        name: 'salesperson',
+        align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            filterParamKey: 'nickName',
+            attrs: {
+                dense: true,
+            },
+        },
+    },
+    {
+        label: '',
+        name: 'actions',
+        align: 'left',
+        columnFilter: null,
+    },
+]);
+
+const redirectToTicketSummary = (ticketFk) =>
+    router.push({ name: 'TicketSummary', params: { id: ticketFk } });
+
+const deleteWeekly = async (ticketFk) => {
+    try {
+        await axios.delete(`TicketWeeklies/${ticketFk}`);
+        notify(t('globals.dataSaved'), 'positive');
+        const ticketIndex = store.data.findIndex((e) => e.ticketFk == ticketFk);
+        store.data.splice(ticketIndex, 1);
+    } catch (err) {
+        console.error('Error deleting weekly', err);
+    }
+};
+
+const onUpdate = async (ticketFk, field, value) => {
+    try {
+        const params = { ticketFk, [field]: value };
+        await axios.patch('TicketWeeklies', params);
+    } catch (err) {
+        console.error('Error updating weekly', err);
+    }
+};
+
+onMounted(async () => {
+    stateStore.rightDrawer = true;
+    const filteredColumns = columns.value.filter((col) => col.name !== 'actions');
+    allColumnNames.value = filteredColumns.map((col) => col.name);
+});
+
+onUnmounted(() => (stateStore.rightDrawer = false));
+</script>
+
+<template>
+    <FetchData
+        url="AgencyModes/isActive"
+        :filter="{ fields: ['id', 'name'], order: 'name' }"
+        auto-load
+        @on-fetch="(data) => (agencyModesOptions = data)"
+    />
+    <VnSearchbar
+        data-key="WeeklyTickets"
+        :label="t('weeklyTickets.search')"
+        :info="t('weeklyTickets.searchInfo')"
+    />
+    <VnSubToolbar>
+        <template #st-data>
+            <TableVisibleColumns
+                :all-columns="allColumnNames"
+                table-code="itemsIndex"
+                labels-traductions-path="weeklyTickets"
+                @on-config-saved="visibleColumns = [...$event, 'actions']"
+            />
+        </template>
+    </VnSubToolbar>
+    <QPage class="column items-center q-pa-md">
+        <VnPaginate
+            ref="paginateRef"
+            data-key="WeeklyTickets"
+            url="TicketWeeklies/filter"
+            :order="['weekDay', 'ticketFk']"
+            :limit="20"
+            :expr-builder="exprBuilder"
+            :user-params="params"
+            :offset="50"
+            auto-load
+        >
+            <template #body="{ rows }">
+                <QTable
+                    :rows="rows"
+                    :columns="columns"
+                    row-key="id"
+                    :pagination="{ rowsPerPage: 0 }"
+                    class="full-width q-mt-md"
+                    :visible-columns="visibleColumns"
+                    :no-data-label="t('globals.noResults')"
+                    @row-click="(_, row) => redirectToTicketSummary(row.ticketFk)"
+                >
+                    <template #top-row="{ cols }">
+                        <QTr>
+                            <QTd
+                                v-for="(col, index) in cols"
+                                :key="index"
+                                style="max-width: 100px"
+                            >
+                                <component
+                                    :is="col.columnFilter.component"
+                                    v-if="col.columnFilter"
+                                    v-model="col.columnFilter.filterValue"
+                                    v-bind="col.columnFilter.attrs"
+                                    v-on="col.columnFilter.event(col)"
+                                    dense
+                                />
+                            </QTd>
+                        </QTr>
+                    </template>
+                    <template #body-cell-id="{ row }">
+                        <QTd @click.stop>
+                            <QBtn flat color="primary">
+                                {{ row.ticketFk }}
+                                <TicketDescriptorProxy :id="row.ticketFk" />
+                            </QBtn>
+                        </QTd>
+                    </template>
+                    <template #body-cell-salesperson="{ row }">
+                        <QTd @click.stop>
+                            <QBtn flat color="primary">
+                                {{ row.userName }}
+                                <WorkerDescriptorProxy :id="row.workerFk" />
+                            </QBtn>
+                        </QTd>
+                    </template>
+                    <template #body-cell-client="{ row }">
+                        <QTd @click.stop>
+                            <QBtn flat color="primary" dense>
+                                {{ row.clientName }}
+                                <CustomerDescriptorProxy :id="row.clientFk" />
+                            </QBtn>
+                        </QTd>
+                    </template>
+                    <template #body-cell-shipment="{ row }">
+                        <QTd @click.stop>
+                            <VnSelect
+                                :options="weekdays"
+                                hide-selected
+                                option-label="name"
+                                option-value="id"
+                                v-model="row.weekDay"
+                                @update:model-value="
+                                    onUpdate(row.ticketFk, 'weekDay', $event)
+                                "
+                            />
+                        </QTd>
+                    </template>
+                    <template #body-cell-agency="{ row }">
+                        <QTd @click.stop>
+                            <VnSelect
+                                :options="agencyModesOptions"
+                                hide-selected
+                                option-label="name"
+                                option-value="id"
+                                v-model="row.agencyModeFk"
+                                @update:model-value="
+                                    onUpdate(row.ticketFk, 'agencyModeFk', $event)
+                                "
+                            />
+                        </QTd>
+                    </template>
+                    <template #body-cell-actions="{ row }">
+                        <QTd>
+                            <QIcon
+                                @click.stop="
+                                    openConfirmationModal(
+                                        t('You are going to delete this weekly ticket'),
+                                        t(
+                                            'This ticket will be removed from weekly tickets! Continue anyway?'
+                                        ),
+                                        () => deleteWeekly(row.ticketFk)
+                                    )
+                                "
+                                class="q-ml-sm cursor-pointer"
+                                color="primary"
+                                name="delete"
+                                size="sm"
+                            >
+                                <QTooltip>
+                                    {{ t('globals.delete') }}
+                                </QTooltip>
+                            </QIcon>
+                        </QTd>
+                    </template>
+                </QTable>
+            </template>
+        </VnPaginate>
+    </QPage>
+</template>
+
+<i18n>
+es:
+    You are going to delete this weekly ticket: Vas a eliminar este ticket programado
+    This ticket will be removed from weekly tickets! Continue anyway?: Este ticket se eliminará de tickets programados! ¿Continuar de todas formas?
+</i18n>
diff --git a/src/pages/Ticket/locale/en.yml b/src/pages/Ticket/locale/en.yml
new file mode 100644
index 000000000..a4c5b78ac
--- /dev/null
+++ b/src/pages/Ticket/locale/en.yml
@@ -0,0 +1,9 @@
+weeklyTickets:
+    id: Ticket ID
+    client: Client
+    shipment: Shipment
+    agency: Agency
+    warehouse: Warehouse
+    salesperson: Salesperson
+    search: Search weekly tickets
+    searchInfo: Search weekly tickets by id or client id
diff --git a/src/pages/Ticket/locale/es.yml b/src/pages/Ticket/locale/es.yml
index 5348b29b9..0e2f77d73 100644
--- a/src/pages/Ticket/locale/es.yml
+++ b/src/pages/Ticket/locale/es.yml
@@ -1,2 +1,11 @@
+weeklyTickets:
+    id: ID Ticket
+    client: Cliente
+    shipment: Salida
+    agency: Agencia
+    warehouse: Almacén
+    salesperson: Comercial
+    search: Buscar por tickets programados
+    searchInfo: Buscar tickets programados por el identificador o el identificador del cliente
 Search ticket: Buscar ticket
 You can search by ticket id or alias: Puedes buscar por id o alias del ticket
diff --git a/src/router/modules/ticket.js b/src/router/modules/ticket.js
index 6cb7291dc..e92ba6650 100644
--- a/src/router/modules/ticket.js
+++ b/src/router/modules/ticket.js
@@ -11,7 +11,7 @@ export default {
     component: RouterView,
     redirect: { name: 'TicketMain' },
     menus: {
-        main: ['TicketList'],
+        main: ['TicketList', 'TicketWeekly'],
         card: ['TicketBoxing', 'TicketSms', 'TicketSale'],
     },
     children: [
@@ -40,6 +40,15 @@ export default {
                     },
                     component: () => import('src/pages/Ticket/TicketCreate.vue'),
                 },
+                {
+                    name: 'TicketWeekly',
+                    path: 'weekly',
+                    meta: {
+                        title: 'weeklyTickets',
+                        icon: 'access_time',
+                    },
+                    component: () => import('src/pages/Ticket/TicketWeekly.vue'),
+                },
             ],
         },
         {

From 25ab5a1b9f3bd5a4111b42b46bb177a208a88699 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Mon, 17 Jun 2024 13:55:16 +0200
Subject: [PATCH 087/167] refs #7409 front section

---
 src/pages/Worker/Card/WorkerBalance.vue | 81 +++++++++++++++++++++++++
 src/router/modules/worker.js            | 10 +++
 2 files changed, 91 insertions(+)
 create mode 100644 src/pages/Worker/Card/WorkerBalance.vue

diff --git a/src/pages/Worker/Card/WorkerBalance.vue b/src/pages/Worker/Card/WorkerBalance.vue
new file mode 100644
index 000000000..7491dbb36
--- /dev/null
+++ b/src/pages/Worker/Card/WorkerBalance.vue
@@ -0,0 +1,81 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import VnTable from 'components/VnTable/VnTable.vue';
+const tableRef = ref();
+const { t } = useI18n();
+const route = useRoute();
+const entityId = computed(() => route.params.id);
+
+const columns = computed(() => [
+    {
+        align: 'left',
+        name: 'paymentDate',
+        label: t('worker.balance.tableVisibleColumns.paymentDate'),
+        create: true,
+        component: 'date',
+        field: 'paymentDate',
+    },
+    {
+        align: 'left',
+        name: 'incomeTypeFk',
+        label: t('worker.balance.tableVisibleColumns.incomeType'),
+        create: true,
+        component: 'select',
+        attrs: {
+            url: 'payrollComponents',
+            fields: ['id', 'name'],
+        },
+    },
+    {
+        align: 'left',
+        name: 'debit',
+        label: t('worker.balance.tableVisibleColumns.debit'),
+        create: true,
+        component: 'input',
+        field: 'debit',
+    },
+    {
+        align: 'left',
+        name: 'credit',
+        label: t('worker.balance.tableVisibleColumns.credit'),
+        create: true,
+        component: 'input',
+        field: 'credit',
+    },
+    {
+        align: 'left',
+        name: 'concept',
+        label: t('worker.balance.tableVisibleColumns.concept'),
+        create: true,
+        component: 'input',
+        field: 'concept',
+    },
+]);
+</script>
+
+<template>
+    <VnTable
+        ref="tableRef"
+        data-key="WorkerBalance"
+        :url="`WorkerIncomes/${entityId}`"
+        :url-create="`WorkerIncomes/${entityId}`"
+        save-url="WorkerIncomes/crud"
+        :create="{
+            urlCreate: 'workerIncomes',
+            title: 'Create workerIncomes',
+            onDataSaved: () => tableRef.reload(),
+            formInitialData: {
+                workerFk: entityId,
+            },
+        }"
+        order="paymentDate DESC"
+        :columns="columns"
+        default-mode="table"
+        auto-load
+        :right-search="false"
+        :is-editable="true"
+        :use-model="true"
+    />
+</template>
diff --git a/src/router/modules/worker.js b/src/router/modules/worker.js
index 384978d13..e67849a59 100644
--- a/src/router/modules/worker.js
+++ b/src/router/modules/worker.js
@@ -23,6 +23,7 @@ export default {
             'WorkerDms',
             'WorkerTimeControl',
             'WorkerLocker',
+            'WorkerBalance',
         ],
         departmentCard: ['BasicData'],
     },
@@ -177,6 +178,15 @@ export default {
                     },
                     component: () => import('src/pages/Worker/Card/WorkerLocker.vue'),
                 },
+                {
+                    name: 'WorkerBalance',
+                    path: 'balance',
+                    meta: {
+                        title: 'balance',
+                        icon: 'balance',
+                    },
+                    component: () => import('src/pages/Worker/Card/WorkerBalance.vue'),
+                },
             ],
         },
     ],

From 0ccfd9ae75422510e4bd7b7b06ab7f82c3cc3144 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Mon, 17 Jun 2024 15:50:33 +0200
Subject: [PATCH 088/167] refs #7409 columns trad

---
 src/i18n/locale/en.yml                  |  9 ++++++++-
 src/i18n/locale/es.yml                  |  8 ++++++++
 src/pages/Worker/Card/WorkerBalance.vue | 11 ++++++++---
 3 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index 2b46649e1..86e330d5d 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -830,7 +830,7 @@ worker:
         calendar: Calendar
         timeControl: Time control
         locker: Locker
-
+        balance: Balance
     list:
         name: Name
         email: Email
@@ -901,6 +901,13 @@ worker:
         iban: IBAN
         bankEntity: Swift / BIC
     imageNotFound: Image not found
+    balance:
+        tableVisibleColumns:
+            paymentDate: Date
+            incomeType: Type
+            debit: Debt
+            credit: Have
+            concept: Concept
 wagon:
     pageTitles:
         wagons: Wagons
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index a8b9ecd51..94aed4cc6 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -828,6 +828,7 @@ worker:
         calendar: Calendario
         timeControl: Control de horario
         locker: Taquilla
+        balance: Balance
     list:
         name: Nombre
         email: Email
@@ -889,6 +890,13 @@ worker:
         iban: IBAN
         bankEntity: Swift / BIC
     imageNotFound: No se ha encontrado la imagen
+    balance:
+        tableVisibleColumns:
+            paymentDate: Fecha
+            incomeType: Tipo
+            debit: Debe
+            credit: Haber
+            concept: Concepto
 wagon:
     pageTitles:
         wagons: Vagones
diff --git a/src/pages/Worker/Card/WorkerBalance.vue b/src/pages/Worker/Card/WorkerBalance.vue
index 7491dbb36..6a76856d5 100644
--- a/src/pages/Worker/Card/WorkerBalance.vue
+++ b/src/pages/Worker/Card/WorkerBalance.vue
@@ -59,12 +59,12 @@ const columns = computed(() => [
     <VnTable
         ref="tableRef"
         data-key="WorkerBalance"
-        :url="`WorkerIncomes/${entityId}`"
-        :url-create="`WorkerIncomes/${entityId}`"
+        :url="`Workers/${entityId}/incomes`"
+        :url-create="`Workers/${entityId}/incomes`"
         save-url="WorkerIncomes/crud"
         :create="{
             urlCreate: 'workerIncomes',
-            title: 'Create workerIncomes',
+            title: t('Create workerIncomes'),
             onDataSaved: () => tableRef.reload(),
             formInitialData: {
                 workerFk: entityId,
@@ -79,3 +79,8 @@ const columns = computed(() => [
         :use-model="true"
     />
 </template>
+
+<i18n>
+    es:
+        Create workerIncomes: Crear
+</i18n>

From 06e8e819f4da8f4c5718d820ce39e73b5cfc6f13 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Mon, 17 Jun 2024 12:11:23 -0300
Subject: [PATCH 089/167] WIP

---
 src/i18n/locale/en.yml            |   1 +
 src/i18n/locale/es.yml            |   1 +
 src/pages/Ticket/TicketFuture.vue | 443 ++++++++++++++++++++++++++++++
 src/pages/Ticket/locale/en.yml    |  22 ++
 src/pages/Ticket/locale/es.yml    |  22 ++
 src/router/modules/ticket.js      |  11 +-
 6 files changed, 499 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/Ticket/TicketFuture.vue
 create mode 100644 src/pages/Ticket/locale/en.yml

diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index 5ef3a5472..9a70e5eb7 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -442,6 +442,7 @@ ticket:
         sms: Sms
         notes: Notes
         sale: Sale
+        futureTickets: Future tickets
     list:
         nickname: Nickname
         state: State
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index cfadd57b3..1a307d3d1 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -440,6 +440,7 @@ ticket:
         sms: Sms
         notes: Notas
         sale: Lineas del pedido
+        futureTickets: Tickets a futuro
     list:
         nickname: Alias
         state: Estado
diff --git a/src/pages/Ticket/TicketFuture.vue b/src/pages/Ticket/TicketFuture.vue
new file mode 100644
index 000000000..ca3753424
--- /dev/null
+++ b/src/pages/Ticket/TicketFuture.vue
@@ -0,0 +1,443 @@
+<script setup>
+import { onMounted, ref, computed, reactive } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import FetchData from 'components/FetchData.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+
+import { dashIfEmpty, toCurrency } from 'src/filters';
+import { useVnConfirm } from 'composables/useVnConfirm';
+import { useArrayData } from 'composables/useArrayData';
+import { getDateQBadgeColor } from 'src/composables/getDateQBadgeColor.js';
+import useNotify from 'src/composables/useNotify.js';
+import { useState } from 'src/composables/useState';
+import { toDateTimeFormat } from 'src/filters/date.js';
+
+const state = useState();
+const { t } = useI18n();
+const { openConfirmationModal } = useVnConfirm();
+const { notify } = useNotify();
+const user = state.getUser();
+
+const agencyModesOptions = ref([]);
+const selectedTickets = ref([]);
+
+const exprBuilder = (param, value) => {
+    switch (param) {
+        case 'id':
+            return { id: value };
+        case 'futureId':
+            return { futureId: value };
+        case 'liters':
+            return { liters: value };
+        case 'lines':
+            return { lines: value };
+        case 'ipt':
+            return { ipt: { like: `%${value}%` } };
+        case 'futureIpt':
+            return { futureIpt: { like: `%${value}%` } };
+        case 'totalWithVat':
+            return { totalWithVat: value };
+    }
+};
+
+const userParams = reactive({
+    futureDated: Date.vnNew(),
+    originDated: Date.vnNew(),
+    warehouseFk: user.value.warehouseFk,
+});
+
+const arrayData = useArrayData('FutureTickets', {
+    url: 'Tickets/getTicketsFuture',
+    userParams: userParams,
+    exprBuilder: exprBuilder,
+});
+const { store } = arrayData;
+
+const params = reactive({
+    futureDated: Date.vnNew(),
+    originDated: Date.vnNew(),
+    warehouseFk: user.value.warehouseFk,
+});
+
+const applyColumnFilter = async (col) => {
+    try {
+        const paramKey = col.columnFilter?.filterParamKey || col.field;
+        params[paramKey] = col.columnFilter.filterValue;
+        console.log('paramKey', paramKey, 'params', params);
+        await arrayData.applyFilter({ params });
+    } catch (err) {
+        console.error('Error applying column filter', err);
+    }
+};
+
+const getInputEvents = (col) => {
+    return col.columnFilter.type === 'select'
+        ? { 'update:modelValue': () => applyColumnFilter(col) }
+        : {
+              'keyup.enter': () => applyColumnFilter(col),
+          };
+};
+
+const ticketColumns = computed(() => [
+    {
+        label: t('futureTickets.problems'),
+        name: 'problems',
+        align: 'left',
+        columnFilter: null,
+    },
+    {
+        label: t('futureTickets.ticketId'),
+        name: 'ticketId',
+        align: 'center',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            filterParamKey: 'id',
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
+    },
+    {
+        label: t('futureTickets.shipped'),
+        name: 'shipped',
+        align: 'left',
+        sortable: true,
+        columnFilter: null,
+    },
+    {
+        label: t('futureTickets.ipt'),
+        name: 'ipt',
+        field: 'ipt',
+        align: 'left',
+        sortable: true,
+        columnFilter: null,
+        format: (val) => dashIfEmpty(val),
+    },
+    {
+        label: t('futureTickets.state'),
+        name: 'state',
+        align: 'left',
+        sortable: true,
+        columnFilter: null,
+    },
+    {
+        label: t('futureTickets.liters'),
+        name: 'liters',
+        field: 'liters',
+        align: 'left',
+        sortable: true,
+        columnFilter: null,
+    },
+    {
+        label: t('futureTickets.import'),
+        field: 'import',
+        name: 'import',
+        align: 'left',
+        sortable: true,
+        // columnFilter: {
+        //     component: VnInput,
+        //     type: 'text',
+        //     filterValue: null,
+        //     event: getInputEvents,
+        //     filterParamKey: 'nickName',
+        //     attrs: {
+        //         dense: true,
+        //     },
+        // },
+    },
+    {
+        label: t('futureTickets.availableLines'),
+        name: 'lines',
+        field: 'lines',
+        align: 'left',
+        sortable: true,
+        columnFilter: null,
+        format: (val) => dashIfEmpty(val),
+    },
+    {
+        label: t('futureTickets.futureId'),
+        name: 'futureId',
+        align: 'left',
+        sortable: true,
+        columnFilter: null,
+    },
+    {
+        label: t('futureTickets.futureShipped'),
+        name: 'futureShipped',
+        align: 'left',
+        sortable: true,
+        columnFilter: null,
+        format: (val) => dashIfEmpty(val),
+    },
+
+    {
+        label: t('futureTickets.futureIpt'),
+        name: 'futureIpt',
+        field: 'futureIpt',
+        align: 'left',
+        sortable: true,
+        columnFilter: null,
+        format: (val) => dashIfEmpty(val),
+    },
+    {
+        label: t('futureTickets.futureState'),
+        name: 'futureState',
+        align: 'left',
+        sortable: true,
+        columnFilter: null,
+        format: (val) => dashIfEmpty(val),
+    },
+]);
+
+const isLessThan50 = (totalWithVat) =>
+    parseInt(totalWithVat) > 0 && parseInt(totalWithVat) < 50;
+
+const totalPriceColor = (totalWithVat) =>
+    isLessThan50(totalWithVat) ? 'warning' : 'transparent';
+
+onMounted(async () => {
+    await arrayData.fetch({ append: false });
+});
+</script>
+
+<template>
+    <FetchData
+        url="Tickets/getTicketsFuture"
+        :filter="{ fields: ['id', 'name'], order: 'name' }"
+        @on-fetch="(data) => (agencyModesOptions = data)"
+    />
+    <VnSearchbar
+        data-key="WeeklyTickets"
+        :label="t('weeklyTickets.search')"
+        :info="t('weeklyTickets.searchInfo')"
+    />
+    <VnSubToolbar>
+        <template #st-data>
+            <QBtn icon="keyboard_double_arrow_right" color="primary" />
+        </template>
+    </VnSubToolbar>
+    <QPage class="column items-center q-pa-md">
+        <QTable
+            :rows="store.data"
+            :columns="ticketColumns"
+            row-key="id"
+            selection="multiple"
+            v-model:selected="selectedTickets"
+            :pagination="{ rowsPerPage: 0 }"
+            :no-data-label="t('globals.noResults')"
+            style="max-width: 99%"
+        >
+            <template #header>
+                <QTr>
+                    <QTh class="horizontal-separator" />
+                    <QTh class="horizontal-separator" colspan="8" translate>
+                        {{ t('futureTickets.origin') }}
+                    </QTh>
+                    <QTh class="horizontal-separator" colspan="4" translate>
+                        {{ t('futureTickets.destination') }}
+                    </QTh>
+                </QTr>
+                <QTr>
+                    <QTh />
+                    <QTh
+                        v-for="(col, index) in ticketColumns"
+                        :key="index"
+                        :class="{ 'vertical-separator': col.name === 'futureId' }"
+                    >
+                        {{ col.label }}
+                    </QTh>
+                </QTr>
+            </template>
+            <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.columnFilter"
+                            v-model="col.columnFilter.filterValue"
+                            v-bind="col.columnFilter.attrs"
+                            v-on="col.columnFilter.event(col)"
+                            dense
+                        />
+                    </QTd>
+                </QTr>
+            </template>
+            <template #header-cell-availableLines="{ col }">
+                <QTh class="vertical-separator">
+                    {{ col.label }}
+                </QTh>
+            </template>
+            <template #body-cell-problems="{ row }">
+                <QTd class="q-gutter-x-xs">
+                    <QIcon
+                        v-if="row.isTaxDataChecked === 0"
+                        color="primary"
+                        name="vn:no036"
+                        size="xs"
+                    >
+                        <QTooltip>
+                            {{ t('futureTickets.noVerified') }}
+                        </QTooltip>
+                    </QIcon>
+                    <QIcon
+                        v-if="row.hasTicketRequest"
+                        color="primary"
+                        name="vn:buyrequest"
+                        size="xs"
+                    >
+                        <QTooltip>
+                            {{ t('futureTickets.purchaseRequest') }}
+                        </QTooltip>
+                    </QIcon>
+                    <QIcon
+                        v-if="row.itemShortage"
+                        color="primary"
+                        name="vn:unavailable"
+                        size="xs"
+                    >
+                        <QTooltip>
+                            {{ t('futureTickets.noVisible') }}
+                        </QTooltip>
+                    </QIcon>
+                    <QIcon
+                        v-if="row.isFreezed"
+                        color="primary"
+                        name="vn:frozen"
+                        size="xs"
+                    >
+                        <QTooltip>
+                            {{ t('futureTickets.clientFrozen') }}
+                        </QTooltip>
+                    </QIcon>
+                    <QIcon v-if="row.risk" color="primary" name="vn:risk" size="xs">
+                        <QTooltip>
+                            {{ t('futureTickets.risk') }}: {{ row.risk }}
+                        </QTooltip>
+                    </QIcon>
+                    <QIcon
+                        v-if="row.hasComponentLack"
+                        color="primary"
+                        name="vn:components"
+                        size="xs"
+                    >
+                        <QTooltip>
+                            {{ t('futureTickets.componentLack') }}
+                        </QTooltip>
+                    </QIcon>
+                    <QIcon
+                        v-if="row.hasRounding"
+                        color="primary"
+                        name="sync_problem"
+                        size="xs"
+                    >
+                        <QTooltip>
+                            {{ t('futureTickets.rounding') }}
+                        </QTooltip>
+                    </QIcon>
+                </QTd>
+            </template>
+            <template #body-cell-ticketId="{ row }">
+                <QTd>
+                    <QBtn flat color="primary">
+                        {{ row.id }}
+                        <TicketDescriptorProxy :id="row.id" />
+                    </QBtn>
+                </QTd>
+            </template>
+            <template #body-cell-shipped="{ row }">
+                <QTd>
+                    <QBadge
+                        text-color="black"
+                        :color="getDateQBadgeColor(row.shipped)"
+                        class="q-ma-none"
+                    >
+                        {{ toDateTimeFormat(row.shipped) }}
+                    </QBadge>
+                </QTd>
+            </template>
+            <template #body-cell-state="{ row }">
+                <QTd>
+                    <QBadge
+                        text-color="black"
+                        :color="row.classColor"
+                        class="q-ma-none"
+                        dense
+                    >
+                        {{ row.state }}
+                    </QBadge>
+                </QTd>
+            </template>
+            <template #body-cell-import="{ row }">
+                <QTd>
+                    <QBadge
+                        text-color="black"
+                        :color="totalPriceColor(row.totalWithVat)"
+                        class="q-ma-none"
+                        dense
+                    >
+                        {{ toCurrency(row.totalWithVat || 0) }}
+                    </QBadge>
+                </QTd>
+            </template>
+            <template #body-cell-futureId="{ row }">
+                <QTd class="vertical-separator">
+                    <QBtn flat color="primary" dense>
+                        {{ row.futureId }}
+                        <TicketDescriptorProxy :id="row.futureId" />
+                    </QBtn>
+                </QTd>
+            </template>
+            <template #body-cell-futureShipped="{ row }">
+                <QTd>
+                    <QBadge
+                        text-color="black"
+                        :color="getDateQBadgeColor(row.futureShipped)"
+                        class="q-ma-none"
+                    >
+                        {{ toDateTimeFormat(row.futureShipped) }}
+                    </QBadge>
+                </QTd>
+            </template>
+            <template #body-cell-futureState="{ row }">
+                <QTd>
+                    <QBadge
+                        text-color="black"
+                        :color="row.futureClassColor"
+                        class="q-ma-none"
+                        dense
+                    >
+                        {{ row.futureState }}
+                    </QBadge>
+                </QTd>
+            </template>
+        </QTable>
+    </QPage>
+</template>
+
+<style scoped lang="scss">
+.vertical-separator {
+    border-left: 4px solid white !important;
+}
+
+.horizontal-separator {
+    border-bottom: 4px solid white !important;
+}
+</style>
+
+<i18n>
+es:
+</i18n>
diff --git a/src/pages/Ticket/locale/en.yml b/src/pages/Ticket/locale/en.yml
new file mode 100644
index 000000000..b421a07b9
--- /dev/null
+++ b/src/pages/Ticket/locale/en.yml
@@ -0,0 +1,22 @@
+futureTickets:
+    problems: Problems
+    ticketId: ID
+    shipped: Date
+    ipt: IPT
+    state: State
+    liters: Liters
+    import: Import
+    availableLines: Available lines
+    futureId: ID
+    futureShipped: Date
+    futureIpt: IPT
+    futureState: State
+    noVerified: No verified data
+    noVisible: Not visible
+    purchaseRequest: Purchase request
+    clientFrozen: Client frozen
+    componentLack: Component lack
+    rounding: Rounding
+    risk: Risk
+    origin: Origin
+    destination: Destination
diff --git a/src/pages/Ticket/locale/es.yml b/src/pages/Ticket/locale/es.yml
index 5348b29b9..52c1fbf04 100644
--- a/src/pages/Ticket/locale/es.yml
+++ b/src/pages/Ticket/locale/es.yml
@@ -1,2 +1,24 @@
+futureTickets:
+    problems: Problemas
+    ticketId: ID
+    shipped: Fecha
+    ipt: IPT
+    state: Estado
+    liters: Litros
+    import: Importe
+    availableLines: Líneas disponibles
+    futureId: ID
+    futureShipped: Fecha
+    futureIpt: IPT
+    futureState: Estado
+    noVerified: Sin datos comprobados
+    noVisible: No visible
+    purchaseRequest: Petición de compra
+    clientFrozen: Cliente congelado
+    risk: Riesgo
+    componentLack: Faltan componentes
+    rounding: Redondeo
+    origin: Origen
+    destination: Destino
 Search ticket: Buscar ticket
 You can search by ticket id or alias: Puedes buscar por id o alias del ticket
diff --git a/src/router/modules/ticket.js b/src/router/modules/ticket.js
index 6cb7291dc..993934c64 100644
--- a/src/router/modules/ticket.js
+++ b/src/router/modules/ticket.js
@@ -11,7 +11,7 @@ export default {
     component: RouterView,
     redirect: { name: 'TicketMain' },
     menus: {
-        main: ['TicketList'],
+        main: ['TicketList', 'TicketFuture'],
         card: ['TicketBoxing', 'TicketSms', 'TicketSale'],
     },
     children: [
@@ -40,6 +40,15 @@ export default {
                     },
                     component: () => import('src/pages/Ticket/TicketCreate.vue'),
                 },
+                {
+                    name: 'TicketFuture',
+                    path: 'future',
+                    meta: {
+                        title: 'futureTickets',
+                        icon: 'keyboard_double_arrow_right',
+                    },
+                    component: () => import('src/pages/Ticket/TicketFuture.vue'),
+                },
             ],
         },
         {

From 6b7c76dde335559fd127377673d97ab642082cf8 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Mon, 17 Jun 2024 12:19:44 -0300
Subject: [PATCH 090/167] mini change

---
 src/pages/Ticket/Card/TicketSale.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/pages/Ticket/Card/TicketSale.vue b/src/pages/Ticket/Card/TicketSale.vue
index 3e2720ffa..9df6d5640 100644
--- a/src/pages/Ticket/Card/TicketSale.vue
+++ b/src/pages/Ticket/Card/TicketSale.vue
@@ -240,7 +240,13 @@ const updateConcept = async (sale) => {
     }
 };
 
-const DEFAULT_EDIT = { price: null, discount: null, sale: null, sales: null };
+const DEFAULT_EDIT = {
+    price: null,
+    discount: null,
+    sale: null,
+    sales: null,
+    oldQuantity: null,
+};
 const edit = ref({ ...DEFAULT_EDIT });
 const usesMana = ref(null);
 

From c289c247c4d941b7caec8a1875b29ce00546d4ba Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Mon, 17 Jun 2024 12:22:22 -0300
Subject: [PATCH 091/167] undo change in sms dialog

---
 src/components/common/VnSmsDialog.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/common/VnSmsDialog.vue b/src/components/common/VnSmsDialog.vue
index f04ea2cb6..064394445 100644
--- a/src/components/common/VnSmsDialog.vue
+++ b/src/components/common/VnSmsDialog.vue
@@ -244,6 +244,7 @@ pt:
             { orderId } do dia { landing } para recebê-lo sem custos de envio adicionais.'
         orderChanges: 'Pedido { orderId } com chegada dia { landing }: { changes }'
         productNotAvailable: 'Verdnatura comunica: Seu pedido {ticketFk} com data de recepção em {landed}. {notAvailables} não disponível/eis. Desculpe pelo transtorno.'
+    en: Inglês
     es: Espanhol
     fr: Francês
     pt: Português

From c798874a9ebaced2c2a2f7486dc07aa193ca4d68 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Mon, 17 Jun 2024 17:27:06 -0300
Subject: [PATCH 092/167] Ticket future

---
 src/pages/Ticket/TicketFuture.vue | 123 +++++++++++++++++++++++-------
 src/pages/Ticket/locale/en.yml    |   3 +
 src/pages/Ticket/locale/es.yml    |   3 +
 3 files changed, 103 insertions(+), 26 deletions(-)

diff --git a/src/pages/Ticket/TicketFuture.vue b/src/pages/Ticket/TicketFuture.vue
index ca3753424..6c635b98a 100644
--- a/src/pages/Ticket/TicketFuture.vue
+++ b/src/pages/Ticket/TicketFuture.vue
@@ -16,6 +16,7 @@ import { getDateQBadgeColor } from 'src/composables/getDateQBadgeColor.js';
 import useNotify from 'src/composables/useNotify.js';
 import { useState } from 'src/composables/useState';
 import { toDateTimeFormat } from 'src/filters/date.js';
+import axios from 'axios';
 
 const state = useState();
 const { t } = useI18n();
@@ -23,7 +24,7 @@ const { openConfirmationModal } = useVnConfirm();
 const { notify } = useNotify();
 const user = state.getUser();
 
-const agencyModesOptions = ref([]);
+const itemPackingTypesOptions = ref([]);
 const selectedTickets = ref([]);
 
 const exprBuilder = (param, value) => {
@@ -68,8 +69,7 @@ const applyColumnFilter = async (col) => {
     try {
         const paramKey = col.columnFilter?.filterParamKey || col.field;
         params[paramKey] = col.columnFilter.filterValue;
-        console.log('paramKey', paramKey, 'params', params);
-        await arrayData.applyFilter({ params });
+        await arrayData.addFilter({ params });
     } catch (err) {
         console.error('Error applying column filter', err);
     }
@@ -119,7 +119,19 @@ const ticketColumns = computed(() => [
         field: 'ipt',
         align: 'left',
         sortable: true,
-        columnFilter: null,
+        columnFilter: {
+            component: VnSelect,
+            filterParamKey: 'ipt',
+            type: 'select',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                options: itemPackingTypesOptions.value,
+                'option-value': 'code',
+                'option-label': 'description',
+                dense: true,
+            },
+        },
         format: (val) => dashIfEmpty(val),
     },
     {
@@ -135,7 +147,15 @@ const ticketColumns = computed(() => [
         field: 'liters',
         align: 'left',
         sortable: true,
-        columnFilter: null,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
     },
     {
         label: t('futureTickets.import'),
@@ -143,16 +163,6 @@ const ticketColumns = computed(() => [
         name: 'import',
         align: 'left',
         sortable: true,
-        // columnFilter: {
-        //     component: VnInput,
-        //     type: 'text',
-        //     filterValue: null,
-        //     event: getInputEvents,
-        //     filterParamKey: 'nickName',
-        //     attrs: {
-        //         dense: true,
-        //     },
-        // },
     },
     {
         label: t('futureTickets.availableLines'),
@@ -160,7 +170,15 @@ const ticketColumns = computed(() => [
         field: 'lines',
         align: 'left',
         sortable: true,
-        columnFilter: null,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
         format: (val) => dashIfEmpty(val),
     },
     {
@@ -168,7 +186,16 @@ const ticketColumns = computed(() => [
         name: 'futureId',
         align: 'left',
         sortable: true,
-        columnFilter: null,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            filterParamKey: 'futureId',
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
     },
     {
         label: t('futureTickets.futureShipped'),
@@ -185,7 +212,19 @@ const ticketColumns = computed(() => [
         field: 'futureIpt',
         align: 'left',
         sortable: true,
-        columnFilter: null,
+        columnFilter: {
+            component: VnSelect,
+            filterParamKey: 'futureIpt',
+            type: 'select',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                options: itemPackingTypesOptions.value,
+                'option-value': 'code',
+                'option-label': 'description',
+                dense: true,
+            },
+        },
         format: (val) => dashIfEmpty(val),
     },
     {
@@ -204,6 +243,24 @@ const isLessThan50 = (totalWithVat) =>
 const totalPriceColor = (totalWithVat) =>
     isLessThan50(totalWithVat) ? 'warning' : 'transparent';
 
+const moveTicketsFuture = async () => {
+    try {
+        const ticketsToMove = selectedTickets.value.map((ticket) => ({
+            originId: ticket.id,
+            destinationId: ticket.futureId,
+            originShipped: ticket.shipped,
+            destinationShipped: ticket.futureShipped,
+            workerFk: ticket.workerFk,
+        }));
+
+        let params = { tickets: ticketsToMove };
+        await axios.post('Tickets/merge', params);
+        notify(t('futureTickets.moveTicketSuccess'), 'positive');
+        arrayData.fetch({ append: false });
+    } catch (error) {
+        console.error('Error moving tickets to future', error);
+    }
+};
 onMounted(async () => {
     await arrayData.fetch({ append: false });
 });
@@ -211,9 +268,14 @@ onMounted(async () => {
 
 <template>
     <FetchData
-        url="Tickets/getTicketsFuture"
-        :filter="{ fields: ['id', 'name'], order: 'name' }"
-        @on-fetch="(data) => (agencyModesOptions = data)"
+        url="itemPackingTypes"
+        :filter="{
+            fields: ['code', 'description'],
+            order: 'description ASC',
+            where: { isActive: true },
+        }"
+        auto-load
+        @on-fetch="(data) => (itemPackingTypesOptions = data)"
     />
     <VnSearchbar
         data-key="WeeklyTickets"
@@ -222,7 +284,20 @@ onMounted(async () => {
     />
     <VnSubToolbar>
         <template #st-data>
-            <QBtn icon="keyboard_double_arrow_right" color="primary" />
+            <QBtn
+                icon="keyboard_double_arrow_right"
+                color="primary"
+                :disable="!selectedTickets.length"
+                @click.stop="
+                    openConfirmationModal(
+                        t('futureTickets.moveTicketTitle'),
+                        t(`futureTickets.moveTicketDialogSubtitle`, {
+                            selectedTickets: selectedTickets.length,
+                        }),
+                        moveTicketsFuture
+                    )
+                "
+            />
         </template>
     </VnSubToolbar>
     <QPage class="column items-center q-pa-md">
@@ -437,7 +512,3 @@ onMounted(async () => {
     border-bottom: 4px solid white !important;
 }
 </style>
-
-<i18n>
-es:
-</i18n>
diff --git a/src/pages/Ticket/locale/en.yml b/src/pages/Ticket/locale/en.yml
index b421a07b9..16089a3cb 100644
--- a/src/pages/Ticket/locale/en.yml
+++ b/src/pages/Ticket/locale/en.yml
@@ -20,3 +20,6 @@ futureTickets:
     risk: Risk
     origin: Origin
     destination: Destination
+    moveTicketTitle: Move tickets
+    moveTicketDialogSubtitle: 'Do you want to move {selectedTickets} tickets to the future?'
+    moveTicketSuccess: Tickets moved successfully!
diff --git a/src/pages/Ticket/locale/es.yml b/src/pages/Ticket/locale/es.yml
index 52c1fbf04..906522b21 100644
--- a/src/pages/Ticket/locale/es.yml
+++ b/src/pages/Ticket/locale/es.yml
@@ -20,5 +20,8 @@ futureTickets:
     rounding: Redondeo
     origin: Origen
     destination: Destino
+    moveTicketTitle: Mover tickets
+    moveTicketDialogSubtitle: '¿Desea mover {selectedTickets} tickets hacia el futuro?'
+    moveTicketSuccess: Tickets movidos correctamente
 Search ticket: Buscar ticket
 You can search by ticket id or alias: Puedes buscar por id o alias del ticket

From dfbc7df54db1a8c64ceb798567ded44b7d00c9c2 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 18 Jun 2024 09:20:45 +0200
Subject: [PATCH 093/167] perf: Remove div.col

---
 src/pages/Ticket/Card/TicketTransfer.vue | 107 ++++++++++++-----------
 1 file changed, 54 insertions(+), 53 deletions(-)

diff --git a/src/pages/Ticket/Card/TicketTransfer.vue b/src/pages/Ticket/Card/TicketTransfer.vue
index b4c5babc6..9a22c764c 100644
--- a/src/pages/Ticket/Card/TicketTransfer.vue
+++ b/src/pages/Ticket/Card/TicketTransfer.vue
@@ -129,59 +129,60 @@ onMounted(() => (_transfer.value = $props.transfer));
                 </template>
             </QTable>
             <QSeparator vertical spaced />
-            <div class="col">
-                <QTable
-                    v-if="transfer.lastActiveTickets"
-                    :rows="transfer.lastActiveTickets"
-                    :columns="destinationTicketColumns"
-                    :title="t('Destination ticket')"
-                    row-key="id"
-                    :pagination="{ rowsPerPage: 0 }"
-                    class="full-width q-mt-md"
-                    :no-data-label="t('globals.noResults')"
-                >
-                    <template #body-cell-address="{ row }">
-                        <QTd @click.stop>
-                            <span>
-                                {{ row.nickname }}
-                                {{ row.name }}
-                                {{ row.street }}
-                                {{ row.postalCode }}
-                                {{ row.city }}
-                            </span>
-                            <QTooltip>
-                                {{ row.nickname }}
-                                {{ row.name }}
-                                {{ row.street }}
-                                {{ row.postalCode }}
-                                {{ row.city }}
-                            </QTooltip>
-                        </QTd>
-                    </template>
-                </QTable>
-                <QForm class="q-mt-lg">
-                    <VnInput
-                        v-model.number="_transfer.ticketId"
-                        :label="t('Transfer to ticket')"
-                        :clearable="false"
-                    >
-                        <template #append>
-                            <QBtn
-                                icon="keyboard_arrow_right"
-                                color="primary"
-                                @click="transferSales(_transfer.ticketId)"
-                                style="width: 30px"
-                            />
-                        </template>
-                    </VnInput>
-                    <QBtn
-                        :label="t('New ticket')"
-                        color="primary"
-                        class="full-width q-my-lg"
-                        @click="transferSales()"
-                    />
-                </QForm>
-            </div>
+            <QTable
+                v-if="transfer.lastActiveTickets"
+                :rows="transfer.lastActiveTickets"
+                :columns="destinationTicketColumns"
+                :title="t('Destination ticket')"
+                row-key="id"
+                :pagination="{ rowsPerPage: 0 }"
+                class="full-width q-mt-md"
+                :no-data-label="t('globals.noResults')"
+            >
+                <template #body-cell-address="{ row }">
+                    <QTd @click.stop>
+                        <span>
+                            {{ row.nickname }}
+                            {{ row.name }}
+                            {{ row.street }}
+                            {{ row.postalCode }}
+                            {{ row.city }}
+                        </span>
+                        <QTooltip>
+                            {{ row.nickname }}
+                            {{ row.name }}
+                            {{ row.street }}
+                            {{ row.postalCode }}
+                            {{ row.city }}
+                        </QTooltip>
+                    </QTd>
+                </template>
+
+                <template #bottom>
+                    <QForm class="q-mt-lg full-width">
+                        <VnInput
+                            v-model.number="_transfer.ticketId"
+                            :label="t('Transfer to ticket')"
+                            :clearable="false"
+                        >
+                            <template #append>
+                                <QBtn
+                                    icon="keyboard_arrow_right"
+                                    color="primary"
+                                    @click="transferSales(_transfer.ticketId)"
+                                    style="width: 30px"
+                                />
+                            </template>
+                        </VnInput>
+                        <QBtn
+                            :label="t('New ticket')"
+                            color="primary"
+                            class="full-width q-my-lg"
+                            @click="transferSales()"
+                        />
+                    </QForm>
+                </template>
+            </QTable>
         </QCard>
     </QPopupProxy>
 </template>

From e369ea68d460b32bb9d3d917ea9847515e313758 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Tue, 18 Jun 2024 09:56:03 +0200
Subject: [PATCH 094/167] fix(VnTable): Qtable v-bind

---
 src/components/VnTable/VnTable.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index 262f85f96..0d725524e 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -224,7 +224,7 @@ defineExpose({
         >
             <template #body="{ rows }">
                 <QTable
-                    v-bind="$attrs"
+                    v-bind="$attrs['QTable']"
                     class="vnTable"
                     :columns="splittedColumns.columns"
                     :rows="rows"

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

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

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

From 30232801083b40fbdf75e1fd01173bcb57ce742b Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Tue, 18 Jun 2024 13:31:25 +0200
Subject: [PATCH 096/167] refactor: refs #6896 refactor VnImg

---
 src/boot/quasar.js                          |  7 ++++
 src/components/ui/VnImg.vue                 | 38 +++++++++------------
 src/pages/Item/Card/ItemDescriptorImage.vue | 17 ++++-----
 src/stores/useImagesStore.js                | 12 +++++++
 4 files changed, 42 insertions(+), 32 deletions(-)
 create mode 100644 src/stores/useImagesStore.js

diff --git a/src/boot/quasar.js b/src/boot/quasar.js
index a8d9b7ad9..b4d1044cf 100644
--- a/src/boot/quasar.js
+++ b/src/boot/quasar.js
@@ -3,4 +3,11 @@ import qFormMixin from './qformMixin';
 
 export default boot(({ app }) => {
     app.mixin(qFormMixin);
+    app.config.globalProperties.$emitEvent = function (eventName, payload) {
+        app._instance?.emit(eventName, payload);
+    };
+
+    app.config.globalProperties.$onEvent = function (eventName, callback) {
+        app._instance?.on(eventName, callback);
+    };
 });
diff --git a/src/components/ui/VnImg.vue b/src/components/ui/VnImg.vue
index 02cec5702..37072a69e 100644
--- a/src/components/ui/VnImg.vue
+++ b/src/components/ui/VnImg.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import { useSession } from 'src/composables/useSession';
 
 const $props = defineProps({
@@ -23,42 +23,38 @@ const $props = defineProps({
 });
 const show = ref(false);
 const token = useSession().getTokenMultimedia();
-const timeStamp = `timestamp=${Date.now()}`;
+const timeStamp = ref(`timestamp=${Date.now()}`);
 const url = computed(
     () =>
-        `/api/${$props.collection}/catalog/${$props.size}/${$props.id}/download?access_token=${token}&${timeStamp}`
+        `/api/${$props.collection}/catalog/${$props.size}/${$props.id}/download?access_token=${token}&${timeStamp.value}`
 );
+const emits = defineEmits(['refresh']);
+const reload = (emit = false) => {
+    timeStamp.value = `timestamp=${Date.now()}`;
+};
+defineExpose({
+    reload,
+});
+
+onMounted(() => {});
 </script>
 <template>
-    <QImg
-        :src="url"
-        class="img"
-        v-bind="$attrs"
-        @click="show = !show"
-        spinner-color="primary"
-        :ratio="1"
-    />
+    <QImg :src="url" v-bind="$attrs" @click="show = !show" spinner-color="primary" />
     <QDialog v-model="show" v-if="$props.zoomSize">
-        <QImg
-            :src="url"
-            class="img_zoom"
-            v-bind="$attrs"
-            spinner-color="primary"
-            :ratio="1"
-            style="border-radius: 0%"
-        />
+        <QImg :src="url" class="img_zoom" v-bind="$attrs" spinner-color="primary" />
     </QDialog>
 </template>
 
 <style lang="scss" scoped>
-.img {
+.q-img {
     cursor: zoom-in;
 }
 .rounded {
     border-radius: 50%;
 }
 .img_zoom {
-    width: 72%;
+    width: 100%;
     height: auto;
+    border-radius: 0%;
 }
 </style>
diff --git a/src/pages/Item/Card/ItemDescriptorImage.vue b/src/pages/Item/Card/ItemDescriptorImage.vue
index 5a0e84b45..aceede880 100644
--- a/src/pages/Item/Card/ItemDescriptorImage.vue
+++ b/src/pages/Item/Card/ItemDescriptorImage.vue
@@ -4,7 +4,6 @@ import { useI18n } from 'vue-i18n';
 
 import EditPictureForm from 'components/EditPictureForm.vue';
 import VnImg from 'src/components/ui/VnImg.vue';
-import { useSession } from 'src/composables/useSession';
 import axios from 'axios';
 
 const $props = defineProps({
@@ -27,19 +26,12 @@ const $props = defineProps({
 });
 
 const { t } = useI18n();
-const { getTokenMultimedia } = useSession();
 
 const image = ref(null);
 const editPhotoFormDialog = ref(null);
 const showEditPhotoForm = ref(false);
 const warehouseName = ref(null);
 
-const getItemAvatar = async () => {
-    const token = getTokenMultimedia();
-    const timeStamp = `timestamp=${Date.now()}`;
-    image.value = `/api/Images/catalog/200x200/${$props.entityId}/download?access_token=${token}&${timeStamp}`;
-};
-
 const toggleEditPictureForm = () => {
     showEditPhotoForm.value = !showEditPhotoForm.value;
 };
@@ -62,14 +54,17 @@ const getWarehouseName = async (warehouseFk) => {
 };
 
 onMounted(async () => {
-    getItemAvatar();
     getItemConfigs();
 });
+
+const handlePhotoUpdated = (evt = false) => {
+    image.value.reload(evt);
+};
 </script>
 
 <template>
     <div class="relative-position">
-        <VnImg :id="$props.entityId">
+        <VnImg ref="image" :id="$props.entityId" @refresh="handlePhotoUpdated(true)">
             <template #error>
                 <div class="absolute-full picture text-center q-pa-md flex flex-center">
                     <div>
@@ -97,7 +92,7 @@ onMounted(async () => {
                     collection="catalog"
                     :id="entityId"
                     @close-form="toggleEditPictureForm()"
-                    @on-photo-uploaded="getItemAvatar()"
+                    @on-photo-uploaded="handlePhotoUpdated"
                 />
             </QDialog>
         </QBtn>
diff --git a/src/stores/useImagesStore.js b/src/stores/useImagesStore.js
new file mode 100644
index 000000000..b340a2798
--- /dev/null
+++ b/src/stores/useImagesStore.js
@@ -0,0 +1,12 @@
+import { defineStore } from 'pinia';
+
+export const useImagesStore = defineStore('imagesStore', {
+    state: () => ({
+        images: {},
+    }),
+    actions: {
+        async pushImage(url, data) {
+            this.images[url] = data;
+        },
+    },
+});

From 92cac607e41be9bd35cdf60604d8a7a9e329d32f Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Tue, 18 Jun 2024 15:20:07 +0200
Subject: [PATCH 097/167] test: front test for arrayData

---
 .../composables/useArrayData.spec.js          | 94 ++++++++++++++-----
 test/vitest/helper.js                         |  4 +
 2 files changed, 76 insertions(+), 22 deletions(-)

diff --git a/test/vitest/__tests__/composables/useArrayData.spec.js b/test/vitest/__tests__/composables/useArrayData.spec.js
index ae0ca7368..dc3f77927 100644
--- a/test/vitest/__tests__/composables/useArrayData.spec.js
+++ b/test/vitest/__tests__/composables/useArrayData.spec.js
@@ -1,31 +1,81 @@
-import { describe, expect, it, beforeAll } from 'vitest';
-import { axios } from 'app/test/vitest/helper';
+import { describe, expect, it, beforeAll, afterEach, vi } from 'vitest';
+import { axios, flushPromises } from 'app/test/vitest/helper';
 import { useArrayData } from 'composables/useArrayData';
+import { useRouter } from 'vue-router';
 
 describe('useArrayData', () => {
-    let arrayData;
     beforeAll(() => {
-        axios.get.mockResolvedValue({ data: [] });
-        arrayData = useArrayData('InvoiceIn', { url: 'invoice-in/list' });
-        Object.defineProperty(window.location, 'href', {
-            writable: true,
-            value: 'localhost:9000/invoice-in/list',
+        vi.spyOn(useRouter(), 'replace');
+        vi.spyOn(useRouter(), 'push');
+    });
+
+    afterEach(() => {
+        vi.clearAllMocks();
+    });
+
+    it('should fetch and repalce url with new params', async () => {
+        vi.spyOn(axios, 'get').mockReturnValueOnce({ data: [] });
+
+        const arrayData = useArrayData('ArrayData', { url: 'mockUrl' });
+
+        const filter = '{"order":"","limit":10,"skip":0}';
+        const params = { supplierFk: 2 };
+        arrayData.store.userParams = params;
+        arrayData.fetch({});
+
+        await flushPromises();
+        const routerReplace = useRouter().replace.mock.calls[0][0];
+
+        expect(axios.get.mock.calls[0][1].params).toEqual({
+            filter,
+            supplierFk: 2,
         });
-
-        // Mock the window.history.pushState method within useArrayData
-        window.history.pushState = (data, title, url) => (window.location.href = url);
-
-        //  Mock the URL constructor within useArrayData
-        global.URL = class URL {
-            constructor(url) {
-                this.hash = url.split('localhost:9000/')[1];
-            }
-        };
+        expect(routerReplace.path).toEqual('mockSection/list');
+        expect(JSON.parse(routerReplace.query.params)).toEqual(
+            expect.objectContaining(params)
+        );
     });
 
-    it('should add the params to the url', async () => {
-        arrayData.store.userParams = { supplierFk: 2 };
-        arrayData.updateStateParams();
-        expect(window.location.href).contain('params=%7B%22supplierFk%22%3A2%7D');
+    it('Should get data and send new URL without keeping parameters, if there is only one record', async () => {
+        vi.spyOn(axios, 'get').mockReturnValueOnce({ data: [{ id: 1 }] });
+
+        const arrayData = useArrayData('ArrayData', { url: 'mockUrl', navigate: {} });
+
+        const filter = '{"order":"","limit":10,"skip":0}';
+        const params = { supplierFk: 2 };
+        arrayData.store.userParams = params;
+        arrayData.fetch({});
+
+        await flushPromises();
+        const routerPush = useRouter().push.mock.calls[0][0];
+
+        expect(axios.get.mock.calls[0][1].params).toEqual({
+            filter,
+            supplierFk: 2,
+        });
+        expect(routerPush.path).toEqual('mockName/1');
+        expect(routerPush.query).toBeUndefined();
     });
+
+    // it('Should get data and send new URL keeping parameters, if you have more than one record', async () => {
+    //     vi.spyOn(axios, 'get').mockReturnValueOnce({ data: [{ id: 1 }, { id: 2 }] });
+
+    //     const arrayData = useArrayData('ArrayData', { url: 'mockUrl', navigate: {} });
+
+    //     const filter = '{"order":"","limit":10,"skip":0}';
+    //     const params = { supplierFk: 2 };
+    //     arrayData.store.userParams = params;
+    //     arrayData.fetch({});
+
+    //     await flushPromises();
+    //     const routerPush = useRouter().push.mock.calls[0][0];
+    //     console.log('routerPush: ', routerPush);
+
+    //     expect(axios.get.mock.calls[0][1].params).toEqual({
+    //         filter,
+    //         supplierFk: 2,
+    //     });
+    //     expect(routerPush.path).toEqual('mockName/1');
+    //     expect(routerPush.query).toBeUndefined();
+    // });
 });
diff --git a/test/vitest/helper.js b/test/vitest/helper.js
index 4eeea25a8..d6721d817 100644
--- a/test/vitest/helper.js
+++ b/test/vitest/helper.js
@@ -15,16 +15,19 @@ installQuasarPlugin({
 });
 const pinia = createTestingPinia({ createSpy: vi.fn, stubActions: false });
 const mockPush = vi.fn();
+const mockReplace = vi.fn();
 
 vi.mock('vue-router', () => ({
     useRouter: () => ({
         push: mockPush,
+        replace: mockReplace,
         currentRoute: {
             value: {
                 params: {
                     id: 1,
                 },
                 meta: { moduleName: 'mockName' },
+                matched: [{ path: 'mockName/list' }],
             },
         },
     }),
@@ -33,6 +36,7 @@ vi.mock('vue-router', () => ({
         query: {},
         params: {},
         meta: { moduleName: 'mockName' },
+        path: 'mockSection/list',
     }),
 }));
 

From bb208040bb54d86e7786f4e30d67eec4be8a9ce8 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 18 Jun 2024 11:47:35 -0300
Subject: [PATCH 098/167] Last changes

---
 src/components/common/VnProgressModal.vue |  97 +++
 src/i18n/locale/en.yml                    |   1 +
 src/i18n/locale/es.yml                    |   1 +
 src/pages/Ticket/TicketAdvance.vue        | 701 ++++++++++++++++++++++
 src/pages/Ticket/locale/en.yml            |  28 +
 src/pages/Ticket/locale/es.yml            |  28 +
 src/router/modules/ticket.js              |  11 +-
 7 files changed, 866 insertions(+), 1 deletion(-)
 create mode 100644 src/components/common/VnProgressModal.vue
 create mode 100644 src/pages/Ticket/TicketAdvance.vue
 create mode 100644 src/pages/Ticket/locale/en.yml

diff --git a/src/components/common/VnProgressModal.vue b/src/components/common/VnProgressModal.vue
new file mode 100644
index 000000000..e788dd20b
--- /dev/null
+++ b/src/components/common/VnProgressModal.vue
@@ -0,0 +1,97 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { computed, ref } from 'vue';
+
+const { t } = useI18n();
+
+const $props = defineProps({
+    progress: {
+        type: Number, //Progress value (1.0 > x > 0.0)
+        required: true,
+    },
+    showDialog: {
+        type: Boolean,
+        required: true,
+    },
+    cancelled: {
+        type: Boolean,
+        required: false,
+        default: false,
+    },
+});
+
+const emit = defineEmits(['cancel', 'close']);
+
+const dialogRef = ref(null);
+
+const _showDialog = computed({
+    get: () => $props.showDialog,
+    set: (value) => {
+        if (value) dialogRef.value.show();
+    },
+});
+
+const _progress = computed(() => $props.progress);
+
+const progressLabel = computed(() => `${Math.round($props.progress * 100)}%`);
+
+const cancel = () => {
+    dialogRef.value.hide();
+    emit('cancel');
+};
+</script>
+
+<template>
+    <QDialog ref="dialogRef" v-model="_showDialog" @hide="onDialogHide">
+        <QCard class="full-width dialog">
+            <QCardSection class="row">
+                <span class="text-h6">{{ t('Progress') }}</span>
+                <QSpace />
+                <QBtn icon="close" flat round dense @click="emit('close')" />
+            </QCardSection>
+            <QCardSection>
+                <div class="column">
+                    <span>{{ t('Total progress') }}:</span>
+                    <QLinearProgress
+                        size="30px"
+                        :value="_progress"
+                        color="primary"
+                        stripe
+                        class="q-mt-sm q-mb-md"
+                    >
+                        <div class="absolute-full flex flex-center">
+                            <QBadge
+                                v-if="cancelled"
+                                text-color="white"
+                                color="negative"
+                                :label="t('Cancelled')"
+                            />
+                            <span v-else class="text-white text-subtitle1">
+                                {{ progressLabel }}
+                            </span>
+                        </div>
+                    </QLinearProgress>
+                    <slot />
+                </div>
+            </QCardSection>
+            <QCardActions align="right">
+                <QBtn
+                    v-if="!cancelled"
+                    type="button"
+                    flat
+                    class="text-primary"
+                    @click="cancel()"
+                >
+                    {{ t('globals.cancel') }}
+                </QBtn>
+            </QCardActions>
+        </QCard>
+    </QDialog>
+</template>
+
+<i18n>
+es:
+    Progress: Progreso
+    Total progress: Progreso total
+    Cancelled: Cancelado
+</i18n>
diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index 5ef3a5472..17ffa9b2c 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -442,6 +442,7 @@ ticket:
         sms: Sms
         notes: Notes
         sale: Sale
+        ticketAdvance: Advance tickets
     list:
         nickname: Nickname
         state: State
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index cfadd57b3..b134b0b9c 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -440,6 +440,7 @@ ticket:
         sms: Sms
         notes: Notas
         sale: Lineas del pedido
+        ticketAdvance: Adelantar tickets
     list:
         nickname: Alias
         state: Estado
diff --git a/src/pages/Ticket/TicketAdvance.vue b/src/pages/Ticket/TicketAdvance.vue
new file mode 100644
index 000000000..fc323cbae
--- /dev/null
+++ b/src/pages/Ticket/TicketAdvance.vue
@@ -0,0 +1,701 @@
+<script setup>
+import { onMounted, ref, computed, reactive } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import FetchData from 'components/FetchData.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import VnProgress from 'src/components/common/VnProgressModal.vue';
+
+import { dashIfEmpty, toCurrency } from 'src/filters';
+import { useVnConfirm } from 'composables/useVnConfirm';
+import { useArrayData } from 'composables/useArrayData';
+import useNotify from 'src/composables/useNotify.js';
+import { useState } from 'src/composables/useState';
+import { toDateFormat } from 'src/filters/date.js';
+import axios from 'axios';
+
+const state = useState();
+const { t } = useI18n();
+const { openConfirmationModal } = useVnConfirm();
+const { notify } = useNotify();
+const user = state.getUser();
+
+const itemPackingTypesOptions = ref([]);
+const zonesOptions = ref([]);
+const selectedTickets = ref([]);
+
+const exprBuilder = (param, value) => {
+    switch (param) {
+        case 'id':
+        case 'futureId':
+        case 'liters':
+        case 'futureLiters':
+        case 'lines':
+        case 'futureLines':
+        case 'totalWithVat':
+        case 'futureTotalWithVat':
+        case 'futureZone':
+        case 'notMovableLines':
+        case 'futureZoneFk':
+            return { [param]: value };
+        case 'ipt':
+            return { ipt: { like: `%${value}%` } };
+        case 'futureIpt':
+            return { futureIpt: { like: `%${value}%` } };
+    }
+};
+
+const userParams = reactive({});
+
+const arrayData = useArrayData('AdvanceTickets', {
+    url: 'Tickets/getTicketsAdvance',
+    userParams: userParams,
+    exprBuilder: exprBuilder,
+});
+const { store } = arrayData;
+const tickets = computed(() =>
+    (store.data || []).map((ticket, index) => ({ ...ticket, index: index }))
+);
+
+const applyColumnFilter = async (col) => {
+    try {
+        const paramKey = col.columnFilter?.filterParamKey || col.field;
+        userParams[paramKey] = col.columnFilter.filterValue;
+        await arrayData.addFilter({ params: userParams });
+    } catch (err) {
+        console.error('Error applying column filter', err);
+    }
+};
+
+const getInputEvents = (col) => {
+    return col.columnFilter.type === 'select'
+        ? { 'update:modelValue': () => applyColumnFilter(col) }
+        : {
+              'keyup.enter': () => applyColumnFilter(col),
+          };
+};
+
+const ticketColumns = computed(() => [
+    {
+        label: '',
+        name: 'icons',
+        align: 'left',
+        columnFilter: null,
+    },
+    {
+        label: t('advanceTickets.ticketId'),
+        name: 'ticketId',
+        align: 'center',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            filterParamKey: 'id',
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
+    },
+    {
+        label: t('advanceTickets.ipt'),
+        name: 'ipt',
+        field: 'ipt',
+        align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnSelect,
+            filterParamKey: 'ipt',
+            type: 'select',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                options: itemPackingTypesOptions.value,
+                'option-value': 'code',
+                'option-label': 'description',
+                dense: true,
+            },
+        },
+        format: (val) => dashIfEmpty(val),
+    },
+    {
+        label: t('advanceTickets.state'),
+        name: 'state',
+        align: 'left',
+        sortable: true,
+        columnFilter: null,
+    },
+    {
+        label: t('advanceTickets.liters'),
+        name: 'liters',
+        field: 'liters',
+        align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
+    },
+    {
+        label: t('advanceTickets.lines'),
+        name: 'lines',
+        field: 'lines',
+        align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
+        format: (val) => dashIfEmpty(val),
+    },
+    {
+        label: t('advanceTickets.import'),
+        field: 'import',
+        name: 'import',
+        align: 'left',
+        sortable: true,
+    },
+    {
+        label: t('advanceTickets.futureId'),
+        name: 'futureId',
+        align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            filterParamKey: 'futureId',
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
+    },
+    {
+        label: t('advanceTickets.futureIpt'),
+        name: 'futureIpt',
+        field: 'futureIpt',
+        align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnSelect,
+            filterParamKey: 'futureIpt',
+            type: 'select',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                options: itemPackingTypesOptions.value,
+                'option-value': 'code',
+                'option-label': 'description',
+                dense: true,
+            },
+        },
+        format: (val) => dashIfEmpty(val),
+    },
+    {
+        label: t('advanceTickets.futureState'),
+        name: 'futureState',
+        align: 'left',
+        sortable: true,
+        columnFilter: null,
+        format: (val) => dashIfEmpty(val),
+    },
+    {
+        label: t('advanceTickets.futureLiters'),
+        name: 'futureLiters',
+        field: 'futureLiters',
+        align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
+        format: (val) => dashIfEmpty(val),
+    },
+    {
+        label: t('advanceTickets.futureZone'),
+        name: 'futureZoneName',
+        field: 'futureZoneName',
+        align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnSelect,
+            type: 'select',
+            filterValue: null,
+            filterParamKey: 'futureZoneFk',
+            event: getInputEvents,
+            attrs: {
+                options: zonesOptions.value,
+                'option-value': 'id',
+                'option-label': 'name',
+                dense: true,
+            },
+        },
+        format: (val) => dashIfEmpty(val),
+    },
+    {
+        label: t('advanceTickets.notMovableLines'),
+        name: 'notMovableLines',
+        field: 'notMovableLines',
+        align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
+        format: (val) => dashIfEmpty(val),
+    },
+    {
+        label: t('advanceTickets.futureLines'),
+        name: 'futureLines',
+        field: 'futureLines',
+        align: 'left',
+        sortable: true,
+        columnFilter: {
+            component: VnInput,
+            type: 'text',
+            filterValue: null,
+            event: getInputEvents,
+            attrs: {
+                dense: true,
+            },
+        },
+        format: (val) => dashIfEmpty(val),
+    },
+    {
+        label: t('advanceTickets.futureImport'),
+        name: 'futureImport',
+        align: 'left',
+        sortable: true,
+        columnFilter: null,
+    },
+]);
+
+const isLessThan50 = (totalWithVat) =>
+    parseInt(totalWithVat) > 0 && parseInt(totalWithVat) < 50;
+
+const totalPriceColor = (totalWithVat) =>
+    isLessThan50(totalWithVat) ? 'warning' : 'transparent';
+
+const getLanded = async (params) => {
+    try {
+        const query = `Agencies/getLanded`;
+        const { data } = await axios.get(query, { params });
+        if (!data) return;
+        return data;
+    } catch (error) {
+        notify(t('advanceTickets.noDeliveryZone'), 'negative');
+        console.error('Error getting landed', error);
+    }
+};
+
+const requestComponentUpdate = async (ticket, isWithoutNegatives) => {
+    const query = `tickets/${ticket.futureId}/componentUpdate`;
+    if (!ticket.landed) {
+        const newLanded = await getLanded({
+            shipped: userParams.dateToAdvance,
+            addressFk: ticket.futureAddressFk,
+            agencyModeFk: ticket.agencyModeFk ?? ticket.futureAgencyModeFk,
+            warehouseFk: ticket.futureWarehouseFk,
+        });
+
+        if (!newLanded) {
+            notify(t('advanceTickets.noDeliveryZone'), 'negative');
+            return;
+        }
+
+        ticket.landed = newLanded.landed;
+        ticket.zoneFk = newLanded.zoneFk;
+    }
+
+    const params = {
+        clientFk: ticket.futureClientFk,
+        nickname: ticket.nickname,
+        agencyModeFk: ticket.agencyModeFk ?? ticket.futureAgencyModeFk,
+        addressFk: ticket.futureAddressFk,
+        zoneFk: ticket.zoneFk ?? ticket.futureZoneFk,
+        warehouseFk: ticket.futureWarehouseFk,
+        companyFk: ticket.futureCompanyFk,
+        shipped: userParams.dateToAdvance,
+        landed: ticket.landed,
+        isDeleted: false,
+        isWithoutNegatives,
+        newTicket: ticket.id ?? undefined,
+        keepPrice: true,
+    };
+
+    return { query, params };
+};
+
+const moveTicketsAdvance = async () => {
+    try {
+        let ticketsToMove = [];
+        for (const ticket of selectedTickets.value) {
+            if (!ticket.id) {
+                try {
+                    const { query, params } = await requestComponentUpdate(ticket, false);
+                    axios.post(query, params);
+                } catch (e) {
+                    console.error('Error moving ticket', e);
+                }
+                continue;
+            }
+            ticketsToMove.push({
+                originId: ticket.futureId,
+                destinationId: ticket.id,
+                originShipped: ticket.futureShipped,
+                destinationShipped: ticket.shipped,
+                workerFk: ticket.workerFk,
+            });
+        }
+
+        const params = { tickets: ticketsToMove };
+        await axios.post('Tickets/merge', params);
+        arrayData.fetch({ append: false });
+        if (ticketsToMove.length)
+            notify(t('advanceTickets.moveTicketSuccess'), 'positive');
+    } catch (error) {
+        console.error('Error moving tickets', error);
+    }
+};
+
+const progressLength = ref(0);
+const progressPercentage = computed(() => {
+    if (progressLength.value === 0 || selectedTickets.value.length === 0) return 0;
+    return progressLength.value / selectedTickets.value.length;
+});
+const splitErrors = ref([]);
+const showProgressDialog = ref(false);
+const cancelProgress = ref(false);
+
+const progressAdd = () => {
+    progressLength.value++;
+    if (progressLength.value === selectedTickets.value.length) {
+        notify(
+            t('moveTicketSuccess', {
+                ticketsNumber: progressLength.value - splitErrors.value.length,
+            }),
+            'positive'
+        );
+    }
+};
+
+const splitTickets = async () => {
+    try {
+        showProgressDialog.value = true;
+        for (const ticket of selectedTickets.value) {
+            if (cancelProgress.value) break;
+            try {
+                const { query, params } = await requestComponentUpdate(ticket, true);
+                await axios.post(query, params);
+                progressAdd(ticket.futureId);
+            } catch (error) {
+                splitErrors.value.push({
+                    id: ticket.futureId,
+                    reason: error.response?.data?.error?.message,
+                });
+                progressAdd(ticket.futureId);
+            }
+        }
+    } catch (error) {
+        console.error('Error splitting tickets', error);
+    } finally {
+        arrayData.fetch({ append: false });
+    }
+};
+
+const resetProgressData = () => {
+    if (cancelProgress.value) cancelProgress.value = false;
+    progressLength.value = 0;
+    splitErrors.value = [];
+    selectedTickets.value = [];
+};
+
+const handleCloseProgressDialog = () => {
+    showProgressDialog.value = false;
+    resetProgressData();
+};
+
+const handleCancelProgress = () => (cancelProgress.value = true);
+
+onMounted(async () => {
+    let today = Date.vnNew();
+    const tomorrow = new Date(today);
+    tomorrow.setDate(tomorrow.getDate() + 1);
+    userParams.dateFuture = tomorrow;
+    userParams.dateToAdvance = today;
+    userParams.warehouseFk = user.value.warehouseFk;
+    await arrayData.addFilter({ userParams });
+});
+</script>
+
+<template>
+    <FetchData
+        url="itemPackingTypes"
+        :filter="{
+            fields: ['code', 'description'],
+            order: 'description ASC',
+            where: { isActive: true },
+        }"
+        auto-load
+        @on-fetch="(data) => (itemPackingTypesOptions = data)"
+    />
+    <FetchData
+        url="Zones"
+        :filter="{
+            fields: ['id', 'name'],
+            order: 'name ASC',
+        }"
+        auto-load
+        @on-fetch="(data) => (zonesOptions = data)"
+    />
+    <VnSearchbar
+        data-key="WeeklyTickets"
+        :label="t('weeklyTickets.search')"
+        :info="t('weeklyTickets.searchInfo')"
+    />
+    <VnSubToolbar>
+        <template #st-data>
+            <QBtn
+                icon="keyboard_double_arrow_left"
+                color="primary"
+                class="q-mr-sm"
+                :disable="!selectedTickets.length"
+                @click.stop="
+                    openConfirmationModal(
+                        t('advanceTickets.advanceTicketTitle'),
+                        t(`advanceTickets.advanceTitleSubtitle`, {
+                            selectedTickets: selectedTickets.length,
+                        }),
+                        moveTicketsAdvance
+                    )
+                "
+            >
+                <QTooltip>
+                    {{ t('advanceTickets.advanceTickets') }}
+                </QTooltip>
+            </QBtn>
+            <QBtn
+                icon="vn:splitline"
+                color="primary"
+                :disable="!selectedTickets.length"
+                @click.stop="
+                    openConfirmationModal(
+                        t('advanceTickets.advanceWithoutNegativeTitle'),
+                        t(`advanceTickets.advanceWithoutNegativeSubtitle`, {
+                            selectedTickets: selectedTickets.length,
+                        }),
+                        splitTickets
+                    )
+                "
+            >
+                <QTooltip>
+                    {{ t('advanceTickets.advanceTicketsWithoutNegatives') }}
+                </QTooltip>
+            </QBtn>
+        </template>
+    </VnSubToolbar>
+    <QPage class="column items-center q-pa-md">
+        <QTable
+            :rows="tickets"
+            :columns="ticketColumns"
+            row-key="index"
+            selection="multiple"
+            v-model:selected="selectedTickets"
+            :pagination="{ rowsPerPage: 0 }"
+            :no-data-label="t('globals.noResults')"
+            style="max-width: 99%"
+        >
+            <template #header="props">
+                <QTr :props="props">
+                    <QTh class="horizontal-separator" colspan="7" translate>
+                        {{ t('advanceTickets.origin') }}
+                        {{ toDateFormat(userParams.dateToAdvance) }}
+                    </QTh>
+                    <QTh class="horizontal-separator" colspan="9" translate>
+                        {{ t('advanceTickets.destination') }}
+                        {{ toDateFormat(userParams.dateFuture) }}
+                    </QTh>
+                </QTr>
+                <QTr>
+                    <QTh>
+                        <QCheckbox v-model="props.selected" />
+                    </QTh>
+                    <QTh
+                        v-for="(col, index) in ticketColumns"
+                        :key="index"
+                        :class="{ 'vertical-separator': col.name === 'futureId' }"
+                    >
+                        {{ col.label }}
+                    </QTh>
+                </QTr>
+            </template>
+            <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.columnFilter"
+                            v-model="col.columnFilter.filterValue"
+                            v-bind="col.columnFilter.attrs"
+                            v-on="col.columnFilter.event(col)"
+                            dense
+                        />
+                    </QTd>
+                </QTr>
+            </template>
+            <template #header-cell-availableLines="{ col }">
+                <QTh class="vertical-separator">
+                    {{ col.label }}
+                </QTh>
+            </template>
+            <template #body-cell-icons="{ row }">
+                <QTd class="q-gutter-x-xs">
+                    <QIcon
+                        v-if="row.futureAgency !== row.agency && row.agency"
+                        color="primary"
+                        name="vn:agency-term"
+                        size="xs"
+                    >
+                        <QTooltip class="column">
+                            <span>
+                                {{
+                                    t('advanceTickets.originAgency', {
+                                        agency: row.futureAgency,
+                                    })
+                                }}
+                            </span>
+                            <span>
+                                {{
+                                    t('advanceTickets.destinationAgency', {
+                                        agency: row.agency,
+                                    })
+                                }}
+                            </span>
+                        </QTooltip>
+                    </QIcon>
+                </QTd>
+            </template>
+            <template #body-cell-ticketId="{ row }">
+                <QTd>
+                    <QBtn flat color="primary">
+                        {{ row.id }}
+                        <TicketDescriptorProxy :id="row.id" />
+                    </QBtn>
+                </QTd>
+            </template>
+            <template #body-cell-state="{ row }">
+                <QTd>
+                    <QBadge
+                        text-color="black"
+                        :color="row.classColor"
+                        class="q-ma-none"
+                        dense
+                    >
+                        {{ row.state }}
+                    </QBadge>
+                </QTd>
+            </template>
+            <template #body-cell-import="{ row }">
+                <QTd>
+                    <QBadge
+                        :text-color="isLessThan50(row.totalWithVat) ? 'black' : 'white'"
+                        :color="totalPriceColor(row.totalWithVat)"
+                        class="q-ma-none"
+                        dense
+                    >
+                        {{ toCurrency(row.totalWithVat || 0) }}
+                    </QBadge>
+                </QTd>
+            </template>
+            <template #body-cell-futureId="{ row }">
+                <QTd class="vertical-separator">
+                    <QBtn flat color="primary" dense>
+                        {{ row.futureId }}
+                        <TicketDescriptorProxy :id="row.futureId" />
+                    </QBtn>
+                </QTd>
+            </template>
+            <template #body-cell-futureState="{ row }">
+                <QTd>
+                    <QBadge
+                        text-color="black"
+                        :color="row.futureClassColor"
+                        class="q-ma-none"
+                        dense
+                    >
+                        {{ row.futureState }}
+                    </QBadge>
+                </QTd>
+            </template>
+            <template #body-cell-futureImport="{ row }">
+                <QTd>
+                    <QBadge
+                        :text-color="
+                            isLessThan50(row.futureTotalWithVat) ? 'black' : 'white'
+                        "
+                        :color="totalPriceColor(row.futureTotalWithVat)"
+                        class="q-ma-none"
+                        dense
+                    >
+                        {{ toCurrency(row.futureTotalWithVat || 0) }}
+                    </QBadge>
+                </QTd>
+            </template>
+        </QTable>
+        <VnProgress
+            :progress="progressPercentage"
+            :cancelled="cancelProgress"
+            v-model:show-dialog="showProgressDialog"
+            @cancel="handleCancelProgress()"
+            @close="handleCloseProgressDialog()"
+        >
+            <div v-if="splitErrors.length" class="column">
+                <span>{{ t('advanceTickets.errorsList') }}:</span>
+                <span v-for="(error, index) in splitErrors" :key="index">
+                    {{ error.id }}: {{ error.reason }}
+                </span>
+            </div>
+        </VnProgress>
+    </QPage>
+</template>
+
+<style scoped lang="scss">
+.vertical-separator {
+    border-left: 4px solid white !important;
+}
+
+.horizontal-separator {
+    border-bottom: 4px solid white !important;
+}
+</style>
diff --git a/src/pages/Ticket/locale/en.yml b/src/pages/Ticket/locale/en.yml
new file mode 100644
index 000000000..8d761a128
--- /dev/null
+++ b/src/pages/Ticket/locale/en.yml
@@ -0,0 +1,28 @@
+advanceTickets:
+    origin: Origin
+    destination: Destination
+    originAgency: 'Origin agency: {agency}'
+    destinationAgency: 'Destination agency: {agency}'
+    ticketId: ID
+    ipt: IPT
+    state: State
+    liters: Liters
+    lines: Lines
+    import: Import
+    futureId: ID
+    futureIpt: IPT
+    futureState: State
+    futureLiters: Liters
+    futureZone: Zone
+    notMovableLines: Not movable
+    futureLines: Lines
+    futureImport: Import
+    advanceTickets: Advance tickets with negatives
+    advanceTicketTitle: Advance tickets
+    advanceTitleSubtitle: Advance confirmation
+    noDeliveryZone: No delivery zone available for this landing date
+    moveTicketSuccess: 'Tickets moved successfully! {ticketsNumber}'
+    advanceTicketsWithoutNegatives: Advance tickets without negatives
+    advanceWithoutNegativeTitle: Advance tickets (without negatives)
+    advanceWithoutNegativeSubtitle: Advance confirmation
+    errorsList: Errors list
diff --git a/src/pages/Ticket/locale/es.yml b/src/pages/Ticket/locale/es.yml
index 5348b29b9..6134258b2 100644
--- a/src/pages/Ticket/locale/es.yml
+++ b/src/pages/Ticket/locale/es.yml
@@ -1,2 +1,30 @@
+advanceTickets:
+    origin: Origen
+    destination: Destino
+    originAgency: 'Agencia origen: {agency}'
+    destinationAgency: 'Agencia destino: {agency}'
+    ticketId: ID
+    ipt: IPT
+    state: Estado
+    liters: Litros
+    lines: Líneas
+    import: Importe
+    futureId: ID
+    futureIpt: IPT
+    futureState: Estado
+    futureLiters: Litros
+    futureZone: Zona
+    notMovableLines: No movibles
+    futureLines: Líneas
+    futureImport: Importe
+    advanceTickets: Adelantar tickets con negativos
+    advanceTicketTitle: Advance tickets
+    advanceTitleSubtitle: '¿Desea adelantar {selectedTickets} tickets?'
+    noDeliveryZone: No hay una zona de reparto disponible para la fecha de envío seleccionada
+    moveTicketSuccess: 'Tickets movidos correctamente {ticketsNumber}'
+    advanceTicketsWithoutNegatives: Adelantar tickets sin negativos
+    advanceWithoutNegativeTitle: Adelantar tickets (sin negativos)
+    advanceWithoutNegativeSubtitle: '¿Desea adelantar {selectedTickets} tickets?'
+    errorsList: Lista de errores
 Search ticket: Buscar ticket
 You can search by ticket id or alias: Puedes buscar por id o alias del ticket
diff --git a/src/router/modules/ticket.js b/src/router/modules/ticket.js
index 6cb7291dc..2562bdd08 100644
--- a/src/router/modules/ticket.js
+++ b/src/router/modules/ticket.js
@@ -11,7 +11,7 @@ export default {
     component: RouterView,
     redirect: { name: 'TicketMain' },
     menus: {
-        main: ['TicketList'],
+        main: ['TicketList', 'TicketAdvance'],
         card: ['TicketBoxing', 'TicketSms', 'TicketSale'],
     },
     children: [
@@ -40,6 +40,15 @@ export default {
                     },
                     component: () => import('src/pages/Ticket/TicketCreate.vue'),
                 },
+                {
+                    name: 'TicketAdvance',
+                    path: 'advance',
+                    meta: {
+                        title: 'ticketAdvance',
+                        icon: 'keyboard_double_arrow_left',
+                    },
+                    component: () => import('src/pages/Ticket/TicketAdvance.vue'),
+                },
             ],
         },
         {

From d488a2d52391e12f4d1f89ddfdf5a86ba6ab1b4f Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 18 Jun 2024 11:50:15 -0300
Subject: [PATCH 099/167] small change

---
 src/pages/Ticket/TicketWeekly.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Ticket/TicketWeekly.vue b/src/pages/Ticket/TicketWeekly.vue
index 50b4c0451..022f1bb30 100644
--- a/src/pages/Ticket/TicketWeekly.vue
+++ b/src/pages/Ticket/TicketWeekly.vue
@@ -67,7 +67,7 @@ const applyColumnFilter = async (col) => {
     }
 };
 
-const getInputEvents = (col) => ({ 'update:modelValue': () => applyColumnFilter(col) });
+const getInputEvents = (col) => ({ 'keyup.enter': () => applyColumnFilter(col) });
 
 const columns = computed(() => [
     {

From de0ef06d926b01293350fe5a4ce76ad16307464e Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 18 Jun 2024 19:28:05 -0300
Subject: [PATCH 100/167] remove console.log

---
 src/pages/Ticket/TicketWeekly.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/Ticket/TicketWeekly.vue b/src/pages/Ticket/TicketWeekly.vue
index 022f1bb30..5dbc99d22 100644
--- a/src/pages/Ticket/TicketWeekly.vue
+++ b/src/pages/Ticket/TicketWeekly.vue
@@ -60,7 +60,6 @@ const applyColumnFilter = async (col) => {
     try {
         const paramKey = col.columnFilter?.filterParamKey || col.field;
         params[paramKey] = col.columnFilter.filterValue;
-        console.log('paramKey', paramKey, 'params', params);
         await paginateRef.value.addFilter(null, params);
     } catch (err) {
         console.error('Error applying column filter', err);

From ac28a6728aaf5888df32bb3452f04b6f10ca9dc2 Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Wed, 19 Jun 2024 08:41:36 +0200
Subject: [PATCH 101/167] refs #7409 change icon

---
 src/router/modules/customer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/router/modules/customer.js b/src/router/modules/customer.js
index 3aece0dfe..9e3b39479 100644
--- a/src/router/modules/customer.js
+++ b/src/router/modules/customer.js
@@ -274,7 +274,7 @@ export default {
                     name: 'CustomerBalance',
                     meta: {
                         title: 'balance',
-                        icon: 'vn:invoice',
+                        icon: 'balance',
                     },
                     component: () =>
                         import('src/pages/Customer/Card/CustomerBalance.vue'),

From 40842f4ba630e09e44762490173a1a777d64b0d3 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Wed, 19 Jun 2024 09:42:08 +0200
Subject: [PATCH 102/167] test(arrayData) add front test

---
 .../composables/useArrayData.spec.js          | 63 ++++++++++++-------
 1 file changed, 40 insertions(+), 23 deletions(-)

diff --git a/test/vitest/__tests__/composables/useArrayData.spec.js b/test/vitest/__tests__/composables/useArrayData.spec.js
index dc3f77927..5e4d12560 100644
--- a/test/vitest/__tests__/composables/useArrayData.spec.js
+++ b/test/vitest/__tests__/composables/useArrayData.spec.js
@@ -1,10 +1,13 @@
-import { describe, expect, it, beforeAll, afterEach, vi } from 'vitest';
+import { describe, expect, it, beforeEach, afterEach, vi } from 'vitest';
 import { axios, flushPromises } from 'app/test/vitest/helper';
 import { useArrayData } from 'composables/useArrayData';
 import { useRouter } from 'vue-router';
+import * as vueRouter from 'vue-router';
 
 describe('useArrayData', () => {
-    beforeAll(() => {
+    const filter = '{"order":"","limit":10,"skip":0}';
+    const params = { supplierFk: 2 };
+    beforeEach(() => {
         vi.spyOn(useRouter(), 'replace');
         vi.spyOn(useRouter(), 'push');
     });
@@ -18,8 +21,6 @@ describe('useArrayData', () => {
 
         const arrayData = useArrayData('ArrayData', { url: 'mockUrl' });
 
-        const filter = '{"order":"","limit":10,"skip":0}';
-        const params = { supplierFk: 2 };
         arrayData.store.userParams = params;
         arrayData.fetch({});
 
@@ -41,8 +42,6 @@ describe('useArrayData', () => {
 
         const arrayData = useArrayData('ArrayData', { url: 'mockUrl', navigate: {} });
 
-        const filter = '{"order":"","limit":10,"skip":0}';
-        const params = { supplierFk: 2 };
         arrayData.store.userParams = params;
         arrayData.fetch({});
 
@@ -57,25 +56,43 @@ describe('useArrayData', () => {
         expect(routerPush.query).toBeUndefined();
     });
 
-    // it('Should get data and send new URL keeping parameters, if you have more than one record', async () => {
-    //     vi.spyOn(axios, 'get').mockReturnValueOnce({ data: [{ id: 1 }, { id: 2 }] });
+    it('Should get data and send new URL keeping parameters, if you have more than one record', async () => {
+        vi.spyOn(axios, 'get').mockReturnValueOnce({ data: [{ id: 1 }, { id: 2 }] });
 
-    //     const arrayData = useArrayData('ArrayData', { url: 'mockUrl', navigate: {} });
+        vi.spyOn(vueRouter, 'useRoute').mockReturnValue({
+            matched: [],
+            query: {},
+            params: {},
+            meta: { moduleName: 'mockName' },
+            path: 'mockName/1',
+        });
+        vi.spyOn(vueRouter, 'useRouter').mockReturnValue({
+            push: vi.fn(),
+            replace: vi.fn(),
+            currentRoute: {
+                value: {
+                    params: {
+                        id: 1,
+                    },
+                    meta: { moduleName: 'mockName' },
+                    matched: [{ path: 'mockName/:id' }],
+                },
+            },
+        });
 
-    //     const filter = '{"order":"","limit":10,"skip":0}';
-    //     const params = { supplierFk: 2 };
-    //     arrayData.store.userParams = params;
-    //     arrayData.fetch({});
+        const arrayData = useArrayData('ArrayData', { url: 'mockUrl', navigate: {} });
 
-    //     await flushPromises();
-    //     const routerPush = useRouter().push.mock.calls[0][0];
-    //     console.log('routerPush: ', routerPush);
+        arrayData.store.userParams = params;
+        arrayData.fetch({});
 
-    //     expect(axios.get.mock.calls[0][1].params).toEqual({
-    //         filter,
-    //         supplierFk: 2,
-    //     });
-    //     expect(routerPush.path).toEqual('mockName/1');
-    //     expect(routerPush.query).toBeUndefined();
-    // });
+        await flushPromises();
+        const routerPush = useRouter().push.mock.calls[0][0];
+
+        expect(axios.get.mock.calls[0][1].params).toEqual({
+            filter,
+            supplierFk: 2,
+        });
+        expect(routerPush.path).toEqual('mockName/');
+        expect(routerPush.query.params).toBeDefined();
+    });
 });

From b5bf4bab5466f87942f6b56d7f7cb6c70954d586 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Wed, 19 Jun 2024 09:55:30 +0200
Subject: [PATCH 103/167] feat(CustomerFIlter): use correct table

---
 src/pages/Customer/CustomerFilter.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Customer/CustomerFilter.vue b/src/pages/Customer/CustomerFilter.vue
index 206832f46..043bcdadb 100644
--- a/src/pages/Customer/CustomerFilter.vue
+++ b/src/pages/Customer/CustomerFilter.vue
@@ -29,7 +29,7 @@ const zones = ref();
         @on-fetch="(data) => (workers = data)"
         auto-load
     />
-    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
+    <VnFilterPanel :data-key="props.dataKey" :search-button="true" search-url="table">
         <template #tags="{ tag, formatFn }">
             <div class="q-gutter-x-xs">
                 <strong>{{ t(`params.${tag.label}`) }}: </strong>

From 2ea87ea9207bb05b3375f1710eefe80c3185c696 Mon Sep 17 00:00:00 2001
From: pablone <pablone@verdnatura.es>
Date: Wed, 19 Jun 2024 10:19:12 +0200
Subject: [PATCH 104/167] fix: refs #7129 remove consoleLog

---
 src/pages/Route/RouteAutonomous.vue | 1 -
 src/pages/Route/RouteRoadmap.vue    | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/pages/Route/RouteAutonomous.vue b/src/pages/Route/RouteAutonomous.vue
index 91a2e33d5..daffcb3f2 100644
--- a/src/pages/Route/RouteAutonomous.vue
+++ b/src/pages/Route/RouteAutonomous.vue
@@ -120,7 +120,6 @@ const refreshKey = ref(0);
 const total = computed(() => {
     return selectedRows.value.reduce((sum, item) => sum + item.price, 0);
 });
-console.log('total: ', total);
 
 const openDmsUploadDialog = async () => {
     dmsDialog.value.rowsToCreateInvoiceIn = selectedRows.value
diff --git a/src/pages/Route/RouteRoadmap.vue b/src/pages/Route/RouteRoadmap.vue
index 602c1725c..f3c0505c6 100644
--- a/src/pages/Route/RouteRoadmap.vue
+++ b/src/pages/Route/RouteRoadmap.vue
@@ -129,7 +129,6 @@ function confirmRemove() {
 }
 
 function navigateToRoadmapSummary(event, row) {
-    console.log('row.id : ', row.id);
     router.push({ name: 'RoadmapSummary', params: { id: 1 } });
 }
 </script>

From b3a4dd3f799c340f73c5e81af8aff7742d5f8bc9 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 19 Jun 2024 08:16:20 -0300
Subject: [PATCH 105/167] Ticket purchase request

---
 src/i18n/locale/en.yml                        |   1 +
 src/i18n/locale/es.yml                        |   1 +
 src/pages/Ticket/Card/TicketCard.vue          |  24 +-
 src/pages/Ticket/Card/TicketCreateRequest.vue |  69 +++++
 .../Ticket/Card/TicketPurchaseRequest.vue     | 261 ++++++++++++++++++
 src/pages/Ticket/locale/en.yml                |  14 +
 src/pages/Ticket/locale/es.yml                |  14 +
 src/router/modules/ticket.js                  |  12 +-
 8 files changed, 389 insertions(+), 7 deletions(-)
 create mode 100644 src/pages/Ticket/Card/TicketCreateRequest.vue
 create mode 100644 src/pages/Ticket/Card/TicketPurchaseRequest.vue
 create mode 100644 src/pages/Ticket/locale/en.yml

diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index b3a85eefa..3ebf23b3c 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -443,6 +443,7 @@ ticket:
         sms: Sms
         notes: Notes
         sale: Sale
+        purchaseRequest: Purchase request
     list:
         nickname: Nickname
         state: State
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index d03ee9d5c..620b67a0a 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -441,6 +441,7 @@ ticket:
         sms: Sms
         notes: Notas
         sale: Lineas del pedido
+        purchaseRequest: Petición de compra
     list:
         nickname: Alias
         state: Estado
diff --git a/src/pages/Ticket/Card/TicketCard.vue b/src/pages/Ticket/Card/TicketCard.vue
index 04363b506..ecea3aab2 100644
--- a/src/pages/Ticket/Card/TicketCard.vue
+++ b/src/pages/Ticket/Card/TicketCard.vue
@@ -1,17 +1,29 @@
 <script setup>
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import { computed } from 'vue';
+
 import VnCard from 'components/common/VnCard.vue';
 import TicketDescriptor from './TicketDescriptor.vue';
 import TicketFilter from '../TicketFilter.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+
+const routeName = computed(() => route.name);
+const searchBarDataKeys = {
+    TicketSummary: 'TicketSummary',
+    TicketPurchaseRequest: 'TicketPurchaseRequest',
+};
 </script>
 <template>
     <VnCard
         data-key="Ticket"
-        base-url="Tickets"
-        :descriptor="TicketDescriptor"
         :filter-panel="TicketFilter"
-        search-data-key="TicketList"
-        search-url="Tickets/filter"
-        searchbar-label="Search ticket"
-        searchbar-info="You can search by ticket id or alias"
+        :descriptor="TicketDescriptor"
+        :search-data-key="searchBarDataKeys[routeName]"
+        :search-custom-route-redirect="routeName"
+        :searchbar-label="t('card.search')"
+        :searchbar-info="t('card.searchInfo')"
     />
 </template>
diff --git a/src/pages/Ticket/Card/TicketCreateRequest.vue b/src/pages/Ticket/Card/TicketCreateRequest.vue
new file mode 100644
index 000000000..6b436621f
--- /dev/null
+++ b/src/pages/Ticket/Card/TicketCreateRequest.vue
@@ -0,0 +1,69 @@
+<script setup>
+import { ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import FormModelPopup from 'components/FormModelPopup.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import FetchData from 'components/FetchData.vue';
+
+const emit = defineEmits(['onRequestCreated']);
+
+const route = useRoute();
+const { t } = useI18n();
+
+const attendersOptions = ref([]);
+</script>
+<template>
+    <FetchData
+        url="TicketRequests/getItemTypeWorker"
+        :filter="{ fields: ['id', 'nickname'], order: 'nickname ASC' }"
+        auto-load
+        @on-fetch="(data) => (attendersOptions = data)"
+    />
+    <FormModelPopup
+        :title="t('Create request')"
+        url-create="TicketRequests"
+        model="CreateTicketRequest"
+        :form-initial-data="{ ticketFk: route.params.id }"
+        @on-data-saved="() => emit('onRequestCreated')"
+    >
+        <template #form-inputs="{ data }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnInput
+                    v-model="data.description"
+                    :label="t('purchaseRequest.description')"
+                />
+                <VnSelect
+                    :label="t('purchaseRequest.atender')"
+                    v-model="data.attenderFk"
+                    :options="attendersOptions"
+                    hide-selected
+                    option-label="nickname"
+                    option-value="id"
+                />
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <VnInput
+                    v-model="data.quantity"
+                    :label="t('purchaseRequest.quantity')"
+                    type="number"
+                    min="1"
+                />
+                <VnInput
+                    v-model="data.price"
+                    :label="t('purchaseRequest.price')"
+                    type="number"
+                    min="0"
+                />
+            </VnRow>
+        </template>
+    </FormModelPopup>
+</template>
+
+<i18n>
+    es:
+        Create request: Crear petición de compra
+</i18n>
diff --git a/src/pages/Ticket/Card/TicketPurchaseRequest.vue b/src/pages/Ticket/Card/TicketPurchaseRequest.vue
new file mode 100644
index 000000000..387a5baf1
--- /dev/null
+++ b/src/pages/Ticket/Card/TicketPurchaseRequest.vue
@@ -0,0 +1,261 @@
+<script setup>
+import { ref, computed, watch, reactive } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import VnInput from 'src/components/common/VnInput.vue';
+import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
+import CrudModel from 'src/components/CrudModel.vue';
+import TicketCreateRequest from './TicketCreateRequest.vue';
+
+import { dashIfEmpty } from 'src/filters';
+import { toDateFormat } from 'src/filters/date.js';
+
+const route = useRoute();
+const { t } = useI18n();
+const createTicketRequestDialogRef = ref(null);
+const crudModelRef = ref(null);
+
+watch(
+    () => route.params.id,
+    async (val) => {
+        crudModelFilter.where.ticketFk = val;
+        crudModelRef.value.reload();
+    }
+);
+
+const crudModelFilter = reactive({
+    include: [
+        {
+            relation: 'atender',
+            scope: {
+                include: {
+                    relation: 'user',
+                    scope: {
+                        fields: ['nickname'],
+                    },
+                },
+            },
+        },
+        {
+            relation: 'requester',
+            scope: {
+                include: {
+                    relation: 'user',
+                    scope: {
+                        fields: ['nickname'],
+                    },
+                },
+            },
+        },
+        {
+            relation: 'sale',
+        },
+    ],
+    fields: [
+        'id',
+        'description',
+        'created',
+        'requesterFk',
+        'attenderFk',
+        'quantity',
+        'price',
+        'saleFk',
+        'isOk',
+    ],
+    order: ['created ASC'],
+    where: {
+        ticketFk: route.params.id,
+    },
+});
+
+const columns = computed(() => [
+    {
+        label: t('purchaseRequest.id'),
+        name: 'id',
+        field: 'id',
+        align: 'left',
+        columnFilter: null,
+    },
+    {
+        label: t('purchaseRequest.description'),
+        name: 'description',
+        field: 'description',
+        align: 'left',
+        format: (val) => dashIfEmpty(val),
+    },
+    {
+        label: t('purchaseRequest.created'),
+        name: 'created',
+        field: 'created',
+        align: 'left',
+        format: (val) => toDateFormat(val),
+    },
+    {
+        label: t('purchaseRequest.requester'),
+        name: 'requester',
+        align: 'left',
+        sortable: true,
+    },
+    {
+        label: t('purchaseRequest.atender'),
+        name: 'atender',
+        align: 'left',
+    },
+    {
+        label: t('purchaseRequest.quantity'),
+        name: 'quantity',
+        align: 'left',
+    },
+    {
+        label: t('purchaseRequest.price'),
+        name: 'price',
+        align: 'left',
+    },
+    {
+        label: t('purchaseRequest.saleFk'),
+        name: 'saleFk',
+        align: 'left',
+    },
+    {
+        label: t('purchaseRequest.state'),
+        name: 'state',
+        field: 'isOk',
+        align: 'left',
+        format: (val) => getRequestState(val),
+    },
+    {
+        label: '',
+        name: 'actions',
+        align: 'left',
+        columnFilter: null,
+    },
+]);
+
+const getRequestState = (state) => {
+    switch (state) {
+        case null:
+            return 'New';
+        case false:
+            return 'Denied';
+        case true:
+            return 'Acepted';
+    }
+};
+
+const isEditable = (isOk) => isOk !== null;
+
+const removeLine = async (row) => crudModelRef.value.remove([row]);
+
+const openCreateModal = () => createTicketRequestDialogRef.value.show();
+</script>
+
+<template>
+    <QPage class="column items-center q-pa-md">
+        <CrudModel
+            data-key="PurchaseRequests"
+            url="TicketRequests"
+            ref="crudModelRef"
+            :filter="crudModelFilter"
+            :order="['created ASC']"
+            :default-remove="false"
+            :default-save="false"
+            :default-reset="false"
+            :limit="0"
+            auto-load
+        >
+            <template #body="{ rows }">
+                <QTable
+                    :rows="rows"
+                    :columns="columns"
+                    row-key="id"
+                    :pagination="{ rowsPerPage: 0 }"
+                    class="full-width q-mt-md"
+                    :no-data-label="t('globals.noResults')"
+                    @row-click="(_, row) => redirectToTicketSummary(row.ticketFk)"
+                >
+                    <template #body-cell-description="{ row }">
+                        <QTd @click.stop>
+                            <VnInput
+                                v-model="row.description"
+                                @blur="crudModelRef.saveChanges()"
+                                :disable="isEditable(row.isOk)"
+                            />
+                        </QTd>
+                    </template>
+                    <template #body-cell-requester="{ row }">
+                        <QTd @click.stop>
+                            <QBtn flat color="primary">
+                                {{ row.requester?.user?.nickname }}
+                                <WorkerDescriptorProxy :id="row.requesterFk" />
+                            </QBtn>
+                        </QTd>
+                    </template>
+                    <template #body-cell-atender="{ row }">
+                        <QTd @click.stop>
+                            <QBtn flat color="primary">
+                                {{ row.atender?.user?.nickname }}
+                                <WorkerDescriptorProxy :id="row.attenderFk" />
+                            </QBtn>
+                        </QTd>
+                    </template>
+                    <template #body-cell-quantity="{ row }">
+                        <QTd @click.stop>
+                            <VnInput
+                                v-model="row.quantity"
+                                @blur="crudModelRef.saveChanges()"
+                                :disable="isEditable(row.isOk)"
+                            />
+                        </QTd>
+                    </template>
+                    <template #body-cell-price="{ row }">
+                        <QTd @click.stop>
+                            <VnInput
+                                v-model="row.price"
+                                @blur="crudModelRef.saveChanges()"
+                                :disable="isEditable(row.isOk)"
+                            />
+                        </QTd>
+                    </template>
+                    <template #body-cell-saleFk="{ row }">
+                        <QTd @click.stop>
+                            <QBtn v-if="row.saleFk" flat color="primary">
+                                {{ row.requester?.user?.nickname }}
+                                <ItemDescriptorProxy :id="row.sale.itemFk" />
+                            </QBtn>
+                        </QTd>
+                    </template>
+                    <template #body-cell-actions="{ row }">
+                        <QTd>
+                            <QIcon
+                                @click.stop="removeLine(row)"
+                                class="q-ml-sm cursor-pointer"
+                                color="primary"
+                                name="delete"
+                                size="sm"
+                            >
+                                <QTooltip>
+                                    {{ t('globals.delete') }}
+                                </QTooltip>
+                            </QIcon>
+                        </QTd>
+                    </template>
+                </QTable>
+            </template>
+        </CrudModel>
+        <QDialog
+            ref="createTicketRequestDialogRef"
+            transition-show="scale"
+            transition-hide="scale"
+        >
+            <TicketCreateRequest @on-request-created="crudModelRef.reload()" />
+        </QDialog>
+        <QPageSticky :offset="[20, 20]">
+            <QBtn @click="openCreateModal()" color="primary" fab icon="add" />
+            <QTooltip class="text-no-wrap">
+                {{ t('purchaseRequest.newRequest') }}
+            </QTooltip>
+        </QPageSticky>
+    </QPage>
+</template>
diff --git a/src/pages/Ticket/locale/en.yml b/src/pages/Ticket/locale/en.yml
new file mode 100644
index 000000000..5930e3487
--- /dev/null
+++ b/src/pages/Ticket/locale/en.yml
@@ -0,0 +1,14 @@
+card:
+    search: Search tickets
+    searchInfo: You can search by ticket id or alias
+purchaseRequest:
+    id: Id
+    description: Description
+    created: Created
+    requester: Requester
+    atender: Atender
+    quantity: Quantity
+    price: Price
+    saleFk: Item id
+    state: State
+    newRequest: New request
diff --git a/src/pages/Ticket/locale/es.yml b/src/pages/Ticket/locale/es.yml
index 5348b29b9..80d32b4a5 100644
--- a/src/pages/Ticket/locale/es.yml
+++ b/src/pages/Ticket/locale/es.yml
@@ -1,2 +1,16 @@
+card:
+    search: Buscar tickets
+    searchInfo: Buscar tickets por identificador o alias
+purchaseRequest:
+    Id: Id
+    description: Descripción
+    created: Fecha creación
+    requester: Solicitante
+    atender: Comprador
+    quantity: Cantidad
+    price: Precio
+    saleFk: Id artículo
+    state: Estado
+    newRequest: Crear petición
 Search ticket: Buscar ticket
 You can search by ticket id or alias: Puedes buscar por id o alias del ticket
diff --git a/src/router/modules/ticket.js b/src/router/modules/ticket.js
index 6cb7291dc..584fb9dc5 100644
--- a/src/router/modules/ticket.js
+++ b/src/router/modules/ticket.js
@@ -12,7 +12,7 @@ export default {
     redirect: { name: 'TicketMain' },
     menus: {
         main: ['TicketList'],
-        card: ['TicketBoxing', 'TicketSms', 'TicketSale'],
+        card: ['TicketBoxing', 'TicketSms', 'TicketSale', 'TicketPurchaseRequest'],
     },
     children: [
         {
@@ -93,6 +93,16 @@ export default {
                     },
                     component: () => import('src/pages/Ticket/Card/TicketSms.vue'),
                 },
+                {
+                    path: 'request',
+                    name: 'TicketPurchaseRequest',
+                    meta: {
+                        title: 'purchaseRequest',
+                        icon: 'vn:buyrequest',
+                    },
+                    component: () =>
+                        import('src/pages/Ticket/Card/TicketPurchaseRequest.vue'),
+                },
             ],
         },
     ],

From 3fdad15f21e63a92962877b827224adf2e05e352 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 19 Jun 2024 13:43:32 +0200
Subject: [PATCH 106/167] fix: comments

---
 src/pages/Order/OrderLines.vue | 48 +++++++---------------------------
 1 file changed, 9 insertions(+), 39 deletions(-)

diff --git a/src/pages/Order/OrderLines.vue b/src/pages/Order/OrderLines.vue
index fcb4551c8..e622a9d18 100644
--- a/src/pages/Order/OrderLines.vue
+++ b/src/pages/Order/OrderLines.vue
@@ -131,7 +131,7 @@ const detailsColumns = ref([
         auto-load
     />
     <QPage :key="componentKey" class="column items-center q-pa-md">
-        <div class="order-list">
+        <div class="order-list full-width">
             <div v-if="!orderSummary.total" class="no-result">
                 {{ t('globals.noResults') }}
             </div>
@@ -213,46 +213,21 @@ const detailsColumns = ref([
                                     </span>
                                 </QTd>
                             </template>
-                            <template #body-cell-description="{ value }">
-                                <QTd class="description-cell">
-                                    <FetchedTags
-                                        :item="value"
-                                        :max-length="6"
-                                        class="fetched-tags"
-                                    />
-                                    <div class="row full-width justify-between">
+                            <template #body-cell-description="{ row, value }">
+                                <QTd>
+                                    <div
+                                        class="row column full-width justify-between flex-start"
+                                        style="align-items: flex-start"
+                                    >
                                         {{ value }}
                                         <div v-if="value" class="subName">
                                             {{ value.toUpperCase() }}
                                         </div>
                                     </div>
+                                    <FetchedTags :item="row.item" :max-length="6" />
                                 </QTd>
                             </template>
-                            <template #body-cell-warehouse="{ value }">
-                                <QTd>
-                                    {{ value }}
-                                </QTd>
-                            </template>
-                            <template #body-cell-shipped="{ value }">
-                                <QTd>
-                                    {{ value }}
-                                </QTd>
-                            </template>
-                            <template #body-cell-quantity="{ value }">
-                                <QTd>
-                                    {{ value }}
-                                </QTd>
-                            </template>
-                            <template #body-cell-price="{ value }">
-                                <QTd>
-                                    {{ value }}
-                                </QTd>
-                            </template>
-                            <template #body-cell-amount="{ value }">
-                                <QTd>
-                                    {{ value }}
-                                </QTd>
-                            </template>
+
                             <template #body-cell-actions="{ value }">
                                 <QTd>
                                     <QIcon
@@ -261,7 +236,6 @@ const detailsColumns = ref([
                                         size="sm"
                                         class="cursor-pointer"
                                         @click.stop="confirmRemove(value)"
-                                        style="margin-left: 40%"
                                     >
                                         <QTooltip>{{ t('Remove thermograph') }}</QTooltip>
                                     </QIcon>
@@ -324,10 +298,6 @@ const detailsColumns = ref([
     text-align: center;
 }
 
-.description-cell {
-    width: 25%;
-}
-
 .subName {
     text-transform: uppercase;
     color: var(--vn-label-color);

From 02f8288b22e85da409d5635490d05ec2031121f0 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Wed, 19 Jun 2024 15:02:26 +0200
Subject: [PATCH 107/167] feat(customerList): add searchbar

---
 src/components/common/VnCard.vue         | 9 +++++++--
 src/pages/Customer/Card/CustomerCard.vue | 4 ++--
 src/pages/Customer/CustomerList.vue      | 8 +++++++-
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/components/common/VnCard.vue b/src/components/common/VnCard.vue
index 98c079239..8517525df 100644
--- a/src/components/common/VnCard.vue
+++ b/src/components/common/VnCard.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue';
+import { onBeforeMount, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useArrayData } from 'src/composables/useArrayData';
 import { useStateStore } from 'stores/useStateStore';
@@ -32,10 +32,15 @@ const url = computed(() => {
     return props.customUrl;
 });
 
-useArrayData(props.dataKey, {
+const arrayData = useArrayData(props.dataKey, {
     url: url.value,
     filter: props.filter,
 });
+
+onBeforeMount(async () => {
+    if (!props.baseUrl) arrayData.store.filter.where = { id: route.params.id };
+    await arrayData.fetch({ append: false });
+});
 </script>
 <template>
     <QDrawer
diff --git a/src/pages/Customer/Card/CustomerCard.vue b/src/pages/Customer/Card/CustomerCard.vue
index 98842a0c7..b8f4089fa 100644
--- a/src/pages/Customer/Card/CustomerCard.vue
+++ b/src/pages/Customer/Card/CustomerCard.vue
@@ -5,12 +5,12 @@ import CustomerFilter from '../CustomerFilter.vue';
 </script>
 <template>
     <VnCard
-        data-key="Client"
+        data-key="Customer"
         base-url="Clients"
         :descriptor="CustomerDescriptor"
         :filter-panel="CustomerFilter"
         search-data-key="CustomerList"
-        search-url="Clients/filter"
+        search-url="Clients/extendedListFilter"
         searchbar-label="Search customer"
         searchbar-info="You can search by customer id or name"
     />
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index 7eb3cefd0..ccd53e8b2 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import VnTable from 'components/VnTable/VnTable.vue';
 import VnLocation from 'src/components/common/VnLocation.vue';
+import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import CustomerSummary from './Card/CustomerSummary.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 
@@ -382,9 +383,14 @@ function handleLocation(data, location) {
 </script>
 
 <template>
+    <VnSearchbar
+        :info="t('You can search by customer id or name')"
+        :label="t('Search customer')"
+        data-key="Customer"
+    />
     <VnTable
         ref="tableRef"
-        data-key="CustomerExtendedList"
+        data-key="Customer"
         url="Clients/extendedListFilter"
         :create="{
             urlCreate: 'Clients/createWithUser',

From 702b031650cd353382cae8d6d6ce1b50a4a6f5d0 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Wed, 19 Jun 2024 15:18:38 +0200
Subject: [PATCH 108/167] feat(VnFilter): merge objects

---
 src/components/VnTable/VnChip.vue        |  3 +-
 src/components/VnTable/VnFilter.vue      | 45 +++++++++++-------------
 src/pages/Customer/Card/CustomerCard.vue |  2 +-
 3 files changed, 23 insertions(+), 27 deletions(-)

diff --git a/src/components/VnTable/VnChip.vue b/src/components/VnTable/VnChip.vue
index 2569eec37..74207b943 100644
--- a/src/components/VnTable/VnChip.vue
+++ b/src/components/VnTable/VnChip.vue
@@ -16,10 +16,11 @@ function stopEventPropagation(event) {
 }
 </script>
 <template>
+    <slot name="beforeChip" :row="row"></slot>
     <span
         v-for="col of columns"
         :key="col.name"
-        @click="stopEventPropagation($event)"
+        @click="stopEventPropagation"
         class="cursor-text"
     >
         <QChip
diff --git a/src/components/VnTable/VnFilter.vue b/src/components/VnTable/VnFilter.vue
index c2fadbb95..f0892b8bd 100644
--- a/src/components/VnTable/VnFilter.vue
+++ b/src/components/VnTable/VnFilter.vue
@@ -36,45 +36,44 @@ const enterEvent = {
     'keyup.enter': () => addFilter(model.value),
     remove: () => addFilter(null),
 };
+
+const defaultAttrs = {
+    filled: !$props.showTitle,
+    class: 'q-px-sm q-pb-xs q-pt-none',
+    dense: true,
+};
+
+const forceAttrs = {
+    label: $props.showTitle ? '' : $props.column.label,
+};
+
 const components = {
     input: {
         component: markRaw(VnInput),
         event: enterEvent,
         attrs: {
-            class: 'q-px-sm q-pb-xs q-pt-none',
-            dense: true,
-            filled: !$props.showTitle,
+            ...defaultAttrs,
             clearable: true,
         },
-        forceAttrs: {
-            label: $props.showTitle ? '' : $props.column.label,
-        },
+        forceAttrs,
     },
     number: {
         component: markRaw(VnInput),
         event: enterEvent,
         attrs: {
-            dense: true,
-            class: 'q-px-sm q-pb-xs q-pt-none',
+            ...defaultAttrs,
             clearable: true,
-            filled: !$props.showTitle,
-        },
-        forceAttrs: {
-            label: $props.showTitle ? '' : $props.column.label,
         },
+        forceAttrs,
     },
     date: {
         component: markRaw(VnInputDate),
         event: updateEvent,
         attrs: {
-            dense: true,
-            class: 'q-px-sm q-pb-xs q-pt-none',
-            filled: !$props.showTitle,
+            ...defaultAttrs,
             style: 'min-width: 150px',
         },
-        forceAttrs: {
-            label: $props.showTitle ? '' : $props.column.label,
-        },
+        forceAttrs,
     },
     checkbox: {
         component: markRaw(QCheckbox),
@@ -84,9 +83,7 @@ const components = {
             class: $props.showTitle ? 'q-py-sm q-mt-md' : 'q-px-md q-py-xs',
             'toggle-indeterminate': true,
         },
-        forceAttrs: {
-            label: $props.showTitle ? '' : $props.column.label,
-        },
+        forceAttrs,
     },
     select: {
         component: markRaw(VnSelect),
@@ -96,12 +93,10 @@ const components = {
             dense: true,
             filled: !$props.showTitle,
         },
-        forceAttrs: {
-            label: $props.showTitle ? '' : $props.column.label,
-        },
+        forceAttrs,
     },
 };
-
+console.log(components);
 async function addFilter(value) {
     value ??= undefined;
     if (value && typeof value === 'object') value = model.value;
diff --git a/src/pages/Customer/Card/CustomerCard.vue b/src/pages/Customer/Card/CustomerCard.vue
index b8f4089fa..17f123e7b 100644
--- a/src/pages/Customer/Card/CustomerCard.vue
+++ b/src/pages/Customer/Card/CustomerCard.vue
@@ -5,7 +5,7 @@ import CustomerFilter from '../CustomerFilter.vue';
 </script>
 <template>
     <VnCard
-        data-key="Customer"
+        data-key="Client"
         base-url="Clients"
         :descriptor="CustomerDescriptor"
         :filter-panel="CustomerFilter"

From d63d3a9c773af90d2947e9bb3c94770a188a7b73 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 19 Jun 2024 10:24:56 -0300
Subject: [PATCH 109/167] small change

---
 src/pages/Ticket/TicketFuture.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/pages/Ticket/TicketFuture.vue b/src/pages/Ticket/TicketFuture.vue
index 6c635b98a..cfd05ed6c 100644
--- a/src/pages/Ticket/TicketFuture.vue
+++ b/src/pages/Ticket/TicketFuture.vue
@@ -459,7 +459,11 @@ onMounted(async () => {
             <template #body-cell-import="{ row }">
                 <QTd>
                     <QBadge
-                        text-color="black"
+                        :text-color="
+                            totalPriceColor(row.totalWithVat) === 'warning'
+                                ? 'black'
+                                : 'white'
+                        "
                         :color="totalPriceColor(row.totalWithVat)"
                         class="q-ma-none"
                         dense

From 45cf4498d387214d5b37126455ed456d7d962dd2 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 19 Jun 2024 19:46:27 -0300
Subject: [PATCH 110/167] Cancel button change

---
 src/components/common/VnProgressModal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/common/VnProgressModal.vue b/src/components/common/VnProgressModal.vue
index e788dd20b..cfd948d5f 100644
--- a/src/components/common/VnProgressModal.vue
+++ b/src/components/common/VnProgressModal.vue
@@ -76,7 +76,7 @@ const cancel = () => {
             </QCardSection>
             <QCardActions align="right">
                 <QBtn
-                    v-if="!cancelled"
+                    v-if="!cancelled && progress < 1"
                     type="button"
                     flat
                     class="text-primary"

From 22bf0b459852c4cffe41bd7b8dda39a18f49aaff Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 19 Jun 2024 20:38:23 -0300
Subject: [PATCH 111/167] Search bar changes

---
 src/pages/Ticket/TicketFuture.vue | 6 +++---
 src/pages/Ticket/locale/en.yml    | 1 +
 src/pages/Ticket/locale/es.yml    | 3 ++-
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/pages/Ticket/TicketFuture.vue b/src/pages/Ticket/TicketFuture.vue
index cfd05ed6c..2efa87909 100644
--- a/src/pages/Ticket/TicketFuture.vue
+++ b/src/pages/Ticket/TicketFuture.vue
@@ -278,9 +278,9 @@ onMounted(async () => {
         @on-fetch="(data) => (itemPackingTypesOptions = data)"
     />
     <VnSearchbar
-        data-key="WeeklyTickets"
-        :label="t('weeklyTickets.search')"
-        :info="t('weeklyTickets.searchInfo')"
+        data-key="FutureTickets"
+        :label="t('Search ticket')"
+        :info="t('futureTickets.searchInfo')"
     />
     <VnSubToolbar>
         <template #st-data>
diff --git a/src/pages/Ticket/locale/en.yml b/src/pages/Ticket/locale/en.yml
index 16089a3cb..9e9f1c7ad 100644
--- a/src/pages/Ticket/locale/en.yml
+++ b/src/pages/Ticket/locale/en.yml
@@ -23,3 +23,4 @@ futureTickets:
     moveTicketTitle: Move tickets
     moveTicketDialogSubtitle: 'Do you want to move {selectedTickets} tickets to the future?'
     moveTicketSuccess: Tickets moved successfully!
+    searchInfo: Search future tickets by date
diff --git a/src/pages/Ticket/locale/es.yml b/src/pages/Ticket/locale/es.yml
index 906522b21..23a8dd345 100644
--- a/src/pages/Ticket/locale/es.yml
+++ b/src/pages/Ticket/locale/es.yml
@@ -23,5 +23,6 @@ futureTickets:
     moveTicketTitle: Mover tickets
     moveTicketDialogSubtitle: '¿Desea mover {selectedTickets} tickets hacia el futuro?'
     moveTicketSuccess: Tickets movidos correctamente
-Search ticket: Buscar ticket
+    searchInfo: Buscar tickets por fecha
+Search ticket: Buscar tickets
 You can search by ticket id or alias: Puedes buscar por id o alias del ticket

From 4e7c09fa44fa60ff29bf3647711979e33bfb455e Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 19 Jun 2024 20:40:27 -0300
Subject: [PATCH 112/167] Add tooltip to button

---
 src/pages/Ticket/TicketFuture.vue | 6 +++++-
 src/pages/Ticket/locale/en.yml    | 1 +
 src/pages/Ticket/locale/es.yml    | 1 +
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/pages/Ticket/TicketFuture.vue b/src/pages/Ticket/TicketFuture.vue
index 2efa87909..b33b3095b 100644
--- a/src/pages/Ticket/TicketFuture.vue
+++ b/src/pages/Ticket/TicketFuture.vue
@@ -297,7 +297,11 @@ onMounted(async () => {
                         moveTicketsFuture
                     )
                 "
-            />
+            >
+                <QTooltip>
+                    {{ t('futureTickets.futureTicket') }}
+                </QTooltip>
+            </QBtn>
         </template>
     </VnSubToolbar>
     <QPage class="column items-center q-pa-md">
diff --git a/src/pages/Ticket/locale/en.yml b/src/pages/Ticket/locale/en.yml
index 9e9f1c7ad..380a9bc71 100644
--- a/src/pages/Ticket/locale/en.yml
+++ b/src/pages/Ticket/locale/en.yml
@@ -24,3 +24,4 @@ futureTickets:
     moveTicketDialogSubtitle: 'Do you want to move {selectedTickets} tickets to the future?'
     moveTicketSuccess: Tickets moved successfully!
     searchInfo: Search future tickets by date
+    futureTicket: Future tickets
diff --git a/src/pages/Ticket/locale/es.yml b/src/pages/Ticket/locale/es.yml
index 23a8dd345..d7301cde4 100644
--- a/src/pages/Ticket/locale/es.yml
+++ b/src/pages/Ticket/locale/es.yml
@@ -24,5 +24,6 @@ futureTickets:
     moveTicketDialogSubtitle: '¿Desea mover {selectedTickets} tickets hacia el futuro?'
     moveTicketSuccess: Tickets movidos correctamente
     searchInfo: Buscar tickets por fecha
+    futureTicket: Tickets a futuro
 Search ticket: Buscar tickets
 You can search by ticket id or alias: Puedes buscar por id o alias del ticket

From 79c606fc7059c51c911d96348a7a5de96000fcb9 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 19 Jun 2024 20:43:21 -0300
Subject: [PATCH 113/167] Add checkbox

---
 src/pages/Ticket/TicketFuture.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/pages/Ticket/TicketFuture.vue b/src/pages/Ticket/TicketFuture.vue
index b33b3095b..5ec00a4cf 100644
--- a/src/pages/Ticket/TicketFuture.vue
+++ b/src/pages/Ticket/TicketFuture.vue
@@ -315,7 +315,7 @@ onMounted(async () => {
             :no-data-label="t('globals.noResults')"
             style="max-width: 99%"
         >
-            <template #header>
+            <template #header="props">
                 <QTr>
                     <QTh class="horizontal-separator" />
                     <QTh class="horizontal-separator" colspan="8" translate>
@@ -326,7 +326,9 @@ onMounted(async () => {
                     </QTh>
                 </QTr>
                 <QTr>
-                    <QTh />
+                    <QTh>
+                        <QCheckbox v-model="props.selected" />
+                    </QTh>
                     <QTh
                         v-for="(col, index) in ticketColumns"
                         :key="index"

From b6ec10994ae48a687198bf9d824bdcfa7bd7d699 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 19 Jun 2024 20:45:08 -0300
Subject: [PATCH 114/167] Change header titles style

---
 src/pages/Ticket/TicketFuture.vue | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/pages/Ticket/TicketFuture.vue b/src/pages/Ticket/TicketFuture.vue
index 5ec00a4cf..c22ffd3bb 100644
--- a/src/pages/Ticket/TicketFuture.vue
+++ b/src/pages/Ticket/TicketFuture.vue
@@ -318,10 +318,18 @@ onMounted(async () => {
             <template #header="props">
                 <QTr>
                     <QTh class="horizontal-separator" />
-                    <QTh class="horizontal-separator" colspan="8" translate>
+                    <QTh
+                        class="horizontal-separator text-uppercase color-vn-label"
+                        colspan="8"
+                        translate
+                    >
                         {{ t('futureTickets.origin') }}
                     </QTh>
-                    <QTh class="horizontal-separator" colspan="4" translate>
+                    <QTh
+                        class="horizontal-separator text-uppercase color-vn-label"
+                        colspan="4"
+                        translate
+                    >
                         {{ t('futureTickets.destination') }}
                     </QTh>
                 </QTr>

From 6cd8a478fa39d39243e99efd191e386b666328e7 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 19 Jun 2024 20:58:31 -0300
Subject: [PATCH 115/167] Clean selectedTickets after moving tickets

---
 src/pages/Ticket/TicketFuture.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/Ticket/TicketFuture.vue b/src/pages/Ticket/TicketFuture.vue
index c22ffd3bb..4db32de75 100644
--- a/src/pages/Ticket/TicketFuture.vue
+++ b/src/pages/Ticket/TicketFuture.vue
@@ -256,6 +256,7 @@ const moveTicketsFuture = async () => {
         let params = { tickets: ticketsToMove };
         await axios.post('Tickets/merge', params);
         notify(t('futureTickets.moveTicketSuccess'), 'positive');
+        selectedTickets.value = [];
         arrayData.fetch({ append: false });
     } catch (error) {
         console.error('Error moving tickets to future', error);

From a84c20f2cedc2f5acc44cf5f624e25113e03b966 Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Thu, 20 Jun 2024 08:33:29 +0200
Subject: [PATCH 116/167] refactor: refs #6896 changes requested in PR

---
 src/boot/quasar.js             |  7 -------
 src/pages/Order/OrderLines.vue |  3 +--
 src/stores/useImagesStore.js   | 12 ------------
 3 files changed, 1 insertion(+), 21 deletions(-)
 delete mode 100644 src/stores/useImagesStore.js

diff --git a/src/boot/quasar.js b/src/boot/quasar.js
index b4d1044cf..a8d9b7ad9 100644
--- a/src/boot/quasar.js
+++ b/src/boot/quasar.js
@@ -3,11 +3,4 @@ import qFormMixin from './qformMixin';
 
 export default boot(({ app }) => {
     app.mixin(qFormMixin);
-    app.config.globalProperties.$emitEvent = function (eventName, payload) {
-        app._instance?.emit(eventName, payload);
-    };
-
-    app.config.globalProperties.$onEvent = function (eventName, callback) {
-        app._instance?.on(eventName, callback);
-    };
 });
diff --git a/src/pages/Order/OrderLines.vue b/src/pages/Order/OrderLines.vue
index e622a9d18..6758fb170 100644
--- a/src/pages/Order/OrderLines.vue
+++ b/src/pages/Order/OrderLines.vue
@@ -216,8 +216,7 @@ const detailsColumns = ref([
                             <template #body-cell-description="{ row, value }">
                                 <QTd>
                                     <div
-                                        class="row column full-width justify-between flex-start"
-                                        style="align-items: flex-start"
+                                        class="row column full-width justify-between items-start"
                                     >
                                         {{ value }}
                                         <div v-if="value" class="subName">
diff --git a/src/stores/useImagesStore.js b/src/stores/useImagesStore.js
deleted file mode 100644
index b340a2798..000000000
--- a/src/stores/useImagesStore.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { defineStore } from 'pinia';
-
-export const useImagesStore = defineStore('imagesStore', {
-    state: () => ({
-        images: {},
-    }),
-    actions: {
-        async pushImage(url, data) {
-            this.images[url] = data;
-        },
-    },
-});

From 6d5973f4b74da846b9cc9bba5daa758bb585e34b Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Thu, 20 Jun 2024 10:26:22 +0200
Subject: [PATCH 117/167] refs #6504 fix formModel claimFilter claimCard

---
 src/boot/qformMixin.js                   |  1 -
 src/components/FormModel.vue             |  5 +++
 src/pages/Claim/Card/ClaimBasicData.vue  | 25 +-----------
 src/pages/Claim/Card/ClaimCard.vue       |  2 +
 src/pages/Claim/Card/ClaimDescriptor.vue | 46 +--------------------
 src/pages/Claim/Card/ClaimFilter.js      | 52 ++++++++++++++++++++++++
 6 files changed, 63 insertions(+), 68 deletions(-)
 create mode 100644 src/pages/Claim/Card/ClaimFilter.js

diff --git a/src/boot/qformMixin.js b/src/boot/qformMixin.js
index a809140b0..0bf1f9795 100644
--- a/src/boot/qformMixin.js
+++ b/src/boot/qformMixin.js
@@ -27,7 +27,6 @@ export default {
                 this.$el.addEventListener('keyup', function (evt) {
                     if (evt.key === 'Enter') {
                         const input = evt.target;
-                        console.log('input', input);
                         if (input.type == 'textarea' && evt.shiftKey) {
                             evt.preventDefault();
                             let { selectionStart, selectionEnd } = input;
diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue
index 05c63d563..f10dee61a 100644
--- a/src/components/FormModel.vue
+++ b/src/components/FormModel.vue
@@ -83,6 +83,10 @@ const $props = defineProps({
         default: '',
         description: 'It is used for redirect on click "save and continue"',
     },
+    reload: {
+        type: Boolean,
+        default: false,
+    },
 });
 const emit = defineEmits(['onFetch', 'onDataSaved']);
 const modelValue = computed(
@@ -201,6 +205,7 @@ async function save() {
         if ($props.urlCreate) notify('globals.dataCreated', 'positive');
 
         updateAndEmit('onDataSaved', formData.value, response?.data);
+        if ($props.reload) await arrayData.fetch({});
     } catch (err) {
         console.error(err);
         notify('errors.writeRequest', 'negative');
diff --git a/src/pages/Claim/Card/ClaimBasicData.vue b/src/pages/Claim/Card/ClaimBasicData.vue
index 50c9502d2..977a4dc5b 100644
--- a/src/pages/Claim/Card/ClaimBasicData.vue
+++ b/src/pages/Claim/Card/ClaimBasicData.vue
@@ -17,26 +17,6 @@ const { t } = useI18n();
 const { getTokenMultimedia } = useSession();
 const token = getTokenMultimedia();
 
-const claimFilter = {
-    fields: [
-        'id',
-        'clientFk',
-        'created',
-        'workerFk',
-        'claimStateFk',
-        'packages',
-        'pickup',
-    ],
-    include: [
-        {
-            relation: 'client',
-            scope: {
-                fields: ['name'],
-            },
-        },
-    ],
-};
-
 const claimStates = ref([]);
 const claimStatesCopy = ref([]);
 const optionsList = ref([]);
@@ -87,11 +67,10 @@ const statesFilter = {
     />
     <FetchData url="ClaimStates" @on-fetch="setClaimStates" auto-load />
     <FormModel
-        :url="`Claims/${route.params.id}`"
+        model="Claim"
         :url-update="`Claims/updateClaim/${route.params.id}`"
-        :filter="claimFilter"
-        model="claim"
         auto-load
+        :reload="true"
     >
         <template #form="{ data, validate, filter }">
             <VnRow class="row q-gutter-md q-mb-md">
diff --git a/src/pages/Claim/Card/ClaimCard.vue b/src/pages/Claim/Card/ClaimCard.vue
index f38ab5484..19d63e3b2 100644
--- a/src/pages/Claim/Card/ClaimCard.vue
+++ b/src/pages/Claim/Card/ClaimCard.vue
@@ -2,6 +2,7 @@
 import VnCard from 'components/common/VnCard.vue';
 import ClaimDescriptor from './ClaimDescriptor.vue';
 import ClaimFilter from '../ClaimFilter.vue';
+import filter from './ClaimFilter.js';
 </script>
 <template>
     <VnCard
@@ -13,5 +14,6 @@ import ClaimFilter from '../ClaimFilter.vue';
         search-url="Claims/filter"
         searchbar-label="Search claim"
         searchbar-info="You can search by claim id or customer name"
+        :filter="filter"
     />
 </template>
diff --git a/src/pages/Claim/Card/ClaimDescriptor.vue b/src/pages/Claim/Card/ClaimDescriptor.vue
index aae999117..5336c4427 100644
--- a/src/pages/Claim/Card/ClaimDescriptor.vue
+++ b/src/pages/Claim/Card/ClaimDescriptor.vue
@@ -12,6 +12,7 @@ import useCardDescription from 'src/composables/useCardDescription';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
 import { getUrl } from 'src/composables/getUrl';
 import ZoneDescriptorProxy from 'src/pages/Zone/Card/ZoneDescriptorProxy.vue';
+import filter from './ClaimFilter.js';
 
 const $props = defineProps({
     id: {
@@ -29,49 +30,6 @@ const entityId = computed(() => {
     return $props.id || route.params.id;
 });
 
-const filter = {
-    include: [
-        {
-            relation: 'client',
-            scope: {
-                include: [
-                    { relation: 'salesPersonUser' },
-                    {
-                        relation: 'claimsRatio',
-                        scope: {
-                            fields: ['claimingRate'],
-                            limit: 1,
-                        },
-                    },
-                ],
-            },
-        },
-        {
-            relation: 'claimState',
-        },
-        {
-            relation: 'ticket',
-            scope: {
-                include: [
-                    { relation: 'zone' },
-                    {
-                        relation: 'address',
-                        scope: {
-                            include: { relation: 'province' },
-                        },
-                    },
-                ],
-            },
-        },
-        {
-            relation: 'worker',
-            scope: {
-                include: { relation: 'user' },
-            },
-        },
-    ],
-};
-
 const STATE_COLOR = {
     pending: 'warning',
     incomplete: 'info',
@@ -101,7 +59,7 @@ onMounted(async () => {
         :title="data.title"
         :subtitle="data.subtitle"
         @on-fetch="setData"
-        data-key="claimData"
+        data-key="Claim"
     >
         <template #menu="{ entity }">
             <ClaimDescriptorMenu :claim="entity" />
diff --git a/src/pages/Claim/Card/ClaimFilter.js b/src/pages/Claim/Card/ClaimFilter.js
new file mode 100644
index 000000000..50cabe228
--- /dev/null
+++ b/src/pages/Claim/Card/ClaimFilter.js
@@ -0,0 +1,52 @@
+export default {
+    fields: [
+        'id',
+        'clientFk',
+        'created',
+        'workerFk',
+        'claimStateFk',
+        'packages',
+        'pickup',
+        'ticketFk',
+    ],
+    include: [
+        {
+            relation: 'client',
+            scope: {
+                include: [
+                    { relation: 'salesPersonUser' },
+                    {
+                        relation: 'claimsRatio',
+                        scope: {
+                            fields: ['claimingRate'],
+                            limit: 1,
+                        },
+                    },
+                ],
+            },
+        },
+        {
+            relation: 'claimState',
+        },
+        {
+            relation: 'ticket',
+            scope: {
+                include: [
+                    { relation: 'zone' },
+                    {
+                        relation: 'address',
+                        scope: {
+                            include: { relation: 'province' },
+                        },
+                    },
+                ],
+            },
+        },
+        {
+            relation: 'worker',
+            scope: {
+                include: { relation: 'user' },
+            },
+        },
+    ],
+};

From 03be4bc0e68db3eee326d3e8186ae85897f32125 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Thu, 20 Jun 2024 10:55:29 +0200
Subject: [PATCH 118/167] refactors

---
 src/components/VnTable/VnColumn.vue   |  4 ++--
 src/components/VnTable/VnFilter.vue   | 34 +++++++++++++++------------
 src/components/VnTable/VnTable.vue    | 25 ++++++++++++--------
 src/components/common/VnComponent.vue |  2 +-
 4 files changed, 37 insertions(+), 28 deletions(-)

diff --git a/src/components/VnTable/VnColumn.vue b/src/components/VnTable/VnColumn.vue
index 6a52e0158..6cd62d83e 100644
--- a/src/components/VnTable/VnColumn.vue
+++ b/src/components/VnTable/VnColumn.vue
@@ -9,7 +9,7 @@ import VnInput from 'components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 import VnComponent from 'components/common/VnComponent.vue';
 
-const model = defineModel();
+const model = defineModel(undefined, { required: true });
 const $props = defineProps({
     column: {
         type: Object,
@@ -17,7 +17,7 @@ const $props = defineProps({
     },
     row: {
         type: Object,
-        required: true,
+        default: () => {},
     },
     default: {
         type: [Object, String],
diff --git a/src/components/VnTable/VnFilter.vue b/src/components/VnTable/VnFilter.vue
index f0892b8bd..3d489cf73 100644
--- a/src/components/VnTable/VnFilter.vue
+++ b/src/components/VnTable/VnFilter.vue
@@ -27,7 +27,7 @@ const $props = defineProps({
         default: 'params',
     },
 });
-const model = defineModel();
+const model = defineModel(undefined, { required: true });
 const arrayData = useArrayData($props.dataKey, { searchUrl: $props.searchUrl });
 const columnFilter = computed(() => $props.column?.columnFilter);
 
@@ -96,7 +96,7 @@ const components = {
         forceAttrs,
     },
 };
-console.log(components);
+
 async function addFilter(value) {
     value ??= undefined;
     if (value && typeof value === 'object') value = model.value;
@@ -111,32 +111,36 @@ async function addFilter(value) {
 }
 
 function alignRow() {
-    if ($props.column.align == 'left') return 'justify-start items-start';
-    if ($props.column.align == 'right') return 'justify-end items-end';
-    return 'flex-center';
+    switch ($props.column.align) {
+        case 'left':
+            return 'justify-start items-start';
+        case 'right':
+            return 'justify-end items-end';
+        default:
+            return 'flex-center';
+    }
 }
+
+const showFilter = computed(
+    () => $props.column?.columnFilter !== false && $props.column.name != 'tableActions'
+);
 </script>
 <template>
     <div
-        v-if="showTitle && column"
+        v-if="showTitle"
         class="q-pt-sm q-px-sm ellipsis"
-        :class="`text-${column.align ?? 'left'}`"
+        :class="`text-${column?.align ?? 'left'}`"
+        :style="!showFilter ? { 'min-height': 72 + 'px' } : ''"
     >
-        {{ column.label }}
+        {{ column?.label }}
     </div>
-    <div
-        v-if="columnFilter !== false && column.name != 'tableActions'"
-        class="full-width"
-        :class="alignRow()"
-    >
+    <div v-if="showFilter" class="full-width" :class="alignRow()">
         <VnTableColumn
             :column="$props.column"
-            :row="{}"
             default="input"
             v-model="model"
             :components="components"
             component-prop="columnFilter"
         />
     </div>
-    <div v-else-if="showTitle" style="height: 45px"><!-- fixme! --></div>
 </template>
diff --git a/src/components/VnTable/VnTable.vue b/src/components/VnTable/VnTable.vue
index 0d725524e..493f1480e 100644
--- a/src/components/VnTable/VnTable.vue
+++ b/src/components/VnTable/VnTable.vue
@@ -66,7 +66,9 @@ const route = useRoute();
 const router = useRouter();
 const quasar = useQuasar();
 
-const mode = ref('card');
+const DEFAULT_MODE = 'card';
+const TABLE_MODE = 'table';
+const mode = ref(DEFAULT_MODE);
 const selected = ref([]);
 const routeQuery = JSON.parse(route?.query[$props.searchUrl] ?? '{}');
 const params = ref({ ...routeQuery, ...routeQuery.filter?.where });
@@ -77,17 +79,17 @@ const tableModes = [
     {
         icon: 'view_column',
         title: t('table view'),
-        value: 'table',
+        value: TABLE_MODE,
     },
     {
         icon: 'grid_view',
         title: t('grid view'),
-        value: 'card',
+        value: DEFAULT_MODE,
     },
 ];
 
 onMounted(() => {
-    mode.value = quasar.platform.is.mobile ? 'card' : $props.defaultMode;
+    mode.value = quasar.platform.is.mobile ? DEFAULT_MODE : $props.defaultMode;
     stateStore.rightDrawer = true;
     setUserParams(route.query[$props.searchUrl]);
 });
@@ -172,6 +174,9 @@ function columnName(col) {
     return name;
 }
 
+function getColAlign(col) {
+    return 'text-' + (col.align ?? 'left')
+}
 defineExpose({
     reload,
     redirect: redirectFn,
@@ -218,7 +223,7 @@ defineExpose({
             :limit="20"
             ref="CrudModelRef"
             :search-url="searchUrl"
-            :disable-infinite-scroll="mode == 'table'"
+            :disable-infinite-scroll="mode == TABLE_MODE"
             @save-changes="reload"
             :has-subtoolbar="isEditable"
         >
@@ -229,11 +234,11 @@ defineExpose({
                     :columns="splittedColumns.columns"
                     :rows="rows"
                     v-model:selected="selected"
-                    :grid="mode != 'table'"
+                    :grid="mode != TABLE_MODE"
                     table-header-class="bg-header"
                     card-container-class="grid-three"
                     flat
-                    :style="mode == 'table' && 'max-height: 90vh'"
+                    :style="mode == TABLE_MODE && 'max-height: 90vh'"
                     virtual-scroll
                     @virtual-scroll="
                         (event) =>
@@ -287,7 +292,7 @@ defineExpose({
                         <QTh auto-width class="sticky" />
                     </template>
                     <template #body-cell-tableStatus="{ col, row }">
-                        <QTd auto-width :class="`text-${col.align ?? 'left'}`">
+                        <QTd auto-width :class="getColAlign(col)">
                             <VnTableChip
                                 :columns="splittedColumns.columnChips"
                                 :row="row"
@@ -303,7 +308,7 @@ defineExpose({
                         <QTd
                             auto-width
                             class="no-margin q-px-xs"
-                            :class="`text-${col.align ?? 'left'}`"
+                            :class="getColAlign(col)"
                         >
                             <VnTableColumn
                                 :column="col"
@@ -317,7 +322,7 @@ defineExpose({
                     <template #body-cell-tableActions="{ col, row }">
                         <QTd
                             auto-width
-                            :class="`text-${col.align ?? 'left'}`"
+                            :class="getColAlign(col)"
                             class="sticky no-padding"
                             @click="stopEventPropagation($event)"
                         >
diff --git a/src/components/common/VnComponent.vue b/src/components/common/VnComponent.vue
index 56b43a4db..318b5ee5f 100644
--- a/src/components/common/VnComponent.vue
+++ b/src/components/common/VnComponent.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { computed, defineModel } from 'vue';
 
-const model = defineModel();
+const model = defineModel(undefined, { required: true });
 const $props = defineProps({
     prop: {
         type: Object,

From 2352b6aac4b9687a55a6777b42bc4aa5d33ab417 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Thu, 20 Jun 2024 12:33:04 +0200
Subject: [PATCH 119/167] fix: invoiceDueDay test

---
 src/pages/InvoiceIn/Card/InvoiceInDueDay.vue               | 3 +++
 test/cypress/integration/invoiceIn/invoiceInDueDay.spec.js | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/pages/InvoiceIn/Card/InvoiceInDueDay.vue b/src/pages/InvoiceIn/Card/InvoiceInDueDay.vue
index 9325a5b41..d2b43c57a 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInDueDay.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInDueDay.vue
@@ -10,8 +10,10 @@ import FetchData from 'src/components/FetchData.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnCurrency from 'src/components/common/VnCurrency.vue';
 import { toCurrency } from 'src/filters';
+import useNotify from 'src/composables/useNotify.js';
 
 const route = useRoute();
+const { notify } = useNotify();
 const { t } = useI18n();
 const arrayData = useArrayData();
 const invoiceIn = computed(() => arrayData.store.data);
@@ -69,6 +71,7 @@ const isNotEuro = (code) => code != 'EUR';
 async function insert() {
     await axios.post('/InvoiceInDueDays/new', { id: +invoiceId });
     await invoiceInFormRef.value.reload();
+    notify(t('globals.dataSaved'), 'positive');
 }
 const getTotalAmount = (rows) => rows.reduce((acc, { amount }) => acc + +amount, 0);
 </script>
diff --git a/test/cypress/integration/invoiceIn/invoiceInDueDay.spec.js b/test/cypress/integration/invoiceIn/invoiceInDueDay.spec.js
index 124b60c34..5a5becd22 100644
--- a/test/cypress/integration/invoiceIn/invoiceInDueDay.spec.js
+++ b/test/cypress/integration/invoiceIn/invoiceInDueDay.spec.js
@@ -22,7 +22,7 @@ describe('InvoiceInDueDay', () => {
         cy.waitForElement('thead');
         cy.get(addBtn).click();
 
-        cy.saveCard();
+        cy.get('tbody > :nth-child(1)').should('exist');
         cy.get('.q-notification__message').should('have.text', 'Data saved');
     });
 });

From 0ba415c0ea852cd9a2b3bd63f580149c81e6c167 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Thu, 20 Jun 2024 07:57:39 -0300
Subject: [PATCH 120/167] small changes

---
 src/pages/Ticket/TicketAdvance.vue | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/pages/Ticket/TicketAdvance.vue b/src/pages/Ticket/TicketAdvance.vue
index fc323cbae..59a9e448b 100644
--- a/src/pages/Ticket/TicketAdvance.vue
+++ b/src/pages/Ticket/TicketAdvance.vue
@@ -377,6 +377,7 @@ const moveTicketsAdvance = async () => {
         const params = { tickets: ticketsToMove };
         await axios.post('Tickets/merge', params);
         arrayData.fetch({ append: false });
+        selectedTickets.value = [];
         if (ticketsToMove.length)
             notify(t('advanceTickets.moveTicketSuccess'), 'positive');
     } catch (error) {
@@ -533,11 +534,19 @@ onMounted(async () => {
         >
             <template #header="props">
                 <QTr :props="props">
-                    <QTh class="horizontal-separator" colspan="7" translate>
+                    <QTh
+                        class="horizontal-separator text-uppercase color-vn-label"
+                        colspan="7"
+                        translate
+                    >
                         {{ t('advanceTickets.origin') }}
                         {{ toDateFormat(userParams.dateToAdvance) }}
                     </QTh>
-                    <QTh class="horizontal-separator" colspan="9" translate>
+                    <QTh
+                        class="horizontal-separator text-uppercase color-vn-label"
+                        colspan="9"
+                        translate
+                    >
                         {{ t('advanceTickets.destination') }}
                         {{ toDateFormat(userParams.dateFuture) }}
                     </QTh>

From 00ebbbfc78dec3a71744a0d45275f23633024a8d Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Thu, 20 Jun 2024 08:40:05 -0300
Subject: [PATCH 121/167] Ticket log

---
 src/pages/Ticket/Card/TicketLog.vue |  7 +++++++
 src/router/modules/ticket.js        | 11 ++++++++++-
 2 files changed, 17 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/Ticket/Card/TicketLog.vue

diff --git a/src/pages/Ticket/Card/TicketLog.vue b/src/pages/Ticket/Card/TicketLog.vue
new file mode 100644
index 000000000..a15e89cb6
--- /dev/null
+++ b/src/pages/Ticket/Card/TicketLog.vue
@@ -0,0 +1,7 @@
+<script setup>
+import VnLog from 'src/components/common/VnLog.vue';
+</script>
+
+<template>
+    <VnLog model="Zone" url="/TicketLogs"></VnLog>
+</template>
diff --git a/src/router/modules/ticket.js b/src/router/modules/ticket.js
index 6cb7291dc..71b926308 100644
--- a/src/router/modules/ticket.js
+++ b/src/router/modules/ticket.js
@@ -12,7 +12,7 @@ export default {
     redirect: { name: 'TicketMain' },
     menus: {
         main: ['TicketList'],
-        card: ['TicketBoxing', 'TicketSms', 'TicketSale'],
+        card: ['TicketBoxing', 'TicketSms', 'TicketSale', 'TicketLog'],
     },
     children: [
         {
@@ -93,6 +93,15 @@ export default {
                     },
                     component: () => import('src/pages/Ticket/Card/TicketSms.vue'),
                 },
+                {
+                    path: 'log',
+                    name: 'TicketLog',
+                    meta: {
+                        title: 'log',
+                        icon: 'history',
+                    },
+                    component: () => import('src/pages/Ticket/Card/TicketLog.vue'),
+                },
             ],
         },
     ],

From 09545cb2c0acc572434e565f231becb565822391 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Thu, 20 Jun 2024 14:25:45 +0200
Subject: [PATCH 122/167] fix: WorkerNotificationsManager test

---
 src/pages/Worker/Card/WorkerNotificationsManager.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/pages/Worker/Card/WorkerNotificationsManager.vue b/src/pages/Worker/Card/WorkerNotificationsManager.vue
index 44573adca..8699392e0 100644
--- a/src/pages/Worker/Card/WorkerNotificationsManager.vue
+++ b/src/pages/Worker/Card/WorkerNotificationsManager.vue
@@ -20,8 +20,8 @@ const { t } = useI18n();
 const quasar = useQuasar();
 const entityId = computed(() => $props.id || route.params.id);
 const URL_KEY = 'NotificationSubscriptions';
-const active = ref();
-const available = ref();
+const active = ref(new Map());
+const available = ref(new Map());
 
 async function toggleNotification(notification) {
     try {
@@ -56,6 +56,7 @@ const swapEntry = (from, to, key) => {
 };
 
 function setNotifications(data) {
+    console.log('data: ', data);
     active.value = new Map(data.active);
     available.value = new Map(data.available);
 }

From 9f1dd4d74d7e89d890fce2be00cc385a49c78fb9 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Thu, 20 Jun 2024 09:41:53 -0300
Subject: [PATCH 123/167] WIP

---
 src/pages/Ticket/Card/TicketBasicData.vue | 47 ++++++++++++++++++++++-
 src/pages/Ticket/locale/en.yml            |  4 ++
 src/pages/Ticket/locale/es.yml            |  4 ++
 src/router/modules/ticket.js              |  2 +-
 4 files changed, 55 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/Ticket/locale/en.yml

diff --git a/src/pages/Ticket/Card/TicketBasicData.vue b/src/pages/Ticket/Card/TicketBasicData.vue
index 0c9a8b042..70382d0fb 100644
--- a/src/pages/Ticket/Card/TicketBasicData.vue
+++ b/src/pages/Ticket/Card/TicketBasicData.vue
@@ -1,3 +1,48 @@
+<script setup>
+import { ref } from 'vue';
+
+const stepperRef = ref(null);
+const step = ref(1);
+</script>
 <template>
-    <QCard>Basic Data</QCard>
+    <QStepper v-model="step" ref="stepperRef" color="primary" header-nav animated>
+        <QStep
+            :name="1"
+            title="Select campaign settings"
+            icon="settings"
+            :error="step < 3"
+            :done="step > 1"
+        >
+            For each ad campaign that you create, you can control how much you're willing
+            to spend on clicks and conversions, which networks and geographical locations
+            you want your ads to show on, and more.
+        </QStep>
+        <QStep
+            :name="2"
+            title="Create an ad group"
+            caption="Optional"
+            icon="create_new_folder"
+            :done="step > 2"
+        >
+            An ad group contains one or more ads which target a shared set of keywords.
+        </QStep>
+
+        <template #navigation>
+            <QStepperNavigation>
+                <QBtn
+                    @click="stepperRef.next()"
+                    color="primary"
+                    :label="step === 3 ? 'Finish' : 'Continue'"
+                />
+                <QBtn
+                    v-if="step > 1"
+                    flat
+                    color="primary"
+                    @click="stepperRef.previous()"
+                    label="Back"
+                    class="q-ml-sm"
+                />
+            </QStepperNavigation>
+        </template>
+    </QStepper>
 </template>
diff --git a/src/pages/Ticket/locale/en.yml b/src/pages/Ticket/locale/en.yml
new file mode 100644
index 000000000..4016973cc
--- /dev/null
+++ b/src/pages/Ticket/locale/en.yml
@@ -0,0 +1,4 @@
+basicData:
+    next: Next
+    back: Back
+    finalize: Finalize
diff --git a/src/pages/Ticket/locale/es.yml b/src/pages/Ticket/locale/es.yml
index 5348b29b9..da7c45cc0 100644
--- a/src/pages/Ticket/locale/es.yml
+++ b/src/pages/Ticket/locale/es.yml
@@ -1,2 +1,6 @@
+basicData:
+    next: Siguiente
+    back: Anterior
+    finalize: Finalizar
 Search ticket: Buscar ticket
 You can search by ticket id or alias: Puedes buscar por id o alias del ticket
diff --git a/src/router/modules/ticket.js b/src/router/modules/ticket.js
index 6cb7291dc..3c60f40ab 100644
--- a/src/router/modules/ticket.js
+++ b/src/router/modules/ticket.js
@@ -12,7 +12,7 @@ export default {
     redirect: { name: 'TicketMain' },
     menus: {
         main: ['TicketList'],
-        card: ['TicketBoxing', 'TicketSms', 'TicketSale'],
+        card: ['TicketBasicData', 'TicketBoxing', 'TicketSms', 'TicketSale'],
     },
     children: [
         {

From 47768faea45d079659f731685e38fabdfa5dfaeb Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Thu, 20 Jun 2024 09:42:32 -0300
Subject: [PATCH 124/167] Change model

---
 src/pages/Ticket/Card/TicketLog.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Ticket/Card/TicketLog.vue b/src/pages/Ticket/Card/TicketLog.vue
index a15e89cb6..94b63a117 100644
--- a/src/pages/Ticket/Card/TicketLog.vue
+++ b/src/pages/Ticket/Card/TicketLog.vue
@@ -3,5 +3,5 @@ import VnLog from 'src/components/common/VnLog.vue';
 </script>
 
 <template>
-    <VnLog model="Zone" url="/TicketLogs"></VnLog>
+    <VnLog model="Ticket" url="/TicketLogs"></VnLog>
 </template>

From 633b13b07668366436b4cf66ba9c53c39303f7da Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Thu, 20 Jun 2024 16:51:07 -0300
Subject: [PATCH 125/167] Basic data form

---
 src/components/FormModel.vue              |   2 +-
 src/pages/Ticket/Card/TicketBasicData.vue | 522 +++++++++++++++++++++-
 src/pages/Ticket/locale/en.yml            |  13 +
 src/pages/Ticket/locale/es.yml            |  13 +
 4 files changed, 528 insertions(+), 22 deletions(-)

diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue
index 336ea281e..11542ed65 100644
--- a/src/components/FormModel.vue
+++ b/src/components/FormModel.vue
@@ -246,7 +246,7 @@ function updateAndEmit(evt, val, res) {
     emit(evt, state.get(modelValue), res);
 }
 
-defineExpose({ save, isLoading, hasChanges });
+defineExpose({ save, isLoading, hasChanges, formData });
 </script>
 <template>
     <div class="column items-center full-width">
diff --git a/src/pages/Ticket/Card/TicketBasicData.vue b/src/pages/Ticket/Card/TicketBasicData.vue
index 70382d0fb..e4bf52a94 100644
--- a/src/pages/Ticket/Card/TicketBasicData.vue
+++ b/src/pages/Ticket/Card/TicketBasicData.vue
@@ -1,29 +1,508 @@
 <script setup>
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
 
+import FetchData from 'components/FetchData.vue';
+import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+import VnInputTime from 'components/common/VnInputTime.vue';
+
+import axios from 'axios';
+import useNotify from 'src/composables/useNotify.js';
+import { toTimeFormat } from 'filters/date.js';
+
+const { notify } = useNotify();
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();
 const stepperRef = ref(null);
+const formModelRef = ref(null);
+const agencyFetchRef = ref(null);
+const zonesFetchRef = ref(null);
+
+const filter = {
+    include: [
+        { relation: 'address' },
+        {
+            relation: 'client',
+            scope: {
+                fields: [
+                    'salesPersonFk',
+                    'name',
+                    'isActive',
+                    'isFreezed',
+                    'isTaxDataChecked',
+                    'credit',
+                    'email',
+                    'phone',
+                    'mobile',
+                    'hasElectronicInvoice',
+                ],
+                include: {
+                    relation: 'salesPersonUser',
+                    scope: { fields: ['id', 'name'] },
+                },
+            },
+        },
+        { relation: 'invoiceOut' },
+    ],
+};
+
 const step = ref(1);
+const clientsOptions = ref([]);
+const warehousesOptions = ref([]);
+const companiesOptions = ref([]);
+const agenciesOptions = ref([]);
+const zonesOptions = ref([]);
+const addresses = ref([]);
+
+const agencyByWarehouseFilter = computed(() => ({
+    fields: ['id', 'name'],
+    order: 'name ASC',
+    where: {
+        warehouseFk: warehouseId.value,
+    },
+}));
+
+const zonesFilter = computed(() => ({
+    fields: ['id', 'name'],
+    order: 'name ASC',
+    where: formModelRef.value?.formData?.agencyModeFk
+        ? {
+              shipped: formModelRef.value?.formData?.shipped,
+              addressFk: formModelRef.value?.formData?.addressFk,
+              agencyModeFk: formModelRef.value?.formData?.agencyModeFk,
+              warehouseFk: formModelRef.value?.formData?.warehouseFk,
+          }
+        : {},
+}));
+
+const getLanded = async (params) => {
+    try {
+        const validParams =
+            shipped.value && addressId.value && agencyModeId.value && warehouseId.value;
+        if (!validParams) {
+            // this.$q.resolve(); ???????
+            return;
+        }
+        formModelRef.value.formData.zoneFk = null;
+        const { data } = await axios.get(`Agencies/getLanded`, { params });
+        if (data) {
+            formModelRef.value.formData.zoneFk = data.zoneFk;
+            formModelRef.value.formData.landed = data.landed;
+            formModelRef.value.formData.shipped = params.shipped;
+        }
+    } catch (error) {
+        console.error(error);
+        notify(t('basicData.noDeliveryZoneAvailable'), 'negative');
+    }
+};
+
+const getShipped = async (params) => {
+    try {
+        const validParams =
+            landed.value && addressId.value && agencyModeId.value && warehouseId.value;
+        if (!validParams) return;
+
+        formModelRef.value.formData.zoneFk = null;
+        const { data } = await axios.get(`Agencies/getShipped`, { params });
+        if (data) {
+            formModelRef.value.formData.zoneFk = data.zoneFk;
+            formModelRef.value.formData.landed = params.landed;
+            formModelRef.value.formData.shipped = data.shipped;
+        } else {
+            notify(t('basicData.noDeliveryZoneAvailable'), 'negative');
+        }
+    } catch (error) {
+        console.error(error);
+        notify(t('basicData.noDeliveryZoneAvailable'), 'negative');
+    }
+};
+
+const onChangeZone = async (zoneId) => {
+    try {
+        formModelRef.value.formData.agencyModeFk = null;
+        const { data } = await axios.get(`Zones/${zoneId}`);
+        formModelRef.value.formData.agencyModeFk = data.agencyModeFk;
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+const onChangeAddress = async (addressId) => {
+    try {
+        formModelRef.value.formData.nickname = null;
+        const { data } = await axios.get(`Addresses/${addressId}`);
+        formModelRef.value.formData.nickname = data.nickname;
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+const getClientDefaultAddress = async (clientId) => {
+    try {
+        const { data } = await axios.get(`Clients/${clientId}`);
+        if (data) addressId.value = data.defaultAddressFk;
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+const clientAddressesList = async (value) => {
+    let filter = {
+        include: [
+            {
+                relation: 'province',
+                scope: {
+                    fields: ['name'],
+                },
+            },
+            {
+                relation: 'agencyMode',
+                scope: {
+                    fields: ['name'],
+                },
+            },
+        ],
+    };
+    const params = { filter: JSON.stringify(filter) };
+    const { data } = await axios.get(`Clients/${value}/addresses`, { params });
+    if (data) addresses.value = data;
+};
+
+const addressId = computed({
+    get: () => formModelRef.value?.formData?.addressFk,
+    set: (val) => {
+        if (val != formModelRef.value?.formData?.addressFk) {
+            formModelRef.value.formData.addressFk = val;
+            onChangeAddress(val);
+            getShipped({
+                landed: formModelRef.value?.formData?.landed,
+                addressFk: val,
+                agencyModeFk: formModelRef.value?.formData?.agencyModeFk,
+                warehouseFk: formModelRef.value?.formData?.warehouseFk,
+            });
+        }
+    },
+});
+
+const clientId = computed({
+    get: () => formModelRef.value?.formData?.clientFk,
+    set: (val) => {
+        formModelRef.value.formData.clientFk = val;
+        formModelRef.value.formData.addressFk = null;
+        if (!val) return;
+        getClientDefaultAddress(val);
+        clientAddressesList(val);
+    },
+});
+
+const landed = computed({
+    get: () => formModelRef.value?.formData?.landed,
+    set: (val) => {
+        formModelRef.value.formData.landed = val;
+        getShipped({
+            landed: val,
+            addressFk: formModelRef.value?.formData?.addressFk,
+            agencyModeFk: formModelRef.value?.formData?.agencyModeFk,
+            warehouseFk: formModelRef.value?.formData?.warehouseFk,
+        });
+    },
+});
+
+const agencyModeId = computed({
+    get: () => formModelRef.value?.formData?.agencyModeFk,
+    set: (val) => {
+        if (val != formModelRef.value?.formData?.agencyModeFk) {
+            formModelRef.value.formData.agencyModeFk = val;
+            if (!val) return;
+            const agencyMode = agenciesOptions.value.find((a) => a.id == val);
+            formModelRef.value.formData.warehouseFk = agencyMode.warehouseFk;
+
+            getLanded({
+                shipped: formModelRef.value?.formData?.shipped,
+                addressFk: formModelRef.value?.formData?.addressFk,
+                agencyModeFk: val,
+                warehouseFk: formModelRef.value?.formData?.warehouseFk,
+            });
+        }
+    },
+});
+
+const zoneId = computed({
+    get: () => formModelRef.value?.formData?.zoneFk,
+    set: (val) => {
+        if (val != formModelRef.value.formData.zoneFk) {
+            formModelRef.value.formData.zoneFk = val;
+            onChangeZone(val);
+        }
+    },
+});
+
+const warehouseId = computed({
+    get: () => formModelRef.value?.formData?.warehouseFk,
+    set: (val) => {
+        if (val != formModelRef.value.formData.warehouseFk) {
+            formModelRef.value.formData.warehouseFk = val;
+            getShipped({
+                landed: formModelRef.value.formData.landed,
+                addressFk: formModelRef.value.formData.addressFk,
+                agencyModeFk: formModelRef.value.formData.agencyModeFk,
+                warehouseFk: val,
+            }).then(() => {
+                if (zoneId.value == null) formModelRef.value.formData.agencyModeFk = null;
+            });
+        }
+    },
+});
+
+const shipped = computed({
+    get: () => formModelRef.value?.formData?.shipped,
+    set: (val) => {
+        if (
+            new Date(formModelRef.value?.formData?.shipped).toDateString() !=
+            val.toDateString()
+        )
+            val.setHours(0, 0, 0, 0);
+        formModelRef.value.formData.shipped = val;
+        getLanded({
+            shipped: val,
+            addressFk: formModelRef.value?.formData?.addressFk,
+            agencyModeFk: formModelRef.value?.formData?.agencyModeFk,
+            warehouseFk: formModelRef.value?.formData?.warehouseFk,
+        });
+    },
+});
+
+const onFormModelInit = () => {
+    if (formModelRef.value.formData.clientFk)
+        clientAddressesList(formModelRef.value.formData.clientFk);
+};
+
+const redirectToCustomerAddress = () => {
+    router.push({
+        name: 'CustomerAddressEditCard',
+        params: { id: clientId.value, addressId: addressId.value },
+    });
+};
 </script>
 <template>
-    <QStepper v-model="step" ref="stepperRef" color="primary" header-nav animated>
-        <QStep
-            :name="1"
-            title="Select campaign settings"
-            icon="settings"
-            :error="step < 3"
-            :done="step > 1"
-        >
-            For each ad campaign that you create, you can control how much you're willing
-            to spend on clicks and conversions, which networks and geographical locations
-            you want your ads to show on, and more.
+    <FetchData
+        url="Clients"
+        :filter="{
+            fields: ['id', 'name'],
+            order: 'id',
+        }"
+        @on-fetch="(data) => (clientsOptions = data)"
+        auto-load
+    />
+    <FetchData
+        url="Warehouses"
+        @on-fetch="(data) => (warehousesOptions = data)"
+        auto-load
+    />
+    <FetchData
+        url="Companies"
+        :filter="{
+            fields: ['id', 'code'],
+            order: 'code ASC',
+        }"
+        @on-fetch="(data) => (companiesOptions = data)"
+        auto-load
+    />
+    <FetchData
+        ref="agencyFetchRef"
+        url="AgencyModes/byWarehouse"
+        :filter="agencyByWarehouseFilter"
+        @on-fetch="(data) => (agenciesOptions = data)"
+        auto-load
+    />
+    <FetchData
+        ref="zonesFetchRef"
+        url="Zones/includingExpired"
+        :filter="zonesFilter"
+        @on-fetch="(data) => (zonesOptions = data)"
+        auto-load
+    />
+    <QStepper
+        v-model="step"
+        ref="stepperRef"
+        color="primary"
+        header-nav
+        animated
+        keep-alive
+    >
+        <QStep :name="1" title="Select campaign settings" :done="step > 1">
+            <FormModel
+                ref="formModelRef"
+                :url="`Tickets/${route.params.id}`"
+                :url-update="`Tickets/${route.params.id}`"
+                :filter="filter"
+                model="Ticket"
+                auto-load
+                :default-actions="false"
+                @on-fetch="onFormModelInit()"
+            >
+                <template #form="{ data }">
+                    <VnRow class="row q-gutter-md q-mb-md">
+                        <VnSelect
+                            :label="t('basicData.client')"
+                            v-model="clientId"
+                            option-value="id"
+                            option-label="name"
+                            :options="clientsOptions"
+                            hide-selected
+                            map-options
+                            :required="true"
+                        >
+                            <template #option="scope">
+                                <QItem v-bind="scope.itemProps">
+                                    <QItemSection>
+                                        <QItemLabel
+                                            >#{{ scope.opt?.id }}
+                                            {{ scope.opt?.name }}</QItemLabel
+                                        >
+                                    </QItemSection>
+                                </QItem>
+                            </template>
+                        </VnSelect>
+                        <VnSelect
+                            :label="t('basicData.warehouse')"
+                            v-model="warehouseId"
+                            option-value="id"
+                            option-label="name"
+                            :options="warehousesOptions"
+                            hide-selected
+                            map-options
+                            :required="true"
+                        />
+                    </VnRow>
+                    <VnRow class="row q-gutter-md q-mb-md">
+                        <VnSelect
+                            :label="t('basicData.address')"
+                            v-model="addressId"
+                            option-value="id"
+                            option-label="nickname"
+                            :options="addresses"
+                            hide-selected
+                            map-options
+                            :required="true"
+                        >
+                            <template #option="scope">
+                                <QItem v-bind="scope.itemProps">
+                                    <QItemSection>
+                                        <QItemLabel
+                                            :class="{
+                                                'color-vn-label': !scope.opt?.isActive,
+                                            }"
+                                        >
+                                            {{
+                                                `${
+                                                    !scope.opt?.isActive
+                                                        ? t('basicData.inactive')
+                                                        : ''
+                                                } `
+                                            }}
+                                            <span> {{ scope.opt?.nickname }}</span>
+                                            <span
+                                                v-if="
+                                                    scope.opt?.province ||
+                                                    scope.opt?.city ||
+                                                    scope.opt?.street
+                                                "
+                                                >, {{ scope.opt?.street }},
+                                                {{ scope.opt?.city }},
+                                                {{ scope.opt?.province?.name }} -
+                                                {{ scope.opt?.agencyMode?.name }}</span
+                                            >
+                                        </QItemLabel>
+                                    </QItemSection>
+                                </QItem>
+                            </template>
+                            <template #append>
+                                <QIcon
+                                    name="edit"
+                                    color="primary"
+                                    size="sm"
+                                    class="fill-icon cursor-pointer"
+                                    @click.stop="redirectToCustomerAddress()"
+                                >
+                                    <QTooltip>{{ t('basicData.editAddress') }}</QTooltip>
+                                </QIcon>
+                            </template>
+                        </VnSelect>
+                        <VnInput :label="t('basicData.alias')" v-model="data.nickname" />
+                    </VnRow>
+                    <VnRow class="row q-gutter-md q-mb-md">
+                        <VnSelect
+                            :label="t('basicData.company')"
+                            v-model="data.companyFk"
+                            option-value="id"
+                            option-label="code"
+                            :options="companiesOptions"
+                            hide-selected
+                            map-options
+                            :required="true"
+                        />
+                        <VnSelect
+                            :label="t('basicData.agency')"
+                            v-model="agencyModeId"
+                            option-value="id"
+                            option-label="name"
+                            :options="agenciesOptions"
+                            hide-selected
+                            map-options
+                            :required="true"
+                            @focus="agencyFetchRef.fetch()"
+                        />
+                        <VnSelect
+                            :label="t('basicData.zone')"
+                            v-model="zoneId"
+                            option-value="id"
+                            option-label="name"
+                            :options="zonesOptions"
+                            hide-selected
+                            map-options
+                            :required="true"
+                            @focus="zonesFetchRef.fetch()"
+                        >
+                            <template #option="scope">
+                                <QItem v-bind="scope.itemProps">
+                                    <QItemSection>
+                                        <QItemLabel
+                                            >{{ scope.opt?.name }} - Max.
+                                            {{ toTimeFormat(scope.opt?.hour) }}
+                                            h.</QItemLabel
+                                        >
+                                    </QItemSection>
+                                </QItem>
+                            </template>
+                        </VnSelect>
+                    </VnRow>
+                    <VnRow class="row q-gutter-md q-mb-md">
+                        <VnInputDate
+                            :label="t('basicData.shipped')"
+                            v-model="data.shipped"
+                            :required="true"
+                        />
+                        <VnInputTime
+                            :label="t('basicData.shippedHour')"
+                            v-model="data.shipped"
+                        />
+                        <VnInputDate
+                            :label="t('basicData.landed')"
+                            v-model="data.landed"
+                            :required="true"
+                        />
+                    </VnRow>
+                </template>
+            </FormModel>
         </QStep>
-        <QStep
-            :name="2"
-            title="Create an ad group"
-            caption="Optional"
-            icon="create_new_folder"
-            :done="step > 2"
-        >
+        <QStep :name="2" title="Create an ad group" caption="Optional">
             An ad group contains one or more ads which target a shared set of keywords.
         </QStep>
 
@@ -32,17 +511,18 @@ const step = ref(1);
                 <QBtn
                     @click="stepperRef.next()"
                     color="primary"
-                    :label="step === 3 ? 'Finish' : 'Continue'"
+                    :label="step === 2 ? t('basicData.finalize') : t('basicData.next')"
                 />
                 <QBtn
                     v-if="step > 1"
                     flat
                     color="primary"
                     @click="stepperRef.previous()"
-                    label="Back"
+                    :label="t('basicData.back')"
                     class="q-ml-sm"
                 />
             </QStepperNavigation>
         </template>
     </QStepper>
+    <pre v-if="formModelRef">{{ formModelRef.formData }}</pre>
 </template>
diff --git a/src/pages/Ticket/locale/en.yml b/src/pages/Ticket/locale/en.yml
index 4016973cc..643421ad4 100644
--- a/src/pages/Ticket/locale/en.yml
+++ b/src/pages/Ticket/locale/en.yml
@@ -2,3 +2,16 @@ basicData:
     next: Next
     back: Back
     finalize: Finalize
+    client: Client
+    warehouse: Warehouse
+    address: Address
+    inactive: (Inactive)
+    noDeliveryZoneAvailable: No delivery zone available for this landing date
+    editAddress: Edit address
+    alias: Alias
+    company: Company
+    agency: Agency
+    zone: Zone
+    shipped: Shipped
+    landed: Landed
+    shippedHour: Shipped hour
diff --git a/src/pages/Ticket/locale/es.yml b/src/pages/Ticket/locale/es.yml
index da7c45cc0..913d1935d 100644
--- a/src/pages/Ticket/locale/es.yml
+++ b/src/pages/Ticket/locale/es.yml
@@ -2,5 +2,18 @@ basicData:
     next: Siguiente
     back: Anterior
     finalize: Finalizar
+    client: Cliente
+    warehouse: Almacén
+    address: Consignatario
+    inactive: (Inactivo)
+    noDeliveryZoneAvailable: No hay una zona de reparto disponible para la fecha de envío seleccionada
+    editAddress: Editar dirección
+    alias: Alias
+    company: Empresa
+    agency: Agencia
+    zone: Zona
+    shipped: F. Envío
+    landed: F. Entrega
+    shippedHour: Hora de envío
 Search ticket: Buscar ticket
 You can search by ticket id or alias: Puedes buscar por id o alias del ticket

From 0faa663169ae459a514a45188413f2b631ad86b4 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 21 Jun 2024 00:03:26 +0200
Subject: [PATCH 126/167] fix: comments

---
 src/pages/Ticket/TicketAdvance.vue | 6 +++---
 src/pages/Ticket/locale/en.yml     | 6 +++---
 src/pages/Ticket/locale/es.yml     | 2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/pages/Ticket/TicketAdvance.vue b/src/pages/Ticket/TicketAdvance.vue
index 59a9e448b..8d73ccd9e 100644
--- a/src/pages/Ticket/TicketAdvance.vue
+++ b/src/pages/Ticket/TicketAdvance.vue
@@ -502,7 +502,7 @@ onMounted(async () => {
                 </QTooltip>
             </QBtn>
             <QBtn
-                icon="vn:splitline"
+                icon="alt_route"
                 color="primary"
                 :disable="!selectedTickets.length"
                 @click.stop="
@@ -539,7 +539,7 @@ onMounted(async () => {
                         colspan="7"
                         translate
                     >
-                        {{ t('advanceTickets.origin') }}
+                        {{ t('advanceTickets.destination') }}
                         {{ toDateFormat(userParams.dateToAdvance) }}
                     </QTh>
                     <QTh
@@ -547,7 +547,7 @@ onMounted(async () => {
                         colspan="9"
                         translate
                     >
-                        {{ t('advanceTickets.destination') }}
+                        {{ t('advanceTickets.origin') }}
                         {{ toDateFormat(userParams.dateFuture) }}
                     </QTh>
                 </QTr>
diff --git a/src/pages/Ticket/locale/en.yml b/src/pages/Ticket/locale/en.yml
index 8d761a128..9f7d96d4d 100644
--- a/src/pages/Ticket/locale/en.yml
+++ b/src/pages/Ticket/locale/en.yml
@@ -18,11 +18,11 @@ advanceTickets:
     futureLines: Lines
     futureImport: Import
     advanceTickets: Advance tickets with negatives
-    advanceTicketTitle: Advance tickets
-    advanceTitleSubtitle: Advance confirmation
+    advanceTicketTitle: Advance {selectedTickets} tickets
+    advanceTitleSubtitle: Advance {selectedTickets} tickets confirmation
     noDeliveryZone: No delivery zone available for this landing date
     moveTicketSuccess: 'Tickets moved successfully! {ticketsNumber}'
     advanceTicketsWithoutNegatives: Advance tickets without negatives
     advanceWithoutNegativeTitle: Advance tickets (without negatives)
-    advanceWithoutNegativeSubtitle: Advance confirmation
+    advanceWithoutNegativeSubtitle: Advance {selectedTickets} tickets confirmation
     errorsList: Errors list
diff --git a/src/pages/Ticket/locale/es.yml b/src/pages/Ticket/locale/es.yml
index 6134258b2..bbb9220a1 100644
--- a/src/pages/Ticket/locale/es.yml
+++ b/src/pages/Ticket/locale/es.yml
@@ -1,6 +1,6 @@
 advanceTickets:
     origin: Origen
-    destination: Destino
+    destination: Destinatario
     originAgency: 'Agencia origen: {agency}'
     destinationAgency: 'Agencia destino: {agency}'
     ticketId: ID

From 159b386d2c05b8ad8c0d23a9381b726d6535ebe6 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 21 Jun 2024 00:07:26 +0200
Subject: [PATCH 127/167] fix: comment 4

---
 src/pages/Ticket/TicketAdvance.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Ticket/TicketAdvance.vue b/src/pages/Ticket/TicketAdvance.vue
index 8d73ccd9e..8b0a426dd 100644
--- a/src/pages/Ticket/TicketAdvance.vue
+++ b/src/pages/Ticket/TicketAdvance.vue
@@ -398,7 +398,7 @@ const progressAdd = () => {
     progressLength.value++;
     if (progressLength.value === selectedTickets.value.length) {
         notify(
-            t('moveTicketSuccess', {
+            t('advanceTickets.moveTicketSuccess', {
                 ticketsNumber: progressLength.value - splitErrors.value.length,
             }),
             'positive'

From f41161a28e4be6a982a6a6c57ac3bd3050076da8 Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Fri, 21 Jun 2024 07:24:23 +0200
Subject: [PATCH 128/167] refactor: refs #6977 use VnImg

---
 src/components/UserPanel.vue                  |  7 ++-----
 src/components/ui/VnImg.vue                   |  9 ++++++---
 src/pages/Account/Card/AccountDescriptor.vue  | 12 ++++--------
 src/pages/Claim/Card/ClaimBasicData.vue       | 13 ++++++++-----
 src/pages/Customer/Card/CustomerBasicData.vue | 11 +++++------
 src/pages/Entry/EntryLatestBuys.vue           | 16 +++++-----------
 src/pages/Item/Card/ItemDescriptor.vue        | 10 ----------
 src/pages/Item/ItemList.vue                   | 11 ++++-------
 src/pages/Wagon/WagonCounter.vue              | 14 ++------------
 src/pages/Worker/Card/WorkerDescriptor.vue    | 12 +++---------
 10 files changed, 39 insertions(+), 76 deletions(-)

diff --git a/src/components/UserPanel.vue b/src/components/UserPanel.vue
index 691d3db8f..9c3b456b1 100644
--- a/src/components/UserPanel.vue
+++ b/src/components/UserPanel.vue
@@ -11,6 +11,7 @@ import VnSelect from 'src/components/common/VnSelect.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import FetchData from 'components/FetchData.vue';
 import { useClipboard } from 'src/composables/useClipboard';
+import VnImg from 'src/components/ui/VnImg.vue';
 
 const state = useState();
 const session = useSession();
@@ -47,7 +48,6 @@ const darkMode = computed({
 });
 
 const user = state.getUser();
-const token = session.getTokenMultimedia();
 const warehousesData = ref();
 const companiesData = ref();
 const accountBankData = ref();
@@ -149,10 +149,7 @@ function saveUserData(param, value) {
 
             <div class="col column items-center q-mb-sm">
                 <QAvatar size="80px">
-                    <QImg
-                        :src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
-                        spinner-color="white"
-                    />
+                    <VnImg :id="user.id" collection="user" size="160x160" />
                 </QAvatar>
 
                 <div class="text-subtitle1 q-mt-md">
diff --git a/src/components/ui/VnImg.vue b/src/components/ui/VnImg.vue
index 37072a69e..3996e9ddc 100644
--- a/src/components/ui/VnImg.vue
+++ b/src/components/ui/VnImg.vue
@@ -3,10 +3,14 @@ import { ref, computed, onMounted } from 'vue';
 import { useSession } from 'src/composables/useSession';
 
 const $props = defineProps({
-    collection: {
+    storage: {
         type: [String, Number],
         default: 'Images',
     },
+    collection: {
+        type: String,
+        default: 'catalog',
+    },
     size: {
         type: String,
         default: '200x200',
@@ -26,9 +30,8 @@ const token = useSession().getTokenMultimedia();
 const timeStamp = ref(`timestamp=${Date.now()}`);
 const url = computed(
     () =>
-        `/api/${$props.collection}/catalog/${$props.size}/${$props.id}/download?access_token=${token}&${timeStamp.value}`
+        `/api/${$props.storage}/${$props.collection}/${$props.size}/${$props.id}/download?access_token=${token}&${timeStamp.value}`
 );
-const emits = defineEmits(['refresh']);
 const reload = (emit = false) => {
     timeStamp.value = `timestamp=${Date.now()}`;
 };
diff --git a/src/pages/Account/Card/AccountDescriptor.vue b/src/pages/Account/Card/AccountDescriptor.vue
index 2ff8afa33..ddc7c077f 100644
--- a/src/pages/Account/Card/AccountDescriptor.vue
+++ b/src/pages/Account/Card/AccountDescriptor.vue
@@ -6,8 +6,8 @@ import CardDescriptor from 'components/ui/CardDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import useCardDescription from 'src/composables/useCardDescription';
 import AccountDescriptorMenu from './AccountDescriptorMenu.vue';
-import { useSession } from 'src/composables/useSession';
 import FetchData from 'src/components/FetchData.vue';
+import VnImg from 'src/components/ui/VnImg.vue';
 
 const $props = defineProps({
     id: {
@@ -19,7 +19,6 @@ const $props = defineProps({
 
 const route = useRoute();
 const { t } = useI18n();
-const { getTokenMultimedia } = useSession();
 const entityId = computed(() => {
     return $props.id || route.params.id;
 });
@@ -31,10 +30,6 @@ const filter = {
     fields: ['id', 'nickname', 'name', 'role'],
     include: { relation: 'role', scope: { fields: ['id', 'name'] } },
 };
-function getAccountAvatar() {
-    const token = getTokenMultimedia();
-    return `/api/Images/user/160x160/${entityId.value}/download?access_token=${token}`;
-}
 const hasAccount = ref(false);
 </script>
 
@@ -72,7 +67,8 @@ const hasAccount = ref(false);
             <AccountDescriptorMenu :has-account="hasAccount" />
         </template>
         <template #before>
-            <QImg :src="getAccountAvatar()" class="photo">
+            <!-- falla id :id="entityId.value" collection="user" size="160x160" -->
+            <VnImg :id="entityId" collection="user" size="160x160" class="photo">
                 <template #error>
                     <div
                         class="absolute-full picture text-center q-pa-md flex flex-center"
@@ -87,7 +83,7 @@ const hasAccount = ref(false);
                         </div>
                     </div>
                 </template>
-            </QImg>
+            </VnImg>
         </template>
         <template #body="{ entity }">
             <VnLv :label="t('account.card.nickname')" :value="entity.nickname" />
diff --git a/src/pages/Claim/Card/ClaimBasicData.vue b/src/pages/Claim/Card/ClaimBasicData.vue
index 50c9502d2..f1f6ada22 100644
--- a/src/pages/Claim/Card/ClaimBasicData.vue
+++ b/src/pages/Claim/Card/ClaimBasicData.vue
@@ -10,12 +10,13 @@ import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 
 import axios from 'axios';
-import { useSession } from 'src/composables/useSession';
+// import { useSession } from 'src/composables/useSession';
+import VnImg from 'src/components/ui/VnImg.vue';
 
 const route = useRoute();
 const { t } = useI18n();
-const { getTokenMultimedia } = useSession();
-const token = getTokenMultimedia();
+// const { getTokenMultimedia } = useSession();
+// const token = getTokenMultimedia();
 
 const claimFilter = {
     fields: [
@@ -118,9 +119,11 @@ const statesFilter = {
                 >
                     <template #before>
                         <QAvatar color="orange">
-                            <QImg
+                            <VnImg
                                 v-if="data.workerFk"
-                                :src="`/api/Images/user/160x160/${data.workerFk}/download?access_token=${token}`"
+                                :size="'160x160'"
+                                :id="data.workerFk"
+                                collection="user"
                                 spinner-color="white"
                             />
                         </QAvatar>
diff --git a/src/pages/Customer/Card/CustomerBasicData.vue b/src/pages/Customer/Card/CustomerBasicData.vue
index b0c2d60e3..805795522 100644
--- a/src/pages/Customer/Card/CustomerBasicData.vue
+++ b/src/pages/Customer/Card/CustomerBasicData.vue
@@ -3,16 +3,14 @@ import { ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
-import { useSession } from 'src/composables/useSession';
 import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
+import VnImg from 'src/components/ui/VnImg.vue';
 
 const route = useRoute();
 const { t } = useI18n();
-const { getTokenMultimedia } = useSession();
-const token = getTokenMultimedia();
 
 const workers = ref([]);
 const workersCopy = ref([]);
@@ -143,10 +141,11 @@ const filterOptions = {
                 >
                     <template #prepend>
                         <QAvatar color="orange">
-                            <QImg
-                                :src="`/api/Images/user/160x160/${data.salesPersonFk}/download?access_token=${token}`"
-                                spinner-color="white"
+                            <VnImg
                                 v-if="data.salesPersonFk"
+                                :id="user.id"
+                                collection="user"
+                                spinner-color="white"
                             />
                         </QAvatar>
                     </template>
diff --git a/src/pages/Entry/EntryLatestBuys.vue b/src/pages/Entry/EntryLatestBuys.vue
index 291b828c9..5da3309d8 100644
--- a/src/pages/Entry/EntryLatestBuys.vue
+++ b/src/pages/Entry/EntryLatestBuys.vue
@@ -16,14 +16,15 @@ import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 import { useStateStore } from 'stores/useStateStore';
 import { toDate, toCurrency } from 'src/filters';
-import { useSession } from 'composables/useSession';
+// import { useSession } from 'composables/useSession';
 import { dashIfEmpty } from 'src/filters';
 import { useArrayData } from 'composables/useArrayData';
 import RightMenu from 'src/components/common/RightMenu.vue';
+import VnImg from 'src/components/ui/VnImg.vue';
 
 const router = useRouter();
-const { getTokenMultimedia } = useSession();
-const token = getTokenMultimedia();
+// const { getTokenMultimedia } = useSession();
+// const token = getTokenMultimedia();
 const stateStore = useStateStore();
 const { t } = useI18n();
 
@@ -695,14 +696,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
             </template>
             <template #body-cell-picture="{ row }">
                 <QTd>
-                    <QImg
-                        :src="`/api/Images/catalog/50x50/${row.itemFk}/download?access_token=${token}`"
-                        spinner-color="primary"
-                        :ratio="1"
-                        height="50px"
-                        width="50px"
-                        class="image"
-                    />
+                    <VnImg :id="row.itemFk" size="50x50" class="image" />
                 </QTd>
             </template>
             <template #body-cell-itemFk="{ row }">
diff --git a/src/pages/Item/Card/ItemDescriptor.vue b/src/pages/Item/Card/ItemDescriptor.vue
index 155c9eb4c..f3eba8c82 100644
--- a/src/pages/Item/Card/ItemDescriptor.vue
+++ b/src/pages/Item/Card/ItemDescriptor.vue
@@ -13,7 +13,6 @@ import ItemDescriptorImage from 'src/pages/Item/Card/ItemDescriptorImage.vue';
 
 import { useState } from 'src/composables/useState';
 import useCardDescription from 'src/composables/useCardDescription';
-import { useSession } from 'src/composables/useSession';
 import { getUrl } from 'src/composables/getUrl';
 import axios from 'axios';
 import { dashIfEmpty } from 'src/filters';
@@ -42,14 +41,12 @@ const quasar = useQuasar();
 const route = useRoute();
 const router = useRouter();
 const { t } = useI18n();
-const { getTokenMultimedia } = useSession();
 const state = useState();
 const user = state.getUser();
 
 const entityId = computed(() => {
     return $props.id || route.params.id;
 });
-const image = ref(null);
 const regularizeStockFormDialog = ref(null);
 const item = ref(null);
 const available = ref(null);
@@ -67,17 +64,10 @@ const warehouseFk = computed({
 });
 
 onMounted(async () => {
-    await getItemAvatar();
     warehouseFk.value = user.value.warehouseFk;
     salixUrl.value = await getUrl('');
 });
 
-const getItemAvatar = async () => {
-    const token = getTokenMultimedia();
-    const timeStamp = `timestamp=${Date.now()}`;
-    image.value = `/api/Images/catalog/200x200/${entityId.value}/download?access_token=${token}&${timeStamp}`;
-};
-
 const data = ref(useCardDescription());
 const setData = (entity) => {
     if (!entity) return;
diff --git a/src/pages/Item/ItemList.vue b/src/pages/Item/ItemList.vue
index 0e40740b9..f1e3629cd 100644
--- a/src/pages/Item/ItemList.vue
+++ b/src/pages/Item/ItemList.vue
@@ -16,17 +16,15 @@ import ItemListFilter from './ItemListFilter.vue';
 
 import { useStateStore } from 'stores/useStateStore';
 import { toDateFormat } from 'src/filters/date.js';
-import { useSession } from 'composables/useSession';
 import { dashIfEmpty } from 'src/filters';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import { useVnConfirm } from 'composables/useVnConfirm';
 import axios from 'axios';
 import RightMenu from 'src/components/common/RightMenu.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import VnImg from 'src/components/ui/VnImg.vue';
 
 const router = useRouter();
-const { getTokenMultimedia } = useSession();
-const token = getTokenMultimedia();
 const stateStore = useStateStore();
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
@@ -491,10 +489,9 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                     </template>
                     <template #body-cell-picture="{ row }">
                         <QTd>
-                            <QImg
-                                :src="`/api/Images/catalog/50x50/${row.id}/download?access_token=${token}`"
-                                spinner-color="primary"
-                                :ratio="1"
+                            <VnImg
+                                size="50x50"
+                                :id="row.id"
                                 height="50px"
                                 width="50px"
                                 class="image"
diff --git a/src/pages/Wagon/WagonCounter.vue b/src/pages/Wagon/WagonCounter.vue
index 15a1ab7ba..70bbc9803 100644
--- a/src/pages/Wagon/WagonCounter.vue
+++ b/src/pages/Wagon/WagonCounter.vue
@@ -1,14 +1,12 @@
 <script setup>
 import { ref, onMounted } from 'vue';
-import { useSession } from 'src/composables/useSession';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
 import VnConfirm from 'components/ui/VnConfirm.vue';
+import VnImg from 'src/components/ui/VnImg.vue';
 
 const quasar = useQuasar();
 const { t } = useI18n();
-const { getTokenMultimedia } = useSession();
-const token = getTokenMultimedia();
 
 const counters = ref({
     alquilerBandeja: { count: 0, id: 96001, title: 'CC Bandeja', isTray: true },
@@ -35,10 +33,6 @@ onMounted(() => {
     }
 });
 
-function getUrl(id) {
-    return `/api/Images/catalog/200x200/${id}/download?access_token=${token}`;
-}
-
 async function handleEvent(type, action, amount) {
     const counter = counters.value[type].count;
     let isOk = true;
@@ -70,11 +64,7 @@ function confirm() {
     <QList class="row q-mx-auto q-mt-xl">
         <QItem v-for="(props, name) in counters" :key="name" class="col-6">
             <QItemSection>
-                <QImg
-                    :src="getUrl(props.id)"
-                    width="130px"
-                    @click="handleEvent(name, 'add')"
-                />
+                <VnImg :id="props.id" width="130px" @click="handleEvent(name, 'add')" />
                 <p class="title">{{ props.title }}</p>
             </QItemSection>
             <QItemSection class="q-ma-none">
diff --git a/src/pages/Worker/Card/WorkerDescriptor.vue b/src/pages/Worker/Card/WorkerDescriptor.vue
index 86c846aca..6739b3356 100644
--- a/src/pages/Worker/Card/WorkerDescriptor.vue
+++ b/src/pages/Worker/Card/WorkerDescriptor.vue
@@ -2,7 +2,6 @@
 import { computed, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import { useSession } from 'src/composables/useSession';
 import CardDescriptor from 'src/components/ui/CardDescriptor.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
@@ -10,6 +9,7 @@ import WorkerChangePasswordForm from 'src/pages/Worker/Card/WorkerChangePassword
 import useCardDescription from 'src/composables/useCardDescription';
 import { useState } from 'src/composables/useState';
 import axios from 'axios';
+import VnImg from 'src/components/ui/VnImg.vue';
 
 const $props = defineProps({
     id: {
@@ -25,7 +25,6 @@ const $props = defineProps({
 
 const route = useRoute();
 const { t } = useI18n();
-const { getTokenMultimedia } = useSession();
 const state = useState();
 const user = state.getUser();
 const changePasswordFormDialog = ref(null);
@@ -73,11 +72,6 @@ watch(
     }
 );
 
-function getWorkerAvatar() {
-    const token = getTokenMultimedia();
-    return `/api/Images/user/160x160/${entityId.value}/download?access_token=${token}`;
-}
-
 const data = ref(useCardDescription());
 const setData = (entity) => {
     if (!entity) return;
@@ -155,7 +149,7 @@ const refetch = async () => await cardDescriptorRef.value.getData();
             </QItem>
         </template>
         <template #before>
-            <QImg :src="getWorkerAvatar()" class="photo">
+            <VnImg :id="entityId" collection="user" size="160x160" class="photo">
                 <template #error>
                     <div
                         class="absolute-full picture text-center q-pa-md flex flex-center"
@@ -170,7 +164,7 @@ const refetch = async () => await cardDescriptorRef.value.getData();
                         </div>
                     </div>
                 </template>
-            </QImg>
+            </VnImg>
         </template>
         <template #body="{ entity }">
             <VnLv :label="t('worker.card.name')" :value="entity.user?.nickname" />

From d23dbca7bf001c66fcb795728eca24128547a226 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Fri, 21 Jun 2024 08:12:03 +0200
Subject: [PATCH 129/167] fix(EntryBuys): fix VnSubtoolbar

---
 src/pages/Entry/Card/EntryBuys.vue | 33 +++++++++++++++---------------
 1 file changed, 17 insertions(+), 16 deletions(-)

diff --git a/src/pages/Entry/Card/EntryBuys.vue b/src/pages/Entry/Card/EntryBuys.vue
index b08c40810..6e66f4ce7 100644
--- a/src/pages/Entry/Card/EntryBuys.vue
+++ b/src/pages/Entry/Card/EntryBuys.vue
@@ -11,9 +11,9 @@ import VnInput from 'src/components/common/VnInput.vue';
 import FetchedTags from 'components/ui/FetchedTags.vue';
 import VnConfirm from 'components/ui/VnConfirm.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
+import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 
 import { useQuasar } from 'quasar';
-import { useStateStore } from 'stores/useStateStore';
 import { toCurrency } from 'src/filters';
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
@@ -22,7 +22,6 @@ const quasar = useQuasar();
 const route = useRoute();
 const router = useRouter();
 const { t } = useI18n();
-const stateStore = useStateStore();
 const { notify } = useNotify();
 
 const rowsSelected = ref([]);
@@ -312,20 +311,22 @@ const lockIconType = (groupingMode, mode) => {
         auto-load
         @on-fetch="(data) => (packagingsOptions = data)"
     />
-    <Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
-        <QBtnGroup push style="column-gap: 10px">
-            <slot name="moreBeforeActions" />
-            <QBtn
-                :label="t('globals.remove')"
-                color="primary"
-                icon="delete"
-                flat
-                @click="openRemoveDialog()"
-                :disable="!rowsSelected?.length"
-                :title="t('globals.remove')"
-            />
-        </QBtnGroup>
-    </Teleport>
+    <VnSubToolbar>
+        <template #st-actions>
+            <QBtnGroup push style="column-gap: 10px">
+                <slot name="moreBeforeActions" />
+                <QBtn
+                    :label="t('globals.remove')"
+                    color="primary"
+                    icon="delete"
+                    flat
+                    @click="openRemoveDialog()"
+                    :disable="!rowsSelected?.length"
+                    :title="t('globals.remove')"
+                />
+            </QBtnGroup>
+        </template>
+    </VnSubToolbar>
     <VnPaginate
         ref="entryBuysPaginateRef"
         data-key="EntryBuys"

From 0107c2178974f0f633e9272314aab1a3409419ae Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Fri, 21 Jun 2024 09:57:01 +0200
Subject: [PATCH 130/167] refs #7409 fix trad

---
 src/pages/Worker/Card/WorkerBalance.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/Worker/Card/WorkerBalance.vue b/src/pages/Worker/Card/WorkerBalance.vue
index 6a76856d5..068438b0e 100644
--- a/src/pages/Worker/Card/WorkerBalance.vue
+++ b/src/pages/Worker/Card/WorkerBalance.vue
@@ -64,7 +64,7 @@ const columns = computed(() => [
         save-url="WorkerIncomes/crud"
         :create="{
             urlCreate: 'workerIncomes',
-            title: t('Create workerIncomes'),
+            title: t('Create workerBalance'),
             onDataSaved: () => tableRef.reload(),
             formInitialData: {
                 workerFk: entityId,
@@ -82,5 +82,5 @@ const columns = computed(() => [
 
 <i18n>
     es:
-        Create workerIncomes: Crear
+        Create workerBalance: Crear balance
 </i18n>

From 6aa920b70e2b2d91d84dccb14b42b6fd8c165732 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Fri, 21 Jun 2024 10:47:09 +0200
Subject: [PATCH 131/167] fix: refs #6243 show rightPanel

---
 src/pages/Route/Cmr/CmrList.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/pages/Route/Cmr/CmrList.vue b/src/pages/Route/Cmr/CmrList.vue
index 7db088860..34166cbf0 100644
--- a/src/pages/Route/Cmr/CmrList.vue
+++ b/src/pages/Route/Cmr/CmrList.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { onBeforeMount, computed, ref } from 'vue';
+import { onBeforeMount, onMounted, computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { Notify } from 'quasar';
 import axios from 'axios';
@@ -10,10 +10,12 @@ import CmrFilter from './CmrFilter.vue';
 import TicketDescriptorProxy from 'pages/Ticket/Card/TicketDescriptorProxy.vue';
 import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
 import RightMenu from 'src/components/common/RightMenu.vue';
+import { useStateStore } from 'src/stores/useStateStore';
 
 const { t } = useI18n();
 const { getTokenMultimedia } = useSession();
 const token = getTokenMultimedia();
+const state = useStateStore();
 const selected = ref([]);
 const warehouses = ref([]);
 
@@ -81,6 +83,9 @@ onBeforeMount(async () => {
     const { data } = await axios.get('Warehouses');
     warehouses.value = data;
 });
+
+onMounted(() => (state.rightDrawer = true));
+
 function getApiUrl() {
     return new URL(window.location).origin;
 }

From 9ce49bf1083ad5df1748907f9699df00ce76bfe1 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 21 Jun 2024 11:31:09 +0200
Subject: [PATCH 132/167] fix: TravelLog

---
 src/pages/Travel/Card/TravelLog.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Travel/Card/TravelLog.vue b/src/pages/Travel/Card/TravelLog.vue
index 1a2667ff7..a1f774769 100644
--- a/src/pages/Travel/Card/TravelLog.vue
+++ b/src/pages/Travel/Card/TravelLog.vue
@@ -2,5 +2,5 @@
 import VnLog from 'src/components/common/VnLog.vue';
 </script>
 <template>
-    <VnLog model="Entry" url="/TravelLogs"></VnLog>
+    <VnLog model="Travel" url="/TravelLogs"></VnLog>
 </template>

From febc7f1f469a20c70c66b5b909ab679a9e1916ac Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 21 Jun 2024 11:33:14 +0200
Subject: [PATCH 133/167] fix: notify icon style

---
 src/boot/axios.js | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

diff --git a/src/boot/axios.js b/src/boot/axios.js
index e3e7289af..4fd83ddea 100644
--- a/src/boot/axios.js
+++ b/src/boot/axios.js
@@ -1,11 +1,10 @@
 import axios from 'axios';
-import { Notify } from 'quasar';
 import { useSession } from 'src/composables/useSession';
 import { Router } from 'src/router';
-import { i18n } from './i18n';
+import useNotify from 'src/composables/useNotify.js';
 
 const session = useSession();
-const { t } = i18n.global;
+const { notify } = useNotify();
 
 axios.defaults.baseURL = '/api/';
 
@@ -27,10 +26,7 @@ const onResponse = (response) => {
 
     const isSaveRequest = method === 'patch';
     if (isSaveRequest) {
-        Notify.create({
-            message: t('globals.dataSaved'),
-            type: 'positive',
-        });
+        notify('globals.dataSaved', 'positive');
     }
 
     return response;
@@ -67,10 +63,7 @@ const onResponseError = (error) => {
         return Promise.reject(error);
     }
 
-    Notify.create({
-        message: t(message),
-        type: 'negative',
-    });
+    notify(message, 'negative');
 
     return Promise.reject(error);
 };

From 891c0d2347159527d0493bc7ccf349eaed612f38 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Fri, 21 Jun 2024 13:05:28 +0200
Subject: [PATCH 134/167] feat: refs 6238 show notes & create vnPopup

---
 src/components/common/VnPopup.vue    | 23 +++++++++++++++++++++
 src/components/ui/CardDescriptor.vue |  3 ++-
 src/i18n/locale/en.yml               |  1 +
 src/i18n/locale/es.yml               |  1 +
 src/pages/Travel/ExtraCommunity.vue  | 30 +++++++++++++++++++++-------
 5 files changed, 50 insertions(+), 8 deletions(-)
 create mode 100644 src/components/common/VnPopup.vue

diff --git a/src/components/common/VnPopup.vue b/src/components/common/VnPopup.vue
new file mode 100644
index 000000000..7dcb08f53
--- /dev/null
+++ b/src/components/common/VnPopup.vue
@@ -0,0 +1,23 @@
+<script setup>
+defineProps({
+    title: { type: String, default: null },
+    content: { type: [String, Number], default: null },
+});
+</script>
+<template>
+    <QPopupProxy>
+        <QCard>
+            <slot name="title">
+                <div
+                    class="header q-px-sm q-py-xs q-ma-none text-white text-bold bg-primary"
+                    v-text="title"
+                />
+            </slot>
+            <slot name="content">
+                <QCardSection class="change-detail q-pa-sm">
+                    {{ content }}
+                </QCardSection>
+            </slot>
+        </QCard>
+    </QPopupProxy>
+</template>
diff --git a/src/components/ui/CardDescriptor.vue b/src/components/ui/CardDescriptor.vue
index b2084479d..8bb2a603e 100644
--- a/src/components/ui/CardDescriptor.vue
+++ b/src/components/ui/CardDescriptor.vue
@@ -39,6 +39,7 @@ const $props = defineProps({
 });
 
 const state = useState();
+const route = useRoute();
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
 let arrayData;
@@ -57,7 +58,7 @@ onBeforeMount(async () => {
     store = arrayData.store;
     entity = computed(() => (Array.isArray(store.data) ? store.data[0] : store.data));
     // It enables to load data only once if the module is the same as the dataKey
-    if ($props.dataKey !== useRoute().meta.moduleName) await getData();
+    if ($props.dataKey !== route.meta.moduleName || !route.params.id) await getData();
     watch(
         () => [$props.url, $props.filter],
         async () => await getData()
diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index b3a85eefa..645e12b7a 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -113,6 +113,7 @@ globals:
     name: Name
     new: New
     comment: Comment
+    observations: Observations
 errors:
     statusUnauthorized: Access denied
     statusInternalServerError: An internal server error has ocurred
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index d03ee9d5c..29373efd0 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -113,6 +113,7 @@ globals:
     name: Nombre
     new: Nuevo
     comment: Comentario
+    observations: Observaciones
 errors:
     statusUnauthorized: Acceso denegado
     statusInternalServerError: Ha ocurrido un error interno del servidor
diff --git a/src/pages/Travel/ExtraCommunity.vue b/src/pages/Travel/ExtraCommunity.vue
index 639c7d894..480240b26 100644
--- a/src/pages/Travel/ExtraCommunity.vue
+++ b/src/pages/Travel/ExtraCommunity.vue
@@ -2,7 +2,6 @@
 import { onMounted, ref, computed, watch } from 'vue';
 import { QBtn } from 'quasar';
 import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
 
 import SupplierDescriptorProxy from 'src/pages/Supplier/Card/SupplierDescriptorProxy.vue';
 import TravelDescriptorProxy from 'src/pages/Travel/Card/TravelDescriptorProxy.vue';
@@ -19,8 +18,8 @@ import { usePrintService } from 'composables/usePrintService';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import axios from 'axios';
 import RightMenu from 'src/components/common/RightMenu.vue';
+import VnPopup from 'src/components/common/VnPopup.vue';
 
-const router = useRouter();
 const stateStore = useStateStore();
 const { t } = useI18n();
 const { openReport } = usePrintService();
@@ -125,6 +124,10 @@ const tableColumnComponents = {
         component: 'span',
         attrs: {},
     },
+    notes: {
+        component: 'span',
+        attrs: {},
+    },
 };
 
 const columns = computed(() => [
@@ -250,6 +253,14 @@ const columns = computed(() => [
         sortable: true,
         format: (value) => toDate(value),
     },
+    {
+        label: t('notes'),
+        field: '',
+        name: 'notes',
+        align: 'center',
+        showValue: false,
+        sortable: true,
+    },
 ]);
 
 async function getData() {
@@ -298,10 +309,6 @@ const saveFieldValue = async (val, field, index) => {
     }
 };
 
-const navigateToTravelId = (id) => {
-    router.push({ path: `/travel/${id}` });
-};
-
 const stopEventPropagation = (event, col) => {
     // Detener la propagación del evento de los siguientes elementos para evitar el click sobre la row que dispararía  la función navigateToTravelId
     if (!['ref', 'id', 'cargoSupplierNickname', 'kg'].includes(col.name)) return;
@@ -486,7 +493,7 @@ const getColor = (percentage) => {
                 <QTr
                     :props="props"
                     class="cursor-pointer bg-travel"
-                    @click="navigateToTravelId(props.row.id)"
+                    @click="$router.push({ path: `/travel/${props.row.id}` })"
                     @dragenter="handleDragEnter($event, props.rowIndex)"
                     @dragover.prevent
                     @drop="handleDrop()"
@@ -607,6 +614,14 @@ const getColor = (percentage) => {
                     <QTd />
                     <QTd />
                     <QTd />
+                    <QTd>
+                        <QBtn icon="comment" size="sm" color="primary">
+                            <VnPopup
+                                :title="t('globals.observations')"
+                                :content="entry.evaNotes"
+                            />
+                        </QBtn>
+                    </QTd>
                 </QTr>
             </template>
         </QTable>
@@ -675,6 +690,7 @@ en:
     physicKg: Phy. KG
     shipped: W. shipped
     landed: W. landed
+    observations: Observations
 
 es:
     searchExtraCommunity: Buscar por envío extra comunitario

From bebb20c76f45b1f87211b07a1ee962a691154af5 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Fri, 21 Jun 2024 13:07:43 +0200
Subject: [PATCH 135/167] fix: refs 6238 drop locale

---
 src/pages/Travel/ExtraCommunity.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/Travel/ExtraCommunity.vue b/src/pages/Travel/ExtraCommunity.vue
index 480240b26..0a00c6419 100644
--- a/src/pages/Travel/ExtraCommunity.vue
+++ b/src/pages/Travel/ExtraCommunity.vue
@@ -690,7 +690,6 @@ en:
     physicKg: Phy. KG
     shipped: W. shipped
     landed: W. landed
-    observations: Observations
 
 es:
     searchExtraCommunity: Buscar por envío extra comunitario

From 606c629d7755d0bdf95e200a86e1005aef3fb880 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Fri, 21 Jun 2024 13:47:42 +0200
Subject: [PATCH 136/167] feat: refs #6238 function name

---
 src/components/CrudModel.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/CrudModel.vue b/src/components/CrudModel.vue
index fe15d2db1..406516d46 100644
--- a/src/components/CrudModel.vue
+++ b/src/components/CrudModel.vue
@@ -135,7 +135,7 @@ async function onSubmit() {
     await saveChanges($props.saveFn ? formData.value : null);
 }
 
-async function onSumbitAndGo() {
+async function onSubmitAndGo() {
     await onSubmit();
     push({ path: $props.goTo });
 }
@@ -324,7 +324,7 @@ watch(formUrl, async () => {
             />
             <QBtnDropdown
                 v-if="$props.goTo && $props.defaultSave"
-                @click="onSumbitAndGo"
+                @click="onSubmitAndGo"
                 :label="tMobile('globals.saveAndContinue')"
                 :title="t('globals.saveAndContinue')"
                 :disable="!hasChanges"

From 44d762694a2f5b367b6faa0a9adcae7b03819796 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Fri, 21 Jun 2024 13:53:35 +0200
Subject: [PATCH 137/167] fix: refs 6238 replace style

---
 src/pages/Travel/ExtraCommunity.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/pages/Travel/ExtraCommunity.vue b/src/pages/Travel/ExtraCommunity.vue
index 0a00c6419..98648512f 100644
--- a/src/pages/Travel/ExtraCommunity.vue
+++ b/src/pages/Travel/ExtraCommunity.vue
@@ -615,7 +615,13 @@ const getColor = (percentage) => {
                     <QTd />
                     <QTd />
                     <QTd>
-                        <QBtn icon="comment" size="sm" color="primary">
+                        <QBtn
+                            v-if="entry.evaNotes"
+                            icon="comment"
+                            size="sm"
+                            flat
+                            color="primary"
+                        >
                             <VnPopup
                                 :title="t('globals.observations')"
                                 :content="entry.evaNotes"

From 5cf183607de779f485d50258e15aa3c592ef27d0 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Fri, 21 Jun 2024 09:20:03 -0300
Subject: [PATCH 138/167] WIP

---
 .../Ticket/Card/BasicData/BasicDataTable.vue  | 245 ++++++++++++++++++
 .../Card/BasicData/TicketBasicDataForm.vue    |   0
 .../TicketBasicDataView.vue}                  |  46 +++-
 src/pages/Ticket/locale/en.yml                |  17 ++
 src/pages/Ticket/locale/es.yml                |  17 ++
 src/router/modules/ticket.js                  |   3 +-
 6 files changed, 323 insertions(+), 5 deletions(-)
 create mode 100644 src/pages/Ticket/Card/BasicData/BasicDataTable.vue
 create mode 100644 src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue
 rename src/pages/Ticket/Card/{TicketBasicData.vue => BasicData/TicketBasicDataView.vue} (93%)

diff --git a/src/pages/Ticket/Card/BasicData/BasicDataTable.vue b/src/pages/Ticket/Card/BasicData/BasicDataTable.vue
new file mode 100644
index 000000000..37c51fadf
--- /dev/null
+++ b/src/pages/Ticket/Card/BasicData/BasicDataTable.vue
@@ -0,0 +1,245 @@
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
+import FetchedTags from 'components/ui/FetchedTags.vue';
+import RightMenu from 'src/components/common/RightMenu.vue';
+import FetchData from 'components/FetchData.vue';
+import { useVnConfirm } from 'composables/useVnConfirm';
+
+import { useStateStore } from 'stores/useStateStore';
+import { toCurrency } from 'filters/index';
+import { useRole } from 'src/composables/useRole';
+
+const $props = defineProps({
+    ticketData: {
+        type: Object,
+        required: true,
+    },
+});
+
+const stateStore = useStateStore();
+const { t } = useI18n();
+const { hasAny } = useRole();
+const { openConfirmationModal } = useVnConfirm();
+
+const _ticketData = ref($props.ticketData);
+const ticketUpdateActions = ref(null);
+const haveNegatives = ref(false);
+const rows = computed(() => _ticketData.value?.sale?.items || []);
+
+const columns = computed(() => [
+    {
+        label: t('basicData.item'),
+        name: 'item',
+        align: 'left',
+        format: (val) => val.name,
+    },
+    {
+        label: t('basicData.description'),
+        name: 'description',
+        align: 'left',
+    },
+    {
+        label: t('basicData.movable'),
+        name: 'movable',
+        align: 'left',
+    },
+    {
+        label: t('basicData.quantity'),
+        name: 'quantity',
+        field: 'quantity',
+        align: 'left',
+    },
+    {
+        label: t('basicData.pricePPU'),
+        name: 'price',
+        field: 'price',
+        align: 'left',
+        format: (val) => toCurrency(val),
+    },
+    {
+        label: t('basicData.newPricePPU'),
+        name: 'newPrice',
+        field: (row) => row.component.newPrice,
+        align: 'left',
+        format: (val) => toCurrency(val),
+    },
+    {
+        label: t('basicData.difference'),
+        name: 'difference',
+        field: (row) => row.component.difference,
+        align: 'left',
+        format: (val) => toCurrency(val),
+    },
+]);
+
+const loadDefaultTicketAction = () => {
+    const isSalesAssistant = hasAny(['salesAssistant']);
+    _ticketData.value.option = isSalesAssistant ? 'mana' : 'renewPrices';
+};
+
+const totalPrice = computed(() => {
+    return rows.value.reduce((acc, item) => acc + item.price * item.quantity, 0);
+});
+
+const totalNewPrice = computed(() => {
+    return rows.value.reduce(
+        (acc, item) => acc + item.component.newPrice * item.quantity,
+        0
+    );
+});
+
+const totalDifference = computed(() => {
+    return rows.value.reduce(
+        (acc, item) => acc + item.component.difference * item.quantity,
+        0
+    );
+});
+
+const ticketHaveNegatives = () => {
+    let _haveNegatives = false;
+    let haveNotNegatives = false;
+    _ticketData.value.withoutNegatives = false;
+    const haveDifferences = _ticketData.value.sale.haveDifferences;
+
+    _ticketData.value.sale.items.forEach((item) => {
+        if (item.quantity > item.movable) _haveNegatives = true;
+        else haveNotNegatives = true;
+    });
+
+    haveNegatives.value = _haveNegatives && haveNotNegatives && haveDifferences;
+    if (haveNegatives.value) _ticketData.value.withoutNegatives = true;
+};
+
+onMounted(() => {
+    stateStore.rightDrawer = true;
+    loadDefaultTicketAction();
+    ticketHaveNegatives();
+    console.log('ticketData: ', _ticketData.value);
+});
+
+onUnmounted(() => (stateStore.rightDrawer = false));
+</script>
+
+<template>
+    <FetchData
+        url="TicketUpdateActions"
+        @on-fetch="(data) => (ticketUpdateActions = data)"
+        auto-load
+    />
+    <RightMenu>
+        <template #right-panel>
+            <QCard
+                class="q-pa-md q-mb-md q-ma-md color-vn-text"
+                bordered
+                flat
+                style="border-color: black"
+            >
+                <QCardSection horizontal>
+                    <span class="text-weight-bold text-subtitle1 text-center full-width">
+                        {{ t('basicData.total') }}
+                    </span>
+                </QCardSection>
+                <QCardSection class="column items-center" horizontal>
+                    <span>
+                        {{ t('basicData.price') }}:
+                        {{ toCurrency(totalPrice) }}
+                    </span>
+                </QCardSection>
+                <QCardSection class="column items-center" horizontal>
+                    <span>
+                        {{ t('basicData.newPrice') }}: {{ toCurrency(totalNewPrice) }}
+                    </span>
+                </QCardSection>
+                <QCardSection class="column items-center" horizontal>
+                    <span>
+                        {{ t('basicData.difference') }}: {{ toCurrency(totalDifference) }}
+                    </span>
+                </QCardSection>
+            </QCard>
+            <QCard
+                v-if="totalDifference"
+                class="q-pa-md q-mb-md q-ma-md color-vn-text"
+                bordered
+                flat
+                style="border-color: black"
+            >
+                <QCardSection horizontal>
+                    <span class="text-weight-bold text-subtitle1 text-center full-width">
+                        {{ t('basicData.chargeDifference') }}
+                    </span>
+                </QCardSection>
+                <QCardSection
+                    v-for="(action, index) in ticketUpdateActions"
+                    :key="index"
+                    horizontal
+                >
+                    <QRadio
+                        v-model="_ticketData.option"
+                        :val="action.code"
+                        :label="action.description"
+                        dense
+                    />
+                </QCardSection>
+            </QCard>
+            <QCard
+                v-if="haveNegatives"
+                class="q-pa-md q-mb-md q-ma-md color-vn-text"
+                bordered
+                flat
+                style="border-color: black"
+            >
+                <QCardSection horizontal class="flex row items-center">
+                    <QCheckbox
+                        :label="t('basicData.withoutNegatives')"
+                        v-model="_ticketData.withoutNegatives"
+                        :toggle-indeterminate="false"
+                    />
+                    <QIcon name="info" size="xs" class="q-ml-sm">
+                        <QTooltip max-width="350px">
+                            {{ t('basicData.withoutNegativesInfo') }}
+                        </QTooltip>
+                    </QIcon>
+                </QCardSection>
+            </QCard>
+        </template>
+    </RightMenu>
+    <QTable
+        :rows="rows"
+        :columns="columns"
+        row-key="id"
+        :pagination="{ rowsPerPage: 0 }"
+        class="full-width q-mt-md"
+        :no-data-label="t('globals.noResults')"
+    >
+        <template #body-cell-item="{ row }">
+            <QTd>
+                <QBtn flat color="primary">
+                    {{ row.itemFk }}
+                    <ItemDescriptorProxy :id="row.itemFk" />
+                </QBtn>
+            </QTd>
+        </template>
+        <template #body-cell-description="{ row }">
+            <QTd>
+                <div class="column">
+                    <span>{{ row.item.name }}</span>
+                    <span class="color-vn-label">{{ row.item.subName }}</span>
+                    <FetchedTags :item="row.item" :max-length="6" />
+                </div>
+            </QTd>
+        </template>
+        <template #body-cell-movable="{ row }">
+            <QTd>
+                <QBadge
+                    v-if="row.haveDifferences"
+                    :text-color="row.quantity > row.movable ? 'black' : 'white'"
+                    :color="row.quantity > row.movable ? 'negative' : 'transparent'"
+                    :label="row.movable"
+                />
+            </QTd>
+        </template>
+    </QTable>
+</template>
diff --git a/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue b/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/pages/Ticket/Card/TicketBasicData.vue b/src/pages/Ticket/Card/BasicData/TicketBasicDataView.vue
similarity index 93%
rename from src/pages/Ticket/Card/TicketBasicData.vue
rename to src/pages/Ticket/Card/BasicData/TicketBasicDataView.vue
index e4bf52a94..bba90a35a 100644
--- a/src/pages/Ticket/Card/TicketBasicData.vue
+++ b/src/pages/Ticket/Card/BasicData/TicketBasicDataView.vue
@@ -10,6 +10,7 @@ import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
 import VnInputTime from 'components/common/VnInputTime.vue';
+import BasicDataTable from './BasicDataTable.vue';
 
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
@@ -289,6 +290,43 @@ const redirectToCustomerAddress = () => {
         params: { id: clientId.value, addressId: addressId.value },
     });
 };
+
+const isFormInvalid = (formData) => {
+    return (
+        !formData.clientFk ||
+        !formData.addressFk ||
+        !formData.agencyModeFk ||
+        !formData.companyFk ||
+        !formData.shipped ||
+        !formData.landed ||
+        !formData.zoneFk
+    );
+};
+
+const onNextStep = async () => {
+    if (step.value === 1) {
+        const formData = formModelRef.value.formData;
+        if (isFormInvalid(formData))
+            return notify(t('basicData.someFieldsAreInvalid'), 'negative');
+
+        if (!formData.sale || formModelRef.value.hasChanges) {
+            const params = {
+                landed: formData.landed,
+                addressId: formData.addressFk,
+                agencyModeId: formData.agencyModeFk,
+                zoneId: formData.zoneFk,
+                warehouseId: formData.warehouseFk,
+                shipped: formData.shipped,
+            };
+            const { data } = await axios.post(
+                `tickets/${formData.id}/priceDifference`,
+                params
+            );
+            formData.sale = data;
+            stepperRef.value.next();
+        }
+    }
+};
 </script>
 <template>
     <FetchData
@@ -336,7 +374,7 @@ const redirectToCustomerAddress = () => {
         animated
         keep-alive
     >
-        <QStep :name="1" title="Select campaign settings" :done="step > 1">
+        <QStep :name="1" :title="t('globals.pageTitles.basicData')" :done="step > 1">
             <FormModel
                 ref="formModelRef"
                 :url="`Tickets/${route.params.id}`"
@@ -502,14 +540,14 @@ const redirectToCustomerAddress = () => {
                 </template>
             </FormModel>
         </QStep>
-        <QStep :name="2" title="Create an ad group" caption="Optional">
-            An ad group contains one or more ads which target a shared set of keywords.
+        <QStep :name="2" :title="t('basicData.priceDifference')">
+            <BasicDataTable :ticket-data="formModelRef.formData" />
         </QStep>
 
         <template #navigation>
             <QStepperNavigation>
                 <QBtn
-                    @click="stepperRef.next()"
+                    @click="onNextStep()"
                     color="primary"
                     :label="step === 2 ? t('basicData.finalize') : t('basicData.next')"
                 />
diff --git a/src/pages/Ticket/locale/en.yml b/src/pages/Ticket/locale/en.yml
index 643421ad4..6fe813a2a 100644
--- a/src/pages/Ticket/locale/en.yml
+++ b/src/pages/Ticket/locale/en.yml
@@ -15,3 +15,20 @@ basicData:
     shipped: Shipped
     landed: Landed
     shippedHour: Shipped hour
+    priceDifference: Price difference
+    someFieldsAreInvalid: Some fields are invalid
+    item: Item
+    description: Description
+    movable: Movable
+    quantity: Quantity
+    pricePPU: Price (PPU)
+    newPricePPU: New (PPU)
+    difference: Difference
+    total: Total
+    price: Price
+    newPrice: New price
+    chargeDifference: Charge difference to
+    withoutNegatives: Create without negatives
+    withoutNegativesInfo: Clone this ticket with the changes and only sales availables
+    negativesConfirmTitle: Edit basic data
+    negativesConfirmMessage: Negatives are going to be generated, are you sure you want to advance all the lines?
diff --git a/src/pages/Ticket/locale/es.yml b/src/pages/Ticket/locale/es.yml
index 913d1935d..8f9394a2e 100644
--- a/src/pages/Ticket/locale/es.yml
+++ b/src/pages/Ticket/locale/es.yml
@@ -15,5 +15,22 @@ basicData:
     shipped: F. Envío
     landed: F. Entrega
     shippedHour: Hora de envío
+    priceDifference: Diferencia de precio
+    someFieldsAreInvalid: Algunos campos no son válidos
+    item: Artículo
+    description: Descripción
+    movable: Movible
+    quantity: Cantidad
+    pricePPU: Precio (Ud.)
+    newPricePPU: Nuevo (Ud.)
+    difference: Diferencia
+    total: Total
+    price: Precio
+    newPrice: Nuevo precio
+    chargeDifference: Cargar diferencia a
+    withoutNegatives: Crear sin negativos
+    withoutNegativesInfo: Clonar este ticket con los cambios y solo ventas disponibles
+    negativesConfirmTitle: Editar datos básicos
+    negativesConfirmMessage: Se van a generar negativos, ¿seguro que quieres adelantar todas las líneas?
 Search ticket: Buscar ticket
 You can search by ticket id or alias: Puedes buscar por id o alias del ticket
diff --git a/src/router/modules/ticket.js b/src/router/modules/ticket.js
index 3c60f40ab..351ca5baa 100644
--- a/src/router/modules/ticket.js
+++ b/src/router/modules/ticket.js
@@ -64,7 +64,8 @@ export default {
                         title: 'basicData',
                         icon: 'vn:settings',
                     },
-                    component: () => import('src/pages/Ticket/Card/TicketBasicData.vue'),
+                    component: () =>
+                        import('src/pages/Ticket/Card/BasicData/TicketBasicDataView.vue'),
                 },
                 {
                     name: 'TicketSale',

From dfb67f6f2b872cbf87b976d229d7e6dda8b69118 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Fri, 21 Jun 2024 16:51:29 -0300
Subject: [PATCH 139/167] refactor

---
 .../Ticket/Card/BasicData/BasicDataTable.vue  |  29 +-
 .../Card/BasicData/TicketBasicDataForm.vue    | 463 ++++++++++++++
 .../Card/BasicData/TicketBasicDataView.vue    | 586 ++++--------------
 src/pages/Ticket/locale/en.yml                |   2 +
 src/pages/Ticket/locale/es.yml                |   2 +
 5 files changed, 595 insertions(+), 487 deletions(-)

diff --git a/src/pages/Ticket/Card/BasicData/BasicDataTable.vue b/src/pages/Ticket/Card/BasicData/BasicDataTable.vue
index 37c51fadf..b7eed5fa8 100644
--- a/src/pages/Ticket/Card/BasicData/BasicDataTable.vue
+++ b/src/pages/Ticket/Card/BasicData/BasicDataTable.vue
@@ -1,34 +1,47 @@
 <script setup>
-import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 import FetchedTags from 'components/ui/FetchedTags.vue';
 import RightMenu from 'src/components/common/RightMenu.vue';
 import FetchData from 'components/FetchData.vue';
-import { useVnConfirm } from 'composables/useVnConfirm';
 
 import { useStateStore } from 'stores/useStateStore';
 import { toCurrency } from 'filters/index';
 import { useRole } from 'src/composables/useRole';
 
 const $props = defineProps({
-    ticketData: {
+    formData: {
         type: Object,
         required: true,
     },
+    haveNegatives: {
+        type: Boolean,
+        required: true,
+        default: false,
+    },
 });
 
+const emit = defineEmits(['updateForm', 'update:haveNegatives']);
+
 const stateStore = useStateStore();
 const { t } = useI18n();
 const { hasAny } = useRole();
-const { openConfirmationModal } = useVnConfirm();
 
-const _ticketData = ref($props.ticketData);
+const _ticketData = ref($props.formData);
 const ticketUpdateActions = ref(null);
-const haveNegatives = ref(false);
+const haveNegatives = computed({
+    get: () => $props.haveNegatives,
+    set: (val) => emit('update:haveNegatives', val),
+});
 const rows = computed(() => _ticketData.value?.sale?.items || []);
 
+watch(
+    () => _ticketData.value,
+    (val) => emit('updateForm', val)
+);
+
 const columns = computed(() => [
     {
         label: t('basicData.item'),
@@ -103,7 +116,6 @@ const ticketHaveNegatives = () => {
     let haveNotNegatives = false;
     _ticketData.value.withoutNegatives = false;
     const haveDifferences = _ticketData.value.sale.haveDifferences;
-
     _ticketData.value.sale.items.forEach((item) => {
         if (item.quantity > item.movable) _haveNegatives = true;
         else haveNotNegatives = true;
@@ -117,7 +129,6 @@ onMounted(() => {
     stateStore.rightDrawer = true;
     loadDefaultTicketAction();
     ticketHaveNegatives();
-    console.log('ticketData: ', _ticketData.value);
 });
 
 onUnmounted(() => (stateStore.rightDrawer = false));
@@ -234,7 +245,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
         <template #body-cell-movable="{ row }">
             <QTd>
                 <QBadge
-                    v-if="row.haveDifferences"
+                    v-if="_ticketData?.sale?.haveDifferences"
                     :text-color="row.quantity > row.movable ? 'black' : 'white'"
                     :color="row.quantity > row.movable ? 'negative' : 'transparent'"
                     :label="row.movable"
diff --git a/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue b/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue
index e69de29bb..2412fad5c 100644
--- a/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue
+++ b/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue
@@ -0,0 +1,463 @@
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+
+import FetchData from 'components/FetchData.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnInputDate from 'src/components/common/VnInputDate.vue';
+import VnInputTime from 'components/common/VnInputTime.vue';
+
+import axios from 'axios';
+import useNotify from 'src/composables/useNotify.js';
+import { toTimeFormat } from 'filters/date.js';
+
+const $props = defineProps({
+    formData: {
+        type: Object,
+        required: true,
+        default: () => ({}),
+    },
+});
+
+const emit = defineEmits(['updateForm']);
+
+const { notify } = useNotify();
+const router = useRouter();
+const { t } = useI18n();
+const agencyFetchRef = ref(null);
+const zonesFetchRef = ref(null);
+
+const clientsOptions = ref([]);
+const warehousesOptions = ref([]);
+const companiesOptions = ref([]);
+const agenciesOptions = ref([]);
+const zonesOptions = ref([]);
+const addresses = ref([]);
+const _formData = ref($props.formData);
+
+watch(
+    () => _formData.value,
+    (val) => emit('updateForm', val)
+);
+
+const agencyByWarehouseFilter = computed(() => ({
+    fields: ['id', 'name'],
+    order: 'name ASC',
+    where: {
+        warehouseFk: warehouseId.value,
+    },
+}));
+
+const zonesFilter = computed(() => ({
+    fields: ['id', 'name'],
+    order: 'name ASC',
+    where: _formData.value?.agencyModeFk
+        ? {
+              shipped: _formData.value?.shipped,
+              addressFk: _formData.value?.addressFk,
+              agencyModeFk: _formData.value?.agencyModeFk,
+              warehouseFk: _formData.value?.warehouseFk,
+          }
+        : {},
+}));
+
+const getLanded = async (params) => {
+    try {
+        const validParams =
+            shipped.value && addressId.value && agencyModeId.value && warehouseId.value;
+        if (!validParams) return;
+
+        _formData.value.zoneFk = null;
+        zonesOptions.value = [];
+        const { data } = await axios.get(`Agencies/getLanded`, { params });
+        if (data) {
+            _formData.value.zoneFk = data.zoneFk;
+            _formData.value.landed = data.landed;
+            _formData.value.shipped = params.shipped;
+        }
+    } catch (error) {
+        console.error(error);
+        notify(t('basicData.noDeliveryZoneAvailable'), 'negative');
+    }
+};
+
+const getShipped = async (params) => {
+    try {
+        const validParams =
+            landed.value && addressId.value && agencyModeId.value && warehouseId.value;
+        if (!validParams) return;
+
+        _formData.value.zoneFk = null;
+        zonesOptions.value = [];
+        const { data } = await axios.get(`Agencies/getShipped`, { params });
+        if (data) {
+            _formData.value.zoneFk = data.zoneFk;
+            _formData.value.landed = params.landed;
+            _formData.value.shipped = data.shipped;
+        } else {
+            notify(t('basicData.noDeliveryZoneAvailable'), 'negative');
+        }
+    } catch (error) {
+        console.error(error);
+        notify(t('basicData.noDeliveryZoneAvailable'), 'negative');
+    }
+};
+
+const onChangeZone = async (zoneId) => {
+    try {
+        _formData.value.agencyModeFk = null;
+        const { data } = await axios.get(`Zones/${zoneId}`);
+        _formData.value.agencyModeFk = data.agencyModeFk;
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+const onChangeAddress = async (addressId) => {
+    try {
+        _formData.value.nickname = null;
+        const { data } = await axios.get(`Addresses/${addressId}`);
+        _formData.value.nickname = data.nickname;
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+const getClientDefaultAddress = async (clientId) => {
+    try {
+        const { data } = await axios.get(`Clients/${clientId}`);
+        if (data) addressId.value = data.defaultAddressFk;
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+const clientAddressesList = async (value) => {
+    let filter = {
+        include: [
+            {
+                relation: 'province',
+                scope: {
+                    fields: ['name'],
+                },
+            },
+            {
+                relation: 'agencyMode',
+                scope: {
+                    fields: ['name'],
+                },
+            },
+        ],
+    };
+    const params = { filter: JSON.stringify(filter) };
+    const { data } = await axios.get(`Clients/${value}/addresses`, { params });
+    if (data) addresses.value = data;
+};
+
+const addressId = computed({
+    get: () => _formData.value?.addressFk,
+    set: (val) => {
+        if (val != _formData.value?.addressFk) {
+            _formData.value.addressFk = val;
+            onChangeAddress(val);
+            getShipped({
+                landed: _formData.value?.landed,
+                addressFk: val,
+                agencyModeFk: _formData.value?.agencyModeFk,
+                warehouseFk: _formData.value?.warehouseFk,
+            });
+        }
+    },
+});
+
+const clientId = computed({
+    get: () => _formData.value?.clientFk,
+    set: (val) => {
+        _formData.value.clientFk = val;
+        _formData.value.addressFk = null;
+        if (!val) return;
+        getClientDefaultAddress(val);
+        clientAddressesList(val);
+    },
+});
+
+const landed = computed({
+    get: () => _formData.value?.landed,
+    set: (val) => {
+        _formData.value.landed = val;
+        getShipped({
+            landed: val,
+            addressFk: _formData.value?.addressFk,
+            agencyModeFk: _formData.value?.agencyModeFk,
+            warehouseFk: _formData.value?.warehouseFk,
+        });
+    },
+});
+
+const agencyModeId = computed({
+    get: () => _formData.value.agencyModeFk,
+    set: (val) => {
+        if (val != _formData.value.agencyModeFk) {
+            _formData.value.agencyModeFk = val;
+            if (!val) return;
+            const agencyMode = agenciesOptions.value.find((a) => a.id == val);
+            _formData.value.warehouseFk = agencyMode.warehouseFk;
+
+            getLanded({
+                shipped: _formData.value?.shipped,
+                addressFk: _formData.value?.addressFk,
+                agencyModeFk: val,
+                warehouseFk: _formData.value?.warehouseFk,
+            });
+        }
+    },
+});
+
+const zoneId = computed({
+    get: () => _formData.value?.zoneFk,
+    set: (val) => {
+        if (val != _formData.value?.zoneFk) {
+            _formData.value.zoneFk = val;
+            onChangeZone(val);
+        }
+    },
+});
+
+const warehouseId = computed({
+    get: () => _formData.value?.warehouseFk,
+    set: (val) => {
+        if (val != _formData.value?.warehouseFk) {
+            _formData.value.warehouseFk = val;
+            getShipped({
+                landed: _formData.value?.landed,
+                addressFk: _formData.value?.addressFk,
+                agencyModeFk: _formData.value?.agencyModeFk,
+                warehouseFk: val,
+            }).then(() => {
+                if (zoneId.value == null) _formData.value.agencyModeFk = null;
+            });
+        }
+    },
+});
+
+const shipped = computed({
+    get: () => _formData.value?.shipped,
+    set: (val) => {
+        if (new Date(_formData.value?.shipped).toDateString() != val.toDateString())
+            val.setHours(0, 0, 0, 0);
+        _formData.value.shipped = val;
+        getLanded({
+            shipped: val,
+            addressFk: _formData.value?.addressFk,
+            agencyModeFk: _formData.value?.agencyModeFk,
+            warehouseFk: _formData.value?.warehouseFk,
+        });
+    },
+});
+
+const onFormModelInit = () => {
+    if (_formData.value?.clientFk) clientAddressesList(_formData.value?.clientFk);
+};
+
+const redirectToCustomerAddress = () => {
+    router.push({
+        name: 'CustomerAddressEditCard',
+        params: { id: clientId.value, addressId: addressId.value },
+    });
+};
+
+onMounted(() => onFormModelInit());
+</script>
+<template>
+    <FetchData
+        url="Clients"
+        :filter="{
+            fields: ['id', 'name'],
+            order: 'id',
+        }"
+        @on-fetch="(data) => (clientsOptions = data)"
+        auto-load
+    />
+    <FetchData
+        url="Warehouses"
+        @on-fetch="(data) => (warehousesOptions = data)"
+        auto-load
+    />
+    <FetchData
+        url="Companies"
+        :filter="{
+            fields: ['id', 'code'],
+            order: 'code ASC',
+        }"
+        @on-fetch="(data) => (companiesOptions = data)"
+        auto-load
+    />
+    <FetchData
+        ref="agencyFetchRef"
+        url="AgencyModes/byWarehouse"
+        :filter="agencyByWarehouseFilter"
+        @on-fetch="(data) => (agenciesOptions = data)"
+        auto-load
+    />
+    <FetchData
+        ref="zonesFetchRef"
+        url="Zones/includingExpired"
+        :filter="zonesFilter"
+        @on-fetch="(data) => (zonesOptions = data)"
+        auto-load
+    />
+    <QForm>
+        <VnRow class="row q-gutter-md q-mb-md">
+            <VnSelect
+                :label="t('basicData.client')"
+                v-model="clientId"
+                option-value="id"
+                option-label="name"
+                :options="clientsOptions"
+                hide-selected
+                map-options
+                :required="true"
+            >
+                <template #option="scope">
+                    <QItem v-bind="scope.itemProps">
+                        <QItemSection>
+                            <QItemLabel
+                                >#{{ scope.opt?.id }} {{ scope.opt?.name }}</QItemLabel
+                            >
+                        </QItemSection>
+                    </QItem>
+                </template>
+            </VnSelect>
+            <VnSelect
+                :label="t('basicData.warehouse')"
+                v-model="warehouseId"
+                option-value="id"
+                option-label="name"
+                :options="warehousesOptions"
+                hide-selected
+                map-options
+                :required="true"
+            />
+        </VnRow>
+        <VnRow class="row q-gutter-md q-mb-md">
+            <VnSelect
+                :label="t('basicData.address')"
+                v-model="addressId"
+                option-value="id"
+                option-label="nickname"
+                :options="addresses"
+                hide-selected
+                map-options
+                :required="true"
+            >
+                <template #option="scope">
+                    <QItem v-bind="scope.itemProps">
+                        <QItemSection>
+                            <QItemLabel
+                                :class="{
+                                    'color-vn-label': !scope.opt?.isActive,
+                                }"
+                            >
+                                {{
+                                    `${
+                                        !scope.opt?.isActive
+                                            ? t('basicData.inactive')
+                                            : ''
+                                    } `
+                                }}
+                                <span> {{ scope.opt?.nickname }}</span>
+                                <span
+                                    v-if="
+                                        scope.opt?.province ||
+                                        scope.opt?.city ||
+                                        scope.opt?.street
+                                    "
+                                    >, {{ scope.opt?.street }}, {{ scope.opt?.city }},
+                                    {{ scope.opt?.province?.name }} -
+                                    {{ scope.opt?.agencyMode?.name }}</span
+                                >
+                            </QItemLabel>
+                        </QItemSection>
+                    </QItem>
+                </template>
+                <template #append>
+                    <QIcon
+                        name="edit"
+                        color="primary"
+                        size="sm"
+                        class="fill-icon cursor-pointer"
+                        @click.stop="redirectToCustomerAddress()"
+                    >
+                        <QTooltip>{{ t('basicData.editAddress') }}</QTooltip>
+                    </QIcon>
+                </template>
+            </VnSelect>
+            <VnInput :label="t('basicData.alias')" v-model="_formData.nickname" />
+        </VnRow>
+        <VnRow class="row q-gutter-md q-mb-md no-wrap">
+            <VnSelect
+                :label="t('basicData.company')"
+                v-model="_formData.companyFk"
+                option-value="id"
+                option-label="code"
+                :options="companiesOptions"
+                hide-selected
+                map-options
+                :required="true"
+            />
+            <VnSelect
+                :label="t('basicData.agency')"
+                v-model="agencyModeId"
+                option-value="id"
+                option-label="name"
+                :options="agenciesOptions"
+                hide-selected
+                map-options
+                :required="true"
+                @focus="agencyFetchRef.fetch()"
+            />
+            <VnSelect
+                :label="t('basicData.zone')"
+                v-model="zoneId"
+                option-value="id"
+                option-label="name"
+                :options="zonesOptions"
+                hide-selected
+                map-options
+                :required="true"
+                @focus="zonesFetchRef.fetch()"
+            >
+                <template #option="scope">
+                    <QItem v-bind="scope.itemProps">
+                        <QItemSection>
+                            <QItemLabel
+                                >{{ scope.opt?.name }} - Max.
+                                {{ toTimeFormat(scope.opt?.hour) }}
+                                h.</QItemLabel
+                            >
+                        </QItemSection>
+                    </QItem>
+                </template>
+            </VnSelect>
+        </VnRow>
+        <VnRow class="row q-gutter-md q-mb-md">
+            <VnInputDate
+                :label="t('basicData.shipped')"
+                v-model="_formData.shipped"
+                :required="true"
+            />
+            <VnInputTime
+                :label="t('basicData.shippedHour')"
+                v-model="_formData.shipped"
+            />
+            <VnInputDate
+                :label="t('basicData.landed')"
+                v-model="_formData.landed"
+                :required="true"
+            />
+        </VnRow>
+    </QForm>
+</template>
diff --git a/src/pages/Ticket/Card/BasicData/TicketBasicDataView.vue b/src/pages/Ticket/Card/BasicData/TicketBasicDataView.vue
index bba90a35a..e8ed8bc0f 100644
--- a/src/pages/Ticket/Card/BasicData/TicketBasicDataView.vue
+++ b/src/pages/Ticket/Card/BasicData/TicketBasicDataView.vue
@@ -1,31 +1,28 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, onBeforeMount } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 
-import FetchData from 'components/FetchData.vue';
-import FormModel from 'components/FormModel.vue';
-import VnRow from 'components/ui/VnRow.vue';
-import VnSelect from 'src/components/common/VnSelect.vue';
-import VnInput from 'src/components/common/VnInput.vue';
-import VnInputDate from 'src/components/common/VnInputDate.vue';
-import VnInputTime from 'components/common/VnInputTime.vue';
 import BasicDataTable from './BasicDataTable.vue';
+import TicketBasicDataForm from './TicketBasicDataForm.vue';
+import { useVnConfirm } from 'composables/useVnConfirm';
 
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
-import { toTimeFormat } from 'filters/date.js';
 
 const { notify } = useNotify();
 const route = useRoute();
 const router = useRouter();
 const { t } = useI18n();
 const stepperRef = ref(null);
-const formModelRef = ref(null);
-const agencyFetchRef = ref(null);
-const zonesFetchRef = ref(null);
+const { openConfirmationModal } = useVnConfirm();
 
-const filter = {
+const step = ref(1);
+const formData = ref({});
+const initialDataLoaded = ref(false);
+const haveNegatives = ref(false);
+
+const ticketFilter = {
     include: [
         { relation: 'address' },
         {
@@ -53,319 +50,108 @@ const filter = {
     ],
 };
 
-const step = ref(1);
-const clientsOptions = ref([]);
-const warehousesOptions = ref([]);
-const companiesOptions = ref([]);
-const agenciesOptions = ref([]);
-const zonesOptions = ref([]);
-const addresses = ref([]);
-
-const agencyByWarehouseFilter = computed(() => ({
-    fields: ['id', 'name'],
-    order: 'name ASC',
-    where: {
-        warehouseFk: warehouseId.value,
-    },
-}));
-
-const zonesFilter = computed(() => ({
-    fields: ['id', 'name'],
-    order: 'name ASC',
-    where: formModelRef.value?.formData?.agencyModeFk
-        ? {
-              shipped: formModelRef.value?.formData?.shipped,
-              addressFk: formModelRef.value?.formData?.addressFk,
-              agencyModeFk: formModelRef.value?.formData?.agencyModeFk,
-              warehouseFk: formModelRef.value?.formData?.warehouseFk,
-          }
-        : {},
-}));
-
-const getLanded = async (params) => {
-    try {
-        const validParams =
-            shipped.value && addressId.value && agencyModeId.value && warehouseId.value;
-        if (!validParams) {
-            // this.$q.resolve(); ???????
-            return;
-        }
-        formModelRef.value.formData.zoneFk = null;
-        const { data } = await axios.get(`Agencies/getLanded`, { params });
-        if (data) {
-            formModelRef.value.formData.zoneFk = data.zoneFk;
-            formModelRef.value.formData.landed = data.landed;
-            formModelRef.value.formData.shipped = params.shipped;
-        }
-    } catch (error) {
-        console.error(error);
-        notify(t('basicData.noDeliveryZoneAvailable'), 'negative');
-    }
+const getTicketData = async () => {
+    const params = { filter: JSON.stringify(ticketFilter) };
+    const { data } = await axios.get(`tickets/${route.params.id}`, { params });
+    formData.value = data;
+    initialDataLoaded.value = true;
 };
 
-const getShipped = async (params) => {
-    try {
-        const validParams =
-            landed.value && addressId.value && agencyModeId.value && warehouseId.value;
-        if (!validParams) return;
-
-        formModelRef.value.formData.zoneFk = null;
-        const { data } = await axios.get(`Agencies/getShipped`, { params });
-        if (data) {
-            formModelRef.value.formData.zoneFk = data.zoneFk;
-            formModelRef.value.formData.landed = params.landed;
-            formModelRef.value.formData.shipped = data.shipped;
-        } else {
-            notify(t('basicData.noDeliveryZoneAvailable'), 'negative');
-        }
-    } catch (error) {
-        console.error(error);
-        notify(t('basicData.noDeliveryZoneAvailable'), 'negative');
-    }
-};
-
-const onChangeZone = async (zoneId) => {
-    try {
-        formModelRef.value.formData.agencyModeFk = null;
-        const { data } = await axios.get(`Zones/${zoneId}`);
-        formModelRef.value.formData.agencyModeFk = data.agencyModeFk;
-    } catch (error) {
-        console.error(error);
-    }
-};
-
-const onChangeAddress = async (addressId) => {
-    try {
-        formModelRef.value.formData.nickname = null;
-        const { data } = await axios.get(`Addresses/${addressId}`);
-        formModelRef.value.formData.nickname = data.nickname;
-    } catch (error) {
-        console.error(error);
-    }
-};
-
-const getClientDefaultAddress = async (clientId) => {
-    try {
-        const { data } = await axios.get(`Clients/${clientId}`);
-        if (data) addressId.value = data.defaultAddressFk;
-    } catch (error) {
-        console.error(error);
-    }
-};
-
-const clientAddressesList = async (value) => {
-    let filter = {
-        include: [
-            {
-                relation: 'province',
-                scope: {
-                    fields: ['name'],
-                },
-            },
-            {
-                relation: 'agencyMode',
-                scope: {
-                    fields: ['name'],
-                },
-            },
-        ],
-    };
-    const params = { filter: JSON.stringify(filter) };
-    const { data } = await axios.get(`Clients/${value}/addresses`, { params });
-    if (data) addresses.value = data;
-};
-
-const addressId = computed({
-    get: () => formModelRef.value?.formData?.addressFk,
-    set: (val) => {
-        if (val != formModelRef.value?.formData?.addressFk) {
-            formModelRef.value.formData.addressFk = val;
-            onChangeAddress(val);
-            getShipped({
-                landed: formModelRef.value?.formData?.landed,
-                addressFk: val,
-                agencyModeFk: formModelRef.value?.formData?.agencyModeFk,
-                warehouseFk: formModelRef.value?.formData?.warehouseFk,
-            });
-        }
-    },
-});
-
-const clientId = computed({
-    get: () => formModelRef.value?.formData?.clientFk,
-    set: (val) => {
-        formModelRef.value.formData.clientFk = val;
-        formModelRef.value.formData.addressFk = null;
-        if (!val) return;
-        getClientDefaultAddress(val);
-        clientAddressesList(val);
-    },
-});
-
-const landed = computed({
-    get: () => formModelRef.value?.formData?.landed,
-    set: (val) => {
-        formModelRef.value.formData.landed = val;
-        getShipped({
-            landed: val,
-            addressFk: formModelRef.value?.formData?.addressFk,
-            agencyModeFk: formModelRef.value?.formData?.agencyModeFk,
-            warehouseFk: formModelRef.value?.formData?.warehouseFk,
-        });
-    },
-});
-
-const agencyModeId = computed({
-    get: () => formModelRef.value?.formData?.agencyModeFk,
-    set: (val) => {
-        if (val != formModelRef.value?.formData?.agencyModeFk) {
-            formModelRef.value.formData.agencyModeFk = val;
-            if (!val) return;
-            const agencyMode = agenciesOptions.value.find((a) => a.id == val);
-            formModelRef.value.formData.warehouseFk = agencyMode.warehouseFk;
-
-            getLanded({
-                shipped: formModelRef.value?.formData?.shipped,
-                addressFk: formModelRef.value?.formData?.addressFk,
-                agencyModeFk: val,
-                warehouseFk: formModelRef.value?.formData?.warehouseFk,
-            });
-        }
-    },
-});
-
-const zoneId = computed({
-    get: () => formModelRef.value?.formData?.zoneFk,
-    set: (val) => {
-        if (val != formModelRef.value.formData.zoneFk) {
-            formModelRef.value.formData.zoneFk = val;
-            onChangeZone(val);
-        }
-    },
-});
-
-const warehouseId = computed({
-    get: () => formModelRef.value?.formData?.warehouseFk,
-    set: (val) => {
-        if (val != formModelRef.value.formData.warehouseFk) {
-            formModelRef.value.formData.warehouseFk = val;
-            getShipped({
-                landed: formModelRef.value.formData.landed,
-                addressFk: formModelRef.value.formData.addressFk,
-                agencyModeFk: formModelRef.value.formData.agencyModeFk,
-                warehouseFk: val,
-            }).then(() => {
-                if (zoneId.value == null) formModelRef.value.formData.agencyModeFk = null;
-            });
-        }
-    },
-});
-
-const shipped = computed({
-    get: () => formModelRef.value?.formData?.shipped,
-    set: (val) => {
-        if (
-            new Date(formModelRef.value?.formData?.shipped).toDateString() !=
-            val.toDateString()
-        )
-            val.setHours(0, 0, 0, 0);
-        formModelRef.value.formData.shipped = val;
-        getLanded({
-            shipped: val,
-            addressFk: formModelRef.value?.formData?.addressFk,
-            agencyModeFk: formModelRef.value?.formData?.agencyModeFk,
-            warehouseFk: formModelRef.value?.formData?.warehouseFk,
-        });
-    },
-});
-
-const onFormModelInit = () => {
-    if (formModelRef.value.formData.clientFk)
-        clientAddressesList(formModelRef.value.formData.clientFk);
-};
-
-const redirectToCustomerAddress = () => {
-    router.push({
-        name: 'CustomerAddressEditCard',
-        params: { id: clientId.value, addressId: addressId.value },
-    });
-};
-
-const isFormInvalid = (formData) => {
+const isFormInvalid = () => {
     return (
-        !formData.clientFk ||
-        !formData.addressFk ||
-        !formData.agencyModeFk ||
-        !formData.companyFk ||
-        !formData.shipped ||
-        !formData.landed ||
-        !formData.zoneFk
+        !formData.value.clientFk ||
+        !formData.value.addressFk ||
+        !formData.value.agencyModeFk ||
+        !formData.value.companyFk ||
+        !formData.value.shipped ||
+        !formData.value.landed ||
+        !formData.value.zoneFk
     );
 };
 
+const getPriceDifference = async () => {
+    try {
+        const params = {
+            landed: formData.value.landed,
+            addressId: formData.value.addressFk,
+            agencyModeId: formData.value.agencyModeFk,
+            zoneId: formData.value.zoneFk,
+            warehouseId: formData.value.warehouseFk,
+            shipped: formData.value.shipped,
+        };
+        const { data } = await axios.post(
+            `tickets/${formData.value.id}/priceDifference`,
+            params
+        );
+        formData.value.sale = data;
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+const submit = async () => {
+    try {
+        if (!formData.value.option)
+            return notify(t('basicData.chooseAnOption'), 'negative');
+
+        const params = {
+            clientFk: formData.value.clientFk,
+            nickname: formData.value.nickname,
+            agencyModeFk: formData.value.agencyModeFk,
+            addressFk: formData.value.addressFk,
+            zoneFk: formData.value.zoneFk,
+            warehouseFk: formData.value.warehouseFk,
+            companyFk: formData.value.companyFk,
+            shipped: formData.value.shipped,
+            landed: formData.value.landed,
+            isDeleted: formData.value.isDeleted,
+            option: formData.value.option,
+            isWithoutNegatives: formData.value.withoutNegatives,
+            withWarningAccept: formData.value.withWarningAccept,
+            keepPrice: false,
+        };
+
+        const { data } = await axios.post(
+            `tickets/${formData.value.id}/componentUpdate`,
+            params
+        );
+
+        if (!data) return;
+
+        const ticketToMove = data.id;
+        notify(t('basicData.unroutedTicket'), 'positive');
+        router.push({ name: 'TicketSummary', params: { id: ticketToMove } });
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+const submitWithNegatives = async () => {
+    formData.value.withWarningAccept = true;
+    submit();
+};
+
 const onNextStep = async () => {
     if (step.value === 1) {
-        const formData = formModelRef.value.formData;
-        if (isFormInvalid(formData))
+        if (isFormInvalid())
             return notify(t('basicData.someFieldsAreInvalid'), 'negative');
 
-        if (!formData.sale || formModelRef.value.hasChanges) {
-            const params = {
-                landed: formData.landed,
-                addressId: formData.addressFk,
-                agencyModeId: formData.agencyModeFk,
-                zoneId: formData.zoneFk,
-                warehouseId: formData.warehouseFk,
-                shipped: formData.shipped,
-            };
-            const { data } = await axios.post(
-                `tickets/${formData.id}/priceDifference`,
-                params
+        await getPriceDifference();
+        stepperRef.value.next();
+    } else if (step.value === 2) {
+        if (haveNegatives.value && !formData.value.withoutNegatives)
+            openConfirmationModal(
+                t('basicData.negativesConfirmTitle'),
+                t('basicData.negativesConfirmMessage'),
+                submitWithNegatives
             );
-            formData.sale = data;
-            stepperRef.value.next();
-        }
+        else submit();
     }
 };
+
+onBeforeMount(async () => await getTicketData());
 </script>
 <template>
-    <FetchData
-        url="Clients"
-        :filter="{
-            fields: ['id', 'name'],
-            order: 'id',
-        }"
-        @on-fetch="(data) => (clientsOptions = data)"
-        auto-load
-    />
-    <FetchData
-        url="Warehouses"
-        @on-fetch="(data) => (warehousesOptions = data)"
-        auto-load
-    />
-    <FetchData
-        url="Companies"
-        :filter="{
-            fields: ['id', 'code'],
-            order: 'code ASC',
-        }"
-        @on-fetch="(data) => (companiesOptions = data)"
-        auto-load
-    />
-    <FetchData
-        ref="agencyFetchRef"
-        url="AgencyModes/byWarehouse"
-        :filter="agencyByWarehouseFilter"
-        @on-fetch="(data) => (agenciesOptions = data)"
-        auto-load
-    />
-    <FetchData
-        ref="zonesFetchRef"
-        url="Zones/includingExpired"
-        :filter="zonesFilter"
-        @on-fetch="(data) => (zonesOptions = data)"
-        auto-load
-    />
     <QStepper
         v-model="step"
         ref="stepperRef"
@@ -373,177 +159,22 @@ const onNextStep = async () => {
         header-nav
         animated
         keep-alive
+        style="max-width: 800px; margin: auto"
     >
         <QStep :name="1" :title="t('globals.pageTitles.basicData')" :done="step > 1">
-            <FormModel
-                ref="formModelRef"
-                :url="`Tickets/${route.params.id}`"
-                :url-update="`Tickets/${route.params.id}`"
-                :filter="filter"
-                model="Ticket"
-                auto-load
-                :default-actions="false"
-                @on-fetch="onFormModelInit()"
-            >
-                <template #form="{ data }">
-                    <VnRow class="row q-gutter-md q-mb-md">
-                        <VnSelect
-                            :label="t('basicData.client')"
-                            v-model="clientId"
-                            option-value="id"
-                            option-label="name"
-                            :options="clientsOptions"
-                            hide-selected
-                            map-options
-                            :required="true"
-                        >
-                            <template #option="scope">
-                                <QItem v-bind="scope.itemProps">
-                                    <QItemSection>
-                                        <QItemLabel
-                                            >#{{ scope.opt?.id }}
-                                            {{ scope.opt?.name }}</QItemLabel
-                                        >
-                                    </QItemSection>
-                                </QItem>
-                            </template>
-                        </VnSelect>
-                        <VnSelect
-                            :label="t('basicData.warehouse')"
-                            v-model="warehouseId"
-                            option-value="id"
-                            option-label="name"
-                            :options="warehousesOptions"
-                            hide-selected
-                            map-options
-                            :required="true"
-                        />
-                    </VnRow>
-                    <VnRow class="row q-gutter-md q-mb-md">
-                        <VnSelect
-                            :label="t('basicData.address')"
-                            v-model="addressId"
-                            option-value="id"
-                            option-label="nickname"
-                            :options="addresses"
-                            hide-selected
-                            map-options
-                            :required="true"
-                        >
-                            <template #option="scope">
-                                <QItem v-bind="scope.itemProps">
-                                    <QItemSection>
-                                        <QItemLabel
-                                            :class="{
-                                                'color-vn-label': !scope.opt?.isActive,
-                                            }"
-                                        >
-                                            {{
-                                                `${
-                                                    !scope.opt?.isActive
-                                                        ? t('basicData.inactive')
-                                                        : ''
-                                                } `
-                                            }}
-                                            <span> {{ scope.opt?.nickname }}</span>
-                                            <span
-                                                v-if="
-                                                    scope.opt?.province ||
-                                                    scope.opt?.city ||
-                                                    scope.opt?.street
-                                                "
-                                                >, {{ scope.opt?.street }},
-                                                {{ scope.opt?.city }},
-                                                {{ scope.opt?.province?.name }} -
-                                                {{ scope.opt?.agencyMode?.name }}</span
-                                            >
-                                        </QItemLabel>
-                                    </QItemSection>
-                                </QItem>
-                            </template>
-                            <template #append>
-                                <QIcon
-                                    name="edit"
-                                    color="primary"
-                                    size="sm"
-                                    class="fill-icon cursor-pointer"
-                                    @click.stop="redirectToCustomerAddress()"
-                                >
-                                    <QTooltip>{{ t('basicData.editAddress') }}</QTooltip>
-                                </QIcon>
-                            </template>
-                        </VnSelect>
-                        <VnInput :label="t('basicData.alias')" v-model="data.nickname" />
-                    </VnRow>
-                    <VnRow class="row q-gutter-md q-mb-md">
-                        <VnSelect
-                            :label="t('basicData.company')"
-                            v-model="data.companyFk"
-                            option-value="id"
-                            option-label="code"
-                            :options="companiesOptions"
-                            hide-selected
-                            map-options
-                            :required="true"
-                        />
-                        <VnSelect
-                            :label="t('basicData.agency')"
-                            v-model="agencyModeId"
-                            option-value="id"
-                            option-label="name"
-                            :options="agenciesOptions"
-                            hide-selected
-                            map-options
-                            :required="true"
-                            @focus="agencyFetchRef.fetch()"
-                        />
-                        <VnSelect
-                            :label="t('basicData.zone')"
-                            v-model="zoneId"
-                            option-value="id"
-                            option-label="name"
-                            :options="zonesOptions"
-                            hide-selected
-                            map-options
-                            :required="true"
-                            @focus="zonesFetchRef.fetch()"
-                        >
-                            <template #option="scope">
-                                <QItem v-bind="scope.itemProps">
-                                    <QItemSection>
-                                        <QItemLabel
-                                            >{{ scope.opt?.name }} - Max.
-                                            {{ toTimeFormat(scope.opt?.hour) }}
-                                            h.</QItemLabel
-                                        >
-                                    </QItemSection>
-                                </QItem>
-                            </template>
-                        </VnSelect>
-                    </VnRow>
-                    <VnRow class="row q-gutter-md q-mb-md">
-                        <VnInputDate
-                            :label="t('basicData.shipped')"
-                            v-model="data.shipped"
-                            :required="true"
-                        />
-                        <VnInputTime
-                            :label="t('basicData.shippedHour')"
-                            v-model="data.shipped"
-                        />
-                        <VnInputDate
-                            :label="t('basicData.landed')"
-                            v-model="data.landed"
-                            :required="true"
-                        />
-                    </VnRow>
-                </template>
-            </FormModel>
+            <TicketBasicDataForm
+                v-if="initialDataLoaded"
+                @update-form="($event) => (formData = $event)"
+                :form-data="formData"
+            />
         </QStep>
         <QStep :name="2" :title="t('basicData.priceDifference')">
-            <BasicDataTable :ticket-data="formModelRef.formData" />
+            <BasicDataTable
+                :form-data="formData"
+                v-model:haveNegatives="haveNegatives"
+                @update-form="($event) => (formData = $event)"
+            />
         </QStep>
-
         <template #navigation>
             <QStepperNavigation>
                 <QBtn
@@ -562,5 +193,4 @@ const onNextStep = async () => {
             </QStepperNavigation>
         </template>
     </QStepper>
-    <pre v-if="formModelRef">{{ formModelRef.formData }}</pre>
 </template>
diff --git a/src/pages/Ticket/locale/en.yml b/src/pages/Ticket/locale/en.yml
index 6fe813a2a..88b73857b 100644
--- a/src/pages/Ticket/locale/en.yml
+++ b/src/pages/Ticket/locale/en.yml
@@ -32,3 +32,5 @@ basicData:
     withoutNegativesInfo: Clone this ticket with the changes and only sales availables
     negativesConfirmTitle: Edit basic data
     negativesConfirmMessage: Negatives are going to be generated, are you sure you want to advance all the lines?
+    chooseAnOption: Choose an option
+    unroutedTicket: The ticket has been unrouted
diff --git a/src/pages/Ticket/locale/es.yml b/src/pages/Ticket/locale/es.yml
index 8f9394a2e..087cacb45 100644
--- a/src/pages/Ticket/locale/es.yml
+++ b/src/pages/Ticket/locale/es.yml
@@ -32,5 +32,7 @@ basicData:
     withoutNegativesInfo: Clonar este ticket con los cambios y solo ventas disponibles
     negativesConfirmTitle: Editar datos básicos
     negativesConfirmMessage: Se van a generar negativos, ¿seguro que quieres adelantar todas las líneas?
+    chooseAnOption: Elige una opción
+    unroutedTicket: El ticket ha sido desenrutado
 Search ticket: Buscar ticket
 You can search by ticket id or alias: Puedes buscar por id o alias del ticket

From 3d9d41afcb7708c47d2dcacfa728b577768ac60e Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Fri, 21 Jun 2024 16:55:33 -0300
Subject: [PATCH 140/167] Add deep true

---
 src/pages/Ticket/Card/BasicData/BasicDataTable.vue      | 3 ++-
 src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/pages/Ticket/Card/BasicData/BasicDataTable.vue b/src/pages/Ticket/Card/BasicData/BasicDataTable.vue
index b7eed5fa8..ef7d10a46 100644
--- a/src/pages/Ticket/Card/BasicData/BasicDataTable.vue
+++ b/src/pages/Ticket/Card/BasicData/BasicDataTable.vue
@@ -39,7 +39,8 @@ const rows = computed(() => _ticketData.value?.sale?.items || []);
 
 watch(
     () => _ticketData.value,
-    (val) => emit('updateForm', val)
+    (val) => emit('updateForm', val),
+    { deep: true }
 );
 
 const columns = computed(() => [
diff --git a/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue b/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue
index 2412fad5c..678cbdf30 100644
--- a/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue
+++ b/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue
@@ -40,7 +40,8 @@ const _formData = ref($props.formData);
 
 watch(
     () => _formData.value,
-    (val) => emit('updateForm', val)
+    (val) => emit('updateForm', val),
+    { deep: true }
 );
 
 const agencyByWarehouseFilter = computed(() => ({

From 3d0cbcfd12b2f478e20fa5eef8f3e90b8da125c8 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Fri, 21 Jun 2024 16:57:51 -0300
Subject: [PATCH 141/167] remove form model expose

---
 src/components/FormModel.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/FormModel.vue b/src/components/FormModel.vue
index 11542ed65..336ea281e 100644
--- a/src/components/FormModel.vue
+++ b/src/components/FormModel.vue
@@ -246,7 +246,7 @@ function updateAndEmit(evt, val, res) {
     emit(evt, state.get(modelValue), res);
 }
 
-defineExpose({ save, isLoading, hasChanges, formData });
+defineExpose({ save, isLoading, hasChanges });
 </script>
 <template>
     <div class="column items-center full-width">

From 82cc844dddf412eb90b24102daea971ad9454f10 Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Mon, 24 Jun 2024 08:30:06 +0200
Subject: [PATCH 142/167] refactor: refs #6977 refactor VnImg

---
 src/components/ui/VnImg.vue | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/ui/VnImg.vue b/src/components/ui/VnImg.vue
index 3996e9ddc..3904a4f48 100644
--- a/src/components/ui/VnImg.vue
+++ b/src/components/ui/VnImg.vue
@@ -44,7 +44,13 @@ onMounted(() => {});
 <template>
     <QImg :src="url" v-bind="$attrs" @click="show = !show" spinner-color="primary" />
     <QDialog v-model="show" v-if="$props.zoomSize">
-        <QImg :src="url" class="img_zoom" v-bind="$attrs" spinner-color="primary" />
+        <QImg
+            :src="url"
+            size="full"
+            class="img_zoom"
+            v-bind="$attrs"
+            spinner-color="primary"
+        />
     </QDialog>
 </template>
 
@@ -56,8 +62,6 @@ onMounted(() => {});
     border-radius: 50%;
 }
 .img_zoom {
-    width: 100%;
-    height: auto;
     border-radius: 0%;
 }
 </style>

From 50d135f282f185363957647008dd1dbfcd43658e Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Mon, 24 Jun 2024 09:20:47 +0200
Subject: [PATCH 143/167] refactor: refs #6977 fix VnImg props

---
 src/components/ui/VnImg.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ui/VnImg.vue b/src/components/ui/VnImg.vue
index 3904a4f48..b7c702d45 100644
--- a/src/components/ui/VnImg.vue
+++ b/src/components/ui/VnImg.vue
@@ -21,8 +21,8 @@ const $props = defineProps({
         default: 'lg',
     },
     id: {
-        type: Boolean,
-        default: false,
+        type: Number,
+        required: true,
     },
 });
 const show = ref(false);

From 9169b793a9d02d0857b75cd61fe39a5ea8894c60 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 24 Jun 2024 12:51:44 +0200
Subject: [PATCH 144/167] fix: refs #7623 update add updateRoute prop in
 VnPaginate

---
 src/components/ui/VnNotes.vue    | 3 ++-
 src/components/ui/VnPaginate.vue | 6 +++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/ui/VnNotes.vue b/src/components/ui/VnNotes.vue
index 937ec4b6c..47591205a 100644
--- a/src/components/ui/VnNotes.vue
+++ b/src/components/ui/VnNotes.vue
@@ -21,7 +21,7 @@ const currentUser = ref(state.getUser());
 const newNote = ref('');
 const vnPaginateRef = ref();
 function handleKeyUp(event) {
-      if (event.key === 'Enter') {
+    if (event.key === 'Enter') {
         event.preventDefault();
         if (!event.shiftKey) insert();
     }
@@ -77,6 +77,7 @@ async function insert() {
         auto-load
         ref="vnPaginateRef"
         class="show"
+        :update-router="false"
         v-bind="$attrs"
     >
         <template #body="{ rows }">
diff --git a/src/components/ui/VnPaginate.vue b/src/components/ui/VnPaginate.vue
index 9a2c06b0c..9764d2b23 100644
--- a/src/components/ui/VnPaginate.vue
+++ b/src/components/ui/VnPaginate.vue
@@ -66,6 +66,10 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    updateRouter: {
+        type: Boolean,
+        default: true,
+    },
 });
 
 const emit = defineEmits(['onFetch', 'onPaginate', 'onChange']);
@@ -120,7 +124,7 @@ async function fetch(params) {
     useArrayData(props.dataKey, params);
     store.filter.skip = 0;
     store.skip = 0;
-    await arrayData.fetch({ append: false });
+    await arrayData.fetch({ append: false, updateRouter: props.updateRouter });
     if (!store.hasMoreData) {
         isLoading.value = false;
     }

From 0765166423a6a64ada4f582455c0d264364d1675 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 24 Jun 2024 13:56:50 +0200
Subject: [PATCH 145/167] fix: refs #7623 disable router update

---
 src/pages/Order/OrderCatalog.vue                |  1 +
 src/pages/Supplier/Card/SupplierConsumption.vue | 10 ++++------
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/pages/Order/OrderCatalog.vue b/src/pages/Order/OrderCatalog.vue
index 1d97663d0..081a2cd2f 100644
--- a/src/pages/Order/OrderCatalog.vue
+++ b/src/pages/Order/OrderCatalog.vue
@@ -70,6 +70,7 @@ function extractValueTags(items) {
                 :user-params="catalogParams"
                 auto-load
                 @on-fetch="extractTags"
+                :update-router="false"
             >
                 <template #body="{ rows }">
                     <div class="catalog-list">
diff --git a/src/pages/Supplier/Card/SupplierConsumption.vue b/src/pages/Supplier/Card/SupplierConsumption.vue
index dea720a61..4f45689d0 100644
--- a/src/pages/Supplier/Card/SupplierConsumption.vue
+++ b/src/pages/Supplier/Card/SupplierConsumption.vue
@@ -45,7 +45,7 @@ const reportParams = computed(() => ({
 }));
 
 async function getSupplierConsumptionData() {
-    await arrayData.fetch({ append: false });
+    await arrayData.fetch({ append: false, updateRouter: false });
 }
 
 const rows = computed(() => {
@@ -166,12 +166,10 @@ onMounted(async () => {
             </div>
         </div>
     </Teleport>
+    <Teleport to="#right-panel" v-if="stateStore.isHeaderMounted()">
+        <SupplierConsumptionFilter data-key="SupplierConsumption" />
+    </Teleport>
     <QPage class="column items-center q-pa-md">
-        <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
-            <QScrollArea class="fit text-grey-8">
-                <SupplierConsumptionFilter data-key="SupplierConsumption" />
-            </QScrollArea>
-        </QDrawer>
         <QTable
             :rows="rows"
             row-key="id"

From cdf3a588af91068f1ea94fad13ff6e738c1f5d96 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Mon, 24 Jun 2024 16:55:09 +0200
Subject: [PATCH 146/167] fix: refs #7623 updating skip param

---
 src/composables/useArrayData.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index f97ade7bf..ff87842e8 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -73,7 +73,6 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
         const filter = {
             order: store.order,
             limit: store.limit,
-            skip: store.skip,
         };
 
         let exprFilter;
@@ -88,7 +87,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
         }
 
         Object.assign(filter, store.userFilter, exprFilter);
-        Object.assign(store.filter, filter);
+        Object.assign(store.filter, { ...filter, skip: store.skip });
         const params = {
             filter: JSON.stringify(store.filter),
         };

From ea7ee97867f7feed2a11a7dacbeb6e29a69c7e0d Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 25 Jun 2024 09:35:21 +0200
Subject: [PATCH 147/167] proposals

---
 .../Ticket/Card/BasicData/BasicDataTable.vue  |   6 +-
 .../Card/BasicData/TicketBasicDataForm.vue    | 127 +++++++++---------
 2 files changed, 64 insertions(+), 69 deletions(-)

diff --git a/src/pages/Ticket/Card/BasicData/BasicDataTable.vue b/src/pages/Ticket/Card/BasicData/BasicDataTable.vue
index ef7d10a46..c14c95a70 100644
--- a/src/pages/Ticket/Card/BasicData/BasicDataTable.vue
+++ b/src/pages/Ticket/Card/BasicData/BasicDataTable.vue
@@ -106,10 +106,7 @@ const totalNewPrice = computed(() => {
 });
 
 const totalDifference = computed(() => {
-    return rows.value.reduce(
-        (acc, item) => acc + item.component.difference * item.quantity,
-        0
-    );
+    return rows.value.reduce((acc, item) => acc + item.component.difference, 0);
 });
 
 const ticketHaveNegatives = () => {
@@ -225,6 +222,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
         :pagination="{ rowsPerPage: 0 }"
         class="full-width q-mt-md"
         :no-data-label="t('globals.noResults')"
+        flat
     >
         <template #body-cell-item="{ row }">
             <QTd>
diff --git a/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue b/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue
index 678cbdf30..07e7b8043 100644
--- a/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue
+++ b/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue
@@ -36,10 +36,10 @@ const companiesOptions = ref([]);
 const agenciesOptions = ref([]);
 const zonesOptions = ref([]);
 const addresses = ref([]);
-const _formData = ref($props.formData);
+const formData = ref($props.formData);
 
 watch(
-    () => _formData.value,
+    () => formData.value,
     (val) => emit('updateForm', val),
     { deep: true }
 );
@@ -55,12 +55,12 @@ const agencyByWarehouseFilter = computed(() => ({
 const zonesFilter = computed(() => ({
     fields: ['id', 'name'],
     order: 'name ASC',
-    where: _formData.value?.agencyModeFk
+    where: formData.value?.agencyModeFk
         ? {
-              shipped: _formData.value?.shipped,
-              addressFk: _formData.value?.addressFk,
-              agencyModeFk: _formData.value?.agencyModeFk,
-              warehouseFk: _formData.value?.warehouseFk,
+              shipped: formData.value?.shipped,
+              addressFk: formData.value?.addressFk,
+              agencyModeFk: formData.value?.agencyModeFk,
+              warehouseFk: formData.value?.warehouseFk,
           }
         : {},
 }));
@@ -71,13 +71,13 @@ const getLanded = async (params) => {
             shipped.value && addressId.value && agencyModeId.value && warehouseId.value;
         if (!validParams) return;
 
-        _formData.value.zoneFk = null;
+        formData.value.zoneFk = null;
         zonesOptions.value = [];
         const { data } = await axios.get(`Agencies/getLanded`, { params });
         if (data) {
-            _formData.value.zoneFk = data.zoneFk;
-            _formData.value.landed = data.landed;
-            _formData.value.shipped = params.shipped;
+            formData.value.zoneFk = data.zoneFk;
+            formData.value.landed = data.landed;
+            formData.value.shipped = params.shipped;
         }
     } catch (error) {
         console.error(error);
@@ -91,13 +91,13 @@ const getShipped = async (params) => {
             landed.value && addressId.value && agencyModeId.value && warehouseId.value;
         if (!validParams) return;
 
-        _formData.value.zoneFk = null;
+        formData.value.zoneFk = null;
         zonesOptions.value = [];
         const { data } = await axios.get(`Agencies/getShipped`, { params });
         if (data) {
-            _formData.value.zoneFk = data.zoneFk;
-            _formData.value.landed = params.landed;
-            _formData.value.shipped = data.shipped;
+            formData.value.zoneFk = data.zoneFk;
+            formData.value.landed = params.landed;
+            formData.value.shipped = data.shipped;
         } else {
             notify(t('basicData.noDeliveryZoneAvailable'), 'negative');
         }
@@ -109,9 +109,9 @@ const getShipped = async (params) => {
 
 const onChangeZone = async (zoneId) => {
     try {
-        _formData.value.agencyModeFk = null;
+        formData.value.agencyModeFk = null;
         const { data } = await axios.get(`Zones/${zoneId}`);
-        _formData.value.agencyModeFk = data.agencyModeFk;
+        formData.value.agencyModeFk = data.agencyModeFk;
     } catch (error) {
         console.error(error);
     }
@@ -119,9 +119,9 @@ const onChangeZone = async (zoneId) => {
 
 const onChangeAddress = async (addressId) => {
     try {
-        _formData.value.nickname = null;
+        formData.value.nickname = null;
         const { data } = await axios.get(`Addresses/${addressId}`);
-        _formData.value.nickname = data.nickname;
+        formData.value.nickname = data.nickname;
     } catch (error) {
         console.error(error);
     }
@@ -159,26 +159,26 @@ const clientAddressesList = async (value) => {
 };
 
 const addressId = computed({
-    get: () => _formData.value?.addressFk,
+    get: () => formData.value?.addressFk,
     set: (val) => {
-        if (val != _formData.value?.addressFk) {
-            _formData.value.addressFk = val;
+        if (val != formData.value?.addressFk) {
+            formData.value.addressFk = val;
             onChangeAddress(val);
             getShipped({
-                landed: _formData.value?.landed,
+                landed: formData.value?.landed,
                 addressFk: val,
-                agencyModeFk: _formData.value?.agencyModeFk,
-                warehouseFk: _formData.value?.warehouseFk,
+                agencyModeFk: formData.value?.agencyModeFk,
+                warehouseFk: formData.value?.warehouseFk,
             });
         }
     },
 });
 
 const clientId = computed({
-    get: () => _formData.value?.clientFk,
+    get: () => formData.value?.clientFk,
     set: (val) => {
-        _formData.value.clientFk = val;
-        _formData.value.addressFk = null;
+        formData.value.clientFk = val;
+        formData.value.addressFk = null;
         if (!val) return;
         getClientDefaultAddress(val);
         clientAddressesList(val);
@@ -186,81 +186,81 @@ const clientId = computed({
 });
 
 const landed = computed({
-    get: () => _formData.value?.landed,
+    get: () => formData.value?.landed,
     set: (val) => {
-        _formData.value.landed = val;
+        formData.value.landed = val;
         getShipped({
             landed: val,
-            addressFk: _formData.value?.addressFk,
-            agencyModeFk: _formData.value?.agencyModeFk,
-            warehouseFk: _formData.value?.warehouseFk,
+            addressFk: formData.value?.addressFk,
+            agencyModeFk: formData.value?.agencyModeFk,
+            warehouseFk: formData.value?.warehouseFk,
         });
     },
 });
 
 const agencyModeId = computed({
-    get: () => _formData.value.agencyModeFk,
+    get: () => formData.value.agencyModeFk,
     set: (val) => {
-        if (val != _formData.value.agencyModeFk) {
-            _formData.value.agencyModeFk = val;
+        if (val != formData.value.agencyModeFk) {
+            formData.value.agencyModeFk = val;
             if (!val) return;
             const agencyMode = agenciesOptions.value.find((a) => a.id == val);
-            _formData.value.warehouseFk = agencyMode.warehouseFk;
+            formData.value.warehouseFk = agencyMode.warehouseFk;
 
             getLanded({
-                shipped: _formData.value?.shipped,
-                addressFk: _formData.value?.addressFk,
+                shipped: formData.value?.shipped,
+                addressFk: formData.value?.addressFk,
                 agencyModeFk: val,
-                warehouseFk: _formData.value?.warehouseFk,
+                warehouseFk: formData.value?.warehouseFk,
             });
         }
     },
 });
 
 const zoneId = computed({
-    get: () => _formData.value?.zoneFk,
+    get: () => formData.value?.zoneFk,
     set: (val) => {
-        if (val != _formData.value?.zoneFk) {
-            _formData.value.zoneFk = val;
+        if (val != formData.value?.zoneFk) {
+            formData.value.zoneFk = val;
             onChangeZone(val);
         }
     },
 });
 
 const warehouseId = computed({
-    get: () => _formData.value?.warehouseFk,
+    get: () => formData.value?.warehouseFk,
     set: (val) => {
-        if (val != _formData.value?.warehouseFk) {
-            _formData.value.warehouseFk = val;
+        if (val != formData.value?.warehouseFk) {
+            formData.value.warehouseFk = val;
             getShipped({
-                landed: _formData.value?.landed,
-                addressFk: _formData.value?.addressFk,
-                agencyModeFk: _formData.value?.agencyModeFk,
+                landed: formData.value?.landed,
+                addressFk: formData.value?.addressFk,
+                agencyModeFk: formData.value?.agencyModeFk,
                 warehouseFk: val,
             }).then(() => {
-                if (zoneId.value == null) _formData.value.agencyModeFk = null;
+                if (zoneId.value == null) formData.value.agencyModeFk = null;
             });
         }
     },
 });
 
 const shipped = computed({
-    get: () => _formData.value?.shipped,
+    get: () => formData.value?.shipped,
     set: (val) => {
-        if (new Date(_formData.value?.shipped).toDateString() != val.toDateString())
+        if (new Date(formData.value?.shipped).toDateString() != val.toDateString())
             val.setHours(0, 0, 0, 0);
-        _formData.value.shipped = val;
+        formData.value.shipped = val;
         getLanded({
             shipped: val,
-            addressFk: _formData.value?.addressFk,
-            agencyModeFk: _formData.value?.agencyModeFk,
-            warehouseFk: _formData.value?.warehouseFk,
+            addressFk: formData.value?.addressFk,
+            agencyModeFk: formData.value?.agencyModeFk,
+            warehouseFk: formData.value?.warehouseFk,
         });
     },
 });
 
 const onFormModelInit = () => {
-    if (_formData.value?.clientFk) clientAddressesList(_formData.value?.clientFk);
+    if (formData.value?.clientFk) clientAddressesList(formData.value?.clientFk);
 };
 
 const redirectToCustomerAddress = () => {
@@ -396,12 +396,12 @@ onMounted(() => onFormModelInit());
                     </QIcon>
                 </template>
             </VnSelect>
-            <VnInput :label="t('basicData.alias')" v-model="_formData.nickname" />
+            <VnInput :label="t('basicData.alias')" v-model="formData.nickname" />
         </VnRow>
         <VnRow class="row q-gutter-md q-mb-md no-wrap">
             <VnSelect
                 :label="t('basicData.company')"
-                v-model="_formData.companyFk"
+                v-model="formData.companyFk"
                 option-value="id"
                 option-label="code"
                 :options="companiesOptions"
@@ -447,16 +447,13 @@ onMounted(() => onFormModelInit());
         <VnRow class="row q-gutter-md q-mb-md">
             <VnInputDate
                 :label="t('basicData.shipped')"
-                v-model="_formData.shipped"
+                v-model="formData.shipped"
                 :required="true"
             />
-            <VnInputTime
-                :label="t('basicData.shippedHour')"
-                v-model="_formData.shipped"
-            />
+            <VnInputTime :label="t('basicData.shippedHour')" v-model="formData.shipped" />
             <VnInputDate
                 :label="t('basicData.landed')"
-                v-model="_formData.landed"
+                v-model="formData.landed"
                 :required="true"
             />
         </VnRow>

From 5a66af341f2f4d288fdef7f50e2afd2624ce4e05 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 25 Jun 2024 10:07:36 +0200
Subject: [PATCH 148/167] fix: state translations

---
 src/pages/Ticket/Card/TicketPurchaseRequest.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/pages/Ticket/Card/TicketPurchaseRequest.vue b/src/pages/Ticket/Card/TicketPurchaseRequest.vue
index 387a5baf1..ea81a445c 100644
--- a/src/pages/Ticket/Card/TicketPurchaseRequest.vue
+++ b/src/pages/Ticket/Card/TicketPurchaseRequest.vue
@@ -123,7 +123,7 @@ const columns = computed(() => [
         name: 'state',
         field: 'isOk',
         align: 'left',
-        format: (val) => getRequestState(val),
+        format: (val) => t(getRequestState(val)),
     },
     {
         label: '',
@@ -259,3 +259,9 @@ const openCreateModal = () => createTicketRequestDialogRef.value.show();
         </QPageSticky>
     </QPage>
 </template>
+<i18n>
+    es:
+        New: Nueva
+        Denied: Denegada
+        Accepted: Aceptada
+</i18n>

From d10f6b4d6c9e8c73f744c42deeb7349a3363f726 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 25 Jun 2024 10:33:15 +0200
Subject: [PATCH 149/167] replace value sale.itemFk

---
 src/pages/Ticket/Card/TicketPurchaseRequest.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Ticket/Card/TicketPurchaseRequest.vue b/src/pages/Ticket/Card/TicketPurchaseRequest.vue
index ea81a445c..281dc46a1 100644
--- a/src/pages/Ticket/Card/TicketPurchaseRequest.vue
+++ b/src/pages/Ticket/Card/TicketPurchaseRequest.vue
@@ -221,7 +221,7 @@ const openCreateModal = () => createTicketRequestDialogRef.value.show();
                     <template #body-cell-saleFk="{ row }">
                         <QTd @click.stop>
                             <QBtn v-if="row.saleFk" flat color="primary">
-                                {{ row.requester?.user?.nickname }}
+                                {{ row.sale.itemFk }}
                                 <ItemDescriptorProxy :id="row.sale.itemFk" />
                             </QBtn>
                         </QTd>

From 3c810254a4bbae2b6839bfa00e116b6aabfb0ebe Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Tue, 25 Jun 2024 11:40:07 +0200
Subject: [PATCH 150/167] fix: refs #7623 redirect

---
 src/components/ui/VnFilterPanel.vue                   |  2 +-
 src/components/ui/VnNotes.vue                         |  2 +-
 src/components/ui/VnPaginate.vue                      |  6 +-----
 src/pages/Order/Card/OrderCatalogFilter.vue           |  1 +
 src/pages/Order/OrderCatalog.vue                      |  1 -
 src/pages/Supplier/Card/SupplierConsumption.vue       | 10 ++++++----
 src/pages/Supplier/Card/SupplierConsumptionFilter.vue |  2 +-
 7 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue
index 218e28600..3c1a4c8a5 100644
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@@ -60,7 +60,7 @@ const emit = defineEmits(['refresh', 'clear', 'search', 'init', 'remove']);
 const arrayData = useArrayData($props.dataKey, {
     exprBuilder: $props.exprBuilder,
     searchUrl: $props.searchUrl,
-    navigate: {},
+    navigate: $props.redirect ? {} : null,
 });
 const route = useRoute();
 const store = arrayData.store;
diff --git a/src/components/ui/VnNotes.vue b/src/components/ui/VnNotes.vue
index 47591205a..f4cdde310 100644
--- a/src/components/ui/VnNotes.vue
+++ b/src/components/ui/VnNotes.vue
@@ -77,8 +77,8 @@ async function insert() {
         auto-load
         ref="vnPaginateRef"
         class="show"
-        :update-router="false"
         v-bind="$attrs"
+        search-url="notes"
     >
         <template #body="{ rows }">
             <TransitionGroup name="list" tag="div" class="column items-center full-width">
diff --git a/src/components/ui/VnPaginate.vue b/src/components/ui/VnPaginate.vue
index 9764d2b23..9a2c06b0c 100644
--- a/src/components/ui/VnPaginate.vue
+++ b/src/components/ui/VnPaginate.vue
@@ -66,10 +66,6 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
-    updateRouter: {
-        type: Boolean,
-        default: true,
-    },
 });
 
 const emit = defineEmits(['onFetch', 'onPaginate', 'onChange']);
@@ -124,7 +120,7 @@ async function fetch(params) {
     useArrayData(props.dataKey, params);
     store.filter.skip = 0;
     store.skip = 0;
-    await arrayData.fetch({ append: false, updateRouter: props.updateRouter });
+    await arrayData.fetch({ append: false });
     if (!store.hasMoreData) {
         isLoading.value = false;
     }
diff --git a/src/pages/Order/Card/OrderCatalogFilter.vue b/src/pages/Order/Card/OrderCatalogFilter.vue
index 97422084b..fd5300122 100644
--- a/src/pages/Order/Card/OrderCatalogFilter.vue
+++ b/src/pages/Order/Card/OrderCatalogFilter.vue
@@ -219,6 +219,7 @@ const useLang = (values) => {
         :expr-builder="exprBuilder"
         :custom-tags="['tagGroups']"
         @remove="clearFilter"
+        :redirect="false"
     >
         <template #tags="{ tag, formatFn }">
             <strong v-if="tag.label === 'categoryFk'">
diff --git a/src/pages/Order/OrderCatalog.vue b/src/pages/Order/OrderCatalog.vue
index 081a2cd2f..1d97663d0 100644
--- a/src/pages/Order/OrderCatalog.vue
+++ b/src/pages/Order/OrderCatalog.vue
@@ -70,7 +70,6 @@ function extractValueTags(items) {
                 :user-params="catalogParams"
                 auto-load
                 @on-fetch="extractTags"
-                :update-router="false"
             >
                 <template #body="{ rows }">
                     <div class="catalog-list">
diff --git a/src/pages/Supplier/Card/SupplierConsumption.vue b/src/pages/Supplier/Card/SupplierConsumption.vue
index 4f45689d0..dea720a61 100644
--- a/src/pages/Supplier/Card/SupplierConsumption.vue
+++ b/src/pages/Supplier/Card/SupplierConsumption.vue
@@ -45,7 +45,7 @@ const reportParams = computed(() => ({
 }));
 
 async function getSupplierConsumptionData() {
-    await arrayData.fetch({ append: false, updateRouter: false });
+    await arrayData.fetch({ append: false });
 }
 
 const rows = computed(() => {
@@ -166,10 +166,12 @@ onMounted(async () => {
             </div>
         </div>
     </Teleport>
-    <Teleport to="#right-panel" v-if="stateStore.isHeaderMounted()">
-        <SupplierConsumptionFilter data-key="SupplierConsumption" />
-    </Teleport>
     <QPage class="column items-center q-pa-md">
+        <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+            <QScrollArea class="fit text-grey-8">
+                <SupplierConsumptionFilter data-key="SupplierConsumption" />
+            </QScrollArea>
+        </QDrawer>
         <QTable
             :rows="rows"
             row-key="id"
diff --git a/src/pages/Supplier/Card/SupplierConsumptionFilter.vue b/src/pages/Supplier/Card/SupplierConsumptionFilter.vue
index 781f8347a..3fc61b15e 100644
--- a/src/pages/Supplier/Card/SupplierConsumptionFilter.vue
+++ b/src/pages/Supplier/Card/SupplierConsumptionFilter.vue
@@ -50,7 +50,7 @@ const itemCategoriesOptions = ref([]);
         @on-fetch="(data) => (itemCategoriesOptions = data)"
         auto-load
     />
-    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
+    <VnFilterPanel :data-key="props.dataKey" :search-button="true" :redirect="false">
         <template #tags="{ tag, formatFn }">
             <div class="q-gutter-x-xs">
                 <strong>{{ t(`params.${tag.label}`) }}: </strong>

From a70524578392c26ffebddd65367ba957f708e24b Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Tue, 25 Jun 2024 12:18:02 +0200
Subject: [PATCH 151/167] refs #7406 fix pr

---
 src/components/ui/VnPaginate.vue | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/components/ui/VnPaginate.vue b/src/components/ui/VnPaginate.vue
index 9af69fdbb..9a2c06b0c 100644
--- a/src/components/ui/VnPaginate.vue
+++ b/src/components/ui/VnPaginate.vue
@@ -26,10 +26,6 @@ const props = defineProps({
         type: Object,
         default: null,
     },
-    userFilter: {
-        type: Object,
-        default: null,
-    },
     where: {
         type: Object,
         default: null,
@@ -87,7 +83,6 @@ const arrayData = useArrayData(props.dataKey, {
     where: props.where,
     limit: props.limit,
     order: props.order,
-    userFilter: props.userFilter,
     userParams: props.userParams,
     exprBuilder: props.exprBuilder,
     keepOpts: props.keepOpts,

From 0c42bba7797782f00cb191368cae4db51cb868dc Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 25 Jun 2024 12:39:05 +0200
Subject: [PATCH 152/167] perf: remove ItemPicture

---
 src/components/ui/ItemPicture.vue | 34 -------------------------------
 1 file changed, 34 deletions(-)
 delete mode 100644 src/components/ui/ItemPicture.vue

diff --git a/src/components/ui/ItemPicture.vue b/src/components/ui/ItemPicture.vue
deleted file mode 100644
index e76414618..000000000
--- a/src/components/ui/ItemPicture.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<script setup>
-defineProps({
-    url: { type: String, required: true },
-    width: { type: String, default: '50px' },
-    height: { type: String, default: '50px' },
-    iconSize: { type: String, default: 'md' },
-});
-</script>
-<template>
-    <QImg
-        :src="url"
-        :height="height"
-        :width="width"
-        :ratio="1"
-        spinner-color="primary"
-        style="border-radius: 50%"
-    >
-        <template #error>
-            <div class="icon-container">
-                <QIcon name="photo" :size="iconSize" style="opacity: 0.4" />
-            </div>
-        </template>
-    </QImg>
-</template>
-
-<style lang="scss" scoped>
-.icon-container {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-</style>

From 1eaa0c9ce2c262b62327d739ae2d310d870b289b Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 25 Jun 2024 12:39:21 +0200
Subject: [PATCH 153/167] perf: replace ItemPicture in favour of VnImg

---
 src/components/ui/VnImg.vue          |  3 ++-
 src/pages/Ticket/Card/TicketSale.vue | 12 +++++-------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/components/ui/VnImg.vue b/src/components/ui/VnImg.vue
index b7c702d45..a88c02898 100644
--- a/src/components/ui/VnImg.vue
+++ b/src/components/ui/VnImg.vue
@@ -17,7 +17,7 @@ const $props = defineProps({
     },
     zoomSize: {
         type: String,
-        required: true,
+        required: false,
         default: 'lg',
     },
     id: {
@@ -57,6 +57,7 @@ onMounted(() => {});
 <style lang="scss" scoped>
 .q-img {
     cursor: zoom-in;
+    min-width: 50px;
 }
 .rounded {
     border-radius: 50%;
diff --git a/src/pages/Ticket/Card/TicketSale.vue b/src/pages/Ticket/Card/TicketSale.vue
index 9df6d5640..7cc8539cf 100644
--- a/src/pages/Ticket/Card/TicketSale.vue
+++ b/src/pages/Ticket/Card/TicketSale.vue
@@ -9,14 +9,14 @@ import VnInput from 'src/components/common/VnInput.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 import TicketEditManaProxy from './TicketEditMana.vue';
-import ItemPicture from 'src/components/ui/ItemPicture.vue';
+import VnImg from 'src/components/ui/VnImg.vue';
+
 import RightMenu from 'src/components/common/RightMenu.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import TicketSaleMoreActions from './TicketSaleMoreActions.vue';
 import TicketTransfer from './TicketTransfer.vue';
 
 import { useStateStore } from 'stores/useStateStore';
-import { useSession } from 'composables/useSession';
 import { toCurrency, toPercentage, dashIfEmpty } from 'src/filters';
 import { useArrayData } from 'composables/useArrayData';
 import { useVnConfirm } from 'composables/useVnConfirm';
@@ -25,8 +25,6 @@ import axios from 'axios';
 
 const route = useRoute();
 const router = useRouter();
-const { getTokenMultimedia } = useSession();
-const token = getTokenMultimedia();
 const stateStore = useStateStore();
 const { t } = useI18n();
 const { notify } = useNotify();
@@ -607,9 +605,9 @@ onUnmounted(() => (stateStore.rightDrawer = false));
         </template>
         <template #body-cell-picture="{ row }">
             <QTd>
-                <ItemPicture
-                    :url="`/api/Images/catalog/50x50/${row.itemFk}/download?access_token=${token}`"
-                />
+                <div class="image-wrapper">
+                    <VnImg :id="row.itemFk" class="rounded" />
+                </div>
             </QTd>
         </template>
         <template #body-cell-visible="{ row }">

From ff33923b7adfe212ff47d8a194dd9717a3aab376 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Tue, 25 Jun 2024 12:49:54 +0200
Subject: [PATCH 154/167] feat: refs #7578 add data-key attribute to
 CardSummary components

---
 src/components/ui/CardSummary.vue               |  2 +-
 src/pages/Account/Card/AccountSummary.vue       |  1 +
 src/pages/Agency/Card/AgencySummary.vue         |  2 +-
 src/pages/Claim/Card/ClaimSummary.vue           |  1 +
 src/pages/Customer/Card/CustomerSummary.vue     |  6 +++++-
 src/pages/Entry/Card/EntrySummary.vue           |  1 +
 src/pages/InvoiceOut/Card/InvoiceOutSummary.vue |  1 +
 src/pages/Item/ItemFixedPrice.vue               | 11 ++---------
 src/pages/Order/Card/OrderSummary.vue           |  6 +++++-
 src/pages/Parking/Card/ParkingSummary.vue       |  1 +
 src/pages/Route/Card/RouteSummary.vue           |  1 +
 src/pages/Shelving/Card/ShelvingSummary.vue     |  7 ++++++-
 src/pages/Supplier/Card/SupplierSummary.vue     |  1 +
 src/pages/Ticket/Card/TicketSummary.vue         |  1 +
 src/pages/Travel/Card/TravelSummary.vue         |  1 +
 src/pages/Worker/Card/WorkerSummary.vue         |  7 ++++++-
 16 files changed, 35 insertions(+), 15 deletions(-)

diff --git a/src/components/ui/CardSummary.vue b/src/components/ui/CardSummary.vue
index cab5b98be..d1e827aee 100644
--- a/src/components/ui/CardSummary.vue
+++ b/src/components/ui/CardSummary.vue
@@ -26,7 +26,7 @@ const props = defineProps({
 const emit = defineEmits(['onFetch']);
 const route = useRoute();
 const isSummary = ref();
-const arrayData = useArrayData(props.dataKey || route.meta.moduleName, {
+const arrayData = useArrayData(props.dataKey, {
     url: props.url,
     filter: props.filter,
     skip: 0,
diff --git a/src/pages/Account/Card/AccountSummary.vue b/src/pages/Account/Card/AccountSummary.vue
index 1c7f79f0e..1901f9cde 100644
--- a/src/pages/Account/Card/AccountSummary.vue
+++ b/src/pages/Account/Card/AccountSummary.vue
@@ -30,6 +30,7 @@ const filter = {
 
 <template>
     <CardSummary
+        data-key="AccountSummary"
         ref="AccountSummary"
         url="VnUsers/preview"
         :filter="filter"
diff --git a/src/pages/Agency/Card/AgencySummary.vue b/src/pages/Agency/Card/AgencySummary.vue
index 839d88200..f9a1c5ea0 100644
--- a/src/pages/Agency/Card/AgencySummary.vue
+++ b/src/pages/Agency/Card/AgencySummary.vue
@@ -14,7 +14,7 @@ const entityId = computed(() => $props.id || useRoute().params.id);
 
 <template>
     <div class="q-pa-md">
-        <CardSummary :url="`Agencies/${entityId}`">
+        <CardSummary :url="`Agencies/${entityId}`" data-key="Agency">
             <template #header="{ entity: agency }">{{ agency.name }}</template>
             <template #body="{ entity: agency }">
                 <QCard class="vn-one">
diff --git a/src/pages/Claim/Card/ClaimSummary.vue b/src/pages/Claim/Card/ClaimSummary.vue
index 36a26008e..1a2d3c251 100644
--- a/src/pages/Claim/Card/ClaimSummary.vue
+++ b/src/pages/Claim/Card/ClaimSummary.vue
@@ -185,6 +185,7 @@ async function changeState(value) {
         :url="`Claims/${entityId}/getSummary`"
         :entity-id="entityId"
         @on-fetch="getClaimDms"
+        data-key="claimSummary"
     >
         <template #header="{ entity: { claim } }">
             {{ claim.id }} - {{ claim.client.name }} ({{ claim.client.id }})
diff --git a/src/pages/Customer/Card/CustomerSummary.vue b/src/pages/Customer/Card/CustomerSummary.vue
index 5a003dc85..1190f22fe 100644
--- a/src/pages/Customer/Card/CustomerSummary.vue
+++ b/src/pages/Customer/Card/CustomerSummary.vue
@@ -61,7 +61,11 @@ const creditWarning = computed(() => {
 </script>
 
 <template>
-    <CardSummary ref="summary" :url="`Clients/${entityId}/summary`">
+    <CardSummary
+        ref="summary"
+        :url="`Clients/${entityId}/summary`"
+        data-key="CustomerSummary"
+    >
         <template #body="{ entity }">
             <QCard class="vn-one">
                 <VnTitle
diff --git a/src/pages/Entry/Card/EntrySummary.vue b/src/pages/Entry/Card/EntrySummary.vue
index d47c0f69c..d08b7eed2 100644
--- a/src/pages/Entry/Card/EntrySummary.vue
+++ b/src/pages/Entry/Card/EntrySummary.vue
@@ -161,6 +161,7 @@ const fetchEntryBuys = async () => {
         ref="summaryRef"
         :url="`Entries/${entityId}/getEntry`"
         @on-fetch="(data) => setEntryData(data)"
+        data-key="EntrySummary"
     >
         <template #header-left>
             <router-link
diff --git a/src/pages/InvoiceOut/Card/InvoiceOutSummary.vue b/src/pages/InvoiceOut/Card/InvoiceOutSummary.vue
index e98de6b30..c773c43cf 100644
--- a/src/pages/InvoiceOut/Card/InvoiceOutSummary.vue
+++ b/src/pages/InvoiceOut/Card/InvoiceOutSummary.vue
@@ -106,6 +106,7 @@ const ticketsColumns = ref([
         ref="summary"
         :url="`InvoiceOuts/${entityId}/summary`"
         :entity-id="entityId"
+        data-key="InvoiceOutSummary"
     >
         <template #header="{ entity: { invoiceOut } }">
             <div>{{ invoiceOut.ref }} - {{ invoiceOut.client?.socialName }}</div>
diff --git a/src/pages/Item/ItemFixedPrice.vue b/src/pages/Item/ItemFixedPrice.vue
index 97f40b84d..2ecd1f21b 100644
--- a/src/pages/Item/ItemFixedPrice.vue
+++ b/src/pages/Item/ItemFixedPrice.vue
@@ -33,7 +33,6 @@ const user = state.getUser();
 const fixedPrices = ref([]);
 const fixedPricesOriginalData = ref([]);
 const warehousesOptions = ref([]);
-const itemsWithNameOptions = ref([]);
 const rowsSelected = ref([]);
 
 const exprBuilder = (param, value) => {
@@ -371,12 +370,6 @@ onUnmounted(() => (stateStore.rightDrawer = false));
         auto-load
         @on-fetch="(data) => onWarehousesFetched(data)"
     />
-    <FetchData
-        url="Items/withName"
-        :filter="{ fields: ['id', 'name'], order: 'id DESC' }"
-        auto-load
-        @on-fetch="(data) => (itemsWithNameOptions = data)"
-    />
     <RightMenu>
         <template #right-panel>
             <ItemFixedPriceFilter
@@ -419,7 +412,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
             <template #body-cell-itemId="props">
                 <QTd>
                     <VnSelect
-                        :options="itemsWithNameOptions"
+                        url="Items/withName"
                         hide-selected
                         option-label="id"
                         option-value="id"
@@ -562,7 +555,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 </QTd>
             </template>
         </QTable>
-        <QPageSticky v-if="rowsSelected.length > 0" :offset="[20, 20]">
+        <QPageSticky v-if="rowsSelected.length" :offset="[20, 20]">
             <QBtn @click="openEditTableCellDialog()" color="primary" fab icon="edit" />
             <QTooltip>
                 {{ t('Edit fixed price(s)') }}
diff --git a/src/pages/Order/Card/OrderSummary.vue b/src/pages/Order/Card/OrderSummary.vue
index d26b799df..d82dbaa17 100644
--- a/src/pages/Order/Card/OrderSummary.vue
+++ b/src/pages/Order/Card/OrderSummary.vue
@@ -51,7 +51,11 @@ const detailsColumns = ref([
 
 <template>
     <div class="q-pa-md">
-        <CardSummary ref="summary" :url="`Orders/${entityId}/summary`">
+        <CardSummary
+            ref="summary"
+            :url="`Orders/${entityId}/summary`"
+            data-key="OrderSummary"
+        >
             <template #header="{ entity }">
                 {{ t('order.summary.basket') }} #{{ entity?.id }} -
                 {{ entity?.client?.name }} ({{ entity?.clientFk }})
diff --git a/src/pages/Parking/Card/ParkingSummary.vue b/src/pages/Parking/Card/ParkingSummary.vue
index ebc3a996b..7406856b9 100644
--- a/src/pages/Parking/Card/ParkingSummary.vue
+++ b/src/pages/Parking/Card/ParkingSummary.vue
@@ -30,6 +30,7 @@ const filter = {
             :url="`Parkings/${entityId}`"
             :filter="filter"
             @on-fetch="(data) => (parking = data)"
+            data-key="Parking"
         >
             <template #header>{{ parking.code }}</template>
             <template #body>
diff --git a/src/pages/Route/Card/RouteSummary.vue b/src/pages/Route/Card/RouteSummary.vue
index ac03a8231..748c82d29 100644
--- a/src/pages/Route/Card/RouteSummary.vue
+++ b/src/pages/Route/Card/RouteSummary.vue
@@ -122,6 +122,7 @@ const ticketColumns = ref([
             ref="summary"
             :url="`Routes/${entityId}/summary`"
             :entity-id="entityId"
+            data-key="RouteSummary"
         >
             <template #header="{ entity }">
                 <span>{{ `${entity?.route.id} - ${entity?.route?.description}` }}</span>
diff --git a/src/pages/Shelving/Card/ShelvingSummary.vue b/src/pages/Shelving/Card/ShelvingSummary.vue
index 168552832..08d05626e 100644
--- a/src/pages/Shelving/Card/ShelvingSummary.vue
+++ b/src/pages/Shelving/Card/ShelvingSummary.vue
@@ -36,7 +36,12 @@ const filter = {
 
 <template>
     <div class="q-pa-md">
-        <CardSummary ref="summary" :url="`Shelvings/${entityId}`" :filter="filter">
+        <CardSummary
+            ref="summary"
+            :url="`Shelvings/${entityId}`"
+            :filter="filter"
+            data-key="ShelvingSummary"
+        >
             <template #header="{ entity }">
                 <div>{{ entity.code }}</div>
             </template>
diff --git a/src/pages/Supplier/Card/SupplierSummary.vue b/src/pages/Supplier/Card/SupplierSummary.vue
index 4cd1f46f5..d007ad08f 100644
--- a/src/pages/Supplier/Card/SupplierSummary.vue
+++ b/src/pages/Supplier/Card/SupplierSummary.vue
@@ -48,6 +48,7 @@ function getUrl(section) {
         ref="summaryRef"
         :url="`Suppliers/${entityId}/getSummary`"
         @on-fetch="(data) => setData(data)"
+        data-key="SupplierSummary"
     >
         <template #header>
             <span>{{ supplier.name }} - {{ supplier.id }}</span>
diff --git a/src/pages/Ticket/Card/TicketSummary.vue b/src/pages/Ticket/Card/TicketSummary.vue
index 0715cf7ba..295e8bca5 100644
--- a/src/pages/Ticket/Card/TicketSummary.vue
+++ b/src/pages/Ticket/Card/TicketSummary.vue
@@ -90,6 +90,7 @@ async function changeState(value) {
         ref="summaryRef"
         :url="`Tickets/${entityId}/summary`"
         @on-fetch="(data) => setData(data)"
+        data-key="TicketSummary"
     >
         <template #header="{ entity }">
             <div>
diff --git a/src/pages/Travel/Card/TravelSummary.vue b/src/pages/Travel/Card/TravelSummary.vue
index 91b36f0cf..88ddee9a2 100644
--- a/src/pages/Travel/Card/TravelSummary.vue
+++ b/src/pages/Travel/Card/TravelSummary.vue
@@ -237,6 +237,7 @@ const getLink = (param) => `#/travel/${entityId.value}/${param}`;
         ref="summaryRef"
         :url="`Travels/${entityId}/getTravel`"
         @on-fetch="(data) => setTravelData(data)"
+        data-key="TravelSummary"
     >
         <template #header>
             <span>{{ travel.ref }} - {{ travel.id }}</span>
diff --git a/src/pages/Worker/Card/WorkerSummary.vue b/src/pages/Worker/Card/WorkerSummary.vue
index 6d6dde97b..319592fe9 100644
--- a/src/pages/Worker/Card/WorkerSummary.vue
+++ b/src/pages/Worker/Card/WorkerSummary.vue
@@ -66,7 +66,12 @@ const filter = {
 </script>
 
 <template>
-    <CardSummary ref="summary" :url="`Workers/${entityId}`" :filter="filter">
+    <CardSummary
+        ref="summary"
+        :url="`Workers/${entityId}`"
+        :filter="filter"
+        data-key="WorkerSummary"
+    >
         <template #header="{ entity }">
             <div>{{ entity.id }} - {{ entity.firstName }} {{ entity.lastName }}</div>
         </template>

From 266657fab5bd31f330b4a18bfbbf66dc238bf5a5 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 25 Jun 2024 08:35:11 -0300
Subject: [PATCH 155/167] Fix total difference

---
 src/pages/Ticket/Card/BasicData/BasicDataTable.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/pages/Ticket/Card/BasicData/BasicDataTable.vue b/src/pages/Ticket/Card/BasicData/BasicDataTable.vue
index ef7d10a46..6faf7c9e5 100644
--- a/src/pages/Ticket/Card/BasicData/BasicDataTable.vue
+++ b/src/pages/Ticket/Card/BasicData/BasicDataTable.vue
@@ -106,10 +106,7 @@ const totalNewPrice = computed(() => {
 });
 
 const totalDifference = computed(() => {
-    return rows.value.reduce(
-        (acc, item) => acc + item.component.difference * item.quantity,
-        0
-    );
+    return rows.value.reduce((acc, item) => acc + item.component?.difference || 0, 0);
 });
 
 const ticketHaveNegatives = () => {

From 9817ae8c2c1a32cbb7270b8f9499174adb186eb4 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 25 Jun 2024 13:35:16 +0200
Subject: [PATCH 156/167] fix: column hidden v-if

---
 src/pages/Ticket/Card/BasicData/BasicDataTable.vue | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/pages/Ticket/Card/BasicData/BasicDataTable.vue b/src/pages/Ticket/Card/BasicData/BasicDataTable.vue
index c14c95a70..60aeeb4f9 100644
--- a/src/pages/Ticket/Card/BasicData/BasicDataTable.vue
+++ b/src/pages/Ticket/Card/BasicData/BasicDataTable.vue
@@ -45,15 +45,18 @@ watch(
 
 const columns = computed(() => [
     {
+        required: true,
         label: t('basicData.item'),
         name: 'item',
         align: 'left',
         format: (val) => val.name,
     },
     {
+        required: true,
         label: t('basicData.description'),
         name: 'description',
         align: 'left',
+        hidden: true,
     },
     {
         label: t('basicData.movable'),
@@ -61,12 +64,14 @@ const columns = computed(() => [
         align: 'left',
     },
     {
+        required: true,
         label: t('basicData.quantity'),
         name: 'quantity',
         field: 'quantity',
         align: 'left',
     },
     {
+        required: true,
         label: t('basicData.pricePPU'),
         name: 'price',
         field: 'price',
@@ -74,6 +79,7 @@ const columns = computed(() => [
         format: (val) => toCurrency(val),
     },
     {
+        required: true,
         label: t('basicData.newPricePPU'),
         name: 'newPrice',
         field: (row) => row.component.newPrice,
@@ -81,6 +87,7 @@ const columns = computed(() => [
         format: (val) => toCurrency(val),
     },
     {
+        required: true,
         label: t('basicData.difference'),
         name: 'difference',
         field: (row) => row.component.difference,
@@ -108,18 +115,18 @@ const totalNewPrice = computed(() => {
 const totalDifference = computed(() => {
     return rows.value.reduce((acc, item) => acc + item.component.difference, 0);
 });
-
+const showMovablecolumn = computed(() => (haveDifferences.value > 0 ? ['movable'] : []));
+const haveDifferences = computed(() => _ticketData.value.sale.haveDifferences);
 const ticketHaveNegatives = () => {
     let _haveNegatives = false;
     let haveNotNegatives = false;
     _ticketData.value.withoutNegatives = false;
-    const haveDifferences = _ticketData.value.sale.haveDifferences;
     _ticketData.value.sale.items.forEach((item) => {
         if (item.quantity > item.movable) _haveNegatives = true;
         else haveNotNegatives = true;
     });
 
-    haveNegatives.value = _haveNegatives && haveNotNegatives && haveDifferences;
+    haveNegatives.value = _haveNegatives && haveNotNegatives && haveDifferences.value;
     if (haveNegatives.value) _ticketData.value.withoutNegatives = true;
 };
 
@@ -216,6 +223,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
         </template>
     </RightMenu>
     <QTable
+        :visible-columns="showMovablecolumn"
         :rows="rows"
         :columns="columns"
         row-key="id"

From 54e3eb6f0d7de3726ffa6269e7d9c02b2b9faa5d Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 25 Jun 2024 08:40:21 -0300
Subject: [PATCH 157/167] Add required rule to VnInputTime and VnInputDate

---
 src/components/common/VnInputDate.vue                   | 6 ++++++
 src/components/common/VnInputTime.vue                   | 5 ++++-
 src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue | 8 ++++++--
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/common/VnInputDate.vue b/src/components/common/VnInputDate.vue
index fe0866292..a2ad54eda 100644
--- a/src/components/common/VnInputDate.vue
+++ b/src/components/common/VnInputDate.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 import isValidDate from 'filters/isValidDate';
 
 const props = defineProps({
@@ -24,6 +25,9 @@ const hover = ref(false);
 
 const emit = defineEmits(['update:modelValue']);
 
+const { t } = useI18n();
+const requiredFieldRule = (val) => !!val || t('globals.fieldRequired');
+
 const joinDateAndTime = (date, time) => {
     if (!date) {
         return null;
@@ -91,6 +95,8 @@ const styleAttrs = computed(() => {
             readonly
             :model-value="displayDate(value)"
             v-bind="{ ...$attrs, ...styleAttrs }"
+            :class="{ required: $attrs.required }"
+            :rules="$attrs.required ? [requiredFieldRule] : null"
             @click="isPopupOpen = true"
         >
             <template #append>
diff --git a/src/components/common/VnInputTime.vue b/src/components/common/VnInputTime.vue
index 4b436c136..5c84951cb 100644
--- a/src/components/common/VnInputTime.vue
+++ b/src/components/common/VnInputTime.vue
@@ -17,8 +17,9 @@ const props = defineProps({
         default: false,
     },
 });
-const { t } = useI18n();
 const emit = defineEmits(['update:modelValue']);
+const { t } = useI18n();
+const requiredFieldRule = (val) => !!val || t('globals.fieldRequired');
 
 const value = computed({
     get() {
@@ -71,6 +72,8 @@ const styleAttrs = computed(() => {
         readonly
         :model-value="formatTime(value)"
         v-bind="{ ...$attrs, ...styleAttrs }"
+        :class="{ required: $attrs.required }"
+        :rules="$attrs.required ? [requiredFieldRule] : null"
         @click="isPopupOpen = true"
     >
         <template #append>
diff --git a/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue b/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue
index 678cbdf30..f7e5f6836 100644
--- a/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue
+++ b/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue
@@ -396,7 +396,11 @@ onMounted(() => onFormModelInit());
                     </QIcon>
                 </template>
             </VnSelect>
-            <VnInput :label="t('basicData.alias')" v-model="_formData.nickname" />
+            <VnInput
+                :label="t('basicData.alias')"
+                v-model="_formData.nickname"
+                :required="true"
+            />
         </VnRow>
         <VnRow class="row q-gutter-md q-mb-md no-wrap">
             <VnSelect
@@ -417,7 +421,6 @@ onMounted(() => onFormModelInit());
                 :options="agenciesOptions"
                 hide-selected
                 map-options
-                :required="true"
                 @focus="agencyFetchRef.fetch()"
             />
             <VnSelect
@@ -453,6 +456,7 @@ onMounted(() => onFormModelInit());
             <VnInputTime
                 :label="t('basicData.shippedHour')"
                 v-model="_formData.shipped"
+                :required="true"
             />
             <VnInputDate
                 :label="t('basicData.landed')"

From 4de347d0e8f180a05035282ddf863fd8d5b3918b Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 25 Jun 2024 09:19:12 -0300
Subject: [PATCH 158/167] Rmove nav navigation and organize buttons

---
 .../Ticket/Card/BasicData/BasicDataTable.vue      |  4 ++--
 .../Ticket/Card/BasicData/TicketBasicDataView.vue | 15 +++++++--------
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/pages/Ticket/Card/BasicData/BasicDataTable.vue b/src/pages/Ticket/Card/BasicData/BasicDataTable.vue
index 8ba56213b..48b8c882f 100644
--- a/src/pages/Ticket/Card/BasicData/BasicDataTable.vue
+++ b/src/pages/Ticket/Card/BasicData/BasicDataTable.vue
@@ -116,12 +116,12 @@ const totalDifference = computed(() => {
     return rows.value.reduce((acc, item) => acc + item.component?.difference || 0, 0);
 });
 const showMovablecolumn = computed(() => (haveDifferences.value > 0 ? ['movable'] : []));
-const haveDifferences = computed(() => _ticketData.value.sale.haveDifferences);
+const haveDifferences = computed(() => _ticketData.value.sale?.haveDifferences);
 const ticketHaveNegatives = () => {
     let _haveNegatives = false;
     let haveNotNegatives = false;
     _ticketData.value.withoutNegatives = false;
-    _ticketData.value.sale.items.forEach((item) => {
+    _ticketData.value?.sale?.items.forEach((item) => {
         if (item.quantity > item.movable) _haveNegatives = true;
         else haveNotNegatives = true;
     });
diff --git a/src/pages/Ticket/Card/BasicData/TicketBasicDataView.vue b/src/pages/Ticket/Card/BasicData/TicketBasicDataView.vue
index e8ed8bc0f..af47761a2 100644
--- a/src/pages/Ticket/Card/BasicData/TicketBasicDataView.vue
+++ b/src/pages/Ticket/Card/BasicData/TicketBasicDataView.vue
@@ -156,7 +156,6 @@ onBeforeMount(async () => await getTicketData());
         v-model="step"
         ref="stepperRef"
         color="primary"
-        header-nav
         animated
         keep-alive
         style="max-width: 800px; margin: auto"
@@ -176,19 +175,19 @@ onBeforeMount(async () => await getTicketData());
             />
         </QStep>
         <template #navigation>
-            <QStepperNavigation>
+            <QStepperNavigation class="flex justify-between">
                 <QBtn
-                    @click="onNextStep()"
-                    color="primary"
-                    :label="step === 2 ? t('basicData.finalize') : t('basicData.next')"
-                />
-                <QBtn
-                    v-if="step > 1"
                     flat
                     color="primary"
                     @click="stepperRef.previous()"
                     :label="t('basicData.back')"
                     class="q-ml-sm"
+                    :class="{ invisible: step === 1 }"
+                />
+                <QBtn
+                    @click="onNextStep()"
+                    color="primary"
+                    :label="step === 2 ? t('basicData.finalize') : t('basicData.next')"
                 />
             </QStepperNavigation>
         </template>

From 0776db2e0fcebe291f8f4c6589012d2a37da7fc8 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Tue, 25 Jun 2024 14:24:58 +0200
Subject: [PATCH 159/167] warmFix: correct id

---
 src/pages/Travel/Card/TravelThermographs.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/Travel/Card/TravelThermographs.vue b/src/pages/Travel/Card/TravelThermographs.vue
index 1898a58d6..9f224154c 100644
--- a/src/pages/Travel/Card/TravelThermographs.vue
+++ b/src/pages/Travel/Card/TravelThermographs.vue
@@ -13,7 +13,7 @@ import useNotify from 'src/composables/useNotify.js';
 import { toDate } from 'src/filters';
 import { downloadFile } from 'src/composables/downloadFile';
 
-const {{id}} = useRoute();
+const route = useRoute();
 const quasar = useQuasar();
 const router = useRouter();
 const { t } = useI18n();
@@ -29,7 +29,7 @@ const thermographFilter = {
             fields: ['id', 'name'],
         },
     },
-    where: { travelFk: id },
+    where: { travelFk: route.params.id },
     order: ['created'],
 };
 

From 31f8ab7c07a95a6127838de72c0dafd86366bf24 Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Tue, 25 Jun 2024 14:41:11 +0200
Subject: [PATCH 160/167] refactor: refs #6739 fix redirect transferInvoice

---
 src/components/TransferInvoiceForm.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/TransferInvoiceForm.vue b/src/components/TransferInvoiceForm.vue
index b4f89fa74..1af23583d 100644
--- a/src/components/TransferInvoiceForm.vue
+++ b/src/components/TransferInvoiceForm.vue
@@ -70,13 +70,17 @@ const makeInvoice = async () => {
                     });
             });
             if (!response) {
+                console.log('entra cuando no checkbox');
                 return;
             }
         }
 
+        console.log('params: ', params);
         const { data } = await axios.post('InvoiceOuts/transferInvoice', params);
+        console.log('data: ', data);
         notify(t('Transferred invoice'), 'positive');
-        if (data.id) router.push({ name: 'InvoiceOutSummary', params: { id: data.id } });
+        const id = data?.[0];
+        if (id) router.push({ name: 'InvoiceOutSummary', params: { id } });
     } catch (err) {
         console.error('Error transfering invoice', err);
     }
@@ -204,7 +208,7 @@ const makeInvoice = async () => {
 <i18n>
 en:
     checkInfo: New tickets from the destination customer will be generated in the consignee by default.
-    transferInvoiceInfo: Destination customer is marked to bill in the consignee, do you want to continue?
+    transferInvoiceInfo: Destination customer is marked to bill in the consignee
     confirmTransferInvoice: The destination customer has selected to bill in the consignee, do you want to continue?
 es:
     Transfer invoice: Transferir factura

From d29bf095358a62cd9db21719b65cbda66ec34531 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 25 Jun 2024 14:48:39 +0200
Subject: [PATCH 161/167] remove warnings

---
 src/components/ui/VnImg.vue                 |  2 +-
 src/pages/Account/Card/AccountBasicData.vue |  1 -
 src/pages/Route/RouteList.vue               |  1 -
 src/pages/Route/RouteRoadmap.vue            |  2 +-
 src/pages/Ticket/Card/TicketSale.vue        | 17 ++++++++---------
 5 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/components/ui/VnImg.vue b/src/components/ui/VnImg.vue
index a88c02898..37c1edefc 100644
--- a/src/components/ui/VnImg.vue
+++ b/src/components/ui/VnImg.vue
@@ -32,7 +32,7 @@ const url = computed(
     () =>
         `/api/${$props.storage}/${$props.collection}/${$props.size}/${$props.id}/download?access_token=${token}&${timeStamp.value}`
 );
-const reload = (emit = false) => {
+const reload = () => {
     timeStamp.value = `timestamp=${Date.now()}`;
 };
 defineExpose({
diff --git a/src/pages/Account/Card/AccountBasicData.vue b/src/pages/Account/Card/AccountBasicData.vue
index 3a9d5c9bf..42b77419f 100644
--- a/src/pages/Account/Card/AccountBasicData.vue
+++ b/src/pages/Account/Card/AccountBasicData.vue
@@ -3,7 +3,6 @@ import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import FormModel from 'components/FormModel.vue';
-import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import { ref, watch } from 'vue';
 
diff --git a/src/pages/Route/RouteList.vue b/src/pages/Route/RouteList.vue
index edec43fec..de60d164e 100644
--- a/src/pages/Route/RouteList.vue
+++ b/src/pages/Route/RouteList.vue
@@ -1,5 +1,4 @@
 <script setup>
-import { useStateStore } from 'stores/useStateStore';
 import { useI18n } from 'vue-i18n';
 import { computed, onMounted, ref } from 'vue';
 import { dashIfEmpty, toHour } from 'src/filters';
diff --git a/src/pages/Route/RouteRoadmap.vue b/src/pages/Route/RouteRoadmap.vue
index bc4a7a3e7..2c9234c6e 100644
--- a/src/pages/Route/RouteRoadmap.vue
+++ b/src/pages/Route/RouteRoadmap.vue
@@ -128,7 +128,7 @@ function confirmRemove() {
         .onOk(() => refreshKey.value++);
 }
 
-function navigateToRoadmapSummary(event, { id }) {
+function navigateToRoadmapSummary(_, { id }) {
     router.push({ name: 'RoadmapSummary', params: { id } });
 }
 </script>
diff --git a/src/pages/Ticket/Card/TicketSale.vue b/src/pages/Ticket/Card/TicketSale.vue
index 7cc8539cf..9fdbd4738 100644
--- a/src/pages/Ticket/Card/TicketSale.vue
+++ b/src/pages/Ticket/Card/TicketSale.vue
@@ -353,15 +353,14 @@ const newOrderFromTicket = async () => {
 };
 
 const goToLog = (saleId) => {
-    //TODO: Redireccionar cuando exista la vista TicketLog
-    // router.push({
-    //     name: 'TicketLog',
-    //     params: {
-    //         originId: route.params.id,
-    //         changedModel: 'Sale',
-    //         changedModelId: saleId,
-    //     },
-    // });
+    router.push({
+        name: 'TicketLog',
+        params: {
+            originId: route.params.id,
+            changedModel: 'Sale',
+            changedModelId: saleId,
+        },
+    });
 };
 
 const changeTicketState = async (val) => {

From ca96e4e6e08cda9438d40c47a695a5052e051461 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Tue, 25 Jun 2024 16:07:26 +0200
Subject: [PATCH 162/167] fix: refs #7623 bugs & tests

---
 .../Customer/Defaulter/CustomerDefaulterFilter.vue     |  2 +-
 src/pages/Supplier/Card/SupplierConsumption.vue        | 10 +++++++---
 .../integration/invoiceIn/invoiceInCorrective.spec.js  |  3 +--
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/pages/Customer/Defaulter/CustomerDefaulterFilter.vue b/src/pages/Customer/Defaulter/CustomerDefaulterFilter.vue
index 6b4d8baaa..1d7f63f36 100644
--- a/src/pages/Customer/Defaulter/CustomerDefaulterFilter.vue
+++ b/src/pages/Customer/Defaulter/CustomerDefaulterFilter.vue
@@ -119,7 +119,7 @@ const departments = ref();
                         emit-value
                         hide-selected
                         map-options
-                        option-label="country"
+                        option-label="name"
                         option-value="id"
                         outlined
                         rounded
diff --git a/src/pages/Supplier/Card/SupplierConsumption.vue b/src/pages/Supplier/Card/SupplierConsumption.vue
index dea720a61..100a38b2a 100644
--- a/src/pages/Supplier/Card/SupplierConsumption.vue
+++ b/src/pages/Supplier/Card/SupplierConsumption.vue
@@ -104,10 +104,14 @@ const totalEntryPrice = (rows) => {
     for (const row of rows) {
         let total = 0;
         let quantity = 0;
-        for (const buy of row.buys) {
-            total = total + buy.total;
-            quantity = quantity + buy.quantity;
+
+        if (row.buys) {
+            for (const buy of row.buys) {
+                total = total + buy.total;
+                quantity = quantity + buy.quantity;
+            }
         }
+
         row.total = total;
         row.quantity = quantity;
         totalPrice = totalPrice + total;
diff --git a/test/cypress/integration/invoiceIn/invoiceInCorrective.spec.js b/test/cypress/integration/invoiceIn/invoiceInCorrective.spec.js
index 376450b7d..7863d6bfa 100644
--- a/test/cypress/integration/invoiceIn/invoiceInCorrective.spec.js
+++ b/test/cypress/integration/invoiceIn/invoiceInCorrective.spec.js
@@ -6,15 +6,14 @@ describe('InvoiceInCorrective', () => {
     const saveDialog = '.q-card > .q-card__actions > .q-btn--standard ';
 
     it('should create a correcting invoice', () => {
+        cy.viewport(1280, 720);
         cy.login('developer');
         cy.visit(`/#/invoice-in/1/summary?limit=10`);
 
-        cy.openLeftMenu();
         cy.openActionsDescriptor();
 
         cy.get(createRectificative).click();
         cy.get(saveDialog).click();
-        cy.openLeftMenu();
         cy.get(rectificativeSection).click();
         cy.get('tbody > tr:visible').should('have.length', 1);
     });

From fbef6f3eb1a137a831632d33248beaae43a05095 Mon Sep 17 00:00:00 2001
From: jorgep <jorgep@verdnatura.es>
Date: Tue, 25 Jun 2024 16:18:53 +0200
Subject: [PATCH 163/167] fix: refs #7623 test

---
 .../integration/invoiceIn/invoiceInDescriptor.spec.js      | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/test/cypress/integration/invoiceIn/invoiceInDescriptor.spec.js b/test/cypress/integration/invoiceIn/invoiceInDescriptor.spec.js
index f2d9a3497..ca0b309e9 100644
--- a/test/cypress/integration/invoiceIn/invoiceInDescriptor.spec.js
+++ b/test/cypress/integration/invoiceIn/invoiceInDescriptor.spec.js
@@ -5,18 +5,15 @@ describe('InvoiceInDescriptor', () => {
         '.q-card:nth-child(3) .vn-label-value:nth-child(5) > .value > span';
 
     it('should booking and unbooking the invoice properly', () => {
+        cy.viewport(1280, 720);
         cy.login('developer');
-        cy.visit(`/#/invoice-in/1/summary?limit=10`);
+        cy.visit('/#/invoice-in/1/summary');
 
-        cy.openLeftMenu();
         cy.openActionsDescriptor();
         cy.get(firstDescritorOpt).click();
         cy.get(dialogBtns).eq(1).click();
-        cy.get('.fullscreen').first().click();
         cy.get(isBookedField).should('have.attr', 'title', 'true');
 
-        cy.openLeftMenu();
-        cy.openActionsDescriptor();
         cy.get(firstDescritorOpt).click();
         cy.get(dialogBtns).eq(1).click();
         cy.get(isBookedField).should('have.attr', 'title', 'false');

From 6e6c6301d2bcdf9e4308b5a14044395585153804 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Tue, 25 Jun 2024 15:27:48 -0300
Subject: [PATCH 164/167] fix log view not refreshing when changing id param

---
 src/pages/Ticket/Card/TicketLog.vue  | 5 ++++-
 src/pages/Ticket/Card/TicketSale.vue | 3 ++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/pages/Ticket/Card/TicketLog.vue b/src/pages/Ticket/Card/TicketLog.vue
index 94b63a117..94cff4dfc 100644
--- a/src/pages/Ticket/Card/TicketLog.vue
+++ b/src/pages/Ticket/Card/TicketLog.vue
@@ -1,7 +1,10 @@
 <script setup>
 import VnLog from 'src/components/common/VnLog.vue';
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
 </script>
 
 <template>
-    <VnLog model="Ticket" url="/TicketLogs"></VnLog>
+    <VnLog model="Ticket" url="/TicketLogs" :key="route.params.id"></VnLog>
 </template>
diff --git a/src/pages/Ticket/Card/TicketSale.vue b/src/pages/Ticket/Card/TicketSale.vue
index 9fdbd4738..32408bf67 100644
--- a/src/pages/Ticket/Card/TicketSale.vue
+++ b/src/pages/Ticket/Card/TicketSale.vue
@@ -724,8 +724,9 @@ onUnmounted(() => (stateStore.rightDrawer = false));
             </QTd>
         </template>
         <template #body-cell-history="{ row }">
-            <QTd v-if="row.hasLogs">
+            <QTd>
                 <QBtn
+                    v-if="row.$hasLogs"
                     @click.stop="goToLog(row.id)"
                     color="primary"
                     icon="history"

From 4e4563d48110fec668862c43f28fe857a136f743 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 25 Jun 2024 22:34:19 +0200
Subject: [PATCH 165/167] fix: merge dev

---
 src/pages/Ticket/locale/es.yml | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/pages/Ticket/locale/es.yml b/src/pages/Ticket/locale/es.yml
index 657be5512..ac09ed064 100644
--- a/src/pages/Ticket/locale/es.yml
+++ b/src/pages/Ticket/locale/es.yml
@@ -129,6 +129,3 @@ ticketSale:
     shipped: F. Envío
     agency: Agencia
     address: Consignatario
-card:
-    search: Buscar tickets
-    searchInfo: Buscar tickets por identificador o alias

From 56560d4b507868f3a0133549159f0cb8eb05a9e3 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 25 Jun 2024 22:35:20 +0200
Subject: [PATCH 166/167] fix: merge dev

---
 src/pages/Ticket/locale/en.yml | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/pages/Ticket/locale/en.yml b/src/pages/Ticket/locale/en.yml
index 86e221e1f..1b67cec5c 100644
--- a/src/pages/Ticket/locale/en.yml
+++ b/src/pages/Ticket/locale/en.yml
@@ -22,9 +22,6 @@ ticketSale:
     shipped: Shipped
     agency: Agency
     address: Address
-card:
-    search: Search tickets
-    searchInfo: You can search by ticket id or alias
 advanceTickets:
     origin: Origin
     destination: Destination

From 6f2573880c7a42771cc21e9d08b223ab898a6bbc Mon Sep 17 00:00:00 2001
From: carlossa <carlossa@verdnatura.es>
Date: Wed, 26 Jun 2024 09:59:37 +0200
Subject: [PATCH 167/167] refs #7409 fix balance and formation

---
 src/pages/Worker/Card/WorkerBalance.vue   | 5 +++++
 src/pages/Worker/Card/WorkerFormation.vue | 4 ++++
 2 files changed, 9 insertions(+)

diff --git a/src/pages/Worker/Card/WorkerBalance.vue b/src/pages/Worker/Card/WorkerBalance.vue
index 068438b0e..ad18d61e0 100644
--- a/src/pages/Worker/Card/WorkerBalance.vue
+++ b/src/pages/Worker/Card/WorkerBalance.vue
@@ -16,6 +16,7 @@ const columns = computed(() => [
         create: true,
         component: 'date',
         field: 'paymentDate',
+        cardVisible: true,
     },
     {
         align: 'left',
@@ -27,6 +28,7 @@ const columns = computed(() => [
             url: 'payrollComponents',
             fields: ['id', 'name'],
         },
+        cardVisible: true,
     },
     {
         align: 'left',
@@ -35,6 +37,7 @@ const columns = computed(() => [
         create: true,
         component: 'input',
         field: 'debit',
+        cardVisible: true,
     },
     {
         align: 'left',
@@ -43,6 +46,7 @@ const columns = computed(() => [
         create: true,
         component: 'input',
         field: 'credit',
+        cardVisible: true,
     },
     {
         align: 'left',
@@ -51,6 +55,7 @@ const columns = computed(() => [
         create: true,
         component: 'input',
         field: 'concept',
+        cardVisible: true,
     },
 ]);
 </script>
diff --git a/src/pages/Worker/Card/WorkerFormation.vue b/src/pages/Worker/Card/WorkerFormation.vue
index 52b22a295..0ac97d9ef 100644
--- a/src/pages/Worker/Card/WorkerFormation.vue
+++ b/src/pages/Worker/Card/WorkerFormation.vue
@@ -35,6 +35,7 @@ const columns = computed(() => [
             url: 'TrainingCourseTypes',
             fields: ['id', 'name'],
         },
+        cardVisible: true,
     },
     {
         align: 'left',
@@ -52,6 +53,7 @@ const columns = computed(() => [
         component: 'date',
         field: 'ended',
         create: true,
+        cardVisible: true,
     },
     {
         align: 'left',
@@ -63,6 +65,7 @@ const columns = computed(() => [
             url: 'TrainingCenters',
             fields: ['id', 'name'],
         },
+        cardVisible: true,
     },
     {
         align: 'left',
@@ -78,6 +81,7 @@ const columns = computed(() => [
         component: 'input',
         field: 'amount',
         create: true,
+        cardVisible: true,
     },
     {
         align: 'left',