convert oersearch to sfc, re #4302tic-4302

3 files changed, 92 insertions, 37 deletions

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>