Mercurial > gemma

changeset 2112:8c0a0f237c2d

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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;