diff client/src/components/admin/Importqueue.vue @ 1549:b03db5726ca5

importqueue detail view
author Thomas Junk <thomas.junk@intevation.de>
date Mon, 10 Dec 2018 17:10:30 +0100
parents e7830ab6bacc
children 15d736a402c9
line wrap: on
line diff
--- 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;