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 {