# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1544458230 -3600
# Node ID b03db5726ca5387c6067bc8f5451e3523974776b
# Parent  ccf4fc8a64027d450d82b4e5b43f8ab24bbf37b0
importqueue detail view

diff -r ccf4fc8a6402 -r b03db5726ca5 client/package.json
--- a/client/package.json	Mon Dec 10 16:49:34 2018 +0100
+++ b/client/package.json	Mon Dec 10 17:10:30 2018 +0100
@@ -41,6 +41,7 @@
     "vue-clipboard2": "^0.2.1",
     "vue-color": "^2.6.0",
     "vue-highlightjs": "^1.3.3",
+    "vue-js-modal": "^1.3.27",
     "vue-js-toggle-button": "^1.3.0",
     "vue-router": "^3.0.2",
     "vue-snotify": "^3.2.1",
diff -r ccf4fc8a6402 -r b03db5726ca5 client/src/components/admin/Importqueue.vue
--- a/client/src/components/admin/Importqueue.vue	Mon Dec 10 16:49:34 2018 +0100
+++ b/client/src/components/admin/Importqueue.vue	Mon Dec 10 17:10:30 2018 +0100
@@ -59,8 +59,12 @@
                 </tr>
               </thead>
               <tbody>
-                <tr v-for="job in filteredImports" :key="job.id">
-                  <td>{{ job.enqueued }}</td>
+                <tr
+                  @click="showDetails(job.id)"
+                  v-for="job in filteredImports"
+                  :key="job.id"
+                >
+                  <td>{{ formatSurveyDate(job.enqueued) }}</td>
                   <td>{{ job.kind }}</td>
                   <td>{{ job.user }}</td>
                   <td>{{ job.signer }}</td>
@@ -77,6 +81,37 @@
         </div>
       </div>
     </div>
+    <modal name="details" :heigth="400" :width="600" :scrollable="true">
+      <div @click="close" class="ui-element closebutton">
+        <font-awesome-icon icon="times"></font-awesome-icon>
+      </div>
+      <div class="details">
+        <table class="table">
+          <thead>
+            <tr>
+              <th class="first"><translate>Kind</translate></th>
+              <th class="second">
+                <a href="#" @click="sortAsc = !sortAsc" class="sort-link"
+                  ><translate>Date</translate>
+                  <font-awesome-icon
+                    :icon="sortIcon"
+                    class="ml-1"
+                  ></font-awesome-icon
+                ></a>
+              </th>
+              <th class="third"><translate>Message</translate></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(entry, index) in sortedEntries" :key="index">
+              <td class="first">{{ entry.kind }}</td>
+              <td class="second">{{ formatSurveyDate(entry.time) }}</td>
+              <td class="third">{{ entry.message }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </modal>
   </div>
 </template>
 
@@ -96,6 +131,8 @@
  */
 import { displayError } from "../../lib/errors.js";
 import { mapState } from "vuex";
+import { HTTP } from "../../lib/http.js";
+import { formatSurveyDate } from "../../lib/date.js";
 
 export default {
   name: "importqueue",
@@ -106,13 +143,21 @@
       failed: false,
       pending: false,
       rejected: false,
-      accepted: false
+      accepted: false,
+      entries: [],
+      sortAsc: true
     };
   },
   mounted() {
     this.loadQueue();
   },
   methods: {
+    formatSurveyDate(date) {
+      return formatSurveyDate(date);
+    },
+    clearEntries() {
+      this.entries = [];
+    },
     setFilter(name) {
       this[name] = !this[name];
       const allSet =
@@ -140,11 +185,49 @@
     },
     refresh() {
       this.loadQueue();
+    },
+    showDetails(id) {
+      HTTP.get("/imports/" + id, {
+        headers: { "X-Gemma-Auth": localStorage.getItem("token") }
+      })
+        .then(response => {
+          const { entries } = response.data;
+          this.entries = entries;
+          this.$modal.show("details");
+        })
+        .catch(error => {
+          const { status, data } = error.response;
+          displayError({
+            title: this.$gettext("Backend Error"),
+            message: `${status}: ${data.message || data}`
+          });
+        });
+    },
+    close() {
+      this.$modal.hide("details");
     }
   },
   computed: {
     ...mapState("imports", ["imports"]),
     ...mapState("application", ["showSidebar"]),
+    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";
+    },
     filteredImports() {
       const filtered = this.imports
         .filter(element => {
@@ -224,6 +307,38 @@
 </script>
 
 <style lang="scss" scoped>
+.details thead {
+  display: block;
+}
+.details tbody {
+  display: block;
+}
+
+.details tbody {
+  height: 260px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.first {
+  width: 65px;
+  padding-left: 0px;
+}
+
+.second {
+  width: 180px;
+  padding-left: 0px;
+}
+
+.third {
+  width: 355px;
+  padding-left: 0px;
+}
+
+.closebutton {
+  top: $small-offset;
+}
+
 .refresh {
   position: absolute;
   right: $offset;
diff -r ccf4fc8a6402 -r b03db5726ca5 client/src/components/map/contextbox/Staging.vue
--- a/client/src/components/map/contextbox/Staging.vue	Mon Dec 10 16:49:34 2018 +0100
+++ b/client/src/components/map/contextbox/Staging.vue	Mon Dec 10 17:10:30 2018 +0100
@@ -27,8 +27,8 @@
             }}</a>
           </td>
           <td>{{ data.kind.toUpperCase() }}</td>
-          <td>{{ data.summary.date }}</td>
-          <td>{{ data.enqueued.split("T")[0] }}</td>
+          <td>{{ formatSurveyDate(data.summary.date) }}</td>
+          <td>{{ formatSurveyDate(data.enqueued.split("T")[0]) }}</td>
           <td>{{ data.user }}</td>
           <td>
             <button
@@ -96,6 +96,7 @@
 import { HTTP } from "../../../lib/http.js";
 import { STATES } from "../../../store/imports.js";
 import { displayError, displayInfo } from "../../../lib/errors.js";
+import { formatSurveyDate } from "../../../lib/date.js";
 
 export default {
   data() {
@@ -118,6 +119,9 @@
   },
   STATES: STATES,
   methods: {
+    formatSurveyDate(date) {
+      return formatSurveyDate(date);
+    },
     loadData() {
       this.$store.dispatch("imports/getStaging").catch(error => {
         const { status, data } = error.response;
diff -r ccf4fc8a6402 -r b03db5726ca5 client/src/main.js
--- a/client/src/main.js	Mon Dec 10 16:49:34 2018 +0100
+++ b/client/src/main.js	Mon Dec 10 17:10:30 2018 +0100
@@ -120,6 +120,9 @@
   faWrench
 );
 import ToggleButton from "vue-js-toggle-button";
+import VModal from "vue-js-modal";
+
+Vue.use(VModal);
 Vue.use(ToggleButton);
 
 Vue.component("font-awesome-icon", FontAwesomeIcon);
diff -r ccf4fc8a6402 -r b03db5726ca5 client/yarn.lock
--- a/client/yarn.lock	Mon Dec 10 16:49:34 2018 +0100
+++ b/client/yarn.lock	Mon Dec 10 17:10:30 2018 +0100
@@ -10768,6 +10768,11 @@
     tsconfig "^7.0.0"
     vue-template-es2015-compiler "^1.6.0"
 
+vue-js-modal@^1.3.27:
+  version "1.3.27"
+  resolved "https://registry.yarnpkg.com/vue-js-modal/-/vue-js-modal-1.3.27.tgz#c0733d439c9f3c0f0e6a271b3d85604d5328e039"
+  integrity sha512-w27jHJWTRlcA7qQLs3yM6mi2wFsMHdqHTfyTxO7ENOCInoBY2bIECpAZZ9e8mD8Ka39AaBVkECf95NHE7/oqNg==
+
 vue-js-toggle-button@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/vue-js-toggle-button/-/vue-js-toggle-button-1.3.0.tgz#59240f215fd502f54f0c210c5fac878960b0131c"