verdnatura/salix-front
verdnatura
/
salix-front
2
2
Fork 1
Code Issues Pull Requests 99 Releases Wiki Activity

4808-teleport #29

Merged
joan merged 3 commits from 4808-teleport into dev 2022-11-18 10:09:54 +00:00
Conversation 0 Commits 3 Files Changed 8 +146 -160
6 changed files with 146 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit e7f7125a60 - Show all commits

12
src/components/FormModel.vue
View File

@ -7,6 +7,7 @@ import axios from 'axios';
import { useState } from 'src/composables/useState'; import { useState } from 'src/composables/useState';
import { useValidator } from 'src/composables/useValidator'; import { useValidator } from 'src/composables/useValidator';
import SkeletonForm from 'src/components/SkeletonForm.vue'; import SkeletonForm from 'src/components/SkeletonForm.vue';
import TeleportSlot from 'src/components/ui/TeleportSlot';
const quasar = useQuasar(); const quasar = useQuasar();
const { t } = useI18n(); const { t } = useI18n();
@ -93,6 +94,17 @@ function filter(value, update, filterOptions) {
} }
</script> </script>
<template> <template>
<teleport-slot to="#header-actions">
<div class="row q-gutter-x-sm">
<q-btn @click="addRow()" icon="save" color="primary" flat dense rounded>
<q-tooltip bottom> {{ t('globals.save') }} </q-tooltip>
</q-btn>
<q-btn @click="addRow()" icon="clear_all" color="primary" flat dense rounded>
<q-tooltip bottom> {{ t('globals.reset') }} </q-tooltip>
</q-btn>
<q-separator vertical />
</div>
</teleport-slot>
<q-banner v-if="hasChanges" class="text-white bg-warning"> <q-banner v-if="hasChanges" class="text-white bg-warning">
<q-icon name="warning" size="md" class="q-mr-md" /> <q-icon name="warning" size="md" class="q-mr-md" />
<span>{{ t('globals.changesToSave') }}</span> <span>{{ t('globals.changesToSave') }}</span>

33
src/components/Navbar.vue
View File

@ -42,42 +42,14 @@ function onToggleDrawer() {
<div id="searchbar"></div> <div id="searchbar"></div>
<q-space></q-space> <q-space></q-space>
<div class="q-pl-sm q-gutter-sm row items-center no-wrap"> <div class="q-pl-sm q-gutter-sm row items-center no-wrap">
<!-- <q-btn v-if="$q.screen.gt.xs" dense flat size="md" icon="add">
<q-menu>
<q-list style="min-width: 150px">
<q-item :to="{ path: '/customer/create' }" clickable>
<q-item-section>New customer</q-item-section>
</q-item>
<q-item clickable>
<q-item-section>New ticket</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn> -->
<!-- <q-btn v-if="$q.screen.gt.xs" dense flat round size="md" icon="notifications">
<q-badge color="red" text-color="white" floating> 2 </q-badge>
<q-tooltip bottom>
{{ t('globals.notifications') }}
</q-tooltip>
<q-menu class="q-pa-md" style="min-width: 250px">
<strong>Notifications</strong>
<q-separator />
<div style="text-align: center; font-size: 2em">
<q-spinner-puff color="orange" />
</div>
</q-menu>
</q-btn> -->
<div id="header-actions"></div> <div id="header-actions"></div>
<q-btn dense flat no-wrap id="favoriteModules"> <q-btn id="favoriteModules" icon="apps" flat dense rounded>
<q-avatar size="lg">
<q-icon name="apps" size="s" />
</q-avatar>
<q-tooltip bottom> <q-tooltip bottom>
{{ t('globals.favoriteModules') }} {{ t('globals.favoriteModules') }}
</q-tooltip> </q-tooltip>
<FavoriteModules /> <FavoriteModules />
</q-btn> </q-btn>
<q-btn dense flat no-wrap id="user"> <q-btn rounded dense flat no-wrap id="user">
<q-avatar size="lg"> <q-avatar size="lg">
<q-img <q-img
:src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`" :src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
@ -85,7 +57,6 @@ function onToggleDrawer() {
> >
</q-img> </q-img>
</q-avatar> </q-avatar>
<q-icon name="arrow_drop_down" size="s" />
<q-tooltip bottom> <q-tooltip bottom>
{{ t('globals.userPanel') }} {{ t('globals.userPanel') }}
</q-tooltip> </q-tooltip>

20
src/components/ui/TeleportSlot.vue Normal file
View File

@ -0,0 +1,20 @@
<script setup>
import { nextTick, ref } from 'vue';
const $props = defineProps({
to: {
type: String,
required: true,
},
});
const isHeaderMounted = ref(false);
nextTick(() => {
isHeaderMounted.value = document.querySelector($props.to) !== null;
});
</script>
<template>
<teleport v-if="isHeaderMounted" :to="$props.to">
<slot />
</teleport>
</template>

87
src/pages/Claim/Card/ClaimRma.vue
View File

@ -6,6 +6,7 @@ import { useRoute } from 'vue-router';
import axios from 'axios'; import axios from 'axios';
import Paginate from 'src/components/Paginate.vue'; import Paginate from 'src/components/Paginate.vue';
import FetchData from 'src/components/FetchData.vue'; import FetchData from 'src/components/FetchData.vue';
import TeleportSlot from 'components/ui/TeleportSlot';
import { toDate } from 'src/filters'; import { toDate } from 'src/filters';
const quasar = useQuasar(); const quasar = useQuasar();
@ -80,51 +81,49 @@ function hide() {
@on-fetch="($data) => (claim = $data)" @on-fetch="($data) => (claim = $data)"
auto-load auto-load
/> />
<div class="sticky-page"> <teleport-slot to="#header-actions">
<q-page-sticky expand position="top"> <div class="row q-gutter-x-sm">
<q-toolbar class="bg-grey-9"> <q-btn @click="addRow()" icon="add" color="primary" dense rounded>
<q-space /> <q-tooltip bottom> {{ t('globals.add') }} </q-tooltip>
<div class="q-gutter-md"> </q-btn>
<q-btn icon="add" :label="t('globals.add')" color="primary" @click="addRow()" /> <q-separator vertical />
</div> </div>
</q-toolbar> </teleport-slot>
</q-page-sticky> <paginate :data="claim.rmas">
<template #body="{ rows }">
<q-card class="card">
<template v-for="row of rows" :key="row.id">
<q-item class="q-pa-none items-start">
<q-item-section class="q-pa-md">
<q-list>
<q-item class="q-pa-none">
<q-item-section>
<q-item-label caption>{{ t('claim.rma.user') }}</q-item-label>
<q-item-label>{{ row.worker.user.name }}</q-item-label>
</q-item-section>
</q-item>
<q-item class="q-pa-none">
<q-item-section>
<q-item-label caption>{{ t('claim.rma.created') }}</q-item-label>
<q-item-label>
{{ toDate(row.created, { timeStyle: 'medium' }) }}
</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-item-section>
<q-card-actions vertical class="justify-between">
<q-btn flat round color="orange" icon="vn:bin" @click="confirmRemove(row.id)">
<q-tooltip>{{ t('globals.remove') }}</q-tooltip>
</q-btn>
</q-card-actions>
</q-item>
<q-separator />
</template>
</q-card>
</template>
</paginate>
<paginate :data="claim.rmas">
<template #body="{ rows }">
<q-card class="card">
<template v-for="row of rows" :key="row.id">
<q-item class="q-pa-none items-start">
<q-item-section class="q-pa-md">
<q-list>
<q-item class="q-pa-none">
<q-item-section>
<q-item-label caption>{{ t('claim.rma.user') }}</q-item-label>
<q-item-label>{{ row.worker.user.name }}</q-item-label>
</q-item-section>
</q-item>
<q-item class="q-pa-none">
<q-item-section>
<q-item-label caption>{{ t('claim.rma.created') }}</q-item-label>
<q-item-label>
{{ toDate(row.created, { timeStyle: 'medium' }) }}
</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-item-section>
<q-card-actions vertical class="justify-between">
<q-btn flat round color="orange" icon="vn:bin" @click="confirmRemove(row.id)">
<q-tooltip>{{ t('globals.remove') }}</q-tooltip>
</q-btn>
</q-card-actions>
</q-item>
<q-separator />
</template>
</q-card>
</template>
</paginate>
</div>
<q-dialog v-model="confirmShown" persistent @hide="hide"> <q-dialog v-model="confirmShown" persistent @hide="hide">
<q-card> <q-card>
<q-card-section class="row items-center"> <q-card-section class="row items-center">

26
src/pages/Customer/Card/CustomerBasicData.vue
View File

@ -1,16 +1,16 @@
<script setup> <script setup>
import { ref, computed } from 'vue'; import { ref } from 'vue';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useState } from 'src/composables/useState'; // import { useState } from 'src/composables/useState';
import { useSession } from 'src/composables/useSession'; import { useSession } from 'src/composables/useSession';
import FetchData from 'src/components/FetchData.vue'; import FetchData from 'src/components/FetchData.vue';
import FormModel from 'src/components/FormModel.vue'; import FormModel from 'src/components/FormModel.vue';
const route = useRoute(); const route = useRoute();
const { t } = useI18n(); const { t } = useI18n();
const state = useState(); // const state = useState();
const session = useSession(); const session = useSession();
const token = session.getToken(); const token = session.getToken();
@ -42,7 +42,7 @@ const filterOptions = {
}); });
}, },
}; };
const headerMounted = computed(() => state.headerMounted.value); // const headerMounted = computed(() => state.headerMounted.value);
</script> </script>
<template> <template>
<fetch-data <fetch-data
@ -53,24 +53,6 @@ const headerMounted = computed(() => state.headerMounted.value);
/> />
<fetch-data url="ContactChannels" @on-fetch="($data) => (contactChannels = $data)" auto-load /> <fetch-data url="ContactChannels" @on-fetch="($data) => (contactChannels = $data)" auto-load />
<fetch-data url="BusinessTypes" @on-fetch="($data) => (businessTypes = $data)" auto-load /> <fetch-data url="BusinessTypes" @on-fetch="($data) => (businessTypes = $data)" auto-load />
<teleport v-if="headerMounted" to="#header-actions">
<div class="row q-gutter-x-sm">
<q-btn color="primary" dense flat no-wrap>
<q-avatar size="lg">
<q-icon name="save" size="s" />
</q-avatar>
<q-tooltip bottom> Save </q-tooltip>
</q-btn>
<q-btn color="primary" dense flat no-wrap>
<q-avatar size="lg">
<q-icon name="delete" size="s" />
</q-avatar>
<q-tooltip bottom> Delete </q-tooltip>
</q-btn>
<q-separator vertical />
</div>
</teleport>
<teleport v-if="headerMounted" to="#searchbar"> input </teleport>
<div class="container"> <div class="container">
<q-card> <q-card>
<form-model :url="`Clients/${route.params.id}`" model="customer"> <form-model :url="`Clients/${route.params.id}`" model="customer">

128
src/pages/Ticket/Card/TicketBoxing.vue
View File

@ -79,69 +79,71 @@ async function getVideoList(expeditionId, timed) {
</script> </script>
<template> <template>
<q-drawer show-if-above side="right"> <teleport to=".q-layout">
<q-scroll-area class="fit"> <q-drawer show-if-above side="right">
<q-list bordered separator style="max-width: 318px"> <q-scroll-area class="fit">
<q-item v-if="lastExpedition && videoList.length"> <q-list bordered separator style="max-width: 318px">
<q-item-section> <q-item v-if="lastExpedition && videoList.length">
<q-item-label class="text-h6"> <q-item-section>
{{ t('ticket.boxing.selectTime') }} ({{ time.min }}-{{ time.max }}) <q-item-label class="text-h6">
</q-item-label> {{ t('ticket.boxing.selectTime') }} ({{ time.min }}-{{ time.max }})
<q-range </q-item-label>
v-model="time" <q-range
@change="getVideoList(lastExpedition, time)" v-model="time"
:min="0" @change="getVideoList(lastExpedition, time)"
:max="24" :min="0"
:step="1" :max="24"
:left-label-value="time.min + ':00'" :step="1"
:right-label-value="time.max + ':00'" :left-label-value="time.min + ':00'"
label :right-label-value="time.max + ':00'"
markers label
snap markers
color="orange" snap
/> color="orange"
</q-item-section> />
</q-item> </q-item-section>
<q-item v-if="lastExpedition && videoList.length"> </q-item>
<q-item-section> <q-item v-if="lastExpedition && videoList.length">
<q-select <q-item-section>
color="orange" <q-select
v-model="slide" color="orange"
:options="videoList" v-model="slide"
:label="t('ticket.boxing.selectVideo')" :options="videoList"
emit-value :label="t('ticket.boxing.selectVideo')"
map-options emit-value
> map-options
<template #prepend> >
<q-icon name="schedule" /> <template #prepend>
</template> <q-icon name="schedule" />
</q-select> </template>
</q-item-section> </q-select>
</q-item> </q-item-section>
<q-item </q-item>
v-for="expedition in expeditions" <q-item
:key="expedition.id" v-for="expedition in expeditions"
@click="getVideoList(expedition.id)" :key="expedition.id"
clickable @click="getVideoList(expedition.id)"
v-ripple clickable
> v-ripple
<q-item-section> >
<q-item-label class="text-h6">#{{ expedition.id }}</q-item-label> <q-item-section>
</q-item-section> <q-item-label class="text-h6">#{{ expedition.id }}</q-item-label>
<q-item-section> </q-item-section>
<q-item-label caption>{{ t('ticket.boxing.created') }}</q-item-label> <q-item-section>
<q-item-label> <q-item-label caption>{{ t('ticket.boxing.created') }}</q-item-label>
{{ date.formatDate(expedition.created, 'YYYY-MM-DD HH:mm:ss') }} <q-item-label>
</q-item-label> {{ date.formatDate(expedition.created, 'YYYY-MM-DD HH:mm:ss') }}
<q-item-label caption>{{ t('ticket.boxing.item') }}</q-item-label> </q-item-label>
<q-item-label>{{ expedition.packagingItemFk }}</q-item-label> <q-item-label caption>{{ t('ticket.boxing.item') }}</q-item-label>
<q-item-label caption>{{ t('ticket.boxing.worker') }}</q-item-label> <q-item-label>{{ expedition.packagingItemFk }}</q-item-label>
<q-item-label>{{ expedition.userName }}</q-item-label> <q-item-label caption>{{ t('ticket.boxing.worker') }}</q-item-label>
</q-item-section> <q-item-label>{{ expedition.userName }}</q-item-label>
</q-item> </q-item-section>
</q-list> </q-item>
</q-scroll-area> </q-list>
</q-drawer> </q-scroll-area>
</q-drawer>
</teleport>
<q-card> <q-card>
<q-carousel animated v-model="slide" height="max-content"> <q-carousel animated v-model="slide" height="max-content">