--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/importoverview/ImportOverview.vue	Wed Feb 27 16:21:45 2019 +0100
@@ -0,0 +1,117 @@
+<template>
+  <div>
+    <UIBoxHeader
+      icon="clipboard-check"
+      title="Staging Area"
+      :closeCallback="$parent.close"
+    />
+    <div class="d-flex flex-row w-100 justify-content-end">
+      <button class="btn btn-dark align-self-start" @click="refresh">
+        <translate>Refresh</translate>
+      </button>
+    </div>
+    <div class="d-flex flex-row w-100 border-bottom">
+      <font-awesome-icon
+        class="pointer"
+        @click="toggleStaging()"
+        v-if="stagingVisible"
+        icon="angle-up"
+        fixed-width
+      ></font-awesome-icon>
+      <font-awesome-icon
+        class="pointer"
+        @click="toggleStaging()"
+        v-if="!stagingVisible"
+        icon="angle-down"
+        fixed-width
+      ></font-awesome-icon>
+      <Staging v-if="stagingVisible"></Staging>
+      <div v-else><h5>Staging</h5></div>
+    </div>
+    <div class="d-flex flex-row">
+      <font-awesome-icon
+        class="pointer"
+        @click="toggleLogs()"
+        v-if="logsVisible"
+        icon="angle-up"
+        fixed-width
+      ></font-awesome-icon>
+      <font-awesome-icon
+        class="pointer"
+        @click="toggleLogs()"
+        v-if="!logsVisible"
+        icon="angle-down"
+        fixed-width
+      ></font-awesome-icon>
+      <Logs v-if="logsVisible"></Logs>
+      <div v-else><h5>Logs</h5></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):
+ * Thomas Junk <thomas.junk@intevation.de>
+ */
+import { displayError } from "@/lib/errors.js";
+import { mapState } from "vuex";
+
+export default {
+  name: "importoverview",
+  components: {
+    Staging: () => import("./staging/Staging.vue"),
+    Logs: () => import("./logs/Logs.vue")
+  },
+  computed: {
+    ...mapState("imports", ["stagingVisible", "logsVisible"])
+  },
+  methods: {
+    toggleStaging() {
+      this.$store.commit("imports/setStagingVisibility", !this.stagingVisible);
+    },
+    toggleLogs() {
+      this.$store.commit("imports/setLogsVisibility", !this.logsVisible);
+    },
+    refresh() {
+      this.loadImportQueue();
+      this.loadLogs();
+    },
+    loadImportQueue() {
+      this.$store
+        .dispatch("imports/getImports")
+        .then(() => {})
+        .catch(error => {
+          const { status, data } = error.response;
+          displayError({
+            title: this.$gettext("Backend Error"),
+            message: `${status}: ${data.message || data}`
+          });
+        });
+    },
+    loadLogs() {
+      this.$store.dispatch("imports/getStaging").catch(error => {
+        const { status, data } = error.response;
+        displayError({
+          title: "Backend Error",
+          message: `${status}: ${data.message || data}`
+        });
+      });
+    }
+  },
+  mounted() {
+    this.refresh();
+  }
+};
+</script>
+
+<style></style>