From 25dbee7266ecf1902b156b428dde20b49cca20fe Mon Sep 17 00:00:00 2001 From: Johann Hoffmann Date: Mon, 16 Dec 2024 11:46:38 +0100 Subject: [PATCH] removed app instance hacks, content component watches route.param.content_id and reloads accordingly; changed template to for cms pages; --- application/views/CisVue/Cms/Content.php | 4 +-- public/js/apps/Cis/Cms.js | 30 +++++++++------------ public/js/components/Cis/Cms/Content.js | 33 +++++++----------------- 3 files changed, 23 insertions(+), 44 deletions(-) diff --git a/application/views/CisVue/Cms/Content.php b/application/views/CisVue/Cms/Content.php index f957bb7f9..3d0097031 100644 --- a/application/views/CisVue/Cms/Content.php +++ b/application/views/CisVue/Cms/Content.php @@ -18,8 +18,8 @@ if(defined('CIS4')){ } ?> -
-' : ''); ?> +
+ ' : ''); ?>
({ content_id: route.params.content_id }) }, { path: `/news`, @@ -31,8 +30,7 @@ const app = Vue.createApp({ name: 'CmsApp', data() { return { - instance: null, - interceptHandler: this.intercept//.bind(this) + interceptHandler: this.intercept } }, components: { @@ -41,36 +39,33 @@ const app = Vue.createApp({ }, methods: { intercept(e) { + // TODO: maybe a more sophisticated menu link click detection is possible? if (e.target.tagName === "A" && e.target.pathname?.includes(ciPath) && e.target.pathname.includes('Cms/content')) { const pathParts = e.target.pathname.split('/').filter(Boolean); const idString = pathParts[pathParts.length - 1]; const content_id = idString && !isNaN(Number(idString)) ? idString : null; // only return id if it is a number string since the path might contain invalid elements e.preventDefault() // prevents normal browser page load - - this.$router.push({ // add new content id to browser history + this.$router.push({ name: 'Content', params: { content_id } }) - // load and show new content from id without reloading page with menu overhead etc. - // from a generic reload function required by every affected child component - this.instance.subTree.type.methods.reload( - content_id, - this.instance.appContext.config.globalProperties.$fhcApi, - this.instance.subTree.component.proxy // this pointer of component reloading and setting its own content - ) - } else if(e.target.tagName === "A" && e.target.pathname?.includes(ciPath) && e.target.pathname.includes('Cms/news')) { //handle news content + + e.preventDefault() // prevents normal browser page load + this.$router.push({ + name: 'News', + + }) } } }, mounted() { - this.instance = Vue.getCurrentInstance() document.querySelectorAll("#cms [data-confirm]").forEach((el) => { el.addEventListener("click", (evt) => { evt.preventDefault(); @@ -93,10 +88,7 @@ const app = Vue.createApp({ FHC_JS_DATA_STORAGE_OBJECT.app_root ); }); - - document.addEventListener("click", this.interceptHandler, {capture: true, passive: false}) - }, unmounted() { document.removeEventListener('click', this.interceptHandler) @@ -105,6 +97,8 @@ const app = Vue.createApp({ setScrollbarWidth(); +app.use(router); +app.use(FhcApi); app.use(primevue.config.default, { zIndex: { overlay: 9999 } }); app.use(Phrasen); app.mount("#cms"); \ No newline at end of file diff --git a/public/js/components/Cis/Cms/Content.js b/public/js/components/Cis/Cms/Content.js index d077558a4..1973e99ac 100644 --- a/public/js/components/Cis/Cms/Content.js +++ b/public/js/components/Cis/Cms/Content.js @@ -1,13 +1,11 @@ import raum_contentmittitel from './Content_types/Raum_contentmittitel.js' import general from './Content_types/General.js' - export default { name: "ContentComponent", - props: { content_id: { - type: Number, + type: [Number, String], required: true, }, version: { @@ -26,25 +24,12 @@ export default { data() { return { content: null, - content_idInternal: this.content_id + content_id_internal: this.content_id }; }, methods: { - reload(id, api, context) { - // to be called from app bound interceptor function that has access to the same api, but not via this - context.content_idInternal = id - this.load(api, context) - }, - load(apiParam = null, context = this) { - const api = apiParam ?? context.$fhcApi - api.factory.cms.content(context.content_idInternal, context.version, context.sprache, context.sichtbar).then(res => { - context.content = res.data.content; - context.content_type = res.data.type; - - }); - }, fetchContent(){ - return this.$fhcApi.factory.cms.content(this.content_id, this.version, this.sprache, this.sichtbar).then(res => { + return this.$fhcApi.factory.cms.content(this.content_id_internal, this.version, this.sprache, this.sichtbar).then(res => { this.content = res.data.content; this.content_type = res.data.type; }); @@ -54,6 +39,10 @@ export default { sprache: function(sprache){ this.fetchContent(); }, + '$route.params.content_id'(newVal) { + this.content_id_internal = newVal + this.fetchContent(); + } }, computed: { sprache(){ @@ -69,17 +58,13 @@ export default { }, }, created() { - this.$fhcApi.factory.cms.content(this.content_id, this.version, this.sprache, this.sichtbar).then(res => { - this.content = res.data.content; - this.content_type = res.data.type; - }); + this.fetchContent(); }, mounted() { - }, template: /*html*/ ` - +

No content is available to display

`, };