From 2aa22a3decc515ef19681e3fbb303e395bfef6d4 Mon Sep 17 00:00:00 2001 From: Jan-Hendrik Willms Date: Mon, 8 Jul 2024 21:16:57 +0000 Subject: convert stock images to new vue bootstrapping mechanism, fixes #4305 Closes #4305 Merge request studip/studip!3185 --- app/controllers/stock_images.php | 4 ++++ lib/classes/VueApp.php | 26 ++++++++++++++++++++++ .../assets/javascripts/bootstrap/stock-images.js | 5 ----- resources/assets/javascripts/bootstrap/vue.js | 10 ++++++++- resources/assets/javascripts/entry-base.js | 1 - resources/assets/javascripts/lib/stock-images.js | 23 ------------------- .../components/stock-images/ImagesPagination.vue | 4 ++-- .../vue/components/stock-images/SearchWidget.vue | 2 +- 8 files changed, 42 insertions(+), 33 deletions(-) delete mode 100644 resources/assets/javascripts/bootstrap/stock-images.js delete mode 100644 resources/assets/javascripts/lib/stock-images.js diff --git a/app/controllers/stock_images.php b/app/controllers/stock_images.php index 4695434..5ffc6a0 100644 --- a/app/controllers/stock_images.php +++ b/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') + ); } /** diff --git a/lib/classes/VueApp.php b/lib/classes/VueApp.php index 0e20961..3ebae34 100644 --- a/lib/classes/VueApp.php +++ b/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 = []; @@ -130,6 +131,27 @@ final class VueApp implements Stringable } /** + * 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 */ public function getTemplate(): Template @@ -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)]; diff --git a/resources/assets/javascripts/bootstrap/stock-images.js b/resources/assets/javascripts/bootstrap/stock-images.js deleted file mode 100644 index 6ed6edf..0000000 --- a/resources/assets/javascripts/bootstrap/stock-images.js +++ /dev/null @@ -1,5 +0,0 @@ -import StockImages from '../lib/stock-images.js'; - -STUDIP.domReady(() => { - StockImages.init(); -}); diff --git a/resources/assets/javascripts/bootstrap/vue.js b/resources/assets/javascripts/bootstrap/vue.js index ce1aa0d..551daca 100644 --- a/resources/assets/javascripts/bootstrap/vue.js +++ b/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, diff --git a/resources/assets/javascripts/entry-base.js b/resources/assets/javascripts/entry-base.js index 3c2223e..7a382b8 100644 --- a/resources/assets/javascripts/entry-base.js +++ b/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" diff --git a/resources/assets/javascripts/lib/stock-images.js b/resources/assets/javascripts/lib/stock-images.js deleted file mode 100644 index 330fbc9..0000000 --- a/resources/assets/javascripts/lib/stock-images.js +++ /dev/null @@ -1,23 +0,0 @@ -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; diff --git a/resources/vue/components/stock-images/ImagesPagination.vue b/resources/vue/components/stock-images/ImagesPagination.vue index 2cd1621..16dd96a 100644 --- a/resources/vue/components/stock-images/ImagesPagination.vue +++ b/resources/vue/components/stock-images/ImagesPagination.vue @@ -1,7 +1,7 @@