store filters in url query

src/components/Cards.vue

@@ -20,8 +20,9 @@
                                 class="form-control"
                                 placeholder="filter"
                                 :value="filters[column]"
-                                @input="setFilter(column, $event.target.value)"
+                                @input="changeFilter(column, $event.target.value)"
                             >
+                        <!-- <input @change="someHandler"> -->
                         </div>
                     </div>
                 </div>
@@ -39,12 +40,27 @@
 
 <script>
 import DataContainer from '@/mixins/data-container';
+import router from '../router';
+import {mapState} from 'vuex';
 
 export default {
   name: 'Cards',
   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: {
-    random: () => Math.floor((Math.random() * 500) + 300)
-  }
+    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/store/index.js

@@ -19,6 +19,7 @@ const store = new Vuex.Store({
   getters: {
     getEventSlug: state => state.route && state.route.params.event? state.route.params.event : state.events.length ? state.events[0].slug : '36C3',
     getActiveView: state => state.route.name || 'items',
+    getFilters: state => state.route.query,
   },
   mutations: {
     replaceEvents(state, events) {
@@ -28,7 +29,7 @@ const store = new Vuex.Store({
       router.push({path: `/${slug}/${view}`});
     },
     replaceLoadedItems(state, newItems) {
-      state.loadedItems = newItems;
+      state.loadedItems = newItems.map(e => ({...e, description: e.bezeichnung, box: e.container, uid: e.item_uid}));
     },
     setLayout(state, layout) {
       state.layout = layout;

src/views/Boxes.vue

@@ -5,7 +5,7 @@
                 <Table
                     :columns="['cid', 'name']"
                     :items="loadedBoxes"
-                    :keyName="'item_uid'"
+                    :keyName="'cid'"
                 />
             </div>
         </div>

src/views/Items.vue

@@ -3,27 +3,26 @@
         <div class="row" v-if="layout === 'table'">
             <div class="col-xl-8 offset-xl-2">
                 <Table
-                        :columns="['iid', 'item_uid', 'bezeichnung', 'container']"
+                        :columns="['uid', 'description', 'box']"
                         :items="loadedItems"
-                        :keyName="'item_uid'"
+                        :keyName="'uid'"
                 />
             </div>
         </div>
         <Cards
                 v-if="layout === 'cards'"
-                :columns="['iid', 'item_uid', 'bezeichnung', 'container']"
+                :columns="['uid', 'description', 'box']"
                 :items="loadedItems"
-                :keyName="'item_uid'"
+                :keyName="'uid'"
                 v-slot="{ item }"
         >
             <img
                     :src="`https://c3lf.de/api/1/thumbs/${item.file}`"
-                    alt="item"
                     class="card-img-top img-fluid"
             >
             <div class="card-body">
-                <h6 class="card-title">{{ item.bezeichnung }}</h6>
-                <h6 class="card-subtitle text-secondary">uid: {{ item.item_uid }} box: {{ item.container }}</h6>
+                <h6 class="card-title">{{ item.description }}</h6>
+                <h6 class="card-subtitle text-secondary">uid: {{ item.uid }} box: {{ item.box }}</h6>
             </div>
         </Cards>
     </div>
@@ -33,10 +32,13 @@
 import Table from '@/components/Table';
 import Cards from '@/components/Cards';
 import { mapState } from 'vuex';
+
 export default {
   name: 'Items',
   components: { Table, Cards },
   computed: mapState(['loadedItems', 'layout']),
+  methods: {
+  }
 };
 </script>