<template>
  <div class="logentry">
    <div class="row no-gutters text-left">
      <div style="width: 4%;" class="text-center">
        <font-awesome-icon
          @click="toggleDetails"
          class="my-auto mr-1 text-info pointer"
          :icon="entry.id === show ? 'angle-down' : 'angle-right'"
          fixed-width
        ></font-awesome-icon>
      </div>
      <div style="width: 5%; padding-right: 10px;" class="text-right">
        {{ entry.id }}
      </div>
      <div style="width: 8%;" class="text-center">
        {{ entry.kind.toUpperCase() }}
      </div>
      <div style="width: 25%;" class="text-center">
        {{ entry.enqueued | dateTime }}
      </div>
      <div style="width: 16%;padding-right: 10px;" class="text-center truncate">
        {{ entry.user }}
      </div>
      <div style="width: 16%;padding-left: 20px;" class="text-left truncate">
        {{ entry.signer }}
      </div>
      <div style="width: 9%;" class="text-left">
        <span v-if="entry.state === 'failed'" class="text-danger">{{
          entry.state
        }}</span>
        <span v-else>{{ entry.state }}</span>
      </div>
      <div style="width: 2%;" class="text-left">
        <font-awesome-icon
          v-if="entry.warnings"
          class="ml-1 text-warning"
          icon="exclamation-triangle"
          fixed-width
        ></font-awesome-icon>
      </div>
      <div style="width: 8%" class="text-right">
        <div v-if="entry.state === 'pending'">
          <button
            :class="['actions approved', { active: isApproved }]"
            @click="toggleApproval($options.STATES.APPROVED)"
          >
            <font-awesome-icon
              class="small pointer"
              icon="check"
            ></font-awesome-icon>
          </button>
          <button
            :class="['actions rejected', { active: isRejected }]"
            @click="toggleApproval($options.STATES.REJECTED)"
          >
            <font-awesome-icon
              icon="times"
              class="small pointer"
            ></font-awesome-icon>
          </button>
        </div>
      </div>
    </div>
    <div class="ml-1 d-flex flex-row">
      <LogDetail
        :entry="entry"
        :details="details"
        v-if="show === entry.id"
      ></LogDetail>
    </div>
  </div>
</template>

<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):
 * Thomas Junk <thomas.junk@intevation.de>
 */
import { mapState } from "vuex";
import { STATES } from "@/store/imports.js";
import { displayError } from "@/lib/errors.js";
import { HTTP } from "@/lib/http.js";

export default {
  name: "importlogentry",
  props: ["entry"],
  data() {
    return {
      details: null
    };
  },
  mounted() {
    HTTP.get("/imports/" + this.entry.id, {
      headers: { "X-Gemma-Auth": localStorage.getItem("token") }
    })
      .then(response => {
        this.details = response.data;
      })
      .catch(error => {
        const { status, data } = error.response;
        displayError({
          title: this.$gettext("Backend Error"),
          message: `${status}: ${data.message || data}`
        });
      });
  },
  components: {
    LogDetail: () => import("./LogDetail.vue")
  },
  methods: {
    toggleApproval(state) {
      this.$store.commit("imports/toggleApprove", {
        id: this.entry.id,
        newStatus: state
      });
    },
    toggleDetails() {
      const { id } = this.entry;
      if (id === this.show) {
        this.$store.commit("imports/hideDetails");
        this.$store.commit("imports/hideAdditionalInfo");
        this.$store.commit("imports/hideAdditionalLogs");
      } else {
        this.$store.commit("imports/showDetailsFor", id);
      }
    }
  },
  computed: {
    ...mapState("imports", ["show"]),
    needsApproval() {
      return this.entry.status === STATES.NEEDSAPPROVAL;
    },
    isRejected() {
      return this.entry.status === STATES.REJECTED;
    },
    isApproved() {
      return this.entry.status === STATES.APPROVED;
    }
  },
  STATES: STATES
};
</script>

<style lang="sass" scoped>
.logentry
  font-size: 80%
  &:hover
    background: #fafafa
  .actions
    height: 100%
    width: 22px
    border: 0
    background: transparent
    border-left: 1px solid #dee2e6
    outline: none
    &.approved
      color: green
      &.active,
      &:hover
        color: white
        background: green
    &.rejected
      color: red
      &.active,
      &:hover
        color: white
        background: red
</style>