refs #6321 feat dialog approach

src/pages/Ticket/Negative/TicketDescriptor.vue

@@ -0,0 +1,273 @@
+<script setup>
+import { computed,  } from 'vue';
+import { toDate, toPercentage,  } from 'filters/index';
+
+import { useDialogPluginComponent } from 'quasar';
+import { useI18n } from 'vue-i18n';
+const { t } = useI18n();
+// const quasar = useQuasar();
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+
+
+const columns = computed(() => [
+    {
+        name: 'Id',
+        label: t('Id item'),
+        field: (row) => row.itemFk,
+    },
+    {
+        name: 'ticket',
+        label: t('Ticket'),
+        field: (row) => row.ticketFk,
+        align: 'center',
+    },
+    {
+        name: 'destination',
+        label: t('Destination'),
+        field: (row) => row.claimDestinationFk,
+        align: 'left',
+    },
+    {
+        name: 'Landed',
+        label: t('Landed'),
+        field: (row) => toDate(row.landed),
+    },
+    {
+        name: 'quantity',
+        label: t('Quantity'),
+        field: (row) => row.quantity,
+    },
+    {
+        name: 'concept',
+        label: t('Description'),
+        field: (row) => row.concept,
+        align: 'left',
+    },
+    {
+        name: 'price',
+        label: t('Price'),
+        field: (row) => row.price,
+        format: (value) => value,
+        align: 'center',
+    },
+    {
+        name: 'discount',
+        label: t('Discount'),
+        field: (row) => row.discount,
+        format: (value) => toPercentage(value / 100),
+        align: 'left',
+    },
+    {
+        name: 'total',
+        label: t('Total'),
+        field: (row) => row.total,
+        format: (value) => value,
+        align: 'center',
+    },
+    {
+        name: 'delete',
+    },
+]);
+
+
+
+defineEmits([...useDialogPluginComponent.emits]);
+
+const { dialogRef, onDialogHide } = useDialogPluginComponent();
+</script>
+
+<template>
+    <QDialog ref="dialogRef" @hide="onDialogHide">
+            <CrudModel
+        v-if="claim"
+        data-key="ClaimEnds"
+        url="ClaimEnds/filter"
+        save-url="ClaimEnds/crud"
+        ref="claimActionsForm"
+        v-model:selected="selectedRows"
+        :filter="{ where: { claimFk: claimId } }"
+        :default-remove="true"
+        :default-save="false"
+        :default-reset="false"
+        @on-fetch="setData"
+        auto-load
+    >
+        <template #body>
+            <QTable
+                :columns="columns"
+                :rows="rows"
+                :dense="$q.screen.lt.md"
+                row-key="id"
+                selection="multiple"
+                v-model:selected="selectedRows"
+                :grid="$q.screen.lt.md"
+                :pagination="{ rowsPerPage: 0 }"
+                :hide-bottom="true"
+            >
+                <template #body-cell-ticket="{ value }">
+                    <QTd align="center">
+                        <span class="link">
+                            {{ value }}
+                            <TicketDescriptorProxy :id="value" />
+                        </span>
+                    </QTd>
+                </template>
+                <template #body-cell-destination="{ row }">
+                    <QTd>
+                        <VnSelectFilter
+                            v-model="row.claimDestinationFk"
+                            :options="destinationTypes"
+                            option-label="description"
+                            option-value="id"
+                            :autofocus="true"
+                            dense
+                            input-debounce="0"
+                            hide-selected
+                            @update:model-value="(value) => updateDestination(value, row)"
+                        />
+                    </QTd>
+                </template>
+                <template #body-cell-price="{ value }">
+                    <QTd align="center">
+                        {{ toCurrency(value) }}
+                    </QTd>
+                </template>
+                <template #body-cell-total="{ value }">
+                    <QTd align="center">
+                        {{ toCurrency(value) }}
+                    </QTd>
+                </template>
+                <!-- View for grid mode -->
+                <template #item="props">
+                    <div class="q-mb-md col-12 grid-style-transition">
+                        <QCard>
+                            <QCardSection class="row justify-between">
+                                <QCheckbox v-model="props.selected" />
+                                <QBtn color="primary" icon="delete" flat round />
+                            </QCardSection>
+
+                            <QSeparator inset />
+                            <QList dense>
+                                <QItem v-for="column of props.cols" :key="column.name">
+                                    <QItemSection>
+                                        <QItemLabel caption>
+                                            {{ column.label }}
+                                        </QItemLabel>
+                                    </QItemSection>
+                                    <QItemSection side>
+                                        <QItemLabel v-if="column.name === 'destination'">
+                                            <VnSelectFilter
+                                                v-model="props.row.claimDestinationFk"
+                                                :options="destinationTypes"
+                                                option-label="description"
+                                                option-value="id"
+                                                :autofocus="true"
+                                                dense
+                                                input-debounce="0"
+                                                hide-selected
+                                                @update:model-value="
+                                                    (value) =>
+                                                        updateDestination(
+                                                            value,
+                                                            props.row
+                                                        )
+                                                "
+                                            />
+                                        </QItemLabel>
+                                        <QItemLabel v-else>
+                                            {{ column.value }}
+                                        </QItemLabel>
+                                    </QItemSection>
+                                </QItem>
+                            </QList>
+                        </QCard>
+                    </div>
+                </template>
+            </QTable>
+        </template>
+        <template #moreBeforeActions>
+            <QBtn
+                color="primary"
+                text-color="white"
+                :unelevated="true"
+                :label="tMobile('Regularize')"
+                :title="t('Regularize')"
+                icon="check"
+                @click="regularizeClaim"
+                :disable="claim.claimStateFk == resolvedStateId"
+            />
+
+            <QBtn
+                color="primary"
+                text-color="white"
+                :unelevated="true"
+                :disable="!selectedRows.length"
+                :label="tMobile('Change destination')"
+                :title="t('Change destination')"
+                icon="swap_horiz"
+                @click="dialogDestination = !dialogDestination"
+            />
+            <QBtn
+                color="primary"
+                text-color="white"
+                :unelevated="true"
+                :label="tMobile('Import claim')"
+                :title="t('Import claim')"
+                icon="Upload"
+                @click="importToNewRefundTicket"
+                :disable="claim.claimStateFk == resolvedStateId"
+            />
+        </template>
+    </CrudModel>
+    <QDialog v-model="dialogDestination">
+        <QCard>
+            <QCardSection>
+                <QItem class="q-pa-sm">
+                    <span class="q-dialog__title text-white">
+                        {{ t('dialog title') }}
+                    </span>
+                    <QBtn icon="close" flat round dense v-close-popup />
+                </QItem>
+            </QCardSection>
+            <QItemSection>
+                <VnSelectFilter
+                    class="q-pa-sm"
+                    v-model="claimDestinationFk"
+                    :options="destinationTypes"
+                    option-label="description"
+                    option-value="id"
+                    :autofocus="true"
+                    dense
+                    input-debounce="0"
+                    hide-selected
+                />
+            </QItemSection>
+            <QCardActions class="justify-end q-mr-sm">
+                <QBtn flat :label="t('globals.close')" color="primary" v-close-popup />
+                <QBtn
+                    :disable="!claimDestinationFk"
+                    :label="t('globals.save')"
+                    color="primary"
+                    v-close-popup
+                    @click="updateDestinations(claimDestinationFk)"
+                />
+            </QCardActions>
+        </QCard>
+    </QDialog>
+
+    </QDialog>
+</template>
+
+<style lang="scss">
+.q-dialog .summary .header {
+    position: sticky;
+    z-index: $z-max;
+    top: 0;
+}
+</style>

src/pages/Ticket/Negative/TicketDescriptorDialog.vue

@@ -0,0 +1,15 @@
+<script setup>
+import TicketDescriptor from './TicketDescriptor.vue';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+</script>
+<template>
+ <QDialog ref="dialogRef" @hide="onDialogHide">
+        <TicketDescriptor v-if="$props.id" :id="$props.id" />
+ </QDialog>
+</template>

src/pages/Ticket/Negative/TicketList.vue

@@ -5,25 +5,34 @@ import { useStateStore } from 'stores/useStateStore';
 import VnPaginate from 'components/ui/VnPaginate.vue';
 import { useSession } from 'src/composables/useSession';
 import TicketFilter from 'pages/Ticket/Negative/TicketFilter.vue';
-// import TicketDescriptorProxy from 'pages/Ticket/Card/TicketDescriptorProxy.vue';
+import TicketDescriptorDialog from 'pages/Ticket/Negative/TicketDescriptorDialog.vue';
-// import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
+import { useQuasar } from 'quasar';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
 const session = useSession();
 const selected = ref([]);
+const quasar = useQuasar();
 
+const viewSummary = (value) => {
+    quasar.dialog({
+        component: TicketDescriptorDialog,
+        componentProps: {
+            id: value,
+        },
+    });
+};
 const columns = computed(() => [
     {
         name: 'itemFk',
         label: t('ticket.negative.id'),
-        field: ({itemFk}) => itemFk,
+        field: ({ itemFk }) => itemFk,
         sortable: true,
     },
     {
         name: 'longName',
         label: t('ticket.negative.longName'),
-        field: ({longName}) => longName,
+        field: ({ longName }) => longName,
         align: 'center',
         sortable: true,
         headerStyle: 'padding-left: 35px',
@@ -31,32 +40,32 @@ const columns = computed(() => [
     {
         name: 'producer',
         label: t('ticket.negative.supplier'),
-        field: ({producer}) => producer,
+        field: ({ producer }) => producer,
         sortable: true,
     },
     {
         name: 'inkFk',
         label: t('ticket.negative.colour'),
-        field: ({inkFk}) => inkFk,
+        field: ({ inkFk }) => inkFk,
         sortable: true,
     },
     {
         name: 'size',
         label: t('ticket.negative.size'),
-        field: ({size}) => size,
+        field: ({ size }) => size,
         sortable: true,
     },
     {
         name: 'category',
         label: t('ticket.negative.origen'),
-        field: ({category}) => category,
+        field: ({ category }) => category,
         align: 'left',
         sortable: true,
     },
     {
         name: 'lack',
         label: t('ticket.negative.lack'),
-        field: ({lack}) => lack,
+        field: ({ lack }) => lack,
         align: 'center',
         sortable: true,
         headerStyle: 'padding-left: 33px',
@@ -86,21 +95,16 @@ const columns = computed(() => [
         headerStyle: 'padding-left: 33px',
     },*/
     {
-        align: 'right',
+        name: 'icons',
-        field: 'actions',
+        align: 'center',
-        label: '',
+        field: (row) => row,
-        name: 'actions',
+    },
-    }
 ]);
 </script>
 <template>
     <div class="column items-center">
         <div class="list">
-            <VnPaginate
+            <VnPaginate data-key="NegativeList" :url="`Tickets/itemLack`" auto-load>
-                data-key="NegativeList"
-                :url="`Tickets/itemLack`"
-                auto-load
-            >
                 <template #body="{ rows }">
                     <QTable
                         :columns="columns"
@@ -136,7 +140,6 @@ const columns = computed(() => [
                         <template #body-cell-ticketFk="{ value }">
                             <QTd align="right" class="text-primary">
                                 <span class="text-primary link">{{ value }}</span>
-                                <TicketDescriptorProxy :id="value" />
                             </QTd>
                         </template>
                         <template #body-cell-clientFk="{ value }">
@@ -147,17 +150,20 @@ const columns = computed(() => [
                         </template>
                         <template #body-cell-icons="{ value }">
                             <QTd align="center">
-                                <a :href="getCmrUrl(value)" target="_blank">
+
-                                    <QIcon
+                                <QIcon
-                                        name="visibility"
+                                    @click.stop="viewSummary(value)"
-                                        color="primary"
+                                    class="q-ml-md"
-                                        size="md"
+                                    color="primary"
-                                        class="q-mr-sm q-ml-sm"
+                                    name="preview"
-                                    />
+                                    size="sm"
+                                >
                                     <QTooltip>
-                                        {{ t('ticket.negative.viewCmr') }}
+                                        {{ t('Preview') }}
                                     </QTooltip>
-                                </a>
+
+                                    <!-- <TicketDescriptorProxy :id="value" /> -->
+                                </QIcon>
                             </QTd>
                         </template>
                     </QTable>
@@ -167,7 +173,6 @@ const columns = computed(() => [
         <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
             <QScrollArea class="fit text-grey-8">
                 <TicketFilter data-key="NegativeList" />
-
             </QScrollArea>
         </QDrawer>
     </div>
@@ -176,7 +181,7 @@ const columns = computed(() => [
 <style lang="scss" scoped>
 .list {
     padding: 15px;
-     width: 100%;
+    width: 100%;
 }
 .grid-style-transition {
     transition: transform 0.28s, background-color 0.28s;