Routing changes

src/layouts/MainLayout.vue

@@ -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>
 

src/pages/Customer/Card/CustomerCard.vue

@@ -1,15 +1,12 @@
-
-
 <template>
-    <slot name="drawer">
+    <q-drawer v-model="drawer" show-if-above :width="200" :breakpoint="500">
-        <q-drawer v-model="drawer" show-if-above :width="200" :breakpoint="500">
+        <q-scroll-area class="fit text-grey-8">
-            <q-scroll-area class="fit text-grey-8">
+            <router-link :to="{ path: '/customer/list' }">
-                <router-link :to="{ path: '/customer/list' }">
+                <q-icon name="arrow_back" size="md" color="primary" />
-                    <q-icon name="arrow_back" size="md" color="primary" />
+            </router-link>Descriptor
-                </router-link>Descriptor
+        </q-scroll-area>
-            </q-scroll-area>
+    </q-drawer>
-        </q-drawer>
+    <q-page-container>
-
+        <router-view></router-view>
-    </slot>
+    </q-page-container>
-    <router-view></router-view>
 </template>

src/pages/Customer/CustomerLayout.vue

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

src/pages/Customer/CustomerList.vue

@@ -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>

src/pages/Customer/CustomerMain.vue

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

src/pages/Dashboard/Dashboard.vue

@@ -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-drawer v-model="drawer" show-if-above :mini="miniState" @mouseover="miniState = false"
-        <q-banner
+        @mouseout="miniState = true" mini-to-overlay :width="200" :breakpoint="500">
-            v-if="$q.screen.gt.xs"
+        <q-scroll-area class="fit text-grey-8">
-            inline-actions
+            <LeftMenu />
-            rounded
+        </q-scroll-area>
-            class="bg-orange text-white q-mb-lg"
+    </q-drawer>
-        >
+    <q-page-container>
-            Employee notification message
+        <q-page class="q-pa-md">
-            <template #action>
+            <q-banner v-if="$q.screen.gt.xs" inline-actions rounded class="bg-orange text-white q-mb-lg">
-                <q-btn flat label="Dismiss" />
+                Employee notification message
-            </template>
+                <template #action>
-        </q-banner>
+                    <q-btn flat label="Dismiss" />
+                </template>
+            </q-banner>
 
-        <div class="row items-start wrap q-col-gutter-md q-mb-lg">
+            <div class="row items-start wrap q-col-gutter-md q-mb-lg">
-            <div class="col-12 col-md">
+                <div class="col-12 col-md">
-                <div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
+                    <div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
-                <q-carousel
+                    <q-carousel v-model="slide" transition-prev="scale" transition-next="scale" swipeable animated
-                    v-model="slide"
+                        control-color="white" navigation padding arrows height="300px"
-                    transition-prev="scale"
+                        class="bg-orange-3 text-white shadow-1 rounded-borders">
-                    transition-next="scale"
+                        <q-carousel-slide name="style" class="column no-wrap flex-center">
-                    swipeable
+                            <q-icon name="style" size="56px" />
-                    animated
+                            <div class="q-mt-md text-center">{{ slideText }}</div>
-                    control-color="white"
+                        </q-carousel-slide>
-                    navigation
+                        <q-carousel-slide name="tv" class="column no-wrap flex-center">
-                    padding
+                            <q-icon name="live_tv" size="56px" />
-                    arrows
+                            <div class="q-mt-md text-center">{{ slideText }}</div>
-                    height="300px"
+                        </q-carousel-slide>
-                    class="bg-orange-3 text-white shadow-1 rounded-borders"
+                        <q-carousel-slide name="layers" class="column no-wrap flex-center">
-                >
+                            <q-icon name="layers" size="56px" />
-                    <q-carousel-slide name="style" class="column no-wrap flex-center">
+                            <div class="q-mt-md text-center">{{ slideText }}</div>
-                        <q-icon name="style" size="56px" />
+                        </q-carousel-slide>
-                        <div class="q-mt-md text-center">{{ slideText }}</div>
+                        <q-carousel-slide name="map" class="column no-wrap flex-center">
-                    </q-carousel-slide>
+                            <q-icon name="terrain" size="56px" />
-                    <q-carousel-slide name="tv" class="column no-wrap flex-center">
+                            <div class="q-mt-md text-center">{{ slideText }}</div>
-                        <q-icon name="live_tv" size="56px" />
+                        </q-carousel-slide>
-                        <div class="q-mt-md text-center">{{ slideText }}</div>
+                    </q-carousel>
-                    </q-carousel-slide>
+                </div>
-                    <q-carousel-slide name="layers" class="column no-wrap flex-center">
+                <div class="col-12 col-md">
-                        <q-icon name="layers" size="56px" />
+                    <div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
-                        <div class="q-mt-md text-center">{{ slideText }}</div>
+                    <q-card class="q-pa-md">Dashboard page..</q-card>
-                    </q-carousel-slide>
+                </div>
-                    <q-carousel-slide name="map" class="column no-wrap flex-center">
+                <div class="col-12 col-md">
-                        <q-icon name="terrain" size="56px" />
+                    <div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
-                        <div class="q-mt-md text-center">{{ slideText }}</div>
+                    <q-card class="q-pa-md">Dashboard page..</q-card>
-                    </q-carousel-slide>
+                </div>
-                </q-carousel>
             </div>
-            <div class="col-12 col-md">
+            <div class="row items-start q-col-gutter-md q-mb-lg">
-                <div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
+                <div class="col-12 col-md">
-                <q-card class="q-pa-md">Dashboard page..</q-card>
+                    <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="row items-start q-col-gutter-md q-mb-lg">
-            <div class="col">
+                <div class="col">
-                <div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
+                    <div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
-                <q-card class="q-pa-md">Dashboard page..</q-card>
+                    <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>

src/pages/Dashboard/DashboardLayout.vue

@@ -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>

src/pages/Ticket/TicketLayout.vue

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

src/pages/Ticket/TicketList.vue

@@ -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>

src/pages/Ticket/TicketMain.vue

@@ -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>

src/router/modules/customer.js

@@ -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'),
+    component: RouterView,
-    redirect: { name: 'CustomerList' },
+    redirect: { name: 'CustomerMain' },
     children: [
         {
-            path: 'list',
+            path: '',
-            name: 'CustomerList',
+            name: 'CustomerMain',
-            meta: {
+            component: () => import('src/pages/Customer/CustomerMain.vue'),
-                title: 'list'
+            redirect: { name: 'CustomerList' },
-            },
+            children: [
-            component: () => import('src/pages/Customer/CustomerList.vue'),
+                {
-        },
+                    path: 'list',
-        {
+                    name: 'CustomerList',
-            path: 'create',
+                    meta: {
-            name: 'CustomerCreate',
+                        title: 'list'
-            meta: {
+                    },
-                title: 'create'
+                    component: () => import('src/pages/Customer/CustomerList.vue'),
-            },
+                },
-            component: () => import('src/pages/Customer/CustomerCreate.vue'),
+            ]
         },
         {
             path: ':id',
@@ -40,5 +42,5 @@ export default {
                 }
             ]
         },
-    ],
+    ]
 };

src/router/modules/ticket.js

@@ -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'),
+    component: RouterView,
-    redirect: { path: '/ticket/list' },
+    redirect: { name: 'TicketMain' },
     children: [
         {
-            path: 'list',
+            path: '',
-            name: 'TicketList',
+            name: 'TicketMain',
-            meta: { title: 'list' },
+            component: () => import('src/pages/Ticket/TicketMain.vue'),
-            component: () => import('src/pages/Ticket/TicketList.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'),
+                }
+            ]
+        },
+    ]
 };

src/router/routes.js

@@ -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;