feat: Allow to edit Page Template Layout - MEED-6847 - Meeds-io/MIPs#133

Meeds-io · May 21, 2024 · 9ef1d88 · 9ef1d88
1 parent 9a7abf8
commit 9ef1d88
Show file tree

Hide file tree

Showing 11 changed files with 160 additions and 132 deletions.
diff --git a/layout-webapp/src/main/resources/locale/portlet/LayoutEditor_en.properties b/layout-webapp/src/main/resources/locale/portlet/LayoutEditor_en.properties
@@ -1,5 +1,6 @@
 layout.publish=Publish
 layout.editPageName=Edit {0}
+layout.editPageTemplate=Edit Template {0}
 layout.addSectionBefore=Add a section above
 layout.addSectionAfter=Add a section below
 layout.editSection=Edit section
@@ -125,14 +126,20 @@ pageTemplates.menu.open=Open Menu
 pageTemplate.label.preview=Preview of {0} template
 pageTemplate.status.update.success=Template status successfully updated
 pageTemplate.status.update.error=An unknown error occurred while updating template status. Please contact the administrator or try agan later.
-pageTemplate.status.delete.success=Template status successfully deleted
-pageTemplate.status.delete.error=An unknown error occurred while deleting template status. Please contact the administrator or try agan later.
+pageTemplate.layout.update.success=Template layout successfully updated
+pageTemplate.layout.update.error=An unknown error occurred while updating template layout. Please contact the administrator or try agan later.
+pageTemplate.delete.success=Template successfully deleted
+pageTemplate.delete.error=An unknown error occurred while deleting template. Please contact the administrator or try agan later.
 pageTemplate.label.delete=Delete
+pageTemplate.label.editLayout=Edit Layout
 pageTemplate.label.editProperties=Edit Properties
 pageTemplate.label.duplicate=Duplicate
 pageTemplate.label.templateMenu={0}
 pageTemplate.label.closeMenu=Close Menu
+pageTemplate.label.enableTemplate=Enable Template
+pageTemplate.label.disableTemplate=Disable Template
 pageTemplate.label.system.noDelete=This product template cannot be deleted
+pageTemplate.label.system.noEditLayout=This product template's layout cannot be updated
 pageTemplate.label.confirmDeleteTitle=Delete page template?
 pageTemplate.label.confirmDeleteMessage=Would you like to delete page template: {0}
 pageTemplate.label.confirm=Confirm

diff --git a/layout-webapp/src/main/webapp/vue-app/layout-editor/components/LayoutEditor.vue b/layout-webapp/src/main/webapp/vue-app/layout-editor/components/LayoutEditor.vue
@@ -52,6 +52,9 @@ export default {
     pageKey() {
       return this.node?.state?.pageRef;
     },
+    pageTemplateId() {
+      return this.getQueryParam('pageTemplateId');
+    },
     pageRef() {
       return this.getQueryParam('pageId') || this.pageKey?.ref || (this.pageKey && `${this.pageKey.site.typeName}::${this.pageKey.site.name}::${this.pageKey.name}`);
     },
@@ -69,6 +72,14 @@ export default {
     },
   },
   watch: {
+    pageTemplateId: {
+      immediate: true,
+      handler() {
+        if (this.pageTemplateId) {
+          this.$root.pageTemplateId = this.pageTemplateId;
+        }
+      },
+    },
     pageRef: {
       immediate: true,
       handler() {
@@ -84,8 +95,18 @@ export default {
       handler() {
         if (this.draftPageRef) {
           this.$root.draftPageRef = this.draftPageRef;
-          this.$pageLayoutService.getPageLayout(this.draftPageRef, 'contentId')
-            .then(draftLayout => this.setDraftLayout(draftLayout));
+          if (this.pageTemplateId) {
+            this.$pageTemplateService.getPageTemplate(this.pageTemplateId)
+              .then(pageTemplate => this.$root.pageTemplate = pageTemplate)
+              .then(() => this.$pageLayoutService.updatePageLayout(
+                this.draftPageRef,
+                JSON.parse(this.$root.pageTemplate.content),
+                'contentId'))
+              .then(draftLayout => this.setDraftLayout(draftLayout));
+          } else {
+            this.$pageLayoutService.getPageLayout(this.draftPageRef, 'contentId')
+              .then(draftLayout => this.setDraftLayout(draftLayout));
+          }
         }
       },
     },

diff --git a/layout-webapp/src/main/webapp/vue-app/layout-editor/components/toolbar/Toolbar.vue b/layout-webapp/src/main/webapp/vue-app/layout-editor/components/toolbar/Toolbar.vue
@@ -26,12 +26,21 @@
     width="100vw"
     flat>
     <v-icon class="icon-default-color">fa-pager</v-icon>
-    <span class="px-2">{{ $t('layout.editPageName', {0: pageName}) }}</span>
+    <span v-if="pageTemplate" class="px-2">{{ $t('layout.editPageTemplate', {0: pageTemplate.name}) }}</span>
+    <span v-else-if="!pageTemplateId" class="px-2">{{ $t('layout.editPageName', {0: pageName}) }}</span>
     <v-spacer />
     <layout-editor-toolbar-history-buttons class="me-3" />
-    <layout-editor-toolbar-save-template-button class="me-3" />
-    <layout-editor-toolbar-preview-button class="me-3" />
-    <layout-editor-toolbar-save-button :disabled="disableSave" />
+    <layout-editor-toolbar-save-as-template-button
+      v-if="!pageTemplateId"
+      class="me-3" />
+    <layout-editor-toolbar-preview-button
+      class="me-3" />
+    <layout-editor-toolbar-save-template-button
+      v-if="pageTemplateId"
+      :disabled="disableSave" />
+    <layout-editor-toolbar-save-button
+      v-else
+      :disabled="disableSave" />
   </v-card>
 </template>
 <script>
@@ -58,6 +67,12 @@ export default {
     defaultLanguage() {
       return eXo.env.portal.defaultLanguage;
     },
+    pageTemplateId() {
+      return this.$root.pageTemplateId;
+    },
+    pageTemplate() {
+      return this.$root.pageTemplate;
+    },
     pageName() {
       return this.nodeLabels?.labels && (this.nodeLabels.labels[eXo.env.portal.language] || this.nodeLabels.labels[this.defaultLanguage]) || this.page?.title;
     },

diff --git a/...ut-webapp/src/main/webapp/vue-app/layout-editor/components/toolbar/actions/SaveButton.vue b/...ut-webapp/src/main/webapp/vue-app/layout-editor/components/toolbar/actions/SaveButton.vue
@@ -20,6 +20,7 @@
 -->
 <template>
   <v-btn
+    v-if="canSave"
     :disabled="disabled"
     :loading="loading"
     :aria-label="$t('layout.publish')"
@@ -40,8 +41,16 @@ export default {
   data: () => ({
     loading: false,
   }),
+  computed: {
+    canSave() {
+      return eXo.env.portal.selectedNodeId !== this.$root.nodeId;
+    },
+  },
   methods: {
     savePage() {
+      if (!this.canSave) {
+        return;
+      }
       this.loading = true;
       const layoutToUpdate = this.$layoutUtils.cleanAttributes(this.$root.layout, false, true);
       return this.$pageLayoutService.updatePageLayout(this.$root.pageRef, layoutToUpdate, 'contentId', true)

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
@@ -0,0 +1,61 @@
+<!--
+
+ This file is part of the Meeds project (https://meeds.io/).
+
+ Copyright (C) 2020 - 2024 Meeds Association contact@meeds.io
+
+ This program is free software; you can redistribute it and/or
+ modify it under the terms of the GNU Lesser General Public
+ License as published by the Free Software Foundation; either
+ version 3 of the License, or (at your option) any later version.
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ Lesser General Public License for more details.
+
+ You should have received a copy of the GNU Lesser General Public License
+ along with this program; if not, write to the Free Software Foundation,
+ Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+
+-->
+<template>
+  <v-btn
+    :disabled="disabled"
+    :loading="loading"
+    :aria-label="$t('layout.save')"
+    class="btn btn-primary d-flex align-center"
+    elevation="0"
+    @click="savePageTemplate">
+    <span class="text-none">{{ $t('layout.save') }}</span>
+  </v-btn>
+</template>
+<script>
+export default {
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data: () => ({
+    loading: false,
+  }),
+  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,
+          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);
+    },
+  },
+};
+</script>
diff --git a/layout-webapp/src/main/webapp/vue-app/layout-editor/initComponents.js b/layout-webapp/src/main/webapp/vue-app/layout-editor/initComponents.js
@@ -22,6 +22,7 @@ import LayoutEditor from './components/LayoutEditor.vue';
 import Toolbar from './components/toolbar/Toolbar.vue';
 import SaveButton from './components/toolbar/actions/SaveButton.vue';
 import SaveAsTemplateButton from './components/toolbar/actions/SaveAsTemplateButton.vue';
+import SaveTemplateButton from './components/toolbar/actions/SaveTemplateButton.vue';
 import HistoryButtons from './components/toolbar/actions/HistoryButtons.vue';
 import PreviewButton from './components/toolbar/actions/PreviewButton.vue';
 
@@ -64,7 +65,8 @@ const components = {
   'layout-editor': LayoutEditor,
   'layout-editor-toolbar': Toolbar,
   'layout-editor-toolbar-save-button': SaveButton,
-  'layout-editor-toolbar-save-template-button': SaveAsTemplateButton,
+  'layout-editor-toolbar-save-as-template-button': SaveAsTemplateButton,
+  'layout-editor-toolbar-save-template-button': SaveTemplateButton,
   'layout-editor-toolbar-history-buttons': HistoryButtons,
   'layout-editor-toolbar-preview-button': PreviewButton,
   'layout-editor-content': Content,

diff --git a/layout-webapp/src/main/webapp/vue-app/layout-editor/main.js b/layout-webapp/src/main/webapp/vue-app/layout-editor/main.js
@@ -59,6 +59,8 @@ export function init() {
           displayMode: 'desktop',
           layout: null,
           pageRef: null,
+          pageTemplate: null,
+          pageTemplateId: null,
           draftPageRef: null,
           draftNode: null,
           draftNodeId: null,

diff --git a/...pp/src/main/webapp/vue-app/page-templates-management/components/list/PageTemplateItem.vue b/...pp/src/main/webapp/vue-app/page-templates-management/components/list/PageTemplateItem.vue
@@ -38,6 +38,7 @@
       <v-switch
         v-model="enabled"
         :loading="loading"
+        :aria-label="enabled && $t('pageTemplate.label.disableTemplate') || $t('pageTemplate.label.enableTemplate')"
         class="mt-0 mx-auto"
         @click="changeStatus" />
     </td>

diff --git a/...n/webapp/vue-app/page-templates-management/components/list/PageTemplateItemBottomMenu.vue b/...n/webapp/vue-app/page-templates-management/components/list/PageTemplateItemBottomMenu.vue