From 845f3c4661a00531546ad095eb5de3253be16e3d Mon Sep 17 00:00:00 2001
From: "Langer,Christoph" <christoph.langer@imba.oeaw.ac.at>
Date: Fri, 26 May 2023 08:00:31 +0200
Subject: [PATCH] Add repository links

---
 .../src/components/forms/addDatasetForm.vue   |  14 +-
 .../components/forms/formRepositoryInput.vue  |   3 +
 .../src/components/forms/formURLEncode.vue    | 168 ++++++++++++++++++
 3 files changed, 183 insertions(+), 2 deletions(-)
 create mode 100644 front_end/src/components/forms/formURLEncode.vue

diff --git a/front_end/src/components/forms/addDatasetForm.vue b/front_end/src/components/forms/addDatasetForm.vue
index a51cdaea..98e2e35d 100644
--- a/front_end/src/components/forms/addDatasetForm.vue
+++ b/front_end/src/components/forms/addDatasetForm.vue
@@ -122,7 +122,7 @@
                                         <md-option value="url">
                                             Import from URL
                                         </md-option>
-                                        <md-option value="url">
+                                        <md-option value="encode">
                                             ENCODE
                                         </md-option>
                                         <md-option
@@ -157,6 +157,14 @@
                                     updateComponentValidity
                                 "
                             />
+                            <formURLEncode
+                                v-else-if="form.fileSource === 'encode'"
+                                :fileTypeMapping="fileTypeExtensions"
+                                @input-changed="urlInputChanged"
+                                @update-component-validity="
+                                    updateComponentValidity
+                                "
+                            />
                             <formRepositoryInput
                                 v-else
                                 :fileTypeMapping="fileTypeExtensions"
@@ -242,6 +250,7 @@ import { apiMixin } from "../../mixins";
 
 import formFileInput from "./formFileInput";
 import formURLInput from "./formURLInput";
+import formURLEncode from "./formURLEncode";
 import formRepositoryInput from "./formRepositoryInput";
 
 export default {
@@ -253,7 +262,8 @@ export default {
     components: {
         formFileInput,
         formRepositoryInput,
-        formURLInput
+        formURLInput,
+        formURLEncode
     },
     data: () => ({
         form: {
diff --git a/front_end/src/components/forms/formRepositoryInput.vue b/front_end/src/components/forms/formRepositoryInput.vue
index a7d07cd7..1a07bb12 100644
--- a/front_end/src/components/forms/formRepositoryInput.vue
+++ b/front_end/src/components/forms/formRepositoryInput.vue
@@ -1,5 +1,8 @@
 <template>
     <div class="md-layout-item md-layout md-gutter">
+        <a href="https://data.4dnucleome.org/browse/" target="_blank">
+            <md-icon>manage_search</md-icon>
+        </a>
         <div class="md-layout-item md-small-size-100">
             <md-field :class="validationSampleID()">
                 <label for="sampleID">Sample-ID</label>
diff --git a/front_end/src/components/forms/formURLEncode.vue b/front_end/src/components/forms/formURLEncode.vue
new file mode 100644
index 00000000..302bd728
--- /dev/null
+++ b/front_end/src/components/forms/formURLEncode.vue
@@ -0,0 +1,168 @@
+<template>
+    <div class="md-layout-item md-layout md-gutter">
+        <a href="https://www.encodeproject.org/search/?type=Experiment" target="_blank">
+            <md-icon>manage_search</md-icon>
+        </a>
+        <div class="md-layout-item md-small-size-100">
+            <md-field :class="validationSourceURL">
+                <label for="sourceURL">URL</label>
+                <md-input
+                    name="sourceURL"
+                    id="sourceURL"
+                    v-model="form.sourceURL"
+                    required
+                    @change="inputURLChanged"
+                />
+                <span class="md-error" v-if="!$v.form.sourceURL.url"
+                    >URL invalid! {{ urlErrorMsg }}</span
+                >
+                <span class="md-error" v-if="!$v.form.sourceURL.required"
+                    >URL required!</span
+                >
+            </md-field>
+        </div>
+        <div class="md-layout-item md-small-size-100">
+            <md-field :class="validationFileType">
+                <label for="fileType">File type</label>
+                <md-select
+                    id="fileType"
+                    name="fileType"
+                    v-model="form.fileType"
+                    required
+                    @md-selected="inputFileTypeChanged"
+                >
+                    <md-option
+                        v-for="fileType in fileTypes"
+                        :key="fileType"
+                        :value="fileType"
+                    >
+                        {{ fileType }}
+                    </md-option>
+                </md-select>
+
+                <span class="md-error" v-if="!$v.form.fileType.url"
+                    >Filetype is required</span
+                >
+            </md-field>
+        </div>
+    </div>
+</template>
+<script>
+import { validationMixin } from "vuelidate";
+import { required, url } from "vuelidate/lib/validators";
+
+export default {
+    name: "formURLInput",
+    props: ["fileTypeMapping"],
+    emits: ["input-changed", "update-component-validity"],
+    mixins: [validationMixin],
+    data: () => ({
+        form: {
+            sourceURL: null,
+            fileType: null
+        },
+        componentValid: false
+    }),
+    validations() {
+        let outputObject = {
+            form: {
+                sourceURL: {
+                    // TODO validate URL properly
+                    required,
+                    url
+                },
+                fileType: {
+                    required
+                }
+            }
+        };
+        return outputObject;
+    },
+    methods: {
+        inputFileTypeChanged: function(event) {
+            this.$v.form.fileType.$touch();
+            if (
+                this.$v.form.fileType.$dirty &&
+                this.$v.form.fileType.$invalid
+            ) {
+                console.log("filetype invalid");
+                return;
+            }
+
+            this.checkFormValid();
+            return;
+        },
+        inputURLChanged: function(event) {
+            this.$v.form.sourceURL.$touch();
+            if (
+                this.$v.form.sourceURL.$dirty &&
+                this.$v.form.sourceURL.$invalid
+            ) {
+                console.log("sourceurl invalid");
+                return;
+            }
+
+            this.checkFormValid();
+            return;
+        },
+        checkFormValid: function() {
+            if (
+                !this.$v.form.sourceURL.$dirty ||
+                !this.$v.form.fileType.$dirty
+            ) {
+                return;
+            }
+            this.$v.$touch();
+
+            // emit validity value
+            if (this.componentValid != this.$v.$dirty && !this.$v.$invalid) {
+                this.componentValid = this.$v.$dirty && !this.$v.$invalid;
+                this.$emit("update-component-validity", this.componentValid);
+                console.log(
+                    "update-component-validity, " + this.componentValid
+                );
+            }
+
+            if (!this.componentValid) {
+                return;
+            }
+
+            this.$emit(
+                "input-changed",
+                this.form.sourceURL,
+                this.form.fileType
+            );
+        }
+    },
+    computed: {
+        fileTypes: function() {
+            let fileTypesLC = Object.keys(this.fileTypeMapping).map(type =>
+                type.toLowerCase()
+            );
+            let fileTypes = [...new Set(fileTypesLC)];
+            return fileTypes;
+        },
+        validationSourceURL: function() {
+            return {
+                "md-invalid":
+                    this.$v.form.sourceURL.$dirty &&
+                    this.$v.form.sourceURL.$invalid
+            };
+        },
+        validationFileType: function() {
+            return {
+                "md-invalid":
+                    this.$v.form.fileType.$dirty &&
+                    this.$v.form.fileType.$invalid
+            };
+        },
+        urlErrorMsg: function() {
+            let url = this.form.sourceURL.toLowerCase();
+            if (!url.startsWith("https://") && !url.startsWith("http://")) {
+                return "Add protocol in front (e.g. https://)";
+            }
+            return "";
+        }
+    }
+};
+</script>