Mercurial > gemma
changeset 2164:0e2f4b059897
staging: agm diff visually adjusted
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Fri, 08 Feb 2019 13:21:36 +0100 |
parents | b6b699385302 |
children | 82dad8d808a7 |
files | client/src/components/staging/StagingDetail.vue |
diffstat | 1 files changed, 61 insertions(+), 16 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/staging/StagingDetail.vue Fri Feb 08 13:18:34 2019 +0100 +++ b/client/src/components/staging/StagingDetail.vue Fri Feb 08 13:21:36 2019 +0100 @@ -173,21 +173,30 @@ </div> <div v-if="showAGMDetails"> <div class="pl-3 d-flex flex-row"> - <span class="condensed header agmcode text-left" - ><translate>ISRS Code</translate></span + <span class="condensed agmcode text-left" + ><small><translate>ISRS Code</translate></small></span > - <span class="condensed header agmdetail text-left" - ><translate>Date of measurement</translate></span + <span class="condensed agmdetail text-left" + ><small><translate>Date of measurement</translate></small></span > </div> <div v-for="(result, index) in data.summary" :key="index"> <div @click="toggleDiff(index)" class="pl-3 d-flex flex-row"> - <span class="condensed agmcode text-left">{{ - result["fk-gauge-id"] - }}</span> - <span class="condensed agmdetail text-left">{{ - formatSurveyDate(result["measure-date"]) - }}</span> + <span + v-if="result.versions.length == 1" + class="condensed agmcode text-left" + ><small + >{{ result["fk-gauge-id"] }} <translate>( New )</translate></small + ></span + > + <span + v-if="result.versions.length == 2" + class="condensed agmcode text-left" + ><small>{{ result["fk-gauge-id"] }}</small></span + > + <span class="condensed agmdetail text-left" + ><small>{{ formatSurveyDate(result["measure-date"]) }}</small></span + > <div @click="showBottleneckDetails = !showBottleneckDetails" class="small ml-auto mt-auto mb-auto text-info text-left" @@ -208,17 +217,48 @@ </div> <div v-if="showDiff == index" class="pl-3 d-flex flex-row"> <div> + <div class="d-flex flex-row condensed pl-3 text-left"> + <div class="header border-bottom agmdetailskeys"> + <small><translate>Value</translate></small> + </div> + <div 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 condensed pl-3 text-left" v-for="(entry, index) in Object.keys(result.versions[0])" :key="index" > - <div class="agmdetailskeys">{{ entry }}</div> - <div class="agmdetailsvalues"> - {{ result.versions[0][entry] }} + <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 == 2" class="agmdetailsvalues"> - {{ result.versions[1][entry] }} + <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> @@ -252,12 +292,14 @@ import { mapState } from "vuex"; import { LAYERS } from "@/store/map.js"; +const NO_DIFF = -1; + export default { name: "stagingdetail", props: ["data"], data() { return { - showDiff: -1, + showDiff: NO_DIFF, showAGMDetails: false, showBottleneckDetails: false, show: false, @@ -288,6 +330,9 @@ } }, watch: { + showAGMDetails() { + if (!this.showAGMDetails) this.showDiff = NO_DIFF; + }, open() { const { review } = this.$route.query; if (review) {