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;
 }