Mercurial > gemma
view client/src/components/importoverview/ApprovedGaugeMeasurementDetail.vue @ 2894:95e40c87a943
client: applied component name change where it is used
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Tue, 02 Apr 2019 12:17:52 +0200 |
parents | 6538ee93df72 |
children | 399b03e59411 |
line wrap: on
line source
<template> <div :class="{ diffs: true, full: !showLogs, split: showLogs }" > <div v-for="(result, index) in details.summary" :key="index"> <div class="pl-2 d-flex flex-row"> <div @click="toggleDiff(index)" class="small mt-auto mb-auto text-info text-left" > <font-awesome-icon class="pointer" v-if="showDiff == index" icon="angle-down" fixed-width ></font-awesome-icon> <font-awesome-icon class="pointer" v-if="showDiff != index" icon="angle-right" fixed-width ></font-awesome-icon> </div> <span v-if="result.versions.length == 1" class="agmcode text-left" ><div> {{ result["fk-gauge-id"] }} <translate>( New )</translate> </div></span > <span v-if="result.versions.length == 2" class="agmcode text-left" ><div>{{ result["fk-gauge-id"] }}</div></span > <span class="text-left" ><div>{{ result["measure-date"] | dateTime }}</div></span > </div> <div v-if="showDiff == index" class="pl-3 d-flex flex-row"> <div class="w-100"> <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> </template> <style lang="sass" scoped> .diffs width: 100% max-height: 20vh overflow-y: auto .agmcode width: 35% .agmdetailskeys width: 33% .agmdetailsvalues width: 33% .split max-height: 35vh .full max-height: 70vh </style> <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"; export default { name: "agmdetails", props: ["entry"], data() { return { showDiff: false }; }, computed: { ...mapState("imports", ["showLogs", "details"]) }, methods: { toggleDiff(number) { if (this.showDiff !== number) { this.showDiff = number; } else { this.showDiff = false; } } } }; </script>