feat: Allow to add new Page Template - MEED-6850 - Meeds-io/MIPs#133 (#…

…69)
Meeds-io · May 28, 2024 · e333765 · e333765
1 parent f53af19
commit e333765
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 29 deletions.
diff --git a/layout-webapp/src/main/webapp/vue-app/common-layout-components/js/PageTemplateService.js b/layout-webapp/src/main/webapp/vue-app/common-layout-components/js/PageTemplateService.js
@@ -43,7 +43,7 @@ export function getPageTemplate(id) {
   });
 }
 
-export function createPageTemplate(pageContent) {
+export function createPageTemplate(pageContent, disabled) {
   return fetch('/layout/rest/pageTemplates', {
     credentials: 'include',
     method: 'POST',
@@ -52,6 +52,7 @@ export function createPageTemplate(pageContent) {
     },
     body: JSON.stringify({
       content: pageContent,
+      disabled: disabled || false,
     }),
   }).then((resp) => {
     if (resp?.ok) {

diff --git a/layout-webapp/src/main/webapp/vue-app/layout-editor/components/drawer/PageTemplateDrawer.vue b/layout-webapp/src/main/webapp/vue-app/layout-editor/components/drawer/PageTemplateDrawer.vue
@@ -142,7 +142,7 @@ export default {
   },
   methods: {
     open(pageTemplate, duplicate) {
-      this.templateId = pageTemplate.id || null;
+      this.templateId = pageTemplate.id || this.$root.pageTemplate?.id || null;
       this.pageLayoutContent = pageTemplate.content;
       this.duplicate = duplicate;
       this.$nextTick().then(() => this.$refs.drawer.open());
@@ -155,10 +155,15 @@ export default {
       const savePageRequest =
         (!this.duplicate && this.templateId) ?
           this.$pageTemplateService.getPageTemplate(this.templateId)
-            .then(pageTemplate => this.$pageTemplateService.updatePageTemplate({
-              ...pageTemplate,
-              content: this.pageLayoutContent,
-            }))
+            .then(pageTemplate => {
+              const newTemplate = (this.$root.pageTemplate && !this.$root.pageTemplate.name);
+              const disabled = newTemplate ? false : pageTemplate.disabled;
+              return this.$pageTemplateService.updatePageTemplate({
+                ...pageTemplate,
+                disabled,
+                content: this.pageLayoutContent,
+              });
+            })
           : this.$pageTemplateService.createPageTemplate(this.pageLayoutContent);
       return savePageRequest
         .then(pageTemplate => {
@@ -170,6 +175,12 @@ export default {
         .then(() => this.$translationService.saveTranslations('pageTemplate', this.templateId, 'title', this.titleTranslations))
         .then(() => this.$translationService.saveTranslations('pageTemplate', this.templateId, 'description', this.descriptionTranslations))
         .then(() => this.$refs?.pagePreview?.save())
+        .then(() => {
+          if (this.$root.pageTemplate) {
+            return this.$pageTemplateService.getPageTemplate(this.templateId)
+              .then(pageTemplate => this.$root.pageTemplate = pageTemplate);
+          }
+        })
         .then(() => {
           this.$root.$emit('page-templates-saved');
           this.close();

diff --git a/...p/src/main/webapp/vue-app/layout-editor/components/toolbar/actions/SaveTemplateButton.vue b/...p/src/main/webapp/vue-app/layout-editor/components/toolbar/actions/SaveTemplateButton.vue
@@ -20,7 +20,7 @@
 -->
 <template>
   <v-btn
-    :disabled="disabled"
+    :disabled="disabled && !newTemplate"
     :loading="loading"
     :aria-label="$t('layout.save')"
     class="btn btn-primary d-flex align-center"
@@ -40,21 +40,32 @@ export default {
   data: () => ({
     loading: false,
   }),
+  computed: {
+    newTemplate() {
+      return !this.$root.pageTemplate?.name;
+    },
+  },
   methods: {
     savePageTemplate() {
       const pageLayout = this.$layoutUtils.cleanAttributes(this.$root.layout, true, true);
-      this.$root.$emit('close-alert-message');
-      this.loading = true;
-      this.$pageTemplateService.getPageTemplate(this.$root.pageTemplateId)
-        .then(pageTemplate => this.$pageTemplateService.updatePageTemplate({
-          ...pageTemplate,
+      if (this.newTemplate) {
+        this.$root.$emit('layout-page-template-drawer-open', {
           content: JSON.stringify(pageLayout),
-        }))
-        .then(() => {
-          this.$root.$emit('alert-message', this.$t('pageTemplate.layout.update.success'), 'success');
-        })
-        .catch(() => this.$root.$emit('alert-message', this.$t('pageTemplate.layout.update.error'), 'error'))
-        .finally(() => this.loading = false);
+        });
+      } else {
+        this.$root.$emit('close-alert-message');
+        this.loading = true;
+        this.$pageTemplateService.getPageTemplate(this.$root.pageTemplateId)
+          .then(pageTemplate => this.$pageTemplateService.updatePageTemplate({
+            ...pageTemplate,
+            content: JSON.stringify(pageLayout),
+          }))
+          .then(() => {
+            this.$root.$emit('alert-message', this.$t('pageTemplate.layout.update.success'), 'success');
+          })
+          .catch(() => this.$root.$emit('alert-message', this.$t('pageTemplate.layout.update.error'), 'error'))
+          .finally(() => this.loading = false);
+      }
     },
   },
 };

diff --git a/.../src/main/webapp/vue-app/page-templates-management/components/PageTemplatesManagement.vue b/.../src/main/webapp/vue-app/page-templates-management/components/PageTemplatesManagement.vue
@@ -26,8 +26,7 @@
       </h4>
       <page-templates-management-toolbar
         ref="toolbar"
-        @page-templates-filter="keyword = $event"
-        @add-page-template="addPageTemplate" />
+        @page-templates-filter="keyword = $event" />
       <page-templates-management-list
         ref="list"
         :keyword="keyword" />
@@ -40,10 +39,5 @@ export default {
   data: () => ({
     keyword: null,
   }),
-  methods: {
-    addPageTemplate() {
-      // TODO
-    },
-  },
 };
 </script>
diff --git a/...ut-webapp/src/main/webapp/vue-app/page-templates-management/components/header/Toolbar.vue b/...ut-webapp/src/main/webapp/vue-app/page-templates-management/components/header/Toolbar.vue
@@ -36,8 +36,7 @@
         :aria-label="$t('pageTemplates.add')"
         :class="$root.isMobile && 'px-0'"
         class="btn btn-primary text-truncate"
-        disabled
-        @click="$emit('add-page-template')">
+        @click="$root.$emit('page-templates-create')">
         <v-icon
           size="18">
           fa-plus

diff --git a/...ebapp/src/main/webapp/vue-app/page-templates-management/components/list/PageTemplates.vue b/...ebapp/src/main/webapp/vue-app/page-templates-management/components/list/PageTemplates.vue
@@ -108,13 +108,16 @@ export default {
         },
       ];
     },
+    noEmptyPageTemplates() {
+      return this.pageTemplates?.filter?.(t => t.name);
+    },
     filteredPageTemplates() {
-      return this.keyword?.length && this.pageTemplates.filter(t => {
+      return this.keyword?.length && this.noEmptyPageTemplates.filter(t => {
         const name = this.$te(t.name) ? this.$t(t.name) : t.name;
         const description = this.$te(t.description) ? this.$t(t.description) : t.description;
         return name?.toLowerCase?.()?.includes(this.keyword.toLowerCase())
           || this.$utils.htmlToText(description)?.toLowerCase?.()?.includes(this.keyword.toLowerCase());
-      }) || this.pageTemplates;
+      }) || this.noEmptyPageTemplates;
     },
     nameToDelete() {
       return this.pageTemplateToDelete && this.$te(this.pageTemplateToDelete?.name) ? this.$t(this.pageTemplateToDelete?.name) : this.pageTemplateToDelete?.name;
@@ -124,12 +127,14 @@ export default {
     this.$root.$on('page-templates-saved', this.refreshPageTemplates);
     this.$root.$on('page-templates-refresh', this.refreshPageTemplates);
     this.$root.$on('page-templates-delete', this.deletePageTemplateConfirm);
+    this.$root.$on('page-templates-create', this.createPageTemplate);
     this.refreshPageTemplates();
   },
   beforeDestroy() {
     this.$root.$off('page-templates-saved', this.refreshPageTemplates);
     this.$root.$off('page-templates-refresh', this.refreshPageTemplates);
     this.$root.$off('page-templates-delete', this.deletePageTemplateConfirm);
+    this.$root.$off('page-templates-create', this.createPageTemplate);
   },
   methods: {
     deletePageTemplateConfirm(pageTemplate) {
@@ -154,6 +159,12 @@ export default {
         .catch(() => this.$root.$emit('alert-message', this.$t('pageTemplate.delete.error'), 'error'))
         .finally(() => this.loading = false);
     },
+    createPageTemplate() {
+      const columnsTemplate = this.pageTemplates.find(t => t.system && t.content.includes('FlexContainer'));
+      const columnsTemplateContent = columnsTemplate?.content || '{}';
+      this.$pageTemplateService.createPageTemplate(columnsTemplateContent, true)
+        .then(pageTemplate => window.open(`/portal/administration/layout-editor?pageTemplateId=${pageTemplate.id}`, '_blank'));
+    },
   },
 };
 </script>