Mercurial > gemma
annotate 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 |
rev | line source |
---|---|
1208 | 1 <template> |
1215
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
2 <div |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
3 v-if="showStagingArea" |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
4 class="ui-element staging-card bg-white mx-auto rounded position-relative" |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
5 > |
1213
9d93968db2cd
replaced custom css with bootstrap classes
Markus Kottlaender <markus@intevation.de>
parents:
1208
diff
changeset
|
6 <div class="p-3"> |
1208 | 7 <div |
8 @click="$store.commit('application/showStagingArea', !showStagingArea);" | |
1213
9d93968db2cd
replaced custom css with bootstrap classes
Markus Kottlaender <markus@intevation.de>
parents:
1208
diff
changeset
|
9 class="ui-element close-showStagingArea position-absolute" |
1208 | 10 > |
11 <i class="fa fa-close"></i> | |
12 </div> | |
13 <div class="card-title mb-4 headline"> | |
14 <h4>Staging area</h4> | |
15 <hr> | |
16 </div> | |
1215
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
17 <div class="d-flex flex-row input-group mb-4"> |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
18 <table class="table"> |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
19 <thead> |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
20 <tr> |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
21 <th>Name</th> |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
22 <th>Datatype</th> |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
23 <th>Importdate</th> |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
24 <th>ImportID</th> |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
25 <th> </th> |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
26 </tr> |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
27 </thead> |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
28 <tbody> |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
29 <tr v-for="data in filteredData" :key="data.id"> |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
30 <td>{{data.name}}</td> |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
31 <td>{{data.date}}</td> |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
32 <td>{{data.type}}</td> |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
33 <td>{{data.importID}}</td> |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
34 <td> |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
35 <input |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
36 type="checkbox" |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
37 aria-label="Checkbox for following text input" |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
38 > |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
39 </td> |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
40 </tr> |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
41 </tbody> |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
42 </table> |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
43 </div> |
1208 | 44 </div> |
45 </div> | |
46 </template> | |
47 | |
48 <script> | |
49 import { mapState } from "vuex"; | |
1215
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
50 |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
51 const demodata = [ |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
52 { |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
53 id: 1, |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
54 name: "B1", |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
55 date: "2018-11-19", |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
56 status: "Not approved", |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
57 importID: "123456789", |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
58 type: "bottleneck" |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
59 }, |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
60 { |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
61 id: 2, |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
62 name: "B2", |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
63 date: "2018-11-19", |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
64 status: "Not approved", |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
65 importID: "123456789", |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
66 type: "bottleneck" |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
67 }, |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
68 { |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
69 id: 3, |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
70 name: "s1", |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
71 date: "2018-11-13", |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
72 status: "Not approved", |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
73 importID: "987654321", |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
74 type: "soundingresult" |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
75 }, |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
76 { |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
77 id: 4, |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
78 name: "s2", |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
79 date: "2018-11-13", |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
80 status: "Not approved", |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
81 importID: "987654321", |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
82 type: "soundingresult" |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
83 } |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
84 ]; |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
85 |
1208 | 86 export default { |
87 computed: { | |
1215
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
88 ...mapState("application", ["showStagingArea"]), |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
89 filteredData() { |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
90 return demodata; |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
91 } |
1208 | 92 } |
93 }; | |
94 </script> | |
95 | |
96 <style lang="sass" scoped> | |
97 .close-showStagingArea | |
98 z-index: 2 | |
99 right: 0 | |
100 top: 7px | |
101 height: $icon-width | |
102 width: $icon-height | |
103 | |
104 .staging-card | |
105 width: 30rem | |
106 height: 28rem | |
107 opacity: $slight-transparent | |
1215
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
108 min-width: 600px |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
109 |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
110 .table th, |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
111 td |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
112 font-size: 0.9rem |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
113 border-top: 0px !important |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
114 text-align: left |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
115 padding: 0.5rem !important |
1208 | 116 </style> |