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

Routing changes

This commit is contained in:
Joan Sanchez 2022-04-19 12:37:47 +02:00
parent 5c20871a71
commit a60351a0e9
13 changed files with 265 additions and 218 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/layouts/MainLayout.vue
View File

@ -13,7 +13,7 @@ import Navbar from 'src/components/Navbar.vue';
<template>
<q-layout view="hHh lpR fFf">
<Navbar @toggle-drawer="onToggleDrawer()" />
<router-view> </router-view>
<router-view></router-view>
</q-layout>
</template>

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

@ -1,7 +1,4 @@
<template>
<slot name="drawer">
<q-drawer v-model="drawer" show-if-above :width="200" :breakpoint="500">
<q-scroll-area class="fit text-grey-8">
<router-link :to="{ path: '/customer/list' }">
@ -9,7 +6,7 @@
</router-link>Descriptor
</q-scroll-area>
</q-drawer>
</slot>
<q-page-container>
<router-view></router-view>
</q-page-container>
</template>

3
src/pages/Customer/CustomerLayout.vue
View File

@ -1,3 +0,0 @@
<template>
<router-view></router-view>
</template>

32
src/pages/Customer/CustomerList.vue
View File

@ -25,14 +25,9 @@ const customers = [
function navigate(id) {
router.push({ path: `/customer/${id}` });
}
// function onToggleDrawer() {
// drawer.value = !drawer.value;
// }
</script>
<template>
<q-page class="q-pa-md">
<div class="column items-center q-gutter-y-md">
<q-card v-for="customer in customers" :key="customer.id" class="card">
@ -97,33 +92,6 @@ function navigate(id) {
</q-card-section>
</div>
</q-slide-transition>
<!-- <q-card-section horizontal>
<q-card-section vertical class="col">
<div class="text-h6">{{ customer.name }}</div>
<div class="text-subtitle2">@{{ customer.username }}</div>
<q-card-section vertical>text</q-card-section>
</q-card-section>
<q-separator vertical />
<q-card-actions vertical class="justify-around">
<q-btn flat round color="red" icon="favorite" />
<q-btn flat round color="accent" icon="bookmark" />
<q-btn color="grey-7" round flat icon="more_vert">
<q-menu cover auto-close>
<q-list>
<q-item clickable>
<q-item-section>Action 1</q-item-section>
</q-item>
<q-item clickable>
<q-item-section>Action 2</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</q-card-actions>
</q-card-section>-->
</q-card>
</div>
</q-page>

1
src/pages/Customer/CustomerMain.vue
View File

@ -15,7 +15,6 @@ const miniState = ref(true);
</q-scroll-area>
</q-drawer>
<q-page-container>
<router-view></router-view>
</q-page-container>
</template>

38
src/pages/Dashboard/Dashboard.vue
View File

@ -1,20 +1,24 @@
<script setup>
import { ref } from 'vue';
import LeftMenu from 'src/components/LeftMenu.vue';
const slide = ref('style');
const slideText = 'Description text';
const drawer = ref(false);
const miniState = ref(true);
</script>
<template>
<q-drawer v-model="drawer" show-if-above :mini="miniState" @mouseover="miniState = false"
@mouseout="miniState = true" mini-to-overlay :width="200" :breakpoint="500">
<q-scroll-area class="fit text-grey-8">
<LeftMenu />
</q-scroll-area>
</q-drawer>
<q-page-container>
<q-page class="q-pa-md">
<q-banner
v-if="$q.screen.gt.xs"
inline-actions
rounded
class="bg-orange text-white q-mb-lg"
>
<q-banner v-if="$q.screen.gt.xs" inline-actions rounded class="bg-orange text-white q-mb-lg">
Employee notification message
<template #action>
<q-btn flat label="Dismiss" />
@ -24,19 +28,9 @@ const slideText = 'Description text';
<div class="row items-start wrap q-col-gutter-md q-mb-lg">
<div class="col-12 col-md">
<div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
<q-carousel
v-model="slide"
transition-prev="scale"
transition-next="scale"
swipeable
animated
control-color="white"
navigation
padding
arrows
height="300px"
class="bg-orange-3 text-white shadow-1 rounded-borders"
>
<q-carousel v-model="slide" transition-prev="scale" transition-next="scale" swipeable animated
control-color="white" navigation padding arrows height="300px"
class="bg-orange-3 text-white shadow-1 rounded-borders">
<q-carousel-slide name="style" class="column no-wrap flex-center">
<q-icon name="style" size="56px" />
<div class="q-mt-md text-center">{{ slideText }}</div>
@ -82,6 +76,8 @@ const slideText = 'Description text';
</div>
</div>
</q-page>
</q-page-container>
</template>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
</style>

17
src/pages/Dashboard/DashboardLayout.vue
View File

@ -1,17 +0,0 @@
<script setup>
import { ref } from 'vue';
import LeftMenu from 'src/components/LeftMenu.vue';
const drawer = ref(false);
const miniState = ref(true);
</script>
<template>
<slot name="drawer">
<q-drawer v-model="drawer" show-if-above :mini="miniState" @mouseover="miniState = false"
@mouseout="miniState = true" mini-to-overlay :width="200" :breakpoint="500">
<q-scroll-area class="fit text-grey-8">
<LeftMenu />
</q-scroll-area>
</q-drawer>
</slot>
<router-view></router-view>
</template>

3
src/pages/Ticket/TicketLayout.vue
View File

@ -1,3 +0,0 @@
<template>
<router-view></router-view>
</template>

105
src/pages/Ticket/TicketList.vue
View File

@ -0,0 +1,105 @@
<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const customers = [
{
id: 1101,
name: 'Bruce Wayne',
username: 'batman',
email: 'batman@gotham',
phone: '555-555-5555',
expanded: ref(false),
},
{
id: 1102,
name: 'James Gordon',
username: 'jamesgordon',
email: 'jamesgordon@gotham',
phone: '555-555-1111',
expanded: ref(false),
},
];
function navigate(id) {
router.push({ path: `/customer/${id}` });
}
</script>
<template>
<q-page class="q-pa-md">
<div class="column items-center q-gutter-y-md">
<q-card v-for="customer in customers" :key="customer.id" class="card">
<!-- v-ripple :to="{ path: '/dashboard' }" -->
<q-item v-ripple class="q-pa-none items-start cursor-pointer q-hoverable">
<q-item-section class="q-pa-md">
<div class="text-h6">{{ customer.name }}</div>
<q-item-label caption>@{{ customer.username }}</q-item-label>
<div class="q-mt-md">
<q-list>
<q-item class="q-pa-none">
<q-item-section>
<q-item-label caption>Email</q-item-label>
<q-item-label>{{ customer.email }}</q-item-label>
</q-item-section>
</q-item>
<q-item class="q-pa-none">
<q-item-section>
<q-item-label caption>Phone</q-item-label>
<q-item-label>{{ customer.phone }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</div>
</q-item-section>
<q-btn color="grey-7" round flat icon="more_vert">
<q-menu cover auto-close>
<q-list>
<q-item clickable>
<q-item-section>Action 1</q-item-section>
</q-item>
<q-item clickable>
<q-item-section>Action 2</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
<q-separator vertical />
<q-card-actions vertical class="justify-between">
<q-btn flat round color="orange" icon="arrow_circle_right" @click="navigate(customer.id)" />
<q-btn flat round color="accent" icon="preview" />
<q-btn flat round color="accent" icon="vn:ticket" />
<q-card-actions>
<q-btn color="grey" round flat dense
:icon="customer.expanded.value ? 'keyboard_arrow_up' : 'keyboard_arrow_down'"
@click="customer.expanded.value = !customer.expanded.value" />
</q-card-actions>
</q-card-actions>
</q-item>
<q-slide-transition>
<div v-show="customer.expanded.value">
<q-separator />
<q-card-section class="text-subitle2">
<q-list>
<q-item clickable>
<q-item-section>
<q-item-label>Address</q-item-label>
<q-item-label caption>Avenue 11</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card-section>
</div>
</q-slide-transition>
</q-card>
</div>
</q-page>
</template>
<style lang="scss" scoped>
.card {
width: 100%;
max-width: 60em;
}
</style>

19
src/pages/Ticket/TicketMain.vue Normal file
View File

@ -0,0 +1,19 @@
<script setup>
import { ref } from 'vue';
import LeftMenu from 'src/components/LeftMenu.vue';
const drawer = ref(false);
const miniState = ref(true);
</script>
<template>
<q-drawer v-model="drawer" show-if-above :mini="miniState" @mouseover="miniState = false"
@mouseout="miniState = true" mini-to-overlay :width="200" :breakpoint="500">
<q-scroll-area class="fit text-grey-8">
<LeftMenu />
</q-scroll-area>
</q-drawer>
<q-page-container>
<router-view></router-view>
</q-page-container>
</template>

20
src/router/modules/customer.js
View File

@ -1,3 +1,5 @@
import { RouterView } from 'vue-router';
export default {
path: '/customer',
name: 'Customer',
@ -6,7 +8,13 @@ export default {
icon: 'vn:client',
roles: ['salesPerson'],
},
component: () => import('src/pages/Customer/CustomerLayout.vue'),
component: RouterView,
redirect: { name: 'CustomerMain' },
children: [
{
path: '',
name: 'CustomerMain',
component: () => import('src/pages/Customer/CustomerMain.vue'),
redirect: { name: 'CustomerList' },
children: [
{
@ -17,13 +25,7 @@ export default {
},
component: () => import('src/pages/Customer/CustomerList.vue'),
},
{
path: 'create',
name: 'CustomerCreate',
meta: {
title: 'create'
},
component: () => import('src/pages/Customer/CustomerCreate.vue'),
]
},
{
path: ':id',
@ -40,5 +42,5 @@ export default {
}
]
},
],
]
};

36
src/router/modules/ticket.js
View File

@ -1,18 +1,46 @@
import { RouterView } from 'vue-router';
export default {
path: '/ticket',
name: 'Ticket',
meta: {
title: 'tickets',
icon: 'vn:ticket',
roles: ['salesPerson'],
},
component: () => import('src/pages/Ticket/TicketLayout.vue'),
redirect: { path: '/ticket/list' },
component: RouterView,
redirect: { name: 'TicketMain' },
children: [
{
path: '',
name: 'TicketMain',
component: () => import('src/pages/Ticket/TicketMain.vue'),
redirect: { name: 'TicketList' },
children: [
{
path: 'list',
name: 'TicketList',
meta: { title: 'list' },
meta: {
title: 'list'
},
component: () => import('src/pages/Ticket/TicketList.vue'),
},
]
},
{
path: ':id',
component: () => import('src/pages/Customer/Card/CustomerCard.vue'),
redirect: { name: 'CustomerBasicData' },
children: [
{
path: 'basic-data',
name: 'CustomerBasicData',
meta: {
title: 'basicData'
},
component: () => import('src/pages/Customer/Card/CustomerBasicData.vue'),
}
],
]
},
]
};

60
src/router/routes.js
View File

@ -1,4 +1,4 @@
//import customer from './modules/customer';
import customer from './modules/customer';
import ticket from './modules/ticket';
const routes = [
@ -18,62 +18,18 @@ const routes = [
path: '/dashboard',
name: 'Dashboard',
meta: { title: 'dashboard', icon: 'dashboard' },
component: () => import('../pages/Dashboard/DashboardLayout.vue'),
component: () => import('../pages/Dashboard/Dashboard.vue'),
},
{
path: '/customer',
name: 'Customer',
meta: {
title: 'customers',
icon: 'vn:client',
roles: ['salesPerson'],
},
component: () => import('src/pages/Customer/CustomerLayout.vue'),
redirect: { name: 'CustomerMain' },
children: [
{
path: '',
name: 'CustomerMain',
component: () => import('src/pages/Customer/CustomerMain.vue'),
redirect: { name: 'CustomerList' },
children: [
{
path: 'list',
name: 'CustomerList',
meta: {
title: 'list'
},
component: () => import('src/pages/Customer/CustomerList.vue'),
},
]
},
{
path: ':id',
component: () => import('src/pages/Customer/Card/CustomerCard.vue'),
redirect: { name: 'CustomerBasicData' },
children: [
{
path: 'basic-data',
name: 'CustomerBasicData',
meta: {
title: 'basicData'
},
component: () => import('src/pages/Customer/Card/CustomerBasicData.vue'),
}
]
},
]
},
/* {
path: '/:pathMatch(.*)*',
name: 'NotFound',
component: () => import('../pages/NotFound.vue'),
}, */
// Module routes
//customer,
customer,
ticket,
],
},
{
path: '/:pathMatch(.*)*',
name: 'NotFound',
component: () => import('../pages/NotFound.vue'),
}
];
export default routes;