Mercurial > gemma

comparison client/src/staging/Staging.vue @ 1215:5a8e8ee9034d

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
staging prototypical listview
author Thomas Junk <thomas.junk@intevation.de>
date Mon, 19 Nov 2018 15:02:51 +0100
parents 9d93968db2cd
children b0c98a31cb4e
comparison
equal deleted inserted replaced
1214:3372cf2a55c7 1215:5a8e8ee9034d
1 <template> 1 <template>
2 <div v-if="showStagingArea" class="staging-card bg-white mx-auto rounded position-relative"> 2 <div
3 v-if="showStagingArea"
4 class="ui-element staging-card bg-white mx-auto rounded position-relative"
5 >
3 <div class="p-3"> 6 <div class="p-3">
4 <div 7 <div
5 @click="$store.commit('application/showStagingArea', !showStagingArea);" 8 @click="$store.commit('application/showStagingArea', !showStagingArea);"
6 class="ui-element close-showStagingArea position-absolute" 9 class="ui-element close-showStagingArea position-absolute"
7 > 10 >
9 </div> 12 </div>
10 <div class="card-title mb-4 headline"> 13 <div class="card-title mb-4 headline">
11 <h4>Staging area</h4> 14 <h4>Staging area</h4>
12 <hr> 15 <hr>
13 </div> 16 </div>
14 <div class="d-flex flex-row input-group mb-4"></div> 17 <div class="d-flex flex-row input-group mb-4">
18 <table class="table">
19 <thead>
20 <tr>
21 <th>Name</th>
22 <th>Datatype</th>
23 <th>Importdate</th>
24 <th>ImportID</th>
25 <th>&nbsp;</th>
26 </tr>
27 </thead>
28 <tbody>
29 <tr v-for="data in filteredData" :key="data.id">
30 <td>{{data.name}}</td>
31 <td>{{data.date}}</td>
32 <td>{{data.type}}</td>
33 <td>{{data.importID}}</td>
34 <td>
35 <input
36 type="checkbox"
37 aria-label="Checkbox for following text input"
38 >
39 </td>
40 </tr>
41 </tbody>
42 </table>
43 </div>
15 </div> 44 </div>
16 </div> 45 </div>
17 </template> 46 </template>
18 47
19 <script> 48 <script>
20 import { mapState } from "vuex"; 49 import { mapState } from "vuex";
50
51 const demodata = [
52 {
53 id: 1,
54 name: "B1",
55 date: "2018-11-19",
56 status: "Not approved",
57 importID: "123456789",
58 type: "bottleneck"
59 },
60 {
61 id: 2,
62 name: "B2",
63 date: "2018-11-19",
64 status: "Not approved",
65 importID: "123456789",
66 type: "bottleneck"
67 },
68 {
69 id: 3,
70 name: "s1",
71 date: "2018-11-13",
72 status: "Not approved",
73 importID: "987654321",
74 type: "soundingresult"
75 },
76 {
77 id: 4,
78 name: "s2",
79 date: "2018-11-13",
80 status: "Not approved",
81 importID: "987654321",
82 type: "soundingresult"
83 }
84 ];
85
21 export default { 86 export default {
22 computed: { 87 computed: {
23 ...mapState("application", ["showStagingArea"]) 88 ...mapState("application", ["showStagingArea"]),
89 filteredData() {
90 return demodata;
91 }
24 } 92 }
25 }; 93 };
26 </script> 94 </script>
27 95
28 <style lang="sass" scoped> 96 <style lang="sass" scoped>
35 103
36 .staging-card 104 .staging-card
37 width: 30rem 105 width: 30rem
38 height: 28rem 106 height: 28rem
39 opacity: $slight-transparent 107 opacity: $slight-transparent
108 min-width: 600px
109
110 .table th,
111 td
112 font-size: 0.9rem
113 border-top: 0px !important
114 text-align: left
115 padding: 0.5rem !important
40 </style> 116 </style>