# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1544612116 -3600
# Node ID 7ac802add1b956f657d156ea9721218bff69a622
# Parent  ad3a19e222bb83cae4489a44fc76fcd54937a5d9
reload strategy for details on refreshing

diff -r ad3a19e222bb -r 7ac802add1b9 client/src/components/importqueue/Importqueue.vue
--- a/client/src/components/importqueue/Importqueue.vue	Wed Dec 12 11:24:47 2018 +0100
+++ b/client/src/components/importqueue/Importqueue.vue	Wed Dec 12 11:55:16 2018 +0100
@@ -69,7 +69,10 @@
               </div>
             </div>
             <div class="text-left" v-for="job in filteredImports" :key="job.id">
-              <Importqueuedetail :job="job"></Importqueuedetail>
+              <Importqueuedetail
+                :reload="reload"
+                :job="job"
+              ></Importqueuedetail>
             </div>
             <div>
               <button @click="refresh" class="btn btn-info refresh">
@@ -109,6 +112,7 @@
   },
   data() {
     return {
+      reload: false,
       searchQuery: "",
       successful: false,
       failed: false,
@@ -138,13 +142,19 @@
       }
     },
     loadQueue() {
-      this.$store.dispatch("imports/getImports").catch(error => {
-        const { status, data } = error.response;
-        displayError({
-          title: this.$gettext("Backend Error"),
-          message: `${status}: ${data.message || data}`
+      this.reload = true;
+      this.$store
+        .dispatch("imports/getImports")
+        .then(() => {
+          this.reload = false;
+        })
+        .catch(error => {
+          const { status, data } = error.response;
+          displayError({
+            title: this.$gettext("Backend Error"),
+            message: `${status}: ${data.message || data}`
+          });
         });
-      });
     },
     refresh() {
       this.loadQueue();
diff -r ad3a19e222bb -r 7ac802add1b9 client/src/components/importqueue/Importqueuedetail.vue
--- a/client/src/components/importqueue/Importqueuedetail.vue	Wed Dec 12 11:24:47 2018 +0100
+++ b/client/src/components/importqueue/Importqueuedetail.vue	Wed Dec 12 11:55:16 2018 +0100
@@ -42,10 +42,10 @@
         <table class="table table-responsive">
           <thead>
             <tr>
-              <th class="first pb-0">
+              <th class="type pb-0">
                 <small class="condensed"><translate>Kind</translate></small>
               </th>
-              <th class="second  pb-0">
+              <th class="datetime  pb-0">
                 <a href="#" @click="sortAsc = !sortAsc" class="sort-link"
                   ><small class="condensed"><translate>Date</translate></small>
                   <small class="condensed"
@@ -55,7 +55,7 @@
                     ></font-awesome-icon></small
                 ></a>
               </th>
-              <th class="third pb-0">
+              <th class="message pb-0">
                 <small class="condensed"><translate>Message</translate></small>
               </th>
             </tr>
@@ -66,13 +66,13 @@
               :key="index"
               class="detailsrow"
             >
-              <td class="first">
+              <td class="type">
                 <span class="condensed">{{ entry.kind }}</span>
               </td>
-              <td class="second">
-                <span class="condensed">{{ formatDate(entry.time) }}</span>
+              <td class="datetime">
+                <span class="condensed">{{ formatDateTime(entry.time) }}</span>
               </td>
-              <td class="third">
+              <td class="message">
                 <span class="condensed">{{ entry.message }}</span>
               </td>
             </tr>
@@ -104,7 +104,7 @@
 
 export default {
   name: "importqueuedetail",
-  props: ["job"],
+  props: ["job", "reload"],
   data() {
     return {
       loading: false,
@@ -113,6 +113,14 @@
       sortAsc: true
     };
   },
+  watch: {
+    reload() {
+      if (this.reload) {
+        this.entries = [];
+        this.show = false;
+      }
+    }
+  },
   methods: {
     formatDate(date) {
       return date
@@ -123,6 +131,19 @@
           })
         : "";
     },
+    formatDateTime(date) {
+      if (!date) return "";
+      const d = new Date(date);
+      return (
+        d.toLocaleDateString(locale2, {
+          day: "2-digit",
+          month: "2-digit",
+          year: "numeric"
+        }) +
+        " - " +
+        d.toLocaleTimeString(locale2)
+      );
+    },
     showDetails(id) {
       if (this.show) {
         this.show = false;
@@ -200,7 +221,7 @@
 
 .entry:hover {
   background-color: #efefef;
-  transition: 1.5s;
+  transition: 1.6s;
 }
 
 .detailstable {
@@ -246,21 +267,21 @@
   line-height: 0.1em;
 }
 
-.first {
+.type {
   width: 65px;
   padding-left: 0px;
   border-top: 0px;
   padding-bottom: $small-offset;
 }
 
-.second {
-  width: 100px;
+.datetime {
+  width: 200px;
   padding-left: 0px;
   border-top: 0px;
   padding-bottom: $small-offset;
 }
 
-.third {
+.message {
   width: 600px;
   padding-left: 0px;
   border-top: 0px;