convert stock images to new vue bootstrapping mechanism, fixes #4305

Closes #4305

Merge request studip/studip!3185

app/controllers/stock_images.php

@@ -22,6 +22,10 @@ class StockImagesController extends AuthenticatedController
      */
     public function index_action(): void
     {
+        $this->render_vue_app(
+            Studip\VueApp::create('stock-images/Page')
+                ->withPlugin('StockImagesPlugin', 'stock-images')
+        );
     }
 
     /**

lib/classes/VueApp.php

@@ -38,6 +38,7 @@ final class VueApp implements Stringable
         return new self($base_component);
     }
 
+    private array $plugins = [];
     private array $props = [];
     private array $stores = [];
     private array $storeData = [];
@@ -129,6 +130,27 @@ final class VueApp implements Stringable
         return $this->storeData;
     }
 
+    /**
+     * Adds a plugin
+     *
+     * You may specify a different filename for the plugin.
+     */
+    public function withPlugin(string $plugin, string $filename = null): VueApp
+    {
+        $clone = clone $this;
+        $clone->plugins[$plugin] = $filename ?? $plugin;
+
+        return $clone;
+    }
+
+    /**
+     * Returns all plugins
+     */
+    public function getPlugins(): array
+    {
+        return $this->plugins;
+    }
+
     /**
      * Returns the template to render the vue app
      */
@@ -142,6 +164,10 @@ final class VueApp implements Stringable
             $data['stores'] = $this->stores;
         }
 
+        if (count($this->plugins) > 0) {
+            $data['plugins'] = $this->plugins;
+        }
+
         $template = $GLOBALS['template_factory']->open('vue-app.php');
         $template->baseComponent = basename($this->base_component);
         $template->attributes = ['data-vue-app' => json_encode($data)];

resources/assets/javascripts/bootstrap/stock-images.js

-import StockImages from '../lib/stock-images.js';
-
-STUDIP.domReady(() => {
-    StockImages.init();
-});

resources/assets/javascripts/bootstrap/vue.js

@@ -3,6 +3,7 @@ STUDIP.ready(() => {
         const config = Object.assign(
             {
                 components: [],
+                plugins: {},
                 stores: {}
             },
             JSON.parse(node.dataset.vueApp)
@@ -37,7 +38,7 @@ STUDIP.ready(() => {
             };
         });
 
-        STUDIP.Vue.load().then(async ({createApp, store}) => {
+        STUDIP.Vue.load().then(async ({createApp, store, Vue}) => {
             for (const [index, name] of Object.entries(config.stores)) {
                 import(`../../../vue/store/${name}.js`).then(storeConfig => {
                     store.registerModule(index, storeConfig.default);
@@ -53,6 +54,13 @@ STUDIP.ready(() => {
                     }
                 });
             }
+
+            for (const [plugin, filename] of Object.entries(config.plugins)) {
+                import(`../../../vue/plugins/${filename}.js`)
+                    .then((temp) => Vue.use(temp[plugin], { store }));
+            }
+
+
             createApp({
                 components,
                 store,

resources/assets/javascripts/entry-base.js

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

resources/assets/javascripts/lib/stock-images.js

-const StockImages = {
-    init() {
-        const stockImagesPage = document.querySelector('div.stock-images');
-        if (stockImagesPage !== null) {
-            Promise.all([window.STUDIP.Vue.load(), StockImages.plugin()]).then(
-                ([{ Vue, createApp, store }, StockImagesPlugin]) => {
-                    Vue.use(StockImagesPlugin, { store });
-                    createApp({
-                        el: stockImagesPage,
-                        render: (h) => {
-                            return h(Vue.component('StockImagesPage'), { props: {} });
-                        },
-                    });
-                }
-            );
-        }
-    },
-    plugin() {
-        return import('@/vue/plugins/stock-images.js').then(({ StockImagesPlugin }) => StockImagesPlugin);
-    },
-};
-
-export default StockImages;

resources/vue/components/stock-images/ImagesPagination.vue

 <template>
     <div>
         <StudipPagination
-            :style="{ visibility: totalItems <= perPage ? 'hidden' : 'visible' }"
+            v-show="totalItems > perPage"
             :currentOffset="offset"
             :totalItems="totalItems"
             :itemsPerPage="perPage"
@@ -9,7 +9,7 @@
         />
         <slot></slot>
         <StudipPagination
-            :style="{ visibility: totalItems <= perPage ? 'hidden' : 'visible' }"
+            v-show="totalItems > perPage"
             :currentOffset="offset"
             :totalItems="totalItems"
             :itemsPerPage="perPage"

resources/vue/components/stock-images/SearchWidget.vue

@@ -14,7 +14,7 @@
                             <button
                                 v-if="showSearchResults"
                                 @click.prevent="onReset"
-                                class="reset-search"
+                                class="reset-search as-link"
                                 :title="$gettext('Suchformular zurücksetzen')"
                             >
                                 <studip-icon shape="decline" :size="20" role="presentation" alt="" />