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

Merge pull request 'Leftmenu drawer and card drawer' (#11) from drawer-card into dev 

Reviewed-on: verdnatura/salix-front#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]": {
"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"]
}
},
"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>
import { useState } from 'src/composables/useState';
import { useSession } from 'src/composables/useSession';
@ -10,14 +8,15 @@ const state = useState();
const user = state.getUser();
const token = session.getToken();
defineEmits(['toggle-drawer']);
function onToggleDrawer() {
state.drawer.value = !state.drawer.value;
}
</script>
<template>
<q-header class="bg-dark" color="white" elevated bordered>
<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="/">
<q-btn flat round class="q-ml-xs" v-if="$q.screen.gt.xs">
<q-avatar square size="md">

3
src/composables/useState.js
View File

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

28
src/layouts/MainLayout.vue
View File

@ -1,35 +1,11 @@
<script setup>
import { ref } from '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>
<template>
<q-layout view="hHh lpR fFf">
<Navbar @toggle-drawer="onToggleDrawer()" />
<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>
<Navbar />
<router-view></router-view>
</q-layout>
</template>

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

@ -1,15 +1,24 @@
<template>
<div class="row fit fixed">
<div class="col-2">
<q-card square>
<router-link :to="{ path: '/customer/list' }">
<q-icon name="arrow_back" size="md" color="primary" />
</router-link>Descriptor
</q-card>
</div>
<script setup>
import { computed } from 'vue';
import { useState } from 'src/composables/useState';
import { useRouter } from 'vue-router';
<div class="col">
<router-view></router-view>
</div>
</div>
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/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-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="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>
@ -103,33 +97,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>

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>
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 slideText = 'Description text';
</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="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>
<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>

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 {
path: '/customer',
name: 'Customer',
@ -6,24 +8,32 @@ 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: 'create',
name: 'CustomerCreate',
meta: {
title: 'create'
},
component: () => import('src/pages/Customer/CustomerCreate.vue'),
},
]
},
{
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 {
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/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' },
component: () => import('../pages/Dashboard/Dashboard.vue'),
},
/* {
path: '/:pathMatch(.*)*',
name: 'NotFound',
component: () => import('../pages/NotFound.vue'),
}, */
// Module routes
customer,
ticket,
],
},
{
path: '/:pathMatch(.*)*',
name: 'NotFound',
component: () => import('../pages/NotFound.vue'),
}
];
export default routes;

4
src/types/route.ts
View File

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