<template>
  <div class="d-flex flex-column">
    <div class="d-flex flex-row justify-content-between">
      <h5><translate>PDF-Templates</translate></h5>
      <input
        @change="uploadTemplate"
        id="uploadTemplate"
        ref="uploadTemplate"
        type="file"
        style="visibility:hidden"
      />
    </div>
    <div class="mt-1 border-bottom pb-4">
      <transition name="fade">
        <table class="table table-sm table-hover" v-if="templates.length">
          <thead>
            <tr>
              <th><translate>Name</translate></th>
              <th><translate>Date</translate></th>
              <th><translate>Country</translate></th>
              <th></th>
            </tr>
          </thead>
          <transition-group name="fade" tag="tbody">
            <tr v-for="template in templates" :key="template.name">
              <td>{{ template.name }}</td>
              <td>{{ template.time }}</td>
              <td v-if="template.country">{{ template.country }}</td>
              <td v-else><i>global</i></td>
              <td class="text-right">
                <button
                  class="btn btn-sm btn-dark"
                  @click="deleteTemplate(template)"
                >
                  <font-awesome-icon icon="trash" />
                </button>
              </td>
            </tr>
          </transition-group>
        </table>
      </transition>
      <button class="btn btn-info mt-2" @click="$refs.uploadTemplate.click()">
        <font-awesome-icon
          icon="spinner"
          class="fa-spin fa-fw"
          v-if="uploading"
        />
        <font-awesome-icon icon="upload" class="fa-fw" v-else />
        <translate>Upload new template</translate>
      </button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.table th,
td {
  font-size: $smaller;
  border-top: 0px !important;
  text-align: left;
  padding: $small-offset !important;
}
</style>

<script>
/* This is Free Software under GNU Affero General Public License v >= 3.0
 * without warranty, see README.md and license for details.
 *
 * SPDX-License-Identifier: AGPL-3.0-or-later
 * License-Filename: LICENSES/AGPL-3.0.txt
 *
 * Copyright (C) 2018 by via donau
 *   – Österreichische Wasserstraßen-Gesellschaft mbH
 * Software engineering by Intevation GmbH
 *
 * Author(s):
 * Markus Kottländer <markus@intevation.de>
 */
import { HTTP } from "@/lib/http";
import { displayError, displayInfo } from "@/lib/errors.js";

export default {
  name: "pdftemplates",
  data() {
    return {
      templates: [],
      uploading: false
    };
  },
  methods: {
    uploadTemplate() {
      const reader = new FileReader();
      reader.onload = event => {
        let template;
        try {
          template = JSON.parse(event.target.result);
        } catch (e) {
          displayError({
            title: this.$gettext("Format Error"),
            message: this.$gettext(
              "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();
              displayInfo({
                message:
                  template.name + " " + this.$gettext("uploaded successfully")
              });
            })
            .catch(e => {
              const { status, data } = e.response;
              displayError({
                title: this.$gettext("Backend Error"),
                message: `${status}: ${data.message || data}`
              });
            })
            .finally(() => {
              this.uploading = false;
              this.$refs.uploadTemplate.value = null;
            });
        } else {
          displayError({
            title: this.$gettext("Format Error"),
            message: this.$gettext(
              "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: this.$gettext("Backend Error"),
            message: `${status}: ${data.message || data}`
          });
        });
    },
    deleteTemplate(template) {
      this.$store.commit("application/popup", {
        icon: "trash",
        title: this.$gettext("Delete Template"),
        content:
          this.$gettext(
            "Do you really want to delete the following template:"
          ) +
          `<br>
        <b>${template.name}</b>`,
        confirm: {
          label: this.$gettext("Delete"),
          icon: "trash",
          callback: () => {
            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);
                displayInfo({
                  message:
                    template.name + " " + this.$gettext("deleted successfully")
                });
              }
            });
          }
        },
        cancel: {
          label: this.$gettext("Cancel"),
          icon: "times"
        }
      });
    }
  },
  mounted() {
    this.loadTemplates();
  }
};
</script>