Mercurial > gemma
annotate client/src/components/importoverview/LogEntry.vue @ 2720:305af1e2975d
client: table headers: improved component to accept specific widths for columns
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Tue, 19 Mar 2019 12:26:52 +0100 |
parents | ef10f1cd6cb8 |
children | 9465749410ba |
rev | line source |
---|---|
2579 | 1 <template> |
2617
359f5f0037f5
client: importoverview2: improved table layout to save more space
Markus Kottlaender <markus@intevation.de>
parents:
2616
diff
changeset
|
2 <div class="logentry"> |
359f5f0037f5
client: importoverview2: improved table layout to save more space
Markus Kottlaender <markus@intevation.de>
parents:
2616
diff
changeset
|
3 <div class="row no-gutters text-left"> |
2720
305af1e2975d
client: table headers: improved component to accept specific widths for columns
Markus Kottlaender <markus@intevation.de>
parents:
2699
diff
changeset
|
4 <div |
305af1e2975d
client: table headers: improved component to accept specific widths for columns
Markus Kottlaender <markus@intevation.de>
parents:
2699
diff
changeset
|
5 style="width: 79px;" |
305af1e2975d
client: table headers: improved component to accept specific widths for columns
Markus Kottlaender <markus@intevation.de>
parents:
2699
diff
changeset
|
6 class="table-cell d-flex justify-content-between" |
305af1e2975d
client: table headers: improved component to accept specific widths for columns
Markus Kottlaender <markus@intevation.de>
parents:
2699
diff
changeset
|
7 > |
2617
359f5f0037f5
client: importoverview2: improved table layout to save more space
Markus Kottlaender <markus@intevation.de>
parents:
2616
diff
changeset
|
8 <font-awesome-icon |
359f5f0037f5
client: importoverview2: improved table layout to save more space
Markus Kottlaender <markus@intevation.de>
parents:
2616
diff
changeset
|
9 @click="toggleDetails" |
2720
305af1e2975d
client: table headers: improved component to accept specific widths for columns
Markus Kottlaender <markus@intevation.de>
parents:
2699
diff
changeset
|
10 class="my-auto text-info pointer" |
2617
359f5f0037f5
client: importoverview2: improved table layout to save more space
Markus Kottlaender <markus@intevation.de>
parents:
2616
diff
changeset
|
11 :icon="entry.id === show ? 'angle-down' : 'angle-right'" |
359f5f0037f5
client: importoverview2: improved table layout to save more space
Markus Kottlaender <markus@intevation.de>
parents:
2616
diff
changeset
|
12 fixed-width |
359f5f0037f5
client: importoverview2: improved table layout to save more space
Markus Kottlaender <markus@intevation.de>
parents:
2616
diff
changeset
|
13 ></font-awesome-icon> |
359f5f0037f5
client: importoverview2: improved table layout to save more space
Markus Kottlaender <markus@intevation.de>
parents:
2616
diff
changeset
|
14 {{ entry.id }} |
359f5f0037f5
client: importoverview2: improved table layout to save more space
Markus Kottlaender <markus@intevation.de>
parents:
2616
diff
changeset
|
15 </div> |
2720
305af1e2975d
client: table headers: improved component to accept specific widths for columns
Markus Kottlaender <markus@intevation.de>
parents:
2699
diff
changeset
|
16 <div style="width: 53px;" class="table-cell text-center"> |
2617
359f5f0037f5
client: importoverview2: improved table layout to save more space
Markus Kottlaender <markus@intevation.de>
parents:
2616
diff
changeset
|
17 {{ entry.kind.toUpperCase() }} |
359f5f0037f5
client: importoverview2: improved table layout to save more space
Markus Kottlaender <markus@intevation.de>
parents:
2616
diff
changeset
|
18 </div> |
2720
305af1e2975d
client: table headers: improved component to accept specific widths for columns
Markus Kottlaender <markus@intevation.de>
parents:
2699
diff
changeset
|
19 <div style="width: 138px;" class="table-cell text-center"> |
2617
359f5f0037f5
client: importoverview2: improved table layout to save more space
Markus Kottlaender <markus@intevation.de>
parents:
2616
diff
changeset
|
20 {{ entry.enqueued | dateTime }} |
359f5f0037f5
client: importoverview2: improved table layout to save more space
Markus Kottlaender <markus@intevation.de>
parents:
2616
diff
changeset
|
21 </div> |
2720
305af1e2975d
client: table headers: improved component to accept specific widths for columns
Markus Kottlaender <markus@intevation.de>
parents:
2699
diff
changeset
|
22 <div style="width: 105px;" class="table-cell truncate"> |
2699
ef10f1cd6cb8
import_overview: testwise including header component
Thomas Junk <thomas.junk@intevation.de>
parents:
2685
diff
changeset
|
23 {{ entry.user }} |
ef10f1cd6cb8
import_overview: testwise including header component
Thomas Junk <thomas.junk@intevation.de>
parents:
2685
diff
changeset
|
24 </div> |
2720
305af1e2975d
client: table headers: improved component to accept specific widths for columns
Markus Kottlaender <markus@intevation.de>
parents:
2699
diff
changeset
|
25 <div style="width: 105px;" class="table-cell truncate"> |
2699
ef10f1cd6cb8
import_overview: testwise including header component
Thomas Junk <thomas.junk@intevation.de>
parents:
2685
diff
changeset
|
26 {{ entry.signer }} |
ef10f1cd6cb8
import_overview: testwise including header component
Thomas Junk <thomas.junk@intevation.de>
parents:
2685
diff
changeset
|
27 </div> |
2720
305af1e2975d
client: table headers: improved component to accept specific widths for columns
Markus Kottlaender <markus@intevation.de>
parents:
2699
diff
changeset
|
28 <div style="width: 72px;" class="table-cell text-center"> |
2656
8299cce986a2
import_overview: readded status
Thomas Junk <thomas.junk@intevation.de>
parents:
2617
diff
changeset
|
29 <span v-if="entry.state === 'failed'" class="text-danger">{{ |
8299cce986a2
import_overview: readded status
Thomas Junk <thomas.junk@intevation.de>
parents:
2617
diff
changeset
|
30 entry.state |
8299cce986a2
import_overview: readded status
Thomas Junk <thomas.junk@intevation.de>
parents:
2617
diff
changeset
|
31 }}</span> |
8299cce986a2
import_overview: readded status
Thomas Junk <thomas.junk@intevation.de>
parents:
2617
diff
changeset
|
32 <span v-else>{{ entry.state }}</span> |
8299cce986a2
import_overview: readded status
Thomas Junk <thomas.junk@intevation.de>
parents:
2617
diff
changeset
|
33 </div> |
2720
305af1e2975d
client: table headers: improved component to accept specific widths for columns
Markus Kottlaender <markus@intevation.de>
parents:
2699
diff
changeset
|
34 <div style="width: 44px;" class="table-cell text-center"> |
2592 | 35 <font-awesome-icon |
36 v-if="entry.warnings" | |
2720
305af1e2975d
client: table headers: improved component to accept specific widths for columns
Markus Kottlaender <markus@intevation.de>
parents:
2699
diff
changeset
|
37 class="text-warning" |
2592 | 38 icon="exclamation-triangle" |
39 fixed-width | |
40 ></font-awesome-icon> | |
41 </div> | |
2720
305af1e2975d
client: table headers: improved component to accept specific widths for columns
Markus Kottlaender <markus@intevation.de>
parents:
2699
diff
changeset
|
42 <div style="flex-grow: 1; padding: 0;" class="table-cell text-right"> |
2617
359f5f0037f5
client: importoverview2: improved table layout to save more space
Markus Kottlaender <markus@intevation.de>
parents:
2616
diff
changeset
|
43 <div v-if="entry.state === 'pending'"> |
2592 | 44 <button |
2617
359f5f0037f5
client: importoverview2: improved table layout to save more space
Markus Kottlaender <markus@intevation.de>
parents:
2616
diff
changeset
|
45 :class="['actions approved', { active: isApproved }]" |
2592 | 46 @click="toggleApproval($options.STATES.APPROVED)" |
47 > | |
48 <font-awesome-icon | |
2617
359f5f0037f5
client: importoverview2: improved table layout to save more space
Markus Kottlaender <markus@intevation.de>
parents:
2616
diff
changeset
|
49 class="small pointer" |
2592 | 50 icon="check" |
51 ></font-awesome-icon> | |
52 </button> | |
53 <button | |
2617
359f5f0037f5
client: importoverview2: improved table layout to save more space
Markus Kottlaender <markus@intevation.de>
parents:
2616
diff
changeset
|
54 :class="['actions rejected', { active: isRejected }]" |
2592 | 55 @click="toggleApproval($options.STATES.REJECTED)" |
56 > | |
57 <font-awesome-icon | |
58 icon="times" | |
2617
359f5f0037f5
client: importoverview2: improved table layout to save more space
Markus Kottlaender <markus@intevation.de>
parents:
2616
diff
changeset
|
59 class="small pointer" |
2592 | 60 ></font-awesome-icon> |
61 </button> | |
62 </div> | |
63 </div> | |
64 </div> | |
2594 | 65 <div class="ml-1 d-flex flex-row"> |
2685
39a05f8c34e6
import_overview: Refactoring of detailed information.
Thomas Junk <thomas.junk@intevation.de>
parents:
2656
diff
changeset
|
66 <LogDetail |
39a05f8c34e6
import_overview: Refactoring of detailed information.
Thomas Junk <thomas.junk@intevation.de>
parents:
2656
diff
changeset
|
67 :entry="entry" |
39a05f8c34e6
import_overview: Refactoring of detailed information.
Thomas Junk <thomas.junk@intevation.de>
parents:
2656
diff
changeset
|
68 :details="details" |
39a05f8c34e6
import_overview: Refactoring of detailed information.
Thomas Junk <thomas.junk@intevation.de>
parents:
2656
diff
changeset
|
69 v-if="show === entry.id" |
39a05f8c34e6
import_overview: Refactoring of detailed information.
Thomas Junk <thomas.junk@intevation.de>
parents:
2656
diff
changeset
|
70 ></LogDetail> |
2592 | 71 </div> |
2579 | 72 </div> |
73 </template> | |
74 | |
2720
305af1e2975d
client: table headers: improved component to accept specific widths for columns
Markus Kottlaender <markus@intevation.de>
parents:
2699
diff
changeset
|
75 <style lang="sass" scoped> |
305af1e2975d
client: table headers: improved component to accept specific widths for columns
Markus Kottlaender <markus@intevation.de>
parents:
2699
diff
changeset
|
76 .logentry |
305af1e2975d
client: table headers: improved component to accept specific widths for columns
Markus Kottlaender <markus@intevation.de>
parents:
2699
diff
changeset
|
77 font-size: 80% |
305af1e2975d
client: table headers: improved component to accept specific widths for columns
Markus Kottlaender <markus@intevation.de>
parents:
2699
diff
changeset
|
78 &:hover |
305af1e2975d
client: table headers: improved component to accept specific widths for columns
Markus Kottlaender <markus@intevation.de>
parents:
2699
diff
changeset
|
79 background: #fafafa |
305af1e2975d
client: table headers: improved component to accept specific widths for columns
Markus Kottlaender <markus@intevation.de>
parents:
2699
diff
changeset
|
80 .actions |
305af1e2975d
client: table headers: improved component to accept specific widths for columns
Markus Kottlaender <markus@intevation.de>
parents:
2699
diff
changeset
|
81 height: 100% |
305af1e2975d
client: table headers: improved component to accept specific widths for columns
Markus Kottlaender <markus@intevation.de>
parents:
2699
diff
changeset
|
82 width: 50% |
305af1e2975d
client: table headers: improved component to accept specific widths for columns
Markus Kottlaender <markus@intevation.de>
parents:
2699
diff
changeset
|
83 border: 0 |
305af1e2975d
client: table headers: improved component to accept specific widths for columns
Markus Kottlaender <markus@intevation.de>
parents:
2699
diff
changeset
|
84 background: transparent |
305af1e2975d
client: table headers: improved component to accept specific widths for columns
Markus Kottlaender <markus@intevation.de>
parents:
2699
diff
changeset
|
85 outline: none |
305af1e2975d
client: table headers: improved component to accept specific widths for columns
Markus Kottlaender <markus@intevation.de>
parents:
2699
diff
changeset
|
86 &.approved |
305af1e2975d
client: table headers: improved component to accept specific widths for columns
Markus Kottlaender <markus@intevation.de>
parents:
2699
diff
changeset
|
87 color: green |
305af1e2975d
client: table headers: improved component to accept specific widths for columns
Markus Kottlaender <markus@intevation.de>
parents:
2699
diff
changeset
|
88 &.active, |
305af1e2975d
client: table headers: improved component to accept specific widths for columns
Markus Kottlaender <markus@intevation.de>
parents:
2699
diff
changeset
|
89 &:hover |
305af1e2975d
client: table headers: improved component to accept specific widths for columns
Markus Kottlaender <markus@intevation.de>
parents:
2699
diff
changeset
|
90 color: white |
305af1e2975d
client: table headers: improved component to accept specific widths for columns
Markus Kottlaender <markus@intevation.de>
parents:
2699
diff
changeset
|
91 background: green |
305af1e2975d
client: table headers: improved component to accept specific widths for columns
Markus Kottlaender <markus@intevation.de>
parents:
2699
diff
changeset
|
92 &.rejected |
305af1e2975d
client: table headers: improved component to accept specific widths for columns
Markus Kottlaender <markus@intevation.de>
parents:
2699
diff
changeset
|
93 border-left: 1px solid #dee2e6 |
305af1e2975d
client: table headers: improved component to accept specific widths for columns
Markus Kottlaender <markus@intevation.de>
parents:
2699
diff
changeset
|
94 color: red |
305af1e2975d
client: table headers: improved component to accept specific widths for columns
Markus Kottlaender <markus@intevation.de>
parents:
2699
diff
changeset
|
95 &.active, |
305af1e2975d
client: table headers: improved component to accept specific widths for columns
Markus Kottlaender <markus@intevation.de>
parents:
2699
diff
changeset
|
96 &:hover |
305af1e2975d
client: table headers: improved component to accept specific widths for columns
Markus Kottlaender <markus@intevation.de>
parents:
2699
diff
changeset
|
97 color: white |
305af1e2975d
client: table headers: improved component to accept specific widths for columns
Markus Kottlaender <markus@intevation.de>
parents:
2699
diff
changeset
|
98 background: red |
305af1e2975d
client: table headers: improved component to accept specific widths for columns
Markus Kottlaender <markus@intevation.de>
parents:
2699
diff
changeset
|
99 .table-cell |
305af1e2975d
client: table headers: improved component to accept specific widths for columns
Markus Kottlaender <markus@intevation.de>
parents:
2699
diff
changeset
|
100 padding: 0 3px |
305af1e2975d
client: table headers: improved component to accept specific widths for columns
Markus Kottlaender <markus@intevation.de>
parents:
2699
diff
changeset
|
101 border-right: solid 1px #dee2e6 |
305af1e2975d
client: table headers: improved component to accept specific widths for columns
Markus Kottlaender <markus@intevation.de>
parents:
2699
diff
changeset
|
102 &:last-child |
305af1e2975d
client: table headers: improved component to accept specific widths for columns
Markus Kottlaender <markus@intevation.de>
parents:
2699
diff
changeset
|
103 border-right: none |
305af1e2975d
client: table headers: improved component to accept specific widths for columns
Markus Kottlaender <markus@intevation.de>
parents:
2699
diff
changeset
|
104 </style> |
305af1e2975d
client: table headers: improved component to accept specific widths for columns
Markus Kottlaender <markus@intevation.de>
parents:
2699
diff
changeset
|
105 |
2579 | 106 <script> |
2592 | 107 /* This is Free Software under GNU Affero General Public License v >= 3.0 |
108 * without warranty, see README.md and license for details. | |
109 * | |
110 * SPDX-License-Identifier: AGPL-3.0-or-later | |
111 * License-Filename: LICENSES/AGPL-3.0.txt | |
112 * | |
113 * Copyright (C) 2018 by via donau | |
114 * – Österreichische Wasserstraßen-Gesellschaft mbH | |
115 * Software engineering by Intevation GmbH | |
116 * | |
117 * Author(s): | |
118 * Thomas Junk <thomas.junk@intevation.de> | |
119 */ | |
120 import { mapState } from "vuex"; | |
121 import { STATES } from "@/store/imports.js"; | |
2685
39a05f8c34e6
import_overview: Refactoring of detailed information.
Thomas Junk <thomas.junk@intevation.de>
parents:
2656
diff
changeset
|
122 import { displayError } from "@/lib/errors.js"; |
39a05f8c34e6
import_overview: Refactoring of detailed information.
Thomas Junk <thomas.junk@intevation.de>
parents:
2656
diff
changeset
|
123 import { HTTP } from "@/lib/http.js"; |
2592 | 124 |
2579 | 125 export default { |
126 name: "importlogentry", | |
127 props: ["entry"], | |
2685
39a05f8c34e6
import_overview: Refactoring of detailed information.
Thomas Junk <thomas.junk@intevation.de>
parents:
2656
diff
changeset
|
128 data() { |
39a05f8c34e6
import_overview: Refactoring of detailed information.
Thomas Junk <thomas.junk@intevation.de>
parents:
2656
diff
changeset
|
129 return { |
39a05f8c34e6
import_overview: Refactoring of detailed information.
Thomas Junk <thomas.junk@intevation.de>
parents:
2656
diff
changeset
|
130 details: null |
39a05f8c34e6
import_overview: Refactoring of detailed information.
Thomas Junk <thomas.junk@intevation.de>
parents:
2656
diff
changeset
|
131 }; |
39a05f8c34e6
import_overview: Refactoring of detailed information.
Thomas Junk <thomas.junk@intevation.de>
parents:
2656
diff
changeset
|
132 }, |
39a05f8c34e6
import_overview: Refactoring of detailed information.
Thomas Junk <thomas.junk@intevation.de>
parents:
2656
diff
changeset
|
133 mounted() { |
39a05f8c34e6
import_overview: Refactoring of detailed information.
Thomas Junk <thomas.junk@intevation.de>
parents:
2656
diff
changeset
|
134 HTTP.get("/imports/" + this.entry.id, { |
39a05f8c34e6
import_overview: Refactoring of detailed information.
Thomas Junk <thomas.junk@intevation.de>
parents:
2656
diff
changeset
|
135 headers: { "X-Gemma-Auth": localStorage.getItem("token") } |
39a05f8c34e6
import_overview: Refactoring of detailed information.
Thomas Junk <thomas.junk@intevation.de>
parents:
2656
diff
changeset
|
136 }) |
39a05f8c34e6
import_overview: Refactoring of detailed information.
Thomas Junk <thomas.junk@intevation.de>
parents:
2656
diff
changeset
|
137 .then(response => { |
39a05f8c34e6
import_overview: Refactoring of detailed information.
Thomas Junk <thomas.junk@intevation.de>
parents:
2656
diff
changeset
|
138 this.details = response.data; |
39a05f8c34e6
import_overview: Refactoring of detailed information.
Thomas Junk <thomas.junk@intevation.de>
parents:
2656
diff
changeset
|
139 }) |
39a05f8c34e6
import_overview: Refactoring of detailed information.
Thomas Junk <thomas.junk@intevation.de>
parents:
2656
diff
changeset
|
140 .catch(error => { |
39a05f8c34e6
import_overview: Refactoring of detailed information.
Thomas Junk <thomas.junk@intevation.de>
parents:
2656
diff
changeset
|
141 const { status, data } = error.response; |
39a05f8c34e6
import_overview: Refactoring of detailed information.
Thomas Junk <thomas.junk@intevation.de>
parents:
2656
diff
changeset
|
142 displayError({ |
39a05f8c34e6
import_overview: Refactoring of detailed information.
Thomas Junk <thomas.junk@intevation.de>
parents:
2656
diff
changeset
|
143 title: this.$gettext("Backend Error"), |
39a05f8c34e6
import_overview: Refactoring of detailed information.
Thomas Junk <thomas.junk@intevation.de>
parents:
2656
diff
changeset
|
144 message: `${status}: ${data.message || data}` |
39a05f8c34e6
import_overview: Refactoring of detailed information.
Thomas Junk <thomas.junk@intevation.de>
parents:
2656
diff
changeset
|
145 }); |
39a05f8c34e6
import_overview: Refactoring of detailed information.
Thomas Junk <thomas.junk@intevation.de>
parents:
2656
diff
changeset
|
146 }); |
39a05f8c34e6
import_overview: Refactoring of detailed information.
Thomas Junk <thomas.junk@intevation.de>
parents:
2656
diff
changeset
|
147 }, |
2592 | 148 components: { |
149 LogDetail: () => import("./LogDetail.vue") | |
150 }, | |
151 methods: { | |
152 toggleApproval(state) { | |
153 this.$store.commit("imports/toggleApprove", { | |
154 id: this.entry.id, | |
155 newStatus: state | |
156 }); | |
157 }, | |
158 toggleDetails() { | |
159 const { id } = this.entry; | |
160 if (id === this.show) { | |
161 this.$store.commit("imports/hideDetails"); | |
2597 | 162 this.$store.commit("imports/hideAdditionalInfo"); |
163 this.$store.commit("imports/hideAdditionalLogs"); | |
2592 | 164 } else { |
165 this.$store.commit("imports/showDetailsFor", id); | |
166 } | |
167 } | |
168 }, | |
2579 | 169 computed: { |
2592 | 170 ...mapState("imports", ["show"]), |
171 needsApproval() { | |
172 return this.entry.status === STATES.NEEDSAPPROVAL; | |
173 }, | |
174 isRejected() { | |
175 return this.entry.status === STATES.REJECTED; | |
176 }, | |
177 isApproved() { | |
178 return this.entry.status === STATES.APPROVED; | |
2579 | 179 } |
2592 | 180 }, |
181 STATES: STATES | |
2579 | 182 }; |
183 </script> |