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

Changes

This commit is contained in:
Joan Sanchez 2022-11-17 15:12:48 +01:00
parent 6b8819591e
commit e7f7125a60
6 changed files with 146 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/FormModel.vue
View File

@ -7,6 +7,7 @@ import axios from 'axios';
import { useState } from 'src/composables/useState';
import { useValidator } from 'src/composables/useValidator';
import SkeletonForm from 'src/components/SkeletonForm.vue';
import TeleportSlot from 'src/components/ui/TeleportSlot';
const quasar = useQuasar();
const { t } = useI18n();
@ -93,6 +94,17 @@ function filter(value, update, filterOptions) {
}
</script>
<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-icon name="warning" size="md" class="q-mr-md" />
<span>{{ t('globals.changesToSave') }}</span>

33
src/components/Navbar.vue
View File

@ -42,42 +42,14 @@ function onToggleDrawer() {
<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> -->
<div id="header-actions"></div>
<q-btn dense flat no-wrap id="favoriteModules">
<q-avatar size="lg">
<q-icon name="apps" size="s" />
</q-avatar>
<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}`"
@ -85,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>

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 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();
@ -80,51 +81,49 @@ function hide() {
@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>
<teleport-slot 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>
<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">

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

@ -1,16 +1,16 @@
<script setup>
import { ref, computed } from 'vue';
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { useState } from 'src/composables/useState';
// 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 state = useState();
const session = useSession();
const token = session.getToken();
@ -42,7 +42,7 @@ const filterOptions = {
});
},
};
const headerMounted = computed(() => state.headerMounted.value);
// const headerMounted = computed(() => state.headerMounted.value);
</script>
<template>
<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="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">
<q-card>
<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>
<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">