table search

src/components/my-input.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="My-Input">
         <label>{{ label }}</label>
-        <input type="text" v-if="type == 'text'" v-model="currentValue" @blur="validate()">
-        <input type="password" v-else-if="type == 'password'" v-model="currentValue" @blur="validate()">
+        <input type="text" v-if="type == 'text'" v-model="currentValue" @blur="validate()" @change="() => $emit('change', currentValue)">
+        <input type="password" v-else-if="type == 'password'" v-model="currentValue" @blur="validate()" @change="() => $emit('change', currentValue)">
     </div>
 </template>
 

src/components/scroll-table.vue

@@ -1,15 +1,17 @@
 <template>
     <div class="Scroll-Table">
+        <my-input label="Suche:" type="text" @change="searchChanged" v-model="currentSearch"></my-input>
         <my-table :columns="columns" :rows="rows" @sort="sort"></my-table>
         <div v-if="loadingDelayed">loading...</div>
         <div style="padding-left: 30%; padding-bottom: 100px;">
-            <span v-show="hasMore || sortTriggered" v-if="!loadingDelayed" v-observe-visibility="visibilityChanged">...</span>
+            <span v-show="hasMore || reloadTriggered" v-if="!loadingDelayed" v-observe-visibility="visibilityChanged">...</span>
         </div>
     </div>
 </template>
 
 <script>
 import MyTable from './my-table.vue';
+import MyInput from './my-input.vue';
 
 import { ObserveVisibility } from 'vue-observe-visibility/dist/vue-observe-visibility';
 
@@ -19,7 +21,8 @@ export default {
         ObserveVisibility
     },
     components: {
-        MyTable
+        MyTable,
+        MyInput
     },
     props: {
        columns: {
@@ -49,6 +52,9 @@ export default {
            type: Boolean,
            default: false
        },
+       search: {
+           type: String
+       },
        loading: {
            type: Boolean,
            default: false
@@ -88,16 +94,17 @@ export default {
             currentOffset: this.offset,
             currentOrderBy: this.orderBy,
             currentOrderDesc: this.orderDesc,
+            currentSearch: this.search,
             loadingDelayed: false,
-            sortTriggered: false
+            reloadTriggered: false
         }
     },
     methods: {
         visibilityChanged(isVisible, entry) {
             if (isVisible) {
                 // infinite scrolling
-                this.sortTriggered = false;
-                this.handler(this.currentOffset, this.limit, this.currentOrderBy, this.currentOrderDesc);
+                this.reloadTriggered = false;
+                this.handler(this.currentOffset, this.limit, this.currentOrderBy, this.currentOrderDesc, this.currentSearch);
             }
         },
         pushRows() {
@@ -121,8 +128,12 @@ export default {
                 this.currentOrderDesc = false;
             }
             this.currentOrderBy = e.orderBy;
-            console.log(e);
-            this.sortTriggered = true;
+            this.reloadTriggered = true;
+            this.clear();
+        },
+        searchChanged(e) {
+            this.currentSearch = e;
+            this.reloadTriggered = true;
             this.clear();
         }
     }

src/components/userlist.vue

@@ -39,7 +39,7 @@ export default {
         }
     },
     methods: {
-        more(offset, limit, orderBy, orderDesc) {
+        more(offset, limit, orderBy, orderDesc, search) {
             this.loading = true;
             this.$store.dispatch('apiRequest', {
                 endpoint: 'users',
@@ -47,7 +47,8 @@ export default {
                     start: offset,
                     length: limit,
                     orderBy,
-                    orderDesc
+                    orderDesc,
+                    search
                 }
             })
                 .then(rows => {