--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/importschedule/Importscheduledetail.vue	Wed Dec 12 09:22:20 2018 +0100
@@ -0,0 +1,146 @@
+<template>
+  <div
+    class="importscheduledetails  fadeIn animated"
+    v-if="importScheduleDetailVisible"
+  >
+    <div class="card h-100 shadow-xs">
+      <h6
+        class="mb-0 py-2 px-3 border-bottom d-flex text-info align-items-center"
+      >
+        <translate>New import</translate>
+        <span @click="closeDetailview" class="closebutton">
+          <font-awesome-icon icon="times"></font-awesome-icon>
+        </span>
+      </h6>
+      <div class="card-body">
+        <form @submit.prevent="save" class="ml-3">
+          <div class="d-flex flex-row w-100">
+            <div class="flex-column w-100">
+              <div class="flex-row text-left">
+                <small class="text-muted">
+                  <translate>Imports</translate>
+                </small>
+              </div>
+              <select v-model="import_" class="custom-select" id="import_">
+                <option v-for="option in this.$options.imports" :key="option">{{
+                  option
+                }}</option>
+              </select>
+            </div>
+          </div>
+          <div class="d-flex flex-row mt-3 w-100 justify-content-between">
+            <div class="flex-column w-100 mr-2">
+              <div class="flex-row text-left">
+                <small class="text-muted">
+                  <translate>Importtype</translate>
+                </small>
+              </div>
+              <select v-model="import_" class="custom-select" id="importtype">
+                <option
+                  v-for="option in this.$options.importtype"
+                  :key="option"
+                  >{{ option }}</option
+                >
+              </select>
+            </div>
+            <div class="flex-column w-100 ml-2">
+              <div class="flex-row text-left">
+                <small class="text-muted">
+                  <translate>Schedule</translate>
+                </small>
+              </div>
+              <select v-model="schedule" class="custom-select" id="period">
+                <option v-for="option in this.$options.periods" :key="option">{{
+                  option
+                }}</option>
+              </select>
+            </div>
+          </div>
+          <div class="flex-column mt-3 w-100 mr-2">
+            <div class="flex-row text-left">
+              <small class="text-muted">
+                <translate>Email Notification</translate>
+              </small>
+            </div>
+            <div class="flex-flex-row text-left">
+              <toggle-button
+                v-model="eMailNotification"
+                class="mt-2"
+                :speed="100"
+                :labels="{
+                  checked: this.$options.on,
+                  unchecked: this.$options.off
+                }"
+                :width="50"
+                :height="20"
+              />
+            </div>
+          </div>
+          <div v-if="eMailNotification" class="flex-column w-100 mr-2">
+            <div class="flex-row text-left">
+              <small class="text-muted"> <translate>Email</translate> </small>
+            </div>
+            <input class="form-control" type="text" />
+          </div>
+          <button type="submit" class="shadow-sm btn btn-info submit-button">
+            <translate>Submit</translate>
+          </button>
+        </form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+import { displayInfo } from "../../lib/errors.js";
+
+export default {
+  name: "importscheduledetail",
+  data() {
+    return {
+      schedule: null,
+      import_: null,
+      eMailNotification: false
+    };
+  },
+  computed: {
+    ...mapState("imports", ["importScheduleDetailVisible"])
+  },
+  methods: {
+    save() {
+      displayInfo({
+        title: "Import",
+        message: "under construction"
+      });
+    },
+    closeDetailview() {
+      this.$store.commit("imports/clearImportScheduleDetail");
+      this.$store.commit("imports/setImportScheduleDetailInvisible");
+    }
+  },
+  imports: [],
+  importtype: [],
+  on: "on",
+  off: "off",
+  periods: {
+    DAILY: "daily",
+    MONTHLY: "monthly"
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.importscheduledetails {
+  height: 420px;
+  width: 45%;
+  margin-top: $offset;
+  margin-right: $offset;
+}
+
+.submit-button {
+  position: absolute;
+  right: $offset;
+  bottom: $offset;
+}
+</style>