Mercurial > gemma
changeset 1215:5a8e8ee9034d
staging prototypical listview
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Mon, 19 Nov 2018 15:02:51 +0100 |
parents | 3372cf2a55c7 |
children | 1c7806728172 |
files | client/src/staging/Staging.vue |
diffstat | 1 files changed, 79 insertions(+), 3 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/staging/Staging.vue Mon Nov 19 14:23:39 2018 +0100 +++ b/client/src/staging/Staging.vue Mon Nov 19 15:02:51 2018 +0100 @@ -1,5 +1,8 @@ <template> - <div v-if="showStagingArea" class="staging-card bg-white mx-auto rounded position-relative"> + <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);" @@ -11,16 +14,81 @@ <h4>Staging area</h4> <hr> </div> - <div class="d-flex flex-row input-group mb-4"></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"]) + ...mapState("application", ["showStagingArea"]), + filteredData() { + return demodata; + } } }; </script> @@ -37,4 +105,12 @@ 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>