Mercurial > gemma
changeset 1549:b03db5726ca5
importqueue detail view
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Mon, 10 Dec 2018 17:10:30 +0100 |
parents | ccf4fc8a6402 |
children | fe633765e05b |
files | client/package.json client/src/components/admin/Importqueue.vue client/src/components/map/contextbox/Staging.vue client/src/main.js client/yarn.lock |
diffstat | 5 files changed, 133 insertions(+), 5 deletions(-) [+] |
line wrap: on
line diff
--- 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",
--- 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;
--- 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;
--- 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);
--- 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"