Initial commit

src/components/dashboard.vue

@@ -0,0 +1,15 @@
+<template>
+    <div class="Dashboard">
+        Dashboard
+    </div>
+</template>
+
+<script>
+export default {
+    name: "Dashboard",
+    data() {
+        return {
+        }
+    }
+}
+</script>

src/components/my-table.vue

@@ -0,0 +1,36 @@
+<template>
+
+    <div class="My-Table">
+        <table>
+            <tr>
+                <th v-for="(c, i) in columns" :key="i">{{ c.heading }}</th>
+            </tr>
+            <tr v-for="(r, ri) in rows" :key="ri">
+                <td v-for="(c, ci) in columns" :key="ci">
+                    <span v-if="c.prop">{{ r[c.prop] }}</span>
+                </td>
+            </tr>
+        </table>
+    </div>
+
+</template>
+
+<script>
+export default {
+    name: 'My-Table',
+    props: {
+       columns: {
+           type: Array,
+           default: [ ]
+       },
+       rows: {
+           type: Array,
+           default: [ ]
+       }
+    },
+    data() {
+        return {
+        }
+    }
+}
+</script>

src/components/navigation.vue

@@ -0,0 +1,50 @@
+<template>
+    <div class="Navigation">
+        <ul>
+            <li v-for="(e, i) in navItems" :key="i">
+                <router-link :to="e.to">{{ e.name }}</router-link>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+import Axios from 'axios';
+
+export default {
+    name: "Navigation",
+    props: [
+        'src',
+        'items'
+    ],
+    data() {
+        return {
+            navItems: []
+        }
+    },
+    mounted() {
+        if (this.items) {
+            this.navItems = this.items;
+            return;
+        }
+        // only load if no items are given
+        Axios.get(this.src)
+            .then(results => {
+                if ( !Array.isArray(results.data) ) {
+                    alert('invalid data in: ' + this.src);
+                    return;
+                }
+                this.navItems = results.data;
+            })
+            .catch(error => {
+                alert('error loading ' + this.src + ': ' + error.message);
+            });
+    }
+}
+</script>
+
+<style scoped>
+    .Navigation li a {
+        color: orange;
+    }
+</style>

src/components/userlist.vue

@@ -0,0 +1,48 @@
+<template>
+    <div class="Userlist">
+        <h1>Userlist</h1>
+        <my-table :columns="columns" :rows="rows"></my-table>
+        <button @click="add()">add</button>
+    </div>
+</template>
+
+<script>
+import MyTable from './my-table.vue';
+
+export default {
+    name: "Userlist",
+    components: {
+        MyTable
+    },
+    data() {
+        return {
+           columns: [
+               {
+                   heading: 'col1',
+                   prop: 'prop1'
+               },
+               {
+                   heading: 'col2',
+                   prop: 'prop2'
+               },
+               {
+                   heading: 'col3',
+                   prop: 'prop3'
+               },
+           ],
+           rows: [
+               {prop1: 'r1p1', prop2: 'r1p2', prop3: 'r1p3'},
+               {prop1: 'r2p1', prop2: 'r2p2', prop3: 'r2p3'},
+               {prop1: 'r3p1', prop2: 'r3p2', prop3: 'r3p3'},
+               {prop1: 'r4p1', prop2: 'r4p2', prop3: 'r4p3'},
+           ]
+        }
+    },
+    methods: {
+        add() {
+            this.rows.push({'prop1': 'test'});
+            this.$store.commit('increment');
+        }
+    }
+}
+</script>