Mercurial > gemma
view client/src/staging/Staging.vue @ 1215:5a8e8ee9034d
staging prototypical listview
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Mon, 19 Nov 2018 15:02:51 +0100 |
parents | 9d93968db2cd |
children | b0c98a31cb4e |
line wrap: on
line source
<template> <div v-if="showStagingArea" class="ui-element staging-card bg-white mx-auto rounded position-relative" > <div class="p-3"> <div @click="$store.commit('application/showStagingArea', !showStagingArea);" class="ui-element close-showStagingArea position-absolute" > <i class="fa fa-close"></i> </div> <div class="card-title mb-4 headline"> <h4>Staging area</h4> <hr> </div> <div class="d-flex flex-row input-group mb-4"> <table class="table"> <thead> <tr> <th>Name</th> <th>Datatype</th> <th>Importdate</th> <th>ImportID</th> <th> </th> </tr> </thead> <tbody> <tr v-for="data in filteredData" :key="data.id"> <td>{{data.name}}</td> <td>{{data.date}}</td> <td>{{data.type}}</td> <td>{{data.importID}}</td> <td> <input type="checkbox" aria-label="Checkbox for following text input" > </td> </tr> </tbody> </table> </div> </div> </div> </template> <script> import { mapState } from "vuex"; const demodata = [ { id: 1, name: "B1", date: "2018-11-19", status: "Not approved", importID: "123456789", type: "bottleneck" }, { id: 2, name: "B2", date: "2018-11-19", status: "Not approved", importID: "123456789", type: "bottleneck" }, { id: 3, name: "s1", date: "2018-11-13", status: "Not approved", importID: "987654321", type: "soundingresult" }, { id: 4, name: "s2", date: "2018-11-13", status: "Not approved", importID: "987654321", type: "soundingresult" } ]; export default { computed: { ...mapState("application", ["showStagingArea"]), filteredData() { return demodata; } } }; </script> <style lang="sass" scoped> .close-showStagingArea z-index: 2 right: 0 top: 7px height: $icon-width width: $icon-height .staging-card width: 30rem height: 28rem opacity: $slight-transparent min-width: 600px .table th, td font-size: 0.9rem border-top: 0px !important text-align: left padding: 0.5rem !important </style>