From d23c97370674bdabf60b39f025f2e4905701689c Mon Sep 17 00:00:00 2001
From: Jan-Hendrik Willms <tleilax+studip@gmail.com>
Date: Wed, 22 Jan 2025 09:38:24 +0000
Subject: fix content modules dispay and add missing vuex store mutation, fixes
 #5162

Closes #5162

Merge request studip/studip!3865
---
 app/views/course/contentmodules/info.php           |  8 +++++-
 resources/assets/stylesheets/scss/forms.scss       |  2 +-
 resources/vue/components/ContentModulesControl.vue | 29 ++++++++++++----------
 resources/vue/store/ContentModulesStore.js         |  3 +++
 4 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/app/views/course/contentmodules/info.php b/app/views/course/contentmodules/info.php
index 0585ebe..48323c4 100644
--- a/app/views/course/contentmodules/info.php
+++ b/app/views/course/contentmodules/info.php
@@ -1,3 +1,9 @@
+<?php
+/**
+ * @var StudIPPlugin $plugin
+ * @var array $metadata
+ */
+?>
 <? if ($plugin->getDescriptionMode() === 'replace_all') : ?>
     <?= formatReady($plugin->getPluginDescription()) ?>
 <? else : ?>
@@ -19,7 +25,7 @@
                 </div>
             </div>
             <?= Studip\VueApp::create('ContentModulesControl')->withProps([
-                 'module_id' => (string) $plugin->getPluginId(),
+                 'module_id' => (int) $plugin->getPluginId(),
             ]) ?>
             <? $keywords = preg_split( "/;/", $metadata['keywords'] ?? '', -1, PREG_SPLIT_NO_EMPTY) ?>
             <? if (count($keywords) > 0) : ?>
diff --git a/resources/assets/stylesheets/scss/forms.scss b/resources/assets/stylesheets/scss/forms.scss
index b5bf7e2..6aa582e 100644
--- a/resources/assets/stylesheets/scss/forms.scss
+++ b/resources/assets/stylesheets/scss/forms.scss
@@ -639,7 +639,7 @@ form.inline {
 }
 
 .studip-dialog {
-    [data-vue-app],
+    > .ui-dialog-content > [data-vue-app],
     &.no-default-buttons .ui-dialog-content {
         min-height: 100%;
         display: flex;
diff --git a/resources/vue/components/ContentModulesControl.vue b/resources/vue/components/ContentModulesControl.vue
index e41f200..9fc6f7b 100644
--- a/resources/vue/components/ContentModulesControl.vue
+++ b/resources/vue/components/ContentModulesControl.vue
@@ -1,7 +1,7 @@
 <template>
-    <div class="controls">
+    <div class="controls" v-if="isVisible">
         <div>
-            <label v-if="!module.mandatory">
+            <label>
                 <input type="checkbox" :checked="module.active" @click="toggleModuleActivation(module)" :ref="'checkbox_' + module.id">
                 {{ module.active ? $gettext('Werkzeug ist aktiv') : $gettext('Werkzeug ist inaktiv') }}
             </label>
@@ -10,7 +10,7 @@
             <a href="#"
                class="toggle_visibility"
                role="checkbox"
-               v-if="module.active && !module.mandatory"
+               v-if="module.active"
                :aria-checked="module.visibility !== 'tutor' ? 'true' : 'false'"
                @click.prevent="toggleModuleVisibility(module)">
                 <studip-icon :shape="module.visibility !== 'tutor' ? 'visibility-visible' : 'visibility-invisible'"
@@ -33,8 +33,11 @@ export default {
     },
     mixins: [ContentModulesMixin],
     computed: {
+        isVisible() {
+            return !this.module.mandatory;
+        },
         module () {
-            return this.modules.find(m => m.id == this.module_id) ?? null;
+            return this.modules.find(m => m.id === this.module_id) ?? null;
         }
     }
 };
@@ -42,42 +45,42 @@ export default {
 <style lang="scss">
 .contentmodule_info {
     display: flex;
-    > .main_part {
-        > .header {
+    .main_part {
+        .header {
             display: flex;
             align-items: center;
-            > .image {
+            .image {
                 width: 200px;
                 height: 150px;
                 display: flex;
                 justify-content: center;
                 align-items: center;
             }
-            > .text {
+            .text {
                 display: flex;
                 flex-direction: column;
             }
 
         }
-        > .controls {
+        .controls {
             background-color: var(--content-color-20);
             padding: 5px;
             display: flex;
             justify-content: space-between;
         }
-        > .keywords {
+        .keywords {
             margin-top: 10px;
             margin-bottom: 10px;
             padding-left: 25px;
         }
-        > .description {
+        .description {
             margin-top: 10px;
         }
     }
-    > .screenshots {
+    .screenshots {
         margin-left: 10px;
         max-width: 270px;
-        > li {
+        li {
             margin-top: 20px;
             margin-bottom: 20px;
             img {
diff --git a/resources/vue/store/ContentModulesStore.js b/resources/vue/store/ContentModulesStore.js
index 970874a..fe01ebd 100644
--- a/resources/vue/store/ContentModulesStore.js
+++ b/resources/vue/store/ContentModulesStore.js
@@ -15,6 +15,9 @@ export default {
         },
     },
     mutations: {
+        setCategories(state, categories) {
+            state.categories = categories;
+        },
         setFilterCategory(state, category) {
             state.filterCategory = category;
         },
-- 
cgit v1.0