From 0e5607d685b19600ce99fea92ad83616eca8aa40 Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Fri, 6 Sep 2024 13:59:50 +0200
Subject: [PATCH] feat: refs #7553 ticket component to vntable and fixed minor
 errors

---
 .../Ticket/Card/BasicData/TicketBasicData.vue | 151 ++++----
 src/pages/Ticket/Card/TicketComponents.vue    | 353 +++++++++---------
 .../Ticket/Card/TicketPurchaseRequest.vue     |  15 +-
 src/pages/Ticket/Card/TicketSale.vue          | 181 ++++-----
 src/pages/Ticket/Card/TicketVolume.vue        |   4 +-
 5 files changed, 338 insertions(+), 366 deletions(-)

diff --git a/src/pages/Ticket/Card/BasicData/TicketBasicData.vue b/src/pages/Ticket/Card/BasicData/TicketBasicData.vue
index 22e89d394..741231ca3 100644
--- a/src/pages/Ticket/Card/BasicData/TicketBasicData.vue
+++ b/src/pages/Ticket/Card/BasicData/TicketBasicData.vue
@@ -4,7 +4,6 @@ import { useI18n } from 'vue-i18n';
 
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 import FetchedTags from 'components/ui/FetchedTags.vue';
-import RightMenu from 'src/components/common/RightMenu.vue';
 import FetchData from 'components/FetchData.vue';
 
 import { useStateStore } from 'stores/useStateStore';
@@ -145,83 +144,81 @@ onUnmounted(() => (stateStore.rightDrawer = false));
         @on-fetch="(data) => (ticketUpdateActions = data)"
         auto-load
     />
-    <RightMenu>
-        <template #right-panel>
-            <QCard
-                class="q-pa-md q-mb-md q-ma-md color-vn-text"
-                bordered
-                flat
-                style="border-color: black"
+    <QDrawer side="right" :width="270" v-model="stateStore.rightDrawer">
+        <QCard
+            class="q-pa-md q-mb-md q-ma-md color-vn-text"
+            bordered
+            flat
+            style="border-color: black"
+        >
+            <QCardSection horizontal>
+                <span class="text-weight-bold text-subtitle1 text-center full-width">
+                    {{ t('basicData.total') }}
+                </span>
+            </QCardSection>
+            <QCardSection class="column items-center" horizontal>
+                <span>
+                    {{ t('basicData.price') }}:
+                    {{ toCurrency(totalPrice) }}
+                </span>
+            </QCardSection>
+            <QCardSection class="column items-center" horizontal>
+                <span>
+                    {{ t('basicData.newPrice') }}: {{ toCurrency(totalNewPrice) }}
+                </span>
+            </QCardSection>
+            <QCardSection class="column items-center" horizontal>
+                <span>
+                    {{ t('basicData.difference') }}: {{ toCurrency(totalDifference) }}
+                </span>
+            </QCardSection>
+        </QCard>
+        <QCard
+            v-if="totalDifference"
+            class="q-pa-md q-mb-md q-ma-md color-vn-text"
+            bordered
+            flat
+            style="border-color: black"
+        >
+            <QCardSection horizontal>
+                <span class="text-weight-bold text-subtitle1 text-center full-width">
+                    {{ t('basicData.chargeDifference') }}
+                </span>
+            </QCardSection>
+            <QCardSection
+                v-for="(action, index) in ticketUpdateActions"
+                :key="index"
+                horizontal
             >
-                <QCardSection horizontal>
-                    <span class="text-weight-bold text-subtitle1 text-center full-width">
-                        {{ t('basicData.total') }}
-                    </span>
-                </QCardSection>
-                <QCardSection class="column items-center" horizontal>
-                    <span>
-                        {{ t('basicData.price') }}:
-                        {{ toCurrency(totalPrice) }}
-                    </span>
-                </QCardSection>
-                <QCardSection class="column items-center" horizontal>
-                    <span>
-                        {{ t('basicData.newPrice') }}: {{ toCurrency(totalNewPrice) }}
-                    </span>
-                </QCardSection>
-                <QCardSection class="column items-center" horizontal>
-                    <span>
-                        {{ t('basicData.difference') }}: {{ toCurrency(totalDifference) }}
-                    </span>
-                </QCardSection>
-            </QCard>
-            <QCard
-                v-if="totalDifference"
-                class="q-pa-md q-mb-md q-ma-md color-vn-text"
-                bordered
-                flat
-                style="border-color: black"
-            >
-                <QCardSection horizontal>
-                    <span class="text-weight-bold text-subtitle1 text-center full-width">
-                        {{ t('basicData.chargeDifference') }}
-                    </span>
-                </QCardSection>
-                <QCardSection
-                    v-for="(action, index) in ticketUpdateActions"
-                    :key="index"
-                    horizontal
-                >
-                    <QRadio
-                        v-model="_ticketData.option"
-                        :val="action.code"
-                        :label="action.description"
-                        dense
-                    />
-                </QCardSection>
-            </QCard>
-            <QCard
-                v-if="haveNegatives"
-                class="q-pa-md q-mb-md q-ma-md color-vn-text"
-                bordered
-                flat
-                style="border-color: black"
-            >
-                <QCardSection horizontal class="flex row items-center">
-                    <QCheckbox
-                        :label="t('basicData.withoutNegatives')"
-                        v-model="_ticketData.withoutNegatives"
-                        :toggle-indeterminate="false"
-                    />
-                    <QIcon name="info" size="xs" class="q-ml-sm">
-                        <QTooltip max-width="350px">
-                            {{ t('basicData.withoutNegativesInfo') }}
-                        </QTooltip>
-                    </QIcon>
-                </QCardSection>
-            </QCard>
-        </template>
-    </RightMenu>
+                <QRadio
+                    v-model="_ticketData.option"
+                    :val="action.code"
+                    :label="action.description"
+                    dense
+                />
+            </QCardSection>
+        </QCard>
+        <QCard
+            v-if="haveNegatives"
+            class="q-pa-md q-mb-md q-ma-md color-vn-text"
+            bordered
+            flat
+            style="border-color: black"
+        >
+            <QCardSection horizontal class="flex row items-center">
+                <QCheckbox
+                    :label="t('basicData.withoutNegatives')"
+                    v-model="_ticketData.withoutNegatives"
+                    :toggle-indeterminate="false"
+                />
+                <QIcon name="info" size="xs" class="q-ml-sm">
+                    <QTooltip max-width="350px">
+                        {{ t('basicData.withoutNegativesInfo') }}
+                    </QTooltip>
+                </QIcon>
+            </QCardSection>
+        </QCard>
+    </QDrawer>
     <QTable
         :visible-columns="showMovablecolumn"
         :rows="rows"
diff --git a/src/pages/Ticket/Card/TicketComponents.vue b/src/pages/Ticket/Card/TicketComponents.vue
index c008f8314..96462b8a6 100644
--- a/src/pages/Ticket/Card/TicketComponents.vue
+++ b/src/pages/Ticket/Card/TicketComponents.vue
@@ -5,15 +5,16 @@ import { useRoute } from 'vue-router';
 
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 import FetchedTags from 'components/ui/FetchedTags.vue';
-import RightMenu from 'src/components/common/RightMenu.vue';
 import FetchData from 'components/FetchData.vue';
 import ZoneDescriptorProxy from 'src/pages/Zone/Card/ZoneDescriptorProxy.vue';
+import VnImg from 'src/components/ui/VnImg.vue';
 
 import { useStateStore } from 'stores/useStateStore';
 import { dashIfEmpty } from 'src/filters';
 import { useArrayData } from 'composables/useArrayData';
 import { toCurrency } from 'filters/index';
 import axios from 'axios';
+import VnTable from 'src/components/VnTable/VnTable.vue';
 
 const route = useRoute();
 const stateStore = useStateStore();
@@ -75,32 +76,39 @@ const columns = computed(() => [
         name: 'item',
         align: 'left',
     },
+    {
+        align: 'left',
+        label: t('lines.image'),
+        name: 'image',
+        columnField: {
+            component: VnImg,
+            attrs: (id) => {
+                return {
+                    id,
+                    width: '50px',
+                };
+            },
+        },
+        columnFilter: false,
+    },
     {
         label: t('ticketComponents.description'),
         name: 'description',
         align: 'left',
+        columnClass: 'expand',
     },
     {
         label: t('ticketComponents.quantity'),
         name: 'quantity',
         field: 'quantity',
         align: 'left',
-        format: (val) => dashIfEmpty(val),
+        format: (row) => dashIfEmpty(row.quantity),
     },
     {
         label: t('ticketComponents.serie'),
         name: 'serie',
         align: 'left',
-    },
-    {
-        label: t('ticketComponents.components'),
-        name: 'components',
-        align: 'left',
-    },
-    {
-        label: t('ticketComponents.import'),
-        name: 'import',
-        align: 'left',
+        format: (row) => dashIfEmpty(row.serie),
     },
     {
         label: t('ticketComponents.total'),
@@ -174,181 +182,166 @@ onUnmounted(() => (stateStore.rightDrawer = false));
         @on-fetch="(data) => (components = data)"
         auto-load
     />
-    <RightMenu>
-        <template #right-panel>
-            <QCard
-                class="q-pa-sm color-vn-text"
-                bordered
-                flat
-                style="border-color: black"
+    <QDrawer side="right" :width="270" v-model="stateStore.rightDrawer">
+        <QCard class="q-pa-sm color-vn-text" bordered flat style="border-color: black">
+            <QCardSection horizontal>
+                <span class="text-weight-bold text-subtitle1 text-center full-width">
+                    {{ t('ticketComponents.total') }}
+                </span>
+            </QCardSection>
+            <QCardSection horizontal>
+                <span class="q-mr-xs color-vn-label"
+                    >{{ t('ticketComponents.baseToCommission') }}:
+                </span>
+                <span>{{ toCurrency(getBase) }}</span>
+            </QCardSection>
+            <QCardSection horizontal>
+                <span class="q-mr-xs color-vn-label"
+                    >{{ t('ticketComponents.totalWithoutVat') }}:
+                </span>
+                <span>{{ toCurrency(getTotal) }}</span>
+            </QCardSection>
+        </QCard>
+        <QCard class="q-pa-sm color-vn-text" bordered flat style="border-color: black">
+            <QCardSection horizontal>
+                <span class="text-weight-bold text-subtitle1 text-center full-width">
+                    {{ t('ticketComponents.components') }}
+                </span>
+            </QCardSection>
+            <QCardSection
+                v-for="(component, index) in componentsList"
+                :key="index"
+                horizontal
             >
-                <QCardSection horizontal>
-                    <span class="text-weight-bold text-subtitle1 text-center full-width">
-                        {{ t('ticketComponents.total') }}
-                    </span>
-                </QCardSection>
-                <QCardSection horizontal>
-                    <span class="q-mr-xs color-vn-label"
-                        >{{ t('ticketComponents.baseToCommission') }}:
-                    </span>
-                    <span>{{ toCurrency(getBase) }}</span>
-                </QCardSection>
-                <QCardSection horizontal>
-                    <span class="q-mr-xs color-vn-label"
-                        >{{ t('ticketComponents.totalWithoutVat') }}:
-                    </span>
-                    <span>{{ toCurrency(getTotal) }}</span>
-                </QCardSection>
-            </QCard>
-            <QCard
-                class="q-pa-sm color-vn-text"
-                bordered
-                flat
-                style="border-color: black"
-            >
-                <QCardSection horizontal>
-                    <span class="text-weight-bold text-subtitle1 text-center full-width">
-                        {{ t('ticketComponents.components') }}
-                    </span>
-                </QCardSection>
-                <QCardSection
-                    v-for="(component, index) in componentsList"
-                    :key="index"
-                    horizontal
-                >
-                    <span v-if="component.name" class="q-mr-xs color-vn-label">
-                        {{ component.name }}:
-                    </span>
-                    <span v-if="component.value">{{
-                        toCurrency(component.value, 'EUR', 3)
-                    }}</span>
-                </QCardSection>
-            </QCard>
-            <QCard
-                class="q-pa-sm color-vn-text"
-                bordered
-                flat
-                style="border-color: black"
-            >
-                <QCardSection horizontal>
-                    <span class="text-weight-bold text-subtitle1 text-center full-width">
-                        {{ t('ticketComponents.zoneBreakdown') }}
-                    </span>
-                </QCardSection>
-                <QCardSection horizontal>
-                    <span class="q-mr-xs color-vn-label">
-                        {{ t('ticketComponents.price') }}:
-                    </span>
-                    <span>{{ toCurrency(ticketData?.zonePrice, 'EUR', 2) }}</span>
-                </QCardSection>
-                <QCardSection horizontal>
-                    <span class="q-mr-xs color-vn-label">
-                        {{ t('ticketComponents.bonus') }}:
-                    </span>
-                    <span>{{ toCurrency(ticketData?.zoneBonus, 'EUR', 2) }}</span>
-                </QCardSection>
-                <QCardSection horizontal>
-                    <span class="q-mr-xs color-vn-label">
-                        {{ t('ticketComponents.zone') }}:
-                    </span>
-                    <span class="link">
-                        {{ dashIfEmpty(ticketData?.zone?.name) }}
-                        <ZoneDescriptorProxy :id="ticketData?.zone?.id" />
-                    </span>
-                </QCardSection>
-                <QCardSection v-if="ticketData?.zone?.isVolumetric" horizontal>
-                    <span class="q-mr-xs color-vn-label">
-                        {{ t('ticketComponents.volume') }}:
-                    </span>
-                    <span>{{ ticketVolume }}</span>
-                </QCardSection>
-                <QCardSection horizontal>
-                    <span class="q-mr-xs color-vn-label">
-                        {{ t('ticketComponents.packages') }}:
-                    </span>
-                    <span>{{ dashIfEmpty(ticketData?.packages) }}</span>
-                </QCardSection>
-            </QCard>
-            <QCard
-                class="q-pa-sm color-vn-text"
-                bordered
-                flat
-                style="border-color: black"
-            >
-                <QCardSection horizontal>
-                    <span class="text-weight-bold text-subtitle1 text-center full-width">
-                        {{ t('ticketComponents.theoricalCost') }}
-                    </span>
-                </QCardSection>
-                <QCardSection horizontal>
-                    <span class="q-mr-xs color-vn-label">
-                        {{ t('ticketComponents.totalPrice') }}:
-                    </span>
-                    <span>{{ toCurrency(theoricalCost, 'EUR', 2) }}</span>
-                </QCardSection>
-            </QCard>
-        </template>
-    </RightMenu>
-    <QTable
-        :rows="components"
+                <span v-if="component.name" class="q-mr-xs color-vn-label">
+                    {{ component.name }}:
+                </span>
+                <span v-if="component.value">{{
+                    toCurrency(component.value, 'EUR', 3)
+                }}</span>
+            </QCardSection>
+        </QCard>
+        <QCard class="q-pa-sm color-vn-text" bordered flat style="border-color: black">
+            <QCardSection horizontal>
+                <span class="text-weight-bold text-subtitle1 text-center full-width">
+                    {{ t('ticketComponents.zoneBreakdown') }}
+                </span>
+            </QCardSection>
+            <QCardSection horizontal>
+                <span class="q-mr-xs color-vn-label">
+                    {{ t('ticketComponents.price') }}:
+                </span>
+                <span>{{ toCurrency(ticketData?.zonePrice, 'EUR', 2) }}</span>
+            </QCardSection>
+            <QCardSection horizontal>
+                <span class="q-mr-xs color-vn-label">
+                    {{ t('ticketComponents.bonus') }}:
+                </span>
+                <span>{{ toCurrency(ticketData?.zoneBonus, 'EUR', 2) }}</span>
+            </QCardSection>
+            <QCardSection horizontal>
+                <span class="q-mr-xs color-vn-label">
+                    {{ t('ticketComponents.zone') }}:
+                </span>
+                <span class="link">
+                    {{ dashIfEmpty(ticketData?.zone?.name) }}
+                    <ZoneDescriptorProxy :id="ticketData?.zone?.id" />
+                </span>
+            </QCardSection>
+            <QCardSection v-if="ticketData?.zone?.isVolumetric" horizontal>
+                <span class="q-mr-xs color-vn-label">
+                    {{ t('ticketComponents.volume') }}:
+                </span>
+                <span>{{ ticketVolume }}</span>
+            </QCardSection>
+            <QCardSection horizontal>
+                <span class="q-mr-xs color-vn-label">
+                    {{ t('ticketComponents.packages') }}:
+                </span>
+                <span>{{ dashIfEmpty(ticketData?.packages) }}</span>
+            </QCardSection>
+        </QCard>
+        <QCard class="q-pa-sm color-vn-text" bordered flat style="border-color: black">
+            <QCardSection horizontal>
+                <span class="text-weight-bold text-subtitle1 text-center full-width">
+                    {{ t('ticketComponents.theoricalCost') }}
+                </span>
+            </QCardSection>
+            <QCardSection horizontal>
+                <span class="q-mr-xs color-vn-label">
+                    {{ t('ticketComponents.totalPrice') }}:
+                </span>
+                <span>{{ toCurrency(theoricalCost, 'EUR', 2) }}</span>
+            </QCardSection>
+        </QCard>
+    </QDrawer>
+    <VnTable
+        ref="tableRef"
+        data-key="TicketComponents"
+        url="Sales"
+        :user-filter="salesFilter"
         :columns="columns"
-        row-key="id"
-        :pagination="{ rowsPerPage: 0 }"
-        class="full-width q-mt-md"
-        :no-data-label="t('globals.noResults')"
+        :right-search="false"
+        auto-load
+        :disable-option="{ card: true }"
+        :column-search="false"
     >
-        <template #body-cell-item="{ row }">
-            <QTd @click.stop class="link">
-                <QBtn flat>
-                    <span>{{ row.itemFk }}</span>
-                    <ItemDescriptorProxy :id="row.itemFk" />
-                </QBtn>
-            </QTd>
+        <template #column-item="{ row }">
+            <span @click.stop flat class="link">
+                {{ row.itemFk }}
+                <ItemDescriptorProxy :id="row.itemFk" />
+            </span>
         </template>
-        <template #body-cell-description="{ row }">
-            <QTd>
-                <div class="column">
-                    <span>{{ row.item.name }}</span>
-                    <span class="color-vn-label">{{ row.item.subName }}</span>
-                    <FetchedTags :item="row.item" />
-                </div>
-            </QTd>
+        <template #column-image="{ row }">
+            <div class="image-wrapper">
+                <VnImg :id="parseInt(row?.item?.id)" class="rounded" />
+            </div>
         </template>
-        <template #body-cell-serie="{ row }">
-            <QTd>
-                <div class="column">
-                    <span v-for="(saleComponent, index) in row.components" :key="index">
-                        {{ saleComponent.component?.componentType?.name }}
-                    </span>
-                </div>
-            </QTd>
+        <template #column-description="{ row }">
+            <div class="column">
+                <span>{{ row.item.name }}</span>
+                <span class="color-vn-label">{{ row.item.subName }}</span>
+                <FetchedTags :item="row.item" />
+            </div>
         </template>
-        <template #body-cell-components="{ row }">
-            <QTd>
-                <div class="column">
-                    <span v-for="(saleComponent, index) in row.components" :key="index">
-                        {{ saleComponent.component?.name }}
-                    </span>
-                </div>
-            </QTd>
+        <template #column-serie="{ row }">
+            <div class="column">
+                <span v-for="(saleComponent, index) in row.components" :key="index">
+                    {{ saleComponent.component?.componentType?.name }}
+                </span>
+            </div>
         </template>
-        <template #body-cell-import="{ row }">
-            <QTd>
-                <div class="column text-right">
-                    <span v-for="(saleComponent, index) in row.components" :key="index">
+        <!-- <template #column-components="{ row }">
+            <div class="column">
+                <span v-for="(saleComponent, index) in row.components" :key="index">
+                    {{ saleComponent.component?.name }}
+                </span>
+            </div>
+        </template> -->
+        <!-- <template #column-import="{ row }">
+            <div class="column text-left">
+                <span v-for="(saleComponent, index) in row.components" :key="index">
+                    {{ toCurrency(saleComponent.value, 'EUR', 3) }}
+                </span>
+            </div>
+        </template> -->
+        <template #column-total="{ row }">
+            <div class="column">
+                <span v-for="(saleComponent, index) in row.components" :key="index">
+                    {{ toCurrency(saleComponent.value * row.quantity, 'EUR', 3) }}
+                    <QTooltip>
+                        {{ saleComponent.component?.name }}:
                         {{ toCurrency(saleComponent.value, 'EUR', 3) }}
-                    </span>
-                </div>
-            </QTd>
+                    </QTooltip>
+                </span>
+            </div>
         </template>
-        <template #body-cell-total="{ row }">
-            <QTd>
-                <div class="column text-right">
-                    <span v-for="(saleComponent, index) in row.components" :key="index">
-                        {{ toCurrency(saleComponent.value * row.quantity, 'EUR', 3) }}
-                    </span>
-                </div>
-            </QTd>
-        </template>
-    </QTable>
+    </VnTable>
 </template>
+
+<style lang="scss" scoped>
+.image-wrapper {
+    width: 40px;
+    height: 40px;
+}
+</style>
diff --git a/src/pages/Ticket/Card/TicketPurchaseRequest.vue b/src/pages/Ticket/Card/TicketPurchaseRequest.vue
index 3efdcbef8..d0af9efd0 100644
--- a/src/pages/Ticket/Card/TicketPurchaseRequest.vue
+++ b/src/pages/Ticket/Card/TicketPurchaseRequest.vue
@@ -14,8 +14,11 @@ import VnSelect from 'src/components/common/VnSelect.vue';
 import FetchData from 'src/components/FetchData.vue';
 import { useVnConfirm } from 'composables/useVnConfirm';
 import useNotify from 'src/composables/useNotify.js';
+import { onMounted } from 'vue';
+import { useStateStore } from 'src/stores/useStateStore';
 
 const route = useRoute();
+const stateStore = useStateStore();
 const { t } = useI18n();
 const tableRef = ref();
 const attendersOptions = ref([]);
@@ -84,14 +87,12 @@ const columns = computed(() => [
             condition: () => true,
         },
         isId: true,
-        hidden: true,
     },
     {
         align: 'left',
         label: t('purchaseRequest.description'),
         name: 'description',
         columnClass: 'expand',
-        hidden: true,
     },
     {
         align: 'left',
@@ -99,7 +100,6 @@ const columns = computed(() => [
         name: 'created',
         format: (row) => toDateFormat(row.created),
         cardVisible: true,
-        hidden: true,
     },
     {
         align: 'left',
@@ -107,7 +107,6 @@ const columns = computed(() => [
         name: 'requesterFk',
         cardVisible: true,
         format: (row) => dashIfEmpty(row.requester?.user?.nickname),
-        hidden: true,
     },
     {
         align: 'left',
@@ -115,33 +114,28 @@ const columns = computed(() => [
         name: 'attenderFk',
         cardVisible: true,
         format: (row) => dashIfEmpty(row.atender?.user?.nickname),
-        hidden: true,
     },
     {
         align: 'left',
         label: t('purchaseRequest.quantity'),
         name: 'quantity',
-        hidden: true,
     },
     {
         align: 'left',
         label: t('purchaseRequest.price'),
         name: 'price',
-        hidden: true,
     },
     {
         align: 'left',
         label: t('purchaseRequest.saleFk'),
         name: 'saleFk',
         cardVisible: true,
-        hidden: true,
     },
     {
         align: 'left',
         label: t('purchaseRequest.state'),
         name: 'isOk',
         cardVisible: true,
-        isHidden: true,
     },
     {
         align: 'right',
@@ -186,6 +180,8 @@ async function removeLine(id) {
         console.error('Error ', err);
     }
 }
+
+onMounted(() => (stateStore.rightDrawer = false));
 </script>
 
 <template>
@@ -212,6 +208,7 @@ async function removeLine(id) {
         :columns="columns"
         :is-editable="true"
         :right-search="false"
+        :column-search="false"
         auto-load
     >
         <template #column-description="{ row }">
diff --git a/src/pages/Ticket/Card/TicketSale.vue b/src/pages/Ticket/Card/TicketSale.vue
index 3ce90b85e..2d51ed8ca 100644
--- a/src/pages/Ticket/Card/TicketSale.vue
+++ b/src/pages/Ticket/Card/TicketSale.vue
@@ -63,7 +63,6 @@ const columns = computed(() => [
     {
         align: 'left',
         name: 'statusIcons',
-        hidden: true,
     },
     {
         align: 'center',
@@ -85,20 +84,17 @@ const columns = computed(() => [
         label: t('ticketSale.visible'),
         name: 'visible',
         format: (row, dashIfEmpty) => dashIfEmpty(row.visible),
-        hidden: true,
     },
     {
         align: 'left',
         label: t('ticketSale.available'),
         name: 'available',
         format: (row, dashIfEmpty) => dashIfEmpty(row.available),
-        hidden: true,
     },
     {
         align: 'left',
         label: t('ticketSale.id'),
         name: 'itemFk',
-        hidden: true,
     },
     {
         align: 'left',
@@ -106,7 +102,6 @@ const columns = computed(() => [
         name: 'quantity',
         cardVisible: true,
         format: (row) => toCurrency(row.quantity),
-        hidden: true,
     },
     {
         align: 'left',
@@ -115,7 +110,6 @@ const columns = computed(() => [
         format: (row) => row?.item?.name,
         columnClass: 'expand',
         cardVisible: true,
-        hidden: true,
     },
     {
         align: 'left',
@@ -123,7 +117,6 @@ const columns = computed(() => [
         name: 'price',
         cardVisible: true,
         format: (row) => toCurrency(row.price),
-        hidden: true,
     },
     {
         align: 'left',
@@ -131,14 +124,12 @@ const columns = computed(() => [
         name: 'discount',
         cardVisible: true,
         format: (row) => toPercentage(row.discount),
-        hidden: true,
     },
     {
         align: 'left',
         label: t('ticketSale.amount'),
         name: 'amount',
         format: (row) => parseInt(row.amount * row.quantity),
-        hidden: true,
     },
     {
         align: 'left',
@@ -146,7 +137,6 @@ const columns = computed(() => [
         name: 'itemPackingTypeFk',
         cardVisible: true,
         format: (row, dashIfEmpty) => dashIfEmpty(row?.item?.itemPackingTypeFk),
-        hidden: true,
     },
     {
         align: 'right',
@@ -578,52 +568,51 @@ async function save(item) {
             selection: 'multiple',
         }"
         :right-search="false"
+        :column-search="false"
         auto-load
     >
         <template #column-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('ticketSale.claim') }}:
-                            {{ row.claim?.claimFk }}
-                        </QTooltip>
-                    </QIcon>
-                </router-link>
-                <QIcon v-if="row.visible < 0" color="primary" name="warning" size="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('ticketSale.visible') }}: {{ row.visible || 0 }}
+                        {{ t('ticketSale.claim') }}:
+                        {{ row.claim?.claimFk }}
                     </QTooltip>
                 </QIcon>
-                <QIcon v-if="row.reserved" color="primary" name="vn:reserva" size="xs">
-                    <QTooltip>
-                        {{ t('ticketSale.reserved') }}
-                    </QTooltip>
-                </QIcon>
-                <QIcon
-                    v-if="row.itemShortage"
-                    color="primary"
-                    name="vn:unavailable"
-                    size="xs"
-                >
-                    <QTooltip>
-                        {{ t('ticketSale.noVisible') }}
-                    </QTooltip>
-                </QIcon>
-                <QIcon
-                    v-if="row.hasComponentLack"
-                    color="primary"
-                    name="vn:components"
-                    size="xs"
-                >
-                    <QTooltip>
-                        {{ t('ticketSale.hasComponentLack') }}
-                    </QTooltip>
-                </QIcon>
-            </QTd>
+            </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('ticketSale.reserved') }}
+                </QTooltip>
+            </QIcon>
+            <QIcon
+                v-if="row.itemShortage"
+                color="primary"
+                name="vn:unavailable"
+                size="xs"
+            >
+                <QTooltip>
+                    {{ t('ticketSale.noVisible') }}
+                </QTooltip>
+            </QIcon>
+            <QIcon
+                v-if="row.hasComponentLack"
+                color="primary"
+                name="vn:components"
+                size="xs"
+            >
+                <QTooltip>
+                    {{ t('ticketSale.hasComponentLack') }}
+                </QTooltip>
+            </QIcon>
         </template>
         <template #column-image="{ row }">
             <div class="image-wrapper">
@@ -677,59 +666,53 @@ async function save(item) {
             </VnSelect>
         </template>
         <template #column-quantity="{ row }">
-            <QTd @click.stop>
-                <VnInput
-                    v-if="isTicketEditable"
-                    v-model.number="row.quantity"
-                    @keyup.enter="changeQuantity(row)"
-                    @blur="changeQuantity(row)"
-                    @focus="edit.oldQuantity = row.quantity"
-                />
-                <span v-else>{{ row.quantity }}</span>
-            </QTd>
+            <VnInput
+                v-if="isTicketEditable"
+                v-model.number="row.quantity"
+                @keyup.enter="changeQuantity(row)"
+                @blur="changeQuantity(row)"
+                @focus="edit.oldQuantity = row.quantity"
+            />
+            <span v-else>{{ row.quantity }}</span>
         </template>
         <template #column-price="{ row }">
-            <QTd>
-                <template v-if="isTicketEditable && row.id">
-                    <QBtn flat class="link" dense @click="onOpenEditPricePopover(row)">
-                        {{ toCurrency(row.price) }}
-                    </QBtn>
-                    <TicketEditManaProxy
-                        ref="editPriceProxyRef"
-                        :mana="mana"
-                        :new-price="getNewPrice"
-                        @save="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 v-if="isTicketEditable && row.id">
+                <QBtn flat class="link" dense @click="onOpenEditPricePopover(row)">
+                    {{ toCurrency(row.price) }}
+                </QBtn>
+                <TicketEditManaProxy
+                    ref="editPriceProxyRef"
+                    :mana="mana"
+                    :new-price="getNewPrice"
+                    @save="updatePrice(row)"
+                >
+                    <VnInput
+                        v-model.number="edit.price"
+                        :label="t('ticketSale.price')"
+                        type="number"
+                    />
+                </TicketEditManaProxy>
+            </template>
+            <span v-else>{{ toCurrency(row.price) }}</span>
         </template>
         <template #column-discount="{ row }">
-            <QTd>
-                <template v-if="!isLocked && row.id">
-                    <QBtn flat class="link" dense @click="onOpenEditDiscountPopover(row)">
-                        {{ toPercentage(row.discount / 100) }}
-                    </QBtn>
-                    <TicketEditManaProxy
-                        :mana="mana"
-                        :new-price="getNewPrice"
-                        @save="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 v-if="!isLocked && row.id">
+                <QBtn flat class="link" dense @click="onOpenEditDiscountPopover(row)">
+                    {{ toPercentage(row.discount / 100) }}
+                </QBtn>
+                <TicketEditManaProxy
+                    :mana="mana"
+                    :new-price="getNewPrice"
+                    @save="changeDiscount(row)"
+                >
+                    <VnInput
+                        v-model.number="edit.discount"
+                        :label="t('ticketSale.discount')"
+                        type="number"
+                    />
+                </TicketEditManaProxy>
+            </template>
+            <span v-else>{{ toPercentage(row.discount / 100) }}</span>
         </template>
         <template #column-amount="{ row }">
             {{ toCurrency(row.quantity * row.price) }}
diff --git a/src/pages/Ticket/Card/TicketVolume.vue b/src/pages/Ticket/Card/TicketVolume.vue
index 00fdad006..2d40ca424 100644
--- a/src/pages/Ticket/Card/TicketVolume.vue
+++ b/src/pages/Ticket/Card/TicketVolume.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, onUnmounted, watch, nextTick } from 'vue';
+import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
@@ -93,6 +93,8 @@ const applyVolumes = async (salesData) => {
     }
 };
 
+onMounted(() => (stateStore.rightDrawer = false));
+
 onUnmounted(() => (stateStore.rightDrawer = false));
 </script>