Mercurial > gemma

comparison client/src/components/admin/Importqueue.vue @ 1276:aec9ed491dad

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
more cleanup in client/src
author Markus Kottlaender <markus@intevation.de>
date Thu, 22 Nov 2018 07:40:23 +0100
parents
children 2738a6ae9ad8
comparison
equal deleted inserted replaced
1275:9e23a2b02b32 1276:aec9ed491dad
1 <template>
2 <div class="d-flex flex-row">
3 <div :class="spacerStyle"></div>
4 <div class="mt-3 mx-auto">
5 <div class="card importqueuecard">
6 <div class="card-header shadow-sm text-white bg-info mb-3">Importqueue</div>
7 <div class="card-body importcardbody">
8 <div class="card-body importcardbody">
9 <div class="searchandfilter d-flex flex-row">
10 <div class="searchgroup input-group">
11 <div class="input-group-prepend">
12 <span class="input-group-text" id="search">
13 <i class="fa fa-search"></i>
14 </span>
15 </div>
16 <input
17 type="text"
18 class="form-control"
19 placeholder=""
20 aria-label="Search"
21 aria-describedby="search"
22 >
23 </div>
24 <div class="filters">
25 <button
26 @click="setFilter('successful')"
27 :class="successfulStyle"
28 >Successful</button>
29 <button @click="setFilter('failed')" :class="failedStyle">Failed</button>
30 <button @click="setFilter('pending')" :class="pendingStyle">Pending</button>
31 </div>
32 </div>
33 <table class="table">
34 <thead>
35 <tr>
36 <th>Enqueued</th>
37 <th>Kind</th>
38 <th>User</th>
39 <th>State</th>
40 </tr>
41 </thead>
42 <tbody>
43 <tr v-for="job in imports" :key="job.id">
44 <td>{{job.enqueued}}</td>
45 <td>{{job.kind}}</td>
46 <td>{{job.user}}</td>
47 <td>{{job.state}}</td>
48 </tr>
49 </tbody>
50 </table>
51 </div>
52 </div>
53 </div>
54 </div>
55 </div>
56 </template>
57
58 <script>
59 import { displayError } from "../../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;
75 if (allSet) {
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"]),
85 ...mapState("application", ["showSidebar"]),
86 spacerStyle() {
87 return [
88 "spacer ml-3",
89 {
90 "spacer-expanded": this.showSidebar,
91 "spacer-collapsed": !this.showSidebar
92 }
93 ];
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
129 <style lang="sass" scoped>
130 .spacer
131 height: 100vh
132
133 .spacer-collapsed
134 min-width: $icon-width + $offset
135 transition: $transition-fast
136
137 .spacer-expanded
138 min-width: $sidebar-width + $offset
139
140 .importqueuecard
141 width: 80vw
142 min-height: 20rem
143
144 .card-body
145 width: 100%
146 margin-left: auto
147 margin-right: auto
148
149 .searchandfilter
150 position: relative
151 margin-bottom: $xx-large-offset
152
153 .filters
154 position: absolute
155 right: 0
156
157 .filters button
158 margin-right: $small-offset
159
160 .table td,
161 .table th
162 border-top: 0 !important
163 text-align: left
164 padding: $small-offset !important
165
166 .searchgroup
167 position: absolute
168 left: 0
169 width: 50%
170 </style>