Resolve "Forum: Konfiguration auf Vue umsetzen"

Closes #5784

Merge request studip/studip!4410

4 files changed, 88 insertions, 58 deletions

diff --git a/app/controllers/course/forum/configs.php b/app/controllers/course/forum/configs.php
index c99f718..a065a6a 100644
--- a/app/controllers/course/forum/configs.php
+++ b/app/controllers/course/forum/configs.php
@@ -17,18 +17,28 @@ class Course_Forum_ConfigsController extends Forum\BaseController
 
     public function edit_action()
     {
-        $this->config = Context::get()->getConfiguration();
+        $config = Context::get()->getConfiguration();
+
+        $this->render_vue_app(
+            Studip\VueApp::create('forum/configs/Edit')
+                ->withProps([
+                    'config' => [
+                        'moderator' => $config->FORUM_MODERATION_PERMISSION,
+                        'categories_navigation' => $config->FORUM_HIDE_CATEGORIES_NAVIGATION
+                    ]
+                ])
+        );
     }
 
     public function save_action()
     {
         CSRFProtection::verifyUnsafeRequest();
 
-        $this->config = Context::get()->getConfiguration();
+        $config = Context::get()->getConfiguration();
 
-        $this->config->store('FORUM_MODERATION_PERMISSION', trim(Request::option('forum_moderation_permission')));
+        $config->store('FORUM_MODERATION_PERMISSION', trim(Request::option('moderator')));
 
-        $this->config->store('FORUM_HIDE_CATEGORIES_NAVIGATION', Request::bool('forum_hide_categories_navigation'));
+        $config->store('FORUM_HIDE_CATEGORIES_NAVIGATION', Request::bool('categories_navigation'));
 
         PageLayout::postSuccess(_('Die Einstellungen wurden gespeichert.'));
 
diff --git a/app/views/course/forum/configs/edit.php b/app/views/course/forum/configs/edit.php
deleted file mode 100644
index ceb23d8..0000000
--- a/app/views/course/forum/configs/edit.php
+++ /dev/null
@@ -1,53 +0,0 @@
-<?php
-/**
- * @var Course_Forum_ConfigsController $controller
- * @var CourseConfig $config
- */
-?>
-
-<form class="default" method="post" action="<?= $controller->url_for('course/forum/configs/save') ?>">
-    <?= CSRFProtection::tokenTag() ?>
-
-    <label>
-        <?= _('Wer darf das Forum moderieren?') ?>
-        <select name="forum_moderation_permission">
-            <option
-                value="all"
-                <?php if ($config->FORUM_MODERATION_PERMISSION === 'all') echo 'selected'; ?>
-            >
-                <?= _('Alle Teilnehmenden der Veranstaltung') ?>
-            </option>
-
-            <option
-                value="tutor"
-                <?php if ($config->FORUM_MODERATION_PERMISSION === 'tutor') echo 'selected'; ?>
-            >
-                <?= _('Tutor/-innen und Lehrende') ?>
-            </option>
-
-            <option
-                value="dozent"
-                <?php if ($config->FORUM_MODERATION_PERMISSION === 'dozent') echo 'selected'; ?>
-            >
-                <?= _('Nur Lehrende') ?>
-            </option>
-        </select>
-    </label>
-
-    <label>
-        <input
-            type="checkbox"
-            aria-label="<?= _('Kategorien ausblenden') ?>"
-            name="forum_hide_categories_navigation"
-            <?= $config->FORUM_HIDE_CATEGORIES_NAVIGATION ? 'checked' : '' ?>
-            value="1"
-        />
-        <span>
-            <?= _('Kategorien ausblenden') ?>
-        </span>
-    </label>
-
-    <div data-dialog-button>
-        <?= \Studip\Button::create(_('Übernehmen')) ?>
-    </div>
-</form>
diff --git a/lib/classes/Forum/BaseController.php b/lib/classes/Forum/BaseController.php
index aa1bfd2..327e0bc 100644
--- a/lib/classes/Forum/BaseController.php
+++ b/lib/classes/Forum/BaseController.php
@@ -50,7 +50,7 @@ abstract class BaseController extends StudipController
                 _('Forum verwalten'),
                 $this->url_for('course/forum/configs/edit'),
                 Icon::create('admin', Icon::ROLE_CLICKABLE, ['title' => _('Forum verwalten')]),
-                ['data-dialog' => 'width=500;height=300']
+                ['data-dialog' => 'width=500;height=350']
             );
         }
 
diff --git a/resources/vue/apps/forum/configs/Edit.vue b/resources/vue/apps/forum/configs/Edit.vue
new file mode 100644
index 0000000..8357e05
--- /dev/null
+++ b/resources/vue/apps/forum/configs/Edit.vue
@@ -0,0 +1,73 @@
+<script setup>
+import {reactive} from "vue";
+import {$gettext} from "../../../../assets/javascripts/lib/gettext";
+
+const CSRF = STUDIP.CSRF_TOKEN;
+
+const props = defineProps({
+    config: {
+        type: Object,
+    }
+});
+
+const formState = reactive({
+    ...props.config
+});
+
+const formActionURL = STUDIP.URLHelper.getURL(`dispatch.php/course/forum/configs/save`);
+</script>
+
+<template>
+    <form
+        class="default"
+        :action="formActionURL"
+        method="post"
+    >
+        <input type="hidden" :name="CSRF.name" :value="CSRF.value">
+
+        <fieldset>
+            <legend class="hide-in-dialog">
+                {{ $gettext('Forum verwalten') }}
+            </legend>
+            <section>
+                <label>
+                    {{ $gettext('Wer darf das Forum moderieren?') }}
+                    <select name="moderator" v-model="formState.moderator">
+                        <option value="all">
+                            {{ $gettext('Alle Teilnehmenden der Veranstaltung') }}
+                        </option>
+                        <option value="tutor">
+                            {{ $gettext('Tutor/-innen und Lehrende') }}
+                        </option>
+                        <option value="dozent">
+                            {{ $gettext('Nur Lehrende') }}
+                        </option>
+                    </select>
+                </label>
+            </section>
+            <section>
+                <label>
+                    <input
+                        type="checkbox"
+                        :aria-label="$gettext('Kategorien ausblenden')"
+                        name="categories_navigation"
+                        v-model="formState.categories_navigation"
+                        value="1"
+                    />
+                    <span>
+                        {{ $gettext('Kategorien ausblenden') }}
+                    </span>
+                </label>
+            </section>
+        </fieldset>
+        <footer data-dialog-button>
+            <button type="submit" class="button accept">
+                {{ $gettext('Übernehmen') }}
+            </button>
+            <button class="button cancel" type="button" data-dialog-close>
+                {{ $gettext('Abbrechen') }}
+            </button>
+        </footer>
+    </form>
+</template>
+