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

Merge
gitea/salix-front/pipeline/head There was a failure building this commit Details

This commit is contained in:
Joan Sanchez 2022-11-18 12:33:28 +01:00
parent 5fe5ee08fb 3154a02727
commit 2aab892d56
8 changed files with 159 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
package-lock.json generated
View File

@ -6221,9 +6221,9 @@
} }
}, },
"node_modules/caniuse-lite": { "node_modules/caniuse-lite": {
"version": "1.0.30001344", "version": "1.0.30001431",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001344.tgz", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001431.tgz",
"integrity": "sha512-0ZFjnlCaXNOAYcV7i+TtdKBp0L/3XEU2MF/x6Du1lrh+SRX4IfzIVL4HNJg5pB2PmFb8rszIGyOvsZnqqRoc2g==", "integrity": "sha512-zBUoFU0ZcxpvSt9IU66dXVT/3ctO1cy4y9cscs1szkPlcWb6pasYM144GqrUygUbT+k7cmUCW61cvskjcv0enQ==",
"dev": true, "dev": true,
"funding": [ "funding": [
{ {
@ -25497,9 +25497,9 @@
} }
}, },
"caniuse-lite": { "caniuse-lite": {
"version": "1.0.30001344", "version": "1.0.30001431",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001344.tgz", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001431.tgz",
"integrity": "sha512-0ZFjnlCaXNOAYcV7i+TtdKBp0L/3XEU2MF/x6Du1lrh+SRX4IfzIVL4HNJg5pB2PmFb8rszIGyOvsZnqqRoc2g==", "integrity": "sha512-zBUoFU0ZcxpvSt9IU66dXVT/3ctO1cy4y9cscs1szkPlcWb6pasYM144GqrUygUbT+k7cmUCW61cvskjcv0enQ==",
"dev": true "dev": true
}, },
"caseless": { "caseless": {

39
src/components/Navbar.vue
View File

@ -1,4 +1,5 @@
<script setup> <script setup>
import { onMounted } from 'vue';
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';
@ -11,6 +12,8 @@ const state = useState();
const user = state.getUser(); const user = state.getUser();
const token = session.getToken(); const token = session.getToken();
onMounted(() => (state.headerMounted.value = true));
function onToggleDrawer() { function onToggleDrawer() {
state.drawer.value = !state.drawer.value; state.drawer.value = !state.drawer.value;
} }
@ -36,42 +39,17 @@ function onToggleDrawer() {
</router-link> </router-link>
<q-toolbar-title shrink class="text-weight-bold">Salix</q-toolbar-title> <q-toolbar-title shrink class="text-weight-bold">Salix</q-toolbar-title>
<q-space></q-space> <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"> <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"> <div id="header-actions"></div>
<q-menu> <q-btn id="favoriteModules" icon="apps" flat dense rounded>
<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>
<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}`"
@ -79,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>

4
src/composables/useState.js
View File

@ -12,6 +12,7 @@ const user = ref({
const roles = ref([]); const roles = ref([]);
const drawer = ref(true); const drawer = ref(true);
const headerMounted = ref(false);
export function useState() { export function useState() {
function getUser() { function getUser() {
@ -67,6 +68,7 @@ export function useState() {
set, set,
get, get,
unset, unset,
drawer drawer,
headerMounted
}; };
} }

4
src/layouts/MainLayout.vue
View File

@ -1,11 +1,15 @@
<script setup> <script setup>
import { useQuasar } from 'quasar';
import Navbar from 'components/Navbar.vue'; import Navbar from 'components/Navbar.vue';
const quasar = useQuasar();
</script> </script>
<template> <template>
<q-layout view="hHh LpR fFf"> <q-layout view="hHh LpR fFf">
<Navbar /> <Navbar />
<router-view></router-view> <router-view></router-view>
<q-footer v-if="quasar.platform.is.mobile"></q-footer>
</q-layout> </q-layout>
</template> </template>

95
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 'components/Paginate.vue'; import Paginate from 'components/Paginate.vue';
import FetchData from 'components/FetchData.vue'; import FetchData from '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();
@ -77,54 +78,44 @@ function hide() {
ref="fetcher" ref="fetcher"
:url="`Claims/${route.params.id}`" :url="`Claims/${route.params.id}`"
:filter="filter" :filter="filter"
@on-fetch="($data) => (claim = $data)" @on-fetch="(data) => (claim = data)"
auto-load auto-load
/> />
<div class="sticky-page"> <paginate :data="claim.rmas">
<q-page-sticky expand position="top"> <template #body="{ rows }">
<q-toolbar class="bg-grey-9"> <q-card class="card">
<q-space /> <template v-for="row of rows" :key="row.id">
<div class="q-gutter-md"> <q-item class="q-pa-none items-start">
<q-btn icon="add" :label="t('globals.add')" color="primary" @click="addRow()" /> <q-item-section class="q-pa-md">
</div> <q-list>
</q-toolbar> <q-item class="q-pa-none">
</q-page-sticky> <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">
@ -138,6 +129,20 @@ function hide() {
</q-card-actions> </q-card-actions>
</q-card> </q-card>
</q-dialog> </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> </template>
<style lang="scss" scoped> <style lang="scss" scoped>

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

@ -33,7 +33,7 @@ const filterOptions = {
const id = row.id; const id = row.id;
const name = row.name.toLowerCase(); const name = row.name.toLowerCase();
const idMatches = id == search; const idMatches = id === search;
const nameMatches = name.indexOf(search) > -1; const nameMatches = name.indexOf(search) > -1;
return idMatches || nameMatches; return idMatches || nameMatches;
@ -48,9 +48,8 @@ const filterOptions = {
@on-fetch="setWorkers" @on-fetch="setWorkers"
auto-load auto-load
/> />
<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 />
<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">