reordered for custom views

2017-08-29 15:51:50 +02:00
parent 5b250b02fe
commit f7de209197
10 changed files with 51 additions and 51 deletions
--- a/conf/init.json
+++ b/conf/init.json
@@ -6,22 +6,26 @@
        {
            "name": "Login",
            "to": "/login",
-            "icon": "fa-home"
+            "icon": "fa-home",
+            "content": "<login-form></login-form>"
        },
        {
            "name": "Dashboard",
            "to": "/",
-            "icon": "fa-home"
+            "icon": "fa-home",
+            "content": "<dashboard></dashboard>"
        },
        {
            "name": "Userlist",
            "to": "/userlist",
-            "icon": "fa-news"
+            "icon": "fa-news",
+            "content": "<userlist></userlist>"
        },
        {
            "name": "Logout",
            "to": "/logout",
-            "icon": "fa-lock"
+            "icon": "fa-lock",
+            "content": "<logout></logout>"
        }
    ]
 }
--- a/index.html
+++ b/index.html
@@ -3,6 +3,7 @@
  <head>
    <meta charset="utf-8">
    <title>Vue Example</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .component-fade-enter-active, .component-fade-leave-active {
          transition: opacity .3s ease;
@@ -14,7 +15,7 @@
  </head>
  <body>
 	  <div id="vue-app">
-      <app :navigation-items="navItems"></app>
+      <app></app>
 	  </div>
    <script src="build/app.js"></script>
  </body>
--- a/src/app.vue
+++ b/src/app.vue
@@ -17,16 +17,9 @@ export default {
    components: {
        Navigation
    },
-    props: {
-        navigationItems: {
-            type: Array,
-            default() {
-                return [ ];
-            }
-        }
-    },
    data() {
        return {
+            navigationItems: this.$store.state.navigation
        }
    },
    created() {
--- a/src/main.js
+++ b/src/main.js
@@ -5,37 +5,12 @@ import Axios from 'axios';
 import JwtDecode from 'jwt-decode';

 import App from './app.vue';
-import Dashboard from './components/dashboard.vue';
-import LoginForm from './components/forms/login.vue';
-import Logout from './components/logout.vue';
-import Userlist from './components/userlist.vue';
+import Views from './views/views.js';

 Vue.use(VueRouter);
 Vue.use(Vuex);

-
-const routes = [
-  {
-    path: '/login',
-    component: LoginForm
-  },
-  {
-    path: '/',
-    component: Dashboard
-  },
-  {
-    path: '/userlist',
-    component: Userlist
-  },
-  {
-    path: '/logout',
-    component: Logout
-  }
-];
-
-const router = new VueRouter({
-  routes
-});
+const router = new VueRouter();

 const store = new Vuex.Store({
  state: {
@@ -202,20 +177,36 @@ Axios.get('conf/init.json')
      alert('invalid data in init.json');
      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
    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
    new Vue({
      el: '#vue-app',
-      components: {
-        App
-      },
-      data: {
-        navItems: store.state.navigation
-      },
+      render: h => h(App),
      router,
      store
    });
--- a/src/components/dashboard.vue
+++ b/src/components/dashboard.vue
--- a/src/components/forms/login.vue
+++ b/src/components/forms/login.vue
@@ -6,7 +6,7 @@
 </template>

 <script>
-import MyForm from '../my-form.vue';
+import MyForm from '../../components/my-form.vue';

 export default {
  name: 'LoginForm',
--- a/src/views/forms/logout.vue
+++ b/src/views/forms/logout.vue
--- a/src/views/lists/userlist.vue
+++ b/src/views/lists/userlist.vue
@@ -6,7 +6,7 @@
 </template>

 <script>
-import ScrollTable from './scroll-table.vue';
+import ScrollTable from '../../components/scroll-table.vue';

 export default {
    name: "Userlist",
--- a/src/views/views.js
+++ b/src/views/views.js
@@ -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
+}
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -15,7 +15,7 @@ var env = process.env.WEBPACK_ENV;
 if (env === 'production') {
  var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;

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