Mercurial > gemma
changeset 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 | 5b9ba358a4e7 |
| children | e1cf039ea25a |
| files | client/src/components/Pdftool.vue client/src/components/fairway/AvailableFairwayDepth.vue client/src/components/fairway/AvailableFairwayDepthLNWL.vue client/src/components/fairway/Fairwayprofile.vue client/src/components/gauge/HydrologicalConditions.vue client/src/components/gauge/Waterlevel.vue client/src/lib/mixins.js |
| diffstat | 7 files changed, 62 insertions(+), 41 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/Pdftool.vue Tue Oct 15 16:28:46 2019 +0200 +++ b/client/src/components/Pdftool.vue Tue Oct 15 17:16:36 2019 +0200 @@ -211,7 +211,7 @@ if (this.bottleneckForPrint) { // TODO: Check if the view contains the selected bottleneck // to avoid including bottleneck info in pdf in case view has changed to another location - filename = `BN-${sanitize(this.bottleneckForPrint)}`; + filename = `BN-${sanitize(this.bottleneckForPrint).replace(/ /g, "-")}`; if (this.selectedSurvey) { filename += "-sr" + this.selectedSurvey.date_info.replace(/-/g, ""); }
--- a/client/src/components/fairway/AvailableFairwayDepth.vue Tue Oct 15 16:28:46 2019 +0200 +++ b/client/src/components/fairway/AvailableFairwayDepth.vue Tue Oct 15 17:16:36 2019 +0200 @@ -207,11 +207,12 @@ }, csvFileName() { if (!this.frequencyD) return; - return `${this.$gettext("fairwayavailability")}-${ - this.featureName - }-${filters.surveyDate(this.fromDate)}-${filters.surveyDate( - this.toDate - )}-${this.$gettext(this.frequencyD)}-.csv`; + return ( + this.downloadFilename( + this.$gettext("FairwayAvailability"), + this.featureName + ) + ".csv" + ); }, frequencyToRange() { if (!this.frequencyD) return; @@ -283,7 +284,12 @@ templateData: this.templateData, diagramTitle: title }); - this.pdf.doc.save(`Available Fairway Depth: ${this.featureName}`); + this.pdf.doc.save( + this.downloadFilename( + this.$gettext("FairwayAvailability"), + this.featureName + ) + ".pdf" + ); }, addDiagramLegend(position, offset, color) { let x = offset.x,
--- a/client/src/components/fairway/AvailableFairwayDepthLNWL.vue Tue Oct 15 16:28:46 2019 +0200 +++ b/client/src/components/fairway/AvailableFairwayDepthLNWL.vue Tue Oct 15 17:16:36 2019 +0200 @@ -91,7 +91,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"; export default { @@ -207,11 +206,12 @@ }, csvFileName() { if (!this.frequencyD) return; - return `${this.$gettext("fairwayavailabilityLNWL")}-${ - this.featureName - }-${filters.surveyDate(this.fromDate)}-${filters.surveyDate( - this.toDate - )}-${this.$gettext(this.frequencyD)}-.csv`; + return ( + this.downloadFilename( + this.$gettext("FairwayAvailabilityVsLNWL"), + this.featureName + ) + ".csv" + ); }, availability() { return this.plainAvailability; @@ -293,10 +293,12 @@ templateData: this.templateData, diagramTitle: title }); - const filename = `AFDLNWL-${sanitize( - this.featureName - )}-${this.dateForPDF()}.pdf`; - this.pdf.doc.save(filename); + this.pdf.doc.save( + this.downloadFilename( + this.$gettext("FairwayAvailabilityVsLNWL"), + this.featureName + ) + ".pdf" + ); }, addDiagramLegend(position, offset, color) { let x = offset.x,
--- a/client/src/components/fairway/Fairwayprofile.vue Tue Oct 15 16:28:46 2019 +0200 +++ b/client/src/components/fairway/Fairwayprofile.vue Tue Oct 15 17:16:36 2019 +0200 @@ -156,7 +156,6 @@ import { HTTP } from "@/lib/http"; import { displayError } from "@/lib/errors"; import { defaultDiagramTemplate } from "@/lib/DefaultDiagramTemplate"; -import sanitize from "sanitize-filename"; const GROUND_COLOR = "#4A2F06"; const WATER_COLOR = "#005DFF"; @@ -335,10 +334,12 @@ templateData: this.templateData, diagramTitle: fairwayInfo }); - const filename = `Fairwayprofile-${sanitize( - this.selectedBottleneck - )}-${this.dateForPDF()}.pdf`; - this.pdf.doc.save(filename); + this.pdf.doc.save( + this.downloadFilename( + this.$gettext("Fairwayprofile"), + this.selectedBottleneck + ) + ".pdf" + ); }, // Diagram legend
--- a/client/src/components/gauge/HydrologicalConditions.vue Tue Oct 15 16:28:46 2019 +0200 +++ b/client/src/components/gauge/HydrologicalConditions.vue Tue Oct 15 17:16:36 2019 +0200 @@ -117,7 +117,6 @@ import { displayError } from "@/lib/errors"; import { defaultDiagramTemplate } from "@/lib/DefaultDiagramTemplate"; import { localeDateString } from "@/lib/datelocalization"; -import sanitize from "sanitize-filename"; export default { mixins: [diagram, pdfgen, templateLoader], @@ -166,9 +165,12 @@ }, csvFileName() { if (!this.selectedGaugeD || !this.longtermIntervalD) return; - return `${this.$gettext("hydrological-conditions")}-${ - this.selectedGaugeD.properties.objname - }-${this.longtermIntervalD.join(" - ")}.csv`; + return ( + this.downloadFilename( + this.$gettext("HydrologicalCondition"), + this.selectedGaugeD.properties.objname + ) + ".csv" + ); }, csvData() { if (!this.longtermIntervalD || !this.yearCompareD) return; @@ -228,15 +230,16 @@ let diagramTitle = `${this.selectedGaugeD.properties.objname} (${ this.isrsInfo(this.selectedGaugeD).orc }): Hydrological Conditions ${this.longtermIntervalD.join(" - ")}`; - this.generatePDF({ templateData: this.templateData, diagramTitle: diagramTitle }); - const filename = `HydrologicalCondition-${sanitize( - this.selectedGaugeD.properties.objname - )}-${this.dateForPDF()}.pdf`; - this.pdf.doc.save(filename); + this.pdf.doc.save( + this.downloadFilename( + this.$gettext("HydrologicalCondition"), + this.selectedGaugeD.properties.objname + ) + ".pdf" + ); }, applyChange() { if (this.form.template.hasOwnProperty("properties")) {
--- 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")) {
--- a/client/src/lib/mixins.js Tue Oct 15 16:28:46 2019 +0200 +++ b/client/src/lib/mixins.js Tue Oct 15 17:16:36 2019 +0200 @@ -19,6 +19,7 @@ import { mapState } from "vuex"; import { HTTP } from "@/lib/http"; import * as d3 from "d3"; +import sanitize from "sanitize-filename"; /*eslint no-unused-vars: ["error", { "varsIgnorePattern": "[debugSVG|_]" }]*/ const debugSVG = ({ svg, svgWidth, svgHeight }) => { @@ -95,6 +96,12 @@ export const templateLoader = { methods: { + downloadFilename(type, name) { + return `${type}-${sanitize(name).replace( + / /g, + "-" + )}-${this.dateForPDF()}`; + }, loadTemplates(url) { return new Promise((resolve, reject) => { HTTP.get(url, {