--- a/client/src/components/importoverview/LogEntry.vue	Tue Mar 12 08:47:42 2019 +0100
+++ b/client/src/components/importoverview/LogEntry.vue	Tue Mar 12 09:44:32 2019 +0100
@@ -1,33 +1,146 @@
 <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"
+  <div>
+    <div class="d-flex flex-row">
+      <font-awesome-icon
+        v-if="entry.id === show"
+        @click="toggleDetails"
+        class="my-auto mr-1 text-info pointer"
+        icon="angle-down"
+        fixed-width
+      ></font-awesome-icon>
+      <font-awesome-icon
+        v-if="entry.id !== show"
+        @click="toggleDetails"
+        class="my-auto mr-1 text-info pointer"
+        icon="angle-right"
         fixed-width
-      ></font-awesome-icon
-    ></span>
-    <div v-if="reviewable">Review ME!</div>
+      ></font-awesome-icon>
+      <div class="enqueued">{{ entry.enqueued | surveyDate }}</div>
+      <div class="user">{{ entry.user }}</div>
+      <div class="signer">{{ entry.signer }}</div>
+      <div>
+        <font-awesome-icon
+          v-if="entry.warnings"
+          class="ml-1 text-warning"
+          icon="exclamation-triangle"
+          fixed-width
+        ></font-awesome-icon>
+      </div>
+      <div v-if="reviewable" class="controls d-flex flex-row ml-auto">
+        <div>
+          <button
+            :class="{
+              'ml-3': true,
+              'mr-3': true,
+              btn: true,
+              'btn-outline-success': needsApproval || isRejected,
+              'btn-success': isApproved,
+              actions: true
+            }"
+            @click="toggleApproval($options.STATES.APPROVED)"
+          >
+            <font-awesome-icon
+              class="mx-auto small pointer mb-2"
+              icon="check"
+            ></font-awesome-icon>
+          </button>
+        </div>
+        <div>
+          <button
+            :class="{
+              'mr-3': true,
+              btn: true,
+              'btn-outline-danger': needsApproval || isApproved,
+              'btn-danger': isRejected,
+              actions: true
+            }"
+            @click="toggleApproval($options.STATES.REJECTED)"
+          >
+            <font-awesome-icon
+              icon="times"
+              class="small pointer mb-2"
+            ></font-awesome-icon>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div class="d-flex flex-row">
+      <LogDetail v-if="show === entry.id"></LogDetail>
+    </div>
   </div>
 </template>
 
 <script>
+/* This is Free Software under GNU Affero General Public License v >= 3.0
+ * without warranty, see README.md and license for details.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ * License-Filename: LICENSES/AGPL-3.0.txt
+ *
+ * Copyright (C) 2018 by via donau
+ *   – Österreichische Wasserstraßen-Gesellschaft mbH
+ * Software engineering by Intevation GmbH
+ *
+ * Author(s):
+ * Thomas Junk <thomas.junk@intevation.de>
+ */
+import { mapState } from "vuex";
+import { STATES } from "@/store/imports.js";
+
 export default {
   name: "importlogentry",
   props: ["entry"],
+  components: {
+    LogDetail: () => import("./LogDetail.vue")
+  },
+  methods: {
+    toggleApproval(state) {
+      this.$store.commit("imports/toggleApprove", {
+        id: this.entry.id,
+        newStatus: state
+      });
+    },
+    toggleDetails() {
+      const { id } = this.entry;
+      if (id === this.show) {
+        this.$store.commit("imports/hideDetails");
+      } else {
+        this.$store.commit("imports/showDetailsFor", id);
+      }
+    }
+  },
   computed: {
+    ...mapState("imports", ["show"]),
+    needsApproval() {
+      return this.entry.status === STATES.NEEDSAPPROVAL;
+    },
+    isRejected() {
+      return this.entry.status === STATES.REJECTED;
+    },
+    isApproved() {
+      return this.entry.status === STATES.APPROVED;
+    },
     reviewable() {
       return this.entry.state === "pending";
     }
-  }
+  },
+  STATES: STATES
 };
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+.enqueued {
+  width: 20%;
+}
+.user {
+  width: 10%;
+}
+.signer {
+  width: 10%;
+}
+button {
+  height: 19px;
+  width: 19px;
+  padding: 0.1rem;
+}
+</style>