src/pages/Monitor/SalesTicketsTable.vue

@@ -303,7 +303,7 @@ const columns = computed(() => [
             {
                 title: t('salesTicketsTable.goToLines'),
                 icon: 'vn:lines',
-                color: 'priamry',
+                color: 'primary',
                 action: (row) => redirectToSales(row.id),
                 isPrimary: true,
                 attrs: {
@@ -314,7 +314,7 @@ const columns = computed(() => [
             {
                 title: t('salesTicketsTable.preview'),
                 icon: 'preview',
-                color: 'priamry',
+                color: 'primary',
                 action: (row) => viewSummary(row.id, TicketSummary),
                 isPrimary: true,
                 attrs: {

src/pages/Ticket/Card/TicketPurchaseRequest.vue

@@ -1,27 +1,32 @@
 <script setup>
 import { ref, computed, watch, reactive } from 'vue';
+import axios from 'axios';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
-import VnInput from 'src/components/common/VnInput.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
-import CrudModel from 'src/components/CrudModel.vue';
-import TicketCreateRequest from './TicketCreateRequest.vue';
-
 import { dashIfEmpty } from 'src/filters';
 import { toDateFormat } from 'src/filters/date.js';
+import VnTable from 'src/components/VnTable/VnTable.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+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';
 
 const route = useRoute();
 const { t } = useI18n();
-const createTicketRequestDialogRef = ref(null);
+const tableRef = ref();
-const crudModelRef = ref(null);
+const attendersOptions = ref([]);
+const { openConfirmationModal } = useVnConfirm();
+const { notify } = useNotify();
 
 watch(
     () => route.params.id,
     async (val) => {
         crudModelFilter.where.ticketFk = val;
-        crudModelRef.value.reload();
+        tableRef.value.reload();
     }
 );
 
@@ -72,64 +77,90 @@ const crudModelFilter = reactive({
 
 const columns = computed(() => [
     {
+        align: 'left',
         label: t('purchaseRequest.id'),
         name: 'id',
-        field: 'id',
+        chip: {
-        align: 'left',
+            condition: () => true,
-        columnFilter: null,
+        },
+        isId: true,
+        hidden: true,
     },
     {
+        align: 'left',
         label: t('purchaseRequest.description'),
         name: 'description',
-        field: 'description',
+        columnClass: 'expand',
-        align: 'left',
+        hidden: true,
-        format: (val) => dashIfEmpty(val),
     },
     {
+        align: 'left',
         label: t('purchaseRequest.created'),
         name: 'created',
-        field: 'created',
+        format: (row) => toDateFormat(row.created),
-        align: 'left',
+        cardVisible: true,
-        format: (val) => toDateFormat(val),
+        hidden: true,
     },
     {
+        align: 'left',
         label: t('purchaseRequest.requester'),
-        name: 'requester',
+        name: 'requesterFk',
-        align: 'left',
+        cardVisible: true,
-        sortable: true,
+        format: (row) => dashIfEmpty(row.requester?.user?.nickname),
+        hidden: true,
     },
     {
+        align: 'left',
         label: t('purchaseRequest.atender'),
-        name: 'atender',
+        name: 'attenderFk',
-        align: 'left',
+        cardVisible: true,
+        format: (row) => dashIfEmpty(row.atender?.user?.nickname),
+        hidden: true,
     },
     {
+        align: 'left',
         label: t('purchaseRequest.quantity'),
         name: 'quantity',
-        align: 'left',
+        hidden: true,
     },
     {
+        align: 'left',
         label: t('purchaseRequest.price'),
         name: 'price',
-        align: 'left',
+        hidden: true,
     },
     {
+        align: 'left',
         label: t('purchaseRequest.saleFk'),
         name: 'saleFk',
-        align: 'left',
+        cardVisible: true,
+        hidden: true,
     },
     {
+        align: 'left',
         label: t('purchaseRequest.state'),
-        name: 'state',
+        name: 'isOk',
-        field: 'isOk',
+        cardVisible: true,
-        align: 'left',
+        isHidden: true,
-        format: (val) => t(getRequestState(val)),
     },
     {
-        label: '',
+        align: 'right',
-        name: 'actions',
+        name: 'tableActions',
-        align: 'left',
+        actions: [
-        columnFilter: null,
+            {
+                title: t('globals.delete'),
+                icon: 'delete',
+                isPrimary: true,
+                action: (row) =>
+                    openConfirmationModal(
+                        t('You are going to delete this ticket purchase request'),
+                        t(
+                            'This ticket will be removed from ticket purchase requests! Continue anyway?'
+                        ),
+                        () => removeLine(row.id)
+                    ),
+            },
+        ],
     },
 ]);
 
@@ -140,131 +171,114 @@ const getRequestState = (state) => {
         case false:
             return 'Denied';
         case true:
-            return 'Acepted';
+            return 'Accepted';
     }
 };
 
 const isEditable = (isOk) => isOk !== null;
 
-const removeLine = async (row) => crudModelRef.value.remove([row]);
+async function removeLine(id) {
-
+    try {
-const openCreateModal = () => createTicketRequestDialogRef.value.show();
+        await axios.delete(`TicketRequests/${id}`);
+        notify(t('globals.dataSaved'), 'positive');
+        location.reload();
+    } catch (err) {
+        console.error('Error ', err);
+    }
+}
 </script>
 
 <template>
-    <QPage class="column items-center q-pa-md">
+    <FetchData
-        <CrudModel
+        url="TicketRequests/getItemTypeWorker"
-            data-key="PurchaseRequests"
+        :filter="{ fields: ['id', 'nickname'], order: 'nickname ASC' }"
-            url="TicketRequests"
+        auto-load
-            ref="crudModelRef"
+        @on-fetch="(data) => (attendersOptions = data)"
-            :filter="crudModelFilter"
+    />
-            :order="['created ASC']"
+    <VnTable
-            :default-remove="false"
+        ref="tableRef"
-            :default-save="false"
+        data-key="PurchaseRequests"
-            :default-reset="false"
+        url="TicketRequests"
-            :limit="0"
+        :create="{
-            auto-load
+            urlCreate: 'TicketRequests',
-        >
+            title: t('Create request'),
-            <template #body="{ rows }">
+            onDataSaved: ({ id }) => tableRef.reload(id),
-                <QTable
+            formInitialData: {
-                    :rows="rows"
+                ticketFk: route.params.id,
-                    :columns="columns"
+            },
-                    row-key="id"
+        }"
-                    :pagination="{ rowsPerPage: 0 }"
+        save-url="TicketRequests/crud"
-                    class="full-width q-mt-md"
+        :filter="crudModelFilter"
-                    :no-data-label="t('globals.noResults')"
+        :columns="columns"
-                    @row-click="(_, row) => redirectToTicketSummary(row.ticketFk)"
+        :is-editable="true"
-                >
+        :right-search="false"
-                    <template #body-cell-description="{ row }">
+        auto-load
-                        <QTd @click.stop>
+    >
-                            <VnInput
+        <template #column-description="{ row }">
-                                v-model="row.description"
+            <VnInput v-model="row.description" :disable="isEditable(row.isOk)" />
-                                @blur="crudModelRef.saveChanges()"
+        </template>
-                                :disable="isEditable(row.isOk)"
+        <template #column-requesterFk="{ row }">
-                            />
+            <span class="link" @click.stop>
-                        </QTd>
+                {{ row.requester?.user?.nickname }}
-                    </template>
+                <WorkerDescriptorProxy :id="row.requesterFk" />
-                    <template #body-cell-requester="{ row }">
+            </span>
-                        <QTd @click.stop>
+        </template>
-                            <span class="link">
+        <template #column-attenderFk="{ row }">
-                                <QBtn flat>
+            <span class="link" @click.stop>
-                                    {{ row.requester?.user?.nickname }}
+                {{ row.atender?.user?.nickname }}
-                                    <WorkerDescriptorProxy :id="row.requesterFk" />
+                <WorkerDescriptorProxy :id="row.attenderFk" />
-                                </QBtn>
+            </span>
-                            </span>
+        </template>
-                        </QTd>
+        <template #column-quantity="{ row }">
-                    </template>
+            <VnInput v-model="row.quantity" :disable="isEditable(row.isOk)" />
-                    <template #body-cell-atender="{ row }">
+        </template>
-                        <QTd @click.stop>
+        <template #column-price="{ row }">
-                            <span class="link">
+            <span @click.stop>
-                                <QBtn flat>
+                <VnInput v-model="row.price" :disable="isEditable(row.isOk)">
-                                    {{ row.atender?.user?.nickname }}
+                    {{ row.price }}
-                                    <WorkerDescriptorProxy :id="row.attenderFk" />
+                </VnInput>
-                                </QBtn>
+            </span>
-                            </span>
+        </template>
-                        </QTd>
+        <template #column-saleFk="{ row }">
-                    </template>
+            <QTd style="width: 3%">
-                    <template #body-cell-quantity="{ row }">
+                <span class="link" @click.stop>
-                        <QTd @click.stop>
+                    {{ dashIfEmpty(row.sale?.itemFk) }}
-                            <VnInput
+                    <ItemDescriptorProxy :id="row.sale?.itemFk" /> </span
-                                v-model="row.quantity"
+            ></QTd>
-                                @blur="crudModelRef.saveChanges()"
+        </template>
-                                :disable="isEditable(row.isOk)"
+        <template #column-isOk="{ row }">
-                            />
+            {{ t(getRequestState(row.isOk)) }}
-                        </QTd>
+        </template>
-                    </template>
+
-                    <template #body-cell-price="{ row }">
+        <template #more-create-dialog="{ data }">
-                        <QTd @click.stop>
+            <VnInput
-                            <VnInput
+                v-model="data.description"
-                                v-model="row.price"
+                :label="t('purchaseRequest.description')"
-                                @blur="crudModelRef.saveChanges()"
+            />
-                                :disable="isEditable(row.isOk)"
+            <VnSelect
-                            />
+                :label="t('purchaseRequest.atender')"
-                        </QTd>
+                v-model="data.attenderFk"
-                    </template>
+                :options="attendersOptions"
-                    <template #body-cell-saleFk="{ row }">
+                hide-selected
-                        <QTd @click.stop>
+                option-label="nickname"
-                            <span class="link">
+                option-value="id"
-                                <QBtn v-if="row.saleFk" flat>
+            />
-                                    {{ row.sale.itemFk }}
+            <VnInput
-                                    <ItemDescriptorProxy :id="row.sale.itemFk" />
+                v-model="data.quantity"
-                                </QBtn>
+                :label="t('purchaseRequest.quantity')"
-                            </span>
+                type="number"
-                        </QTd>
+                min="1"
-                    </template>
+            />
-                    <template #body-cell-actions="{ row }">
+            <VnInput
-                        <QTd>
+                v-model="data.price"
-                            <QIcon
+                :label="t('purchaseRequest.price')"
-                                @click.stop="removeLine(row)"
+                type="number"
-                                class="q-ml-sm cursor-pointer"
+                min="0"
-                                color="primary"
+            />
-                                name="delete"
+        </template>
-                                size="sm"
+    </VnTable>
-                            >
-                                <QTooltip>
-                                    {{ t('globals.delete') }}
-                                </QTooltip>
-                            </QIcon>
-                        </QTd>
-                    </template>
-                </QTable>
-            </template>
-        </CrudModel>
-        <QDialog
-            ref="createTicketRequestDialogRef"
-            transition-show="scale"
-            transition-hide="scale"
-        >
-            <TicketCreateRequest @on-request-created="crudModelRef.reload()" />
-        </QDialog>
-        <QPageSticky :offset="[20, 20]">
-            <QBtn @click="openCreateModal()" color="primary" fab icon="add" />
-            <QTooltip class="text-no-wrap">
-                {{ t('purchaseRequest.newRequest') }}
-            </QTooltip>
-        </QPageSticky>
-    </QPage>
 </template>
+
 <i18n>
     es:
         New: Nueva

src/pages/Ticket/Card/TicketSale.vue

@@ -16,11 +16,12 @@ import TicketSaleMoreActions from './TicketSaleMoreActions.vue';
 import TicketTransfer from './TicketTransfer.vue';
 
 import { useStateStore } from 'stores/useStateStore';
-import { toCurrency, toPercentage, dashIfEmpty } from 'src/filters';
+import { toCurrency, toPercentage } from 'src/filters';
 import { useArrayData } from 'composables/useArrayData';
 import { useVnConfirm } from 'composables/useVnConfirm';
 import useNotify from 'src/composables/useNotify.js';
 import axios from 'axios';
+import VnTable from 'src/components/VnTable/VnTable.vue';
 
 const route = useRoute();
 const router = useRouter();
@@ -33,7 +34,8 @@ const stateBtnDropdownRef = ref(null);
 
 const arrayData = useArrayData('ticketData');
 const { store } = arrayData;
-
+const selectedRows = ref([]);
+const hasSelectedRows = computed(() => selectedRows.value.length > 0);
 const ticketConfig = ref(null);
 const isLocked = ref(false);
 const isTicketEditable = ref(false);
@@ -56,86 +58,104 @@ watch(
 
 const columns = computed(() => [
     {
-        label: '',
+        align: 'left',
         name: 'statusIcons',
-        align: 'left',
+        hidden: true,
     },
     {
-        label: '',
+        align: 'center',
-        name: 'picture',
+        label: t('lines.image'),
-        align: 'left',
+        name: 'image',
+        columnField: {
+            component: VnImg,
+            attrs: (id) => {
+                return {
+                    id,
+                    width: '50px',
+                };
+            },
+        },
+        columnFilter: false,
     },
     {
+        align: 'left',
         label: t('ticketSale.visible'),
         name: 'visible',
-        field: 'visible',
+        format: (row, dashIfEmpty) => dashIfEmpty(row.visible),
-        align: 'left',
+        hidden: true,
-        sortable: true,
     },
     {
+        align: 'left',
         label: t('ticketSale.available'),
         name: 'available',
-        field: 'available',
+        format: (row, dashIfEmpty) => dashIfEmpty(row.available),
-        align: 'left',
+        hidden: true,
-        sortable: true,
     },
     {
+        align: 'left',
         label: t('ticketSale.id'),
         name: 'itemFk',
-        field: 'itemFk',
+        hidden: true,
-        align: 'left',
-        sortable: true,
     },
     {
+        align: 'left',
         label: t('ticketSale.quantity'),
         name: 'quantity',
-        field: 'quantity',
+        cardVisible: true,
-        align: 'left',
+        format: (row) => toCurrency(row.quantity),
-        sortable: true,
+        hidden: true,
     },
     {
+        align: 'left',
         label: t('ticketSale.item'),
         name: 'item',
-        field: 'item',
+        format: (row) => row?.item?.name,
-        align: 'left',
+        columnClass: 'expand',
-        sortable: true,
+        cardVisible: true,
+        hidden: true,
     },
     {
+        align: 'left',
         label: t('ticketSale.price'),
         name: 'price',
-        field: 'price',
+        cardVisible: true,
-        align: 'left',
+        format: (row) => toCurrency(row.price),
-        sortable: true,
+        hidden: true,
-        format: (val) => toCurrency(val),
     },
     {
+        align: 'left',
         label: t('ticketSale.discount'),
         name: 'discount',
-        field: 'discount',
+        cardVisible: true,
-        align: 'left',
+        format: (row) => toPercentage(row.discount),
-        sortable: true,
+        hidden: true,
     },
     {
+        align: 'left',
         label: t('ticketSale.amount'),
         name: 'amount',
-        field: 'amount',
+        format: (row) => parseInt(row.amount * row.quantity),
-        align: 'left',
+        hidden: true,
-        sortable: true,
-        format: (val) => toCurrency(val),
     },
     {
+        align: 'left',
         label: t('ticketSale.packaging'),
         name: 'itemPackingTypeFk',
-        field: 'item',
+        cardVisible: true,
-        align: 'left',
+        format: (row, dashIfEmpty) => dashIfEmpty(row?.item?.itemPackingTypeFk),
-        sortable: true,
+        hidden: true,
-        format: (val) => dashIfEmpty(val?.itemPackingTypeFk),
     },
     {
-        label: '',
+        align: 'right',
-        name: 'history',
+        name: 'tableActions',
-        align: 'left',
+        actions: [
-        columnFilter: null,
+            {
+                title: t('ticketSale.history'),
+                icon: 'history',
+                isPrimary: true,
+                action: (row) => goToLog(row.id),
+            },
+        ],
     },
 ]);
 
@@ -478,7 +498,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                     :ticket="store.data"
                     :is-ticket-editable="isTicketEditable"
                     :sales="selectedValidSales"
-                    :disable="!selectedSales.length"
+                    :disable="!hasSelectedRows"
                     :mana="mana"
                     :ticket-config="ticketConfig"
                     @get-mana="getMana()"
@@ -487,7 +507,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 <QBtn
                     color="primary"
                     icon="delete"
-                    :disable="!isTicketEditable || !selectedSales.length"
+                    :disable="!isTicketEditable || !hasSelectedRows"
                     @click="
                         openConfirmationModal(
                             t('Continue anyway?'),
@@ -501,7 +521,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 <QBtn
                     color="primary"
                     icon="vn:splitline"
-                    :disable="!isTicketEditable || !selectedSales.length"
+                    :disable="!isTicketEditable || !hasSelectedRows"
                     @click="setTransferParams()"
                 >
                     <QTooltip>{{ t('Transfer lines') }}</QTooltip>
@@ -540,17 +560,21 @@ onUnmounted(() => (stateStore.rightDrawer = false));
             </QCardSection>
         </div></QDrawer
     >
-    <QTable
+    <!-- TODO: el botón de añadir filas como está en salix-->
-        :rows="sales"
+    <VnTable
+        ref="tableRef"
+        data-key="TicketSales"
+        :url="`Tickets/${route.params.id}/getSales`"
         :columns="columns"
-        row-key="id"
+        v-model:selected="selectedRows"
-        :pagination="{ rowsPerPage: 0 }"
+        :table="{
-        class="full-width q-mt-md"
+            'row-key': 'id',
-        selection="multiple"
+            selection: 'multiple',
-        v-model:selected="selectedSales"
+        }"
-        :no-data-label="t('globals.noResults')"
+        :right-search="false"
+        auto-load
     >
-        <template #body-cell-statusIcons="{ row }">
+        <template #column-statusIcons="{ row }">
             <QTd class="q-gutter-x-xs">
                 <router-link
                     v-if="row.claim?.claimFk"
@@ -595,58 +619,40 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 </QIcon>
             </QTd>
         </template>
-        <template #body-cell-picture="{ row }">
+        <template #column-image="{ row }">
-            <QTd>
+            <div class="image-wrapper">
-                <div class="image-wrapper">
+                <VnImg :id="parseInt(row?.item?.id)" class="rounded" />
-                    <VnImg :id="row.itemFk" class="rounded" />
+            </div>
+        </template>
+        <template #column-visible="{ row }">
+            <QBadge :color="row.available < 0 ? 'alert' : 'transparent'" dense>
+                {{ row.visible }}
+            </QBadge>
+        </template>
+        <template #column-available="{ row }">
+            <QBadge :color="row.available < 0 ? 'alert' : 'transparent'" dense>
+                {{ row.available }}
+            </QBadge>
+        </template>
+        <template #column-itemFk="{ row }">
+            <span class="link" @click.stop>
+                {{ row?.itemFk }}
+                <ItemDescriptorProxy :id="row?.itemFk" />
+            </span>
+        </template>
+        <template #column-item="{ row }">
+            <div class="row column full-width justify-between items-start">
+                {{ row?.item?.name }}
+                <div v-if="row?.item?.subName" class="subName">
+                    {{ row?.item?.subName.toUpperCase() }}
                 </div>
-            </QTd>
+            </div>
+            <FetchedTags :item="row?.item" :max-length="6" />
+            <QPopupProxy v-if="row.id && isTicketEditable">
+                <VnInput v-model="row.concept" @change="updateConcept(row)" />
+            </QPopupProxy>
         </template>
-        <template #body-cell-visible="{ row }">
+        <template #column-quantity="{ 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">
-                    <span class="link">
-                        <QBtn flat dense>
-                            {{ row.itemFk }}
-                        </QBtn>
-                        <ItemDescriptorProxy :id="row.itemFk" />
-                    </span>
-                </div>
-                <VnSelect
-                    v-else
-                    :options="itemsWithNameOptions"
-                    hide-selected
-                    option-label="name"
-                    option-value="id"
-                    @update:model-value="changeQuantity(row)"
-                    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-if="isTicketEditable"
@@ -658,19 +664,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 <span v-else>{{ row.quantity }}</span>
             </QTd>
         </template>
-        <template #body-cell-item="{ row }">
+        <template #column-price="{ row }">
-            <QTd class="col">
-                <div class="column">
-                    <span>{{ row.concept }}</span>
-                    <span class="color-vn-label">{{ row.item?.subName }}</span>
-                    <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>
-            </QTd>
-        </template>
-        <template #body-cell-price="{ row }">
             <QTd>
                 <template v-if="isTicketEditable && row.id">
                     <QBtn flat color="primary" dense @click="onOpenEditPricePopover(row)">
@@ -692,7 +686,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 <span v-else>{{ toCurrency(row.price) }}</span>
             </QTd>
         </template>
-        <template #body-cell-discount="{ row }">
+        <template #column-discount="{ row }">
             <QTd>
                 <template v-if="!isLocked && row.id">
                     <QBtn
@@ -718,21 +712,8 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 <span v-else>{{ toPercentage(row.discount / 100) }}</span>
             </QTd>
         </template>
-        <template #body-cell-history="{ row }">
+        <template #column-amount="{ row }">
-            <QTd>
+            {{ toCurrency(row.quantity * row.price) }}
-                <QBtn
-                    v-if="row.$hasLogs"
-                    @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
@@ -750,7 +731,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 </QTooltip>
             </QBtn>
         </template>
-    </QTable>
+    </VnTable>
 
     <QPageSticky :offset="[20, 20]">
         <QBtn @click="newOrderFromTicket()" color="primary" fab icon="add" />
@@ -760,6 +741,18 @@ onUnmounted(() => (stateStore.rightDrawer = false));
     </QPageSticky>
 </template>
 
+<style lang="scss" scoped>
+.image-wrapper {
+    height: 50px;
+    width: 50px;
+}
+
+.subName {
+    text-transform: uppercase;
+    color: var(--vn-label-color);
+}
+</style>
+
 <i18n>
 es:
     New item: Nuevo artículo

src/pages/Ticket/Card/TicketSaleTracking.vue

@@ -345,7 +345,7 @@ const qCheckBoxController = (sale, action) => {
         :no-data-label="t('globals.noResults')"
     >
         <template #body-cell-isChecked="{ row }">
-            <QTd @click.stop>
+            <QTd @click.stop style="width: 20%">
                 <QCheckbox
                     :model-value="!!row.hasSaleGroupDetail"
                     color="pink"
@@ -404,7 +404,7 @@ const qCheckBoxController = (sale, action) => {
             </QTd>
         </template>
         <template #body-cell-item="{ row }">
-            <QTd @click.stop>
+            <QTd @click.stop style="width: 20%">
                 <div>
                     <span class="link">
                         <QBtn flat>
@@ -426,8 +426,18 @@ const qCheckBoxController = (sale, action) => {
                 </div>
             </QTd>
         </template>
+        <template #body-cell-quantity="{ row }">
+            <QTd style="width: 10%">
+                {{ row.quantity }}
+            </QTd>
+        </template>
+        <template #body-cell-parking="{ row }">
+            <QTd style="width: 10%">
+                {{ dashIfEmpty(row.parkingFk) }}
+            </QTd>
+        </template>
         <template #body-cell-actions="{ row }">
-            <QTd>
+            <QTd style="width: 20%">
                 <QBtn
                     @click.stop="showLog(row)"
                     color="primary"