Mercurial > gemma
changeset 1562:7ac802add1b9
reload strategy for details on refreshing
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Wed, 12 Dec 2018 11:55:16 +0100 |
parents | ad3a19e222bb |
children | a0833dc8b1c1 |
files | client/src/components/importqueue/Importqueue.vue client/src/components/importqueue/Importqueuedetail.vue |
diffstat | 2 files changed, 51 insertions(+), 20 deletions(-) [+] |
line wrap: on
line diff
--- 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();
--- 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;