Mercurial > gemma
view client/src/importqueue/Importqueue.vue @ 1179:320e2720fe3d
importqueue broader layout and all button removed
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Thu, 15 Nov 2018 10:45:06 +0100 |
parents | 3035ddd3d1a8 |
children | b23622905a3f |
line wrap: on
line source
<template> <div class="d-flex flex-row"> <div :class="spacerStyle"></div> <div class="importqueue"> <div class="card importqueuecard"> <div class="card-header shadow-sm text-white bg-info mb-3">Importqueue</div> <div class="card-body importcardbody"> <div class="card-body importcardbody"> <div class="searchandfilter d-flex flex-row"> <div class="searchgroup input-group"> <div class="input-group-prepend"> <span class="input-group-text" id="search"> <i class="fa fa-search"></i> </span> </div> <input type="text" class="form-control" placeholder="" aria-label="Search" aria-describedby="search" > </div> <div class="filters"> <button @click="setFilter('successful')" :class="successfulStyle" >Successful</button> <button @click="setFilter('failed')" :class="failedStyle">Failed</button> <button @click="setFilter('pending')" :class="pendingStyle">Pending</button> </div> </div> <table class="table"> <thead> <tr> <th>Enqueued</th> <th>Kind</th> <th>User</th> <th>State</th> </tr> </thead> <tbody> <tr v-for="job in imports" :key="job.id"> <td>{{job.enqueued}}</td> <td>{{job.kind}}</td> <td>{{job.user}}</td> <td>{{job.state}}</td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </template> <script> import { displayError } from "../application/lib/errors.js"; import { mapState } from "vuex"; export default { name: "importqueue", data() { return { successful: false, failed: false, pending: false }; }, methods: { setFilter(name) { this[name] = !this[name]; const allSet = this.successful && this.failed && this.pending; if (allSet) { this.all = false; this.successful = false; this.failed = false; this.pending = false; } } }, computed: { ...mapState("imports", ["imports"]), ...mapState("application", ["showSidebar"]), spacerStyle() { return { spacer: true, "spacer-expanded": this.showSidebar, "spacer-collapsed": !this.showSidebar }; }, successfulStyle() { return { btn: true, "btn-light": !this.successful, "btn-dark": this.successful }; }, pendingStyle() { return { btn: true, "btn-light": !this.pending, "btn-dark": this.pending }; }, failedStyle() { return { btn: true, "btn-light": !this.failed, "btn-dark": this.failed }; } }, mounted() { this.$store.dispatch("imports/getImports").catch(error => { const { status, data } = error.response; displayError({ title: "Backend Error", message: `${status}: ${data.message || data}` }); }); } }; </script> <style lang="scss" scoped> .spacer { margin-left: $offset; height: 100vh; } .spacer-collapsed { min-width: $icon-width + $offset; transition: $transition-fast; } .spacer-expanded { min-width: $sidebar-width + $offset; } .importqueue { margin-top: $offset; margin-right: auto; margin-left: auto; } .importqueuecard { width: 80vw; min-height: 20rem; } .card-body { width: 100%; margin-left: auto; margin-right: auto; } .searchandfilter { position: relative; margin-bottom: $xx-large-offset; } .filters { position: absolute; right: 0; } .filters button { margin-right: $small-offset; } .table td, .table th { border-top: 0 !important; text-align: left; padding: $small-offset !important; } .searchgroup { position: absolute; left: 0; width: 50%; } </style>