Mercurial > gemma

comparison client/src/components/importoverview/LogEntry.vue @ 2592:5472a5be09c2

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
overview2 WIP
author Thomas Junk <thomas.junk@intevation.de>
date Tue, 12 Mar 2019 09:44:32 +0100
parents 5295a182b4a4
children 956b230c6062
comparison
equal deleted inserted replaced
2591:eb69c6d27ae5 2592:5472a5be09c2
1 <template> 1 <template>
2 <div class="d-flex flex-row"> 2 <div>
3 <font-awesome-icon 3 <div class="d-flex flex-row">
4 class="mr-1 text-info" 4 <font-awesome-icon
5 icon="angle-right" 5 v-if="entry.id === show"
6 fixed-width 6 @click="toggleDetails"
7 ></font-awesome-icon 7 class="my-auto mr-1 text-info pointer"
8 >Ich bin ein Eintrag! 8 icon="angle-down"
9 <span
10 ><font-awesome-icon
11 v-if="entry.warnings"
12 class="ml-1 text-warning"
13 icon="exclamation-triangle"
14 fixed-width 9 fixed-width
15 ></font-awesome-icon 10 ></font-awesome-icon>
16 ></span> 11 <font-awesome-icon
17 <div v-if="reviewable">Review ME!</div> 12 v-if="entry.id !== show"
13 @click="toggleDetails"
14 class="my-auto mr-1 text-info pointer"
15 icon="angle-right"
16 fixed-width
17 ></font-awesome-icon>
18 <div class="enqueued">{{ entry.enqueued | surveyDate }}</div>
19 <div class="user">{{ entry.user }}</div>
20 <div class="signer">{{ entry.signer }}</div>
21 <div>
22 <font-awesome-icon
23 v-if="entry.warnings"
24 class="ml-1 text-warning"
25 icon="exclamation-triangle"
26 fixed-width
27 ></font-awesome-icon>
28 </div>
29 <div v-if="reviewable" class="controls d-flex flex-row ml-auto">
30 <div>
31 <button
32 :class="{
33 'ml-3': true,
34 'mr-3': true,
35 btn: true,
36 'btn-outline-success': needsApproval || isRejected,
37 'btn-success': isApproved,
38 actions: true
39 }"
40 @click="toggleApproval($options.STATES.APPROVED)"
41 >
42 <font-awesome-icon
43 class="mx-auto small pointer mb-2"
44 icon="check"
45 ></font-awesome-icon>
46 </button>
47 </div>
48 <div>
49 <button
50 :class="{
51 'mr-3': true,
52 btn: true,
53 'btn-outline-danger': needsApproval || isApproved,
54 'btn-danger': isRejected,
55 actions: true
56 }"
57 @click="toggleApproval($options.STATES.REJECTED)"
58 >
59 <font-awesome-icon
60 icon="times"
61 class="small pointer mb-2"
62 ></font-awesome-icon>
63 </button>
64 </div>
65 </div>
66 </div>
67 <div class="d-flex flex-row">
68 <LogDetail v-if="show === entry.id"></LogDetail>
69 </div>
18 </div> 70 </div>
19 </template> 71 </template>
20 72
21 <script> 73 <script>
74 /* This is Free Software under GNU Affero General Public License v >= 3.0
75 * without warranty, see README.md and license for details.
76 *
77 * SPDX-License-Identifier: AGPL-3.0-or-later
78 * License-Filename: LICENSES/AGPL-3.0.txt
79 *
80 * Copyright (C) 2018 by via donau
81 * – Österreichische Wasserstraßen-Gesellschaft mbH
82 * Software engineering by Intevation GmbH
83 *
84 * Author(s):
85 * Thomas Junk <thomas.junk@intevation.de>
86 */
87 import { mapState } from "vuex";
88 import { STATES } from "@/store/imports.js";
89
22 export default { 90 export default {
23 name: "importlogentry", 91 name: "importlogentry",
24 props: ["entry"], 92 props: ["entry"],
93 components: {
94 LogDetail: () => import("./LogDetail.vue")
95 },
96 methods: {
97 toggleApproval(state) {
98 this.$store.commit("imports/toggleApprove", {
99 id: this.entry.id,
100 newStatus: state
101 });
102 },
103 toggleDetails() {
104 const { id } = this.entry;
105 if (id === this.show) {
106 this.$store.commit("imports/hideDetails");
107 } else {
108 this.$store.commit("imports/showDetailsFor", id);
109 }
110 }
111 },
25 computed: { 112 computed: {
113 ...mapState("imports", ["show"]),
114 needsApproval() {
115 return this.entry.status === STATES.NEEDSAPPROVAL;
116 },
117 isRejected() {
118 return this.entry.status === STATES.REJECTED;
119 },
120 isApproved() {
121 return this.entry.status === STATES.APPROVED;
122 },
26 reviewable() { 123 reviewable() {
27 return this.entry.state === "pending"; 124 return this.entry.state === "pending";
28 } 125 }
29 } 126 },
127 STATES: STATES
30 }; 128 };
31 </script> 129 </script>
32 130
33 <style></style> 131 <style lang="scss" scoped>
132 .enqueued {
133 width: 20%;
134 }
135 .user {
136 width: 10%;
137 }
138 .signer {
139 width: 10%;
140 }
141 button {
142 height: 19px;
143 width: 19px;
144 padding: 0.1rem;
145 }
146 </style>