From 43c24ba3dcbff77f98751c7def1751a2aa109773 Mon Sep 17 00:00:00 2001
From: Jan-Hendrik Willms <tleilax+github@gmail.com>
Date: Fri, 5 Jul 2024 15:55:01 +0200
Subject: convert OERMaterialEditor to sfc, re #4302

---
 app/views/oer/mymaterial/edit.php              |  57 ++++
 lib/models/OERMaterial.php                     |   9 +-
 resources/assets/javascripts/bootstrap/vue.js  |   1 +
 resources/assets/stylesheets/scss/oer.scss     |  49 +--
 resources/vue/components/OERMaterialEditor.vue | 421 +++++++++++++++++++++++++
 5 files changed, 489 insertions(+), 48 deletions(-)
 create mode 100644 resources/vue/components/OERMaterialEditor.vue

diff --git a/app/views/oer/mymaterial/edit.php b/app/views/oer/mymaterial/edit.php
index 12c1676..a0ec187 100644
--- a/app/views/oer/mymaterial/edit.php
+++ b/app/views/oer/mymaterial/edit.php
@@ -1,3 +1,60 @@
+<?php
+/**
+ * @var OERMaterial $material
+ * @var Oer_MymaterialController $controller
+ * @var SQLSearch $usersearch
+ * @var SQLSearch $tagsearch,
+ */
+?>
+
+
+<?= Studip\VueApp::create('OERMaterialEditor')
+    ->withProps([
+        'store-url' => $controller->edit($material),
+        'material' => [
+            ...$material->toArray(),
+
+            'filesize' => $material->getFilePath() && file_exists($material->getFilePath()) ? filesize($material->getFilePath()) : null,
+            'logoUrl' => $material->getLogoURL(),
+            'tags' => array_map(
+                fn($tag) => $tag['name'],
+                $material->getTopics()
+            ),
+            'users' => $material->users->map(function (OERMaterialUser $user) {
+                if ($user->external_contact) {
+                    return [
+                        'id' => $user->oeruser->id,
+                        'name' => $user->oeruser->name,
+                        'avatar' => $user->oeruser->avatar_url,
+                        'external' => true,
+                    ];
+                }
+
+                $u = User::find($user->user_id);
+                return [
+                    'id' => $u->user_id,
+                    'avatar' => Avatar::getAvatar($u->id)->getURL(Avatar::SMALL),
+                    'name' => $u ? $u->getFullName() : _('unbekannt'),
+                    'external' => false,
+                ];
+            }),
+        ],
+        '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) {
+                return [
+                    'id' => $license->id,
+                    'name' => $license->name,
+                ];
+            },
+            '1 ORDER BY name'
+        ),
+        'enable-twillo' => Config::get()->getValue('OERCAMPUS_ENABLE_TWILLO') && TwilloConnector::getTwilloUserID(),
+    ]) ?>
+
 <form action="<?= $controller->edit($material->isNew() ? '' : $material) ?>"
       method="post"
       class="default"
diff --git a/lib/models/OERMaterial.php b/lib/models/OERMaterial.php
index 604f845..224c860 100644
--- a/lib/models/OERMaterial.php
+++ b/lib/models/OERMaterial.php
@@ -55,10 +55,17 @@ class OERMaterial extends SimpleORMap
             'class_name' => License::class,
             'foreign_key' => 'license_identifier'
         ];
+
+        $config['default_values'] = [
+            'license_identifier' => License::findDefault()->id,
+        ];
+
         $config['serialized_fields']['structure'] = JSONArrayObject::class;
         $config['serialized_fields']['data'] = JSONArrayObject::class;
+
         $config['registered_callbacks']['before_store'][] = "cbHashURI";
         $config['registered_callbacks']['before_delete'][] = "cbDeleteFile";
+
         parent::configure($config);
     }
 
@@ -240,7 +247,7 @@ class OERMaterial extends SimpleORMap
         $statement = DBManager::get()->prepare("
             SELECT oer_tags.*
             FROM oer_tags
-                INNER JOIN oer_tags_material ON (oer_tags_material.tag_hash = oer_tags.tag_hash)
+            JOIN oer_tags_material ON (oer_tags_material.tag_hash = oer_tags.tag_hash)
             WHERE oer_tags_material.material_id = :material_id
             ORDER BY oer_tags.name ASC
         ");
diff --git a/resources/assets/javascripts/bootstrap/vue.js b/resources/assets/javascripts/bootstrap/vue.js
index ce1aa0d..046636c 100644
--- a/resources/assets/javascripts/bootstrap/vue.js
+++ b/resources/assets/javascripts/bootstrap/vue.js
@@ -22,6 +22,7 @@ STUDIP.ready(() => {
                             this.$el instanceof Element
                             && this.$el.closest('.studip-dialog')
                             && this.$el.querySelector('[data-dialog-button]')
+                            && this.$el.closest('.studip-dialog')
                         ) {
                             this.$el.closest('.studip-dialog')
                                 .querySelector('.ui-dialog-buttonpane')
diff --git a/resources/assets/stylesheets/scss/oer.scss b/resources/assets/stylesheets/scss/oer.scss
index 45c9361..e25efa3 100644
--- a/resources/assets/stylesheets/scss/oer.scss
+++ b/resources/assets/stylesheets/scss/oer.scss
@@ -128,53 +128,8 @@ ul.reviews, ol.reviews {
     max-width: 1000px;
 }
 
-.oercampus_editmaterial {
-    .drag-and-drop {
-        width: 260px;
-        margin-left: 0px;
-        height: 60px;
-        background-position: center 40px;
-        padding-top: 100px;
-    }
-
-    .autoren {
-        &.multiple label {
-            cursor: pointer;
-        }
-        input[type=checkbox] {
-            display: none;
-        }
-        input[type=checkbox]:checked + div {
-            text-decoration: line-through;
-        }
-        .avatar {
-            display: inline-block;
-            background-position: center center;
-            background-repeat: no-repeat;
-            background-size: 100% 100%;
-            width: 20px;
-            min-width: 20px;
-            height: 20px;
-            margin-right: 5px;
-            position: relative;
-            top: 5px;
-        }
-    }
-    .oer_tags_container {
-        margin-top: 10px;
-    }
-
-    .level_labels {
-        display: flex;
-        justify-content: space-between;
-        font-size: 0.8em;
-        color: var(--black);
-        margin-top: 20px;
-    }
-
-}
-
-.oercampus_editmaterial, .oer_material_overview {
+.oercampus_editmaterial,
+.oer_material_overview {
     article.contentbox {
         display: inline-block;
         margin: 0 15px 15px 0;
diff --git a/resources/vue/components/OERMaterialEditor.vue b/resources/vue/components/OERMaterialEditor.vue
new file mode 100644
index 0000000..6e98ea9
--- /dev/null
+++ b/resources/vue/components/OERMaterialEditor.vue
@@ -0,0 +1,421 @@
+<template>
+    <form :action="storeUrl"
+          method="post"
+          class="default oercampus_editmaterial"
+          onsubmit="$(window).off('beforeunload')"
+          data-secure
+          enctype="multipart/form-data"
+    >
+        <input type="hidden" :name="csrf.name" :value="csrf.token">
+        <input v-if="template?.redirect_url"
+               type="hidden"
+               name="redirect_url"
+               :value="template.redirect_url">
+        <input v-if="template?.module_id"
+               type="hidden"
+               name="module_id"
+               :value="template.module_id">
+
+        <fieldset>
+            <legend>{{ $gettext('Grunddaten') }}</legend>
+
+            <label>
+                <span class="required">{{ $gettext('Name') }}</span>
+                <input type="text"
+                       name="data[name]"
+                       class="oername"
+                       required
+                       v-model.trim="name"
+                       maxlength="64">
+            </label>
+
+            <div>{{ $gettext('Vorschau') }}</div>
+
+            <div class="hgroup" @drop.prevent="dropImage">
+                <label for="oer_logo_uploader">
+                    <article class="contentbox" :title="name">
+                        <header>
+                            <h1>
+                                <studip-icon shape="file"
+                                             :size="20"
+                                             class="text-bottom"></studip-icon>
+                                <div class="title">{{ name }}</div>
+                            </h1>
+                        </header>
+                        <div class="image"
+                             :style="{
+                                backgroundImage: `url(${logoUrl})`,
+                                backgroundSize: customLogo ? null : '60% auto'
+                             }"
+                        ></div>
+                    </article>
+                </label>
+
+                <div>
+                    <label class="file-upload logo_file">
+                    {{ $gettext('Vorschau-Bilddatei (optional)') }}
+                    <input type="file"
+                           name="image"
+                           id="oer_logo_uploader"
+                           accept="image/*"
+                           @change="editImage()">
+                    </label>
+
+                    <label v-if="material.front_image_content_type">
+                        <input type="checkbox" name="delete_front_image" value="1">
+                        {{ $gettext('Vorschaubild löschen') }}
+                    </label>
+                </div>
+            </div>
+
+            <label v-if="!template?.tmp_name"
+                   class="file drag-and-drop"
+                   @drop.prevent="dropFile">
+                {{ $gettext('Datei (gerne auch eine ZIP-Datei) auswählen') }}
+                <input type="file" name="file" id="oer_file" @change="editFile()">
+                <div v-if="material.filename">
+                    <span>{{ material.filename }}</span>
+                    <span>{{ material.filesize }}</span>
+                </div>
+            </label>
+
+            <label>
+                {{ $gettext('Beschreibung') }}
+                <textarea name="data[description]" v-model="description"></textarea>
+            </label>
+
+            <label>
+                <input type="hidden" name="data[draft]" value="0">
+                <input type="checkbox" name="data[draft]" value="1" :checked="material.draft">
+                {{ $gettext('Entwurf (nicht veröffentlicht)') }}
+            </label>
+
+            <label>
+                {{ $gettext('Kategorie') }}
+                <select name="data[category]" v-model="category">
+                    <option v-for="category in categories"
+                            :key="`category-${category.key}`"
+                            :value="category.value"
+                            :title="category.title ?? null"
+                    >
+                        {{ category.label }}
+                    </option>
+                </select>
+            </label>
+
+            <label>
+                {{ $gettext('Vorschau-URL (optional)') }}
+                <input type="url" name="data[player_url]" pattern="^https?://.*"
+                       :value="(material.player_url || template?.player_url) ?? ''">
+            </label>
+
+            <div v-if="material.id">
+                <h4>{{ $gettext('Autoren') }}</h4>
+                <ul class="clean autoren" :class="{multiple: material.users.length > 1}">
+                    <li v-for="user in material.users" :key="`material-user-${user.id}`">
+                        <label>
+                            <input v-if="material.users.length > 1"
+                                   type="checkbox"
+                                   name="remove_users"
+                                   :value="`${user.external ? 1 : 0}_${user.id}`"
+                            >
+                            <div>
+                                <span class="avatar" :style="{backgroundImage: `url(${user.avatar})`}"></span>
+                                <span class="author_name">{{ user.name }}</span>
+                                <studip-icon v-if="material.users.length > 1"
+                                             shape="trash"
+                                             class="text-bottom"
+                                             :title="$gettext('Person als Autor entfernen')"
+                                ></studip-icon>
+                            </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)') }}
+                <ul class="clean oer_tags">
+                    <li v-for="(tag, index) in displayTags" :key="index">
+                        #
+                        <quicksearch name="tags[]"
+                                     :searchtype="tagSearch"
+                                     v-model="tags[index]"
+                                     :autocomplete="true"
+                        ></quicksearch>
+                        <a href="#"
+                           @click.prevent="removeTag(index)"
+                           :title="$gettext('Thema aus der Liste streichen')">
+                            <studip-icon shape="trash" :size="20" class="text-bottom"></studip-icon>
+                        </a>
+
+                    </li>
+                </ul>
+                <button class="as-link" @click.prevent="addTag()">
+                    <studip-icon shape="add" :size="20" class="text-bottom"></studip-icon>
+                    {{ $gettext('Thema hinzufügen') }}
+                </button>
+            </div>
+
+            <div class="level_filter" style="margin-top: 13px; max-width: 682px;">
+                {{ $gettext('Niveau') }}
+
+                <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">
+
+                <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>
+            </div>
+
+            <label v-if="enableTwillo"
+                   style="margin-top: 20px;"
+            >
+                <input type="checkbox"
+                       name="publish_on_twillo"
+                       value="1"
+                       :checked="material.published_id_on_twillo">
+                {{ $gettext('Auf twillo.de veröffentlichen') }}
+            </label>
+        </fieldset>
+
+        <fieldset v-if="licensesEnabled">
+            <legend>{{ $gettext('Lizenz') }}</legend>
+            {{ $gettext('Ich erkläre mich bereit, dass meine Lernmaterialien unter der angegebenen Lizenz an alle Nutzenden freigegeben werden. Ich bestätige zudem, dass ich das Recht habe, diese Dateien frei zu veröffentlichen, weil entweder ich selbst sie angefertigt habe, oder sie von anderen Quellen mit kompatibler Lizenz stammen.') }}
+
+            <div>
+                <select class="licenses_selector" name="data[license_identifier]">
+                    <option v-for="license in licenses"
+                            :key="`license-${license.id}`"
+                            :value="license.id"
+                            :selected="license.id === material.license_identifier">
+                        {{ license.name }}
+                    </option>
+                </select>
+            </div>
+        </fieldset>
+
+        <footer data-dialog-button>
+            <button type="button" name="save">
+                {{ material.id ? $gettext('Hochladen') : $gettext('Speichern') }}
+            </button>
+        </footer>
+    </form>
+</template>
+<script>
+import Quicksearch from "./Quicksearch.vue";
+import StudipIcon from "./StudipIcon.vue";
+
+export default {
+    name: "OERMaterialEditor",
+    components: {StudipIcon, Quicksearch },
+    props: {
+        material: {
+            type: Object,
+            required: true,
+        },
+        storeUrl: {
+            type: String,
+            required: true
+        },
+        template: Object,
+        userSearch: {
+            type: String,
+            required: true,
+        },
+        tagSearch: {
+            type: String,
+            required: true
+        },
+        licensesEnabled: Boolean,
+        licenses: Array,
+        enableTwillo: Boolean,
+
+        minimumTags: {
+            type: Number,
+            default: 5
+        }
+    },
+    data() {
+        const tags = this.material.tags.concat(
+            this.template?.tags ?? [],
+            Array(this.minimumTags).fill('')
+        ).slice(0, this.minimumTags);
+
+        return {
+            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() || '',
+            tags: tags,
+        };
+    },
+    computed: {
+        categories() {
+            const categories = [
+                {
+                    key: 'audio',
+                    label: this.$gettext('Audio')
+                },
+                {
+                    key: 'video',
+                    label: this.$gettext('Video')
+                },
+                {
+                    key: 'presentation',
+                    label: this.$gettext('Folien')
+                },
+                {
+                    key: 'elearning',
+                    label: this.$gettext('Lernmodule')
+                },
+                {
+                    key: '',
+                    label: this.$gettext('Ohne Kategorie'),
+                    title: this.$gettext('Fehlt eine Kategorie? Kein Problem, arbeiten Sie stattdessen mit Schlagwörtern. Die sind viel flexibler.')
+                }
+            ];
+
+            if (!this.material.id) {
+                categories.unshift({key: 'auto', label: this.$gettext('Automatisch erkennen')});
+            }
+
+            return categories;
+        },
+        csrf() {
+            return STUDIP.CSRF_TOKEN;
+        },
+        customLogo() {
+            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;
+        },
+        URLHelper() {
+            return STUDIP.URLHelper;
+        }
+    },
+    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: {
+        editImage(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(event) {
+            window.document.getElementById("oer_logo_uploader").files = event.dataTransfer.files;
+            this.editImage(event);
+        },
+        editFile(event) {
+            this.filename = event.target.files[0].name;
+            this.filesize = event.target.files[0].size;
+
+            if (!this.name) {
+                this.name = this.filename;
+            }
+        },
+        dropFile(event) {
+            window.document.getElementById("oer_file").files = event.dataTransfer.files;
+            this.editFile(event);
+        },
+        addTag() {
+            this.tags.push('');
+        },
+        removeTag(i) {
+            this.$delete(this.tags, i);
+            if (
+                this.minimumTags > this.tags.length
+                && this.minimumTags > 5
+            ) {
+                this.minimumTags--;
+            }
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+.oercampus_editmaterial {
+    .drag-and-drop {
+        width: 260px;
+        margin-left: 0px;
+        height: 60px;
+        background-position: center 40px;
+        padding-top: 100px;
+    }
+
+    .autoren {
+        &.multiple label {
+            cursor: pointer;
+        }
+        input[type=checkbox] {
+            display: none;
+        }
+        input[type=checkbox]:checked + div {
+            text-decoration: line-through;
+        }
+        .avatar {
+            display: inline-block;
+            background-position: center center;
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+            width: 20px;
+            min-width: 20px;
+            height: 20px;
+            margin-right: 5px;
+            position: relative;
+            top: 5px;
+        }
+    }
+    .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>
-- 
cgit v1.0