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