Mercurial > gemma
changeset 1555:a3c2b192daa2
importqueue better collapsible behaviour
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Tue, 11 Dec 2018 16:13:37 +0100 |
parents | 15d736a402c9 |
children | 6869eb94ead2 |
files | client/src/components/admin/Importqueue.vue client/src/components/admin/Importqueuedetail.vue |
diffstat | 2 files changed, 105 insertions(+), 38 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/admin/Importqueue.vue Tue Dec 11 13:33:52 2018 +0100 +++ b/client/src/components/admin/Importqueue.vue Tue Dec 11 16:13:37 2018 +0100 @@ -48,7 +48,7 @@ </button> </div> </div> - <div class="text-left d-flex flex-row border-bottom"> + <div class="text-left d-flex flex-row w-50 border-bottom"> <div class="header py-1 jobid mr-2"> <translate>Id</translate> </div>
--- a/client/src/components/admin/Importqueuedetail.vue Tue Dec 11 13:33:52 2018 +0100 +++ b/client/src/components/admin/Importqueuedetail.vue Tue Dec 11 16:13:37 2018 +0100 @@ -1,37 +1,60 @@ <template> - <div class="d-flex flex-column py-1"> - <div class="d-flex flex-row"> - <div @click="showDetails(job.id)" class="jobid mr-2">{{ job.id }}</div> - <div @click="showDetails(job.id)" class="enqueued mr-2"> + <div class="entry d-flex flex-column py-1 border-bottom w-50"> + <div class="d-flex flex-row position-relative"> + <div @click="showDetails(job.id)" class="jobid ml-2 mt-2 mr-2"> + {{ job.id }} + </div> + <div @click="showDetails(job.id)" class="enqueued mt-2 mr-2"> {{ formatDate(job.enqueued) }} </div> - <div @click="showDetails(job.id)" class="kind mr-2">{{ job.kind }}</div> - <div @click="showDetails(job.id)" class="user mr-2">{{ job.user }}</div> - <div @click="showDetails(job.id)" class="signer mr-2"> + <div @click="showDetails(job.id)" class="kind mt-2 mr-2"> + {{ job.kind }} + </div> + <div @click="showDetails(job.id)" class="user mt-2 mr-2"> + {{ job.user }} + </div> + <div @click="showDetails(job.id)" class="signer mt-2 mr-2"> {{ job.signer }} </div> - <div @click="showDetails(job.id)" class="state mr-2">{{ job.state }}</div> + <div @click="showDetails(job.id)" class="state mt-2 mr-2"> + {{ job.state }} + </div> + <div + @click="showDetails(job.id)" + class="btn btn-sm h-100 rounded-0 btn-info detailsbutton" + > + <font-awesome-icon + v-if="show" + icon="angle-up" + fixed-width + ></font-awesome-icon> + <font-awesome-icon + v-else + icon="angle-down" + fixed-width + ></font-awesome-icon> + </div> </div> - <div class="d-flex flex-row"> + <div class="detailstable d-flex flex-row"> <div :class="collapse"> <table class="table table-responsive"> <thead> <tr> - <th class="first"> - <small><translate>Kind</translate></small> + <th class="first pb-0"> + <small class="condensed"><translate>Kind</translate></small> </th> - <th class="second"> + <th class="second pb-0"> <a href="#" @click="sortAsc = !sortAsc" class="sort-link" - ><small><translate>Date</translate></small> - <small + ><small class="condensed"><translate>Date</translate></small> + <small class="condensed" ><font-awesome-icon :icon="sortIcon" class="ml-1" ></font-awesome-icon></small ></a> </th> - <th class="third"> - <small><translate>Message</translate></small> + <th class="third pb-0"> + <small class="condensed"><translate>Message</translate></small> </th> </tr> </thead> @@ -42,13 +65,13 @@ class="detailsrow" > <td class="first"> - <small>{{ entry.kind }}</small> + <span class="condensed">{{ entry.kind }}</span> </td> <td class="second"> - <small>{{ formatDate(entry.time) }}</small> + <span class="condensed">{{ formatDate(entry.time) }}</span> </td> <td class="third"> - <small>{{ entry.message }}</small> + <span class="condensed">{{ entry.message }}</span> </td> </tr> </tbody> @@ -102,21 +125,25 @@ this.show = false; return; } - HTTP.get("/imports/" + id, { - headers: { "X-Gemma-Auth": localStorage.getItem("token") } - }) - .then(response => { - const { entries } = response.data; - this.entries = entries; - this.show = true; + if (this.entries.length === 0) { + HTTP.get("/imports/" + id, { + headers: { "X-Gemma-Auth": localStorage.getItem("token") } }) - .catch(error => { - const { status, data } = error.response; - displayError({ - title: this.$gettext("Backend Error"), - message: `${status}: ${data.message || data}` + .then(response => { + const { entries } = response.data; + this.entries = entries; + this.show = true; + }) + .catch(error => { + const { status, data } = error.response; + displayError({ + title: this.$gettext("Backend Error"), + message: `${status}: ${data.message || data}` + }); }); - }); + } else { + this.show = true; + } } }, computed: { @@ -138,13 +165,18 @@ sortIcon() { return this.sortAsc ? "sort-amount-down" : "sort-amount-up"; }, + icon() { + return { + "angle-up": !this.show, + "angle-down": this.show + }; + }, collapse() { return { - animated: true, - fadeIn: this.show, details: true, collapse: true, - show: this.show + show: this.show, + "w-100": true }; } } @@ -152,6 +184,31 @@ </script> <style lang="scss" scoped> +.condensed { + font-stretch: condensed; +} + +.entry { + background-color: white; + cursor: pointer; +} + +.entry:hover { + background-color: #f0f0f0; + transition: 1s; +} + +.detailstable { + margin-left: $offset; + margin-right: $large-offset; +} + +.detailsbutton { + position: absolute; + top: 0; + right: 0; + height: 100%; +} .jobid { width: 80px; } @@ -177,7 +234,6 @@ } .details { - background-color: #fafafa; width: 50%; } @@ -200,9 +256,20 @@ } .third { - width: 355px; + width: 600px; padding-left: 0px; border-top: 0px; padding-bottom: $small-offset; } + +thead, +tbody { + display: block; +} + +tbody { + height: 150px; + overflow-y: auto; + overflow-x: hidden; +} </style>