Mercurial > gemma
changeset 2112:8c0a0f237c2d
improved behavior of pdf generation form
If a template is chosen, its values are applied to the form.
If the form changes, a matching template is selected or template is set to null.
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Tue, 05 Feb 2019 09:28:26 +0100 |
parents | dd4e1f5f66b8 |
children | 28fb26536b8f |
files | client/src/components/Pdftool.vue |
diffstat | 1 files changed, 69 insertions(+), 13 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/Pdftool.vue Tue Feb 05 07:34:21 2019 +0100 +++ b/client/src/components/Pdftool.vue Tue Feb 05 09:28:26 2019 +0100 @@ -15,21 +15,34 @@ @click="$store.commit('application/showPdfTool', false)" ></font-awesome-icon> </h6> - <div class="p-3"> - <b><translate>Choose format:</translate></b> - <select v-model="form.format" class="form-control d-block w-100"> + <div class="p-3 text-left"> + <select @change="applyTemplateToForm" v-model="form.template" class="form-control d-block mb-2 w-100 font-weight-bold"> + <option :value="null"><translate>Chose preset</translate></option> + <option v-for="template in templates" :value="template.name"><translate>{{ template.name }}</translate></option> + </select> + <hr class="mb-1"> + <small class="text-muted"><translate>Format</translate></small> + <select @change="compareFormWithTemplates" v-model="form.format" class="form-control form-control-sm d-block mb-2 w-100"> <option value="landscape"><translate>landscape</translate></option> <option value="portrait"><translate>portrait</translate></option> </select> - <select v-model="form.resolution" class="form-control d-block w-100"> - <option value="80">80 dpi</option> - <option value="120">120 dpi</option> - <option value="200">200 dpi</option> - </select> - <select v-model="form.paperSize" class="form-control d-block w-100"> - <option value="a3"><translate>ISO A3</translate></option> - <option value="a4"><translate>ISO A4</translate></option> - </select> + <div class="d-flex"> + <div class="flex-fill mr-2"> + <small class="text-muted"><translate>Resolution</translate></small> + <select @change="compareFormWithTemplates" v-model="form.resolution" class="form-control form-control-sm mb-2 d-block w-100"> + <option value="80">80 dpi</option> + <option value="120">120 dpi</option> + <option value="200">200 dpi</option> + </select> + </div> + <div class="flex-fill ml-2"> + <small class="text-muted"><translate>Size</translate></small> + <select @change="compareFormWithTemplates" v-model="form.paperSize" class="form-control form-control-sm mb-2 d-block w-100"> + <option value="a3"><translate>ISO A3</translate></option> + <option value="a4"><translate>ISO A4</translate></option> + </select> + </div> + </div> <!-- <small class="d-block my-2"> <input @@ -57,7 +70,7 @@ @click="download" type="button" :disabled="!readyToGenerate" - class="btn btn-sm btn-info d-block w-100" + class="btn btn-sm btn-info d-block w-100 mt-2" > <translate>Generate PDF</translate> </button> @@ -98,11 +111,30 @@ data() { return { form: { + template: null, format: "landscape", paperSize: "a4", downloadType: "download", resolution: "120" }, + templates: [ + { + name: "Template 1", + properties: { + format: "landscape", + resolution: "80", + paperSize: "a4" + } + }, + { + name: "Template 2", + properties: { + format: "portrait", + resolution: "120", + paperSize: "a3" + } + } + ], logoImageForPDF: null, // a HTMLImageElement instance readyToGenerate: true // if the user is allowed to press the button }; @@ -115,6 +147,30 @@ ...mapState("user", ["user"]) }, methods: { + // When a template is chosen from the dropdown, its propoerties are + // applied to the rest of the form. + applyTemplateToForm() { + let template = this.templates.find(t => t.name === this.form.template); + if (template) { + this.form.format = template.properties.format; + this.form.paperSize = template.properties.paperSize; + this.form.resolution = template.properties.resolution; + } + }, + // If there's a template that matches all the form values, this template + // will be set in the dropdown. + compareFormWithTemplates() { + this.form.template = null; + this.templates.forEach(t => { + if ( + this.form.format === t.properties.format && + this.form.paperSize === t.properties.paperSize && + this.form.resolution === t.properties.resolution + ) { + this.form.template = t.name; + } + }); + }, download() { // disable button while working on it this.readyToGenerate = false;