forked from verdnatura/salix-front
Merge branch 'dev' of https://gitea.verdnatura.es/verdnatura/salix-front into 6082-refactNavBar
This commit is contained in:
commit
499ca540c8
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "salix-front",
|
||||
"version": "0.0.1",
|
||||
"version": "23.32.01",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "salix-front",
|
||||
"version": "23.30.01",
|
||||
"version": "23.32.01",
|
||||
"description": "Salix frontend",
|
||||
"productName": "Salix",
|
||||
"author": "Verdnatura",
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ const onResponseError = (error) => {
|
|||
const url = hash.slice(1);
|
||||
Router.push({ path: url });
|
||||
} else if (!session.isLoggedIn()) {
|
||||
message = 'login.loginError';
|
||||
return Promise.reject(error);
|
||||
}
|
||||
|
||||
Notify.create({
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script setup>
|
||||
import axios from 'axios';
|
||||
import { onMounted, ref, computed } from 'vue';
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { QSeparator, useQuasar } from 'quasar';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
|
@ -55,10 +55,6 @@ function addChildren(module, route, parent) {
|
|||
}
|
||||
}
|
||||
|
||||
const pinnedItems = computed(() => {
|
||||
return items.value.filter((item) => item.isPinned);
|
||||
});
|
||||
|
||||
const items = ref([]);
|
||||
function getRoutes() {
|
||||
if (props.source === 'main') {
|
||||
|
|
@ -115,48 +111,65 @@ async function togglePinned(item, event) {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<QList padding>
|
||||
<QList padding class="column-max-width">
|
||||
<template v-if="$props.source === 'main'">
|
||||
<QItemLabel header>
|
||||
{{ t('globals.pinnedModules') }}
|
||||
</QItemLabel>
|
||||
<template v-for="item in pinnedItems" :key="item.name">
|
||||
<template v-if="item.children">
|
||||
<LeftMenuItemGroup :item="item" group="pinnedModules" class="pinned">
|
||||
<template #side>
|
||||
<QBtn
|
||||
v-if="item.isPinned === true"
|
||||
@click="togglePinned(item, $event)"
|
||||
icon="remove_circle"
|
||||
size="xs"
|
||||
flat
|
||||
round
|
||||
>
|
||||
<QTooltip>{{
|
||||
t('components.leftMenu.removeFromPinned')
|
||||
}}</QTooltip>
|
||||
</QBtn>
|
||||
<QBtn
|
||||
v-if="item.isPinned === false"
|
||||
@click="togglePinned(item, $event)"
|
||||
icon="push_pin"
|
||||
size="xs"
|
||||
flat
|
||||
round
|
||||
>
|
||||
<QTooltip>{{
|
||||
t('components.leftMenu.addToPinned')
|
||||
}}</QTooltip>
|
||||
</QBtn>
|
||||
</template>
|
||||
</LeftMenuItemGroup>
|
||||
</template>
|
||||
|
||||
<LeftMenuItem v-if="!item.children" :item="item" />
|
||||
</template>
|
||||
<QSeparator />
|
||||
<QExpansionItem :label="t('moduleIndex.allModules')">
|
||||
<template v-if="this.$route?.matched[1]?.name === 'Dashboard'">
|
||||
<QItem class="header">
|
||||
<QItemSection avatar>
|
||||
<QIcon name="view_module" />
|
||||
</QItemSection>
|
||||
<QItemSection> {{ t('globals.modules') }}</QItemSection>
|
||||
</QItem>
|
||||
<QSeparator />
|
||||
<template v-for="item in items" :key="item.name">
|
||||
<template v-if="item.children">
|
||||
<LeftMenuItem :item="item" group="modules">
|
||||
<template #side>
|
||||
<QBtn
|
||||
v-if="item.isPinned === true"
|
||||
@click="togglePinned(item, $event)"
|
||||
icon="remove_circle"
|
||||
size="xs"
|
||||
flat
|
||||
round
|
||||
>
|
||||
<QTooltip>
|
||||
{{ t('components.leftMenu.removeFromPinned') }}
|
||||
</QTooltip>
|
||||
</QBtn>
|
||||
<QBtn
|
||||
v-if="item.isPinned === false"
|
||||
@click="togglePinned(item, $event)"
|
||||
icon="push_pin"
|
||||
size="xs"
|
||||
flat
|
||||
round
|
||||
>
|
||||
<QTooltip>
|
||||
{{ t('components.leftMenu.addToPinned') }}
|
||||
</QTooltip>
|
||||
</QBtn>
|
||||
</template>
|
||||
</LeftMenuItem>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<template v-for="item in items" :key="item.name">
|
||||
<template v-if="item.name === this.$route?.matched[1]?.name">
|
||||
<QItem class="header">
|
||||
<QItemSection avatar v-if="item.icon">
|
||||
<QIcon :name="item.icon" />
|
||||
</QItemSection>
|
||||
<QItemSection avatar v-if="!item.icon">
|
||||
<QIcon name="disabled_by_default" />
|
||||
</QItemSection>
|
||||
<QItemSection>{{ t(item.title) }}</QItemSection>
|
||||
<QItemSection side>
|
||||
<slot name="side" :item="item" />
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QSeparator />
|
||||
<template v-if="item.children">
|
||||
<LeftMenuItemGroup :item="item" group="modules">
|
||||
<template #side>
|
||||
|
|
@ -188,8 +201,7 @@ async function togglePinned(item, event) {
|
|||
</LeftMenuItemGroup>
|
||||
</template>
|
||||
</template>
|
||||
</QExpansionItem>
|
||||
<QSeparator />
|
||||
</template>
|
||||
</template>
|
||||
<template v-if="$props.source === 'card'">
|
||||
<template v-for="item in items" :key="item.name">
|
||||
|
|
@ -199,7 +211,7 @@ async function togglePinned(item, event) {
|
|||
</QList>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
<style scoped>
|
||||
.pinned .q-btn {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
|
@ -207,4 +219,10 @@ async function togglePinned(item, event) {
|
|||
.pinned:hover .q-btn {
|
||||
visibility: visible;
|
||||
}
|
||||
.column-max-width {
|
||||
max-width: 256px;
|
||||
}
|
||||
.header {
|
||||
color: #999999;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -22,5 +22,8 @@ const item = computed(() => props.item); // eslint-disable-line vue/no-dupe-keys
|
|||
<QIcon name="disabled_by_default" />
|
||||
</QItemSection>
|
||||
<QItemSection>{{ t(item.title) }}</QItemSection>
|
||||
<QItemSection side>
|
||||
<slot name="side" :item="item" />
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,7 @@
|
|||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import LeftMenuItem from './LeftMenuItem.vue';
|
||||
|
||||
const route = useRoute();
|
||||
const { t } = useI18n();
|
||||
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
|
|
@ -19,33 +14,9 @@ const props = defineProps({
|
|||
});
|
||||
|
||||
const item = computed(() => props.item); // eslint-disable-line vue/no-dupe-keys
|
||||
const isOpened = computed(() => {
|
||||
const { matched } = route;
|
||||
const { name } = item.value;
|
||||
|
||||
return matched.some((item) => item.name === name);
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<QExpansionItem
|
||||
:group="props.group"
|
||||
active-class="text-primary"
|
||||
:label="item.title"
|
||||
:to="{ name: item.name }"
|
||||
expand-separator
|
||||
:default-opened="isOpened"
|
||||
>
|
||||
<template #header>
|
||||
<QItemSection avatar>
|
||||
<QIcon :name="item.icon"></QIcon>
|
||||
</QItemSection>
|
||||
<QItemSection>{{ t(item.title) }}</QItemSection>
|
||||
<QItemSection side>
|
||||
<slot name="side" :item="item" />
|
||||
</QItemSection>
|
||||
</template>
|
||||
<template v-for="section in item.children" :key="section.name">
|
||||
<LeftMenuItem :item="section" />
|
||||
</template>
|
||||
</QExpansionItem>
|
||||
<template v-for="section in item.children" :key="section.name">
|
||||
<LeftMenuItem :item="section" />
|
||||
</template>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,23 +1,25 @@
|
|||
<script setup>
|
||||
import { onMounted } from 'vue';
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useSession } from 'src/composables/useSession';
|
||||
import UserPanel from 'components/UserPanel.vue';
|
||||
import { useState } from 'src/composables/useState';
|
||||
import { useStateStore } from 'stores/useStateStore';
|
||||
import PinnedModules from './PinnedModules.vue';
|
||||
import { useQuasar } from 'quasar';
|
||||
import PinnedModules from './PinnedModules.vue';
|
||||
import UserPanel from 'components/UserPanel.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const session = useSession();
|
||||
const stateStore = useStateStore();
|
||||
const quasar = useQuasar();
|
||||
const state = useState();
|
||||
const user = state.getUser();
|
||||
const token = session.getToken();
|
||||
const appName = 'Lilium';
|
||||
const quasar = useQuasar();
|
||||
|
||||
onMounted(() => stateStore.setMounted());
|
||||
|
||||
const pinnedModulesRef = ref();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -64,8 +66,19 @@ onMounted(() => stateStore.setMounted());
|
|||
<QSpace />
|
||||
<div class="q-pl-sm q-gutter-sm row items-center no-wrap">
|
||||
<div id="actions-prepend"></div>
|
||||
<QBtn
|
||||
flat
|
||||
v-if="!quasar.platform.is.mobile"
|
||||
@click="pinnedModulesRef.redirect($route.params.id)"
|
||||
icon="more_up"
|
||||
>
|
||||
<QTooltip>
|
||||
{{ t('Go to Salix') }}
|
||||
</QTooltip>
|
||||
</QBtn>
|
||||
<QBtn
|
||||
class="{quasar.platform.is.mobile: 'q-pa-none q-ml-none'}"
|
||||
id="pinnedModules"
|
||||
icon="apps"
|
||||
flat
|
||||
dense
|
||||
|
|
@ -74,7 +87,7 @@ onMounted(() => stateStore.setMounted());
|
|||
<QTooltip bottom>
|
||||
{{ t('globals.pinnedModules') }}
|
||||
</QTooltip>
|
||||
<PinnedModules />
|
||||
<PinnedModules ref="pinnedModulesRef" />
|
||||
</QBtn>
|
||||
<QBtn
|
||||
class="{quasar.platform.is.mobile: 'q-pa-none q-ml-none'}"
|
||||
|
|
@ -110,3 +123,9 @@ onMounted(() => stateStore.setMounted());
|
|||
}
|
||||
}
|
||||
</style> -->
|
||||
<i18n>
|
||||
en:
|
||||
Go to Salix: Go to Salix
|
||||
es:
|
||||
Go to Salix: Ir a Salix
|
||||
</i18n>
|
||||
|
|
|
|||
|
|
@ -2,69 +2,91 @@
|
|||
import { onMounted, computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useNavigationStore } from 'src/stores/useNavigationStore';
|
||||
import { getUrl } from 'src/composables/getUrl';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
const navigation = useNavigationStore();
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
|
||||
onMounted(() => {
|
||||
navigation.fetchPinned();
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
redirect,
|
||||
});
|
||||
|
||||
const pinnedModules = computed(() => navigation.getPinnedModules());
|
||||
|
||||
async function redirect() {
|
||||
if (route.path == '/dashboard') return (window.location.href = await getUrl(''));
|
||||
let section = route.path.substring(1);
|
||||
section = section.substring(0, section.indexOf('/'));
|
||||
|
||||
if (route?.params?.id)
|
||||
return (window.location.href = await getUrl(
|
||||
`${section}/${route.params.id}/summary`
|
||||
));
|
||||
return (window.location.href = await getUrl(section + '/index'));
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<QMenu
|
||||
anchor="bottom left"
|
||||
class="row q-pa-md q-col-gutter-lg"
|
||||
max-width="350px"
|
||||
max-height="400px"
|
||||
>
|
||||
<template v-if="pinnedModules.length">
|
||||
<div
|
||||
v-for="item of pinnedModules"
|
||||
:key="item.title"
|
||||
class="row no-wrap q-pa-xs flex-item"
|
||||
<QMenu anchor="bottom left" max-width="300px" max-height="400px">
|
||||
<div v-if="pinnedModules.length >= 0" class="row justify-around q-pa-md">
|
||||
<QBtn
|
||||
flat
|
||||
stack
|
||||
size="lg"
|
||||
icon="more_up"
|
||||
class="col-5"
|
||||
@click="redirect($route.params.id)"
|
||||
>
|
||||
<div class="text-center button-text">Salix</div>
|
||||
</QBtn>
|
||||
<QBtn flat stack size="lg" icon="home" class="col-5" to="/">
|
||||
<div class="text-center button-text">{{ t('Home') }}</div>
|
||||
</QBtn>
|
||||
<div class="row col-12 justify-around q-mt-md">
|
||||
<QBtn
|
||||
align="evenly"
|
||||
padding="16px"
|
||||
flat
|
||||
stack
|
||||
size="lg"
|
||||
:icon="item.icon"
|
||||
color="primary"
|
||||
class="col-4 button"
|
||||
class="col-5"
|
||||
:to="{ name: item.name }"
|
||||
v-for="item of pinnedModules"
|
||||
:key="item.title"
|
||||
>
|
||||
<div class="text-center text-primary button-text">
|
||||
{{ t(item.title) }}
|
||||
</div>
|
||||
</QBtn>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div
|
||||
class="row no-wrap q-pa-xs flex-item text-center text-grey-5"
|
||||
style="min-width: 200px"
|
||||
>
|
||||
{{ t('globals.noPinnedModules') }}
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</QMenu>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.flex-item {
|
||||
width: 100px;
|
||||
}
|
||||
.button {
|
||||
width: 100%;
|
||||
line-height: normal;
|
||||
align-items: center;
|
||||
}
|
||||
.button-text {
|
||||
font-size: 10px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<i18n>
|
||||
en:
|
||||
Home: Home
|
||||
es:
|
||||
Home: Inicio
|
||||
</i18n>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
|
|||
import axios from 'axios';
|
||||
import SkeletonDescriptor from 'components/ui/SkeletonDescriptor.vue';
|
||||
|
||||
const props = defineProps({
|
||||
const $props = defineProps({
|
||||
url: {
|
||||
type: String,
|
||||
default: '',
|
||||
|
|
@ -17,6 +17,14 @@ const props = defineProps({
|
|||
type: String,
|
||||
required: true,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
subtitle: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
});
|
||||
|
||||
const slots = useSlots();
|
||||
|
|
@ -30,15 +38,15 @@ const entity = ref();
|
|||
async function fetch() {
|
||||
const params = {};
|
||||
|
||||
if (props.filter) params.filter = JSON.stringify(props.filter);
|
||||
if ($props.filter) params.filter = JSON.stringify($props.filter);
|
||||
|
||||
const { data } = await axios.get(props.url, { params });
|
||||
const { data } = await axios.get($props.url, { params });
|
||||
entity.value = data;
|
||||
|
||||
emit('onFetch', data);
|
||||
}
|
||||
|
||||
watch(props, async () => {
|
||||
watch($props, async () => {
|
||||
entity.value = null;
|
||||
await fetch();
|
||||
});
|
||||
|
|
@ -49,14 +57,30 @@ watch(props, async () => {
|
|||
<template v-if="entity">
|
||||
<div class="header bg-primary q-pa-sm">
|
||||
<RouterLink :to="{ name: `${module}List` }">
|
||||
<QBtn round flat dense size="md" icon="view_list" color="white">
|
||||
<QBtn
|
||||
round
|
||||
flat
|
||||
dense
|
||||
size="md"
|
||||
icon="view_list"
|
||||
color="white"
|
||||
class="link"
|
||||
>
|
||||
<QTooltip>
|
||||
{{ t('components.cardDescriptor.mainList') }}
|
||||
</QTooltip>
|
||||
</QBtn>
|
||||
</RouterLink>
|
||||
<RouterLink :to="{ name: `${module}Summary`, params: { id: entity.id } }">
|
||||
<QBtn round flat dense size="md" icon="launch" color="white">
|
||||
<QBtn
|
||||
round
|
||||
flat
|
||||
dense
|
||||
size="md"
|
||||
icon="launch"
|
||||
color="white"
|
||||
class="link"
|
||||
>
|
||||
<QTooltip>
|
||||
{{ t('components.cardDescriptor.summary') }}
|
||||
</QTooltip>
|
||||
|
|
@ -86,20 +110,34 @@ watch(props, async () => {
|
|||
<div class="body q-py-sm">
|
||||
<QList dense>
|
||||
<QItemLabel header class="ellipsis text-h5" :lines="1">
|
||||
<slot name="description" :entity="entity">
|
||||
<span>
|
||||
{{ entity.name }}
|
||||
<QTooltip>{{ entity.name }}</QTooltip>
|
||||
<div class="title">
|
||||
<span v-if="$props.title">
|
||||
{{ $props.title }}
|
||||
<QTooltip>{{ $props.title }}</QTooltip>
|
||||
</span>
|
||||
</slot>
|
||||
<slot v-else name="description" :entity="entity">
|
||||
<span>
|
||||
{{ entity.name }}
|
||||
<QTooltip>{{ entity.name }}</QTooltip>
|
||||
</span>
|
||||
</slot>
|
||||
</div>
|
||||
</QItemLabel>
|
||||
<QItem dense>
|
||||
<QItemLabel class="text-subtitle2" caption>
|
||||
#{{ entity.id }}
|
||||
<QItemLabel class="subtitle text-white" caption>
|
||||
#{{ $props.subtitle ?? entity.id }}
|
||||
</QItemLabel>
|
||||
</QItem>
|
||||
</QList>
|
||||
<slot name="body" :entity="entity" />
|
||||
<div class="list-box">
|
||||
<slot name="body" :entity="entity" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="icons">
|
||||
<slot name="icons" :entity="entity" />
|
||||
</div>
|
||||
<div class="actions">
|
||||
<slot name="actions" :entity="entity" />
|
||||
</div>
|
||||
<slot name="after" />
|
||||
</template>
|
||||
|
|
@ -110,24 +148,77 @@ watch(props, async () => {
|
|||
|
||||
<style lang="scss">
|
||||
.body {
|
||||
.q-card__actions {
|
||||
justify-content: center;
|
||||
}
|
||||
.text-h5 {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
.q-item {
|
||||
min-height: 20px;
|
||||
|
||||
.link {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
.vn-label-value {
|
||||
display: flex;
|
||||
padding: 2px 16px;
|
||||
.label {
|
||||
color: $label-color;
|
||||
font-size: 12px;
|
||||
width: 47%;
|
||||
}
|
||||
.value {
|
||||
font-size: 14px;
|
||||
margin-left: 12px;
|
||||
width: 47%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.info {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.title {
|
||||
span {
|
||||
color: $primary;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.subtitle {
|
||||
font-size: 16px;
|
||||
}
|
||||
.list-box {
|
||||
width: 90%;
|
||||
background-color: rgba(87, 86, 86, 0.2);
|
||||
margin: 20px 10px 0 10px;
|
||||
padding: 10px 5px 10px 0px;
|
||||
border-radius: 8px;
|
||||
.q-item__label {
|
||||
color: $label-color;
|
||||
}
|
||||
}
|
||||
.descriptor {
|
||||
width: 256px;
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
}
|
||||
.icons {
|
||||
margin: 0 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.q-icon {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.actions {
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,9 @@ const isBooleanValue = computed(() => typeof $props.value === 'boolean');
|
|||
<template>
|
||||
<div class="vn-label-value">
|
||||
<div v-if="$props.label || $slots.label" class="label">
|
||||
<slot name="label"> {{ $props.label }}</slot>
|
||||
<slot name="label">
|
||||
<span>{{ $props.label }}</span>
|
||||
</slot>
|
||||
</div>
|
||||
<div v-if="$props.value || $slots.value" class="value">
|
||||
<span v-if="isBooleanValue">
|
||||
|
|
@ -22,9 +24,9 @@ const isBooleanValue = computed(() => typeof $props.value === 'boolean');
|
|||
:color="$props.value ? `positive` : `negative`"
|
||||
/>
|
||||
</span>
|
||||
<span v-else>
|
||||
<slot name="value">{{ $props.value }}</slot>
|
||||
</span>
|
||||
<slot v-else name="value">
|
||||
<span :title="$props.value">{{ $props.value }}</span>
|
||||
</slot>
|
||||
</div>
|
||||
<div class="info" v-if="$props.info">
|
||||
<QIcon name="info">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
export default function useCardDescription(title, subtitle) {
|
||||
const getTitle = (title) => title;
|
||||
const getSubtitle = (subtitle) => subtitle;
|
||||
return {
|
||||
title: getTitle(title),
|
||||
subtitle: getSubtitle(subtitle),
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
import { ref, computed } from 'vue';
|
||||
|
||||
const user = ref({});
|
||||
|
||||
export function useLogin() {
|
||||
function getUser() {
|
||||
const userData = user.value;
|
||||
user.value = {};
|
||||
return computed(() => {
|
||||
return {
|
||||
user: userData.user,
|
||||
password: userData.password,
|
||||
keepLogin: userData.keepLogin,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function setUser(data) {
|
||||
user.value = {
|
||||
user: data.user,
|
||||
password: data.password,
|
||||
keepLogin: data.keepLogin,
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
getUser,
|
||||
setUser,
|
||||
};
|
||||
}
|
||||
|
|
@ -29,4 +29,10 @@ body.body--light {
|
|||
background-color: white;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.summary {
|
||||
.header {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
// to match your app's branding.
|
||||
// Tip: Use the "Theme Builder" on Quasar's documentation website.
|
||||
|
||||
$primary: #ff9800;
|
||||
$primary: #ec8916;
|
||||
$secondary: #26a69a;
|
||||
$accent: #9c27b0;
|
||||
|
||||
|
|
@ -21,6 +21,23 @@ $negative: #c10015;
|
|||
$info: #31ccec;
|
||||
$warning: #f2c037;
|
||||
|
||||
// Pendiente de cuadrar con la base de datos
|
||||
$success: $positive;
|
||||
$alert: $negative;
|
||||
|
||||
.bg-success {
|
||||
background-color: $positive;
|
||||
}
|
||||
.bg-notice {
|
||||
background-color: $info;
|
||||
}
|
||||
.text-notice {
|
||||
color: $info;
|
||||
}
|
||||
.bg-alert {
|
||||
background-color: $negative;
|
||||
}
|
||||
|
||||
$color-spacer-light: rgba(255, 255, 255, 0.12);
|
||||
$color-spacer: rgba(255, 255, 255, 0.3);
|
||||
$border-thin-light: 1px solid $color-spacer-light;
|
||||
|
|
@ -29,3 +46,5 @@ $dark-shadow-color: #000;
|
|||
$dark: #292929;
|
||||
$layout-shadow-dark: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0px 10px rgba(0, 0, 0, 0.24);
|
||||
$spacing-md: 16px;
|
||||
|
||||
$label-color: rgba(255, 255, 255, 0.6);
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ export default {
|
|||
backToDashboard: 'Return to dashboard',
|
||||
notifications: 'Notifications',
|
||||
userPanel: 'User panel',
|
||||
modules: 'Modules',
|
||||
pinnedModules: 'Pinned modules',
|
||||
darkMode: 'Dark mode',
|
||||
logOut: 'Log out',
|
||||
|
|
@ -19,6 +20,7 @@ export default {
|
|||
save: 'Save',
|
||||
remove: 'Remove',
|
||||
reset: 'Reset',
|
||||
close: 'Close',
|
||||
cancel: 'Cancel',
|
||||
confirm: 'Confirm',
|
||||
back: 'Back',
|
||||
|
|
@ -32,9 +34,6 @@ export default {
|
|||
pleaseWait: 'Please wait...',
|
||||
noPinnedModules: 'You have dont have any pinned modules',
|
||||
},
|
||||
moduleIndex: {
|
||||
allModules: 'All modules',
|
||||
},
|
||||
errors: {
|
||||
statusUnauthorized: 'Access denied',
|
||||
statusInternalServerError: 'An internal server error has ocurred',
|
||||
|
|
@ -50,6 +49,20 @@ export default {
|
|||
loginSuccess: 'You have successfully logged in',
|
||||
loginError: 'Invalid username or password',
|
||||
fieldRequired: 'This field is required',
|
||||
twoFactorRequired: 'Two-factor verification required',
|
||||
pageTitles: {
|
||||
logIn: 'Login',
|
||||
},
|
||||
},
|
||||
twoFactor: {
|
||||
code: 'Code',
|
||||
validate: 'Validate',
|
||||
insert: 'Enter the verification code',
|
||||
explanation:
|
||||
'Please, enter the verification code that we have sent to your email in the next 5 minutes',
|
||||
pageTitles: {
|
||||
twoFactor: 'Two-Factor',
|
||||
},
|
||||
},
|
||||
dashboard: {
|
||||
pageTitles: {
|
||||
|
|
@ -269,6 +282,9 @@ export default {
|
|||
ticketId: 'Ticket ID',
|
||||
customerSummary: 'Customer summary',
|
||||
claimedTicket: 'Claimed ticket',
|
||||
commercial: 'Commercial',
|
||||
province: 'Province',
|
||||
zone: 'Zone',
|
||||
},
|
||||
summary: {
|
||||
customer: 'Customer',
|
||||
|
|
@ -447,6 +463,25 @@ export default {
|
|||
uncompleteTrays: 'There are incomplete trays',
|
||||
},
|
||||
},
|
||||
route: {
|
||||
pageTitles: {
|
||||
routes: 'Routes',
|
||||
cmrsList: 'External CMRs list',
|
||||
},
|
||||
cmr: {
|
||||
list: {
|
||||
total: 'Total {0} records',
|
||||
cmrFk: 'Cmr id',
|
||||
hasCmrDms: `Attached in gestdoc`,
|
||||
true: 'Yes',
|
||||
false: 'No',
|
||||
ticketFk: 'Ticketd id',
|
||||
country: 'Country',
|
||||
clientFk: 'Client id',
|
||||
shipped: 'Preparation date',
|
||||
},
|
||||
},
|
||||
},
|
||||
components: {
|
||||
topbar: {},
|
||||
userPanel: {
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ export default {
|
|||
backToDashboard: 'Volver al tablón',
|
||||
notifications: 'Notificaciones',
|
||||
userPanel: 'Panel de usuario',
|
||||
modules: 'Módulos',
|
||||
pinnedModules: 'Módulos fijados',
|
||||
darkMode: 'Modo oscuro',
|
||||
logOut: 'Cerrar sesión',
|
||||
|
|
@ -19,6 +20,7 @@ export default {
|
|||
save: 'Guardar',
|
||||
remove: 'Eliminar',
|
||||
reset: 'Restaurar',
|
||||
close: 'Cerrar',
|
||||
cancel: 'Cancelar',
|
||||
confirm: 'Confirmar',
|
||||
back: 'Volver',
|
||||
|
|
@ -32,9 +34,6 @@ export default {
|
|||
pleaseWait: 'Por favor, espera...',
|
||||
noPinnedModules: 'No has fijado ningún módulo',
|
||||
},
|
||||
moduleIndex: {
|
||||
allModules: 'Todos los módulos',
|
||||
},
|
||||
errors: {
|
||||
statusUnauthorized: 'Acceso denegado',
|
||||
statusInternalServerError: 'Ha ocurrido un error interno del servidor',
|
||||
|
|
@ -50,6 +49,20 @@ export default {
|
|||
loginSuccess: 'Inicio de sesión correcto',
|
||||
loginError: 'Nombre de usuario o contraseña incorrectos',
|
||||
fieldRequired: 'Este campo es obligatorio',
|
||||
twoFactorRequired: 'Verificación de doble factor requerida',
|
||||
pageTitles: {
|
||||
logIn: 'Inicio de sesión',
|
||||
},
|
||||
},
|
||||
twoFactor: {
|
||||
code: 'Código',
|
||||
validate: 'Validar',
|
||||
insert: 'Introduce el código de verificación',
|
||||
explanation:
|
||||
'Por favor, introduce el código de verificación que te hemos enviado a tu email en los próximos 5 minutos',
|
||||
pageTitles: {
|
||||
twoFactor: 'Doble factor',
|
||||
},
|
||||
},
|
||||
dashboard: {
|
||||
pageTitles: {
|
||||
|
|
@ -268,6 +281,9 @@ export default {
|
|||
ticketId: 'ID ticket',
|
||||
customerSummary: 'Resumen del cliente',
|
||||
claimedTicket: 'Ticket reclamado',
|
||||
commercial: 'Comercial',
|
||||
province: 'Provincia',
|
||||
zone: 'Zona',
|
||||
},
|
||||
summary: {
|
||||
customer: 'Cliente',
|
||||
|
|
@ -447,6 +463,25 @@ export default {
|
|||
uncompleteTrays: 'Hay bandejas sin completar',
|
||||
},
|
||||
},
|
||||
route: {
|
||||
pageTitles: {
|
||||
routes: 'Rutas',
|
||||
cmrsList: 'Listado de CMRs externos',
|
||||
},
|
||||
cmr: {
|
||||
list: {
|
||||
total: 'Total {0} registros',
|
||||
cmrFk: 'Id cmr',
|
||||
hasCmrDms: 'Adjuntado en gestdoc',
|
||||
true: 'Sí',
|
||||
false: 'No',
|
||||
ticketFk: 'Id ticket',
|
||||
country: 'País',
|
||||
clientFk: 'Id cliente',
|
||||
shipped: 'Fecha preparación',
|
||||
},
|
||||
},
|
||||
},
|
||||
components: {
|
||||
topbar: {},
|
||||
userPanel: {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,111 @@
|
|||
<script setup>
|
||||
import { Dark, Quasar } from 'quasar';
|
||||
import { computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
const { t, locale } = useI18n();
|
||||
|
||||
const userLocale = computed({
|
||||
get() {
|
||||
return locale.value;
|
||||
},
|
||||
set(value) {
|
||||
locale.value = value;
|
||||
|
||||
if (value === 'en') value = 'en-GB';
|
||||
|
||||
// FIXME: Dynamic imports from absolute paths are not compatible with vite:
|
||||
// https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations
|
||||
try {
|
||||
const langList = import.meta.glob('../../node_modules/quasar/lang/*.mjs');
|
||||
langList[`../../node_modules/quasar/lang/${value}.mjs`]().then((lang) => {
|
||||
Quasar.lang.set(lang.default);
|
||||
});
|
||||
} catch (error) {
|
||||
//
|
||||
}
|
||||
},
|
||||
});
|
||||
const darkMode = computed({
|
||||
get() {
|
||||
return Dark.isActive;
|
||||
},
|
||||
set(value) {
|
||||
Dark.set(value);
|
||||
},
|
||||
});
|
||||
const langs = ['en', 'es'];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<QLayout view="hHh LpR fFf">
|
||||
<QHeader reveal class="bg-dark">
|
||||
<QToolbar class="justify-end">
|
||||
<QBtn
|
||||
id="switchLanguage"
|
||||
:label="t('globals.language')"
|
||||
icon="translate"
|
||||
color="primary"
|
||||
size="sm"
|
||||
flat
|
||||
rounded
|
||||
>
|
||||
<QMenu auto-close>
|
||||
<QList dense v-for="lang in langs" :key="lang">
|
||||
<QItem
|
||||
@click="userLocale = lang"
|
||||
:active="userLocale == lang"
|
||||
v-ripple
|
||||
clickable
|
||||
>
|
||||
{{ t(`globals.lang.${lang}`) }}
|
||||
</QItem>
|
||||
</QList>
|
||||
</QMenu>
|
||||
</QBtn>
|
||||
<QList>
|
||||
<QItem>
|
||||
<QItemSection>
|
||||
<QToggle
|
||||
v-model="darkMode"
|
||||
checked-icon="dark_mode"
|
||||
unchecked-icon="light_mode"
|
||||
:label="t(`globals.darkMode`)"
|
||||
/>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</QList>
|
||||
</QToolbar>
|
||||
</QHeader>
|
||||
<QPageContainer>
|
||||
<QPage>
|
||||
<div class="form">
|
||||
<QCard class="q-pa-lg formCard">
|
||||
<RouterView></RouterView>
|
||||
</QCard>
|
||||
</div>
|
||||
</QPage>
|
||||
</QPageContainer>
|
||||
</QLayout>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: inherit;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.formCard {
|
||||
max-width: 350px;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-xs-max) {
|
||||
.formCard {
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,12 +1,14 @@
|
|||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { ref, computed } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { toDate } from 'src/filters';
|
||||
|
||||
import TicketDescriptorProxy from 'pages/Ticket/Card/TicketDescriptorProxy.vue';
|
||||
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
|
||||
import ClaimDescriptorMenu from 'pages/Claim/Card/ClaimDescriptorMenu.vue';
|
||||
import CardDescriptor from 'components/ui/CardDescriptor.vue';
|
||||
import VnLv from 'src/components/ui/VnLv.vue';
|
||||
import useCardDescription from 'src/composables/useCardDescription';
|
||||
|
||||
const $props = defineProps({
|
||||
id: {
|
||||
|
|
@ -25,11 +27,29 @@ const entityId = computed(() => {
|
|||
|
||||
const filter = {
|
||||
include: [
|
||||
{ relation: 'client' },
|
||||
{ relation: 'claimState' },
|
||||
{
|
||||
relation: 'client',
|
||||
scope: {
|
||||
include: { relation: 'salesPersonUser' },
|
||||
},
|
||||
},
|
||||
{
|
||||
relation: 'claimState',
|
||||
},
|
||||
{
|
||||
relation: 'ticket',
|
||||
scope: {
|
||||
include: [
|
||||
{ relation: 'zone' },
|
||||
{
|
||||
relation: 'address',
|
||||
scope: {
|
||||
include: { relation: 'province' },
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
relation: 'worker',
|
||||
scope: {
|
||||
|
|
@ -40,10 +60,14 @@ const filter = {
|
|||
};
|
||||
|
||||
function stateColor(code) {
|
||||
if (code === 'pending') return 'green';
|
||||
if (code === 'managed') return 'orange';
|
||||
if (code === 'resolved') return 'red';
|
||||
if (code === 'pending') return 'positive';
|
||||
if (code === 'managed') return 'warning';
|
||||
if (code === 'resolved') return 'negative';
|
||||
}
|
||||
const data = ref(useCardDescription());
|
||||
const setData = (entity) => {
|
||||
data.value = useCardDescription(entity.client.name, entity.id);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -52,54 +76,58 @@ function stateColor(code) {
|
|||
:url="`Claims/${entityId}`"
|
||||
:filter="filter"
|
||||
module="Claim"
|
||||
:title="data.title"
|
||||
:subtitle="data.subtitle"
|
||||
@on-fetch="setData"
|
||||
>
|
||||
<template #menu="{ entity }">
|
||||
<ClaimDescriptorMenu :claim="entity" />
|
||||
</template>
|
||||
<template #description="{ entity }">
|
||||
<span>
|
||||
{{ entity.client.name }}
|
||||
<QTooltip>{{ entity.client.name }}</QTooltip>
|
||||
</span>
|
||||
</template>
|
||||
<template #body="{ entity }">
|
||||
<QList>
|
||||
<QItem>
|
||||
<QItemSection>
|
||||
<QItemLabel caption>{{ t('claim.card.created') }}</QItemLabel>
|
||||
<QItemLabel>{{ toDate(entity.created) }}</QItemLabel>
|
||||
</QItemSection>
|
||||
<QItemSection v-if="entity.claimState">
|
||||
<QItemLabel caption>{{ t('claim.card.state') }}</QItemLabel>
|
||||
<QItemLabel>
|
||||
<QBadge :color="stateColor(entity.claimState.code)" dense>
|
||||
{{ entity.claimState.description }}
|
||||
</QBadge>
|
||||
</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem>
|
||||
<QItemSection>
|
||||
<QItemLabel caption>
|
||||
{{ t('claim.card.ticketId') }}
|
||||
</QItemLabel>
|
||||
<QItemLabel>
|
||||
<span class="link">
|
||||
{{ entity.ticketFk }}
|
||||
|
||||
<TicketDescriptorProxy :id="entity.ticketFk" />
|
||||
</span>
|
||||
</QItemLabel>
|
||||
</QItemSection>
|
||||
<QItemSection v-if="entity.worker">
|
||||
<QItemLabel caption>
|
||||
{{ t('claim.card.assignedTo') }}
|
||||
</QItemLabel>
|
||||
<QItemLabel>{{ entity.worker.user.name }}</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</QList>
|
||||
<VnLv :label="t('claim.card.created')" :value="toDate(entity.created)" />
|
||||
<VnLv v-if="entity.claimState" :label="t('claim.card.state')">
|
||||
<template #value>
|
||||
<QBadge :color="stateColor(entity.claimState.code)" dense>
|
||||
{{ entity.claimState.description }}
|
||||
</QBadge>
|
||||
</template>
|
||||
</VnLv>
|
||||
<VnLv :label="t('claim.card.ticketId')">
|
||||
<template #value>
|
||||
<span class="link">
|
||||
{{ entity.ticketFk }}
|
||||
|
||||
<TicketDescriptorProxy :id="entity.ticketFk" />
|
||||
</span>
|
||||
</template>
|
||||
</VnLv>
|
||||
<VnLv
|
||||
v-if="entity.worker"
|
||||
:label="t('claim.card.assignedTo')"
|
||||
:value="entity.worker.user.name"
|
||||
>
|
||||
<template #value>
|
||||
<span class="link">
|
||||
{{ entity.worker.user.name }}
|
||||
<WorkerDescriptorProxy :id="entity.worker.userFk" />
|
||||
</span>
|
||||
</template>
|
||||
</VnLv>
|
||||
<VnLv :label="t('claim.card.commercial')">
|
||||
<template #value>
|
||||
<span class="link">
|
||||
{{ entity.client.salesPersonUser.name }}
|
||||
<WorkerDescriptorProxy :id="entity.client.salesPersonFk" />
|
||||
</span>
|
||||
</template>
|
||||
</VnLv>
|
||||
<VnLv
|
||||
:label="t('claim.card.province')"
|
||||
:value="entity.ticket.address.province.name"
|
||||
/>
|
||||
<VnLv :label="t('claim.card.zone')" :value="entity.ticket.zone.name" />
|
||||
</template>
|
||||
<template #actions="{ entity }">
|
||||
<QCardActions>
|
||||
<QBtn
|
||||
size="md"
|
||||
|
|
@ -121,3 +149,8 @@ function stateColor(code) {
|
|||
</template>
|
||||
</CardDescriptor>
|
||||
</template>
|
||||
<style scoped>
|
||||
.q-item__label {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { ref, computed } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { toCurrency } from 'src/filters';
|
||||
import CardDescriptor from 'components/ui/CardDescriptor.vue';
|
||||
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
|
||||
import VnLv from 'src/components/ui/VnLv.vue';
|
||||
import useCardDescription from 'src/composables/useCardDescription';
|
||||
|
||||
const $props = defineProps({
|
||||
id: {
|
||||
|
|
@ -20,57 +22,38 @@ const { t } = useI18n();
|
|||
const entityId = computed(() => {
|
||||
return $props.id || route.params.id;
|
||||
});
|
||||
|
||||
const data = ref(useCardDescription());
|
||||
const setData = (entity) => (data.value = useCardDescription(entity.name, entity.id));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CardDescriptor module="Customer" :url="`Clients/${entityId}/getCard`">
|
||||
<CardDescriptor
|
||||
module="Customer"
|
||||
:url="`Clients/${entityId}/getCard`"
|
||||
:title="data.title"
|
||||
:subtitle="data.subtitle"
|
||||
@on-fetch="setData"
|
||||
>
|
||||
<template #body="{ entity }">
|
||||
<QList dense>
|
||||
<QItem v-if="entity.salesPersonUser" class="row">
|
||||
<QItemLabel class="col" caption>
|
||||
{{ t('customer.card.salesPerson') }}
|
||||
</QItemLabel>
|
||||
<QItemLabel class="col q-ma-none">
|
||||
<span class="link">
|
||||
{{ entity.salesPersonUser.name }}
|
||||
<WorkerDescriptorProxy :id="entity.salesPersonFk" />
|
||||
</span>
|
||||
</QItemLabel>
|
||||
</QItem>
|
||||
<QItem class="row">
|
||||
<QItemLabel class="col" caption>
|
||||
{{ t('customer.card.credit') }}
|
||||
</QItemLabel>
|
||||
<QItemLabel class="col q-ma-none">
|
||||
{{ toCurrency(entity.credit) }}
|
||||
</QItemLabel>
|
||||
</QItem>
|
||||
<QItem class="row">
|
||||
<QItemLabel class="col" caption>
|
||||
{{ t('customer.card.securedCredit') }}
|
||||
</QItemLabel>
|
||||
<QItemLabel class="col q-ma-none">
|
||||
{{ toCurrency(entity.creditInsurance) }}
|
||||
</QItemLabel>
|
||||
</QItem>
|
||||
<QItem v-if="entity.payMethod" class="row">
|
||||
<QItemLabel class="col" caption>
|
||||
{{ t('customer.card.payMethod') }}
|
||||
</QItemLabel>
|
||||
<QItemLabel class="col q-ma-none">
|
||||
{{ entity.payMethod.name }}
|
||||
</QItemLabel>
|
||||
</QItem>
|
||||
<QItem class="row">
|
||||
<QItemLabel class="col" caption>
|
||||
{{ t('customer.card.debt') }}
|
||||
</QItemLabel>
|
||||
<QItemLabel class="col q-ma-none">
|
||||
{{ toCurrency(entity.debt) }}
|
||||
</QItemLabel>
|
||||
</QItem>
|
||||
</QList>
|
||||
<QCardActions class="q-gutter-md">
|
||||
<VnLv v-if="entity.salesPersonUser" :label="t('customer.card.salesPerson')">
|
||||
<template #value>
|
||||
<span class="link">
|
||||
{{ entity.salesPersonUser.name }}
|
||||
<WorkerDescriptorProxy :id="entity.salesPersonFk" />
|
||||
</span>
|
||||
</template>
|
||||
</VnLv>
|
||||
<VnLv :label="t('customer.card.credit')" :value="toCurrency(entity.credit)" />
|
||||
<VnLv
|
||||
:label="t('customer.card.securedCredit')"
|
||||
:value="toCurrency(entity.creditInsurance)"
|
||||
/>
|
||||
<VnLv :label="t('customer.card.payMethod')" :value="entity.payMethod.name" />
|
||||
<VnLv :label="t('customer.card.debt')" :value="toCurrency(entity.debt)" />
|
||||
</template>
|
||||
<template #icons="{ entity }">
|
||||
<QCardActions>
|
||||
<QIcon
|
||||
v-if="entity.isActive == false"
|
||||
name="vn:disabled"
|
||||
|
|
@ -103,15 +86,9 @@ const entityId = computed(() => {
|
|||
>
|
||||
<QTooltip>{{ t('customer.card.notChecked') }}</QTooltip>
|
||||
</QIcon>
|
||||
<QIcon
|
||||
v-if="entity.account && entity.account.active == false"
|
||||
name="vn:noweb"
|
||||
size="xs"
|
||||
color="primary"
|
||||
>
|
||||
<QTooltip>{{ t('customer.card.noWebAccess') }}</QTooltip>
|
||||
</QIcon>
|
||||
</QCardActions>
|
||||
</template>
|
||||
<template #actions="{ entity }">
|
||||
<QCardActions>
|
||||
<QBtn
|
||||
:to="{
|
||||
|
|
@ -135,23 +112,10 @@ const entityId = computed(() => {
|
|||
>
|
||||
<QTooltip>{{ t('invoiceOutList') }}</QTooltip>
|
||||
</QBtn>
|
||||
<!--
|
||||
<QBtn size="md" icon="vn:basketadd" color="primary">
|
||||
<QTooltip>Order list</QTooltip>
|
||||
</QBtn>
|
||||
|
||||
<QBtn size="md" icon="face" color="primary">
|
||||
<QTooltip>View user</QTooltip>
|
||||
</QBtn>
|
||||
|
||||
<QBtn size="md" icon="expand_more" color="primary">
|
||||
<QTooltip>More options</QTooltip>
|
||||
</QBtn> -->
|
||||
</QCardActions>
|
||||
</template>
|
||||
</CardDescriptor>
|
||||
</template>
|
||||
|
||||
<i18n>
|
||||
{
|
||||
"en": {
|
||||
|
|
|
|||
|
|
@ -5,12 +5,7 @@ const customer = reactive({
|
|||
name: '',
|
||||
});
|
||||
|
||||
watch(
|
||||
() => customer.name,
|
||||
() => {
|
||||
console.log('customer.name changed');
|
||||
}
|
||||
);
|
||||
watch(() => customer.name);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -90,7 +90,7 @@ const pinnedModules = computed(() => navigation.getPinnedModules());
|
|||
|
||||
<i18n>
|
||||
{
|
||||
"en": {
|
||||
"en": {
|
||||
"pinnedInfo": "Your pinned modules will be shown here..."
|
||||
},
|
||||
"es": {
|
||||
|
|
|
|||
|
|
@ -5,6 +5,8 @@ import { useI18n } from 'vue-i18n';
|
|||
import { toCurrency, toDate } from 'src/filters';
|
||||
import CardDescriptor from 'components/ui/CardDescriptor.vue';
|
||||
import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
|
||||
import VnLv from 'src/components/ui/VnLv.vue';
|
||||
import useCardDescription from 'src/composables/useCardDescription';
|
||||
|
||||
const $props = defineProps({
|
||||
id: {
|
||||
|
|
@ -42,6 +44,8 @@ const filter = {
|
|||
function ticketFilter(invoice) {
|
||||
return JSON.stringify({ refFk: invoice.ref });
|
||||
}
|
||||
const data = ref(useCardDescription());
|
||||
const setData = (entity) => (data.value = useCardDescription(entity.ref, entity.id));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -50,47 +54,31 @@ function ticketFilter(invoice) {
|
|||
module="InvoiceOut"
|
||||
:url="`InvoiceOuts/${entityId}`"
|
||||
:filter="filter"
|
||||
:title="data.title"
|
||||
:subtitle="data.subtitle"
|
||||
@on-fetch="setData"
|
||||
>
|
||||
<template #description="{ entity }">
|
||||
<span>
|
||||
{{ entity.ref }}
|
||||
<QTooltip>{{ entity.ref }}</QTooltip>
|
||||
</span>
|
||||
</template>
|
||||
<template #body="{ entity }">
|
||||
<QList>
|
||||
<QItem>
|
||||
<QItemSection>
|
||||
<QItemLabel caption>
|
||||
{{ t('invoiceOut.card.issued') }}
|
||||
</QItemLabel>
|
||||
<QItemLabel>{{ toDate(entity.issued) }}</QItemLabel>
|
||||
</QItemSection>
|
||||
<QItemSection>
|
||||
<QItemLabel caption>
|
||||
{{ t('invoiceOut.card.amount') }}
|
||||
</QItemLabel>
|
||||
<QItemLabel>{{ toCurrency(entity.amount) }}</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem>
|
||||
<QItemSection v-if="entity.client">
|
||||
<QItemLabel caption>
|
||||
{{ t('invoiceOut.card.client') }}
|
||||
</QItemLabel>
|
||||
<QItemLabel class="link">
|
||||
{{ entity.client.name }}
|
||||
<CustomerDescriptorProxy :id="entity.client.id" />
|
||||
</QItemLabel>
|
||||
</QItemSection>
|
||||
<QItemSection v-if="entity.company">
|
||||
<QItemLabel caption>{{
|
||||
t('invoiceOut.card.company')
|
||||
}}</QItemLabel>
|
||||
<QItemLabel>{{ entity.company.code }}</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</QList>
|
||||
<VnLv :label="t('invoiceOut.card.issued')" :value="toDate(entity.issued)" />
|
||||
<VnLv
|
||||
:label="t('invoiceOut.card.amount')"
|
||||
:value="toCurrency(entity.amount)"
|
||||
/>
|
||||
<VnLv v-if="entity.client" :label="t('invoiceOut.card.client')">
|
||||
<template #value>
|
||||
<span class="link">
|
||||
{{ entity.client.name }}
|
||||
<CustomerDescriptorProxy :id="entity.client.id" />
|
||||
</span>
|
||||
</template>
|
||||
</VnLv>
|
||||
<VnLv
|
||||
v-if="entity.company"
|
||||
:label="t('invoiceOut.card.company')"
|
||||
:value="entity.company.code"
|
||||
/>
|
||||
</template>
|
||||
<template #actions="{ entity }">
|
||||
<QCardActions>
|
||||
<QBtn
|
||||
v-if="entity.client"
|
||||
|
|
|
|||
|
|
@ -1,58 +1,30 @@
|
|||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { Dark, Quasar, useQuasar } from 'quasar';
|
||||
import { ref } from 'vue';
|
||||
import { Notify, useQuasar } from 'quasar';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRouter } from 'vue-router';
|
||||
import axios from 'axios';
|
||||
|
||||
import { useSession } from 'src/composables/useSession';
|
||||
import { useLogin } from 'src/composables/useLogin';
|
||||
|
||||
const quasar = useQuasar();
|
||||
const session = useSession();
|
||||
const loginCache = useLogin();
|
||||
const router = useRouter();
|
||||
const { t, locale } = useI18n();
|
||||
|
||||
const userLocale = computed({
|
||||
get() {
|
||||
return locale.value;
|
||||
},
|
||||
set(value) {
|
||||
locale.value = value;
|
||||
|
||||
if (value === 'en') value = 'en-GB';
|
||||
|
||||
// FIXME: Dynamic imports from absolute paths are not compatible with vite:
|
||||
// https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations
|
||||
try {
|
||||
const langList = import.meta.glob('../../node_modules/quasar/lang/*.mjs');
|
||||
langList[`../../node_modules/quasar/lang/${value}.mjs`]().then((lang) => {
|
||||
Quasar.lang.set(lang.default);
|
||||
});
|
||||
} catch (error) {
|
||||
//
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const darkMode = computed({
|
||||
get() {
|
||||
return Dark.isActive;
|
||||
},
|
||||
set(value) {
|
||||
Dark.set(value);
|
||||
},
|
||||
});
|
||||
const { t } = useI18n();
|
||||
|
||||
const username = ref('');
|
||||
const password = ref('');
|
||||
const keepLogin = ref(true);
|
||||
|
||||
async function onSubmit() {
|
||||
const params = {
|
||||
user: username.value,
|
||||
password: password.value,
|
||||
};
|
||||
try {
|
||||
const { data } = await axios.post('Accounts/login', {
|
||||
user: username.value,
|
||||
password: password.value,
|
||||
});
|
||||
const { data } = await axios.post('Accounts/login', params);
|
||||
|
||||
if (!data) return;
|
||||
|
||||
|
|
@ -69,122 +41,63 @@ async function onSubmit() {
|
|||
} else {
|
||||
router.push({ name: 'Dashboard' });
|
||||
}
|
||||
} catch (e) {
|
||||
//
|
||||
} catch (res) {
|
||||
if (res.response?.data?.error?.code === 'REQUIRES_2FA') {
|
||||
Notify.create({
|
||||
message: t('login.twoFactorRequired'),
|
||||
icon: 'phonelink_lock',
|
||||
type: 'warning',
|
||||
});
|
||||
params.keepLogin = keepLogin.value;
|
||||
loginCache.setUser(params);
|
||||
return router.push({
|
||||
name: 'TwoFactor',
|
||||
query: router.currentRoute.value?.query,
|
||||
});
|
||||
}
|
||||
Notify.create({
|
||||
message: t('login.loginError'),
|
||||
type: 'negative',
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<QLayout>
|
||||
<QPageContainer>
|
||||
<QPage id="login">
|
||||
<QPageSticky position="top-right">
|
||||
<QToolbar>
|
||||
<QBtn
|
||||
id="switchLanguage"
|
||||
:label="t('globals.language')"
|
||||
icon="translate"
|
||||
color="primary"
|
||||
size="sm"
|
||||
flat
|
||||
rounded
|
||||
>
|
||||
<QMenu auto-close>
|
||||
<QList dense>
|
||||
<QItem
|
||||
@click="userLocale = 'en'"
|
||||
:active="userLocale == 'en'"
|
||||
v-ripple
|
||||
clickable
|
||||
>
|
||||
{{ t('globals.lang.en') }}
|
||||
</QItem>
|
||||
<QItem
|
||||
@click="userLocale = 'es'"
|
||||
:active="userLocale == 'es'"
|
||||
v-ripple
|
||||
clickable
|
||||
>
|
||||
{{ t('globals.lang.es') }}
|
||||
</QItem>
|
||||
</QList>
|
||||
</QMenu>
|
||||
</QBtn>
|
||||
<QList>
|
||||
<QItem>
|
||||
<QItemSection>
|
||||
<QItemLabel caption>
|
||||
{{ t(`globals.darkMode`) }}
|
||||
</QItemLabel>
|
||||
</QItemSection>
|
||||
<QItemSection side>
|
||||
<QToggle
|
||||
v-model="darkMode"
|
||||
checked-icon="dark_mode"
|
||||
unchecked-icon="light_mode"
|
||||
/>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</QList>
|
||||
</QToolbar>
|
||||
</QPageSticky>
|
||||
<div class="login-form q-pa-xl">
|
||||
<QImg
|
||||
src="~/assets/logo.svg"
|
||||
alt="Logo"
|
||||
fit="contain"
|
||||
:ratio="16 / 9"
|
||||
class="q-mb-md"
|
||||
/>
|
||||
<QForm @submit="onSubmit" class="q-gutter-md">
|
||||
<QInput
|
||||
v-model="username"
|
||||
:label="t('login.username')"
|
||||
lazy-rules
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val && val.length > 0) || t('login.fieldRequired'),
|
||||
]"
|
||||
/>
|
||||
<QInput
|
||||
type="password"
|
||||
v-model="password"
|
||||
:label="t('login.password')"
|
||||
lazy-rules
|
||||
:rules="[
|
||||
(val) =>
|
||||
(val && val.length > 0) || t('login.fieldRequired'),
|
||||
]"
|
||||
/>
|
||||
<QToggle v-model="keepLogin" :label="t('login.keepLogin')" />
|
||||
<QImg
|
||||
src="~/assets/logo.svg"
|
||||
alt="Logo"
|
||||
fit="contain"
|
||||
:ratio="16 / 9"
|
||||
class="q-mb-md"
|
||||
/>
|
||||
<QForm @submit="onSubmit" class="q-gutter-md q-pa-lg">
|
||||
<QInput
|
||||
v-model="username"
|
||||
:label="t('login.username')"
|
||||
lazy-rules
|
||||
:rules="[(val) => (val && val.length > 0) || t('login.fieldRequired')]"
|
||||
/>
|
||||
<QInput
|
||||
type="password"
|
||||
v-model="password"
|
||||
:label="t('login.password')"
|
||||
lazy-rules
|
||||
:rules="[(val) => (val && val.length > 0) || t('login.fieldRequired')]"
|
||||
/>
|
||||
<QToggle v-model="keepLogin" :label="t('login.keepLogin')" />
|
||||
|
||||
<div>
|
||||
<QBtn
|
||||
:label="t('login.submit')"
|
||||
type="submit"
|
||||
color="primary"
|
||||
class="full-width"
|
||||
rounded
|
||||
unelevated
|
||||
/>
|
||||
</div>
|
||||
</QForm>
|
||||
</div>
|
||||
</QPage>
|
||||
</QPageContainer>
|
||||
</QLayout>
|
||||
<div>
|
||||
<QBtn
|
||||
:label="t('login.submit')"
|
||||
type="submit"
|
||||
color="primary"
|
||||
class="full-width"
|
||||
rounded
|
||||
unelevated
|
||||
/>
|
||||
</div>
|
||||
</QForm>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#login {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: inherit;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
width: 400px;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,80 @@
|
|||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { useQuasar } from 'quasar';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRouter } from 'vue-router';
|
||||
import axios from 'axios';
|
||||
|
||||
import { useSession } from 'src/composables/useSession';
|
||||
import { useLogin } from 'src/composables/useLogin';
|
||||
|
||||
const quasar = useQuasar();
|
||||
const session = useSession();
|
||||
const router = useRouter();
|
||||
const loginCache = useLogin();
|
||||
const { t } = useI18n();
|
||||
|
||||
const code = ref('');
|
||||
const params = loginCache.getUser().value;
|
||||
if (!params.user) {
|
||||
router.push({ name: 'Login' });
|
||||
}
|
||||
|
||||
async function onSubmit() {
|
||||
try {
|
||||
params.code = code.value;
|
||||
const { data } = await axios.post('VnUsers/validate-auth', params);
|
||||
|
||||
if (!data) return;
|
||||
|
||||
await session.login(data.token, params.keepLogin);
|
||||
quasar.notify({
|
||||
message: t('login.loginSuccess'),
|
||||
type: 'positive',
|
||||
});
|
||||
|
||||
const currentRoute = router.currentRoute.value;
|
||||
if (currentRoute.query && currentRoute.query.redirect) {
|
||||
router.push(currentRoute.query.redirect);
|
||||
} else {
|
||||
router.push({ name: 'Dashboard' });
|
||||
}
|
||||
} catch (e) {
|
||||
quasar.notify({
|
||||
message: e.response?.data?.error.message,
|
||||
type: 'negative',
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<QForm @submit="onSubmit" class="q-gutter-md q-pa-lg">
|
||||
<div class="column items-center">
|
||||
<QIcon name="phonelink_lock" size="xl" color="primary" />
|
||||
<h5 class="text-center q-my-md">{{ t('twoFactor.insert') }}</h5>
|
||||
</div>
|
||||
<QInput
|
||||
v-model="code"
|
||||
:hint="t('twoFactor.explanation')"
|
||||
mask="# # # # # #"
|
||||
fill-mask
|
||||
unmasked-value
|
||||
autofocus
|
||||
>
|
||||
<template #prepend>
|
||||
<QIcon name="lock" />
|
||||
</template>
|
||||
</QInput>
|
||||
<div class="q-mt-xl">
|
||||
<QBtn
|
||||
:label="t('twoFactor.validate')"
|
||||
type="submit"
|
||||
color="primary"
|
||||
class="full-width q-mt-md"
|
||||
rounded
|
||||
unelevated
|
||||
/>
|
||||
</div>
|
||||
</QForm>
|
||||
</template>
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -0,0 +1,141 @@
|
|||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
const props = defineProps({
|
||||
dataKey: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const countries = ref();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FetchData url="Countries" @on-fetch="(data) => (countries = data)" auto-load />
|
||||
<VnFilterPanel :data-key="props.dataKey" :search-button="true">
|
||||
<template #tags="{ tag, formatFn }">
|
||||
<div class="q-gutter-x-xs">
|
||||
<strong>{{ t(`params.${tag.label}`) }}: </strong>
|
||||
<span>{{ formatFn(tag.value) }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #body="{ params }">
|
||||
<QList dense>
|
||||
<QItem>
|
||||
<QItemSection>
|
||||
<QInput :label="t('route.cmr.list.cmrFk')" v-model="params.cmrFk" lazy-rules>
|
||||
<template #prepend>
|
||||
<QIcon name="article" size="sm"></QIcon>
|
||||
</template>
|
||||
</QInput>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem>
|
||||
<QItemSection>
|
||||
<QCheckbox
|
||||
:label="t('route.cmr.list.hasCmrDms')"
|
||||
v-model="params.hasCmrDms"
|
||||
lazy-rules
|
||||
/>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem>
|
||||
<QItemSection>
|
||||
<QInput :label="t('route.cmr.list.ticketFk')" v-model="params.ticketFk" lazy-rules>
|
||||
<template #prepend>
|
||||
<QIcon name="vn:ticket" size="sm"></QIcon>
|
||||
</template>
|
||||
</QInput>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem>
|
||||
<QItemSection>
|
||||
<QInput :label="t('route.cmr.list.clientFk')" v-model="params.clientFk" lazy-rules>
|
||||
<template #prepend>
|
||||
<QIcon name="vn:client" size="sm"></QIcon>
|
||||
</template>
|
||||
</QInput>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem>
|
||||
<QItemSection v-if="!countries">
|
||||
<QSkeleton type="QInput" class="full-width" />
|
||||
</QItemSection>
|
||||
<QItemSection v-if="countries">
|
||||
<QSelect
|
||||
:label="t('route.cmr.list.country')"
|
||||
v-model="params.country"
|
||||
:options="countries"
|
||||
option-value="country"
|
||||
option-label="country"
|
||||
transition-show="jump-down"
|
||||
transition-hide="jump-up"
|
||||
emit-value
|
||||
map-options
|
||||
>
|
||||
<template #prepend>
|
||||
<QIcon name="flag" size="sm"></QIcon>
|
||||
</template>
|
||||
</QSelect>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem>
|
||||
<QItemSection>
|
||||
<QInput
|
||||
:label="t('route.cmr.list.shipped')"
|
||||
v-model="params.shipped"
|
||||
mask="date"
|
||||
>
|
||||
<template #append>
|
||||
<QIcon name="event" class="cursor-pointer">
|
||||
<QPopupProxy
|
||||
cover
|
||||
transition-show="rotate"
|
||||
transition-hide="rotate"
|
||||
>
|
||||
<QDate v-model="params.shipped" minimal>
|
||||
<div class="row items-center justify-end q-gutter-sm">
|
||||
<QBtn
|
||||
:label="t('globals.close')"
|
||||
color="primary"
|
||||
flat
|
||||
@click="save"
|
||||
v-close-popup
|
||||
/>
|
||||
</div>
|
||||
</QDate>
|
||||
</QPopupProxy>
|
||||
</QIcon>
|
||||
</template>
|
||||
</QInput>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</QList>
|
||||
</template>
|
||||
</VnFilterPanel>
|
||||
</template>
|
||||
|
||||
<i18n>
|
||||
en:
|
||||
params:
|
||||
cmrFk: Cmr id,
|
||||
hasCmrDms: Attached in gestdoc,
|
||||
ticketFk: Ticketd id,
|
||||
country: Country,
|
||||
clientFk: Client id,
|
||||
shipped: Preparation date,
|
||||
|
||||
es:
|
||||
params:
|
||||
cmrFk: Id cmr,
|
||||
hasCmrDms: Adjuntado en gestdoc,
|
||||
ticketFk: Id ticket,
|
||||
country: País,
|
||||
clientFk: Id cliente,
|
||||
shipped: Fecha preparación,
|
||||
</i18n>
|
||||
|
|
@ -0,0 +1,130 @@
|
|||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useStateStore } from 'stores/useStateStore';
|
||||
import VnPaginate from 'components/ui/VnPaginate.vue';
|
||||
import { useSession } from 'src/composables/useSession';
|
||||
import { toDate } from 'filters/index';
|
||||
import CmrFilter from './CmrFilter.vue';
|
||||
|
||||
const stateStore = useStateStore();
|
||||
const { t } = useI18n();
|
||||
const session = useSession();
|
||||
const token = session.getToken();
|
||||
|
||||
const columns = computed(() => [
|
||||
{
|
||||
name: 'cmrFk',
|
||||
label: t('route.cmr.list.cmrFk'),
|
||||
field: (row) => row.cmrFk,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'hasCmrDms',
|
||||
label: t('route.cmr.list.hasCmrDms'),
|
||||
field: (row) => row.hasCmrDms,
|
||||
align: 'center',
|
||||
sortable: true,
|
||||
headerStyle: 'padding-left: 35px',
|
||||
},
|
||||
{
|
||||
name: 'ticketFk',
|
||||
label: t('route.cmr.list.ticketFk'),
|
||||
field: (row) => row.ticketFk,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'clientFk',
|
||||
label: t('route.cmr.list.clientFk'),
|
||||
field: (row) => row.clientFk,
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'country',
|
||||
label: t('route.cmr.list.country'),
|
||||
field: (row) => row.country,
|
||||
align: 'left',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'shipped',
|
||||
label: t('route.cmr.list.shipped'),
|
||||
field: (row) => toDate(row.shipped),
|
||||
align: 'center',
|
||||
sortable: true,
|
||||
headerStyle: 'padding-left: 33px',
|
||||
},
|
||||
]);
|
||||
function getProjectUrl() {
|
||||
return ((new URL(window.location)).origin);
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<div class="column items-center">
|
||||
<div class="list">
|
||||
<VnPaginate
|
||||
data-key="CmrList"
|
||||
:url="`Routes/getExternalCmrs`"
|
||||
order="cmrFk DESC"
|
||||
limit="null"
|
||||
auto-load
|
||||
>
|
||||
<template #body="{ rows }">
|
||||
<QTable
|
||||
:columns="columns"
|
||||
:rows="rows"
|
||||
:dense="$q.screen.lt.md"
|
||||
:pagination="{ rowsPerPage: null }"
|
||||
hide-pagination
|
||||
:grid="$q.screen.lt.md"
|
||||
auto-load
|
||||
>
|
||||
<template #top>
|
||||
{{ t('route.cmr.list.total', [rows.length]) }}
|
||||
</template>
|
||||
<template #body-cell-cmrFk="{ value }">
|
||||
<QTd align="right" class="text-primary">
|
||||
<a :href="`${getProjectUrl()}/api/Routes/${value}/cmr?access_token=${token}`" target="_blank">
|
||||
<span class="text-primary">{{ value }}</span>
|
||||
</a>
|
||||
</QTd>
|
||||
</template>
|
||||
<template #body-cell-hasCmrDms="{ value }">
|
||||
<QTd align="center">
|
||||
<QBadge
|
||||
:id="(value) ? 'true' : 'false'"
|
||||
:label="(value)
|
||||
? t('route.cmr.list.true')
|
||||
: t('route.cmr.list.false')"
|
||||
/>
|
||||
</QTd>
|
||||
</template>
|
||||
</QTable>
|
||||
</template>
|
||||
</VnPaginate>
|
||||
</div>
|
||||
<QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
|
||||
<QScrollArea class="fit text-grey-8">
|
||||
<CmrFilter data-key="CmrList" />
|
||||
</QScrollArea>
|
||||
</QDrawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.list {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
max-width: 900px;
|
||||
width: 100%;
|
||||
}
|
||||
.grid-style-transition {
|
||||
transition: transform 0.28s, background-color 0.28s;
|
||||
}
|
||||
#true {
|
||||
background-color: $positive;
|
||||
}
|
||||
#false {
|
||||
background-color: $negative;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<script setup>
|
||||
import { useStateStore } from 'stores/useStateStore';
|
||||
import LeftMenu from 'src/components/LeftMenu.vue';
|
||||
|
||||
const stateStore = useStateStore();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
|
||||
<QScrollArea class="fit text-grey-8">
|
||||
<LeftMenu />
|
||||
</QScrollArea>
|
||||
</QDrawer>
|
||||
<QPageContainer>
|
||||
<RouterView></RouterView>
|
||||
</QPageContainer>
|
||||
</template>
|
||||
|
|
@ -1,11 +1,13 @@
|
|||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { ref, computed } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { toDate } from 'src/filters';
|
||||
import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
|
||||
import CardDescriptor from 'components/ui/CardDescriptor.vue';
|
||||
import TicketDescriptorMenu from './TicketDescriptorMenu.vue';
|
||||
import VnLv from 'src/components/ui/VnLv.vue';
|
||||
import useCardDescription from 'src/composables/useCardDescription';
|
||||
|
||||
const $props = defineProps({
|
||||
id: {
|
||||
|
|
@ -66,78 +68,58 @@ const filter = {
|
|||
],
|
||||
};
|
||||
|
||||
function stateColor(state) {
|
||||
if (state.code === 'OK') return 'text-green';
|
||||
if (state.code === 'FREE') return 'text-blue-3';
|
||||
if (state.alertLevel === 1) return 'text-primary';
|
||||
if (state.alertLevel === 0) return 'text-red';
|
||||
}
|
||||
const data = ref(useCardDescription());
|
||||
const setData = (entity) =>
|
||||
(data.value = useCardDescription(entity.client.name, entity.id));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CardDescriptor module="Ticket" :url="`Tickets/${entityId}`" :filter="filter">
|
||||
<CardDescriptor
|
||||
module="Ticket"
|
||||
:url="`Tickets/${entityId}`"
|
||||
:filter="filter"
|
||||
:title="data.title"
|
||||
:subtitle="data.subtitle"
|
||||
@on-fetch="setData"
|
||||
>
|
||||
<template #menu="{ entity }">
|
||||
<TicketDescriptorMenu :ticket="entity" />
|
||||
</template>
|
||||
<template #description="{ entity }">
|
||||
<span>
|
||||
{{ entity.client.name }}
|
||||
<QTooltip>{{ entity.client.name }}</QTooltip>
|
||||
</span>
|
||||
</template>
|
||||
<template #body="{ entity }">
|
||||
<QList>
|
||||
<QItem>
|
||||
<QItemSection v-if="entity.ticketState">
|
||||
<QItemLabel caption>{{ t('ticket.card.state') }}</QItemLabel>
|
||||
<QItemLabel :class="stateColor(entity.ticketState.state)">
|
||||
{{ entity.ticketState.state.name }}
|
||||
</QItemLabel>
|
||||
</QItemSection>
|
||||
<QItemSection>
|
||||
<QItemLabel caption>
|
||||
{{ t('ticket.card.shipped') }}
|
||||
</QItemLabel>
|
||||
<QItemLabel>{{ toDate(entity.shipped) }}</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem>
|
||||
<QItemSection>
|
||||
<QItemLabel caption>
|
||||
{{ t('ticket.card.customerId') }}
|
||||
</QItemLabel>
|
||||
<QItemLabel>
|
||||
<span class="link">
|
||||
{{ entity.clientFk }}
|
||||
<CustomerDescriptorProxy :id="entity.client.id" />
|
||||
</span>
|
||||
</QItemLabel>
|
||||
</QItemSection>
|
||||
<QItemSection v-if="entity.client && entity.client.salesPersonUser">
|
||||
<QItemLabel caption>
|
||||
{{ t('ticket.card.salesPerson') }}
|
||||
</QItemLabel>
|
||||
<QItemLabel>
|
||||
{{ entity.client.salesPersonUser.name }}
|
||||
</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem>
|
||||
<QItemSection v-if="entity.warehouse">
|
||||
<QItemLabel caption>
|
||||
{{ t('ticket.card.warehouse') }}
|
||||
</QItemLabel>
|
||||
<QItemLabel>{{ entity.warehouse.name }}</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem v-if="entity.agencyMode">
|
||||
<QItemSection>
|
||||
<QItemLabel caption>{{ t('ticket.card.agency') }}</QItemLabel>
|
||||
<QItemLabel>{{ entity.agencyMode.name }}</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</QList>
|
||||
<QCardActions class="q-gutter-md">
|
||||
<VnLv v-if="entity.ticketState" :label="t('ticket.card.state')">
|
||||
<template #value>
|
||||
<QBadge :color="entity.ticketState.state.classColor ?? 'dark'">
|
||||
{{ entity.ticketState.state.name }}
|
||||
</QBadge>
|
||||
</template>
|
||||
</VnLv>
|
||||
<VnLv :label="t('ticket.card.shipped')" :value="toDate(entity.shipped)" />
|
||||
<VnLv :label="t('ticket.card.customerId')">
|
||||
<template #value>
|
||||
<span class="link">
|
||||
{{ entity.clientFk }}
|
||||
<CustomerDescriptorProxy :id="entity.client.id" />
|
||||
</span>
|
||||
</template>
|
||||
</VnLv>
|
||||
<VnLv
|
||||
v-if="entity.client && entity.client.salesPersonUser"
|
||||
:label="t('ticket.card.salesPerson')"
|
||||
:value="entity.client.salesPersonUser.name"
|
||||
/>
|
||||
<VnLv
|
||||
v-if="entity.warehouse"
|
||||
:label="t('ticket.card.warehouse')"
|
||||
:value="entity.warehouse.name"
|
||||
/>
|
||||
<VnLv
|
||||
v-if="entity.agencyMode"
|
||||
:label="t('ticket.card.agency')"
|
||||
:value="entity.agencyMode.name"
|
||||
/>
|
||||
</template>
|
||||
<template #icons="{ entity }">
|
||||
<QCardActions>
|
||||
<QIcon
|
||||
v-if="entity.isDeleted == true"
|
||||
name="vn:deletedTicket"
|
||||
|
|
@ -147,7 +129,8 @@ function stateColor(state) {
|
|||
<QTooltip>{{ t('This ticket is deleted') }}</QTooltip>
|
||||
</QIcon>
|
||||
</QCardActions>
|
||||
|
||||
</template>
|
||||
<template #actions="{ entity }">
|
||||
<QCardActions>
|
||||
<QBtn
|
||||
size="md"
|
||||
|
|
|
|||
|
|
@ -135,10 +135,16 @@ async function changeState(value) {
|
|||
<QItemLabel caption>
|
||||
{{ t('ticket.summary.state') }}
|
||||
</QItemLabel>
|
||||
<QItemLabel
|
||||
:class="stateColor(ticket.ticketState.state)"
|
||||
>
|
||||
{{ ticket.ticketState.state.name }}
|
||||
<QItemLabel>
|
||||
<QBadge
|
||||
:color="
|
||||
ticket.ticketState.state.classColor
|
||||
? ticket.ticketState.state.classColor
|
||||
: 'dark'
|
||||
"
|
||||
>
|
||||
{{ ticket.ticketState.state.name }}
|
||||
</QBadge>
|
||||
</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
|
|
|
|||
|
|
@ -18,34 +18,6 @@ const stateStore = useStateStore();
|
|||
onMounted(() => (stateStore.rightDrawer = true));
|
||||
onUnmounted(() => (stateStore.rightDrawer = false));
|
||||
|
||||
const filter = {
|
||||
include: [
|
||||
{
|
||||
relation: 'client',
|
||||
scope: {
|
||||
include: {
|
||||
relation: 'salesPersonUser',
|
||||
scope: {
|
||||
fields: ['name'],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
relation: 'ticketState',
|
||||
scope: {
|
||||
fields: ['stateFk', 'code', 'alertLevel'],
|
||||
include: {
|
||||
relation: 'state',
|
||||
scope: {
|
||||
fields: ['name'],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const from = Date.vnNew();
|
||||
const to = Date.vnNew();
|
||||
to.setDate(to.getDate() + 1);
|
||||
|
|
@ -55,14 +27,6 @@ const userParams = {
|
|||
to: toDateString(to),
|
||||
};
|
||||
|
||||
function stateColor(row) {
|
||||
if (row.alertLevelCode === 'OK') return 'green';
|
||||
if (row.alertLevelCode === 'FREE') return 'blue-3';
|
||||
if (row.alertLevel === 1) return 'orange';
|
||||
if (row.alertLevel === 0) return 'red';
|
||||
return 'red';
|
||||
}
|
||||
|
||||
function navigate(id) {
|
||||
router.push({ path: `/ticket/${id}` });
|
||||
}
|
||||
|
|
@ -112,7 +76,6 @@ function viewSummary(id) {
|
|||
<VnPaginate
|
||||
data-key="TicketList"
|
||||
url="Tickets/filter"
|
||||
:filter="filter"
|
||||
:user-params="userParams"
|
||||
order="id DESC"
|
||||
auto-load
|
||||
|
|
@ -143,7 +106,7 @@ function viewSummary(id) {
|
|||
</QItemLabel>
|
||||
<QItemLabel>
|
||||
<QBadge
|
||||
:color="stateColor(row)"
|
||||
:color="row.classColor ?? 'dark'"
|
||||
class="q-ma-none"
|
||||
dense
|
||||
>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@ import { useRoute } from 'vue-router';
|
|||
import { useI18n } from 'vue-i18n';
|
||||
import { useSession } from 'src/composables/useSession';
|
||||
import CardDescriptor from 'src/components/ui/CardDescriptor.vue';
|
||||
|
||||
import VnLv from 'src/components/ui/VnLv.vue';
|
||||
import useCardDescription from 'src/composables/useCardDescription';
|
||||
const $props = defineProps({
|
||||
id: {
|
||||
type: Number,
|
||||
|
|
@ -52,13 +53,22 @@ function getWorkerAvatar() {
|
|||
const token = getToken();
|
||||
return `/api/Images/user/160x160/${route.params.id}/download?access_token=${token}`;
|
||||
}
|
||||
const data = ref(useCardDescription());
|
||||
const setData = (entity) =>
|
||||
(data.value = useCardDescription(entity.user.nickname, entity.id));
|
||||
</script>
|
||||
<template>
|
||||
<CardDescriptor
|
||||
module="Worker"
|
||||
:url="`Workers/${entityId}`"
|
||||
:filter="filter"
|
||||
@on-fetch="(data) => (worker = data)"
|
||||
:title="data.title"
|
||||
@on-fetch="
|
||||
(data) => {
|
||||
worker = data;
|
||||
setData(data);
|
||||
}
|
||||
"
|
||||
>
|
||||
<template #before>
|
||||
<QImg :src="getWorkerAvatar()" class="photo">
|
||||
|
|
@ -78,55 +88,15 @@ function getWorkerAvatar() {
|
|||
</template>
|
||||
</QImg>
|
||||
</template>
|
||||
<template #description="{ entity }">
|
||||
<span>
|
||||
{{ entity.user.nickname }}
|
||||
<QTooltip>{{ entity.user.nickname }}</QTooltip>
|
||||
</span>
|
||||
</template>
|
||||
<template #body="{ entity }">
|
||||
<QList>
|
||||
<QItem>
|
||||
<QItemSection>
|
||||
<QItemLabel caption> {{ t('worker.card.name') }} </QItemLabel>
|
||||
<QItemLabel>{{ entity.user.nickname }}</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem>
|
||||
<QItemSection>
|
||||
<QItemLabel caption>
|
||||
{{ t('worker.card.email') }}
|
||||
</QItemLabel>
|
||||
<QItemLabel>{{ entity.user.email }}</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem>
|
||||
<QItemSection>
|
||||
<QItemLabel caption>
|
||||
{{ t('worker.list.department') }}
|
||||
</QItemLabel>
|
||||
<QItemLabel>
|
||||
{{ entity.department.department.name }}
|
||||
</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem>
|
||||
<QItemSection>
|
||||
<QItemLabel caption>
|
||||
{{ t('worker.card.phone') }}
|
||||
</QItemLabel>
|
||||
<QItemLabel>{{ entity.phone }}</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
<QItem>
|
||||
<QItemSection>
|
||||
<QItemLabel caption
|
||||
>{{ t('worker.summary.sipExtension') }}
|
||||
</QItemLabel>
|
||||
<QItemLabel>{{ sip }}</QItemLabel>
|
||||
</QItemSection>
|
||||
</QItem>
|
||||
</QList>
|
||||
<VnLv :label="t('worker.card.name')" :value="entity.user.nickname" />
|
||||
<VnLv :label="t('worker.card.email')" :value="entity.user.email"> </VnLv>
|
||||
<VnLv
|
||||
:label="t('worker.list.department')"
|
||||
:value="entity.department ? entity.department.department.name : null"
|
||||
/>
|
||||
<VnLv :label="t('worker.card.phone')" :value="entity.phone" />
|
||||
<VnLv :label="t('worker.summary.sipExtension')" :value="sip" />
|
||||
</template>
|
||||
</CardDescriptor>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -45,8 +45,8 @@ export { Router };
|
|||
export default route(function (/* { store, ssrContext } */) {
|
||||
Router.beforeEach(async (to, from, next) => {
|
||||
const { isLoggedIn } = session;
|
||||
|
||||
if (!isLoggedIn() && to.name !== 'Login') {
|
||||
const outLayout = ['Login', 'TwoFactor'];
|
||||
if (!isLoggedIn() && !outLayout.includes(to.name)) {
|
||||
return next({ name: 'Login', query: { redirect: to.fullPath } });
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import Claim from './claim';
|
|||
import InvoiceOut from './invoiceOut';
|
||||
import Worker from './worker';
|
||||
import Wagon from './wagon';
|
||||
import Route from './route';
|
||||
|
||||
export default [
|
||||
Customer,
|
||||
|
|
@ -11,5 +12,6 @@ export default [
|
|||
Claim,
|
||||
InvoiceOut,
|
||||
Worker,
|
||||
Wagon
|
||||
Wagon,
|
||||
Route
|
||||
]
|
||||
|
|
|
|||
|
|
@ -0,0 +1,35 @@
|
|||
import { RouterView } from 'vue-router';
|
||||
|
||||
export default {
|
||||
path: '/route',
|
||||
name: 'Route',
|
||||
meta: {
|
||||
title: 'routes',
|
||||
icon: 'vn:delivery',
|
||||
},
|
||||
component: RouterView,
|
||||
redirect: { name: 'RouteMain' },
|
||||
menus: {
|
||||
main: ['CmrList'],
|
||||
card: [],
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: '/route',
|
||||
name: 'RouteMain',
|
||||
component: () => import('src/pages/Route/RouteMain.vue'),
|
||||
redirect: { name: 'CmrList' },
|
||||
children: [
|
||||
{
|
||||
path: 'cmr/list',
|
||||
name: 'CmrList',
|
||||
meta: {
|
||||
title: 'cmrsList',
|
||||
icon: 'fact_check',
|
||||
},
|
||||
component: () => import('src/pages/Route/Cmr/CmrList.vue')
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
@ -4,13 +4,26 @@ import claim from './modules/claim';
|
|||
import worker from './modules/worker';
|
||||
import invoiceOut from './modules/invoiceOut';
|
||||
import wagon from './modules/wagon';
|
||||
import route from './modules/route';
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/login',
|
||||
name: 'Login',
|
||||
meta: { title: 'logIn' },
|
||||
component: () => import('../pages/Login/LoginMain.vue'),
|
||||
component: () => import('../layouts/OutLayout.vue'),
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
name: 'Login',
|
||||
meta: { title: 'logIn' },
|
||||
component: () => import('../pages/Login/LoginMain.vue'),
|
||||
},
|
||||
{
|
||||
path: '/twoFactor',
|
||||
name: 'TwoFactor',
|
||||
meta: { title: 'twoFactor' },
|
||||
component: () => import('../pages/Login/TwoFactor.vue'),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/',
|
||||
|
|
@ -35,7 +48,8 @@ const routes = [
|
|||
name: 'NotFound',
|
||||
component: () => import('../pages/NotFound.vue'),
|
||||
},
|
||||
wagon
|
||||
wagon,
|
||||
route,
|
||||
],
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import { useRole } from 'src/composables/useRole';
|
|||
import routes from 'src/router/modules';
|
||||
|
||||
export const useNavigationStore = defineStore('navigationStore', () => {
|
||||
const modules = ['customer', 'claim', 'ticket', 'invoiceOut', 'worker', 'wagon'];
|
||||
const modules = ['customer', 'claim', 'ticket', 'invoiceOut', 'worker', 'wagon', 'route'];
|
||||
const pinnedModules = ref([]);
|
||||
const role = useRole();
|
||||
|
||||
|
|
|
|||
|
|
@ -3,28 +3,37 @@ describe('Login', () => {
|
|||
beforeEach(() => {
|
||||
cy.visit('/#/login');
|
||||
cy.get('#switchLanguage').click();
|
||||
cy.get('div.q-menu div.q-item:nth-child(1)').click();
|
||||
cy.get('.q-menu > :nth-child(1) > .q-item').click();
|
||||
});
|
||||
|
||||
it('should fail to log in using wrong user', () => {
|
||||
cy.get('input[aria-label="Username"]').type('incorrectUser');
|
||||
cy.get('input[aria-label="Password"]').type('nightmare');
|
||||
cy.get('button[type="submit"]').click();
|
||||
cy.get('.q-notification__message').should('have.text', 'Invalid username or password');
|
||||
cy.get('.q-notification__message').should(
|
||||
'have.text',
|
||||
'Invalid username or password'
|
||||
);
|
||||
});
|
||||
|
||||
it('should fail to log in using wrong password', () => {
|
||||
cy.get('input[aria-label="Username"]').type('employee');
|
||||
cy.get('input[aria-label="Password"]').type('wrongPassword');
|
||||
cy.get('button[type="submit"]').click();
|
||||
cy.get('.q-notification__message').should('have.text', 'Invalid username or password');
|
||||
cy.get('.q-notification__message').should(
|
||||
'have.text',
|
||||
'Invalid username or password'
|
||||
);
|
||||
});
|
||||
|
||||
it('should log in', () => {
|
||||
cy.get('input[aria-label="Username"]').type('employee');
|
||||
cy.get('input[aria-label="Password"]').type('nightmare');
|
||||
cy.get('button[type="submit"]').click();
|
||||
cy.get('.q-notification__message').should('have.text', 'You have successfully logged in');
|
||||
cy.get('.q-notification__message').should(
|
||||
'have.text',
|
||||
'You have successfully logged in'
|
||||
);
|
||||
cy.url().should('contain', '/dashboard');
|
||||
});
|
||||
|
||||
|
|
@ -32,7 +41,10 @@ describe('Login', () => {
|
|||
cy.get('input[aria-label="Username"]').type('employee');
|
||||
cy.get('input[aria-label="Password"]').type('nightmare');
|
||||
cy.get('button[type="submit"]').click();
|
||||
cy.get('.q-notification__message').should('have.text', 'You have successfully logged in');
|
||||
cy.get('.q-notification__message').should(
|
||||
'have.text',
|
||||
'You have successfully logged in'
|
||||
);
|
||||
cy.url().should('contain', '/dashboard');
|
||||
cy.get('#user').click();
|
||||
cy.get('#logout').click();
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
describe('WorkerNotificationsManager', () => {
|
||||
xdescribe('WorkerNotificationsManager', () => {
|
||||
beforeEach(() => {
|
||||
const workerId = 1110;
|
||||
cy.viewport(1280, 720);
|
||||
|
|
@ -9,16 +9,25 @@ describe('WorkerNotificationsManager', () => {
|
|||
it('should unsubscribe 2 notifications, check the unsubscription has been saved, subscribe to other one and should check the data has been saved', () => {
|
||||
cy.get('.q-chip').should('have.length', 3);
|
||||
cy.get('.q-toggle__thumb').eq(0).click();
|
||||
cy.get('.q-notification__message').should('have.text', 'Unsubscribed from the notification');
|
||||
cy.get('.q-notification__message').should(
|
||||
'have.text',
|
||||
'Unsubscribed from the notification'
|
||||
);
|
||||
cy.get('.q-chip > .q-icon').eq(0).click();
|
||||
|
||||
cy.reload();
|
||||
|
||||
cy.get('.q-chip').should('have.length', 1);
|
||||
cy.get('.q-toggle__thumb').should('have.length', 3).eq(0).click();
|
||||
cy.get('.q-notification__message').should('have.text', 'Subscribed to the notification');
|
||||
cy.get('.q-notification__message').should(
|
||||
'have.text',
|
||||
'Subscribed to the notification'
|
||||
);
|
||||
cy.get('.q-toggle__thumb').should('have.length', 3).eq(1).click();
|
||||
cy.get('.q-notification__message').should('have.text', 'Subscribed to the notification');
|
||||
cy.get('.q-notification__message').should(
|
||||
'have.text',
|
||||
'Subscribed to the notification'
|
||||
);
|
||||
|
||||
cy.reload();
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue