Mercurial > gemma
view client/src/components/importoverview/ApprovedGaugeMeasurementDetail.vue @ 5679:03dfbe675842 sr-v2
Simplified version handling.
author | Sascha L. Teichmann <sascha.teichmann@intevation.de> |
---|---|
date | Sun, 11 Feb 2024 12:37:09 +0100 |
parents | 84d01a536bec |
children |
line wrap: on
line source
<template> <div :class="{ diffs: true, full: !showLogs, split: showLogs }" > <virtual-list :size="scrollistConfig.size" :remain="scrollistConfig.remain" :bench="scrollistConfig.bench" > <Item class="d-flex flex-row px-2 border-top" v-for="(item, index) in details.summary" @openDiff="toggleDiff" :key="index" :line="item" :index="index" :showDiff="showDiff" /> </virtual-list> </div> </template> <style scoped> .diffs { width: 100%; overflow-y: auto; } .diffs > div { border-top: dashed 1px #dee2e6; } .diffs > div:first-child { border-top: none; } .diffs > div .compare-table { position: relative; overflow: hidden; } .diffs > div .compare-table::after { content: ""; position: absolute; top: 0; right: -5px; bottom: 0; left: -5px; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4); } .diffs > div .compare-table > div { font-size: 0.7rem; } .diffs > div .compare-table > div:nth-child(odd) { background-color: #f8f9fa; } .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"; import virtualList from "vue-virtual-scroll-list"; export default { data() { return { showDiff: 0 // open first item by default }; }, components: { "virtual-list": virtualList, Item: () => import("./AGMLogItem") }, computed: { ...mapState("imports", ["showLogs", "details"]), scrollistConfig() { const smallLayout = { size: 20, remain: 10, bench: 12 }; const largeLayout = { size: 22, remain: 12, bench: 14 }; if (this.showAdditional) return smallLayout; return largeLayout; } }, methods: { toggleDiff(number) { if (this.showDiff !== number) { this.showDiff = number; } else { this.showDiff = false; } } } }; </script>