verdnatura/salix-front
verdnatura
/
salix-front
2
2
Fork 1
Code Issues Pull Requests 99 Releases Wiki Activity

Added customer module routing structure

This commit is contained in:
Joan Sanchez 2022-03-09 10:48:42 +01:00
parent f6d75ec944
commit 3d0ef52ff6
4 changed files with 78 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/router/index.ts
View File

@ -22,6 +22,19 @@ const routes: Array<RouteRecordRaw> = [
path: '/customer', path: '/customer',
name: 'Customer', name: 'Customer',
component: () => import('../views/Customer/Customer.vue'), component: () => import('../views/Customer/Customer.vue'),
redirect: { name: 'List' },
children: [
{
path: 'list',
name: 'List',
component: () => import('../views/Customer/List.vue'),
},
{
path: ':id',
name: 'Card',
component: () => import('../views/Customer/Card/Card.vue'),
},
],
}, },
{ {
path: '/:pathMatch(.*)*', path: '/:pathMatch(.*)*',

1
src/views/Customer/Card/Card.vue Normal file
View File

@ -0,0 +1 @@
<template>Customer card...</template>

6
src/views/Customer/Customer.vue
View File

@ -1,7 +1,3 @@
<template> <template>
<q-page class="q-pa-md"> <router-view></router-view>
<q-card class="q-pa-md"> Customer page.. </q-card>
</q-page>
</template> </template>
<style lang="scss" scoped></style>

63
src/views/Customer/List.vue Normal file
View File

@ -0,0 +1,63 @@
<template>
<q-page class="q-pa-md">
<div class="column items-center justify-evenly">
<router-link to="/customer/123"></router-link>
<q-card class="card col-6" v-for="customer in customers" :key="customer.id">
<q-card-section clickable>
<div class="row items-center no-wrap">
<div class="col">
<div class="text-h6">{{ customer.name }}</div>
<div class="text-subtitle2">@{{ customer.username }}</div>
</div>
<div class="col-auto">
<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>
</div>
</div>
</q-card-section>
<q-card-section> Labels.. </q-card-section>
<q-separator />
<q-card-actions>
<q-btn flat>Action 1</q-btn>
<q-btn flat>Action 2</q-btn>
</q-card-actions>
</q-card>
</div>
</q-page>
</template>
<script lang="ts" setup>
const customers = [
{
id: 1101,
name: 'Bruce Wayne',
username: 'batman',
},
{
id: 1102,
name: 'James Gordon',
username: 'jamesgordon',
},
];
</script>
<style lang="scss" scoped>
.card {
width: 100%;
max-width: 60em;
}
</style>