feat: refs #7553 ticket component to vntable and fixed minor errors

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,8 +144,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
         @on-fetch="(data) => (ticketUpdateActions = data)"
         auto-load
     />
-    <RightMenu>
-        <template #right-panel>
+    <QDrawer side="right" :width="270" v-model="stateStore.rightDrawer">
         <QCard
             class="q-pa-md q-mb-md q-ma-md color-vn-text"
             bordered
@@ -220,8 +218,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 </QIcon>
             </QCardSection>
         </QCard>
-        </template>
-    </RightMenu>
+    </QDrawer>
     <QTable
         :visible-columns="showMovablecolumn"
         :rows="rows"

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,14 +182,8 @@ 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') }}
@@ -200,12 +202,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 <span>{{ toCurrency(getTotal) }}</span>
             </QCardSection>
         </QCard>
-            <QCard
-                class="q-pa-sm color-vn-text"
-                bordered
-                flat
-                style="border-color: black"
-            >
+        <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') }}
@@ -224,12 +221,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 }}</span>
             </QCardSection>
         </QCard>
-            <QCard
-                class="q-pa-sm color-vn-text"
-                bordered
-                flat
-                style="border-color: black"
-            >
+        <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') }}
@@ -269,12 +261,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 <span>{{ dashIfEmpty(ticketData?.packages) }}</span>
             </QCardSection>
         </QCard>
-            <QCard
-                class="q-pa-sm color-vn-text"
-                bordered
-                flat
-                style="border-color: black"
-            >
+        <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') }}
@@ -287,68 +274,74 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 <span>{{ toCurrency(theoricalCost, 'EUR', 2) }}</span>
             </QCardSection>
         </QCard>
-        </template>
-    </RightMenu>
-    <QTable
-        :rows="components"
+    </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>
+        <template #column-item="{ row }">
+            <span @click.stop flat class="link">
+                {{ row.itemFk }}
                 <ItemDescriptorProxy :id="row.itemFk" />
-                </QBtn>
-            </QTd>
+            </span>
         </template>
-        <template #body-cell-description="{ row }">
-            <QTd>
+        <template #column-image="{ row }">
+            <div class="image-wrapper">
+                <VnImg :id="parseInt(row?.item?.id)" class="rounded" />
+            </div>
+        </template>
+        <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>
-            </QTd>
         </template>
-        <template #body-cell-serie="{ row }">
-            <QTd>
+        <template #column-serie="{ row }">
             <div class="column">
                 <span v-for="(saleComponent, index) in row.components" :key="index">
                     {{ saleComponent.component?.componentType?.name }}
                 </span>
             </div>
-            </QTd>
         </template>
-        <template #body-cell-components="{ row }">
-            <QTd>
+        <!-- <template #column-components="{ row }">
             <div class="column">
                 <span v-for="(saleComponent, index) in row.components" :key="index">
                     {{ saleComponent.component?.name }}
                 </span>
             </div>
-            </QTd>
-        </template>
-        <template #body-cell-import="{ row }">
-            <QTd>
-                <div class="column text-right">
+        </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>
-            </QTd>
-        </template>
-        <template #body-cell-total="{ row }">
-            <QTd>
-                <div class="column text-right">
+        </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) }}
+                    </QTooltip>
                 </span>
             </div>
-            </QTd>
         </template>
-    </QTable>
+    </VnTable>
 </template>
+
+<style lang="scss" scoped>
+.image-wrapper {
+    width: 40px;
+    height: 40px;
+}
+</style>

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 }">

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,10 +568,10 @@ 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 } }"
@@ -623,7 +613,6 @@ async function save(item) {
                     {{ t('ticketSale.hasComponentLack') }}
                 </QTooltip>
             </QIcon>
-            </QTd>
         </template>
         <template #column-image="{ row }">
             <div class="image-wrapper">
@@ -677,7 +666,6 @@ async function save(item) {
             </VnSelect>
         </template>
         <template #column-quantity="{ row }">
-            <QTd @click.stop>
             <VnInput
                 v-if="isTicketEditable"
                 v-model.number="row.quantity"
@@ -686,10 +674,8 @@ async function save(item) {
                 @focus="edit.oldQuantity = row.quantity"
             />
             <span v-else>{{ row.quantity }}</span>
-            </QTd>
         </template>
         <template #column-price="{ row }">
-            <QTd>
             <template v-if="isTicketEditable && row.id">
                 <QBtn flat class="link" dense @click="onOpenEditPricePopover(row)">
                     {{ toCurrency(row.price) }}
@@ -708,10 +694,8 @@ async function save(item) {
                 </TicketEditManaProxy>
             </template>
             <span v-else>{{ toCurrency(row.price) }}</span>
-            </QTd>
         </template>
         <template #column-discount="{ row }">
-            <QTd>
             <template v-if="!isLocked && row.id">
                 <QBtn flat class="link" dense @click="onOpenEditDiscountPopover(row)">
                     {{ toPercentage(row.discount / 100) }}
@@ -729,7 +713,6 @@ async function save(item) {
                 </TicketEditManaProxy>
             </template>
             <span v-else>{{ toPercentage(row.discount / 100) }}</span>
-            </QTd>
         </template>
         <template #column-amount="{ row }">
             {{ toCurrency(row.quantity * row.price) }}

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>