Mercurial > gemma
view client/src/components/importoverview/LogEntry.vue @ 3668:3eb19b38446e
client: avoid requesting number of pending imports after logging out
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Mon, 17 Jun 2019 11:08:03 +0200 |
parents | e2ed741545e1 |
children | e9d2573329da |
line wrap: on
line source
<template> <div class="row w-100 no-gutters text-left"> <div style="width: 75px;" class="table-cell d-flex justify-content-between"> <UISpinnerButton @click="toggleDetails" :loading="loading" :state="entry.id === show" :icons="['angle-right', 'angle-down']" /> {{ entry.id }} </div> <div style="width: 53px;" class="table-cell center"> {{ entry.kind.toUpperCase() }} </div> <div style="width: 138px;" class="table-cell center"> {{ entry.enqueued | dateTime }} </div> <div style="width: 80px;" class="table-cell truncate"> {{ entry.user }} </div> <div style="width: 55px;" class="table-cell center"> {{ userCountries[entry.user] }} </div> <div style="width: 80px;" class="table-cell truncate"> {{ entry.signer }} </div> <div style="width: 72px;" :class="stateStyle"> {{ entry.state }} </div> <div style="width: 44px;" class="table-cell center"> <font-awesome-icon v-if="entry.warnings" class="text-warning" icon="exclamation-triangle" fixed-width /> </div> <div style="flex-grow: 1; padding: 0;" class="table-cell text-right"> <button :class="['action approved', { active: isApproved }]" @click="toggleApproval($options.STATES.APPROVED)" v-if="entry.state === 'pending'" > <font-awesome-icon class="small pointer" icon="check" /> </button> <button :class="['action rejected', { active: isRejected }]" @click="toggleApproval($options.STATES.REJECTED)" v-if="entry.state === 'pending'" > <font-awesome-icon icon="times" class="small pointer" /> </button> </div> </div> </template> <style lang="sass" scoped> .action height: 100% width: 50% border: 0 background: white 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 .active .action background-color: #d2eaee &.rejected border-left: solid 1px rgba(255, 255, 255, 0.3) </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, 2019 by via donau * – Österreichische Wasserstraßen-Gesellschaft mbH * Software engineering by Intevation GmbH * * Author(s): * * Thomas Junk <thomas.junk@intevation.de> * * Markus Kottländer <markus.kottlaender@intevation.de> */ import { mapState, mapGetters } from "vuex"; import { STATES } from "@/store/imports"; import { displayError } from "@/lib/errors"; import { HTTP } from "@/lib/http"; export default { STATES, props: ["entry"], data() { return { loading: false }; }, computed: { ...mapState("imports", ["show"]), ...mapGetters("usermanagement", ["userCountries"]), stateStyle() { return [ "table-cell", "center", { "text-danger": this.entry.state === "failed", "font-weight-bolder": this.entry.state === "running" } ]; }, needsApproval() { return this.entry.status === STATES.NEEDSAPPROVAL; }, isRejected() { return this.entry.status === STATES.REJECTED; }, isApproved() { return this.entry.status === STATES.APPROVED; } }, 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.loading = true; 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}` }); }) .finally(() => (this.loading = false)); } } } }; </script>