Mercurial > gemma
view client/src/components/importoverview/LogEntry.vue @ 2874:b9a6abef9f1c
client: more unified table layout
Expandable/collapsible rows are now also handled by the component
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Mon, 01 Apr 2019 11:51:03 +0200 |
parents | e19fac818aab |
children | 84effca50751 |
line wrap: on
line source
<template> <div> <div class="row no-gutters text-left"> <div style="width: 79px;" class="table-cell d-flex justify-content-between" > <font-awesome-icon @click="toggleDetails" class="my-auto text-info pointer" :icon="entry.id === show ? 'angle-down' : 'angle-right'" fixed-width ></font-awesome-icon> {{ entry.id }} </div> <div style="width: 53px;" class="table-cell text-center"> {{ entry.kind.toUpperCase() }} </div> <div style="width: 138px;" class="table-cell text-center"> {{ entry.enqueued | dateTime }} </div> <div style="width: 105px;" class="table-cell truncate"> {{ entry.user }} </div> <div style="width: 105px;" class="table-cell truncate"> {{ entry.signer }} </div> <div style="width: 72px;" class="table-cell text-center"> <span v-if="entry.state === 'failed'" class="text-danger">{{ entry.state }}</span> <span v-else>{{ entry.state }}</span> </div> <div style="width: 44px;" class="table-cell text-center"> <font-awesome-icon v-if="entry.warnings" class="text-warning" icon="exclamation-triangle" fixed-width ></font-awesome-icon> </div> <div style="flex-grow: 1; padding: 0;" class="table-cell 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> <LogDetail :entry="entry" :details="details" v-if="show === entry.id" ></LogDetail> </div> </template> <style lang="sass" scoped> .actions height: 100% width: 50% border: 0 background: transparent outline: none &.approved color: green &.active, &:hover color: white background: green &.rejected border-left: 1px solid #dee2e6 color: red &.active, &:hover color: white background: red </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 { 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 }; }, 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 { HTTP.get("/imports/" + this.entry.id, { headers: { "X-Gemma-Auth": localStorage.getItem("token") } }) .then(response => { this.$store.commit("imports/showDetailsFor", id); this.$store.commit("imports/setCurrentDetails", response.data); }) .catch(error => { const { status, data } = error.response; displayError({ title: this.$gettext("Backend Error"), message: `${status}: ${data.message || data}` }); }); } } }, 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>