--- a/client/src/components/systemconfiguration/PDFTemplates.vue	Wed Feb 13 18:18:41 2019 +0100
+++ b/client/src/components/systemconfiguration/PDFTemplates.vue	Thu Feb 14 08:56:32 2019 +0100
@@ -4,8 +4,8 @@
       <h5><translate>PDF-Templates</translate></h5>
       <input
         @change="upload"
-        id="uploadPDFTemplate"
-        ref="uploadPDFTemplate"
+        id="uploadTemplate"
+        ref="uploadTemplate"
         type="file"
         style="visibility:hidden"
       />
@@ -20,7 +20,7 @@
           </tr>
         </thead>
         <transition-group name="list-fade" tag="tbody">
-          <tr v-for="template in pdfTemplates" :key="template.name">
+          <tr v-for="template in templates" :key="template.name">
             <td>{{ template.name }}</td>
             <td>{{ template.time }}</td>
             <td class="text-right">
@@ -40,10 +40,7 @@
           </tr>
         </transition-group>
       </table>
-      <button
-        class="btn btn-sm btn-info"
-        @click="$refs.uploadPDFTemplate.click()"
-      >
+      <button class="btn btn-sm btn-info" @click="$refs.uploadTemplate.click()">
         <font-awesome-icon
           icon="spinner"
           class="fa-spin fa-fw"
@@ -108,39 +105,107 @@
  * Author(s):
  * Markus Kottländer <markus@intevation.de>
  */
-import { mapState } from "vuex";
+import { HTTP } from "@/lib/http";
+import { displayError } from "@/lib/errors.js";
 
 export default {
   name: "pdftemplates",
   data() {
     return {
+      templates: [],
       uploading: false,
       templateToDelete: "",
       showDeleteTemplatePrompt: false
     };
   },
-  computed: {
-    ...mapState("application", ["pdfTemplates"])
-  },
   methods: {
     upload() {
-      this.uploading = true;
-      this.$store
-        .dispatch(
-          "application/uploadPDFTemplate",
-          this.$refs.uploadPDFTemplate.files
-        )
-        .finally(() => {
-          this.uploading = false;
+      const reader = new FileReader();
+      reader.onload = event => {
+        let template;
+        try {
+          template = JSON.parse(event.target.result);
+        } catch (e) {
+          displayError({
+            title: "Format Error",
+            message: "Uploaded file does not contain valid json data."
+          });
+        }
+        if (template.name) {
+          this.uploading = true;
+          HTTP.post(
+            "/templates/print/" + template.name,
+            {
+              template_name: template.name,
+              template_data: template
+            },
+            {
+              headers: {
+                "X-Gemma-Auth": localStorage.getItem("token"),
+                "Content-type": "text/xml; charset=UTF-8"
+              }
+            }
+          )
+            .then(() => {
+              this.loadTemplates();
+            })
+            .catch(e => {
+              const { status, data } = e.response;
+              displayError({
+                title: "Backend Error",
+                message: `${status}: ${data.message || data}`
+              });
+            })
+            .finally(() => {
+              this.uploading = false;
+            });
+        } else {
+          displayError({
+            title: "Format Error",
+            message: "The provided template has no name property."
+          });
+        }
+      };
+      reader.onerror = error => console.log(error);
+      reader.readAsText(this.$refs.uploadTemplate.files[0]);
+    },
+    loadTemplates() {
+      HTTP.get("/templates/print", {
+        headers: {
+          "X-Gemma-Auth": localStorage.getItem("token"),
+          "Content-type": "text/xml; charset=UTF-8"
+        }
+      })
+        .then(response => {
+          this.templates = response.data;
+        })
+        .catch(e => {
+          const { status, data } = e.response;
+          displayError({
+            title: "Backend Error",
+            message: `${status}: ${data.message || data}`
+          });
         });
     },
     remove(template) {
       this.showDeleteTemplatePrompt = false;
-      this.$store.dispatch("application/removePDFTemplate", template);
+      HTTP.delete("/templates/print/" + template.name, {
+        headers: {
+          "X-Gemma-Auth": localStorage.getItem("token"),
+          "Content-type": "text/xml; charset=UTF-8"
+        }
+      }).then(() => {
+        let removeIndex = this.templates.findIndex(
+          t => t.name === template.name
+        );
+        if (removeIndex !== -1) {
+          this.templates.splice(removeIndex, 1);
+        }
+      });
     }
   },
   mounted() {
-    this.$store.dispatch("application/loadPdfTemplates");
+    this.loadTemplates();
   }
 };
 </script>