forked from verdnatura/salix-front
Merge pull request '4808-teleport' (#29) from 4808-teleport into dev
Reviewed-on: verdnatura/salix-front#29
This commit is contained in:
commit
3154a02727
|
|
@ -5754,9 +5754,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/caniuse-lite": {
|
||||
"version": "1.0.30001344",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001344.tgz",
|
||||
"integrity": "sha512-0ZFjnlCaXNOAYcV7i+TtdKBp0L/3XEU2MF/x6Du1lrh+SRX4IfzIVL4HNJg5pB2PmFb8rszIGyOvsZnqqRoc2g==",
|
||||
"version": "1.0.30001431",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001431.tgz",
|
||||
"integrity": "sha512-zBUoFU0ZcxpvSt9IU66dXVT/3ctO1cy4y9cscs1szkPlcWb6pasYM144GqrUygUbT+k7cmUCW61cvskjcv0enQ==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
|
|
@ -25351,9 +25351,9 @@
|
|||
}
|
||||
},
|
||||
"caniuse-lite": {
|
||||
"version": "1.0.30001344",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001344.tgz",
|
||||
"integrity": "sha512-0ZFjnlCaXNOAYcV7i+TtdKBp0L/3XEU2MF/x6Du1lrh+SRX4IfzIVL4HNJg5pB2PmFb8rszIGyOvsZnqqRoc2g==",
|
||||
"version": "1.0.30001431",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001431.tgz",
|
||||
"integrity": "sha512-zBUoFU0ZcxpvSt9IU66dXVT/3ctO1cy4y9cscs1szkPlcWb6pasYM144GqrUygUbT+k7cmUCW61cvskjcv0enQ==",
|
||||
"dev": true
|
||||
},
|
||||
"capture-exit": {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<script setup>
|
||||
import { onMounted } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useState } from 'src/composables/useState';
|
||||
import { useSession } from 'src/composables/useSession';
|
||||
|
|
@ -11,6 +12,8 @@ const state = useState();
|
|||
const user = state.getUser();
|
||||
const token = session.getToken();
|
||||
|
||||
onMounted(() => (state.headerMounted.value = true));
|
||||
|
||||
function onToggleDrawer() {
|
||||
state.drawer.value = !state.drawer.value;
|
||||
}
|
||||
|
|
@ -36,42 +39,17 @@ function onToggleDrawer() {
|
|||
</router-link>
|
||||
<q-toolbar-title shrink class="text-weight-bold">Salix</q-toolbar-title>
|
||||
<q-space></q-space>
|
||||
<div id="searchbar"></div>
|
||||
<q-space></q-space>
|
||||
<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> -->
|
||||
<q-btn dense flat no-wrap id="favoriteModules">
|
||||
<q-avatar size="lg">
|
||||
<q-icon name="apps" size="s" />
|
||||
</q-avatar>
|
||||
<div id="header-actions"></div>
|
||||
<q-btn id="favoriteModules" icon="apps" flat dense rounded>
|
||||
<q-tooltip bottom>
|
||||
{{ t('globals.favoriteModules') }}
|
||||
</q-tooltip>
|
||||
<FavoriteModules />
|
||||
</q-btn>
|
||||
<q-btn dense flat no-wrap id="user">
|
||||
<q-btn rounded dense flat no-wrap id="user">
|
||||
<q-avatar size="lg">
|
||||
<q-img
|
||||
:src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
|
||||
|
|
@ -79,7 +57,6 @@ function onToggleDrawer() {
|
|||
>
|
||||
</q-img>
|
||||
</q-avatar>
|
||||
<q-icon name="arrow_drop_down" size="s" />
|
||||
<q-tooltip bottom>
|
||||
{{ t('globals.userPanel') }}
|
||||
</q-tooltip>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -12,6 +12,7 @@ const user = ref({
|
|||
|
||||
const roles = ref([]);
|
||||
const drawer = ref(true);
|
||||
const headerMounted = ref(false);
|
||||
|
||||
export function useState() {
|
||||
function getUser() {
|
||||
|
|
@ -67,6 +68,7 @@ export function useState() {
|
|||
set,
|
||||
get,
|
||||
unset,
|
||||
drawer
|
||||
drawer,
|
||||
headerMounted
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,15 @@
|
|||
<script setup>
|
||||
import { useQuasar } from 'quasar';
|
||||
import Navbar from 'src/components/Navbar.vue';
|
||||
|
||||
const quasar = useQuasar();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-layout view="hHh LpR fFf">
|
||||
<Navbar />
|
||||
<router-view></router-view>
|
||||
<q-footer v-if="quasar.platform.is.mobile"></q-footer>
|
||||
</q-layout>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import { useRoute } from 'vue-router';
|
|||
import axios from 'axios';
|
||||
import Paginate from 'src/components/Paginate.vue';
|
||||
import FetchData from 'src/components/FetchData.vue';
|
||||
import TeleportSlot from 'components/ui/TeleportSlot';
|
||||
import { toDate } from 'src/filters';
|
||||
|
||||
const quasar = useQuasar();
|
||||
|
|
@ -77,54 +78,44 @@ function hide() {
|
|||
ref="fetcher"
|
||||
:url="`Claims/${route.params.id}`"
|
||||
:filter="filter"
|
||||
@on-fetch="($data) => (claim = $data)"
|
||||
@on-fetch="(data) => (claim = data)"
|
||||
auto-load
|
||||
/>
|
||||
<div class="sticky-page">
|
||||
<q-page-sticky expand position="top">
|
||||
<q-toolbar class="bg-grey-9">
|
||||
<q-space />
|
||||
<div class="q-gutter-md">
|
||||
<q-btn icon="add" :label="t('globals.add')" color="primary" @click="addRow()" />
|
||||
</div>
|
||||
</q-toolbar>
|
||||
</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-card>
|
||||
<q-card-section class="row items-center">
|
||||
|
|
@ -138,6 +129,20 @@ function hide() {
|
|||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
<teleport-slot v-if="!quasar.platform.is.mobile" to="#header-actions">
|
||||
<div class="row q-gutter-x-sm">
|
||||
<q-btn @click="addRow()" icon="add" color="primary" dense rounded>
|
||||
<q-tooltip bottom> {{ t('globals.add') }} </q-tooltip>
|
||||
</q-btn>
|
||||
<q-separator vertical />
|
||||
</div>
|
||||
</teleport-slot>
|
||||
|
||||
<teleport-slot to=".q-footer">
|
||||
<q-tabs align="justify" inline-label narrow-indicator>
|
||||
<q-tab @click="addRow()" icon="add_circle" :label="t('globals.add')" />
|
||||
</q-tabs>
|
||||
</teleport-slot>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -3,12 +3,14 @@ import { ref } from 'vue';
|
|||
import { useRoute } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
// import { useState } from 'src/composables/useState';
|
||||
import { useSession } from 'src/composables/useSession';
|
||||
import FetchData from 'src/components/FetchData.vue';
|
||||
import FormModel from 'src/components/FormModel.vue';
|
||||
|
||||
const route = useRoute();
|
||||
const { t } = useI18n();
|
||||
// const state = useState();
|
||||
const session = useSession();
|
||||
const token = session.getToken();
|
||||
|
||||
|
|
@ -40,6 +42,7 @@ const filterOptions = {
|
|||
});
|
||||
},
|
||||
};
|
||||
// const headerMounted = computed(() => state.headerMounted.value);
|
||||
</script>
|
||||
<template>
|
||||
<fetch-data
|
||||
|
|
@ -50,7 +53,6 @@ const filterOptions = {
|
|||
/>
|
||||
<fetch-data url="ContactChannels" @on-fetch="($data) => (contactChannels = $data)" auto-load />
|
||||
<fetch-data url="BusinessTypes" @on-fetch="($data) => (businessTypes = $data)" auto-load />
|
||||
|
||||
<div class="container">
|
||||
<q-card>
|
||||
<form-model :url="`Clients/${route.params.id}`" model="customer">
|
||||
|
|
|
|||
|
|
@ -79,69 +79,71 @@ async function getVideoList(expeditionId, timed) {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<q-drawer show-if-above side="right">
|
||||
<q-scroll-area class="fit">
|
||||
<q-list bordered separator style="max-width: 318px">
|
||||
<q-item v-if="lastExpedition && videoList.length">
|
||||
<q-item-section>
|
||||
<q-item-label class="text-h6">
|
||||
{{ t('ticket.boxing.selectTime') }} ({{ time.min }}-{{ time.max }})
|
||||
</q-item-label>
|
||||
<q-range
|
||||
v-model="time"
|
||||
@change="getVideoList(lastExpedition, time)"
|
||||
:min="0"
|
||||
:max="24"
|
||||
:step="1"
|
||||
:left-label-value="time.min + ':00'"
|
||||
:right-label-value="time.max + ':00'"
|
||||
label
|
||||
markers
|
||||
snap
|
||||
color="orange"
|
||||
/>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item v-if="lastExpedition && videoList.length">
|
||||
<q-item-section>
|
||||
<q-select
|
||||
color="orange"
|
||||
v-model="slide"
|
||||
:options="videoList"
|
||||
:label="t('ticket.boxing.selectVideo')"
|
||||
emit-value
|
||||
map-options
|
||||
>
|
||||
<template #prepend>
|
||||
<q-icon name="schedule" />
|
||||
</template>
|
||||
</q-select>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
v-for="expedition in expeditions"
|
||||
:key="expedition.id"
|
||||
@click="getVideoList(expedition.id)"
|
||||
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 caption>{{ t('ticket.boxing.created') }}</q-item-label>
|
||||
<q-item-label>
|
||||
{{ date.formatDate(expedition.created, 'YYYY-MM-DD HH:mm:ss') }}
|
||||
</q-item-label>
|
||||
<q-item-label caption>{{ t('ticket.boxing.item') }}</q-item-label>
|
||||
<q-item-label>{{ expedition.packagingItemFk }}</q-item-label>
|
||||
<q-item-label caption>{{ t('ticket.boxing.worker') }}</q-item-label>
|
||||
<q-item-label>{{ expedition.userName }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-scroll-area>
|
||||
</q-drawer>
|
||||
<teleport to=".q-layout">
|
||||
<q-drawer show-if-above side="right">
|
||||
<q-scroll-area class="fit">
|
||||
<q-list bordered separator style="max-width: 318px">
|
||||
<q-item v-if="lastExpedition && videoList.length">
|
||||
<q-item-section>
|
||||
<q-item-label class="text-h6">
|
||||
{{ t('ticket.boxing.selectTime') }} ({{ time.min }}-{{ time.max }})
|
||||
</q-item-label>
|
||||
<q-range
|
||||
v-model="time"
|
||||
@change="getVideoList(lastExpedition, time)"
|
||||
:min="0"
|
||||
:max="24"
|
||||
:step="1"
|
||||
:left-label-value="time.min + ':00'"
|
||||
:right-label-value="time.max + ':00'"
|
||||
label
|
||||
markers
|
||||
snap
|
||||
color="orange"
|
||||
/>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item v-if="lastExpedition && videoList.length">
|
||||
<q-item-section>
|
||||
<q-select
|
||||
color="orange"
|
||||
v-model="slide"
|
||||
:options="videoList"
|
||||
:label="t('ticket.boxing.selectVideo')"
|
||||
emit-value
|
||||
map-options
|
||||
>
|
||||
<template #prepend>
|
||||
<q-icon name="schedule" />
|
||||
</template>
|
||||
</q-select>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
v-for="expedition in expeditions"
|
||||
:key="expedition.id"
|
||||
@click="getVideoList(expedition.id)"
|
||||
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 caption>{{ t('ticket.boxing.created') }}</q-item-label>
|
||||
<q-item-label>
|
||||
{{ date.formatDate(expedition.created, 'YYYY-MM-DD HH:mm:ss') }}
|
||||
</q-item-label>
|
||||
<q-item-label caption>{{ t('ticket.boxing.item') }}</q-item-label>
|
||||
<q-item-label>{{ expedition.packagingItemFk }}</q-item-label>
|
||||
<q-item-label caption>{{ t('ticket.boxing.worker') }}</q-item-label>
|
||||
<q-item-label>{{ expedition.userName }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-scroll-area>
|
||||
</q-drawer>
|
||||
</teleport>
|
||||
|
||||
<q-card>
|
||||
<q-carousel animated v-model="slide" height="max-content">
|
||||
|
|
|
|||
Loading…
Reference in New Issue