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 01/15] 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
-- 
2.40.1


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 02/15] 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
-- 
2.40.1


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 03/15] 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>
-- 
2.40.1


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 04/15] 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
-- 
2.40.1


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 05/15] 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
-- 
2.40.1


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 06/15] 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
-- 
2.40.1


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 07/15] 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"
-- 
2.40.1


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 08/15] 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);
 
-- 
2.40.1


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 09/15] 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
-- 
2.40.1


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 10/15] 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>
-- 
2.40.1


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 11/15] 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" />
-- 
2.40.1


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 12/15] 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>
-- 
2.40.1


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 13/15] 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);
-- 
2.40.1


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 14/15] 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>
-- 
2.40.1


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 15/15] 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 }">
-- 
2.40.1