refactor content modules

app/controllers/course/contentmodules.php

@@ -83,18 +83,16 @@ class Course_ContentmodulesController extends AuthenticatedController
             Sidebar::Get()->addWidget($widget);
         }
 
-        PageLayout::addHeadElement('script', [
-            'type' => 'text/javascript',
-        ], sprintf(
-            'window.ContentModulesStoreData = %s;',
-            json_encode([
-                'setCategories' => $this->categories,
-                'setHighlighted' => $this->highlighted_modules,
-                'setModules' => array_values($this->modules),
-                'setUserId' => User::findCurrent()->id,
-                'setView' => $GLOBALS['user']->cfg->CONTENTMODULES_TILED_DISPLAY ? 'tiles' : 'table',
-            ])
-        ));
+        $this->render_vue_app(
+            Studip\VueApp::create('ContentModules')
+                ->withStore('ContentModulesStore', 'contentmodules', [
+                    'setCategories'  => $this->categories,
+                    'setHighlighted' => $this->highlighted_modules,
+                    'setModules'     => array_values($this->modules),
+                    'setUserId'      => User::findCurrent()->id,
+                    'setView'        => $GLOBALS['user']->cfg->CONTENTMODULES_TILED_DISPLAY ? 'tiles' : 'table',
+                ])
+        );
     }
 
     public function trigger_action()

app/views/course/contentmodules/index.php

-<div class="content-modules-vue-app" is="ContentModules"></div>

app/views/course/contentmodules/info.php

@@ -18,7 +18,9 @@
                 <? endif; ?>
                 </div>
             </div>
-            <div class="content-modules-controls-vue-app" is="ContentModulesControl" module_id="<?= htmlReady($plugin->getPluginId()) ?>"></div>
+            <?= Studip\VueApp::create('ContentModulesControl')->withProps([
+                 'module_id' => (string) $plugin->getPluginId(),
+            ]) ?>
             <? $keywords = preg_split( "/;/", $metadata['keywords'] ?? '', -1, PREG_SPLIT_NO_EMPTY) ?>
             <? if (count($keywords) > 0) : ?>
             <ul class="keywords">

resources/assets/javascripts/bootstrap/contentmodules.js

-STUDIP.domReady(() => {
-    const node = document.querySelector('.content-modules-vue-app');
-    if (!node) {
-        return;
-    }
-
-    Promise.all([
-        STUDIP.Vue.load(),
-        import('../../../vue/store/ContentModulesStore.js').then((config) => config.default),
-        import('../../../vue/components/ContentModules.vue').then((component) => component.default),
-    ]).then(([{ createApp, store }, storeConfig, ContentModules]) => {
-        store.registerModule('contentmodules', storeConfig);
-
-        Object.entries(window.ContentModulesStoreData ?? {}).forEach(([key, value]) => {
-            store.commit(`contentmodules/${key}`, value);
-        });
-
-        const vm = createApp({
-            components: { ContentModules }
-        });
-        vm.$mount(node);
-    });
-});
-
-STUDIP.dialogReady((event) => {
-    let target = event.target ?? document;
-    if (target instanceof jQuery) {
-        target = target.get(0);
-    }
-
-    const node = target.querySelector('.content-modules-controls-vue-app');
-    if (!node) {
-        return;
-    }
-
-    Promise.all([
-        STUDIP.Vue.load(),
-        import('../../../vue/components/ContentModulesControl.vue').then((component) => component.default),
-    ]).then(([{ createApp }, ContentModulesControl]) => {
-        const vm = createApp({
-            components: { ContentModulesControl }
-        });
-        vm.$mount(node);
-    });
-});

resources/assets/javascripts/entry-base.js

@@ -76,7 +76,6 @@ import "./bootstrap/scroll_to_top.js"
 import "./bootstrap/admin-courses.js"
 import "./bootstrap/oer.js"
 import "./bootstrap/courseware.js"
-import "./bootstrap/contentmodules.js"
 import "./bootstrap/stock-images.js"
 import "./bootstrap/external_pages.js"