<template>
  <div class="logentry">
    <div class="row no-gutters text-left">
      <div
        style="width: 79px;"
        class="table-cell d-flex justify-content-between"
      >
        <font-awesome-icon
          @click="toggleDetails"
          class="my-auto text-info pointer"
          :icon="entry.id === show ? 'angle-down' : 'angle-right'"
          fixed-width
        ></font-awesome-icon>
        {{ entry.id }}
      </div>
      <div style="width: 53px;" class="table-cell text-center">
        {{ entry.kind.toUpperCase() }}
      </div>
      <div style="width: 138px;" class="table-cell text-center">
        {{ entry.enqueued | dateTime }}
      </div>
      <div style="width: 105px;" class="table-cell truncate">
        {{ entry.user }}
      </div>
      <div style="width: 105px;" class="table-cell truncate">
        {{ entry.signer }}
      </div>
      <div style="width: 72px;" class="table-cell text-center">
        <span v-if="entry.state === 'failed'" class="text-danger">{{
          entry.state
        }}</span>
        <span v-else>{{ entry.state }}</span>
      </div>
      <div style="width: 44px;" class="table-cell text-center">
        <font-awesome-icon
          v-if="entry.warnings"
          class="text-warning"
          icon="exclamation-triangle"
          fixed-width
        ></font-awesome-icon>
      </div>
      <div style="flex-grow: 1; padding: 0;" class="table-cell 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>
    <LogDetail
      :entry="entry"
      :details="details"
      v-if="show === entry.id"
    ></LogDetail>
  </div>
</template>

<style lang="sass" scoped>
.logentry
  width: 100%
  &:hover
    background: #fafafa
  .actions
    height: 100%
    width: 50%
    border: 0
    background: transparent
    outline: none
    &.approved
      color: green
      &.active,
      &:hover
        color: white
        background: green
    &.rejected
      border-left: 1px solid #dee2e6
      color: red
      &.active,
      &:hover
        color: white
        background: red
.table-cell
  padding: 0 3px
  border-right: solid 1px #dee2e6
  &:last-child
    border-right: none
</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):
 * 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
    };
  },
  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 {
        HTTP.get("/imports/" + this.entry.id, {
          headers: { "X-Gemma-Auth": localStorage.getItem("token") }
        })
          .then(response => {
            this.$store.commit("imports/showDetailsFor", id);
            this.$store.commit("imports/setCurrentDetails", response.data);
          })
          .catch(error => {
            const { status, data } = error.response;
            displayError({
              title: this.$gettext("Backend Error"),
              message: `${status}: ${data.message || data}`
            });
          });
      }
    }
  },
  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>