From 471197f7abc27b0fdc65e453587a74906922f9d5 Mon Sep 17 00:00:00 2001
From: Jan-Hendrik Willms <tleilax+github@gmail.com>
Date: Mon, 8 Jul 2024 11:55:04 +0200
Subject: wip

---
 app/controllers/oer/mymaterial.php             | 11 ----
 app/views/oer/mymaterial/edit.php              |  1 -
 resources/assets/stylesheets/scss/oer.scss     | 21 -------
 resources/vue/components/OERMaterialEditor.vue | 49 ++++------------
 resources/vue/components/OERSearch.vue         | 55 ++++++------------
 resources/vue/components/StudipLevelSlider.vue | 80 ++++++++++++++++++++++++++
 6 files changed, 109 insertions(+), 108 deletions(-)
 create mode 100644 resources/vue/components/StudipLevelSlider.vue

diff --git a/app/controllers/oer/mymaterial.php b/app/controllers/oer/mymaterial.php
index f29b236..ef45722 100644
--- a/app/controllers/oer/mymaterial.php
+++ b/app/controllers/oer/mymaterial.php
@@ -185,17 +185,6 @@ class Oer_MymaterialController extends AuthenticatedController
             $this->template = $_SESSION['NEW_OER'];
         }
 
-        $this->usersearch = new SQLSearch("
-            SELECT DISTINCT CONCAT('0_', auth_user_md5.user_id), CONCAT(auth_user_md5.Nachname, ', ', auth_user_md5.Vorname, ' (', auth_user_md5.username, ')')
-            FROM auth_user_md5 LEFT JOIN user_info ON (user_info.user_id = auth_user_md5.user_id)
-            WHERE (CONCAT(auth_user_md5.Vorname, ' ', auth_user_md5.Nachname) LIKE REPLACE(:input, ' ', '% ')
-                OR CONCAT(auth_user_md5.Nachname, ' ', auth_user_md5.Vorname) LIKE REPLACE(:input, ' ', '% ')
-                OR CONCAT(auth_user_md5.Nachname, ', ', auth_user_md5.Vorname) LIKE :input
-                OR auth_user_md5.username LIKE :input) AND " . get_vis_query() . "
-            UNION SELECT CONCAT('1_', oer_user.user_id), oer_user.name
-            FROM oer_user
-            WHERE name LIKE :input
-        ", _('Person hinzufügen'), 'user_id');
         $this->tagsearch = new SQLSearch("
             SELECT oer_tags.name, oer_tags.name
             FROM oer_tags
diff --git a/app/views/oer/mymaterial/edit.php b/app/views/oer/mymaterial/edit.php
index a0ec187..1838b75 100644
--- a/app/views/oer/mymaterial/edit.php
+++ b/app/views/oer/mymaterial/edit.php
@@ -41,7 +41,6 @@
         ],
         'template' => $template ?? null,
         'tag-search' => (string) $tagsearch,
-        'user-search' => (string) $usersearch,
         'licenses-enabled' => !Config::get()->getValue('OER_DISABLE_LICENSE'),
         'licenses' => License::findAndMapBySQL(
             function (License $license) {
diff --git a/resources/assets/stylesheets/scss/oer.scss b/resources/assets/stylesheets/scss/oer.scss
index e25efa3..ffdef94 100644
--- a/resources/assets/stylesheets/scss/oer.scss
+++ b/resources/assets/stylesheets/scss/oer.scss
@@ -290,27 +290,6 @@ ul.reviews, ol.reviews {
             margin-top: 10px;
             font-weight: normal;
         }
-
-        .level_filter {
-            width: 300px;
-            .level_labels {
-                display: flex;
-                justify-content: space-between;
-                font-size: 0.8em;
-                color: var(--black);
-                margin-top: 20px;
-            }
-            .level_numbers {
-                display: flex;
-                justify-content: space-between;
-            }
-            #difficulty_slider {
-                margin-top: 5px;
-                width: 93%;
-                margin-left: auto;
-                margin-right: auto;
-            }
-        }
     }
     .filterpanel_shadow {
         position: absolute;
diff --git a/resources/vue/components/OERMaterialEditor.vue b/resources/vue/components/OERMaterialEditor.vue
index 6e98ea9..88b9232 100644
--- a/resources/vue/components/OERMaterialEditor.vue
+++ b/resources/vue/components/OERMaterialEditor.vue
@@ -130,18 +130,11 @@
                             </div>
                         </label>
                     </li>
-                    <li>
-                        <quicksearch name="new_user"
-                                     :searchtype="userSearch"
-                                     :placeholder="$gettext('Person hinzufügen')"
-                        ></quicksearch>
-                    </li>
                 </ul>
             </div>
 
-
             <div class="oer_tags_container">
-                {{ $gettext('Themen (am besten mindestens 5)') }}
+                <h4>{{ $gettext('Themen (am besten mindestens 5)') }}</h4>
                 <ul class="clean oer_tags">
                     <li v-for="(tag, index) in displayTags" :key="index">
                         #
@@ -165,21 +158,14 @@
             </div>
 
             <div class="level_filter" style="margin-top: 13px; max-width: 682px;">
-                {{ $gettext('Niveau') }}
+                <h4>{{ $gettext('Niveau') }}</h4>
 
-                <input type="hidden" id="difficulty_start" name="data[difficulty_start]"
-                       :value="material.difficulty_start">
-                <input type="hidden" id="difficulty_end" name="data[difficulty_end]"
-                       :value="material.difficulty_end">
+                <input type="hidden" name="data[difficulty_start]" :value="difficultyStart">
+                <input type="hidden" name="data[difficulty_end]" :value="difficultyEnd">
 
-                <div class="level_labels">
-                    <div>{{ $gettext('Leicht') }}</div>
-                    <div>{{ $gettext('Schwer') }}</div>
-                </div>
-                <div style="display: flex; justify-content: space-between;">
-                    <div v-for="i in 12" :key="`level-${i}`">{{ i }}</div>
-                </div>
-                <div id="difficulty_slider_edit" style="margin-left: 5px; margin-right: 9px;"></div>
+                <studip-level-slider :lower-value.sync="difficultyStart"
+                                     :upper-value.sync="difficultyEnd"
+                ></studip-level-slider>
             </div>
 
             <label v-if="enableTwillo"
@@ -219,10 +205,11 @@
 <script>
 import Quicksearch from "./Quicksearch.vue";
 import StudipIcon from "./StudipIcon.vue";
+import StudipLevelSlider from "./StudipLevelSlider.vue";
 
 export default {
     name: "OERMaterialEditor",
-    components: {StudipIcon, Quicksearch },
+    components: {StudipLevelSlider, StudipIcon, Quicksearch },
     props: {
         material: {
             type: Object,
@@ -233,10 +220,6 @@ export default {
             required: true
         },
         template: Object,
-        userSearch: {
-            type: String,
-            required: true,
-        },
         tagSearch: {
             type: String,
             required: true
@@ -260,6 +243,8 @@ export default {
             name: this.material.name.trim() || this.template?.name.trim() || '',
             category: this.material.category || (this.material.id ? '' : null),
             description: this.material.description.trim() || this.template?.description.trim() || '',
+            difficultyEnd: this.material.difficulty_end,
+            difficultyStart: this.material.difficulty_start,
             tags: tags,
         };
     },
@@ -315,16 +300,6 @@ export default {
         }
     },
     mounted() {
-        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: {
@@ -376,7 +351,7 @@ export default {
 .oercampus_editmaterial {
     .drag-and-drop {
         width: 260px;
-        margin-left: 0px;
+        margin-left: 0;
         height: 60px;
         background-position: center 40px;
         padding-top: 100px;
diff --git a/resources/vue/components/OERSearch.vue b/resources/vue/components/OERSearch.vue
index 4d8188f..2b28839 100644
--- a/resources/vue/components/OERSearch.vue
+++ b/resources/vue/components/OERSearch.vue
@@ -14,14 +14,14 @@
                         </a>
                     </span>
 
-                    <span v-if="difficulty[0] != 1 || difficulty[1] != 12"
+                    <span v-if="difficultyStart > 1 || difficultyEnd < 12"
                           class="niveau activefilter"
                           title="$gettext('Aktiver Filter für das Niveau')"
                     >
                         {{ $gettext('Niveau') }}:
-                        <span>{{ difficulty[0] }}</span>
+                        <span>{{ difficultyStart }}</span>
                         -
-                        <span>{{ difficulty[1] }}</span>
+                        <span>{{ difficultyEnd }}</span>
                         <a href="#"
                            @click.prevent="clearDifficulty()"
                            class="erasefilter"
@@ -36,7 +36,7 @@
                            @focus="toggleFilterPanel(true)"
                            @keydown.enter.prevent="search()">
 
-                    <button v-if="difficulty[0] != 1 || difficulty[1] != 12 || (category != null) || (searchtext.length > 0)"
+                    <button v-if="difficultyStart > 1 || difficultyEnd < 12 || category !== null || searchtext.length > 0"
                             class="erase"
                             type="button"
                             :title="$gettext('Suchformular zurücksetzen')"
@@ -89,21 +89,13 @@
                                 </li>
                             </ul>
                         </div>
-                        <div class="level_filter">
-                            <h3>{{ $gettext('Niveau') }}</h3>
-                            <div class="level_labels">
-                                <div>{{ $gettext('Leicht') }}</div>
-                                <div>{{ $gettext('Schwer') }}</div>
-                            </div>
-                            <div class="level_numbers">
-                                <div v-for="i in 12" :key="i" style="text-align: right">
-                                    {{ i }}
-                                </div>
-                            </div>
-                            <div id="difficulty_slider"></div>
 
-                            <input type="hidden" id="difficulty" name="difficulty" value="">
-                        </div>
+                        <input type="hidden" id="difficulty" name="difficulty" value="">
+
+                        <studip-level-slider :lower-value.sync="difficultyStart"
+                                             :upper-value.sync="difficultyEnd"
+                                             width="300px"
+                        ></studip-level-slider>
                     </div>
 
 
@@ -191,10 +183,11 @@
 <script>
 import StudipMessageBox from './StudipMessageBox.vue';
 import StudipAssetImg from './StudipAssetImg.vue';
+import StudipLevelSlider from "./StudipLevelSlider.vue";
 
 export default {
     name: 'OERSearch',
-    components: {StudipAssetImg, StudipMessageBox},
+    components: {StudipLevelSlider, StudipAssetImg, StudipMessageBox},
     props: {
         searchResults: [Array, Boolean],
         filteredTag: String,
@@ -214,7 +207,8 @@ export default {
             tagHistory: [],
             searchtext: '',
             activeFilterPanel: false,
-            difficulty: [1, 12],
+            difficultyStart: 1,
+            difficultyEnd: 12,
             category: null,
             results: this.searchResults || false,
         };
@@ -238,10 +232,8 @@ export default {
             }
         },
         clearDifficulty() {
-            if (this.difficulty[0] != 1 && this.difficulty[1] != 12) {
-                this.difficulty = [1, 12];
-            }
-            jQuery("#difficulty_slider").slider("values", this.difficulty);
+            this.difficultyStart = 1
+            this.difficultyEnd = 12;
         },
         clearCategory() {
             if (this.category != null) {
@@ -270,7 +262,7 @@ export default {
             this.browseMode = false;
             $.getJSON(STUDIP.URLHelper.getURL('dispatch.php/oer/market/search', {
                 type: this.category,
-                difficulty: this.difficulty.join(','),
+                difficulty: [this.difficultyStart, this.difficultyEnd].join(','),
                 search: this.searchtext
             })).done(output => {
                 this.results = output.materials.length;
@@ -367,19 +359,6 @@ export default {
     },
     beforeDestroy() {
         document.body.removeEventListener('click', this.hideFilterPanelListener)
-    },
-    updated() {
-        this.$nextTick(() => {
-            jQuery("#difficulty_slider:not(.ui-slider)").slider({
-                range: true,
-                min: 1,
-                max: 12,
-                values: [this.difficulty[0], this.difficulty[1]],
-                change: (event, ui) => {
-                    this.difficulty = ui.values;
-                }
-            });
-        });
     }
 };
 </script>
diff --git a/resources/vue/components/StudipLevelSlider.vue b/resources/vue/components/StudipLevelSlider.vue
new file mode 100644
index 0000000..a1b91e0
--- /dev/null
+++ b/resources/vue/components/StudipLevelSlider.vue
@@ -0,0 +1,80 @@
+<template>
+    <div class="level-slider" :style="{width: this.width}">
+        <div class="level-labels">
+            <div>{{ lowerLabel }}</div>
+            <div>{{ upperLabel }}</div>
+        </div>
+        <div class="level-numbers">
+            <div v-for="i in this.maxValue" :key="`level-${i}`">{{ i }}</div>
+        </div>
+        <div ref="slider" class="slider-element"></div>
+    </div>
+</template>
+<script>
+import { $gettext } from "../../assets/javascripts/lib/gettext";
+
+export default {
+    name: 'StudipLevelSlider',
+    props: {
+        lowerLabel: {
+            type: String,
+            default: $gettext('Leicht'),
+        },
+        lowerValue: {
+            type: Number,
+            default: 1,
+        },
+        maxValue: {
+            type: Number,
+            default: 12
+        },
+        upperLabel: {
+            type: String,
+            default: $gettext('Schwer'),
+        },
+        upperValue: {
+            type: Number,
+            default: 12
+        },
+        width: {
+            type: String,
+            default: null,
+        }
+    },
+    mounted() {
+        $(this.$refs['slider']).slider({
+            range: true,
+            min: 1,
+            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]);
+            }
+        });
+    }
+}
+</script>
+<style lang="scss">
+.level-slider {
+    max-width: 48em;
+    .level-labels {
+        display: flex;
+        justify-content: space-between;
+        font-size: 0.8em;
+        color: var(--black);
+        margin-top: 20px;
+    }
+    .level-numbers {
+        display: flex;
+        justify-content: space-between;
+    }
+    .slider-element {
+        margin-left: 5px;
+        margin-right: 9px;
+        margin-top: 5px;
+    }
+}
+</style>
-- 
cgit v1.0