wbuezas
/
salix-front-mindshore-fork2
forked from verdnatura/salix-front
0
0
Fork 0
Code Pull Requests Activity

refs #6664 perf: show dialog

This commit is contained in:
Javier Segarra 2024-01-26 13:22:23 +01:00
parent 1c51faaff4
commit f44643fc61
4 changed files with 40 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/ui/VnConfirm.vue
View File

@ -66,7 +66,8 @@ async function confirm() {
<QBtn icon="close" :disable="isLoading" flat round dense v-close-popup /> <QBtn icon="close" :disable="isLoading" flat round dense v-close-popup />
</QCardSection> </QCardSection>
<QCardSection class="row items-center"> <QCardSection class="row items-center">
<span v-html="message"></span> <span id="spanHTML" v-html="message"></span>
<slot name="customHTML"></slot>
</QCardSection> </QCardSection>
<QCardActions align="right"> <QCardActions align="right">
<QBtn <QBtn

127
src/pages/Ticket/Negative/TicketDescriptor.vue
View File

@ -2,6 +2,8 @@
import { computed, } from 'vue'; import { computed, } from 'vue';
import { toDate, toPercentage, } from 'filters/index'; 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 { useDialogPluginComponent } from 'quasar';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
const { t } = useI18n(); const { t } = useI18n();
@ -83,9 +85,8 @@ const { dialogRef, onDialogHide } = useDialogPluginComponent();
</script> </script>
<template> <template>
<QDialog ref="dialogRef" @hide="onDialogHide">
<CrudModel <CrudModel
v-if="claim" v-if="$props.id"
data-key="ClaimEnds" data-key="ClaimEnds"
url="ClaimEnds/filter" url="ClaimEnds/filter"
save-url="ClaimEnds/crud" save-url="ClaimEnds/crud"
@ -144,130 +145,14 @@ const { dialogRef, onDialogHide } = useDialogPluginComponent();
</QTd> </QTd>
</template> </template>
<!-- View for grid mode --> <!-- 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> </QTable>
</template> </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> </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> </template>
<style lang="scss"> <style lang="scss">
.q-dialog .summary .header { .q-dialog {
position: sticky;
z-index: $z-max;
top: 0;
} }
</style> </style>

10
src/pages/Ticket/Negative/TicketDescriptorDialog.vue
View File

@ -1,6 +1,7 @@
<script setup> <script setup>
import TicketDescriptor from './TicketDescriptor.vue'; import TicketDescriptor from './TicketDescriptor.vue';
const $props = defineProps({ const $props = defineProps({
id: { id: {
type: Number, type: Number,
@ -9,7 +10,12 @@ const $props = defineProps({
}); });
</script> </script>
<template> <template>
<QDialog ref="dialogRef" @hide="onDialogHide">
<TicketDescriptor v-if="$props.id" :id="$props.id" /> <TicketDescriptor v-if="$props.id" :id="$props.id" />
</QDialog>
</template> </template>
<style lang="scss">
.q-dialog {
.q-card{max-width: fit-content !important;}
}
</style>

29
src/pages/Ticket/Negative/TicketList.vue
View File

@ -7,20 +7,25 @@ import { useSession } from 'src/composables/useSession';
import TicketFilter from 'pages/Ticket/Negative/TicketFilter.vue'; import TicketFilter from 'pages/Ticket/Negative/TicketFilter.vue';
import TicketDescriptorDialog from 'pages/Ticket/Negative/TicketDescriptorDialog.vue'; import TicketDescriptorDialog from 'pages/Ticket/Negative/TicketDescriptorDialog.vue';
import { useQuasar } from 'quasar'; import { useQuasar } from 'quasar';
import VnConfirm from 'components/ui/VnConfirm.vue';
const stateStore = useStateStore(); const stateStore = useStateStore();
const { t } = useI18n(); const { t } = useI18n();
const session = useSession(); const session = useSession();
const selected = ref([]); const selected = ref([]);
const showTicketDialog= ref(false);
const currentRow= ref(null);
const quasar = useQuasar(); const quasar = useQuasar();
const viewSummary = (value) => { const viewSummary = (value) => {
quasar.dialog({ showTicketDialog.value = true
component: TicketDescriptorDialog, currentRow.value = value
componentProps: { // quasar.dialog({
id: value, // component: VnConfirm,
}, // componentProps: {
}); // id: value,
// },
// });
}; };
const columns = computed(() => [ const columns = computed(() => [
{ {
@ -170,6 +175,14 @@ const columns = computed(() => [
</template> </template>
</VnPaginate> </VnPaginate>
</div> </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> <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
<QScrollArea class="fit text-grey-8"> <QScrollArea class="fit text-grey-8">
<TicketFilter data-key="NegativeList" /> <TicketFilter data-key="NegativeList" />
@ -192,4 +205,8 @@ const columns = computed(() => [
#false { #false {
background-color: $negative; background-color: $negative;
} }
div.q-dialog__inner > div{
max-width: fit-content !important;
background-color: red !important;
}
</style> </style>