<template>
  <div class="overview">
    <UIBoxHeader
      icon="clipboard-check"
      title="Staging Area"
      :closeCallback="$parent.close"
    />
    <div class="p-2 d-flex flex-row flex-fill justify-content-between">
      <Filters></Filters>
      <div>
        <button class="btn btn-sm btn-info mr-1" @click="loadLogs()">
          <font-awesome-icon icon="spinner" spin v-if="loading" />
          <font-awesome-icon icon="redo" v-else />
        </button>
        <button class="btn btn-sm btn-info" :disabled="!reviewed.length">
          <translate>Commit</translate> {{ reviewed.length }}
        </button>
      </div>
    </div>
    <LogEntry
      class="border-top d-flex-flex-column w-100"
      :entry="entry"
      v-for="entry in imports"
      :key="entry.id"
    ></LogEntry>
  </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 } from "vuex";

export default {
  name: "importoverviewalt",
  components: {
    Filters: () => import("./Filters.vue"),
    LogEntry: () => import("./LogEntry.vue")
  },
  data() {
    return {
      loading: false
    };
  },
  computed: {
    ...mapState("imports", ["imports", "filters", "reviewed"])
  },
  methods: {
    loadLogs() {
      this.loading = true;
      this.$store
        .dispatch("imports/getImports")
        .then(() => {
          this.loading = 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>