Mercurial > gemma
view client/src/components/importoverview/LogEntry.vue @ 2685:39a05f8c34e6 import-overview-rework
import_overview: Refactoring of detailed information.
When the entry is opened, a request is made to retrieve the
detailed information for this entry. It contains the log
protocol information as well as the executive summary.
This is passed down to child components of the entry.
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Fri, 15 Mar 2019 13:42:49 +0100 |
parents | 8299cce986a2 |
children | ef10f1cd6cb8 |
line wrap: on
line source
<template> <div class="logentry"> <div class="row no-gutters text-left"> <div style="width: 4%;" class="text-center"> <font-awesome-icon @click="toggleDetails" class="my-auto mr-1 text-info pointer" :icon="entry.id === show ? 'angle-down' : 'angle-right'" fixed-width ></font-awesome-icon> </div> <div style="width: 7%; padding-right: 10px;" class="text-right"> {{ entry.id }} </div> <div style="width: 8%;"> {{ entry.kind.toUpperCase() }} </div> <div style="width: 22%;"> {{ entry.enqueued | dateTime }} </div> <div style="width: 18%;" class="truncate">{{ entry.user }}</div> <div style="width: 18%;" class="truncate">{{ entry.signer }}</div> <div style="width: 10%;" class=""> <span v-if="entry.state === 'failed'" class="text-danger">{{ entry.state }}</span> <span v-else>{{ entry.state }}</span> </div> <div style="width: 6%;" class="text-center"> <font-awesome-icon v-if="entry.warnings" class="ml-1 text-warning" icon="exclamation-triangle" fixed-width ></font-awesome-icon> </div> <div style="width: 7%" class="text-right"> <div v-if="entry.state === 'pending'"> <button :class="['actions approved', { active: isApproved }]" @click="toggleApproval($options.STATES.APPROVED)" > <font-awesome-icon class="small pointer" icon="check" ></font-awesome-icon> </button> <button :class="['actions rejected', { active: isRejected }]" @click="toggleApproval($options.STATES.REJECTED)" > <font-awesome-icon icon="times" class="small pointer" ></font-awesome-icon> </button> </div> </div> </div> <div class="ml-1 d-flex flex-row"> <LogDetail :entry="entry" :details="details" 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"; import { displayError } from "@/lib/errors.js"; import { HTTP } from "@/lib/http.js"; export default { name: "importlogentry", props: ["entry"], data() { return { details: null }; }, mounted() { HTTP.get("/imports/" + this.entry.id, { headers: { "X-Gemma-Auth": localStorage.getItem("token") } }) .then(response => { this.details = response.data; }) .catch(error => { const { status, data } = error.response; displayError({ title: this.$gettext("Backend Error"), message: `${status}: ${data.message || data}` }); }); }, 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"); this.$store.commit("imports/hideAdditionalInfo"); this.$store.commit("imports/hideAdditionalLogs"); } 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; } }, STATES: STATES }; </script> <style lang="sass" scoped> .logentry font-size: 80% &:hover background: #fafafa .actions height: 100% width: 22px border: 0 background: transparent border-left: 1px solid #dee2e6 outline: none &.approved color: green &.active, &:hover color: white background: green &.rejected color: red &.active, &:hover color: white background: red </style>