--- /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>

--- a/client/src/components/importoverview/ImportOverviewAlt.vue	Mon Mar 11 15:35:13 2019 +0100
+++ b/client/src/components/importoverview/ImportOverviewAlt.vue	Mon Mar 11 15:53:31 2019 +0100
@@ -15,7 +15,14 @@
         </button>
       </div>
     </div>
-    <LogEntry v-for="entry in imports" :key="entry.id"></LogEntry>
+    <div class="ml-3 mr-2 mt-2 w-95 ">
+      <LogEntry
+        class="border-bottom"
+        :entry="entry"
+        v-for="entry in imports"
+        :key="entry.id"
+      ></LogEntry>
+    </div>
   </div>
 </template>
 

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/importoverview/LogEntry.vue	Mon Mar 11 15:53:31 2019 +0100
@@ -0,0 +1,33 @@
+<template>
+  <div class="d-flex flex-row">
+    <font-awesome-icon
+      class="mr-1 text-info"
+      icon="angle-right"
+      fixed-width
+    ></font-awesome-icon
+    >Ich bin ein Eintrag!
+    <span
+      ><font-awesome-icon
+        v-if="entry.warnings"
+        class="ml-1 text-warning"
+        icon="exclamation-triangle"
+        fixed-width
+      ></font-awesome-icon
+    ></span>
+    <div v-if="reviewable">Review ME!</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "importlogentry",
+  props: ["entry"],
+  computed: {
+    reviewable() {
+      return this.entry.state === "pending";
+    }
+  }
+};
+</script>
+
+<style></style>