--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/importconfiguration/types/DQLReport.vue	Mon Jul 05 08:31:22 2021 +0200
@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <div class="d-flex px-2">
+      <div class="flex-column w-100">
+        <div class="flex-row text-left">
+          <small class="text-muted">
+            <translate>DQL Report</translate>
+          </small>
+        </div>
+        <div class="w-50">
+          <select
+            v-model="selectedReport"
+            class="ml-1 mr-1 form-control form-control-sm"
+          >
+            <option value="" v-if="this.availableReports.length === 0"
+              ><translate>No data selectable</translate></option
+            >
+            <option
+              v-for="(option, index) in this.availableReports"
+              :key="index"
+              :value="option"
+              >{{ option }}</option
+            >
+          </select>
+        </div>
+      </div>
+    </div>
+    <div v-if="!selectedReport" class="d-flex px-2">
+      <small
+        ><translate class="text-danger"
+          >Please select a report to update</translate
+        ></small
+      >
+    </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";
+
+export default {
+  name: "reports",
+  props: ["reportName", "availableReports"],
+  mounted() {
+    this.$store.dispatch("importschedule/loadAvailableReports").catch(error => {
+      let message = "Backend not reachable";
+      if (error.response) {
+        const { status, data } = error.response;
+        message = `${status}: ${data.message || data}`;
+      }
+      displayError({
+        title: this.$gettext("Backend Error"),
+        message: message
+      });
+    });
+  },
+  computed: {
+    selectedReport: {
+      get() {
+        return this.reportName;
+      },
+      set(value) {
+        this.selected = value;
+        this.$emit("reportNameChanged", value);
+      }
+    }
+  }
+};
+</script>
+
+<style></style>