diff client/src/components/importoverview/LogDetail.vue @ 2594:ecec6d5aae00

overview2 WIP
author Thomas Junk <thomas.junk@intevation.de>
date Tue, 12 Mar 2019 11:14:56 +0100
parents 956b230c6062
children 02d5de05291f
line wrap: on
line diff
--- a/client/src/components/importoverview/LogDetail.vue	Tue Mar 12 10:42:27 2019 +0100
+++ b/client/src/components/importoverview/LogDetail.vue	Tue Mar 12 11:14:56 2019 +0100
@@ -1,6 +1,48 @@
 <template>
   <div>
-    <h1>logdetail</h1>
+    <div class="d-flex fex-row">
+      <font-awesome-icon
+        v-if="entry.id === showAdditional"
+        @click="toggleAdditionalInfo"
+        class="my-auto mr-1 text-info pointer"
+        icon="angle-down"
+        fixed-width
+      ></font-awesome-icon>
+      <font-awesome-icon
+        v-if="entry.id !== showAdditional"
+        @click="toggleAdditionalInfo"
+        class="my-auto mr-1 text-info pointer"
+        icon="angle-right"
+        fixed-width
+      ></font-awesome-icon>
+      <span class="text-info"><translate>Additional Info</translate></span>
+    </div>
+    <AdditionalDetail
+      v-if="entry.id === showAdditional"
+      class="ml-2 d-flex flex-row"
+    ></AdditionalDetail>
+    <div class="d-flex fex-row">
+      <font-awesome-icon
+        v-if="entry.id === showLogs"
+        @click="toggleAdditionalLogging"
+        class="my-auto mr-1 text-info pointer"
+        icon="angle-down"
+        fixed-width
+      ></font-awesome-icon>
+      <font-awesome-icon
+        v-if="entry.id !== showLogs"
+        @click="toggleAdditionalLogging"
+        class="my-auto mr-1 text-info pointer"
+        icon="angle-right"
+        fixed-width
+      ></font-awesome-icon>
+      <span class="text-info"><translate>Additional Logs</translate></span>
+    </div>
+
+    <AdditionalLog
+      v-if="entry.id === showLogs"
+      class="ml-2 d-flex flex-row"
+    ></AdditionalLog>
   </div>
 </template>
 
@@ -18,10 +60,36 @@
  * Author(s):
  * Thomas Junk <thomas.junk@intevation.de>
  */
+
+import { mapState } from "vuex";
+
 export default {
   name: "logdetail",
-  props: ["entry"]
+  props: ["entry"],
+  components: {
+    AdditionalDetail: () => import("./AdditionalDetail.vue"),
+    AdditionalLog: () => import("./AdditionalLog.vue")
+  },
+  methods: {
+    toggleAdditionalInfo() {
+      if (this.entry.id === this.showAdditional) {
+        this.$store.commit("imports/hideAdditionalInfo");
+      } else {
+        this.$store.commit("imports/showAdditionalInfoFor", this.entry.id);
+      }
+    },
+    toggleAdditionalLogging() {
+      if (this.entry.id === this.showLogs) {
+        this.$store.commit("imports/hideAdditionalLogs");
+      } else {
+        this.$store.commit("imports/showAdditionalLogsFor", this.entry.id);
+      }
+    }
+  },
+  computed: {
+    ...mapState("imports", ["showAdditional", "showLogs"])
+  }
 };
 </script>
 
-<style></style>
+<style lang="scss" scoped></style>