comparison 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
comparison
equal deleted inserted replaced
1138:443fc80a315f 1142:dc3f0277628a
1 <template>
2 <div>
3 <h1>Import</h1>
4 <div class="d-flex content flex-column">
5 <div class="jobcontainer">
6 <Job v-if="imports.queued" type="Running" :jobs="imports.queued"></Job>
7 <Job v-if="imports.successful" type="Done" :jobs="imports.successful"></Job>
8 <Job v-if="imports.failed" type="Failed" :jobs="imports.failed"></Job>
9 <Job v-if="imports.scheduled" type="Scheduled" :jobs="imports.scheduled"></Job>
10 </div>
11 </div>
12 </div>
13 </template>
14
15 <script>
16 import { displayError } from "../application/lib/errors.js";
17 import { mapState } from "vuex";
18 import Job from "./Job";
19
20 export default {
21 name: "imports",
22 components: {
23 Job
24 },
25 computed: {
26 ...mapState("imports", ["imports"])
27 },
28 mounted() {
29 this.$store.dispatch("imports/getImports").catch(error => {
30 const { status, data } = error.response;
31 displayError({
32 title: "Backend Error",
33 message: `${status}: ${data.message || data}`
34 });
35 });
36 }
37 };
38 </script>
39
40 <style lang="scss" scoped>
41 .jobcontainer {
42 margin-left: auto;
43 margin-right: auto;
44 }
45 </style>
46