Mercurial > gemma
view client/src/components/importqueue/Importqueuedetail.vue @ 1559:5d84dcb79a54
layout importqueue
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Wed, 12 Dec 2018 09:48:37 +0100 |
parents | client/src/components/Importqueuedetail.vue@0ded4c56978e |
children | ad3a19e222bb |
line wrap: on
line source
<template> <div class="entry d-flex flex-column py-1 border-bottom w-50"> <div class="d-flex flex-row position-relative"> <div @click="showDetails(job.id)" class="jobid ml-2 mt-1 mr-2"> {{ job.id }} </div> <div @click="showDetails(job.id)" class="enqueued mt-1 mr-2"> {{ formatDate(job.enqueued) }} </div> <div @click="showDetails(job.id)" class="kind mt-1 mr-2"> {{ job.kind }} </div> <div @click="showDetails(job.id)" class="user mt-1 mr-2"> {{ job.user }} </div> <div @click="showDetails(job.id)" class="signer mt-1 mr-2"> {{ job.signer }} </div> <div @click="showDetails(job.id)" class="state mt-1 mr-2"> {{ job.state }} </div> <div @click="showDetails(job.id)" class="mt-1 text-info detailsbutton"> <font-awesome-icon v-if="show" icon="angle-up" fixed-width ></font-awesome-icon> <font-awesome-icon v-else icon="angle-down" fixed-width ></font-awesome-icon> </div> </div> <div class="detailstable d-flex flex-row"> <div :class="collapse"> <table class="table table-responsive"> <thead> <tr> <th class="first pb-0"> <small class="condensed"><translate>Kind</translate></small> </th> <th class="second pb-0"> <a href="#" @click="sortAsc = !sortAsc" class="sort-link" ><small class="condensed"><translate>Date</translate></small> <small class="condensed" ><font-awesome-icon :icon="sortIcon" class="ml-1" ></font-awesome-icon></small ></a> </th> <th class="third pb-0"> <small class="condensed"><translate>Message</translate></small> </th> </tr> </thead> <tbody> <tr v-for="(entry, index) in sortedEntries" :key="index" class="detailsrow" > <td class="first"> <span class="condensed">{{ entry.kind }}</span> </td> <td class="second"> <span class="condensed">{{ formatDate(entry.time) }}</span> </td> <td class="third"> <span class="condensed">{{ entry.message }}</span> </td> </tr> </tbody> </table> </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 { HTTP } from "../../lib/http.js"; import { displayError } from "../../lib/errors.js"; import locale2 from "locale2"; export default { name: "importqueuedetail", props: ["job"], data() { return { show: false, entries: [], sortAsc: true }; }, methods: { formatDate(date) { return date ? new Date(date).toLocaleDateString(locale2, { day: "2-digit", month: "2-digit", year: "numeric" }) : ""; }, showDetails(id) { if (this.show) { this.show = false; return; } if (this.entries.length === 0) { HTTP.get("/imports/" + id, { headers: { "X-Gemma-Auth": localStorage.getItem("token") } }) .then(response => { const { entries } = response.data; this.entries = entries; this.show = true; }) .catch(error => { const { status, data } = error.response; displayError({ title: this.$gettext("Backend Error"), message: `${status}: ${data.message || data}` }); }); } else { this.show = true; } } }, computed: { sortedEntries() { let sorted = this.entries.slice(); sorted.sort((r1, r2) => { let d1 = new Date(r1.time); let d2 = new Date(r2.time); if (d2 < d1) { return !this.sortAsc ? -1 : 1; } if (d2 > d1) { return !this.sortAsc ? 1 : -1; } return 0; }); return sorted; }, sortIcon() { return this.sortAsc ? "sort-amount-down" : "sort-amount-up"; }, icon() { return { "angle-up": !this.show, "angle-down": this.show }; }, collapse() { return { details: true, collapse: true, show: this.show, "w-100": true }; } } }; </script> <style lang="scss" scoped> .condensed { font-stretch: condensed; } .entry { background-color: white; cursor: pointer; } .entry:hover { background-color: #efefef; transition: 1.5s; } .detailstable { margin-left: $offset; margin-right: $large-offset; } .detailsbutton { position: absolute; top: 0; right: 0; height: 100%; } .jobid { width: 80px; } .enqueued { width: 120px; } .user { width: 80px; } .signer { width: 80px; } .kind { width: 80px; } .state { width: 80px; } .details { width: 50%; } .detailsrow { line-height: 0.1em; } .first { width: 65px; padding-left: 0px; border-top: 0px; padding-bottom: $small-offset; } .second { width: 100px; padding-left: 0px; border-top: 0px; padding-bottom: $small-offset; } .third { width: 600px; padding-left: 0px; border-top: 0px; padding-bottom: $small-offset; } thead, tbody { display: block; } tbody { height: 150px; overflow-y: auto; overflow-x: hidden; } </style>