Mercurial > gemma
annotate client/src/importqueue/Importqueue.vue @ 1217:ba8cd80d68b6
made more use of bootstrap classes instead of custom css
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Mon, 19 Nov 2018 15:20:22 +0100 |
parents | b23622905a3f |
children |
rev | line source |
---|---|
1173 | 1 <template> |
1179
320e2720fe3d
importqueue broader layout and all button removed
Thomas Junk <thomas.junk@intevation.de>
parents:
1173
diff
changeset
|
2 <div class="d-flex flex-row"> |
320e2720fe3d
importqueue broader layout and all button removed
Thomas Junk <thomas.junk@intevation.de>
parents:
1173
diff
changeset
|
3 <div :class="spacerStyle"></div> |
1217
ba8cd80d68b6
made more use of bootstrap classes instead of custom css
Markus Kottlaender <markus@intevation.de>
parents:
1191
diff
changeset
|
4 <div class="mt-3 mx-auto"> |
1179
320e2720fe3d
importqueue broader layout and all button removed
Thomas Junk <thomas.junk@intevation.de>
parents:
1173
diff
changeset
|
5 <div class="card importqueuecard"> |
320e2720fe3d
importqueue broader layout and all button removed
Thomas Junk <thomas.junk@intevation.de>
parents:
1173
diff
changeset
|
6 <div class="card-header shadow-sm text-white bg-info mb-3">Importqueue</div> |
1173 | 7 <div class="card-body importcardbody"> |
1179
320e2720fe3d
importqueue broader layout and all button removed
Thomas Junk <thomas.junk@intevation.de>
parents:
1173
diff
changeset
|
8 <div class="card-body importcardbody"> |
320e2720fe3d
importqueue broader layout and all button removed
Thomas Junk <thomas.junk@intevation.de>
parents:
1173
diff
changeset
|
9 <div class="searchandfilter d-flex flex-row"> |
320e2720fe3d
importqueue broader layout and all button removed
Thomas Junk <thomas.junk@intevation.de>
parents:
1173
diff
changeset
|
10 <div class="searchgroup input-group"> |
320e2720fe3d
importqueue broader layout and all button removed
Thomas Junk <thomas.junk@intevation.de>
parents:
1173
diff
changeset
|
11 <div class="input-group-prepend"> |
320e2720fe3d
importqueue broader layout and all button removed
Thomas Junk <thomas.junk@intevation.de>
parents:
1173
diff
changeset
|
12 <span class="input-group-text" id="search"> |
320e2720fe3d
importqueue broader layout and all button removed
Thomas Junk <thomas.junk@intevation.de>
parents:
1173
diff
changeset
|
13 <i class="fa fa-search"></i> |
320e2720fe3d
importqueue broader layout and all button removed
Thomas Junk <thomas.junk@intevation.de>
parents:
1173
diff
changeset
|
14 </span> |
320e2720fe3d
importqueue broader layout and all button removed
Thomas Junk <thomas.junk@intevation.de>
parents:
1173
diff
changeset
|
15 </div> |
320e2720fe3d
importqueue broader layout and all button removed
Thomas Junk <thomas.junk@intevation.de>
parents:
1173
diff
changeset
|
16 <input |
320e2720fe3d
importqueue broader layout and all button removed
Thomas Junk <thomas.junk@intevation.de>
parents:
1173
diff
changeset
|
17 type="text" |
320e2720fe3d
importqueue broader layout and all button removed
Thomas Junk <thomas.junk@intevation.de>
parents:
1173
diff
changeset
|
18 class="form-control" |
320e2720fe3d
importqueue broader layout and all button removed
Thomas Junk <thomas.junk@intevation.de>
parents:
1173
diff
changeset
|
19 placeholder="" |
320e2720fe3d
importqueue broader layout and all button removed
Thomas Junk <thomas.junk@intevation.de>
parents:
1173
diff
changeset
|
20 aria-label="Search" |
320e2720fe3d
importqueue broader layout and all button removed
Thomas Junk <thomas.junk@intevation.de>
parents:
1173
diff
changeset
|
21 aria-describedby="search" |
320e2720fe3d
importqueue broader layout and all button removed
Thomas Junk <thomas.junk@intevation.de>
parents:
1173
diff
changeset
|
22 > |
1173 | 23 </div> |
1179
320e2720fe3d
importqueue broader layout and all button removed
Thomas Junk <thomas.junk@intevation.de>
parents:
1173
diff
changeset
|
24 <div class="filters"> |
320e2720fe3d
importqueue broader layout and all button removed
Thomas Junk <thomas.junk@intevation.de>
parents:
1173
diff
changeset
|
25 <button |
320e2720fe3d
importqueue broader layout and all button removed
Thomas Junk <thomas.junk@intevation.de>
parents:
1173
diff
changeset
|
26 @click="setFilter('successful')" |
320e2720fe3d
importqueue broader layout and all button removed
Thomas Junk <thomas.junk@intevation.de>
parents:
1173
diff
changeset
|
27 :class="successfulStyle" |
320e2720fe3d
importqueue broader layout and all button removed
Thomas Junk <thomas.junk@intevation.de>
parents:
1173
diff
changeset
|
28 >Successful</button> |
320e2720fe3d
importqueue broader layout and all button removed
Thomas Junk <thomas.junk@intevation.de>
parents:
1173
diff
changeset
|
29 <button @click="setFilter('failed')" :class="failedStyle">Failed</button> |
320e2720fe3d
importqueue broader layout and all button removed
Thomas Junk <thomas.junk@intevation.de>
parents:
1173
diff
changeset
|
30 <button @click="setFilter('pending')" :class="pendingStyle">Pending</button> |
320e2720fe3d
importqueue broader layout and all button removed
Thomas Junk <thomas.junk@intevation.de>
parents:
1173
diff
changeset
|
31 </div> |
1173 | 32 </div> |
1179
320e2720fe3d
importqueue broader layout and all button removed
Thomas Junk <thomas.junk@intevation.de>
parents:
1173
diff
changeset
|
33 <table class="table"> |
320e2720fe3d
importqueue broader layout and all button removed
Thomas Junk <thomas.junk@intevation.de>
parents:
1173
diff
changeset
|
34 <thead> |
320e2720fe3d
importqueue broader layout and all button removed
Thomas Junk <thomas.junk@intevation.de>
parents:
1173
diff
changeset
|
35 <tr> |
320e2720fe3d
importqueue broader layout and all button removed
Thomas Junk <thomas.junk@intevation.de>
parents:
1173
diff
changeset
|
36 <th>Enqueued</th> |
320e2720fe3d
importqueue broader layout and all button removed
Thomas Junk <thomas.junk@intevation.de>
parents:
1173
diff
changeset
|
37 <th>Kind</th> |
320e2720fe3d
importqueue broader layout and all button removed
Thomas Junk <thomas.junk@intevation.de>
parents:
1173
diff
changeset
|
38 <th>User</th> |
320e2720fe3d
importqueue broader layout and all button removed
Thomas Junk <thomas.junk@intevation.de>
parents:
1173
diff
changeset
|
39 <th>State</th> |
320e2720fe3d
importqueue broader layout and all button removed
Thomas Junk <thomas.junk@intevation.de>
parents:
1173
diff
changeset
|
40 </tr> |
320e2720fe3d
importqueue broader layout and all button removed
Thomas Junk <thomas.junk@intevation.de>
parents:
1173
diff
changeset
|
41 </thead> |
320e2720fe3d
importqueue broader layout and all button removed
Thomas Junk <thomas.junk@intevation.de>
parents:
1173
diff
changeset
|
42 <tbody> |
320e2720fe3d
importqueue broader layout and all button removed
Thomas Junk <thomas.junk@intevation.de>
parents:
1173
diff
changeset
|
43 <tr v-for="job in imports" :key="job.id"> |
320e2720fe3d
importqueue broader layout and all button removed
Thomas Junk <thomas.junk@intevation.de>
parents:
1173
diff
changeset
|
44 <td>{{job.enqueued}}</td> |
320e2720fe3d
importqueue broader layout and all button removed
Thomas Junk <thomas.junk@intevation.de>
parents:
1173
diff
changeset
|
45 <td>{{job.kind}}</td> |
320e2720fe3d
importqueue broader layout and all button removed
Thomas Junk <thomas.junk@intevation.de>
parents:
1173
diff
changeset
|
46 <td>{{job.user}}</td> |
320e2720fe3d
importqueue broader layout and all button removed
Thomas Junk <thomas.junk@intevation.de>
parents:
1173
diff
changeset
|
47 <td>{{job.state}}</td> |
320e2720fe3d
importqueue broader layout and all button removed
Thomas Junk <thomas.junk@intevation.de>
parents:
1173
diff
changeset
|
48 </tr> |
320e2720fe3d
importqueue broader layout and all button removed
Thomas Junk <thomas.junk@intevation.de>
parents:
1173
diff
changeset
|
49 </tbody> |
320e2720fe3d
importqueue broader layout and all button removed
Thomas Junk <thomas.junk@intevation.de>
parents:
1173
diff
changeset
|
50 </table> |
1173 | 51 </div> |
52 </div> | |
53 </div> | |
54 </div> | |
55 </div> | |
56 </template> | |
57 | |
58 <script> | |
59 import { displayError } from "../application/lib/errors.js"; | |
60 import { mapState } from "vuex"; | |
61 | |
62 export default { | |
63 name: "importqueue", | |
64 data() { | |
65 return { | |
66 successful: false, | |
67 failed: false, | |
68 pending: false | |
69 }; | |
70 }, | |
71 methods: { | |
72 setFilter(name) { | |
73 this[name] = !this[name]; | |
74 const allSet = this.successful && this.failed && this.pending; | |
1179
320e2720fe3d
importqueue broader layout and all button removed
Thomas Junk <thomas.junk@intevation.de>
parents:
1173
diff
changeset
|
75 if (allSet) { |
1173 | 76 this.all = false; |
77 this.successful = false; | |
78 this.failed = false; | |
79 this.pending = false; | |
80 } | |
81 } | |
82 }, | |
83 computed: { | |
84 ...mapState("imports", ["imports"]), | |
1179
320e2720fe3d
importqueue broader layout and all button removed
Thomas Junk <thomas.junk@intevation.de>
parents:
1173
diff
changeset
|
85 ...mapState("application", ["showSidebar"]), |
320e2720fe3d
importqueue broader layout and all button removed
Thomas Junk <thomas.junk@intevation.de>
parents:
1173
diff
changeset
|
86 spacerStyle() { |
1217
ba8cd80d68b6
made more use of bootstrap classes instead of custom css
Markus Kottlaender <markus@intevation.de>
parents:
1191
diff
changeset
|
87 return [ |
ba8cd80d68b6
made more use of bootstrap classes instead of custom css
Markus Kottlaender <markus@intevation.de>
parents:
1191
diff
changeset
|
88 "spacer ml-3", |
ba8cd80d68b6
made more use of bootstrap classes instead of custom css
Markus Kottlaender <markus@intevation.de>
parents:
1191
diff
changeset
|
89 { |
ba8cd80d68b6
made more use of bootstrap classes instead of custom css
Markus Kottlaender <markus@intevation.de>
parents:
1191
diff
changeset
|
90 "spacer-expanded": this.showSidebar, |
ba8cd80d68b6
made more use of bootstrap classes instead of custom css
Markus Kottlaender <markus@intevation.de>
parents:
1191
diff
changeset
|
91 "spacer-collapsed": !this.showSidebar |
ba8cd80d68b6
made more use of bootstrap classes instead of custom css
Markus Kottlaender <markus@intevation.de>
parents:
1191
diff
changeset
|
92 } |
ba8cd80d68b6
made more use of bootstrap classes instead of custom css
Markus Kottlaender <markus@intevation.de>
parents:
1191
diff
changeset
|
93 ]; |
1173 | 94 }, |
95 successfulStyle() { | |
96 return { | |
97 btn: true, | |
98 "btn-light": !this.successful, | |
99 "btn-dark": this.successful | |
100 }; | |
101 }, | |
102 pendingStyle() { | |
103 return { | |
104 btn: true, | |
105 "btn-light": !this.pending, | |
106 "btn-dark": this.pending | |
107 }; | |
108 }, | |
109 failedStyle() { | |
110 return { | |
111 btn: true, | |
112 "btn-light": !this.failed, | |
113 "btn-dark": this.failed | |
114 }; | |
115 } | |
116 }, | |
117 mounted() { | |
118 this.$store.dispatch("imports/getImports").catch(error => { | |
119 const { status, data } = error.response; | |
120 displayError({ | |
121 title: "Backend Error", | |
122 message: `${status}: ${data.message || data}` | |
123 }); | |
124 }); | |
125 } | |
126 }; | |
127 </script> | |
128 | |
1191
b23622905a3f
switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents:
1179
diff
changeset
|
129 <style lang="sass" scoped> |
b23622905a3f
switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents:
1179
diff
changeset
|
130 .spacer |
b23622905a3f
switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents:
1179
diff
changeset
|
131 height: 100vh |
1179
320e2720fe3d
importqueue broader layout and all button removed
Thomas Junk <thomas.junk@intevation.de>
parents:
1173
diff
changeset
|
132 |
1191
b23622905a3f
switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents:
1179
diff
changeset
|
133 .spacer-collapsed |
b23622905a3f
switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents:
1179
diff
changeset
|
134 min-width: $icon-width + $offset |
b23622905a3f
switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents:
1179
diff
changeset
|
135 transition: $transition-fast |
1179
320e2720fe3d
importqueue broader layout and all button removed
Thomas Junk <thomas.junk@intevation.de>
parents:
1173
diff
changeset
|
136 |
1191
b23622905a3f
switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents:
1179
diff
changeset
|
137 .spacer-expanded |
b23622905a3f
switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents:
1179
diff
changeset
|
138 min-width: $sidebar-width + $offset |
b23622905a3f
switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents:
1179
diff
changeset
|
139 |
b23622905a3f
switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents:
1179
diff
changeset
|
140 .importqueuecard |
b23622905a3f
switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents:
1179
diff
changeset
|
141 width: 80vw |
b23622905a3f
switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents:
1179
diff
changeset
|
142 min-height: 20rem |
1173 | 143 |
1191
b23622905a3f
switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents:
1179
diff
changeset
|
144 .card-body |
b23622905a3f
switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents:
1179
diff
changeset
|
145 width: 100% |
b23622905a3f
switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents:
1179
diff
changeset
|
146 margin-left: auto |
b23622905a3f
switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents:
1179
diff
changeset
|
147 margin-right: auto |
1173 | 148 |
1191
b23622905a3f
switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents:
1179
diff
changeset
|
149 .searchandfilter |
b23622905a3f
switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents:
1179
diff
changeset
|
150 position: relative |
b23622905a3f
switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents:
1179
diff
changeset
|
151 margin-bottom: $xx-large-offset |
1173 | 152 |
1191
b23622905a3f
switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents:
1179
diff
changeset
|
153 .filters |
b23622905a3f
switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents:
1179
diff
changeset
|
154 position: absolute |
b23622905a3f
switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents:
1179
diff
changeset
|
155 right: 0 |
1173 | 156 |
1191
b23622905a3f
switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents:
1179
diff
changeset
|
157 .filters button |
b23622905a3f
switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents:
1179
diff
changeset
|
158 margin-right: $small-offset |
1173 | 159 |
160 .table td, | |
1191
b23622905a3f
switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents:
1179
diff
changeset
|
161 .table th |
b23622905a3f
switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents:
1179
diff
changeset
|
162 border-top: 0 !important |
b23622905a3f
switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents:
1179
diff
changeset
|
163 text-align: left |
b23622905a3f
switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents:
1179
diff
changeset
|
164 padding: $small-offset !important |
1173 | 165 |
1191
b23622905a3f
switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents:
1179
diff
changeset
|
166 .searchgroup |
b23622905a3f
switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents:
1179
diff
changeset
|
167 position: absolute |
b23622905a3f
switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents:
1179
diff
changeset
|
168 left: 0 |
b23622905a3f
switched entirely to sass instead of scss
Markus Kottlaender <markus@intevation.de>
parents:
1179
diff
changeset
|
169 width: 50% |
1173 | 170 </style> |