From f44643fc61866d3549f75998006161e88332a91b Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Fri, 26 Jan 2024 13:22:23 +0100
Subject: [PATCH] refs #6664 perf: show dialog

---
 src/components/ui/VnConfirm.vue               |   3 +-
 .../Ticket/Negative/TicketDescriptor.vue      | 129 +-----------------
 .../Negative/TicketDescriptorDialog.vue       |  10 +-
 src/pages/Ticket/Negative/TicketList.vue      |  29 +++-
 4 files changed, 40 insertions(+), 131 deletions(-)

diff --git a/src/components/ui/VnConfirm.vue b/src/components/ui/VnConfirm.vue
index f8715f685..668621474 100644
--- a/src/components/ui/VnConfirm.vue
+++ b/src/components/ui/VnConfirm.vue
@@ -66,7 +66,8 @@ async function confirm() {
                 <QBtn icon="close" :disable="isLoading" flat round dense v-close-popup />
             </QCardSection>
             <QCardSection class="row items-center">
-                <span v-html="message"></span>
+                <span id="spanHTML" v-html="message"></span>
+                <slot name="customHTML"></slot>
             </QCardSection>
             <QCardActions align="right">
                 <QBtn
diff --git a/src/pages/Ticket/Negative/TicketDescriptor.vue b/src/pages/Ticket/Negative/TicketDescriptor.vue
index a5bd86012..d898dabab 100644
--- a/src/pages/Ticket/Negative/TicketDescriptor.vue
+++ b/src/pages/Ticket/Negative/TicketDescriptor.vue
@@ -2,6 +2,8 @@
 import { computed,  } from 'vue';
 import { toDate, toPercentage,  } from 'filters/index';
 
+import CrudModel from 'src/components/CrudModel.vue';
+import FetchData from 'src/components/FetchData.vue';
 import { useDialogPluginComponent } from 'quasar';
 import { useI18n } from 'vue-i18n';
 const { t } = useI18n();
@@ -83,9 +85,8 @@ const { dialogRef, onDialogHide } = useDialogPluginComponent();
 </script>
 
 <template>
-    <QDialog ref="dialogRef" @hide="onDialogHide">
-            <CrudModel
-        v-if="claim"
+    <CrudModel
+        v-if="$props.id"
         data-key="ClaimEnds"
         url="ClaimEnds/filter"
         save-url="ClaimEnds/crud"
@@ -144,130 +145,14 @@ const { dialogRef, onDialogHide } = useDialogPluginComponent();
                     </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;
+.q-dialog  {
+
+
 }
 </style>
diff --git a/src/pages/Ticket/Negative/TicketDescriptorDialog.vue b/src/pages/Ticket/Negative/TicketDescriptorDialog.vue
index 1b6086d17..ee65549dc 100644
--- a/src/pages/Ticket/Negative/TicketDescriptorDialog.vue
+++ b/src/pages/Ticket/Negative/TicketDescriptorDialog.vue
@@ -1,6 +1,7 @@
 <script setup>
 import TicketDescriptor from './TicketDescriptor.vue';
 
+
 const $props = defineProps({
     id: {
         type: Number,
@@ -9,7 +10,12 @@ const $props = defineProps({
 });
 </script>
 <template>
- <QDialog ref="dialogRef" @hide="onDialogHide">
         <TicketDescriptor v-if="$props.id" :id="$props.id" />
- </QDialog>
 </template>
+
+<style lang="scss">
+.q-dialog  {
+   .q-card{max-width: fit-content !important;}
+
+}
+</style>
diff --git a/src/pages/Ticket/Negative/TicketList.vue b/src/pages/Ticket/Negative/TicketList.vue
index 5ea224e30..3d9032681 100644
--- a/src/pages/Ticket/Negative/TicketList.vue
+++ b/src/pages/Ticket/Negative/TicketList.vue
@@ -7,20 +7,25 @@ import { useSession } from 'src/composables/useSession';
 import TicketFilter from 'pages/Ticket/Negative/TicketFilter.vue';
 import TicketDescriptorDialog from 'pages/Ticket/Negative/TicketDescriptorDialog.vue';
 import { useQuasar } from 'quasar';
+import VnConfirm from 'components/ui/VnConfirm.vue';
 
 const stateStore = useStateStore();
 const { t } = useI18n();
 const session = useSession();
 const selected = ref([]);
+const showTicketDialog= ref(false);
+const currentRow= ref(null);
 const quasar = useQuasar();
 
 const viewSummary = (value) => {
-    quasar.dialog({
-        component: TicketDescriptorDialog,
-        componentProps: {
-            id: value,
-        },
-    });
+    showTicketDialog.value = true
+    currentRow.value = value
+    // quasar.dialog({
+    //     component: VnConfirm,
+    //     componentProps: {
+    //         id: value,
+    //     },
+    // });
 };
 const columns = computed(() => [
     {
@@ -170,6 +175,14 @@ const columns = computed(() => [
                 </template>
             </VnPaginate>
         </div>
+        <VnConfirm
+            v-model="showTicketDialog"
+                :title="t('confirmGreuges')"
+            >
+                <template #customHTML>
+                    <TicketDescriptorDialog :id="currentRow"></TicketDescriptorDialog>
+                </template>
+            </VnConfirm>
         <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
             <QScrollArea class="fit text-grey-8">
                 <TicketFilter data-key="NegativeList" />
@@ -192,4 +205,8 @@ const columns = computed(() => [
 #false {
     background-color: $negative;
 }
+div.q-dialog__inner > div{
+   max-width: fit-content !important;
+   background-color: red !important;
+}
 </style>