logout handling

src/components/logout.vue

@@ -0,0 +1,17 @@
+<template>
+    <div>
+        Sie werden ausgeloggt....
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'logout',
+    created() {
+        this.$store.commit('clearLogin');
+        setTimeout(() => {
+            this.$router.replace('/login');
+        }, 2000);
+    }
+}
+</script>

src/components/my-table.vue

@@ -2,15 +2,19 @@
 
     <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>
-                    <span v-else-if="c.render">{{ c.render(r) }}</span>
-                </td>
-            </tr>
+            <thead>
+                <tr>
+                    <th v-for="(c, i) in columns" :key="i">{{ c.heading }}</th>
+                </tr>
+            </thead>
+            <tbody is="transition-group" name="list">
+                <tr v-for="(r, ri) in rows" :key="ri">
+                    <td v-for="(c, ci) in columns" :key="ci + 'c'">
+                        <span v-if="c.prop">{{ r[c.prop] }}</span>
+                        <span v-else-if="c.render">{{ c.render(r) }}</span>
+                    </td>
+                </tr>
+            </tbody>
         </table>
     </div>
 
@@ -38,4 +42,18 @@ export default {
         }
     }
 }
-</script>
+</script>
+
+<style>
+.list-item {
+  display: inline-block;
+  margin-right: 10px;
+}
+.list-enter-active, .list-leave-active {
+  transition: all 1s;
+}
+.list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */ {
+  opacity: 0;
+  transform: translateY(30px);
+}
+</style>

src/components/scroll-table.vue

@@ -1,8 +1,10 @@
 <template>
     <div class="Scroll-Table">
         <my-table :columns="columns" :rows="rows"></my-table>
-        <div v-show="hasMore" v-if="!loading" v-observe-visibility="visibilityChanged">...</div>
-        <div v-if="loading">loading...</div>
+        <div v-if="loadingDelayed">loading...</div>
+        <div style="padding-left: 30%; padding-bottom: 100px;">
+            <span v-show="hasMore" v-if="!loadingDelayed" v-observe-visibility="visibilityChanged">...</span>
+        </div>
     </div>
 </template>
 
@@ -56,15 +58,28 @@ export default {
     watch: {
         newRows(rows) {
             rows.forEach(row => {
-                this.rows.push(row)
+                this.rowsToPush.push(row);
             });
             this.currentOffset += rows.length;
+            this.pushRows(); // for transition
+        },
+        loading(l) {
+            if (!l) {
+                // delay after loading for visibility observer
+                setTimeout(() => {
+                    this.loadingDelayed = false;
+                }, 200);
+            } else {
+                this.loadingDelayed = true;
+            }
         }
     },
     data() {
         return {
             rows: [ ],
-            currentOffset: this.offset
+            rowsToPush: [ ],
+            currentOffset: this.offset,
+            loadingDelayed: false
         }
     },
     methods: {
@@ -73,6 +88,15 @@ export default {
                 // infinite scrolling
                 this.handler(this.currentOffset, this.limit);
             }
+        },
+        pushRows() {
+            let row = this.rowsToPush.shift();
+            if (row) {
+                this.rows.push(row);
+                setTimeout(() => {
+                    this.pushRows();
+                }, 50);
+            }
         }
     }
 }

src/components/userlist.vue

@@ -49,9 +49,7 @@ export default {
                 .then(rows => {
                     this.hasMore = (rows.length >= limit);
                     this.newRows = rows;
-                    setTimeout(() => {
-                        this.loading = false;
-                    }, 200); // for oberserver
+                    this.loading = false;
                 })
                 .catch(error => {
                     this.loading = false;