convert oersearch to sfc, re #4302tic-4302

6 files changed, 103 insertions, 177 deletions

diff --git a/resources/assets/javascripts/bootstrap/dialog.js b/resources/assets/javascripts/bootstrap/dialog.js
index 58d01fd..58857cb 100644
--- a/resources/assets/javascripts/bootstrap/dialog.js
+++ b/resources/assets/javascripts/bootstrap/dialog.js
@@ -2,7 +2,14 @@ STUDIP.domReady(function () {
     STUDIP.Dialog.initialize();
 });
 
-$(document).on('click', '[data-vue-app] [data-dialog-button] .cancel.button', () => {
-    STUDIP.Dialog.close();
-    return false;
-});
+document.addEventListener(
+    'click',
+    (event) => {
+        if (event.target.matches('.studip-dialog [data-vue-app] [data-dialog-button] .cancel.button')) {
+            STUDIP.Dialog.close();
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    },
+    true
+);
diff --git a/resources/assets/javascripts/bootstrap/oer.js b/resources/assets/javascripts/bootstrap/oer.js
index 3adecbc..ed472b5 100644
--- a/resources/assets/javascripts/bootstrap/oer.js
+++ b/resources/assets/javascripts/bootstrap/oer.js
@@ -47,95 +47,3 @@ STUDIP.domReady(() => {
     });
 
 });
-
-STUDIP.ready(() => {
-    if ($('.oercampus_editmaterial').length) {
-
-        STUDIP.Vue.load().then(({createApp}) => {
-            STUDIP.OER.EditApp = createApp({
-                el: '.oercampus_editmaterial',
-                data() {
-                    return {
-                        name: $('.oercampus_editmaterial input.oername').val(),
-                        logo_url: $('.oercampus_editmaterial .logo_file').data("oldurl"),
-                        customlogo: $('.oercampus_editmaterial .logo_file').data("customlogo"),
-                        filename: $('.oercampus_editmaterial .file.drag-and-drop').data("filename"),
-                        filesize: $('.oercampus_editmaterial .file.drag-and-drop').data("filesize"),
-                        tags: $('.oercampus_editmaterial .oer_tags').data("defaulttags"),
-                        minimumTags: 5
-                    };
-                },
-                mounted: function () {
-                    jQuery("#difficulty_slider_edit").slider({
-                        range: true,
-                        min: 1,
-                        max: 12,
-                        values: [jQuery("#difficulty_start").val(), jQuery("#difficulty_end").val()],
-                        change: function (event, ui) {
-                            jQuery("#difficulty_start").val(ui.values[0]);
-                            jQuery("#difficulty_end").val(ui.values[1]);
-                        }
-                    });
-                    jQuery('.oercampus_editmaterial').find(':focusable').first().focus();
-                },
-                methods: {
-                    editName: function () {
-                        this.name = $('.oername').val();
-                    },
-                    editImage: function (event) {
-                        let reader = new FileReader();
-                        let vue = this;
-                        reader.addEventListener("load", function () {
-                            vue.logo_url = reader.result;
-                            vue.customlogo = true;
-                        }, false);
-                        reader.readAsDataURL(
-                            event.target.files.length > 0
-                                ? event.target.files[0]
-                                : event.dataTransfer.files[0]
-                        );
-                    },
-                    dropImage: function (event) {
-                        window.document.getElementById("oer_logo_uploader").files = event.dataTransfer.files;
-                        this.editImage(event);
-                    },
-                    editFile: function (event) {
-                        this.filename = event.target.files[0].name;
-                        this.filesize = event.target.files[0].size;
-                        if (!this.name) {
-                            this.name = this.filename;
-                            $('.oername').val(this.name);
-                        }
-                    },
-                    dropFile: function (event) {
-                        window.document.getElementById("oer_file").files = event.dataTransfer.files;
-                        this.editFile(event);
-                    },
-                    addTag: function () {
-                        if (this.minimumTags < this.tags.length) {
-                            this.minimumTags = this.tags.length + 1;
-                        } else {
-                            this.minimumTags++;
-                        }
-                    },
-                    removeTag: function (i) {
-                        this.$delete(this.tags, i);
-                        if ((this.minimumTags > this.tags.length) && (this.minimumTags > 5)) {
-                            this.minimumTags--;
-                        }
-                    }
-                },
-                computed: {
-                    displayTags () {
-                        const result = this.tags.concat([]);
-                        while (result.length < this.minimumTags) {
-                            result.push('');
-                        }
-                        return result;
-                    }
-                },
-                components: { Quicksearch }
-            });
-        });
-    }
-});
diff --git a/resources/assets/stylesheets/scss/quicksearch.scss b/resources/assets/stylesheets/scss/quicksearch.scss
index ef6c372..6687450 100644
--- a/resources/assets/stylesheets/scss/quicksearch.scss
+++ b/resources/assets/stylesheets/scss/quicksearch.scss
@@ -89,47 +89,3 @@ div.quicksearch_frame {
         background-position: center center;
     }
 }
-
-.quicksearch_container {
-    display: inline-flex;
-    flex-direction: row-reverse;
-    width: 100%;
-
-    .dropdownmenu {
-        max-width: 0;
-        max-height: 0;
-        overflow: visible;
-        position: relative;
-        top: 31px;
-        z-index: 99999;
-
-        .autocomplete__results {
-            list-style-type: none;
-            padding: 1px;
-            border: 1px solid var(--light-gray-color-40);
-            background-color: var(--white);
-            max-height: 275px;
-            width: 600px;
-            overflow-x: auto;
-            overflow-y: hidden;
-
-            > li {
-                padding: 5px;
-                cursor: pointer;
-                display: flex;
-                align-items: flex-start;
-
-                &:hover, &.autocomplete__result--selected {
-                    background-color: var(--base-color);
-                    color: var(--white);
-                }
-
-                img {
-                    max-width: 40px;
-                    max-height: 40px;
-                    margin-right: 5px;
-                }
-            }
-        }
-    }
-}
diff --git a/resources/vue/components/OERMaterialEditor.vue b/resources/vue/components/OERMaterialEditor.vue
index 88b9232..1ad1f86 100644
--- a/resources/vue/components/OERMaterialEditor.vue
+++ b/resources/vue/components/OERMaterialEditor.vue
@@ -6,7 +6,7 @@
           data-secure
           enctype="multipart/form-data"
     >
-        <input type="hidden" :name="csrf.name" :value="csrf.token">
+        <input type="hidden" :name="csrf.name" :value="csrf.value">
         <input v-if="template?.redirect_url"
                type="hidden"
                name="redirect_url"
@@ -136,18 +136,18 @@
             <div class="oer_tags_container">
                 <h4>{{ $gettext('Themen (am besten mindestens 5)') }}</h4>
                 <ul class="clean oer_tags">
-                    <li v-for="(tag, index) in displayTags" :key="index">
+                    <li v-for="(tag, index) in tags" :key="index">
                         #
                         <quicksearch name="tags[]"
                                      :searchtype="tagSearch"
                                      v-model="tags[index]"
                                      :autocomplete="true"
+                                     v-focus-on-create
                         ></quicksearch>
-                        <a href="#"
-                           @click.prevent="removeTag(index)"
+                        <button class="as-link" @click.prevent="removeTag(index)"
                            :title="$gettext('Thema aus der Liste streichen')">
                             <studip-icon shape="trash" :size="20" class="text-bottom"></studip-icon>
-                        </a>
+                        </button>
 
                     </li>
                 </ul>
@@ -196,9 +196,12 @@
         </fieldset>
 
         <footer data-dialog-button>
-            <button type="button" name="save">
-                {{ material.id ? $gettext('Hochladen') : $gettext('Speichern') }}
+            <button type="submit" name="save" class="button">
+                {{ material.id ? $gettext('Speichern') : $gettext('Hochladen') }}
             </button>
+            <a :href="URLHelper.getURL('dispatch.php/oer/mymaterial')" class="button cancel">
+                {{ $gettext('Abbrechen') }}
+            </a>
         </footer>
     </form>
 </template>
@@ -206,10 +209,25 @@
 import Quicksearch from "./Quicksearch.vue";
 import StudipIcon from "./StudipIcon.vue";
 import StudipLevelSlider from "./StudipLevelSlider.vue";
+import Vue from "vue";
+
+let mounted = false;
 
 export default {
     name: "OERMaterialEditor",
     components: {StudipLevelSlider, StudipIcon, Quicksearch },
+    directives: {
+        ['focus-on-create']: {
+            bind(el) {
+                if (mounted) {
+                    Vue.nextTick(() => el.querySelector('input')?.focus());
+                }
+            }
+        }
+    },
+    mounted () {
+        mounted = true;
+    },
     props: {
         material: {
             type: Object,
@@ -287,11 +305,6 @@ export default {
             return this.template?.image_tmp_name?.length > 0
                 || this.material.front_image_content_type?.length > 0;
         },
-        displayTags () {
-            return this.material.tags.concat(
-                Array(this.minimumTags).fill('')
-            ).slice(0, this.minimumTags);
-        },
         logoUrl() {
             return this.template?.image_tmp_name ? STUDIP.URLHelper.getURL('dispatch.php/oer/mymaterial/show_tmp_image') : this.material.logoUrl;
         },
@@ -299,9 +312,6 @@ export default {
             return STUDIP.URLHelper;
         }
     },
-    mounted() {
-        jQuery('.oercampus_editmaterial').find(':focusable').first().focus();
-    },
     methods: {
         editImage(event) {
             let reader = new FileReader();
@@ -336,12 +346,13 @@ export default {
             this.tags.push('');
         },
         removeTag(i) {
-            this.$delete(this.tags, i);
-            if (
-                this.minimumTags > this.tags.length
-                && this.minimumTags > 5
-            ) {
-                this.minimumTags--;
+            this.tags = this.tags.filter((element, index) => index !== i);
+        }
+    },
+    watch: {
+        tags(current) {
+            if (current.length === 0) {
+                this.tags.push('');
             }
         }
     }
@@ -383,14 +394,5 @@ export default {
     .oer_tags_container {
         margin-top: 10px;
     }
-
-    .level_labels {
-        display: flex;
-        justify-content: space-between;
-        font-size: 0.8em;
-        color: var(--black);
-        margin-top: 20px;
-    }
-
 }
 </style>
diff --git a/resources/vue/components/Quicksearch.vue b/resources/vue/components/Quicksearch.vue
index 0f37ae0..cdfdeb0 100644
--- a/resources/vue/components/Quicksearch.vue
+++ b/resources/vue/components/Quicksearch.vue
@@ -181,3 +181,49 @@ export default {
     }
 }
 </script>
+<style lang="scss">
+.quicksearch_container {
+    align-items: center;
+    display: inline-flex;
+    flex-direction: row-reverse;
+    width: 100%;
+
+    .dropdownmenu {
+        max-width: 0;
+        max-height: 0;
+        overflow: visible;
+        position: relative;
+        top: 31px;
+        z-index: 99999;
+
+        .autocomplete__results {
+            list-style-type: none;
+            padding: 1px;
+            border: 1px solid var(--light-gray-color-40);
+            background-color: var(--white);
+            max-height: 275px;
+            width: 600px;
+            overflow-x: auto;
+            overflow-y: hidden;
+
+            > li {
+                padding: 5px;
+                cursor: pointer;
+                display: flex;
+                align-items: flex-start;
+
+                &:hover, &.autocomplete__result--selected {
+                    background-color: var(--base-color);
+                    color: var(--white);
+                }
+
+                img {
+                    max-width: 40px;
+                    max-height: 40px;
+                    margin-right: 5px;
+                }
+            }
+        }
+    }
+}
+</style>
diff --git a/resources/vue/components/StudipLevelSlider.vue b/resources/vue/components/StudipLevelSlider.vue
index a1b91e0..ee362e6 100644
--- a/resources/vue/components/StudipLevelSlider.vue
+++ b/resources/vue/components/StudipLevelSlider.vue
@@ -1,11 +1,16 @@
 <template>
     <div class="level-slider" :style="{width: this.width}">
         <div class="level-labels">
-            <div>{{ lowerLabel }}</div>
-            <div>{{ upperLabel }}</div>
+            <div class="level-label">{{ lowerLabel }}</div>
+            <div class="level-label">{{ upperLabel }}</div>
         </div>
         <div class="level-numbers">
-            <div v-for="i in this.maxValue" :key="`level-${i}`">{{ i }}</div>
+            <div v-for="i in this.maxValue"
+                 :key="`level-${i}`"
+                 class="level-number"
+            >
+                {{ i }}
+            </div>
         </div>
         <div ref="slider" class="slider-element"></div>
     </div>
@@ -48,8 +53,6 @@ export default {
             max: this.maxValue,
             values: [this.lowerValue, this.upperValue],
             change: (event, ui) => {
-                console.log('Updating', ui.values[0], ui.values[1]);
-
                 this.$emit('update:lowerValue', ui.values[0]);
                 this.$emit('update:upperValue', ui.values[1]);
             }
@@ -71,10 +74,14 @@ export default {
         display: flex;
         justify-content: space-between;
     }
+    .level-number {
+        flex: 0 2ex;
+        text-align: right;
+    }
     .slider-element {
-        margin-left: 5px;
-        margin-right: 9px;
         margin-top: 5px;
+        margin-left: 0.5ex;
+        margin-right: 0.5ex;
     }
 }
 </style>