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

Merge pull request 'Leftmenu drawer and card drawer' (#11) from drawer-card into dev
gitea/salix-front/pipeline/head This commit looks good Details 

Reviewed-on: #11
This commit is contained in:
Carlos Jimenez Ruiz 2022-04-19 13:34:58 +00:00
parent a96f87d2c9 ab9f19445c
commit 16020e9c16
19 changed files with 385 additions and 190 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.vscode/settings.json vendored
View File

@ -14,5 +14,8 @@
], ],
"[javascript]": { "[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features" "editor.defaultFormatter": "vscode.typescript-language-features"
},
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
} }
} }

5
jsconfig.json
View File

@ -13,5 +13,8 @@
"vue$": ["node_modules/vue/dist/vue.runtime.esm-bundler.js"] "vue$": ["node_modules/vue/dist/vue.runtime.esm-bundler.js"]
} }
}, },
"exclude": ["dist", ".quasar", "node_modules"] "exclude": ["dist", ".quasar", "node_modules"],
"vueCompilerOptions": {
"experimentalDisableTemplateSupport": true
}
} }

9
src/components/Navbar.vue
View File

@ -1,5 +1,3 @@
<script setup> <script setup>
import { useState } from 'src/composables/useState'; import { useState } from 'src/composables/useState';
import { useSession } from 'src/composables/useSession'; import { useSession } from 'src/composables/useSession';
@ -10,14 +8,15 @@ const state = useState();
const user = state.getUser(); const user = state.getUser();
const token = session.getToken(); const token = session.getToken();
defineEmits(['toggle-drawer']); function onToggleDrawer() {
state.drawer.value = !state.drawer.value;
}
</script> </script>
<template> <template>
<q-header class="bg-dark" color="white" elevated bordered> <q-header class="bg-dark" color="white" elevated bordered>
<q-toolbar class="q-py-sm q-px-md"> <q-toolbar class="q-py-sm q-px-md">
<q-btn flat @click="$emit('toggle-drawer')" round dense icon="menu" /> <q-btn flat @click="onToggleDrawer()" round dense icon="menu" />
<router-link to="/"> <router-link to="/">
<q-btn flat round class="q-ml-xs" v-if="$q.screen.gt.xs"> <q-btn flat round class="q-ml-xs" v-if="$q.screen.gt.xs">
<q-avatar square size="md"> <q-avatar square size="md">

3
src/composables/useState.js
View File

@ -8,6 +8,8 @@ const user = ref({
const roles = ref([]); const roles = ref([]);
const drawer = ref(true);
export function useState() { export function useState() {
function getUser() { function getUser() {
return computed(() => { return computed(() => {
@ -42,5 +44,6 @@ export function useState() {
setUser, setUser,
getRoles, getRoles,
setRoles, setRoles,
drawer
}; };
} }

28
src/layouts/MainLayout.vue
View File

@ -1,35 +1,11 @@
<script setup> <script setup>
import { ref } from 'vue';
import Navbar from 'src/components/Navbar.vue'; import Navbar from 'src/components/Navbar.vue';
import LeftMenu from 'src/components/LeftMenu.vue';
const drawer = ref(false);
const miniState = ref(true);
function onToggleDrawer() {
drawer.value = !drawer.value;
}
</script> </script>
<template> <template>
<q-layout view="hHh lpR fFf"> <q-layout view="hHh lpR fFf">
<Navbar @toggle-drawer="onToggleDrawer()" /> <Navbar />
<q-drawer <router-view></router-view>
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>
</q-layout> </q-layout>
</template> </template>

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

@ -1,15 +1,24 @@
<template> <script setup>
<div class="row fit fixed"> import { computed } from 'vue';
<div class="col-2"> import { useState } from 'src/composables/useState';
<q-card square> import { useRouter } from 'vue-router';
<router-link :to="{ path: '/customer/list' }">
<q-icon name="arrow_back" size="md" color="primary" />
</router-link>Descriptor
</q-card>
</div>
<div class="col"> const state = useState();
<router-view></router-view> const router = useRouter();
</div> const entityId = computed(function () {
</div> return router.currentRoute.value.params.id;
});
</script>
<template>
<q-drawer v-model="state.drawer.value" 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>
<div>Customer ID: {{ entityId }}</div>
</q-scroll-area>
</q-drawer>
<q-page-container>
<router-view></router-view>
</q-page-container>
</template> </template>

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

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

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

@ -67,13 +67,7 @@ function navigate(id) {
</q-btn> </q-btn>
<q-separator vertical /> <q-separator vertical />
<q-card-actions vertical class="justify-between"> <q-card-actions vertical class="justify-between">
<q-btn <q-btn flat round color="orange" icon="arrow_circle_right" @click="navigate(customer.id)" />
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="preview" />
<q-btn flat round color="accent" icon="vn:ticket" /> <q-btn flat round color="accent" icon="vn:ticket" />
<q-card-actions> <q-card-actions>
@ -103,33 +97,6 @@ function navigate(id) {
</q-card-section> </q-card-section>
</div> </div>
</q-slide-transition> </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> </q-card>
</div> </div>
</q-page> </q-page>

28
src/pages/Customer/CustomerMain.vue Normal file
View File

@ -0,0 +1,28 @@
<script setup>
import { ref } from 'vue';
import { useState } from 'src/composables/useState';
import LeftMenu from 'src/components/LeftMenu.vue';
const state = useState();
const miniState = ref(true);
</script>
<template>
<q-drawer
v-model="state.drawer.value"
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>

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

@ -1,87 +1,101 @@
<script setup> <script setup>
import { ref } from 'vue'; import { ref } from 'vue';
import { useState } from 'src/composables/useState';
import LeftMenu from 'src/components/LeftMenu.vue';
const state = useState();
const miniState = ref(true);
const slide = ref('style'); const slide = ref('style');
const slideText = 'Description text'; const slideText = 'Description text';
</script> </script>
<template> <template>
<q-page class="q-pa-md"> <q-drawer
<q-banner v-model="state.drawer.value"
v-if="$q.screen.gt.xs" show-if-above
inline-actions :mini="miniState"
rounded @mouseover="miniState = false"
class="bg-orange text-white q-mb-lg" @mouseout="miniState = true"
> mini-to-overlay
Employee notification message :width="200"
<template #action> :breakpoint="500"
<q-btn flat label="Dismiss" /> >
</template> <q-scroll-area class="fit text-grey-8">
</q-banner> <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="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" v-model="slide"
transition-prev="scale" transition-prev="scale"
transition-next="scale" transition-next="scale"
swipeable swipeable
animated animated
control-color="white" control-color="white"
navigation navigation
padding padding
arrows arrows
height="300px" height="300px"
class="bg-orange-3 text-white shadow-1 rounded-borders" class="bg-orange-3 text-white shadow-1 rounded-borders"
> >
<q-carousel-slide name="style" class="column no-wrap flex-center"> <q-carousel-slide name="style" class="column no-wrap flex-center">
<q-icon name="style" size="56px" /> <q-icon name="style" size="56px" />
<div class="q-mt-md text-center">{{ slideText }}</div> <div class="q-mt-md text-center">{{ slideText }}</div>
</q-carousel-slide> </q-carousel-slide>
<q-carousel-slide name="tv" class="column no-wrap flex-center"> <q-carousel-slide name="tv" class="column no-wrap flex-center">
<q-icon name="live_tv" size="56px" /> <q-icon name="live_tv" size="56px" />
<div class="q-mt-md text-center">{{ slideText }}</div> <div class="q-mt-md text-center">{{ slideText }}</div>
</q-carousel-slide> </q-carousel-slide>
<q-carousel-slide name="layers" class="column no-wrap flex-center"> <q-carousel-slide name="layers" class="column no-wrap flex-center">
<q-icon name="layers" size="56px" /> <q-icon name="layers" size="56px" />
<div class="q-mt-md text-center">{{ slideText }}</div> <div class="q-mt-md text-center">{{ slideText }}</div>
</q-carousel-slide> </q-carousel-slide>
<q-carousel-slide name="map" class="column no-wrap flex-center"> <q-carousel-slide name="map" class="column no-wrap flex-center">
<q-icon name="terrain" size="56px" /> <q-icon name="terrain" size="56px" />
<div class="q-mt-md text-center">{{ slideText }}</div> <div class="q-mt-md text-center">{{ slideText }}</div>
</q-carousel-slide> </q-carousel-slide>
</q-carousel> </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>
<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>
<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>
</div> </q-page>
</q-page> </q-page-container>
</template> </template>
<style lang="scss" scoped></style> <style lang="scss" scoped></style>

3
src/pages/Ticket/Card/TicketBasicData.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<q-card>Basic Data</q-card>
</template>

24
src/pages/Ticket/Card/TicketCard.vue Normal file
View File

@ -0,0 +1,24 @@
<script setup>
import { computed } from 'vue';
import { useState } from 'src/composables/useState';
import { useRouter } from 'vue-router';
const state = useState();
const router = useRouter();
const entityId = computed(function () {
return router.currentRoute.value.params.id;
});
</script>
<template>
<q-drawer v-model="state.drawer.value" 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>
<div>Customer ID: {{ entityId }}</div>
</q-scroll-area>
</q-drawer>
<q-page-container>
<router-view></router-view>
</q-page-container>
</template>

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

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

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

@ -0,0 +1,110 @@
<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>

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

@ -0,0 +1,28 @@
<script setup>
import { ref } from 'vue';
import { useState } from 'src/composables/useState';
import LeftMenu from 'src/components/LeftMenu.vue';
const state = useState();
const miniState = ref(true);
</script>
<template>
<q-drawer
v-model="state.drawer.value"
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>

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

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

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

@ -1,18 +1,46 @@
import { RouterView } from 'vue-router';
export default { export default {
path: '/ticket', path: '/ticket',
name: 'Ticket', name: 'Ticket',
meta: { meta: {
title: 'tickets', title: 'tickets',
icon: 'vn:ticket', icon: 'vn:ticket',
roles: ['salesPerson'],
}, },
component: () => import('src/pages/Ticket/TicketLayout.vue'), component: RouterView,
redirect: { path: '/ticket/list' }, redirect: { name: 'TicketMain' },
children: [ 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/Ticket/Card/TicketCard.vue'),
redirect: { name: 'TicketBasicData' },
children: [
{
path: 'basic-data',
name: 'TicketBasicData',
meta: {
title: 'basicData'
},
component: () => import('src/pages/Ticket/Card/TicketBasicData.vue'),
}
]
},
]
}; };

10
src/router/routes.js
View File

@ -20,16 +20,16 @@ const routes = [
meta: { title: 'dashboard', icon: 'dashboard' }, meta: { title: 'dashboard', icon: 'dashboard' },
component: () => import('../pages/Dashboard/Dashboard.vue'), component: () => import('../pages/Dashboard/Dashboard.vue'),
}, },
/* {
path: '/:pathMatch(.*)*',
name: 'NotFound',
component: () => import('../pages/NotFound.vue'),
}, */
// Module routes // Module routes
customer, customer,
ticket, ticket,
], ],
}, },
{
path: '/:pathMatch(.*)*',
name: 'NotFound',
component: () => import('../pages/NotFound.vue'),
}
]; ];
export default routes; export default routes;

4
src/types/route.ts
View File

@ -1,4 +0,0 @@
export interface Route {
path: string;
component: any;
}