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] 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 0000000000..e764146180
--- /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 d701cb9e78..e2b49ce223 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 d563e49f73..dc082d660d 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 ae737bfee4..a093beafa5 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 2b59eefd4b..a5819e4dfb 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 2c2bb8b05f..15c19eb14c 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