127 lines
3.9 KiB
Vue
127 lines
3.9 KiB
Vue
<template>
|
|
<v-app-bar
|
|
color="yellow">
|
|
<v-app-bar-nav-icon v-if="user.logged_in" variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
|
|
<v-toolbar-title>{{ site_info.name }}</v-toolbar-title>
|
|
<v-spacer></v-spacer>
|
|
<v-menu>
|
|
<template v-slot:activator="{ props }">
|
|
<v-btn
|
|
variant="text"
|
|
v-if="user.logged_in"
|
|
v-bind="props">
|
|
Hi {{ user.first_name }}
|
|
</v-btn>
|
|
</template>
|
|
<v-list theme="dark">
|
|
<v-list-item
|
|
v-for="(item, index) in user_items"
|
|
:key="index"
|
|
:title="item.title"
|
|
:to="item.value"
|
|
>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-menu>
|
|
</v-app-bar>
|
|
<v-navigation-drawer
|
|
v-if="user.logged_in"
|
|
v-model="drawer"
|
|
theme="dark">
|
|
<v-list>
|
|
<template v-for="item in items" v-bind:key="item.title">
|
|
<template v-if="item.children">
|
|
<v-list-item :title="item.title">
|
|
<v-list>
|
|
<v-list-item v-for="citem in item.children"
|
|
v-bind:key="citem.title"
|
|
:title="citem.title"
|
|
:to="citem.value">
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-list-item>
|
|
</template>
|
|
<template v-else>
|
|
<v-list-item :title="item.title" :to="item.value">
|
|
</v-list-item>
|
|
</template>
|
|
</template>
|
|
<v-divider></v-divider>
|
|
<v-footer>
|
|
<v-banner>
|
|
<v-banner-text>
|
|
<sub>{{ site_info.name }}<br/>
|
|
BE v{{ site_info.version }}<br/>
|
|
FE v{{ appVersion }}
|
|
</sub>
|
|
</v-banner-text>
|
|
</v-banner>
|
|
</v-footer>
|
|
</v-list>
|
|
</v-navigation-drawer>
|
|
</template>
|
|
<script>
|
|
import { version } from "@/../package.json"
|
|
export default{
|
|
name: "MyNav",
|
|
props: {
|
|
site_info: {},
|
|
user: {
|
|
logged_in: false,
|
|
first_name: "null"
|
|
}
|
|
},
|
|
watch: {
|
|
'user.logged_in'(isLoggedIn) {
|
|
if (isLoggedIn) {
|
|
this.items = this.get_menu()
|
|
} else {
|
|
this.items = []
|
|
}
|
|
},
|
|
},
|
|
computed: {
|
|
user_items() {
|
|
return this.items.filter(x => x.isUserMgmt == true)
|
|
}
|
|
},
|
|
data(){
|
|
return {
|
|
appVersion: version,
|
|
items: [],
|
|
drawer: null,
|
|
drawer2: false
|
|
}
|
|
},
|
|
created() {
|
|
if (window.location.pathname != "/login") {
|
|
this.items = this.get_menu()
|
|
}
|
|
},
|
|
methods:{
|
|
get_menu() {
|
|
let items = []
|
|
items.push({title: "Customers",
|
|
value:"/customers",
|
|
children:[{title:"List",
|
|
value:"/customers/list"},
|
|
{title:"Contracts",
|
|
value:"/customers/contracts/list"},
|
|
{title:"Complaints",
|
|
value:"/customers/complaints/list"},
|
|
{title:"Medicated Feeds",
|
|
value:"/customers/medicated-feeds/list"}
|
|
]
|
|
})
|
|
items.push({title: "Sales Orders",
|
|
value:"/sop",
|
|
children:[{title:"Printed",
|
|
value:"/sop/printed"}]
|
|
})
|
|
|
|
items.push({title: "Logout", value:"/logout", isUserMgmt: true})
|
|
return items
|
|
}
|
|
}
|
|
}
|
|
</script>
|