--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/importschedule/Importschedule.vue	Wed Dec 12 09:22:20 2018 +0100
@@ -0,0 +1,166 @@
+<template>
+  <div class="d-flex flex-row">
+    <div :class="spacerStyle"></div>
+    <div class="mt-3 w-100">
+      <div class="card flex-grow-1 schedulecard shadow-xs">
+        <h6
+          class="mb-0 py-2 px-3 border-bottom d-flex text-info align-items-center"
+        >
+          <font-awesome-icon icon="clock" class="mr-2"></font-awesome-icon>
+          <translate class="headline">Importschedule</translate>
+        </h6>
+        <div class="card-body schedulecardbody">
+          <div class="card-body schedulecardbody">
+            <div class="searchandfilter  w-50 d-flex flex-row">
+              <div class="searchgroup input-group">
+                <div class="input-group-prepend">
+                  <span class="input-group-text" id="search">
+                    <font-awesome-icon icon="search"></font-awesome-icon>
+                  </span>
+                </div>
+                <input
+                  v-model="searchQuery"
+                  type="text"
+                  class="form-control"
+                  placeholder
+                  aria-label="Search"
+                  aria-describedby="search"
+                />
+              </div>
+            </div>
+            <table v-if="schedules.length" class="table">
+              <thead>
+                <tr>
+                  <th><translate>Import</translate></th>
+                  <th><translate>Type</translate></th>
+                  <th><translate>Author</translate></th>
+                  <th><translate>Schedule</translate></th>
+                  <th><translate>Email</translate></th>
+                  <th>&nbsp;</th>
+                  <th>&nbsp;</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="(schedule, index) in schedules" :key="index">
+                  <td></td>
+                  <td></td>
+                  <td></td>
+                  <td></td>
+                  <td></td>
+                  <td>
+                    <font-awesome-icon
+                      icon="pencil-alt"
+                      fixed-width
+                    ></font-awesome-icon>
+                  </td>
+                  <td>
+                    <font-awesome-icon
+                      @click="deleteSchedule"
+                      icon="trash"
+                      fixed-width
+                    ></font-awesome-icon>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+            <div v-else class="mt-4 small text-center py-3">
+              <translate>No schedules</translate>
+            </div>
+            <button
+              @click="newImport"
+              class="btn btn-info position-absolute newbutton"
+            >
+              <translate>New Import</translate>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <Importscheduledetail></Importscheduledetail>
+  </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 { mapState } from "vuex";
+import Importscheduledetail from "./Importscheduledetail";
+//import { SCHEDULES } from "../../store/imports.js";
+
+export default {
+  name: "importschedule",
+  components: {
+    Importscheduledetail
+  },
+  data() {
+    return {
+      searchQuery: ""
+    };
+  },
+  methods: {
+    newImport() {
+      this.$store.commit("imports/setImportScheduleDetailVisible");
+    },
+    deleteSchedule(index) {
+      this.$store.commit("imports/deleteSchedule", index);
+    }
+  },
+  computed: {
+    ...mapState("application", ["showSidebar"]),
+    ...mapState("imports", ["schedules"]),
+    spacerStyle() {
+      return [
+        "spacer ml-3",
+        {
+          "spacer-expanded": this.showSidebar,
+          "spacer-collapsed": !this.showSidebar
+        }
+      ];
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.spacer {
+  height: 100vh;
+}
+
+.spacer-collapsed {
+  min-width: $icon-width + $offset;
+  transition: $transition-fast;
+}
+
+.spacer-expanded {
+  min-width: $sidebar-width + $offset;
+}
+
+.schedulecard {
+  margin-right: $offset;
+  min-height: 20rem;
+}
+
+.schedulecard-body {
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.newbutton {
+  position: absolute;
+  bottom: $offset;
+  right: $offset;
+}
+</style>