Mercurial > gemma
changeset 2559:d9e1db955d49
Backed out changeset 91c68153e7b6
| author | Thomas Junk <thomas.junk@intevation.de> |
|---|---|
| date | Fri, 08 Mar 2019 13:36:24 +0100 |
| parents | 91c68153e7b6 |
| children | f3211d888317 |
| files | client/src/components/Contextbox.vue client/src/components/importoverview/ImportOverview.vue client/src/components/importoverview/ImportOverviewAlt.vue client/src/components/importoverview/ImportOverview_blue.vue |
| diffstat | 4 files changed, 533 insertions(+), 558 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/Contextbox.vue Fri Mar 08 12:24:42 2019 +0100 +++ b/client/src/components/Contextbox.vue Fri Mar 08 13:36:24 2019 +0100 @@ -36,7 +36,7 @@ ImportOverview: () => import("@/components/importoverview/ImportOverview.vue"), ImportOverviewAlt: () => - import("@/components/importoverview/ImportOverview_blue.vue") + import("@/components/importoverview/ImportOverviewAlt.vue") }, computed: { ...mapState("application", [
--- a/client/src/components/importoverview/ImportOverview.vue Fri Mar 08 12:24:42 2019 +0100 +++ b/client/src/components/importoverview/ImportOverview.vue Fri Mar 08 13:36:24 2019 +0100 @@ -5,263 +5,61 @@ title="Staging Area" :closeCallback="$parent.close" /> - <div class="imports text-left ml-1 mr-1"> - <div class="mt-3 d-flex flex-row border-bottom"> - <div class="icons small condensed"> </div> - <div class="id small condensed">Id</div> - <div class="kind small condensed">Kind</div> - <div class="date small condensed"> - Date - </div> - <div class="enqueued small condensed"> - Imported - </div> - <div class="user small condensed">User</div> - <div class="state small condensed">State</div> - <div class="actions small condensed"> </div> + <div class="d-flex flex-row w-100 justify-content-end"> + <button + class="btn btn-sm btn-outline-info align-self-start mr-3" + @click="refresh" + > + <font-awesome-icon icon="redo"></font-awesome-icon> + </button> + </div> + <div class="d-flex flex-row w-100 border-bottom"> + <font-awesome-icon + class="pointer" + @click="toggleStaging()" + v-if="stagingVisible && staging.length > 0" + icon="angle-up" + fixed-width + ></font-awesome-icon> + <font-awesome-icon + class="pointer" + @click="toggleStaging()" + v-if="!stagingVisible && staging.length > 0" + icon="angle-down" + fixed-width + ></font-awesome-icon> + <span style="width:1.25em;" v-if="!(staging.length > 0)"></span> + <Staging v-if="stagingVisible && staging.length > 0"></Staging> + <div v-else class="d-flex flex-row"> + <h6> + <small><translate>Review</translate></small> + </h6> + <small class="ml-3" v-if="!(staging.length > 0)" + ><translate>Nothing to review</translate></small + > </div> - <div class="d-flex flex-row" v-for="entry in importQueue" :key="entry.id"> - <div class="d-flex flex-column w-100"> - <div class="d-flex flex-row"> - <div class="icons"> - <font-awesome-icon - @click="toggleDetails(entry.id)" - class="pointer text-info" - v-if="show != entry.id" - icon="angle-right" - fixed-width - ></font-awesome-icon> - <font-awesome-icon - @click="toggleDetails(entry.id)" - class="pointer text-info" - v-if="show == entry.id" - icon="angle-down" - fixed-width - ></font-awesome-icon> - </div> - <div class="id small condensed">{{ entry.id }}</div> - <div class="kind small condensed"> - {{ entry.kind.toUpperCase() }} - </div> - <div class="date small condensed"> - {{ entry.summary.date | surveyDate }} - </div> - <div class="enqueued small condensed"> - {{ entry.enqueued.split("T")[0] | surveyDate }} - </div> - <div class="user small condensed">{{ entry.user }}</div> - <div class="state small condensed"> - {{ entry.state }} - </div> - <div class="actions small condensed"> - <font-awesome-icon - v-if="entry.warnings" - class="ml-1 text-warning text-info" - icon="exclamation-triangle" - fixed-width - ></font-awesome-icon> - <font-awesome-icon - v-if="!entry.warnings" - class="ml-1 text-white" - icon="exclamation-triangle" - fixed-width - ></font-awesome-icon> - <font-awesome-icon - class="ml-1 text-mute" - icon="check" - fixed-width - ></font-awesome-icon> - <font-awesome-icon - class="ml-1 text-mute" - icon="times" - fixed-width - ></font-awesome-icon> - </div> - </div> - <div class="d-flex flex-row" v-if="show == entry.id"> - <div class="ml-1 details d-flex flex-column"> - <div - v-if="isApprovedGaugeMeasurement(entry.kind.toUpperCase())" - class="d-flex flex-row" - > - <font-awesome-icon - @click="toggleAdditional(entry.id)" - class="pointer text-info" - v-if="showAdditional != entry.id" - icon="angle-right" - fixed-width - ></font-awesome-icon> - <font-awesome-icon - @click="toggleAdditional(entry.id)" - class="pointer text-info" - v-if="showAdditional == entry.id" - icon="angle-down" - fixed-width - ></font-awesome-icon> - <small class="condensed">Additional Info</small> - </div> - <div - v-if="showAdditional == entry.id" - class="additionalinfo ml-4" - > - <div v-for="(result, index) in entry.summary" :key="index"> - <font-awesome-icon - @click="toggleDiff(index)" - class="pointer text-info" - v-if="showDiff != index" - icon="angle-right" - fixed-width - ></font-awesome-icon> - <font-awesome-icon - @click="toggleDiff(index)" - class="pointer text-info" - v-if="showDiff == index" - icon="angle-down" - fixed-width - ></font-awesome-icon> - <span - v-if="result.versions.length == 1" - class="agmcode text-left" - ><small - >{{ result["fk-gauge-id"] }} - <translate class="mr-1">( New )</translate></small - ></span - > - <span - v-if="result.versions.length == 2" - class="agmcode text-left" - ><small>{{ result["fk-gauge-id"] }}</small></span - > - <span class="agmdetail text-left" - ><small>{{ - result["measure-date"] | datetime - }}</small></span - > - <div v-if="showDiff == index" class="ml-1"> - <div> - <div class="d-flex flex-row pl-3 text-left"> - <div class="header border-bottom agmdetailskeys"> - <small><translate>Value</translate></small> - </div> - <div - v-if="result.versions.length == 2" - class="header border-bottom agmdetailsvalues" - > - <small><translate>Old</translate></small> - </div> - <div class="header border-bottom agmdetailsvalues"> - <small><translate>New</translate></small> - </div> - </div> - <div - class="d-flex flex-row pl-3 text-left" - v-for="(entry, index) in Object.keys( - result.versions[0] - )" - :key="index" - > - <div - v-if=" - result.versions.length == 1 || - result.versions[0][entry] != - result.versions[1][entry] - " - class="agmdetailskeys" - > - <small>{{ entry }}</small> - </div> - <div - v-if=" - result.versions.length == 1 || - result.versions[0][entry] != - result.versions[1][entry] - " - class="agmdetailsvalues" - > - <small>{{ result.versions[0][entry] }}</small> - </div> - <div - v-if=" - result.versions.length == 2 && - result.versions[0][entry] != - result.versions[1][entry] - " - class="agmdetailsvalues" - > - <small>{{ result.versions[1][entry] }}</small> - </div> - </div> - </div> - </div> - </div> - </div> - <div class="d-flex flex-row"> - <div class="d-flex flex-column"> - <div class="d-flex flex-row"> - <font-awesome-icon - @click="toggleLogs(entry.id)" - class="pointer text-info" - v-if="showLogs != entry.id" - icon="angle-right" - fixed-width - ></font-awesome-icon> - <font-awesome-icon - @click="toggleLogs(entry.id)" - class="pointer text-info" - v-if="showLogs == entry.id" - icon="angle-down" - fixed-width - ></font-awesome-icon> - <small class="condensed">Logs</small> - </div> - <div v-if="showLogs == entry.id" class="ml-4 logentries"> - <div - v-for="(logentry, index) in logEntries" - :key="index" - class="d-flex flex-row" - > - <small - :class="[ - 'condensed type', - { - 'text-danger': - logentry.kind.toUpperCase() == 'ERROR', - 'text-warning': - logentry.kind.toUpperCase() == 'WARN' - } - ]" - >{{ logentry.kind.toUpperCase() }}</small - > - <small - :class="[ - 'condensed type', - { - 'text-danger': - logentry.kind.toUpperCase() == 'ERROR', - 'text-warning': - logentry.kind.toUpperCase() == 'WARN' - } - ]" - >{{ logentry.time }}</small - > - <small - :class="[ - 'condensed type', - { - 'text-danger': - logentry.kind.toUpperCase() == 'ERROR', - 'text-warning': - logentry.kind.toUpperCase() == 'WARN' - } - ]" - >{{ logentry.message }}</small - > - </div> - </div> - </div> - </div> - </div> - </div> + </div> + <div class="mt-2"> + <div class="d-flex flex-row"> + <font-awesome-icon + class="pointer" + @click="toggleLogs()" + v-if="logsVisible" + icon="angle-up" + fixed-width + ></font-awesome-icon> + <font-awesome-icon + class="pointer" + @click="toggleLogs()" + v-if="!logsVisible" + icon="angle-down" + fixed-width + ></font-awesome-icon> + <Logs v-if="logsVisible" :reload="reload"></Logs> + <div v-else> + <h6> + <small><translate>Logs</translate></small> + </h6> </div> </div> </div> @@ -269,97 +67,53 @@ </template> <script> +/* This is Free Software under GNU Affero General Public License v >= 3.0 + * without warranty, see README.md and license for details. + * + * SPDX-License-Identifier: AGPL-3.0-or-later + * License-Filename: LICENSES/AGPL-3.0.txt + * + * Copyright (C) 2018 by via donau + * – Österreichische Wasserstraßen-Gesellschaft mbH + * Software engineering by Intevation GmbH + * + * Author(s): + * Thomas Junk <thomas.junk@intevation.de> + */ import { displayError } from "@/lib/errors.js"; -import { HTTP } from "@/lib/http"; - -//import { mapState } from "vuex"; - -const NODETAILS = -1; -const NODIFF = -1; +import { mapState } from "vuex"; export default { - name: "importoverviewalt", + name: "importoverview", data() { return { - showDiff: NODIFF, - importQueue: [], - logEntries: [], - show: NODETAILS, - showAdditional: NODETAILS, - showLogs: NODETAILS + reload: false }; }, + components: { + Staging: () => import("./staging/Staging.vue"), + Logs: () => import("./importlogs/Logs.vue") + }, + computed: { + ...mapState("imports", ["stagingVisible", "logsVisible", "staging"]) + }, methods: { - isFairwayDimension(kind) { - return kind === "FD"; - }, - isApprovedGaugeMeasurement(kind) { - return kind === "AGM"; - }, - isBottleneck(kind) { - return kind === "BN" || kind === "UBN"; - }, - isStretch(kind) { - return kind === "ST"; - }, - toggleAdditional(id) { - if (id === this.showAdditional) { - this.showAdditional = NODETAILS; - return; - } - this.showAdditional = id; + toggleStaging() { + this.$store.commit("imports/setStagingVisibility", !this.stagingVisible); }, - toggleDiff(id) { - if (id === this.showDiff) { - this.showDiff = NODIFF; - return; - } - this.showDiff = id; - }, - toggleLogs(id) { - if (id === this.showLogs) { - this.showLogs = NODETAILS; - return; - } - this.loadLogEntries(id); - }, - toggleDetails(id) { - if (id === this.show) { - this.show = NODETAILS; - this.showAdditional = NODETAILS; - this.showLogs = NODETAILS; - return; - } - this.show = id; + toggleLogs() { + this.$store.commit("imports/setLogsVisibility", !this.logsVisible); }, refresh() { this.reload = true; this.loadImportQueue(); this.loadLogs(); }, - loadLogEntries(id) { - HTTP.get("/imports/" + id, { - headers: { "X-Gemma-Auth": localStorage.getItem("token") } - }) - .then(response => { - const { entries } = response.data; - this.logEntries = entries; - this.showLogs = id; - }) - .catch(error => { - const { status, data } = error.response; - displayError({ - title: this.$gettext("Backend Error"), - message: `${status}: ${data.message || data}` - }); - }); - }, loadImportQueue() { - HTTP.get("/imports?states=running,pending", { - headers: { "X-Gemma-Auth": localStorage.getItem("token") } - }) - .then(response => { - this.importQueue = response.data.imports; + this.$store + .dispatch("imports/getStaging") + .then(() => { + this.reload = false; }) .catch(error => { const { status, data } = error.response; @@ -386,85 +140,13 @@ }, mounted() { this.refresh(); - }, - NODETAILS: NODETAILS + } }; </script> <style lang="scss" scoped> -.agmdetailskeys { - width: 100px; -} - -.agmdetailsvalues { - width: 200px; -} - .overview { - max-height: 800px; -} -.logentries { - max-height: 400px; - max-width: 600px; - font-size: smaller; - white-space: nowrap; - line-height: 1.1em; - overflow: auto; -} - -.additionalinfo { - max-width: 650px; - max-height: 350px; + max-height: 850px; overflow-y: auto; } - -.additionalinfo > div:hover { - background: #eee; -} - -.logentries > div:hover { - background: #eee; -} - -.details { - width: 100%; - padding: 5px; - cursor: pointer; -} - -.imports { - line-height: 1.5rem; -} - -.icons { - width: 4%; -} - -.id { - width: 10%; -} - -.kind { - width: 10%; -} - -.date { - width: 20%; -} - -.enqueued { - width: 20%; -} - -.user { - width: 10%; -} - -.state { - width: 10%; -} - -.actions { - width: 16%; -} </style>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/components/importoverview/ImportOverviewAlt.vue Fri Mar 08 13:36:24 2019 +0100 @@ -0,0 +1,445 @@ +<template> + <div class="overview"> + <UIBoxHeader + icon="clipboard-check" + title="Staging Area" + :closeCallback="$parent.close" + /> + <div class="imports text-left ml-1 mr-1"> + <div class="mt-3 d-flex flex-row border-bottom"> + <div class="icons small condensed"> </div> + <div class="id small condensed">Id</div> + <div class="kind small condensed">Kind</div> + <div class="date small condensed"> + Date + </div> + <div class="enqueued small condensed"> + Imported + </div> + <div class="user small condensed">User</div> + <div class="actions small condensed"> </div> + </div> + <div class="d-flex flex-row" v-for="entry in importQueue" :key="entry.id"> + <div class="d-flex flex-column w-100"> + <div class="d-flex flex-row"> + <div class="icons"> + <font-awesome-icon + @click="toggleDetails(entry.id)" + class="pointer text-info" + v-if="show != entry.id" + icon="angle-right" + fixed-width + ></font-awesome-icon> + <font-awesome-icon + @click="toggleDetails(entry.id)" + class="pointer text-info" + v-if="show == entry.id" + icon="angle-down" + fixed-width + ></font-awesome-icon> + </div> + <div class="id small condensed">{{ entry.id }}</div> + <div class="kind small condensed"> + {{ entry.kind.toUpperCase() }} + </div> + <div class="date small condensed"> + {{ entry.summary.date | surveyDate }} + </div> + <div class="enqueued small condensed"> + {{ entry.enqueued.split("T")[0] | surveyDate }} + </div> + <div class="user small condensed">{{ entry.user }}</div> + <div class="actions small condensed"> + <font-awesome-icon + v-if="entry.warnings" + class="ml-1 text-warning text-info" + icon="exclamation-triangle" + fixed-width + ></font-awesome-icon> + </div> + </div> + <div class="d-flex flex-row" v-if="show == entry.id"> + <div class="ml-1 details d-flex flex-column"> + <div + v-if="isApprovedGaugeMeasurement(entry.kind.toUpperCase())" + class="d-flex flex-row" + > + <font-awesome-icon + @click="toggleAdditional(entry.id)" + class="pointer text-info" + v-if="showAdditional != entry.id" + icon="angle-right" + fixed-width + ></font-awesome-icon> + <font-awesome-icon + @click="toggleAdditional(entry.id)" + class="pointer text-info" + v-if="showAdditional == entry.id" + icon="angle-down" + fixed-width + ></font-awesome-icon> + <small class="condensed">Additional Info</small> + </div> + <div + v-if="showAdditional == entry.id" + class="additionalinfo ml-4" + > + <div v-for="(result, index) in entry.summary" :key="index"> + <font-awesome-icon + @click="toggleDiff(index)" + class="pointer text-info" + v-if="showDiff != index" + icon="angle-right" + fixed-width + ></font-awesome-icon> + <font-awesome-icon + @click="toggleDiff(index)" + class="pointer text-info" + v-if="showDiff == index" + icon="angle-down" + fixed-width + ></font-awesome-icon> + <span + v-if="result.versions.length == 1" + class="agmcode text-left" + ><small + >{{ result["fk-gauge-id"] }} + <translate class="mr-1">( New )</translate></small + ></span + > + <span + v-if="result.versions.length == 2" + class="agmcode text-left" + ><small>{{ result["fk-gauge-id"] }}</small></span + > + <span class="agmdetail text-left" + ><small>{{ + result["measure-date"] | datetime + }}</small></span + > + <div v-if="showDiff == index" class="ml-1"> + <div> + <div class="d-flex flex-row pl-3 text-left"> + <div class="header border-bottom agmdetailskeys"> + <small><translate>Value</translate></small> + </div> + <div + v-if="result.versions.length == 2" + class="header border-bottom agmdetailsvalues" + > + <small><translate>Old</translate></small> + </div> + <div class="header border-bottom agmdetailsvalues"> + <small><translate>New</translate></small> + </div> + </div> + <div + class="d-flex flex-row pl-3 text-left" + v-for="(entry, index) in Object.keys( + result.versions[0] + )" + :key="index" + > + <div + v-if=" + result.versions.length == 1 || + result.versions[0][entry] != + result.versions[1][entry] + " + class="agmdetailskeys" + > + <small>{{ entry }}</small> + </div> + <div + v-if=" + result.versions.length == 1 || + result.versions[0][entry] != + result.versions[1][entry] + " + class="agmdetailsvalues" + > + <small>{{ result.versions[0][entry] }}</small> + </div> + <div + v-if=" + result.versions.length == 2 && + result.versions[0][entry] != + result.versions[1][entry] + " + class="agmdetailsvalues" + > + <small>{{ result.versions[1][entry] }}</small> + </div> + </div> + </div> + </div> + </div> + </div> + <div class="d-flex flex-row"> + <div class="d-flex flex-column"> + <div class="d-flex flex-row"> + <font-awesome-icon + @click="toggleLogs(entry.id)" + class="pointer text-info" + v-if="showLogs != entry.id" + icon="angle-right" + fixed-width + ></font-awesome-icon> + <font-awesome-icon + @click="toggleLogs(entry.id)" + class="pointer text-info" + v-if="showLogs == entry.id" + icon="angle-down" + fixed-width + ></font-awesome-icon> + <small class="condensed">Logs</small> + </div> + <div v-if="showLogs == entry.id" class="ml-4 logentries"> + <div + v-for="(logentry, index) in logEntries" + :key="index" + class="d-flex flex-row" + > + <small + :class="[ + 'condensed type', + { + 'text-danger': + logentry.kind.toUpperCase() == 'ERROR', + 'text-warning': + logentry.kind.toUpperCase() == 'WARN' + } + ]" + >{{ logentry.kind.toUpperCase() }}</small + > + <small + :class="[ + 'condensed type', + { + 'text-danger': + logentry.kind.toUpperCase() == 'ERROR', + 'text-warning': + logentry.kind.toUpperCase() == 'WARN' + } + ]" + >{{ logentry.time }}</small + > + <small + :class="[ + 'condensed type', + { + 'text-danger': + logentry.kind.toUpperCase() == 'ERROR', + 'text-warning': + logentry.kind.toUpperCase() == 'WARN' + } + ]" + >{{ logentry.message }}</small + > + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> +</template> + +<script> +import { displayError } from "@/lib/errors.js"; +import { HTTP } from "@/lib/http"; + +//import { mapState } from "vuex"; + +const NODETAILS = -1; +const NODIFF = -1; + +export default { + name: "importoverviewalt", + data() { + return { + showDiff: NODIFF, + importQueue: [], + logEntries: [], + show: NODETAILS, + showAdditional: NODETAILS, + showLogs: NODETAILS + }; + }, + methods: { + isFairwayDimension(kind) { + return kind === "FD"; + }, + isApprovedGaugeMeasurement(kind) { + return kind === "AGM"; + }, + isBottleneck(kind) { + return kind === "BN" || kind === "UBN"; + }, + isStretch(kind) { + return kind === "ST"; + }, + toggleAdditional(id) { + if (id === this.showAdditional) { + this.showAdditional = NODETAILS; + return; + } + this.showAdditional = id; + }, + toggleDiff(id) { + if (id === this.showDiff) { + this.showDiff = NODIFF; + return; + } + this.showDiff = id; + }, + toggleLogs(id) { + if (id === this.showLogs) { + this.showLogs = NODETAILS; + return; + } + this.loadLogEntries(id); + }, + toggleDetails(id) { + if (id === this.show) { + this.show = NODETAILS; + this.showAdditional = NODETAILS; + this.showLogs = NODETAILS; + return; + } + this.show = id; + }, + refresh() { + this.reload = true; + this.loadImportQueue(); + this.loadLogs(); + }, + loadLogEntries(id) { + HTTP.get("/imports/" + id, { + headers: { "X-Gemma-Auth": localStorage.getItem("token") } + }) + .then(response => { + const { entries } = response.data; + this.logEntries = entries; + this.showLogs = id; + }) + .catch(error => { + const { status, data } = error.response; + displayError({ + title: this.$gettext("Backend Error"), + message: `${status}: ${data.message || data}` + }); + }); + }, + loadImportQueue() { + HTTP.get("/imports?states=running,pending", { + headers: { "X-Gemma-Auth": localStorage.getItem("token") } + }) + .then(response => { + this.importQueue = response.data.imports; + }) + .catch(error => { + const { status, data } = error.response; + displayError({ + title: "Backend Error", + message: `${status}: ${data.message || data}` + }); + }); + }, + loadLogs() { + 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}` + }); + }); + } + }, + mounted() { + this.refresh(); + }, + NODETAILS: NODETAILS +}; +</script> + +<style lang="scss" scoped> +.agmdetailskeys { + width: 100px; +} + +.agmdetailsvalues { + width: 200px; +} + +.overview { + max-height: 800px; +} +.logentries { + max-height: 400px; + max-width: 600px; + font-size: smaller; + white-space: nowrap; + line-height: 1.1em; + overflow: auto; +} + +.additionalinfo { + max-width: 650px; + max-height: 200px; + overflow-y: auto; +} + +.additionalinfo > div:hover { + background: #eee; +} + +.logentries > div:hover { + background: #eee; +} + +.details { + width: 100%; + padding: 5px; + cursor: pointer; +} + +.imports { + line-height: 0.8rem; +} + +.icons { + width: 4%; +} + +.id { + width: 10%; +} + +.kind { + width: 10%; +} + +.date { + width: 20%; +} + +.enqueued { + width: 20%; +} + +.user { + width: 10%; +} +.actions { + width: 16%; +} +</style>
--- a/client/src/components/importoverview/ImportOverview_blue.vue Fri Mar 08 12:24:42 2019 +0100 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,152 +0,0 @@ -<template> - <div class="overview"> - <UIBoxHeader - icon="clipboard-check" - title="Staging Area" - :closeCallback="$parent.close" - /> - <div class="d-flex flex-row w-100 justify-content-end"> - <button - class="btn btn-sm btn-outline-info align-self-start mr-3" - @click="refresh" - > - <font-awesome-icon icon="redo"></font-awesome-icon> - </button> - </div> - <div class="d-flex flex-row w-100 border-bottom"> - <font-awesome-icon - class="pointer" - @click="toggleStaging()" - v-if="stagingVisible && staging.length > 0" - icon="angle-up" - fixed-width - ></font-awesome-icon> - <font-awesome-icon - class="pointer" - @click="toggleStaging()" - v-if="!stagingVisible && staging.length > 0" - icon="angle-down" - fixed-width - ></font-awesome-icon> - <span style="width:1.25em;" v-if="!(staging.length > 0)"></span> - <Staging v-if="stagingVisible && staging.length > 0"></Staging> - <div v-else class="d-flex flex-row"> - <h6> - <small><translate>Review</translate></small> - </h6> - <small class="ml-3" v-if="!(staging.length > 0)" - ><translate>Nothing to review</translate></small - > - </div> - </div> - <div class="mt-2"> - <div class="d-flex flex-row"> - <font-awesome-icon - class="pointer" - @click="toggleLogs()" - v-if="logsVisible" - icon="angle-up" - fixed-width - ></font-awesome-icon> - <font-awesome-icon - class="pointer" - @click="toggleLogs()" - v-if="!logsVisible" - icon="angle-down" - fixed-width - ></font-awesome-icon> - <Logs v-if="logsVisible" :reload="reload"></Logs> - <div v-else> - <h6> - <small><translate>Logs</translate></small> - </h6> - </div> - </div> - </div> - </div> -</template> - -<script> -/* This is Free Software under GNU Affero General Public License v >= 3.0 - * without warranty, see README.md and license for details. - * - * SPDX-License-Identifier: AGPL-3.0-or-later - * License-Filename: LICENSES/AGPL-3.0.txt - * - * Copyright (C) 2018 by via donau - * – Österreichische Wasserstraßen-Gesellschaft mbH - * Software engineering by Intevation GmbH - * - * Author(s): - * Thomas Junk <thomas.junk@intevation.de> - */ -import { displayError } from "@/lib/errors.js"; -import { mapState } from "vuex"; - -export default { - name: "importoverview", - data() { - return { - reload: false - }; - }, - components: { - Staging: () => import("./staging/Staging.vue"), - Logs: () => import("./importlogs/Logs.vue") - }, - computed: { - ...mapState("imports", ["stagingVisible", "logsVisible", "staging"]) - }, - methods: { - toggleStaging() { - this.$store.commit("imports/setStagingVisibility", !this.stagingVisible); - }, - toggleLogs() { - this.$store.commit("imports/setLogsVisibility", !this.logsVisible); - }, - refresh() { - this.reload = true; - this.loadImportQueue(); - this.loadLogs(); - }, - loadImportQueue() { - this.$store - .dispatch("imports/getStaging") - .then(() => { - this.reload = false; - }) - .catch(error => { - const { status, data } = error.response; - displayError({ - title: "Backend Error", - message: `${status}: ${data.message || data}` - }); - }); - }, - loadLogs() { - 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}` - }); - }); - } - }, - mounted() { - this.refresh(); - } -}; -</script> - -<style lang="scss" scoped> -.overview { - max-height: 850px; - overflow-y: auto; -} -</style>