<template>
    <div>
        <h1>Import</h1>
        <div class="d-flex content flex-column">
            <div class="jobcontainer">
                <Job v-if="imports.queued" type="Running" :jobs="imports.queued"></Job>
                <Job v-if="imports.successful" type="Done" :jobs="imports.successful"></Job>
                <Job v-if="imports.failed" type="Failed" :jobs="imports.failed"></Job>
                <Job v-if="imports.scheduled" type="Scheduled" :jobs="imports.scheduled"></Job>
            </div>
        </div>
    </div>
</template>

<script>
import { displayError } from "../application/lib/errors.js";
import { mapState } from "vuex";
import Job from "./Job";

export default {
  name: "imports",
  components: {
    Job
  },
  computed: {
    ...mapState("imports", ["imports"])
  },
  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="scss" scoped>
.jobcontainer {
  margin-left: auto;
  margin-right: auto;
}
</style>