diff client/src/components/gauge/Waterlevel.vue @ 4677:fa55e48bbca1

client: improve filename generation for downloads * unify filename for the generated csv files * move function to mixins.js * mark strings in filename for translations * replace whitespace with "-"
author Fadi Abbud <fadi.abbud@intevation.de>
date Tue, 15 Oct 2019 17:16:36 +0200
parents c47c8085cc7e
children ce55f15e25e0
line wrap: on
line diff
--- a/client/src/components/gauge/Waterlevel.vue	Tue Oct 15 16:28:46 2019 +0200
+++ b/client/src/components/gauge/Waterlevel.vue	Tue Oct 15 17:16:36 2019 +0200
@@ -126,7 +126,6 @@
 import { HTTP } from "@/lib/http";
 import { displayError } from "@/lib/errors";
 import { defaultDiagramTemplate } from "@/lib/DefaultDiagramTemplate";
-import sanitize from "sanitize-filename";
 import { localeDateString } from "@/lib/datelocalization";
 // we should load only d3 modules we need but for now we'll go with the lazy way
 // https://www.giacomodebidda.com/how-to-import-d3-plugins-with-webpack/
@@ -185,11 +184,12 @@
     },
     csvFileName() {
       if (!this.dateFromD || !this.dateToD) return "";
-      return `${this.$gettext("waterlevels")}-${
-        this.selectedGauge.properties.objname
-      }-${this.dateFromD.toISOString().split("T")[0]}-${
-        this.dateToD.toISOString().split("T")[0]
-      }.csv`;
+      return (
+        this.downloadFilename(
+          this.$gettext("Waterlevel"),
+          this.selectedGauge.properties.objname
+        ) + ".csv"
+      );
     },
     hasPredictions() {
       return this.waterlevels.find(d => d.predicted);
@@ -237,10 +237,12 @@
         templateData: this.templateData,
         diagramTitle: diagramTitle
       });
-      const filename = `Waterlevel-${sanitize(
-        this.selectedGauge.properties.objname
-      )}-${this.dateForPDF()}.pdf`;
-      this.pdf.doc.save(filename);
+      this.pdf.doc.save(
+        this.downloadFilename(
+          this.$gettext("Waterlevel"),
+          this.selectedGauge.properties.objname
+        ) + ".pdf"
+      );
     },
     applyChange() {
       if (this.form.template.hasOwnProperty("properties")) {