<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: 7%; padding-right: 10px;" class="text-right">
        {{ entry.id }}
      </div>
      <div style="width: 8%;">
        {{ entry.kind.toUpperCase() }}
      </div>
      <div style="width: 22%;">
        {{ entry.enqueued | dateTime }}
      </div>
      <div style="width: 23%;" class="truncate">{{ entry.user }}</div>
      <div style="width: 23%;" class="truncate">{{ entry.signer }}</div>
      <div style="width: 6%;" class="text-center">
        <font-awesome-icon
          v-if="entry.warnings"
          class="ml-1 text-warning"
          icon="exclamation-triangle"
          fixed-width
        ></font-awesome-icon>
      </div>
      <div style="width: 7%" 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" 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";

export default {
  name: "importlogentry",
  props: ["entry"],
  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>