Mercurial > gemma
annotate client/src/staging/Staging.vue @ 1220:d11d5e39c8d0
staging layout
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Mon, 19 Nov 2018 16:02:34 +0100 |
parents | 53981be1abe6 |
children | a8b682f3d13d |
rev | line source |
---|---|
1208 | 1 <template> |
1218 | 2 <div v-if="showStagingArea" :class="stagingAreaStyle"> |
1213
9d93968db2cd
replaced custom css with bootstrap classes
Markus Kottlaender <markus@intevation.de>
parents:
1208
diff
changeset
|
3 <div class="p-3"> |
1208 | 4 <div |
5 @click="$store.commit('application/showStagingArea', !showStagingArea);" | |
1213
9d93968db2cd
replaced custom css with bootstrap classes
Markus Kottlaender <markus@intevation.de>
parents:
1208
diff
changeset
|
6 class="ui-element close-showStagingArea position-absolute" |
1208 | 7 > |
8 <i class="fa fa-close"></i> | |
9 </div> | |
10 <div class="card-title mb-4 headline"> | |
11 <h4>Staging area</h4> | |
12 <hr> | |
13 </div> | |
1215
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
14 <div class="d-flex flex-row input-group mb-4"> |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
15 <table class="table"> |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
16 <thead> |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
17 <tr> |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
18 <th>Name</th> |
1218 | 19 <th>Location</th> |
1215
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
20 <th>Datatype</th> |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
21 <th>Importdate</th> |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
22 <th>ImportID</th> |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
23 <th> </th> |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
24 </tr> |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
25 </thead> |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
26 <tbody> |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
27 <tr v-for="data in filteredData" :key="data.id"> |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
28 <td>{{data.name}}</td> |
1218 | 29 <td>{{data.location}}</td> |
1215
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
30 <td>{{data.date}}</td> |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
31 <td>{{data.type}}</td> |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
32 <td>{{data.importID}}</td> |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
33 <td> |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
34 <input |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
35 type="checkbox" |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
36 aria-label="Checkbox for following text input" |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
37 > |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
38 </td> |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
39 </tr> |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
40 </tbody> |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
41 </table> |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
42 </div> |
1208 | 43 </div> |
44 </div> | |
45 </template> | |
46 | |
47 <script> | |
48 import { mapState } from "vuex"; | |
1215
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
49 |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
50 const demodata = [ |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
51 { |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
52 id: 1, |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
53 name: "B1", |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
54 date: "2018-11-19", |
1218 | 55 location: "bla", |
1215
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", |
1218 | 64 location: "bla", |
1215
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
65 status: "Not approved", |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
66 importID: "123456789", |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
67 type: "bottleneck" |
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 { |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
70 id: 3, |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
71 name: "s1", |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
72 date: "2018-11-13", |
1218 | 73 location: "bla", |
1215
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
74 status: "Not approved", |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
75 importID: "987654321", |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
76 type: "soundingresult" |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
77 }, |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
78 { |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
79 id: 4, |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
80 name: "s2", |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
81 date: "2018-11-13", |
1218 | 82 location: "bla", |
1215
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
83 status: "Not approved", |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
84 importID: "987654321", |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
85 type: "soundingresult" |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
86 } |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
87 ]; |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
88 |
1208 | 89 export default { |
90 computed: { | |
1215
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
91 ...mapState("application", ["showStagingArea"]), |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
92 filteredData() { |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
93 return demodata; |
1218 | 94 }, |
95 stagingAreaStyle() { | |
96 return [ | |
1220 | 97 "ui-element staging-card bg-white ml-3 pt-3 mx-auto rounded border-top position-relative", |
1218 | 98 { |
99 stagingcollapsed: !this.showStagingArea, | |
100 stagingextended: this.showStagingArea | |
101 } | |
102 ]; | |
1215
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
103 } |
1208 | 104 } |
105 }; | |
106 </script> | |
107 | |
108 <style lang="sass" scoped> | |
109 .close-showStagingArea | |
110 z-index: 2 | |
111 right: 0 | |
112 top: 7px | |
113 height: $icon-width | |
114 width: $icon-height | |
115 | |
1218 | 116 .stagingcollapsed |
117 width: 0 | |
118 height: 0 | |
119 transition: $transition-fast | |
120 | |
121 .stagingextended | |
122 min-width: 600px | |
123 | |
1208 | 124 .staging-card |
1218 | 125 position: relative |
126 background-color: #ffffff | |
127 padding-top: $offset | |
1208 | 128 opacity: $slight-transparent |
1218 | 129 transition: left 0.3s ease |
130 overflow: hidden | |
131 background: #fff | |
132 margin-left: $offset !important | |
133 margin-top: -$offset !important | |
134 width: 90% | |
1215
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
135 |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
136 .table th, |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
137 td |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
138 font-size: 0.9rem |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
139 border-top: 0px !important |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
140 text-align: left |
5a8e8ee9034d
staging prototypical listview
Thomas Junk <thomas.junk@intevation.de>
parents:
1213
diff
changeset
|
141 padding: 0.5rem !important |
1208 | 142 </style> |