dynamic profile nav
This commit is contained in:
Sebastian Frank
parent
e58a64335c
commit
451c9d14aa
@ -1,47 +1,81 @@
|
||||
{
|
||||
"title": "MyApp",
|
||||
"api": {
|
||||
"baseURL": "https://cx20.basehosts.de/api/v1/"
|
||||
"ui": {
|
||||
"title": "MyApp",
|
||||
"api": {
|
||||
"baseURL": "https://cx20.basehosts.de/api/v1/"
|
||||
},
|
||||
"navigation": {
|
||||
"main": [
|
||||
{
|
||||
"name": "Dashboard",
|
||||
"to": "/",
|
||||
"icon": "icon-compass"
|
||||
},
|
||||
{
|
||||
"name": "Userlist",
|
||||
"to": "/userlist",
|
||||
"icon": "icon-contacts"
|
||||
},
|
||||
{
|
||||
"name": "Domainlist",
|
||||
"to": "/domainlist",
|
||||
"icon": "icon-contacts"
|
||||
},
|
||||
{
|
||||
"name": "FormDemo",
|
||||
"to": "/formdemo",
|
||||
"icon": "icon-contacts"
|
||||
}
|
||||
],
|
||||
"profile": [
|
||||
{
|
||||
"name": "Profile anpassen",
|
||||
"to": "/profile",
|
||||
"icon": "icon-color-wand"
|
||||
},
|
||||
{
|
||||
"name": "Logout",
|
||||
"to": "/logout",
|
||||
"icon": "icon-log-out"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"navigation": [
|
||||
"routes": [
|
||||
{
|
||||
"name": "Login",
|
||||
"to": "/login",
|
||||
"icon": "fa-home",
|
||||
"content": "<login-form></login-form>",
|
||||
"show": {
|
||||
"never": true
|
||||
}
|
||||
"content": "<login-form></login-form>"
|
||||
},
|
||||
{
|
||||
"name": "Dashboard",
|
||||
"to": "/",
|
||||
"icon": "icon-compass",
|
||||
"content": "<dashboard></dashboard>"
|
||||
},
|
||||
{
|
||||
"name": "Userlist",
|
||||
"to": "/userlist",
|
||||
"icon": "icon-contacts",
|
||||
"content": "<userlist></userlist>"
|
||||
},
|
||||
{
|
||||
"name": "Domainlist",
|
||||
"to": "/domainlist",
|
||||
"icon": "icon-contacts",
|
||||
"content": "<domainlist></domainlist>"
|
||||
},
|
||||
{
|
||||
"name": "FormDemo",
|
||||
"to": "/formdemo",
|
||||
"icon": "icon-contacts",
|
||||
"content": "<form-demo></form-demo>"
|
||||
},
|
||||
{
|
||||
"name": "Logout",
|
||||
"to": "/logout",
|
||||
"icon": "icon-log-out",
|
||||
"content": "<logout></logout>"
|
||||
},
|
||||
{
|
||||
"name": "Profil",
|
||||
"to": "/profile",
|
||||
"content": "<h3>Profil anpassen</h3>"
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
|
||||
<div class="app">
|
||||
<topbar></topbar>
|
||||
<topbar :items="profileItems"></topbar>
|
||||
<sidebar :items="navigationItems"></sidebar>
|
||||
|
||||
<div class="content_area">
|
||||
@ -30,7 +30,8 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
navigationItems: this.$store.state.navigation
|
||||
navigationItems: this.$store.state.ui.navigation.main,
|
||||
profileItems: this.$store.state.ui.navigation.profile
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
@ -1,23 +0,0 @@
|
||||
<template>
|
||||
<div class="Navigation">
|
||||
<ul>
|
||||
<li v-for="(e, i) in items" :key="i">
|
||||
<router-link :to="e.to">{{ e.name }}</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Navigation",
|
||||
props: {
|
||||
items: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [ ];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -163,7 +163,6 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
showIf(conf) {
|
||||
console.log(conf);
|
||||
// show if not configured
|
||||
if (!conf) {
|
||||
return true;
|
||||
|
||||
@ -12,18 +12,12 @@
|
||||
</a>
|
||||
<nav class="user_menu">
|
||||
<ul>
|
||||
<li><a href="#">
|
||||
<i class="icon icon-color-wand" aria-hidden="true"></i>
|
||||
<div class="title">
|
||||
<router-link :to="'/users/' + loginID">Profil anpassen</router-link>
|
||||
</div>
|
||||
</a></li>
|
||||
<li><a href="#">
|
||||
<i class="icon icon-log-out" aria-hidden="true"></i>
|
||||
<div class="title">
|
||||
<router-link to="/logout">Logout</router-link>
|
||||
</div>
|
||||
</a></li>
|
||||
<router-link tag="li" v-for="(item, i) in items" :key="i" v-if="showIf(item.show)" :to="item.to" active-class="active" exact>
|
||||
<a>
|
||||
<i :class="['icon', item.icon]"></i>
|
||||
<div class="title">{{ item.name }}</div>
|
||||
</a>
|
||||
</router-link>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
@ -33,6 +27,9 @@
|
||||
<script>
|
||||
export default {
|
||||
name: "Topbar",
|
||||
props: [
|
||||
"items"
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
@ -67,6 +64,15 @@ export default {
|
||||
methods: {
|
||||
toggleMenu() {
|
||||
this.$refs.user_profile.classList.toggle("open");
|
||||
},
|
||||
showIf(conf) {
|
||||
// show if not configured
|
||||
if (!conf) {
|
||||
return true;
|
||||
}
|
||||
if (conf.never) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
28
src/main.js
28
src/main.js
@ -14,8 +14,7 @@ const router = new VueRouter();
|
||||
|
||||
const store = new Vuex.Store({
|
||||
state: {
|
||||
api: {},
|
||||
navigation: [],
|
||||
ui: {},
|
||||
persist: {
|
||||
login: {},
|
||||
authToken: '',
|
||||
@ -24,13 +23,8 @@ const store = new Vuex.Store({
|
||||
}
|
||||
},
|
||||
mutations: {
|
||||
setAPI(state, payload) {
|
||||
state.api = payload;
|
||||
},
|
||||
setNavigation(state, payload) {
|
||||
for (var i = 0; i < payload.length; i++) {
|
||||
state.navigation.push(payload[i]); // = payload;
|
||||
}
|
||||
setUI(state, payload) {
|
||||
state.ui = payload;
|
||||
},
|
||||
setCredentials(state, payload) {
|
||||
state.persist.credentials = {
|
||||
@ -59,7 +53,7 @@ const store = new Vuex.Store({
|
||||
return new Promise((resolve, reject) => {
|
||||
Axios({
|
||||
method: payload.method ? payload.method : 'get',
|
||||
baseURL: context.state.api.baseURL,
|
||||
baseURL: context.state.ui.api.baseURL,
|
||||
url: payload.endpoint,
|
||||
params: payload.params,
|
||||
data: payload.data,
|
||||
@ -173,21 +167,18 @@ if (persist) {
|
||||
Axios.get('conf/init.json')
|
||||
.then(results => {
|
||||
// set navigation
|
||||
if (!Array.isArray(results.data.navigation)) {
|
||||
alert('invalid data in init.json');
|
||||
if (!Array.isArray(results.data.routes)) {
|
||||
alert('invalid data in init.json, no routes');
|
||||
return;
|
||||
}
|
||||
const navigation = results.data.navigation.map(({name, to, icon, show}) => {return {name, to, icon, show}});
|
||||
|
||||
store.commit("setNavigation", navigation);
|
||||
|
||||
// set api config in store
|
||||
store.commit("setAPI", results.data.api);
|
||||
// set ui config in store
|
||||
store.commit("setUI", results.data.ui);
|
||||
|
||||
// add routes
|
||||
let routes = [];
|
||||
let rIdx = 0;
|
||||
results.data.navigation.forEach(({name, to, content, data}) => routes.push({
|
||||
results.data.routes.forEach(({name, to, content, data}) => routes.push({
|
||||
name: name,
|
||||
path: to,
|
||||
meta: {
|
||||
@ -206,7 +197,6 @@ Axios.get('conf/init.json')
|
||||
}));
|
||||
router.addRoutes(routes);
|
||||
router.beforeEach((to, from, next) => {
|
||||
console.log(to);
|
||||
document.title = (to.meta && to.meta.title) ? results.data.title + ': ' + to.meta.title : results.data.title;
|
||||
next();
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user