Mercurial > gemma
view client/src/components/staging/Staging.vue @ 2351:9c4d6a61ad1d
staging: fix vanishing buttons when (U)BN list becomes too long
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Wed, 20 Feb 2019 11:08:20 +0100 |
parents | 16fb9667ddf8 |
children | f185503ef35a |
line wrap: on
line source
<template> <div class="w-90 stagingcard"> <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center"> <font-awesome-icon class="mr-2" icon="clipboard-check" ></font-awesome-icon> <translate>Staging Area</translate> </h6> <div class="mt-3 pl-3 pr-3"> <div class="mt-3 text-left flex-row d-flex border-bottom"> <div class="header text-left name"><translate>Name</translate></div> <div class="header text-left type"><translate>Type</translate></div> <div class="header text-left date"><translate>Date</translate></div> <div class="header text-left imported"> <translate>Imported</translate> </div> <div class="header text-left username"> <translate>Username</translate> </div> <div class="ml-3 controls"></div> </div> <div class="mt-3" v-if="filteredData.length > 0"> <StagingDetail class="mb-3 border-bottom" :key="data.id" v-for="data in filteredData" :data="data" ></StagingDetail> </div> </div> <div class="mt-3 p-3" v-if="filteredData.length > 0"> <button @click="confirmReview" class="confirm-button btn btn-info"> <translate>Confirm</translate> </button> </div> <div v-else class="mr-auto ml-auto"><translate>No results.</translate></div> <div class="mt-1 p-3"> <button @click="loadData" class="refresh btn btn-dark">Refresh</button> </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> * Markus Kottländer <markus@intevation.de> */ import { mapState } from "vuex"; import { HTTP } from "@/lib/http.js"; import { displayError, displayInfo } from "@/lib/errors.js"; import { STATES } from "@/store/imports.js"; export default { data() { return {}; }, components: { StagingDetail: () => import("./StagingDetail") }, mounted() { this.loadData(); }, computed: { ...mapState("application", ["searchQuery"]), ...mapState("imports", ["staging"]), filteredData() { return this.staging.filter(data => { const result = [data.id + "", data.enqueued, data.kind, data.user].some( x => x.toLowerCase().includes(this.searchQuery.toLowerCase()) ); return result; }); } }, methods: { loadData() { this.$store.dispatch("imports/getStaging").catch(error => { const { status, data } = error.response; displayError({ title: "Backend Error", message: `${status}: ${data.message || data}` }); }); }, confirmReview() { const reviewResults = this.staging .filter(x => x.status !== STATES.NEEDSAPPROVAL) .map(r => { return { id: r.id, state: r.status }; }); if (!reviewResults.length) return; HTTP.patch("/imports", reviewResults, { headers: { "X-Gemma-Auth": localStorage.getItem("token"), "Content-type": "application/json" } }) .then(response => { const messages = response.data .map(x => { if (x.message) return x.message; if (x.error) return x.error; }) .join("\n\n"); displayInfo({ title: "Staging Area", message: messages, options: { timeout: 0, buttons: [{ text: "Ok", action: null, bold: true }] } }); this.loadData(); }) .catch(error => { const { status, data } = error.response; displayError({ title: "Backend Error", message: `${status}: ${data.message || data}` }); }); } }, STATES: STATES }; </script> <style lang="scss" scoped> .name { width: 180px; } .date { width: 90px; } .type { width: 40px; } .imported { width: 90px; } .username { width: 150px; } .controls { width: 60px; } .refresh { position: absolute; left: $offset; bottom: $offset; } .table th, td { font-size: 0.9rem; border-top: 0px !important; border-bottom-width: 1px; text-align: left; padding: 0.5rem !important; } .stagingcard { position: relative; min-height: 150px; } .confirm-button { position: absolute; right: $offset; bottom: $offset; } </style>