Mercurial > gemma
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;