# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1552380272 -3600
# Node ID 5472a5be09c2c1c6b9d625a8fcbd571194ef4b94
# Parent  eb69c6d27ae5efaa3e98d995383af5ed9d362b20
overview2 WIP

diff -r eb69c6d27ae5 -r 5472a5be09c2 client/src/components/importoverview/ImportOverviewAlt.vue
--- a/client/src/components/importoverview/ImportOverviewAlt.vue	Tue Mar 12 08:47:42 2019 +0100
+++ b/client/src/components/importoverview/ImportOverviewAlt.vue	Tue Mar 12 09:44:32 2019 +0100
@@ -17,7 +17,7 @@
     </div>
     <div class="ml-3 mr-2 mt-2 w-95 ">
       <LogEntry
-        class="border-bottom"
+        class="logentry border-bottom d-flex-flex-column w-100"
         :entry="entry"
         v-for="entry in imports"
         :key="entry.id"
@@ -84,4 +84,8 @@
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.logentry:hover {
+  background: #fafafa;
+}
+</style>
diff -r eb69c6d27ae5 -r 5472a5be09c2 client/src/components/importoverview/LogDetail.vue
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/importoverview/LogDetail.vue	Tue Mar 12 09:44:32 2019 +0100
@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <h1>logdetail</h1>
+  </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>
+ */
+export default {
+  name: "logdetail"
+};
+</script>
+
+<style></style>
diff -r eb69c6d27ae5 -r 5472a5be09c2 client/src/components/importoverview/LogEntry.vue
--- 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>
diff -r eb69c6d27ae5 -r 5472a5be09c2 client/src/store/imports.js
--- a/client/src/store/imports.js	Tue Mar 12 08:47:42 2019 +0100
+++ b/client/src/store/imports.js	Tue Mar 12 09:44:32 2019 +0100
@@ -123,11 +123,28 @@
       });
       state.staging = enriched;
     },
+    showDetailsFor: (state, id) => {
+      state.show = id;
+    },
+    hideDetails: state => {
+      state.show = NODETAILS;
+    },
     setImportToReview: (state, id) => {
       if (!isNaN(parseFloat(id)) && isFinite(id)) {
         state.importToReview = id;
       }
     },
+    toggleApprove: (state, change) => {
+      const { id, newStatus } = change;
+      const stagedResult = state.imports.find(e => {
+        return e.id === id;
+      });
+      if (stagedResult.status === newStatus) {
+        stagedResult.status = STATES.NEEDSAPPROVAL;
+      } else {
+        stagedResult.status = newStatus;
+      }
+    },
     toggleApproval: (state, change) => {
       const { id, newStatus } = change;
       const stagedResult = state.staging.find(e => {