surya/freeplanet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- (Part 2 - Upgrade Components Quasar)

Browse Source
This commit is contained in:
Paolo Arena
2019-03-13 01:53:53 +01:00
parent 74ecc4f278
commit 67748ce94f
20 changed files with 570 additions and 526 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
src/layouts/drawer/drawer.ts
View File

@@ -1,12 +1,11 @@
import menuOne from './menuOne.vue'
import menuOne from '../menuone/menuOne.vue'
import Vue from 'vue'
import { Component, Watch, Prop } from 'vue-property-decorator'
import { Store } from 'vuex'
import { UserStore } from '@modules'
import { GlobalStore } from '@modules'
import { ITodoList } from '../../model'
import Vue from 'vue'
import { Component, Prop } from 'vue-property-decorator'
const namespace: string = 'GlobalModule'
@Component({
components: {
@@ -16,81 +15,9 @@ import { ITodoList } from '../../model'
export default class Drawer extends Vue {
public $q
$t: any
public arrlista = GlobalStore.state.listatodo
photo = ''
user = null
links
created() {
let listatodo = []
this.arrlista.forEach((elem: ITodoList) => {
let item = {
route: '/todo/' + elem.namecat,
faIcon: 'fa fa-list-alt',
materialIcon: 'todo',
name: 'pages.' + elem.description
}
listatodo.push(item)
})
if (UserStore.state.isAdmin) {
this.links = {
Dashboard: {
routes: [
{ route: '/', faIcon: 'fa fa-home', materialIcon: 'home', name: 'pages.home' },
{
route: '/todo', faIcon: 'fa fa-list-alt', materialIcon: 'todo', name: 'pages.Todo',
routes2: listatodo
},
{ route: '/category', faIcon: 'fa fa-list-alt', materialIcon: 'category', name: 'pages.Category' },
// { route: '/signup', faIcon: 'fa fa-registered', materialIcon: 'home', name: 'pages.SignUp' },
{ route: '/admin/cfgserv', faIcon: 'fa fa-database', materialIcon: 'admin', name: 'pages.Admin' },
{ route: '/admin/testp1/par1', faIcon: 'fa fa-database', materialIcon: 'admin', name: 'pages.Test1' },
{ route: '/admin/testp1/par2', faIcon: 'fa fa-database', materialIcon: 'admin', name: 'pages.Test2' },
// { route: '/signin', faIcon: 'fa fa-anchor', materialIcon: 'home', name: 'pages.SignIn' },
/* {route: '/vreg?idlink=aaa', faIcon: 'fa fa-login', materialIcon: 'login', name: 'pages.vreg'},*/
],
show: true
}
}
} else {
// PRODUCTION USER:
if (process.env.PROD) {
this.links = {
Dashboard: {
routes: [
{ route: '/', faIcon: 'fa fa-home', materialIcon: 'home', name: 'pages.home' },
],
show: true,
}
}
} else {
// SERVER TEST
this.links = {
Dashboard: {
routes: [
{ route: '/', faIcon: 'fa fa-home', materialIcon: 'home', name: 'pages.home' },
{
route: '/todo', faIcon: 'fa fa-list-alt', materialIcon: 'todo', name: 'pages.Todo',
routes2: listatodo
},
{ route: '/category', faIcon: 'fa fa-list-alt', materialIcon: 'category', name: 'pages.Category' }
// { route: '/signup', faIcon: 'fa fa-registered', materialIcon: 'home', name: 'pages.SignUp' },
// { route: '/signin', faIcon: 'fa fa-anchor', materialIcon: 'home', name: 'pages.SignIn' },
/* {route: '/vreg?idlink=aaa', faIcon: 'fa fa-login', materialIcon: 'login', name: 'pages.vreg'},*/
],
show: true,
}
}
}
}
}
public $t: any
public photo = ''
public user = null
get MenuCollapse() {
@@ -110,7 +37,7 @@ export default class Drawer extends Vue {
return UserStore.state.email
}
logoutHandler() {
public logoutHandler() {
UserStore.actions.logout()
.then(() => {
this.$router.replace('/logout')
@@ -123,4 +50,3 @@ export default class Drawer extends Vue {
})
}
}

2
src/layouts/drawer/drawer.vue
View File

@@ -18,7 +18,7 @@
</div>
<menu-one :links="links"></menu-one>
<menu-one></menu-one>
<!--<footer>
<small>- Small</small>

133
src/layouts/drawer/menuOne.vue
View File

@@ -1,133 +0,0 @@
<template>
<div class="list no-border platform-delimiter light-paragraph">
<q-icon name="action"/>
<template v-for="(parent, index) in links">
<!--
<div class="list-label cursor-pointer" @click="parent.show = !parent.show">
{{replaceUnderlineToSpace(index)}} <div class="menu_freccina"><i aria-hidden="true" class="v-icon material-icons theme--light">keyboard_arrow_down</i></div>
</div>
-->
<div class="q-list-header">{{replaceUnderlineToSpace(index)}}</div>
<template v-for="child in parent.routes">
<div v-if="child.routes2">
<q-expansion-item menu :label="$t(child.name)" icon="format_list_bulleted" class="titleSubMenu">
<div v-for="child2 in child.routes2">
<q-item link :to="child2.route" exact
class="item item-link drawer-closer cursor-pointer">
<i :class="child2.faIcon" class="item-primary"></i>
<div class="item-content">{{$t(child2.name)}}</div>
</q-item>
</div>
</q-expansion-item>
</div>
<div v-else>
<q-slide-transition :duration=200>
<div v-show="true">
<q-item link :to="child.route" exact
class="item item-link drawer-closer cursor-pointer">
<i :class="child.faIcon" class="item-primary"></i>
<div class="item-content">{{$t(child.name)}}</div>
</q-item>
</div>
</q-slide-transition>
</div>
</template>
</template>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import { Prop, Watch } from "vue-property-decorator"
export default class menuOne extends Vue {
@Prop({ required: true }) links
@Watch('$route.path')
modifroute() {
Object.keys(this.links).forEach(parentName => {
this.setParentVisibilityBasedOnRoute(this.links[parentName])
})
}
get currentRoutePath() {
return this.$route.path
}
created() {
console.log("MENUONE CREATED!")
}
setParentVisibilityBasedOnRoute(parent) {
parent.routes.forEach(item => {
if (this.$route.path === item.route) {
parent.show = true
return
}
})
}
replaceUnderlineToSpace(text) {
while (text.indexOf('_') !== -1) {
text = text.replace('_', ' ')
}
return text
}
}
</script>
<style scoped>
.q-list-header {
min-height: 12px;
padding: 5px 8px;
}
.menu-hr {
border-color: #dedede;
height: 0.5px;
}
.router-link-active {
color: #027be3;
background-color: #dadada !important;
border-right: 2px solid #027be3;
}
.list-label:first-child {
line-height: 20px;
padding: 5px;
margin: 1px;
}
/*
.menu-enter-active, .scale-enter {
-webkit-animation: moveFromTopFade .5s ease both;
animation: moveFromTopFade .5s ease both;
}
.menu-leave-to, .scale-leave-active {
-webkit-animation: moveToBottom .5s ease both;
animation: moveToBottom .5s ease both;
}
*/
.router-link-active {
color: #027be3;
background-color: #dadada !important;
border-right: 2px solid #027be3;
}
.router-link-active .item-primary {
color: #027be3;
}
.menu_freccina {
position: absolute;
right: 10px;
display: inline-block;
padding: 0 0px 0px 0px;
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
</style>