Mercurial > gemma

changeset 2875:84effca50751

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: importoverview: cleaned up code
author Markus Kottlaender <markus@intevation.de>
date Mon, 01 Apr 2019 12:53:03 +0200
parents b9a6abef9f1c
children 0e0cc65d3479
files client/src/components/importoverview/ImportOverview.vue client/src/components/importoverview/LogDetail.vue client/src/components/importoverview/LogEntry.vue
diffstat 3 files changed, 100 insertions(+), 109 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/importoverview/ImportOverview.vue	Mon Apr 01 11:51:03 2019 +0200
+++ b/client/src/components/importoverview/ImportOverview.vue	Mon Apr 01 12:53:03 2019 +0200
@@ -126,7 +126,6 @@
 import { STATES } from "@/store/imports";
 import { sortTable } from "@/lib/mixins";
 import { HTTP } from "@/lib/http.js";
-
 import {
   startOfDay,
   startOfHour,
@@ -137,23 +136,23 @@
   format
 } from "date-fns";
 
+const LAST_HOUR = "lasthour";
+const TODAY = "today";
+const LAST_7_DAYS = "lastsevendays";
+const LAST_30_DAYS = "lastthirtydays";
+
 export default {
-  name: "importoverview",
-  mixins: [sortTable],
   components: {
     Filters: () => import("./Filters.vue"),
     LogEntry: () => import("./LogEntry.vue")
   },
+  mixins: [sortTable],
   data() {
     return {
       loading: false,
-      selectedInterval: this.$options.LAST_HOUR
+      selectedInterval: LAST_HOUR
     };
   },
-  LAST_HOUR: "lasthour",
-  TODAY: "today",
-  LAST_7_DAYS: "lastsevendays",
-  LAST_30_DAYS: "lastthirtydays",
   computed: {
     ...mapState("application", ["searchQuery"]),
     ...mapState("imports", [
@@ -191,6 +190,58 @@
       return [this.startDate, this.endDate];
     }
   },
+  watch: {
+    $route() {
+      const { id } = this.$route.params;
+      if (id) this.showSingleRessource(id);
+    },
+    selectedInterval() {
+      const now = new Date();
+      switch (this.selectedInterval) {
+        case LAST_HOUR:
+          this.$store.commit("imports/setStartDate", startOfHour(now));
+          this.$store.commit("imports/setEndDate", now);
+          break;
+        case TODAY:
+          this.$store.commit("imports/setStartDate", startOfDay(now));
+          this.$store.commit("imports/setEndDate", now);
+          break;
+        case LAST_7_DAYS:
+          this.$store.commit(
+            "imports/setStartDate",
+            subDays(startOfDay(now), 7)
+          );
+          this.$store.commit("imports/setEndDate", now);
+          break;
+        case LAST_30_DAYS:
+          this.$store.commit(
+            "imports/setStartDate",
+            subDays(startOfDay(now), 30)
+          );
+          this.$store.commit("imports/setEndDate", now);
+          break;
+      }
+      this.loadLogs();
+    },
+    imports() {
+      if (this.imports.length == 0) {
+        if (this.next) {
+          const [start, end] = this.determineInterval(this.next);
+          this.$store.commit("imports/setStartDate", start);
+          this.$store.commit("imports/setEndDate", end);
+          this.loadLogs();
+        } else if (this.prev) {
+          const [start, end] = this.determineInterval(this.prev);
+          this.$store.commit("imports/setStartDate", start);
+          this.$store.commit("imports/setEndDate", end);
+          this.loadLogs();
+        }
+      }
+    },
+    filters() {
+      this.loadLogs();
+    }
+  },
   methods: {
     showSingleRessource(id) {
       id = id * 1;
@@ -229,19 +280,19 @@
     determineInterval(pointInTime) {
       let start, end;
       switch (this.selectedInterval) {
-        case this.$options.LAST_HOUR:
+        case LAST_HOUR:
           start = startOfHour(pointInTime);
           end = endOfHour(pointInTime);
           break;
-        case this.$options.TODAY:
+        case TODAY:
           start = startOfDay(pointInTime);
           end = endOfDay(pointInTime);
           break;
-        case this.$options.LAST_7_DAYS:
+        case LAST_7_DAYS:
           start = startOfDay(pointInTime);
           end = endOfDay(addDays(start, 7));
           break;
-        case this.$options.LAST_30_DAYS:
+        case LAST_30_DAYS:
           start = startOfDay(pointInTime);
           end = endOfDay(addDays(start, 30));
           break;
@@ -376,58 +427,6 @@
       });
     }
   },
-  watch: {
-    $route() {
-      const { id } = this.$route.params;
-      if (id) this.showSingleRessource(id);
-    },
-    selectedInterval() {
-      const now = new Date();
-      switch (this.selectedInterval) {
-        case this.$options.LAST_HOUR:
-          this.$store.commit("imports/setStartDate", startOfHour(now));
-          this.$store.commit("imports/setEndDate", now);
-          break;
-        case this.$options.TODAY:
-          this.$store.commit("imports/setStartDate", startOfDay(now));
-          this.$store.commit("imports/setEndDate", now);
-          break;
-        case this.$options.LAST_7_DAYS:
-          this.$store.commit(
-            "imports/setStartDate",
-            subDays(startOfDay(now), 7)
-          );
-          this.$store.commit("imports/setEndDate", now);
-          break;
-        case this.$options.LAST_30_DAYS:
-          this.$store.commit(
-            "imports/setStartDate",
-            subDays(startOfDay(now), 30)
-          );
-          this.$store.commit("imports/setEndDate", now);
-          break;
-      }
-      this.loadLogs();
-    },
-    imports() {
-      if (this.imports.length == 0) {
-        if (this.next) {
-          const [start, end] = this.determineInterval(this.next);
-          this.$store.commit("imports/setStartDate", start);
-          this.$store.commit("imports/setEndDate", end);
-          this.loadLogs();
-        } else if (this.prev) {
-          const [start, end] = this.determineInterval(this.prev);
-          this.$store.commit("imports/setStartDate", start);
-          this.$store.commit("imports/setEndDate", end);
-          this.loadLogs();
-        }
-      }
-    },
-    filters() {
-      this.loadLogs();
-    }
-  },
   mounted() {
     const { id } = this.$route.params;
     if (!id) {
--- a/client/src/components/importoverview/LogDetail.vue	Mon Apr 01 11:51:03 2019 +0200
+++ b/client/src/components/importoverview/LogDetail.vue	Mon Apr 01 12:53:03 2019 +0200
@@ -94,36 +94,13 @@
 import { mapState } from "vuex";
 
 export default {
-  name: "logdetail",
-  props: ["entry"],
   components: {
     SoundingResultDetail: () => import("./SoundingResultDetail.vue"),
     StretchDetail: () => import("./StretchDetails.vue"),
     AdditionalDetail: () => import("./AdditionalDetail.vue"),
     AdditionalLog: () => import("./AdditionalLog.vue")
   },
-  mounted() {
-    if (this.entry.state === "pending") {
-      this.$store.commit("imports/showAdditionalInfoFor", this.entry.id);
-    }
-    this.$store.commit("imports/showAdditionalLogsFor", this.entry.id);
-  },
-  methods: {
-    toggleAdditionalInfo() {
-      if (this.entry.id === this.showAdditional) {
-        this.$store.commit("imports/hideAdditionalInfo");
-      } else {
-        this.$store.commit("imports/showAdditionalInfoFor", this.entry.id);
-      }
-    },
-    toggleAdditionalLogging() {
-      if (this.entry.id === this.showLogs) {
-        this.$store.commit("imports/hideAdditionalLogs");
-      } else {
-        this.$store.commit("imports/showAdditionalLogsFor", this.entry.id);
-      }
-    }
-  },
+  props: ["entry"],
   computed: {
     ...mapState("imports", ["showAdditional", "showLogs", "details"]),
     kind() {
@@ -152,6 +129,28 @@
     isSoundingResult() {
       return this.kind === "SR";
     }
+  },
+  methods: {
+    toggleAdditionalInfo() {
+      if (this.entry.id === this.showAdditional) {
+        this.$store.commit("imports/hideAdditionalInfo");
+      } else {
+        this.$store.commit("imports/showAdditionalInfoFor", this.entry.id);
+      }
+    },
+    toggleAdditionalLogging() {
+      if (this.entry.id === this.showLogs) {
+        this.$store.commit("imports/hideAdditionalLogs");
+      } else {
+        this.$store.commit("imports/showAdditionalLogsFor", this.entry.id);
+      }
+    }
+  },
+  mounted() {
+    if (this.entry.state === "pending") {
+      this.$store.commit("imports/showAdditionalInfoFor", this.entry.id);
+    }
+    this.$store.commit("imports/showAdditionalLogsFor", this.entry.id);
   }
 };
 </script>
--- a/client/src/components/importoverview/LogEntry.vue	Mon Apr 01 11:51:03 2019 +0200
+++ b/client/src/components/importoverview/LogEntry.vue	Mon Apr 01 12:53:03 2019 +0200
@@ -112,16 +112,22 @@
 import { HTTP } from "@/lib/http.js";
 
 export default {
-  name: "importlogentry",
-  props: ["entry"],
-  data() {
-    return {
-      details: null
-    };
-  },
   components: {
     LogDetail: () => import("./LogDetail.vue")
   },
+  props: ["entry"],
+  computed: {
+    ...mapState("imports", ["show"]),
+    needsApproval() {
+      return this.entry.status === STATES.NEEDSAPPROVAL;
+    },
+    isRejected() {
+      return this.entry.status === STATES.REJECTED;
+    },
+    isApproved() {
+      return this.entry.status === STATES.APPROVED;
+    }
+  },
   methods: {
     toggleApproval(state) {
       this.$store.commit("imports/toggleApprove", {
@@ -152,19 +158,6 @@
           });
       }
     }
-  },
-  computed: {
-    ...mapState("imports", ["show"]),
-    needsApproval() {
-      return this.entry.status === STATES.NEEDSAPPROVAL;
-    },
-    isRejected() {
-      return this.entry.status === STATES.REJECTED;
-    },
-    isApproved() {
-      return this.entry.status === STATES.APPROVED;
-    }
-  },
-  STATES: STATES
+  }
 };
 </script>