forked from verdnatura/salix-front
Routing changes
This commit is contained in:
parent
5c20871a71
commit
a60351a0e9
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,15 +1,12 @@
|
|||
|
||||
|
||||
<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' }">
|
||||
<q-icon name="arrow_back" size="md" color="primary" />
|
||||
</router-link>Descriptor
|
||||
</q-scroll-area>
|
||||
</q-drawer>
|
||||
|
||||
</slot>
|
||||
<router-view></router-view>
|
||||
<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' }">
|
||||
<q-icon name="arrow_back" size="md" color="primary" />
|
||||
</router-link>Descriptor
|
||||
</q-scroll-area>
|
||||
</q-drawer>
|
||||
<q-page-container>
|
||||
<router-view></router-view>
|
||||
</q-page-container>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
<template>
|
||||
<router-view></router-view>
|
||||
</template>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,6 @@ const miniState = ref(true);
|
|||
</q-scroll-area>
|
||||
</q-drawer>
|
||||
<q-page-container>
|
||||
|
||||
<router-view></router-view>
|
||||
</q-page-container>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,87 +1,83 @@
|
|||
<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-page class="q-pa-md">
|
||||
<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" />
|
||||
</template>
|
||||
</q-banner>
|
||||
<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">
|
||||
Employee notification message
|
||||
<template #action>
|
||||
<q-btn flat label="Dismiss" />
|
||||
</template>
|
||||
</q-banner>
|
||||
|
||||
<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-slide name="style" class="column no-wrap flex-center">
|
||||
<q-icon name="style" size="56px" />
|
||||
<div class="q-mt-md text-center">{{ slideText }}</div>
|
||||
</q-carousel-slide>
|
||||
<q-carousel-slide name="tv" class="column no-wrap flex-center">
|
||||
<q-icon name="live_tv" size="56px" />
|
||||
<div class="q-mt-md text-center">{{ slideText }}</div>
|
||||
</q-carousel-slide>
|
||||
<q-carousel-slide name="layers" class="column no-wrap flex-center">
|
||||
<q-icon name="layers" size="56px" />
|
||||
<div class="q-mt-md text-center">{{ slideText }}</div>
|
||||
</q-carousel-slide>
|
||||
<q-carousel-slide name="map" class="column no-wrap flex-center">
|
||||
<q-icon name="terrain" size="56px" />
|
||||
<div class="q-mt-md text-center">{{ slideText }}</div>
|
||||
</q-carousel-slide>
|
||||
</q-carousel>
|
||||
<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-slide name="style" class="column no-wrap flex-center">
|
||||
<q-icon name="style" size="56px" />
|
||||
<div class="q-mt-md text-center">{{ slideText }}</div>
|
||||
</q-carousel-slide>
|
||||
<q-carousel-slide name="tv" class="column no-wrap flex-center">
|
||||
<q-icon name="live_tv" size="56px" />
|
||||
<div class="q-mt-md text-center">{{ slideText }}</div>
|
||||
</q-carousel-slide>
|
||||
<q-carousel-slide name="layers" class="column no-wrap flex-center">
|
||||
<q-icon name="layers" size="56px" />
|
||||
<div class="q-mt-md text-center">{{ slideText }}</div>
|
||||
</q-carousel-slide>
|
||||
<q-carousel-slide name="map" class="column no-wrap flex-center">
|
||||
<q-icon name="terrain" size="56px" />
|
||||
<div class="q-mt-md text-center">{{ slideText }}</div>
|
||||
</q-carousel-slide>
|
||||
</q-carousel>
|
||||
</div>
|
||||
<div class="col-12 col-md">
|
||||
<div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
|
||||
<q-card class="q-pa-md">Dashboard page..</q-card>
|
||||
</div>
|
||||
<div class="col-12 col-md">
|
||||
<div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
|
||||
<q-card class="q-pa-md">Dashboard page..</q-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md">
|
||||
<div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
|
||||
<q-card class="q-pa-md">Dashboard page..</q-card>
|
||||
<div class="row items-start 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-card class="q-pa-md">Dashboard page..</q-card>
|
||||
</div>
|
||||
<div class="col-12 col-md">
|
||||
<div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
|
||||
<q-card class="q-pa-md">Dashboard page..</q-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md">
|
||||
<div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
|
||||
<q-card class="q-pa-md">Dashboard page..</q-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row items-start 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-card class="q-pa-md">Dashboard page..</q-card>
|
||||
</div>
|
||||
<div class="col-12 col-md">
|
||||
<div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
|
||||
<q-card class="q-pa-md">Dashboard page..</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row items-start q-col-gutter-md q-mb-lg">
|
||||
<div class="col">
|
||||
<div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
|
||||
<q-card class="q-pa-md">Dashboard page..</q-card>
|
||||
<div class="row items-start q-col-gutter-md q-mb-lg">
|
||||
<div class="col">
|
||||
<div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
|
||||
<q-card class="q-pa-md">Dashboard page..</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-page>
|
||||
</q-page>
|
||||
</q-page-container>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
<template>
|
||||
<router-view></router-view>
|
||||
</template>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
import { RouterView } from 'vue-router';
|
||||
|
||||
export default {
|
||||
path: '/customer',
|
||||
name: 'Customer',
|
||||
|
|
@ -6,24 +8,24 @@ export default {
|
|||
icon: 'vn:client',
|
||||
roles: ['salesPerson'],
|
||||
},
|
||||
component: () => import('src/pages/Customer/CustomerLayout.vue'),
|
||||
redirect: { name: 'CustomerList' },
|
||||
component: RouterView,
|
||||
redirect: { name: 'CustomerMain' },
|
||||
children: [
|
||||
{
|
||||
path: 'list',
|
||||
name: 'CustomerList',
|
||||
meta: {
|
||||
title: 'list'
|
||||
},
|
||||
component: () => import('src/pages/Customer/CustomerList.vue'),
|
||||
},
|
||||
{
|
||||
path: 'create',
|
||||
name: 'CustomerCreate',
|
||||
meta: {
|
||||
title: 'create'
|
||||
},
|
||||
component: () => import('src/pages/Customer/CustomerCreate.vue'),
|
||||
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',
|
||||
|
|
@ -40,5 +42,5 @@ export default {
|
|||
}
|
||||
]
|
||||
},
|
||||
],
|
||||
]
|
||||
};
|
||||
|
|
@ -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: 'list',
|
||||
name: 'TicketList',
|
||||
meta: { title: 'list' },
|
||||
component: () => import('src/pages/Ticket/TicketList.vue'),
|
||||
}
|
||||
],
|
||||
path: '',
|
||||
name: 'TicketMain',
|
||||
component: () => import('src/pages/Ticket/TicketMain.vue'),
|
||||
redirect: { name: 'TicketList' },
|
||||
children: [
|
||||
{
|
||||
path: 'list',
|
||||
name: 'TicketList',
|
||||
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'),
|
||||
}
|
||||
]
|
||||
},
|
||||
]
|
||||
};
|
||||
|
|
@ -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;
|
||||
Loading…
Reference in New Issue