Mercurial > gemma
view client/src/components/importoverview/ImportOverview.vue @ 2524:f15ee4e84c0c
staging: small UI improvements
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Wed, 06 Mar 2019 13:12:46 +0100 |
parents | 40bd6bb7886b |
children |
line wrap: on
line source
<template> <div class="overview"> <UIBoxHeader icon="clipboard-check" title="Staging Area" :closeCallback="$parent.close" /> <div class="d-flex flex-row w-100 justify-content-end"> <button class="btn btn-sm btn-outline-info align-self-start mr-3" @click="refresh" > <font-awesome-icon icon="redo"></font-awesome-icon> </button> </div> <div class="d-flex flex-row w-100 border-bottom"> <font-awesome-icon class="pointer" @click="toggleStaging()" v-if="stagingVisible && staging.length > 0" icon="angle-up" fixed-width ></font-awesome-icon> <font-awesome-icon class="pointer" @click="toggleStaging()" v-if="!stagingVisible && staging.length > 0" icon="angle-down" fixed-width ></font-awesome-icon> <span style="width:1.25em;" v-if="!(staging.length > 0)"></span> <Staging v-if="stagingVisible && staging.length > 0"></Staging> <div v-else class="d-flex flex-row"> <h6> <small><translate>Review</translate></small> </h6> <small class="ml-3" v-if="!(staging.length > 0)" ><translate>Nothing to review</translate></small > </div> </div> <div class="mt-2"> <div class="d-flex flex-row"> <font-awesome-icon class="pointer" @click="toggleLogs()" v-if="logsVisible" icon="angle-up" fixed-width ></font-awesome-icon> <font-awesome-icon class="pointer" @click="toggleLogs()" v-if="!logsVisible" icon="angle-down" fixed-width ></font-awesome-icon> <Logs v-if="logsVisible" :reload="reload"></Logs> <div v-else> <h6> <small><translate>Logs</translate></small> </h6> </div> </div> </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 { displayError } from "@/lib/errors.js"; import { mapState } from "vuex"; export default { name: "importoverview", data() { return { reload: false }; }, components: { Staging: () => import("./staging/Staging.vue"), Logs: () => import("./importlogs/Logs.vue") }, computed: { ...mapState("imports", ["stagingVisible", "logsVisible", "staging"]) }, methods: { toggleStaging() { this.$store.commit("imports/setStagingVisibility", !this.stagingVisible); }, toggleLogs() { this.$store.commit("imports/setLogsVisibility", !this.logsVisible); }, refresh() { this.reload = true; this.loadImportQueue(); this.loadLogs(); }, loadImportQueue() { this.$store .dispatch("imports/getStaging") .then(() => { this.reload = false; }) .catch(error => { const { status, data } = error.response; displayError({ title: "Backend Error", message: `${status}: ${data.message || data}` }); }); }, loadLogs() { this.$store .dispatch("imports/getImports") .then(() => { this.reload = false; }) .catch(error => { const { status, data } = error.response; displayError({ title: this.$gettext("Backend Error"), message: `${status}: ${data.message || data}` }); }); } }, mounted() { this.refresh(); } }; </script> <style lang="scss" scoped> .overview { max-height: 850px; overflow-y: auto; } </style>