Mercurial > gemma
diff 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 |
line wrap: on
line diff
--- a/client/src/components/staging/StagingDetail.vue Thu Dec 20 16:00:50 2018 +0100 +++ b/client/src/components/staging/StagingDetail.vue Thu Dec 20 16:45:26 2018 +0100 @@ -1,5 +1,5 @@ <template> - <div class="pb-2 d-flex flex-column w-100"> + <div :class="detail"> <div class="d-flex flex-row"> <div class="mt-auto d-flex flex-row mb-auto small name text-left"> <a @@ -149,6 +149,7 @@ import { WFS } from "ol/format.js"; import { or as orFilter, equalTo as equalToFilter } from "ol/format/filter.js"; import { displayError } from "@/lib/errors.js"; +import { mapState } from "vuex"; import center from "@turf/center"; export default { @@ -164,9 +165,37 @@ }, mounted() { this.bottlenecks = []; + if (this.open) this.showDetails(); + }, + computed: { + ...mapState("imports", ["importToReview"]), + open() { + return this.importToReview == this.data.id; + }, + detail() { + return [ + "pb-2", + "pt-2", + "d-flex", + "flex-column", + "w-100", + { + highlight: this.open && this.needsApproval(this.data) + } + ]; + } + }, + watch: { + open() { + const { review } = this.$route.query; + if (review) { + this.showDetails(); + } + } }, methods: { showDetails() { + if (this.data.kind.toUpperCase() !== "BN") return; if (this.show) { this.show = false; return; @@ -267,6 +296,10 @@ </script> <style lang="scss" scoped> +.highlight { + background-color: #f9f9f9; +} + .condensed { font-stretch: condensed; }