Mercurial > gemma
view client/src/components/importoverview/LogEntry.vue @ 2616:be60888e7c43
client: importoverview2: show import date with time
This currently leads to a line break. The table layout will be improved in another commit.
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Wed, 13 Mar 2019 13:18:27 +0100 |
parents | 546ed93a9829 |
children | 359f5f0037f5 |
line wrap: on
line source
<template> <div> <div class="d-flex flex-row text-left"> <font-awesome-icon v-if="entry.id === show" @click="toggleDetails" class="my-auto mr-1 text-info pointer" icon="angle-down" fixed-width ></font-awesome-icon> <font-awesome-icon v-if="entry.id !== show" @click="toggleDetails" class="my-auto mr-1 text-info pointer" icon="angle-right" fixed-width ></font-awesome-icon> <div class="id"> <span v-if="entry.id > 9">{{ entry.id }}</span> <span v-else> {{ entry.id }}</span> </div> <div class="kind">{{ entry.kind.toUpperCase() }}</div> <div class="enqueued">{{ entry.enqueued | dateTime }}</div> <div class="user">{{ entry.user }}</div> <div class="signer">{{ entry.signer }}</div> <div> <font-awesome-icon v-if="entry.warnings" class="ml-1 text-warning" icon="exclamation-triangle" fixed-width ></font-awesome-icon> </div> <div v-if="reviewable" class="controls d-flex flex-row ml-auto"> <div> <button :class="{ 'ml-3': true, 'mr-3': true, btn: true, 'btn-outline-success': needsApproval || isRejected, 'btn-success': isApproved, actions: true }" @click="toggleApproval($options.STATES.APPROVED)" > <font-awesome-icon class="mx-auto small pointer mb-2" icon="check" ></font-awesome-icon> </button> </div> <div> <button :class="{ 'mr-3': true, btn: true, 'btn-outline-danger': needsApproval || isApproved, 'btn-danger': isRejected, actions: true }" @click="toggleApproval($options.STATES.REJECTED)" > <font-awesome-icon icon="times" class="small pointer mb-2" ></font-awesome-icon> </button> </div> </div> </div> <div class="ml-1 d-flex flex-row"> <LogDetail :entry="entry" 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"; export default { name: "importlogentry", props: ["entry"], 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; }, reviewable() { return this.entry.state === "pending"; } }, STATES: STATES }; </script> <style lang="scss" scoped> .id { width: 10%; } .kind { width: 10%; } .enqueued { width: 20%; } .user { width: 10%; } .signer { width: 10%; } button { height: 19px; width: 19px; padding: 0.1rem; } </style>