Mercurial > gemma
changeset 2592:5472a5be09c2
overview2 WIP
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Tue, 12 Mar 2019 09:44:32 +0100 |
parents | eb69c6d27ae5 |
children | 956b230c6062 |
files | client/src/components/importoverview/ImportOverviewAlt.vue client/src/components/importoverview/LogDetail.vue client/src/components/importoverview/LogEntry.vue client/src/store/imports.js |
diffstat | 4 files changed, 179 insertions(+), 19 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/importoverview/ImportOverviewAlt.vue Tue Mar 12 08:47:42 2019 +0100 +++ b/client/src/components/importoverview/ImportOverviewAlt.vue Tue Mar 12 09:44:32 2019 +0100 @@ -17,7 +17,7 @@ </div> <div class="ml-3 mr-2 mt-2 w-95 "> <LogEntry - class="border-bottom" + class="logentry border-bottom d-flex-flex-column w-100" :entry="entry" v-for="entry in imports" :key="entry.id" @@ -84,4 +84,8 @@ }; </script> -<style lang="scss" scoped></style> +<style lang="scss" scoped> +.logentry:hover { + background: #fafafa; +} +</style>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/components/importoverview/LogDetail.vue Tue Mar 12 09:44:32 2019 +0100 @@ -0,0 +1,26 @@ +<template> + <div> + <h1>logdetail</h1> + </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> + */ +export default { + name: "logdetail" +}; +</script> + +<style></style>
--- a/client/src/components/importoverview/LogEntry.vue Tue Mar 12 08:47:42 2019 +0100 +++ b/client/src/components/importoverview/LogEntry.vue Tue Mar 12 09:44:32 2019 +0100 @@ -1,33 +1,146 @@ <template> - <div class="d-flex flex-row"> - <font-awesome-icon - class="mr-1 text-info" - icon="angle-right" - fixed-width - ></font-awesome-icon - >Ich bin ein Eintrag! - <span - ><font-awesome-icon - v-if="entry.warnings" - class="ml-1 text-warning" - icon="exclamation-triangle" + <div> + <div class="d-flex flex-row"> + <font-awesome-icon + v-if="entry.id === show" + @click="toggleDetails" + class="my-auto mr-1 text-info pointer" + icon="angle-down" + fixed-width + ></font-awesome-icon> + <font-awesome-icon + v-if="entry.id !== show" + @click="toggleDetails" + class="my-auto mr-1 text-info pointer" + icon="angle-right" fixed-width - ></font-awesome-icon - ></span> - <div v-if="reviewable">Review ME!</div> + ></font-awesome-icon> + <div class="enqueued">{{ entry.enqueued | surveyDate }}</div> + <div class="user">{{ entry.user }}</div> + <div class="signer">{{ entry.signer }}</div> + <div> + <font-awesome-icon + v-if="entry.warnings" + class="ml-1 text-warning" + icon="exclamation-triangle" + fixed-width + ></font-awesome-icon> + </div> + <div v-if="reviewable" class="controls d-flex flex-row ml-auto"> + <div> + <button + :class="{ + 'ml-3': true, + 'mr-3': true, + btn: true, + 'btn-outline-success': needsApproval || isRejected, + 'btn-success': isApproved, + actions: true + }" + @click="toggleApproval($options.STATES.APPROVED)" + > + <font-awesome-icon + class="mx-auto small pointer mb-2" + icon="check" + ></font-awesome-icon> + </button> + </div> + <div> + <button + :class="{ + 'mr-3': true, + btn: true, + 'btn-outline-danger': needsApproval || isApproved, + 'btn-danger': isRejected, + actions: true + }" + @click="toggleApproval($options.STATES.REJECTED)" + > + <font-awesome-icon + icon="times" + class="small pointer mb-2" + ></font-awesome-icon> + </button> + </div> + </div> + </div> + <div class="d-flex flex-row"> + <LogDetail v-if="show === entry.id"></LogDetail> + </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 { mapState } from "vuex"; +import { STATES } from "@/store/imports.js"; + export default { name: "importlogentry", props: ["entry"], + components: { + LogDetail: () => import("./LogDetail.vue") + }, + methods: { + toggleApproval(state) { + this.$store.commit("imports/toggleApprove", { + id: this.entry.id, + newStatus: state + }); + }, + toggleDetails() { + const { id } = this.entry; + if (id === this.show) { + this.$store.commit("imports/hideDetails"); + } else { + this.$store.commit("imports/showDetailsFor", id); + } + } + }, computed: { + ...mapState("imports", ["show"]), + needsApproval() { + return this.entry.status === STATES.NEEDSAPPROVAL; + }, + isRejected() { + return this.entry.status === STATES.REJECTED; + }, + isApproved() { + return this.entry.status === STATES.APPROVED; + }, reviewable() { return this.entry.state === "pending"; } - } + }, + STATES: STATES }; </script> -<style></style> +<style lang="scss" scoped> +.enqueued { + width: 20%; +} +.user { + width: 10%; +} +.signer { + width: 10%; +} +button { + height: 19px; + width: 19px; + padding: 0.1rem; +} +</style>
--- a/client/src/store/imports.js Tue Mar 12 08:47:42 2019 +0100 +++ b/client/src/store/imports.js Tue Mar 12 09:44:32 2019 +0100 @@ -123,11 +123,28 @@ }); state.staging = enriched; }, + showDetailsFor: (state, id) => { + state.show = id; + }, + hideDetails: state => { + state.show = NODETAILS; + }, setImportToReview: (state, id) => { if (!isNaN(parseFloat(id)) && isFinite(id)) { state.importToReview = id; } }, + toggleApprove: (state, change) => { + const { id, newStatus } = change; + const stagedResult = state.imports.find(e => { + return e.id === id; + }); + if (stagedResult.status === newStatus) { + stagedResult.status = STATES.NEEDSAPPROVAL; + } else { + stagedResult.status = newStatus; + } + }, toggleApproval: (state, change) => { const { id, newStatus } = change; const stagedResult = state.staging.find(e => {