panel/baseui
1
0
Fork 0
Code Issues 8 Pull Requests Releases Wiki Activity

reordered for custom views

Browse Source
This commit is contained in:
Sebastian Frank
2017-08-29 15:51:50 +02:00
parent 5b250b02fe
commit f7de209197
10 changed files with 51 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
conf/init.json
View File

@@ -6,22 +6,26 @@
{ {
"name": "Login", "name": "Login",
"to": "/login", "to": "/login",
"icon": "fa-home" "icon": "fa-home",
"content": "<login-form></login-form>"
}, },
{ {
"name": "Dashboard", "name": "Dashboard",
"to": "/", "to": "/",
"icon": "fa-home" "icon": "fa-home",
"content": "<dashboard></dashboard>"
}, },
{ {
"name": "Userlist", "name": "Userlist",
"to": "/userlist", "to": "/userlist",
"icon": "fa-news" "icon": "fa-news",
"content": "<userlist></userlist>"
}, },
{ {
"name": "Logout", "name": "Logout",
"to": "/logout", "to": "/logout",
"icon": "fa-lock" "icon": "fa-lock",
"content": "<logout></logout>"
} }
] ]
} }

3
index.html
View File

@@ -3,6 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Vue Example</title> <title>Vue Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style> <style>
.component-fade-enter-active, .component-fade-leave-active { .component-fade-enter-active, .component-fade-leave-active {
transition: opacity .3s ease; transition: opacity .3s ease;
@@ -14,7 +15,7 @@
</head> </head>
<body> <body>
<div id="vue-app"> <div id="vue-app">
<app :navigation-items="navItems"></app> <app></app>
</div> </div>
<script src="build/app.js"></script> <script src="build/app.js"></script>
</body> </body>

9
src/app.vue
View File

@@ -17,16 +17,9 @@ export default {
components: { components: {
Navigation Navigation
}, },
props: {
navigationItems: {
type: Array,
default() {
return [ ];
}
}
},
data() { data() {
return { return {
navigationItems: this.$store.state.navigation
} }
}, },
created() { created() {

59
src/main.js
View File

@@ -5,37 +5,12 @@ import Axios from 'axios';
import JwtDecode from 'jwt-decode'; import JwtDecode from 'jwt-decode';
import App from './app.vue'; import App from './app.vue';
import Dashboard from './components/dashboard.vue'; import Views from './views/views.js';
import LoginForm from './components/forms/login.vue';
import Logout from './components/logout.vue';
import Userlist from './components/userlist.vue';
Vue.use(VueRouter); Vue.use(VueRouter);
Vue.use(Vuex); Vue.use(Vuex);
const router = new VueRouter();
const routes = [
{
path: '/login',
component: LoginForm
},
{
path: '/',
component: Dashboard
},
{
path: '/userlist',
component: Userlist
},
{
path: '/logout',
component: Logout
}
];
const router = new VueRouter({
routes
});
const store = new Vuex.Store({ const store = new Vuex.Store({
state: { state: {
@@ -202,20 +177,36 @@ Axios.get('conf/init.json')
alert('invalid data in init.json'); alert('invalid data in init.json');
return; return;
} }
store.commit("setNavigation", results.data.navigation); let navigation = [];
results.data.navigation.forEach(({name, to}) => navigation.push({name, to}));
store.commit("setNavigation", navigation);
// set api config in store // set api config in store
store.commit("setAPI", results.data.api); store.commit("setAPI", results.data.api);
// add routes
let routes = [];
let rIdx = 0;
results.data.navigation.forEach(({to, content, data}) => routes.push({
path: to,
component: Vue.component('main' + rIdx++, {
template: '<div id="main'+ rIdx + '">' + content + '</div>',
components: Views,
data() {
if (typeof data != 'object') {
return {};
}
return data;
}
})
}));
router.addRoutes(routes);
// load app, when init finishs // load app, when init finishs
new Vue({ new Vue({
el: '#vue-app', el: '#vue-app',
components: { render: h => h(App),
App
},
data: {
navItems: store.state.navigation
},
router, router,
store store
}); });

0
src/components/dashboard.vue → src/views/dashboard.vue
View File

2
src/components/forms/login.vue → src/views/forms/login.vue
View File

@@ -6,7 +6,7 @@
</template> </template>
<script> <script>
import MyForm from '../my-form.vue'; import MyForm from '../../components/my-form.vue';
export default { export default {
name: 'LoginForm', name: 'LoginForm',

0
src/components/logout.vue → src/views/forms/logout.vue
View File

2
src/components/userlist.vue → src/views/lists/userlist.vue
View File

@@ -6,7 +6,7 @@
</template> </template>
<script> <script>
import ScrollTable from './scroll-table.vue'; import ScrollTable from '../../components/scroll-table.vue';
export default { export default {
name: "Userlist", name: "Userlist",

11
src/views/views.js Normal file
View File

@@ -0,0 +1,11 @@
import Dashboard from './dashboard.vue';
import LoginForm from './forms/login.vue';
import Logout from './forms/logout.vue';
import Userlist from './lists/userlist.vue';
export default {
Dashboard,
LoginForm,
Logout,
Userlist
}

4
webpack.config.js
View File

@@ -15,7 +15,7 @@ var env = process.env.WEBPACK_ENV;
if (env === 'production') { if (env === 'production') {
var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin; var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
plugins.push(new UglifyJsPlugin({ plugins.push(new UglifyJsPlugin({
minimize: true, minimize: true,
sourceMap: true sourceMap: true
} }
@@ -36,7 +36,7 @@ if (env === 'production') {
module.exports = { module.exports = {
entry: [ entry: [
'intersection-observer', 'intersection-observer',
'babel-polyfill', 'babel-polyfill',
entryPoint entryPoint
], ],
devtool: 'source-map', devtool: 'source-map',