Mercurial > gemma

comparison client/src/components/importqueue/Importqueuedetail.vue @ 1559:5d84dcb79a54

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
layout importqueue
author Thomas Junk <thomas.junk@intevation.de>
date Wed, 12 Dec 2018 09:48:37 +0100
parents client/src/components/Importqueuedetail.vue@0ded4c56978e
children ad3a19e222bb
comparison
equal deleted inserted replaced
1558:0ded4c56978e 1559:5d84dcb79a54
1 <template>
2 <div class="entry d-flex flex-column py-1 border-bottom w-50">
3 <div class="d-flex flex-row position-relative">
4 <div @click="showDetails(job.id)" class="jobid ml-2 mt-1 mr-2">
5 {{ job.id }}
6 </div>
7 <div @click="showDetails(job.id)" class="enqueued mt-1 mr-2">
8 {{ formatDate(job.enqueued) }}
9 </div>
10 <div @click="showDetails(job.id)" class="kind mt-1 mr-2">
11 {{ job.kind }}
12 </div>
13 <div @click="showDetails(job.id)" class="user mt-1 mr-2">
14 {{ job.user }}
15 </div>
16 <div @click="showDetails(job.id)" class="signer mt-1 mr-2">
17 {{ job.signer }}
18 </div>
19 <div @click="showDetails(job.id)" class="state mt-1 mr-2">
20 {{ job.state }}
21 </div>
22 <div @click="showDetails(job.id)" class="mt-1 text-info detailsbutton">
23 <font-awesome-icon
24 v-if="show"
25 icon="angle-up"
26 fixed-width
27 ></font-awesome-icon>
28 <font-awesome-icon
29 v-else
30 icon="angle-down"
31 fixed-width
32 ></font-awesome-icon>
33 </div>
34 </div>
35 <div class="detailstable d-flex flex-row">
36 <div :class="collapse">
37 <table class="table table-responsive">
38 <thead>
39 <tr>
40 <th class="first pb-0">
41 <small class="condensed"><translate>Kind</translate></small>
42 </th>
43 <th class="second pb-0">
44 <a href="#" @click="sortAsc = !sortAsc" class="sort-link"
45 ><small class="condensed"><translate>Date</translate></small>
46 <small class="condensed"
47 ><font-awesome-icon
48 :icon="sortIcon"
49 class="ml-1"
50 ></font-awesome-icon></small
51 ></a>
52 </th>
53 <th class="third pb-0">
54 <small class="condensed"><translate>Message</translate></small>
55 </th>
56 </tr>
57 </thead>
58 <tbody>
59 <tr
60 v-for="(entry, index) in sortedEntries"
61 :key="index"
62 class="detailsrow"
63 >
64 <td class="first">
65 <span class="condensed">{{ entry.kind }}</span>
66 </td>
67 <td class="second">
68 <span class="condensed">{{ formatDate(entry.time) }}</span>
69 </td>
70 <td class="third">
71 <span class="condensed">{{ entry.message }}</span>
72 </td>
73 </tr>
74 </tbody>
75 </table>
76 </div>
77 </div>
78 </div>
79 </template>
80
81 <script>
82 /* This is Free Software under GNU Affero General Public License v >= 3.0
83 * without warranty, see README.md and license for details.
84 *
85 * SPDX-License-Identifier: AGPL-3.0-or-later
86 * License-Filename: LICENSES/AGPL-3.0.txt
87 *
88 * Copyright (C) 2018 by via donau
89 * – Österreichische Wasserstraßen-Gesellschaft mbH
90 * Software engineering by Intevation GmbH
91 *
92 * Author(s):
93 * Thomas Junk <thomas.junk@intevation.de>
94 */
95
96 import { HTTP } from "../../lib/http.js";
97 import { displayError } from "../../lib/errors.js";
98 import locale2 from "locale2";
99
100 export default {
101 name: "importqueuedetail",
102 props: ["job"],
103 data() {
104 return {
105 show: false,
106 entries: [],
107 sortAsc: true
108 };
109 },
110 methods: {
111 formatDate(date) {
112 return date
113 ? new Date(date).toLocaleDateString(locale2, {
114 day: "2-digit",
115 month: "2-digit",
116 year: "numeric"
117 })
118 : "";
119 },
120 showDetails(id) {
121 if (this.show) {
122 this.show = false;
123 return;
124 }
125 if (this.entries.length === 0) {
126 HTTP.get("/imports/" + id, {
127 headers: { "X-Gemma-Auth": localStorage.getItem("token") }
128 })
129 .then(response => {
130 const { entries } = response.data;
131 this.entries = entries;
132 this.show = true;
133 })
134 .catch(error => {
135 const { status, data } = error.response;
136 displayError({
137 title: this.$gettext("Backend Error"),
138 message: `${status}: ${data.message || data}`
139 });
140 });
141 } else {
142 this.show = true;
143 }
144 }
145 },
146 computed: {
147 sortedEntries() {
148 let sorted = this.entries.slice();
149 sorted.sort((r1, r2) => {
150 let d1 = new Date(r1.time);
151 let d2 = new Date(r2.time);
152 if (d2 < d1) {
153 return !this.sortAsc ? -1 : 1;
154 }
155 if (d2 > d1) {
156 return !this.sortAsc ? 1 : -1;
157 }
158 return 0;
159 });
160 return sorted;
161 },
162 sortIcon() {
163 return this.sortAsc ? "sort-amount-down" : "sort-amount-up";
164 },
165 icon() {
166 return {
167 "angle-up": !this.show,
168 "angle-down": this.show
169 };
170 },
171 collapse() {
172 return {
173 details: true,
174 collapse: true,
175 show: this.show,
176 "w-100": true
177 };
178 }
179 }
180 };
181 </script>
182
183 <style lang="scss" scoped>
184 .condensed {
185 font-stretch: condensed;
186 }
187
188 .entry {
189 background-color: white;
190 cursor: pointer;
191 }
192
193 .entry:hover {
194 background-color: #efefef;
195 transition: 1.5s;
196 }
197
198 .detailstable {
199 margin-left: $offset;
200 margin-right: $large-offset;
201 }
202
203 .detailsbutton {
204 position: absolute;
205 top: 0;
206 right: 0;
207 height: 100%;
208 }
209 .jobid {
210 width: 80px;
211 }
212
213 .enqueued {
214 width: 120px;
215 }
216
217 .user {
218 width: 80px;
219 }
220
221 .signer {
222 width: 80px;
223 }
224
225 .kind {
226 width: 80px;
227 }
228
229 .state {
230 width: 80px;
231 }
232
233 .details {
234 width: 50%;
235 }
236
237 .detailsrow {
238 line-height: 0.1em;
239 }
240
241 .first {
242 width: 65px;
243 padding-left: 0px;
244 border-top: 0px;
245 padding-bottom: $small-offset;
246 }
247
248 .second {
249 width: 100px;
250 padding-left: 0px;
251 border-top: 0px;
252 padding-bottom: $small-offset;
253 }
254
255 .third {
256 width: 600px;
257 padding-left: 0px;
258 border-top: 0px;
259 padding-bottom: $small-offset;
260 }
261
262 thead,
263 tbody {
264 display: block;
265 }
266
267 tbody {
268 height: 150px;
269 overflow-y: auto;
270 overflow-x: hidden;
271 }
272 </style>