diff client/src/imports/Imports.vue @ 1142:dc3f0277628a

feat: Importqueue listing (Proof of concept) This is only a prototypical overview of importqueue data from backend. Uses GET to retrieve an overview of imports. Shows in separate tables. Further concept needs to be developed to progress..
author Thomas Junk <thomas.junk@intevation.de>
date Mon, 12 Nov 2018 15:00:04 +0100
parents
children 5f98d0c9d738
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/imports/Imports.vue	Mon Nov 12 15:00:04 2018 +0100
@@ -0,0 +1,46 @@
+<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>
+