<template>
  <div class="overview">
    <UIBoxHeader
      icon="clipboard-check"
      title="Staging Area"
      :closeCallback="$parent.close"
    />
    <div
      class="ml-2 mt-2 d-flex flex-row flex-fill justify-content-between mr-2"
    >
      <Filters></Filters>
      <div>
        <button :class="commitStyle">
          <translate>Commit</translate> {{ toCommit.length }}
        </button>
      </div>
    </div>
    <div class="ml-3 mr-2 mt-2 w-95 ">
      <LogEntry
        class="logentry border-bottom d-flex-flex-column w-100"
        :entry="entry"
        v-for="entry in imports"
        :key="entry.id"
      ></LogEntry>
    </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 { displayError } from "@/lib/errors.js";
import { mapState, mapGetters } from "vuex";

export default {
  name: "importoverviewalt",
  components: {
    Filters: () => import("./Filters.vue"),
    LogEntry: () => import("./LogEntry.vue")
  },
  computed: {
    ...mapState("imports", ["imports", "filters"]),
    ...mapGetters("imports", ["toCommit"]),
    commitStyle() {
      return {
        btn: true,
        "btn-sm": true,
        "btn-light": this.toCommit.length == 0,
        "btn-info": this.toCommit.length > 0
      };
    }
  },
  methods: {
    loadLogs() {
      this.$store
        .dispatch("imports/getImports")
        .then(() => {
          this.reload = false;
        })
        .catch(error => {
          const { status, data } = error.response;
          displayError({
            title: this.$gettext("Backend Error"),
            message: `${status}: ${data.message || data}`
          });
        });
    }
  },
  watch: {
    filters() {
      this.$store.dispatch("imports/getImports", this.filters);
    }
  },
  mounted() {
    this.loadLogs();
  }
};
</script>

<style lang="scss" scoped>
.logentry {
  font-size: 90%;
}
.logentry:hover {
  background: #fafafa;
}
</style>