add filters to table view

src/components/Cards.vue

@@ -41,7 +41,6 @@
 <script>
 import DataContainer from '@/mixins/data-container';
 import router from '../router';
-import {mapState} from 'vuex';
 
 export default {
   name: 'Cards',
@@ -51,16 +50,10 @@ export default {
   },
   methods: {
     changeFilter(col, val) {
-      console.log('filter:', col, val);
       this.setFilter(col, val);
       let newquery = Object.entries({...this.$store.getters.getFilters, [col]: val}).reduce((a,[k,v]) => (v ? {...a, [k]:v} : a), {});
-      console.log(this.$store.getters.getFilters);
-      console.log('query:', newquery);
       router.push({query: newquery});
     },
   },
-  computed: {
-    ...mapState(['route'])
-  },
 };
 </script>

src/components/Table.vue

@@ -3,12 +3,26 @@
         <thead>
             <tr>
                 <th scope="col" v-for="(column, index) in columns" :key="index">
-                    <button class="btn text-light" @click="toggleSort(column)">
+                    <div class="input-group">
-                        {{ column }}
+                        <div class="input-group-prepend">
-                        <span :class="{ 'text-info': column === sortBy }">
+                            <button
-                            <font-awesome-icon :icon="getSortIcon(column)"/>
+                                    :class="[ 'btn', column === sortBy ? 'btn-outline-info' : 'btn-outline-secondary' ]"
-                        </span>
+                                    @click="toggleSort(column)"
-                    </button>
+                            >
+                                {{ column }}
+                                <span :class="{ 'text-info': column === sortBy }">
+                                    <font-awesome-icon :icon="getSortIcon(column)"/>
+                                </span>
+                            </button>
+                        </div>
+                        <input
+                                type="text"
+                                class="form-control"
+                                placeholder="filter"
+                                :value="filters[column]"
+                                @input="changeFilter(column, $event.target.value)"
+                        >
+                    </div>
                 </th>
             </tr>
         </thead>
@@ -22,10 +36,21 @@
 
 <script>
 import DataContainer from '@/mixins/data-container';
+import router from '../router';
 
 export default {
   name: 'Table',
-  mixins: [DataContainer]
+  mixins: [DataContainer],
+  created() {
+    this.columns.map(e => ({k: e, v: this.$store.getters.getFilters[e]})).filter(e => e.v).forEach(e => this.setFilter(e.k, e.v));
+  },
+  methods: {
+    changeFilter(col, val) {
+      this.setFilter(col, val);
+      let newquery = Object.entries({...this.$store.getters.getFilters, [col]: val}).reduce((a,[k,v]) => (v ? {...a, [k]:v} : a), {});
+      router.push({query: newquery});
+    },
+  },
 };
 </script>