Mercurial > gemma

comparison client/src/components/admin/Importqueuedetail.vue @ 1554:15d736a402c9

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
importqueue as collapsible
author Thomas Junk <thomas.junk@intevation.de>
date Tue, 11 Dec 2018 13:33:52 +0100
parents
children a3c2b192daa2
comparison
equal deleted inserted replaced
1553:35f85da41fdb 1554:15d736a402c9
1 <template>
2 <div class="d-flex flex-column py-1">
3 <div class="d-flex flex-row">
4 <div @click="showDetails(job.id)" class="jobid mr-2">{{ job.id }}</div>
5 <div @click="showDetails(job.id)" class="enqueued mr-2">
6 {{ formatDate(job.enqueued) }}
7 </div>
8 <div @click="showDetails(job.id)" class="kind mr-2">{{ job.kind }}</div>
9 <div @click="showDetails(job.id)" class="user mr-2">{{ job.user }}</div>
10 <div @click="showDetails(job.id)" class="signer mr-2">
11 {{ job.signer }}
12 </div>
13 <div @click="showDetails(job.id)" class="state mr-2">{{ job.state }}</div>
14 </div>
15 <div class="d-flex flex-row">
16 <div :class="collapse">
17 <table class="table table-responsive">
18 <thead>
19 <tr>
20 <th class="first">
21 <small><translate>Kind</translate></small>
22 </th>
23 <th class="second">
24 <a href="#" @click="sortAsc = !sortAsc" class="sort-link"
25 ><small><translate>Date</translate></small>
26 <small
27 ><font-awesome-icon
28 :icon="sortIcon"
29 class="ml-1"
30 ></font-awesome-icon></small
31 ></a>
32 </th>
33 <th class="third">
34 <small><translate>Message</translate></small>
35 </th>
36 </tr>
37 </thead>
38 <tbody>
39 <tr
40 v-for="(entry, index) in sortedEntries"
41 :key="index"
42 class="detailsrow"
43 >
44 <td class="first">
45 <small>{{ entry.kind }}</small>
46 </td>
47 <td class="second">
48 <small>{{ formatDate(entry.time) }}</small>
49 </td>
50 <td class="third">
51 <small>{{ entry.message }}</small>
52 </td>
53 </tr>
54 </tbody>
55 </table>
56 </div>
57 </div>
58 </div>
59 </template>
60
61 <script>
62 /* This is Free Software under GNU Affero General Public License v >= 3.0
63 * without warranty, see README.md and license for details.
64 *
65 * SPDX-License-Identifier: AGPL-3.0-or-later
66 * License-Filename: LICENSES/AGPL-3.0.txt
67 *
68 * Copyright (C) 2018 by via donau
69 * – Österreichische Wasserstraßen-Gesellschaft mbH
70 * Software engineering by Intevation GmbH
71 *
72 * Author(s):
73 * Thomas Junk <thomas.junk@intevation.de>
74 */
75
76 import { HTTP } from "../../lib/http.js";
77 import { displayError } from "../../lib/errors.js";
78 import locale2 from "locale2";
79
80 export default {
81 name: "importqueuedetail",
82 props: ["job"],
83 data() {
84 return {
85 show: false,
86 entries: [],
87 sortAsc: true
88 };
89 },
90 methods: {
91 formatDate(date) {
92 return date
93 ? new Date(date).toLocaleDateString(locale2, {
94 day: "2-digit",
95 month: "2-digit",
96 year: "numeric"
97 })
98 : "";
99 },
100 showDetails(id) {
101 if (this.show) {
102 this.show = false;
103 return;
104 }
105 HTTP.get("/imports/" + id, {
106 headers: { "X-Gemma-Auth": localStorage.getItem("token") }
107 })
108 .then(response => {
109 const { entries } = response.data;
110 this.entries = entries;
111 this.show = true;
112 })
113 .catch(error => {
114 const { status, data } = error.response;
115 displayError({
116 title: this.$gettext("Backend Error"),
117 message: `${status}: ${data.message || data}`
118 });
119 });
120 }
121 },
122 computed: {
123 sortedEntries() {
124 let sorted = this.entries.slice();
125 sorted.sort((r1, r2) => {
126 let d1 = new Date(r1.time);
127 let d2 = new Date(r2.time);
128 if (d2 < d1) {
129 return !this.sortAsc ? -1 : 1;
130 }
131 if (d2 > d1) {
132 return !this.sortAsc ? 1 : -1;
133 }
134 return 0;
135 });
136 return sorted;
137 },
138 sortIcon() {
139 return this.sortAsc ? "sort-amount-down" : "sort-amount-up";
140 },
141 collapse() {
142 return {
143 animated: true,
144 fadeIn: this.show,
145 details: true,
146 collapse: true,
147 show: this.show
148 };
149 }
150 }
151 };
152 </script>
153
154 <style lang="scss" scoped>
155 .jobid {
156 width: 80px;
157 }
158
159 .enqueued {
160 width: 120px;
161 }
162
163 .user {
164 width: 80px;
165 }
166
167 .signer {
168 width: 80px;
169 }
170
171 .kind {
172 width: 80px;
173 }
174
175 .state {
176 width: 80px;
177 }
178
179 .details {
180 background-color: #fafafa;
181 width: 50%;
182 }
183
184 .detailsrow {
185 line-height: 0.1em;
186 }
187
188 .first {
189 width: 65px;
190 padding-left: 0px;
191 border-top: 0px;
192 padding-bottom: $small-offset;
193 }
194
195 .second {
196 width: 100px;
197 padding-left: 0px;
198 border-top: 0px;
199 padding-bottom: $small-offset;
200 }
201
202 .third {
203 width: 355px;
204 padding-left: 0px;
205 border-top: 0px;
206 padding-bottom: $small-offset;
207 }
208 </style>