--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/admin/Importqueuedetail.vue	Tue Dec 11 13:33:52 2018 +0100
@@ -0,0 +1,208 @@
+<template>
+  <div class="d-flex flex-column py-1">
+    <div class="d-flex flex-row">
+      <div @click="showDetails(job.id)" class="jobid mr-2">{{ job.id }}</div>
+      <div @click="showDetails(job.id)" class="enqueued mr-2">
+        {{ formatDate(job.enqueued) }}
+      </div>
+      <div @click="showDetails(job.id)" class="kind mr-2">{{ job.kind }}</div>
+      <div @click="showDetails(job.id)" class="user mr-2">{{ job.user }}</div>
+      <div @click="showDetails(job.id)" class="signer mr-2">
+        {{ job.signer }}
+      </div>
+      <div @click="showDetails(job.id)" class="state mr-2">{{ job.state }}</div>
+    </div>
+    <div class="d-flex flex-row">
+      <div :class="collapse">
+        <table class="table table-responsive">
+          <thead>
+            <tr>
+              <th class="first">
+                <small><translate>Kind</translate></small>
+              </th>
+              <th class="second">
+                <a href="#" @click="sortAsc = !sortAsc" class="sort-link"
+                  ><small><translate>Date</translate></small>
+                  <small
+                    ><font-awesome-icon
+                      :icon="sortIcon"
+                      class="ml-1"
+                    ></font-awesome-icon></small
+                ></a>
+              </th>
+              <th class="third">
+                <small><translate>Message</translate></small>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="(entry, index) in sortedEntries"
+              :key="index"
+              class="detailsrow"
+            >
+              <td class="first">
+                <small>{{ entry.kind }}</small>
+              </td>
+              <td class="second">
+                <small>{{ formatDate(entry.time) }}</small>
+              </td>
+              <td class="third">
+                <small>{{ entry.message }}</small>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </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 { HTTP } from "../../lib/http.js";
+import { displayError } from "../../lib/errors.js";
+import locale2 from "locale2";
+
+export default {
+  name: "importqueuedetail",
+  props: ["job"],
+  data() {
+    return {
+      show: false,
+      entries: [],
+      sortAsc: true
+    };
+  },
+  methods: {
+    formatDate(date) {
+      return date
+        ? new Date(date).toLocaleDateString(locale2, {
+            day: "2-digit",
+            month: "2-digit",
+            year: "numeric"
+          })
+        : "";
+    },
+    showDetails(id) {
+      if (this.show) {
+        this.show = false;
+        return;
+      }
+      HTTP.get("/imports/" + id, {
+        headers: { "X-Gemma-Auth": localStorage.getItem("token") }
+      })
+        .then(response => {
+          const { entries } = response.data;
+          this.entries = entries;
+          this.show = true;
+        })
+        .catch(error => {
+          const { status, data } = error.response;
+          displayError({
+            title: this.$gettext("Backend Error"),
+            message: `${status}: ${data.message || data}`
+          });
+        });
+    }
+  },
+  computed: {
+    sortedEntries() {
+      let sorted = this.entries.slice();
+      sorted.sort((r1, r2) => {
+        let d1 = new Date(r1.time);
+        let d2 = new Date(r2.time);
+        if (d2 < d1) {
+          return !this.sortAsc ? -1 : 1;
+        }
+        if (d2 > d1) {
+          return !this.sortAsc ? 1 : -1;
+        }
+        return 0;
+      });
+      return sorted;
+    },
+    sortIcon() {
+      return this.sortAsc ? "sort-amount-down" : "sort-amount-up";
+    },
+    collapse() {
+      return {
+        animated: true,
+        fadeIn: this.show,
+        details: true,
+        collapse: true,
+        show: this.show
+      };
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.jobid {
+  width: 80px;
+}
+
+.enqueued {
+  width: 120px;
+}
+
+.user {
+  width: 80px;
+}
+
+.signer {
+  width: 80px;
+}
+
+.kind {
+  width: 80px;
+}
+
+.state {
+  width: 80px;
+}
+
+.details {
+  background-color: #fafafa;
+  width: 50%;
+}
+
+.detailsrow {
+  line-height: 0.1em;
+}
+
+.first {
+  width: 65px;
+  padding-left: 0px;
+  border-top: 0px;
+  padding-bottom: $small-offset;
+}
+
+.second {
+  width: 100px;
+  padding-left: 0px;
+  border-top: 0px;
+  padding-bottom: $small-offset;
+}
+
+.third {
+  width: 355px;
+  padding-left: 0px;
+  border-top: 0px;
+  padding-bottom: $small-offset;
+}
+</style>