--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/importoverview/Filters.vue	Mon Mar 11 15:53:31 2019 +0100
@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <button @click="setFilter('pending')" :class="pendingStyle">
+      <translate>pending</translate>
+    </button>
+    <button @click="setFilter('failed')" :class="failedStyle">
+      <translate>failed</translate>
+    </button>
+    <button @click="setFilter('accepted')" :class="acceptedStyle">
+      <translate>accepted</translate>
+    </button>
+    <button @click="setFilter('declined')" :class="declinedStyle">
+      <translate>declined</translate>
+    </button>
+    <button @click="setFilter('warning')" :class="warningStyle">
+      <translate>warning</translate>
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "importfilters",
+  data() {
+    return {
+      failed: false,
+      pending: false,
+      accepted: false,
+      declined: false,
+      warning: false
+    };
+  },
+  methods: {
+    setFilter(name) {
+      if (this.loading) return;
+      this[name] = !this[name];
+      const allSet =
+        this.failed &&
+        this.pending &&
+        this.accepted &&
+        this.declined &&
+        this.warning;
+      if (allSet) {
+        this.warning = false;
+        this.successful = false;
+        this.failed = false;
+        this.pending = false;
+        this.accepted = false;
+        this.declined = false;
+        this.$store.commit("imports/clearFilers");
+      }
+      const filters = [
+        "failed",
+        "pending",
+        "accepted",
+        "declined",
+        "warning"
+      ].filter(x => this[x]);
+      this.$store.commit("imports/setFilers", filters);
+    }
+  },
+  computed: {
+    pendingStyle() {
+      return {
+        btn: true,
+        "btn-sm": true,
+        "btn-light": !this.pending,
+        "btn-secondary": this.pending
+      };
+    },
+    failedStyle() {
+      return {
+        "ml-2": true,
+        btn: true,
+        "btn-sm": true,
+        "btn-light": !this.failed,
+        "btn-secondary": this.failed
+      };
+    },
+    declinedStyle() {
+      return {
+        "ml-2": true,
+        btn: true,
+        "btn-sm": true,
+        "btn-light": !this.declined,
+        "btn-secondary": this.declined
+      };
+    },
+    acceptedStyle() {
+      return {
+        "ml-2": true,
+        btn: true,
+        "btn-sm": true,
+        "btn-light": !this.accepted,
+        "btn-secondary": this.accepted
+      };
+    },
+    warningStyle() {
+      return {
+        "ml-2": true,
+        btn: true,
+        "btn-sm": true,
+        "btn-light": !this.warning,
+        "btn-secondary": this.warning
+      };
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>