Mercurial > gemma
comparison client/src/components/staging/StagingDetail.vue @ 1650:90211725e4a9
highlighing feature for staging area
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Thu, 20 Dec 2018 16:45:26 +0100 |
parents | 1fde2f48977b |
children | 80d3ac4328fe |
comparison
equal
deleted
inserted
replaced
1649:0324d331e9df | 1650:90211725e4a9 |
---|---|
1 <template> | 1 <template> |
2 <div class="pb-2 d-flex flex-column w-100"> | 2 <div :class="detail"> |
3 <div class="d-flex flex-row"> | 3 <div class="d-flex flex-row"> |
4 <div class="mt-auto d-flex flex-row mb-auto small name text-left"> | 4 <div class="mt-auto d-flex flex-row mb-auto small name text-left"> |
5 <a | 5 <a |
6 v-if="!isBottleneck(data.kind.toUpperCase())" | 6 v-if="!isBottleneck(data.kind.toUpperCase())" |
7 @click="zoomTo()" | 7 @click="zoomTo()" |
147 import { STATES } from "@/store/imports.js"; | 147 import { STATES } from "@/store/imports.js"; |
148 import { HTTP } from "@/lib/http"; | 148 import { HTTP } from "@/lib/http"; |
149 import { WFS } from "ol/format.js"; | 149 import { WFS } from "ol/format.js"; |
150 import { or as orFilter, equalTo as equalToFilter } from "ol/format/filter.js"; | 150 import { or as orFilter, equalTo as equalToFilter } from "ol/format/filter.js"; |
151 import { displayError } from "@/lib/errors.js"; | 151 import { displayError } from "@/lib/errors.js"; |
152 import { mapState } from "vuex"; | |
152 import center from "@turf/center"; | 153 import center from "@turf/center"; |
153 | 154 |
154 export default { | 155 export default { |
155 name: "stagingdetail", | 156 name: "stagingdetail", |
156 props: ["data"], | 157 props: ["data"], |
162 bottlenecks: [] | 163 bottlenecks: [] |
163 }; | 164 }; |
164 }, | 165 }, |
165 mounted() { | 166 mounted() { |
166 this.bottlenecks = []; | 167 this.bottlenecks = []; |
168 if (this.open) this.showDetails(); | |
169 }, | |
170 computed: { | |
171 ...mapState("imports", ["importToReview"]), | |
172 open() { | |
173 return this.importToReview == this.data.id; | |
174 }, | |
175 detail() { | |
176 return [ | |
177 "pb-2", | |
178 "pt-2", | |
179 "d-flex", | |
180 "flex-column", | |
181 "w-100", | |
182 { | |
183 highlight: this.open && this.needsApproval(this.data) | |
184 } | |
185 ]; | |
186 } | |
187 }, | |
188 watch: { | |
189 open() { | |
190 const { review } = this.$route.query; | |
191 if (review) { | |
192 this.showDetails(); | |
193 } | |
194 } | |
167 }, | 195 }, |
168 methods: { | 196 methods: { |
169 showDetails() { | 197 showDetails() { |
198 if (this.data.kind.toUpperCase() !== "BN") return; | |
170 if (this.show) { | 199 if (this.show) { |
171 this.show = false; | 200 this.show = false; |
172 return; | 201 return; |
173 } | 202 } |
174 if (this.bottlenecks.length > 0) { | 203 if (this.bottlenecks.length > 0) { |
265 STATES: STATES | 294 STATES: STATES |
266 }; | 295 }; |
267 </script> | 296 </script> |
268 | 297 |
269 <style lang="scss" scoped> | 298 <style lang="scss" scoped> |
299 .highlight { | |
300 background-color: #f9f9f9; | |
301 } | |
302 | |
270 .condensed { | 303 .condensed { |
271 font-stretch: condensed; | 304 font-stretch: condensed; |
272 } | 305 } |
273 | 306 |
274 .empty { | 307 .empty { |