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

refs #6416 feat: VnTeleport

This commit is contained in:
Javier Segarra 2024-02-19 14:12:54 +01:00
parent 08115563d5
commit a87ac6bbe6
9 changed files with 189 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
src/components/CrudModel.vue
View File

@ -4,14 +4,15 @@ import { computed, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useQuasar } from 'quasar'; import { useQuasar } from 'quasar';
import { useValidator } from 'src/composables/useValidator'; import { useValidator } from 'src/composables/useValidator';
import { useStateStore } from 'stores/useStateStore'; // import { useStateStore } from 'stores/useStateStore';
import VnPaginate from 'components/ui/VnPaginate.vue'; import VnPaginate from 'components/ui/VnPaginate.vue';
import VnConfirm from 'components/ui/VnConfirm.vue'; import VnConfirm from 'components/ui/VnConfirm.vue';
import SkeletonTable from 'components/ui/SkeletonTable.vue'; import SkeletonTable from 'components/ui/SkeletonTable.vue';
import { tMobile } from 'src/composables/tMobile'; import { tMobile } from 'src/composables/tMobile';
import VnTeleport from 'components/ui/VnTeleport.vue';
const quasar = useQuasar(); const quasar = useQuasar();
const stateStore = useStateStore(); // const stateStore = useStateStore();
const { t } = useI18n(); const { t } = useI18n();
const { validate } = useValidator(); const { validate } = useValidator();
@ -275,42 +276,44 @@ watch(formUrl, async () => {
</template> </template>
</VnPaginate> </VnPaginate>
<SkeletonTable v-if="!formData" /> <SkeletonTable v-if="!formData" />
<Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()"> <VnTeleport>
<QBtnGroup push style="column-gap: 10px"> <template #st-actions>
<slot name="moreBeforeActions" /> <QBtnGroup push style="column-gap: 10px">
<QBtn <slot name="moreBeforeActions" />
:label="tMobile('globals.remove')" <QBtn
color="primary" :label="tMobile('globals.remove')"
icon="delete" color="primary"
flat icon="delete"
@click="remove(selected)" flat
:disable="!selected?.length" @click="remove(selected)"
:title="t('globals.remove')" :disable="!selected?.length"
v-if="$props.defaultRemove" :title="t('globals.remove')"
/> v-if="$props.defaultRemove"
<QBtn />
:label="tMobile('globals.reset')" <QBtn
color="primary" :label="tMobile('globals.reset')"
icon="restart_alt" color="primary"
flat icon="restart_alt"
@click="reset" flat
:disable="!hasChanges" @click="reset"
:title="t('globals.reset')" :disable="!hasChanges"
v-if="$props.defaultReset" :title="t('globals.reset')"
/> v-if="$props.defaultReset"
<QBtn />
:label="tMobile('globals.save')" <QBtn
ref="saveButtonRef" :label="tMobile('globals.save')"
color="primary" ref="saveButtonRef"
icon="save" color="primary"
@click="onSubmit" icon="save"
:disable="!hasChanges" @click="onSubmit"
:title="t('globals.save')" :disable="!hasChanges"
v-if="$props.defaultSave" :title="t('globals.save')"
/> v-if="$props.defaultSave"
<slot name="moreAfterActions" /> />
</QBtnGroup> <slot name="moreAfterActions" />
</Teleport> </QBtnGroup>
</template>
</VnTeleport>
<QInnerLoading <QInnerLoading
:showing="isLoading" :showing="isLoading"
:label="t && t('globals.pleaseWait')" :label="t && t('globals.pleaseWait')"

14
src/components/ui/VnTeleport.vue Normal file
View File

@ -0,0 +1,14 @@
<script setup>
import { useStateStore } from 'stores/useStateStore';
const stateStore = useStateStore();
</script>
<template>
<Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()">
<slot name="st-data"></slot>
</Teleport>
<Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()">
<slot name="st-actions"></slot>
</Teleport>
</template>

4
src/pages/Claim/Card/ClaimAction.vue
View File

@ -13,6 +13,7 @@ import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
import VnConfirm from 'src/components/ui/VnConfirm.vue'; import VnConfirm from 'src/components/ui/VnConfirm.vue';
import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue'; import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
import { useArrayData } from 'composables/useArrayData'; import { useArrayData } from 'composables/useArrayData';
import VnTeleport from 'components/ui/VnTeleport.vue';
const { t } = useI18n(); const { t } = useI18n();
const quasar = useQuasar(); const quasar = useQuasar();
@ -267,7 +268,8 @@ async function importToNewRefundTicket() {
/> />
</QCard> </QCard>
</QDrawer> </QDrawer>
<Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()"> </Teleport> <VnTeleport></VnTeleport>
<!-- <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()"> </Teleport> -->
<CrudModel <CrudModel
v-if="claim" v-if="claim"
data-key="ClaimEnds" data-key="ClaimEnds"

39
src/pages/Claim/Card/ClaimLines.vue
View File

@ -4,11 +4,12 @@ import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useQuasar } from 'quasar'; import { useQuasar } from 'quasar';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import { useStateStore } from 'stores/useStateStore'; // import { useStateStore } from 'stores/useStateStore';
import { useArrayData } from 'composables/useArrayData'; import { useArrayData } from 'composables/useArrayData';
import { toDate, toCurrency, toPercentage } from 'filters/index'; import { toDate, toCurrency, toPercentage } from 'filters/index';
import CrudModel from 'components/CrudModel.vue'; import CrudModel from 'components/CrudModel.vue';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import VnTeleport from 'components/ui/VnTeleport.vue';
import VnDiscount from 'components/common/vnDiscount.vue'; import VnDiscount from 'components/common/vnDiscount.vue';
import ClaimLinesImport from './ClaimLinesImport.vue'; import ClaimLinesImport from './ClaimLinesImport.vue';
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue'; import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
@ -17,7 +18,7 @@ const quasar = useQuasar();
const route = useRoute(); const route = useRoute();
const { t } = useI18n(); const { t } = useI18n();
const stateStore = useStateStore(); // const stateStore = useStateStore();
const arrayData = useArrayData('ClaimLines'); const arrayData = useArrayData('ClaimLines');
const store = arrayData.store; const store = arrayData.store;
@ -157,23 +158,25 @@ function showImportDialog() {
} }
</script> </script>
<template> <template>
<Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()"> <VnTeleport>
<div class="row q-gutter-md"> <template #st-data>
<div> <div class="row q-gutter-md">
{{ t('Amount') }} <div>
<QChip :dense="$q.screen.lt.sm"> {{ t('Amount') }}
{{ toCurrency(amount) }} <QChip :dense="$q.screen.lt.sm">
</QChip> {{ toCurrency(amount) }}
</QChip>
</div>
<QSeparator dark vertical />
<div>
{{ t('Amount Claimed') }}
<QChip color="positive" :dense="$q.screen.lt.sm">
{{ toCurrency(amountClaimed) }}
</QChip>
</div>
</div> </div>
<QSeparator dark vertical /> </template>
<div> </VnTeleport>
{{ t('Amount Claimed') }}
<QChip color="positive" :dense="$q.screen.lt.sm">
{{ toCurrency(amountClaimed) }}
</QChip>
</div>
</div>
</Teleport>
<FetchData <FetchData
:url="`Claims/${route.params.id}`" :url="`Claims/${route.params.id}`"

34
src/pages/Entry/Card/EntryBuys.vue
View File

@ -11,9 +11,10 @@ import VnInput from 'src/components/common/VnInput.vue';
import FetchedTags from 'components/ui/FetchedTags.vue'; import FetchedTags from 'components/ui/FetchedTags.vue';
import VnConfirm from 'components/ui/VnConfirm.vue'; import VnConfirm from 'components/ui/VnConfirm.vue';
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue'; import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
import VnTeleport from 'components/ui/VnTeleport.vue';
import { useQuasar } from 'quasar'; import { useQuasar } from 'quasar';
import { useStateStore } from 'stores/useStateStore'; // import { useStateStore } from 'stores/useStateStore';
import { toCurrency } from 'src/filters'; import { toCurrency } from 'src/filters';
import axios from 'axios'; import axios from 'axios';
import useNotify from 'src/composables/useNotify.js'; import useNotify from 'src/composables/useNotify.js';
@ -22,7 +23,7 @@ const quasar = useQuasar();
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
const { t } = useI18n(); const { t } = useI18n();
const stateStore = useStateStore(); // const stateStore = useStateStore();
const { notify } = useNotify(); const { notify } = useNotify();
const rowsSelected = ref([]); const rowsSelected = ref([]);
@ -293,20 +294,21 @@ const showLockIcon = (groupingMode, mode) => {
auto-load auto-load
@on-fetch="(data) => (packagingsOptions = data)" @on-fetch="(data) => (packagingsOptions = data)"
/> />
<Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()"> <VnTeleport>
<QBtnGroup push style="column-gap: 10px"> <template #st-actions>
<slot name="moreBeforeActions" /> <QBtnGroup push style="column-gap: 10px">
<QBtn <slot name="moreBeforeActions" />
:label="t('globals.remove')" <QBtn
color="primary" :label="t('globals.remove')"
icon="delete" color="primary"
flat icon="delete"
@click="openRemoveDialog()" flat
:disable="!rowsSelected?.length" @click="openRemoveDialog()"
:title="t('globals.remove')" :disable="!rowsSelected?.length"
/> :title="t('globals.remove')"
</QBtnGroup> /> </QBtnGroup
</Teleport> ></template>
</VnTeleport>
<VnPaginate <VnPaginate
ref="entryBuysPaginateRef" ref="entryBuysPaginateRef"
data-key="EntryBuys" data-key="EntryBuys"

49
src/pages/Entry/Card/EntryBuysImport.vue
View File

@ -9,13 +9,14 @@ import FetchData from 'components/FetchData.vue';
import VnSelectFilter from 'components/common/VnSelectFilter.vue'; import VnSelectFilter from 'components/common/VnSelectFilter.vue';
import VnSelectDialog from 'src/components/common/VnSelectDialog.vue'; import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
import FilterItemForm from 'src/components/FilterItemForm.vue'; import FilterItemForm from 'src/components/FilterItemForm.vue';
import VnTeleport from 'components/ui/VnTeleport.vue';
import { useStateStore } from 'stores/useStateStore'; // import { useStateStore } from 'stores/useStateStore';
import axios from 'axios'; import axios from 'axios';
import useNotify from 'src/composables/useNotify.js'; import useNotify from 'src/composables/useNotify.js';
import { toCurrency } from 'filters/index'; import { toCurrency } from 'filters/index';
const stateStore = useStateStore(); // const stateStore = useStateStore();
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
const { t } = useI18n(); const { t } = useI18n();
@ -175,27 +176,29 @@ const redirectToBuysView = () => {
auto-load auto-load
/> />
<QForm> <QForm>
<Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()"> <VnTeleport>
<div> <template #st-actions>
<QBtnGroup push class="q-gutter-x-sm"> <div>
<QBtn <QBtnGroup push class="q-gutter-x-sm">
:label="t('globals.cancel')" <QBtn
color="primary" :label="t('globals.cancel')"
icon="restart_alt" color="primary"
flat icon="restart_alt"
@click="redirectToBuysView()" flat
/> @click="redirectToBuysView()"
<QBtn />
:label="t('globals.save')" <QBtn
color="primary" :label="t('globals.save')"
icon="save" color="primary"
type="submit" icon="save"
:disable="!importData.file" type="submit"
@click="onSubmit()" :disable="!importData.file"
/> @click="onSubmit()"
</QBtnGroup> />
</div> </QBtnGroup>
</Teleport> </div>
</template>
</VnTeleport>
<QCard class="q-pa-lg"> <QCard class="q-pa-lg">
<VnRow class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">
<div class="col"> <div class="col">

14
src/pages/InvoiceOut/InvoiceOutNegativeBases.vue
View File

@ -6,6 +6,7 @@ import { QCheckbox, QBtn } from 'quasar';
import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue'; import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
import InvoiceOutNegativeFilter from './InvoiceOutNegativeBasesFilter.vue'; import InvoiceOutNegativeFilter from './InvoiceOutNegativeBasesFilter.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue'; import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import VnTeleport from 'components/ui/VnTeleport.vue';
import { toCurrency } from 'src/filters'; import { toCurrency } from 'src/filters';
import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js'; import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
@ -217,9 +218,16 @@ const selectWorkerId = (id) => {
<template> <template>
<template v-if="stateStore.isHeaderMounted()"> <template v-if="stateStore.isHeaderMounted()">
<Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()"> <VnTeleport>
<QBtn color="primary" icon-right="archive" no-caps @click="downloadCSV()" /> <template #st-actions>
</Teleport> <QBtn
color="primary"
icon-right="archive"
no-caps
@click="downloadCSV()"
/>
</template>
</VnTeleport>
</template> </template>
<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">

57
src/pages/Supplier/Card/SupplierConsumption.vue
View File

@ -8,16 +8,17 @@ import FetchedTags from 'components/ui/FetchedTags.vue';
import SendEmailDialog from 'components/common/SendEmailDialog.vue'; import SendEmailDialog from 'components/common/SendEmailDialog.vue';
import SupplierConsumptionFilter from './SupplierConsumptionFilter.vue'; import SupplierConsumptionFilter from './SupplierConsumptionFilter.vue';
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue'; import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
import VnTeleport from 'components/ui/VnTeleport.vue';
import { toDate } from 'src/filters'; import { toDate } from 'src/filters';
import { dashIfEmpty } from 'src/filters'; import { dashIfEmpty } from 'src/filters';
import { usePrintService } from 'composables/usePrintService'; import { usePrintService } from 'composables/usePrintService';
import useNotify from 'src/composables/useNotify.js'; import useNotify from 'src/composables/useNotify.js';
import axios from 'axios'; import axios from 'axios';
import { useStateStore } from 'stores/useStateStore'; // import { useStateStore } from 'stores/useStateStore';
import { useArrayData } from 'composables/useArrayData'; import { useArrayData } from 'composables/useArrayData';
const stateStore = useStateStore(); // const stateStore = useStateStore();
const { t } = useI18n(); const { t } = useI18n();
const route = useRoute(); const route = useRoute();
const { openReport, sendEmail } = usePrintService(); const { openReport, sendEmail } = usePrintService();
@ -115,31 +116,33 @@ onMounted(async () => {
</script> </script>
<template> <template>
<Teleport to="#st-actions" v-if="stateStore.isSubToolbarShown()"> <VnTeleport>
<QBtn <template #st-actions>
:disabled="!dateRanges.from && !dateRanges.to" <QBtn
color="primary" :disabled="!dateRanges.from && !dateRanges.to"
icon-right="picture_as_pdf" color="primary"
no-caps icon-right="picture_as_pdf"
class="q-mr-md" no-caps
@click="openReportPdf()" class="q-mr-md"
> @click="openReportPdf()"
<QTooltip> >
{{ t('Open as PDF') }} <QTooltip>
</QTooltip> {{ t('Open as PDF') }}
</QBtn> </QTooltip>
<QBtn </QBtn>
:disabled="!dateRanges.from && !dateRanges.to" <QBtn
color="primary" :disabled="!dateRanges.from && !dateRanges.to"
icon-right="email" color="primary"
no-caps icon-right="email"
@click="openSendEmailDialog()" no-caps
> @click="openSendEmailDialog()"
<QTooltip> >
{{ t('Send to email') }} <QTooltip>
</QTooltip> {{ t('Send to email') }}
</QBtn> </QTooltip>
</Teleport> </QBtn>
</template>
</VnTeleport>
<QPage class="column items-center q-pa-md"> <QPage class="column items-center q-pa-md">
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above> <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>

48
src/pages/Travel/Card/TravelThermographsForm.vue
View File

@ -2,7 +2,7 @@
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { reactive, ref, onBeforeMount } from 'vue'; import { reactive, ref, onBeforeMount } from 'vue';
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import VnTeleport from 'components/ui/VnTeleport.vue';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue'; import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
import VnSelectDialog from 'components/common/VnSelectDialog.vue'; import VnSelectDialog from 'components/common/VnSelectDialog.vue';
@ -11,7 +11,7 @@ import VnInput from 'src/components/common/VnInput.vue';
import CreateThermographForm from 'src/components/CreateThermographForm.vue'; import CreateThermographForm from 'src/components/CreateThermographForm.vue';
import { useState } from 'src/composables/useState'; import { useState } from 'src/composables/useState';
import { useStateStore } from 'stores/useStateStore'; // import { useStateStore } from 'stores/useStateStore';
import axios from 'axios'; import axios from 'axios';
import useNotify from 'src/composables/useNotify.js'; import useNotify from 'src/composables/useNotify.js';
@ -22,7 +22,7 @@ const props = defineProps({
}, },
}); });
const stateStore = useStateStore(); // const stateStore = useStateStore();
const { t } = useI18n(); const { t } = useI18n();
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
@ -214,26 +214,28 @@ const onThermographCreated = async (data) => {
class="full-width" class="full-width"
style="max-width: 800px" style="max-width: 800px"
> >
<Teleport to="#st-actions" v-if="stateStore?.isSubToolbarShown()"> <VnTeleport>
<div> <template #st-actions>
<QBtnGroup push class="q-gutter-x-sm"> <div>
<slot name="moreActions" /> <QBtnGroup push class="q-gutter-x-sm">
<QBtn <slot name="moreActions" />
color="primary" <QBtn
icon="restart_alt" color="primary"
flat icon="restart_alt"
@click="reset()" flat
:label="t('globals.reset')" @click="reset()"
/> :label="t('globals.reset')"
<QBtn />
color="primary" <QBtn
icon="save" color="primary"
@click="onSubmit()" icon="save"
:label="t('globals.save')" @click="onSubmit()"
/> :label="t('globals.save')"
</QBtnGroup> />
</div> </QBtnGroup>
</Teleport> </div>
</template>
</VnTeleport>
<QCard class="q-pa-lg"> <QCard class="q-pa-lg">
<VnRow class="row q-gutter-md q-mb-md"> <VnRow class="row q-gutter-md q-mb-md">
<div class="col"> <div class="col">