Mercurial > gemma

changeset 2685:39a05f8c34e6 import-overview-rework

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
import_overview: Refactoring of detailed information. When the entry is opened, a request is made to retrieve the detailed information for this entry. It contains the log protocol information as well as the executive summary. This is passed down to child components of the entry.
author Thomas Junk <thomas.junk@intevation.de>
date Fri, 15 Mar 2019 13:42:49 +0100
parents 4d460b2b439f
children 47b789a27618
files client/src/components/importoverview/AdditionalDetail.vue client/src/components/importoverview/AdditionalLog.vue client/src/components/importoverview/ApprovedGaugeMeasurementDetail.vue client/src/components/importoverview/BottleneckDetail.vue client/src/components/importoverview/LogDetail.vue client/src/components/importoverview/LogEntry.vue client/src/components/importoverview/SoundingResultDetail.vue client/src/components/importoverview/StretchDetails.vue
diffstat 8 files changed, 60 insertions(+), 46 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/importoverview/AdditionalDetail.vue	Fri Mar 15 12:29:49 2019 +0100
+++ b/client/src/components/importoverview/AdditionalDetail.vue	Fri Mar 15 13:42:49 2019 +0100
@@ -2,13 +2,19 @@
   <div>
     <FairwayDimensionDetail
       :entry="entry"
+      :details="details"
       v-if="isFairwayDimension"
     ></FairwayDimensionDetail>
     <ApprovedGaugeMeasurementDetail
       :entry="entry"
+      :details="details"
       v-if="isApprovedGaugeMeasurement"
     ></ApprovedGaugeMeasurementDetail>
-    <BottleneckDetail :entry="entry" v-if="isBottleneck"></BottleneckDetail>
+    <BottleneckDetail
+      :details="details"
+      :entry="entry"
+      v-if="isBottleneck"
+    ></BottleneckDetail>
   </div>
 </template>
 
@@ -29,7 +35,7 @@
 
 export default {
   name: "additionaldetail",
-  props: ["entry"],
+  props: ["entry", "details"],
   components: {
     BottleneckDetail: () => import("./BottleneckDetail.vue"),
     ApprovedGaugeMeasurementDetail: () =>
--- a/client/src/components/importoverview/AdditionalLog.vue	Fri Mar 15 12:29:49 2019 +0100
+++ b/client/src/components/importoverview/AdditionalLog.vue	Fri Mar 15 13:42:49 2019 +0100
@@ -49,37 +49,13 @@
  * Author(s):
  * Thomas Junk <thomas.junk@intevation.de>
  */
-import { displayError } from "@/lib/errors.js";
-import { HTTP } from "@/lib/http.js";
-
 export default {
   name: "additionallogs",
-  props: ["entry"],
+  props: ["details"],
   data() {
     return {
-      logLines: []
+      logLines: this.details.entries
     };
-  },
-  methods: {
-    loadEntries() {
-      HTTP.get("/imports/" + this.entry.id, {
-        headers: { "X-Gemma-Auth": localStorage.getItem("token") }
-      })
-        .then(response => {
-          const { entries } = response.data;
-          this.logLines = entries;
-        })
-        .catch(error => {
-          const { status, data } = error.response;
-          displayError({
-            title: this.$gettext("Backend Error"),
-            message: `${status}: ${data.message || data}`
-          });
-        });
-    }
-  },
-  mounted() {
-    this.loadEntries();
   }
 };
 </script>
--- a/client/src/components/importoverview/ApprovedGaugeMeasurementDetail.vue	Fri Mar 15 12:29:49 2019 +0100
+++ b/client/src/components/importoverview/ApprovedGaugeMeasurementDetail.vue	Fri Mar 15 13:42:49 2019 +0100
@@ -1,6 +1,6 @@
 <template>
   <div class="diffs">
-    <div v-for="(result, index) in entry.summary" :key="index">
+    <div v-for="(result, index) in details.summary" :key="index">
       <div class="pl-2 d-flex flex-row">
         <div
           @click="toggleDiff(index)"
@@ -105,7 +105,7 @@
 
 export default {
   name: "agmdetails",
-  props: ["entry"],
+  props: ["entry", "details"],
   data() {
     return {
       showDiff: NODIFF
--- a/client/src/components/importoverview/BottleneckDetail.vue	Fri Mar 15 12:29:49 2019 +0100
+++ b/client/src/components/importoverview/BottleneckDetail.vue	Fri Mar 15 13:42:49 2019 +0100
@@ -73,7 +73,7 @@
 
 export default {
   name: "bottleneckdetails",
-  props: ["entry"],
+  props: ["entry", "details"],
   data() {
     return {
       bottlenecks: [],
@@ -86,7 +86,7 @@
   methods: {
     loadBottlenecks() {
       const generateFilter = () => {
-        const { bottlenecks } = this.entry.summary;
+        const { bottlenecks } = this.details.summary;
         if (bottlenecks.length === 1)
           return equalToFilter("bottleneck_id", bottlenecks[0]);
         const orExpressions = bottlenecks.map(x => {
--- a/client/src/components/importoverview/LogDetail.vue	Fri Mar 15 12:29:49 2019 +0100
+++ b/client/src/components/importoverview/LogDetail.vue	Fri Mar 15 13:42:49 2019 +0100
@@ -18,19 +18,24 @@
         ></font-awesome-icon>
         <span class="text-info"><translate>Additional Info</translate></span>
         <span class="text-info" v-if="isApprovedGaugeMeasurement">
-          ({{ entry.summary.length }})</span
+          ({{ details.summary.length }})</span
         >
         <span v-if="isBottleneck" class="text-info text-left">
-          ({{ entry.summary.bottlenecks.length }})</span
+          ({{ details.summary.bottlenecks.length }})</span
         >
         <span class="text-left" v-if="isFairwayDimension"
-          >{{ entry.summary["source-organization"] }} (LOS:
-          {{ entry.summary.los }})</span
+          >{{ details.summary["source-organization"] }} (LOS:
+          {{ details.summary.los }})</span
         >
       </div>
-      <StretchDetail v-if="isStretch" :entry="entry"></StretchDetail>
+      <StretchDetail
+        v-if="isStretch"
+        :entry="entry"
+        :details="details"
+      ></StretchDetail>
       <SoundingResultDetail
         :entry="entry"
+        :details="details"
         v-if="isSoundingResult"
       ></SoundingResultDetail>
     </div>
@@ -38,6 +43,7 @@
       v-if="entry.id === showAdditional"
       class="ml-2 d-flex flex-row"
       :entry="entry"
+      :details="details"
     ></AdditionalDetail>
     <div class="d-flex fex-row">
       <font-awesome-icon
@@ -60,7 +66,7 @@
     <AdditionalLog
       v-if="entry.id === showLogs"
       class="ml-4 d-flex flex-row mr-1"
-      :entry="entry"
+      :details="details"
     ></AdditionalLog>
   </div>
 </template>
@@ -84,7 +90,7 @@
 
 export default {
   name: "logdetail",
-  props: ["entry"],
+  props: ["entry", "details"],
   components: {
     SoundingResultDetail: () => import("./SoundingResultDetail.vue"),
     StretchDetail: () => import("./StretchDetails.vue"),
--- a/client/src/components/importoverview/LogEntry.vue	Fri Mar 15 12:29:49 2019 +0100
+++ b/client/src/components/importoverview/LogEntry.vue	Fri Mar 15 13:42:49 2019 +0100
@@ -58,7 +58,11 @@
       </div>
     </div>
     <div class="ml-1 d-flex flex-row">
-      <LogDetail :entry="entry" v-if="show === entry.id"></LogDetail>
+      <LogDetail
+        :entry="entry"
+        :details="details"
+        v-if="show === entry.id"
+      ></LogDetail>
     </div>
   </div>
 </template>
@@ -79,10 +83,32 @@
  */
 import { mapState } from "vuex";
 import { STATES } from "@/store/imports.js";
+import { displayError } from "@/lib/errors.js";
+import { HTTP } from "@/lib/http.js";
 
 export default {
   name: "importlogentry",
   props: ["entry"],
+  data() {
+    return {
+      details: null
+    };
+  },
+  mounted() {
+    HTTP.get("/imports/" + this.entry.id, {
+      headers: { "X-Gemma-Auth": localStorage.getItem("token") }
+    })
+      .then(response => {
+        this.details = response.data;
+      })
+      .catch(error => {
+        const { status, data } = error.response;
+        displayError({
+          title: this.$gettext("Backend Error"),
+          message: `${status}: ${data.message || data}`
+        });
+      });
+  },
   components: {
     LogDetail: () => import("./LogDetail.vue")
   },
--- a/client/src/components/importoverview/SoundingResultDetail.vue	Fri Mar 15 12:29:49 2019 +0100
+++ b/client/src/components/importoverview/SoundingResultDetail.vue	Fri Mar 15 13:42:49 2019 +0100
@@ -2,7 +2,7 @@
   <div>
     <span class="empty"></span>
     <a @click="zoomTo()" class="text-info pointer">
-      {{ entry.summary.bottleneck }}
+      {{ details.summary.bottleneck }}
     </a>
   </div>
 </template>
@@ -23,7 +23,7 @@
  */
 export default {
   name: "soundingresultdetails",
-  props: ["entry"],
+  props: ["entry", "details"],
   methods: {
     moveMap(coordinates) {
       this.$store.commit("map/moveMap", {
@@ -33,7 +33,7 @@
       });
     },
     zoomTo() {
-      const { lat, lon, bottleneck, date } = this.entry.summary;
+      const { lat, lon, bottleneck, date } = this.details.summary;
       const coordinates = [lat, lon];
       this.moveMap(coordinates);
       this.$store
--- a/client/src/components/importoverview/StretchDetails.vue	Fri Mar 15 12:29:49 2019 +0100
+++ b/client/src/components/importoverview/StretchDetails.vue	Fri Mar 15 13:42:49 2019 +0100
@@ -2,7 +2,7 @@
   <div>
     <span class="empty">&nbsp;</span>
     <a @click="zoomToStretch()" class="text-info pointer">{{
-      entry.summary.stretch
+      details.summary.stretch
     }}</a>
   </div>
 </template>
@@ -26,7 +26,7 @@
 
 export default {
   name: "stretchdetails",
-  props: ["entry"],
+  props: ["entry", "details"],
   methods: {
     moveToExtent(feature) {
       this.$store.commit("map/moveToExtent", {
@@ -36,7 +36,7 @@
       });
     },
     zoomToStretch() {
-      const name = this.entry.summary.stretch;
+      const name = this.details.summary.stretch;
       this.$store.commit("map/setLayerVisible", LAYERS.STRETCHES);
       this.$store
         .dispatch("imports/loadStretch", name)