Mercurial > gemma

comparison client/src/components/admin/Importqueue.vue @ 1549:b03db5726ca5

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
importqueue detail view
author Thomas Junk <thomas.junk@intevation.de>
date Mon, 10 Dec 2018 17:10:30 +0100
parents e7830ab6bacc
children 15d736a402c9
comparison
equal deleted inserted replaced
1548:ccf4fc8a6402 1549:b03db5726ca5
57 <th><translate>Signer</translate></th> 57 <th><translate>Signer</translate></th>
58 <th><translate>State</translate></th> 58 <th><translate>State</translate></th>
59 </tr> 59 </tr>
60 </thead> 60 </thead>
61 <tbody> 61 <tbody>
62 <tr v-for="job in filteredImports" :key="job.id"> 62 <tr
63 <td>{{ job.enqueued }}</td> 63 @click="showDetails(job.id)"
64 v-for="job in filteredImports"
65 :key="job.id"
66 >
67 <td>{{ formatSurveyDate(job.enqueued) }}</td>
64 <td>{{ job.kind }}</td> 68 <td>{{ job.kind }}</td>
65 <td>{{ job.user }}</td> 69 <td>{{ job.user }}</td>
66 <td>{{ job.signer }}</td> 70 <td>{{ job.signer }}</td>
67 <td>{{ job.state }}</td> 71 <td>{{ job.state }}</td>
68 </tr> 72 </tr>
75 </div> 79 </div>
76 </div> 80 </div>
77 </div> 81 </div>
78 </div> 82 </div>
79 </div> 83 </div>
84 <modal name="details" :heigth="400" :width="600" :scrollable="true">
85 <div @click="close" class="ui-element closebutton">
86 <font-awesome-icon icon="times"></font-awesome-icon>
87 </div>
88 <div class="details">
89 <table class="table">
90 <thead>
91 <tr>
92 <th class="first"><translate>Kind</translate></th>
93 <th class="second">
94 <a href="#" @click="sortAsc = !sortAsc" class="sort-link"
95 ><translate>Date</translate>
96 <font-awesome-icon
97 :icon="sortIcon"
98 class="ml-1"
99 ></font-awesome-icon
100 ></a>
101 </th>
102 <th class="third"><translate>Message</translate></th>
103 </tr>
104 </thead>
105 <tbody>
106 <tr v-for="(entry, index) in sortedEntries" :key="index">
107 <td class="first">{{ entry.kind }}</td>
108 <td class="second">{{ formatSurveyDate(entry.time) }}</td>
109 <td class="third">{{ entry.message }}</td>
110 </tr>
111 </tbody>
112 </table>
113 </div>
114 </modal>
80 </div> 115 </div>
81 </template> 116 </template>
82 117
83 <script> 118 <script>
84 /* This is Free Software under GNU Affero General Public License v >= 3.0 119 /* This is Free Software under GNU Affero General Public License v >= 3.0
94 * Author(s): 129 * Author(s):
95 * Markus Kottländer <markus@intevation.de> 130 * Markus Kottländer <markus@intevation.de>
96 */ 131 */
97 import { displayError } from "../../lib/errors.js"; 132 import { displayError } from "../../lib/errors.js";
98 import { mapState } from "vuex"; 133 import { mapState } from "vuex";
134 import { HTTP } from "../../lib/http.js";
135 import { formatSurveyDate } from "../../lib/date.js";
99 136
100 export default { 137 export default {
101 name: "importqueue", 138 name: "importqueue",
102 data() { 139 data() {
103 return { 140 return {
104 searchQuery: "", 141 searchQuery: "",
105 successful: false, 142 successful: false,
106 failed: false, 143 failed: false,
107 pending: false, 144 pending: false,
108 rejected: false, 145 rejected: false,
109 accepted: false 146 accepted: false,
147 entries: [],
148 sortAsc: true
110 }; 149 };
111 }, 150 },
112 mounted() { 151 mounted() {
113 this.loadQueue(); 152 this.loadQueue();
114 }, 153 },
115 methods: { 154 methods: {
155 formatSurveyDate(date) {
156 return formatSurveyDate(date);
157 },
158 clearEntries() {
159 this.entries = [];
160 },
116 setFilter(name) { 161 setFilter(name) {
117 this[name] = !this[name]; 162 this[name] = !this[name];
118 const allSet = 163 const allSet =
119 this.successful && 164 this.successful &&
120 this.failed && 165 this.failed &&
138 }); 183 });
139 }); 184 });
140 }, 185 },
141 refresh() { 186 refresh() {
142 this.loadQueue(); 187 this.loadQueue();
188 },
189 showDetails(id) {
190 HTTP.get("/imports/" + id, {
191 headers: { "X-Gemma-Auth": localStorage.getItem("token") }
192 })
193 .then(response => {
194 const { entries } = response.data;
195 this.entries = entries;
196 this.$modal.show("details");
197 })
198 .catch(error => {
199 const { status, data } = error.response;
200 displayError({
201 title: this.$gettext("Backend Error"),
202 message: `${status}: ${data.message || data}`
203 });
204 });
205 },
206 close() {
207 this.$modal.hide("details");
143 } 208 }
144 }, 209 },
145 computed: { 210 computed: {
146 ...mapState("imports", ["imports"]), 211 ...mapState("imports", ["imports"]),
147 ...mapState("application", ["showSidebar"]), 212 ...mapState("application", ["showSidebar"]),
213 sortedEntries() {
214 let sorted = this.entries.slice();
215 sorted.sort((r1, r2) => {
216 let d1 = new Date(r1.time);
217 let d2 = new Date(r2.time);
218 if (d2 < d1) {
219 return !this.sortAsc ? -1 : 1;
220 }
221 if (d2 > d1) {
222 return !this.sortAsc ? 1 : -1;
223 }
224 return 0;
225 });
226 return sorted;
227 },
228 sortIcon() {
229 return this.sortAsc ? "sort-amount-down" : "sort-amount-up";
230 },
148 filteredImports() { 231 filteredImports() {
149 const filtered = this.imports 232 const filtered = this.imports
150 .filter(element => { 233 .filter(element => {
151 if (!this.searchQuery) return true; 234 if (!this.searchQuery) return true;
152 return [(element.kind, element.user, element.enqueued)].some(x => { 235 return [(element.kind, element.user, element.enqueued)].some(x => {
222 } 305 }
223 }; 306 };
224 </script> 307 </script>
225 308
226 <style lang="scss" scoped> 309 <style lang="scss" scoped>
310 .details thead {
311 display: block;
312 }
313 .details tbody {
314 display: block;
315 }
316
317 .details tbody {
318 height: 260px;
319 overflow-y: auto;
320 overflow-x: hidden;
321 }
322
323 .first {
324 width: 65px;
325 padding-left: 0px;
326 }
327
328 .second {
329 width: 180px;
330 padding-left: 0px;
331 }
332
333 .third {
334 width: 355px;
335 padding-left: 0px;
336 }
337
338 .closebutton {
339 top: $small-offset;
340 }
341
227 .refresh { 342 .refresh {
228 position: absolute; 343 position: absolute;
229 right: $offset; 344 right: $offset;
230 bottom: $offset; 345 bottom: $offset;
231 } 346 }