# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1562230663 -7200
# Node ID e8a950cf6c023904af32150441c99435302f8695
# Parent  1399d31531f7f43ef12198549c020bece9304176
Move Template loading and Imageprocessing to mixin

Rationale:
1) Template loading is a process used by many components.
As such it makes sense to parametrize the URL and centralize loading.

2) Imageprocessing has to be done after each template is loaded on the client
As such it makes sense to centralize that.

To make handling easier, each (1) and (2) is in an independend Promise
to make chaining of calls easier to read.

diff -r 1399d31531f7 -r e8a950cf6c02 client/src/components/Pdftool.vue
--- a/client/src/components/Pdftool.vue	Thu Jul 04 10:50:19 2019 +0200
+++ b/client/src/components/Pdftool.vue	Thu Jul 04 10:57:43 2019 +0200
@@ -106,7 +106,7 @@
 import { getPointResolution } from "ol/proj";
 import { HTTP } from "@/lib/http";
 import { displayError } from "@/lib/errors";
-import { pdfgen } from "@/lib/mixins";
+import { pdfgen, templateLoader } from "@/lib/mixins";
 
 var paperSizes = {
   // in millimeter, landscape [width, height]
@@ -115,7 +115,7 @@
 };
 
 export default {
-  mixins: [pdfgen],
+  mixins: [pdfgen, templateLoader],
   name: "pdftool",
   data() {
     return {
@@ -211,58 +211,21 @@
     // applied to the rest of the form.
     applyTemplateToForm() {
       if (this.form.template) {
-        HTTP.get(
-          "/templates/" +
-            this.form.template.type +
-            "/" +
-            this.form.template.name,
-          {
-            headers: {
-              "X-Gemma-Auth": localStorage.getItem("token"),
-              "Content-type": "text/xml; charset=UTF-8"
-            }
-          }
+        this.loadTemplates(
+          `/templates/${this.form.template.type}/${this.form.template.name}`
         )
           .then(response => {
-            this.templateData = response.data.template_data;
-            /**
-             * In order to render the images from the template, we need to convert
-             * each image to dataURIs. Since this happens asynchronous,
-             * we need to wrap each image into its own promise and only after all are
-             * finished, we continue with the flow.
-             */
-            const imageElementLoaders = response.data.template_data.elements.reduce(
-              (o, n, i) => {
-                if (n.type === "image") {
-                  o.push(
-                    new Promise(resolve => {
-                      const image = new Image();
-                      image.onload = function() {
-                        var canvas = document.createElement("canvas");
-                        canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size
-                        canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size
-                        canvas.getContext("2d").drawImage(this, 0, 0);
-                        resolve({
-                          index: i,
-                          url: canvas.toDataURL("image/png")
-                        });
-                      };
-                      image.src = n.url;
-                    })
-                  );
-                }
-                return o;
-              },
-              []
+            this.prepareImages(response.data.template_data.elements).then(
+              values => {
+                this.templateData = response.data.template_data;
+                values.forEach(v => {
+                  response.data.template_data.elements[v.index].url = v.url;
+                });
+                this.form.format = this.templateData.properties.format;
+                this.form.paperSize = this.templateData.properties.paperSize;
+                this.form.resolution = this.templateData.properties.resolution;
+              }
             );
-            Promise.all(imageElementLoaders).then(values => {
-              values.forEach(v => {
-                response.data.template_data.elements[v.index].url = v.url;
-              });
-              this.form.format = this.templateData.properties.format;
-              this.form.paperSize = this.templateData.properties.paperSize;
-              this.form.resolution = this.templateData.properties.resolution;
-            });
           })
           .catch(e => {
             const { status, data } = e.response;
diff -r 1399d31531f7 -r e8a950cf6c02 client/src/lib/mixins.js
--- a/client/src/lib/mixins.js	Thu Jul 04 10:50:19 2019 +0200
+++ b/client/src/lib/mixins.js	Thu Jul 04 10:57:43 2019 +0200
@@ -16,6 +16,7 @@
 import jsPDF from "jspdf-yworks";
 import locale2 from "locale2";
 import { mapState } from "vuex";
+import { HTTP } from "@/lib/http";
 
 export const sortTable = {
   data() {
@@ -64,6 +65,61 @@
   }
 };
 
+export const templateLoader = {
+  methods: {
+    loadTemplates(url) {
+      return new Promise((resolve, reject) => {
+        HTTP.get(url, {
+          headers: {
+            "X-Gemma-Auth": localStorage.getItem("token"),
+            "Content-type": "text/xml; charset=UTF-8"
+          }
+        })
+          .then(response => {
+            resolve(response);
+          })
+          .catch(error => {
+            reject(error);
+          });
+      });
+    },
+    prepareImages(elements) {
+      /**
+       * In order to render the images from the template, we need to convert
+       * each image to dataURIs. Since this happens asynchronous,
+       * we need to wrap each image into its own promise and only after all are
+       * finished, we continue with the flow.
+       */
+      return new Promise(resolve => {
+        const imageElementLoaders = elements.reduce((o, n, i) => {
+          if (n.type === "image") {
+            o.push(
+              new Promise(resolve => {
+                const image = new Image();
+                image.onload = function() {
+                  var canvas = document.createElement("canvas");
+                  canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size
+                  canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size
+                  canvas.getContext("2d").drawImage(this, 0, 0);
+                  resolve({
+                    index: i,
+                    url: canvas.toDataURL("image/png")
+                  });
+                };
+                image.src = n.url;
+              })
+            );
+          }
+          return o;
+        }, []);
+        Promise.all(imageElementLoaders).then(values => {
+          resolve(values);
+        });
+      });
+    }
+  }
+};
+
 export const pdfgen = {
   computed: {
     ...mapState("application", ["logoForPDF"]),