fix: Fix Retrieving Page Templates in Space Templates Context - MEED-…

…7686 - Meeds-io/MIPs#165 (#248) Prior to this change, the Page Templates aren't displayed in the context of Space Templates due to missing 'pageTemplates' variable declaration in space Tmeplates Main Vue App. To not declare such a property requested by a different addon than 'social' module, the layout addon has been adapted to make sure to all time get the page templates displayed.
Meeds-io · Oct 29, 2024 · 044a239 · 044a239
1 parent 2691604
commit 044a239
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 15 deletions.
diff --git a/...e-app/common-layout-components/components/site-navigation/SiteNavigationElementDrawer.vue b/...e-app/common-layout-components/components/site-navigation/SiteNavigationElementDrawer.vue
@@ -80,7 +80,8 @@ export default {
       selectedPage: null,
       loading: false,
       resetDrawer: true,
-      isValidForm: true
+      isValidForm: true,
+      pageTemplates: null,
     };
   },
   computed: {
@@ -91,19 +92,21 @@ export default {
       return !this.isValidForm || !this.pageTemplate || false;
     },
     pageTemplate() {
-      return this.$root?.pageTemplates && this.$root.pageTemplates.find(item => item.id === this.pageTempalateId);
-    }
+      return this.pageTemplates?.find?.(item => item.id === this.pageTempalateId);
+    },
   },
   created() {
     this.$root.$on('open-add-element-drawer', this.open);
     this.$root.$on('close-add-element-drawer', this.close);
     this.$root.$on('existing-page-selected', this.changeSelectedPage);
+    this.$root.$on('page-templates-loaded', this.updatePageTemplates);
+    this.pageTemplates = this.$root.pageTemplates;
   },
   beforeDestroy() {
     this.$root.$off('open-add-element-drawer', this.open);
     this.$root.$off('close-add-element-drawer', this.close);
-    this.$root.$off('page-template-changed', this.changePageTemplate);
     this.$root.$off('existing-page-selected', this.changeSelectedPage);
+    this.$root.$off('page-templates-loaded', this.updatePageTemplates);
   },
   methods: {
     open(elementName, elementTitle, navigationNode) {
@@ -130,6 +133,9 @@ export default {
     changeSelectedPage(selectedPage) {
       this.selectedPage = selectedPage;
     },
+    updatePageTemplates(pageTemplates) {
+      this.pageTemplates = pageTemplates;
+    },
     createElement() {
       this.loading = true;
       this.$pageLayoutService.createPage( 

diff --git a/...-app/common-layout-components/components/site-navigation/SiteNavigationNewPageElement.vue b/...-app/common-layout-components/components/site-navigation/SiteNavigationNewPageElement.vue
@@ -42,16 +42,19 @@
 
 <script>
 export default {
+  props: {
+    pageTemplates: {
+      type: Array,
+      default: null,
+    },
+  },
   data() {
     return {
       collator: new Intl.Collator(eXo.env.portal.language, {numeric: true, sensitivity: 'base'}),
       selectedTemplateId: null
     };
   },
   computed: {
-    pageTemplates() {
-      return this.$root.pageTemplates || [];
-    },
     blankTemplates() {
       const items = this.pageTemplates.filter(item => item.category === 'blank');
       items.sort((a, b) => this.collator.compare(a.name.toLowerCase(), b.name.toLowerCase()));

diff --git a/...vue-app/common-layout-components/components/site-navigation/SiteNavigationPageElement.vue b/...vue-app/common-layout-components/components/site-navigation/SiteNavigationPageElement.vue
@@ -18,11 +18,11 @@
 -->
 <template>
   <div v-if="hasMoreThanOneTemplate">
-    <site-navigation-new-page-element 
+    <site-navigation-new-page-element
+      :page-templates="pageTemplates"
       @input="$emit('input', $event)" />
   </div>
 </template>
-
 <script>
 export default {
   props: {
@@ -31,23 +31,33 @@ export default {
       default: null
     }
   },
+  data: () => ({
+    pageTemplates: null,
+  }),
   computed: {
     templatesCount() {
-      return this.$root.pageTemplates?.length || 0;
+      return this.pageTemplates?.length || 0;
     },
     hasMoreThanOneTemplate() {
       return this.templatesCount > 1;
     },
   },
   created() {
-    this.getPageTemplates();
+    if (this.$root.pageTemplates?.length) {
+      this.pageTemplates = this.$root.pageTemplates;
+    } else {
+      this.$root.pageTemplates = [];
+      this.getPageTemplates();
+    }
   },
   methods: {
     getPageTemplates() {
-      if (!this.$root.pageTemplates?.length) {
-        return this.$pageTemplateService.getPageTemplates()
-          .then(pageTemplates => this.$root.pageTemplates = pageTemplates && pageTemplates.filter(t => !t.disabled && t.name) || []);
-      }
+      return this.$pageTemplateService.getPageTemplates()
+        .then(pageTemplates => {
+          this.$root.pageTemplates = pageTemplates?.filter?.(t => !t.disabled && t.name) || [];
+          this.pageTemplates = this.$root.pageTemplates;
+          this.$root.$emit('page-templates-loaded', this.pageTemplates);
+        });
     },
   },
 };