<template>
  <div class="d-flex flex-row">
    <div :class="spacerStyle"></div>
    <div class="mt-3 mx-auto">
      <div class="card importqueuecard">
        <div class="card-header shadow-sm text-white bg-info mb-3">Importqueue</div>
        <div class="card-body importcardbody">
          <div class="card-body importcardbody">
            <div class="searchandfilter d-flex flex-row">
              <div class="searchgroup input-group">
                <div class="input-group-prepend">
                  <span class="input-group-text" id="search">
                    <font-awesome-icon icon="search"></font-awesome-icon>
                  </span>
                </div>
                <input
                  type="text"
                  class="form-control"
                  placeholder
                  aria-label="Search"
                  aria-describedby="search"
                >
              </div>
              <div class="filters">
                <button @click="setFilter('successful')" :class="successfulStyle">Successful</button>
                <button @click="setFilter('failed')" :class="failedStyle">Failed</button>
                <button @click="setFilter('pending')" :class="pendingStyle">Pending</button>
              </div>
            </div>
            <table class="table">
              <thead>
                <tr>
                  <th>Enqueued</th>
                  <th>Kind</th>
                  <th>User</th>
                  <th>State</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="job in imports" :key="job.id">
                  <td>{{job.enqueued}}</td>
                  <td>{{job.kind}}</td>
                  <td>{{job.user}}</td>
                  <td>{{job.state}}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </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):
 * Markus Kottländer <markus@intevation.de>
 */
import { displayError } from "../../lib/errors.js";
import { mapState } from "vuex";

export default {
  name: "importqueue",
  data() {
    return {
      successful: false,
      failed: false,
      pending: false
    };
  },
  methods: {
    setFilter(name) {
      this[name] = !this[name];
      const allSet = this.successful && this.failed && this.pending;
      if (allSet) {
        this.all = false;
        this.successful = false;
        this.failed = false;
        this.pending = false;
      }
    }
  },
  computed: {
    ...mapState("imports", ["imports"]),
    ...mapState("application", ["showSidebar"]),
    spacerStyle() {
      return [
        "spacer ml-3",
        {
          "spacer-expanded": this.showSidebar,
          "spacer-collapsed": !this.showSidebar
        }
      ];
    },
    successfulStyle() {
      return {
        btn: true,
        "btn-light": !this.successful,
        "btn-dark": this.successful
      };
    },
    pendingStyle() {
      return {
        btn: true,
        "btn-light": !this.pending,
        "btn-dark": this.pending
      };
    },
    failedStyle() {
      return {
        btn: true,
        "btn-light": !this.failed,
        "btn-dark": this.failed
      };
    }
  },
  mounted() {
    this.$store.dispatch("imports/getImports").catch(error => {
      const { status, data } = error.response;
      displayError({
        title: "Backend Error",
        message: `${status}: ${data.message || data}`
      });
    });
  }
};
</script>

<style lang="sass" scoped>
.spacer
  height: 100vh

.spacer-collapsed
  min-width: $icon-width + $offset
  transition: $transition-fast

.spacer-expanded
  min-width: $sidebar-width + $offset

.importqueuecard
  width: 80vw
  min-height: 20rem

.card-body
  width: 100%
  margin-left: auto
  margin-right: auto

.searchandfilter
  position: relative
  margin-bottom: $xx-large-offset

.filters
  position: absolute
  right: 0

.filters button
  margin-right: $small-offset

.table td,
.table th
  border-top: 0 !important
  text-align: left
  padding: $small-offset !important

.searchgroup
  position: absolute
  left: 0
  width: 50%
</style>