<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">
                                        <i class="fa fa-search"></i>
                                    </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>
import { displayError } from "../application/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>