From 7437442891e74b274879e12db26a9407a4584f33 Mon Sep 17 00:00:00 2001
From: Boubaker Khanfir <boubaker.khanfir@exoplatform.com>
Date: Fri, 17 May 2024 12:32:37 +0100
Subject: [PATCH] feat: Add Page Templates Portlet - MEED-6843 -
 Meeds-io/MIPs#133 (#63)

---
 .../io/meeds/layout/LayoutApplication.java    |  3 +-
 .../locale/portlet/LayoutEditor_en.properties |  7 ++
 .../main/webapp/WEB-INF/gatein-resources.xml  | 43 ++++++++---
 .../src/main/webapp/WEB-INF/portlet.xml       | 19 +++++
 .../webapp/html/pageTemplatesManagement.html  |  7 ++
 .../components/PageTemplatesManagement.vue    | 48 +++++++++++++
 .../components/header/Toolbar.vue             | 57 +++++++++++++++
 .../components/list/PageTemplateItem.vue      | 52 ++++++++++++++
 .../components/list/PageTemplates.vue         | 72 +++++++++++++++++++
 .../initComponents.js                         | 36 ++++++++++
 .../vue-app/page-templates-management/main.js | 50 +++++++++++++
 layout-webapp/webpack.prod.js                 |  1 +
 12 files changed, 385 insertions(+), 10 deletions(-)
 create mode 100644 layout-webapp/src/main/webapp/html/pageTemplatesManagement.html
 create mode 100644 layout-webapp/src/main/webapp/vue-app/page-templates-management/components/PageTemplatesManagement.vue
 create mode 100644 layout-webapp/src/main/webapp/vue-app/page-templates-management/components/header/Toolbar.vue
 create mode 100644 layout-webapp/src/main/webapp/vue-app/page-templates-management/components/list/PageTemplateItem.vue
 create mode 100644 layout-webapp/src/main/webapp/vue-app/page-templates-management/components/list/PageTemplates.vue
 create mode 100644 layout-webapp/src/main/webapp/vue-app/page-templates-management/initComponents.js
 create mode 100644 layout-webapp/src/main/webapp/vue-app/page-templates-management/main.js

diff --git a/layout-webapp/src/main/java/io/meeds/layout/LayoutApplication.java b/layout-webapp/src/main/java/io/meeds/layout/LayoutApplication.java
index f20693629..7ba39cbbe 100644
--- a/layout-webapp/src/main/java/io/meeds/layout/LayoutApplication.java
+++ b/layout-webapp/src/main/java/io/meeds/layout/LayoutApplication.java
@@ -27,8 +27,7 @@
   AvailableIntegration.KERNEL_MODULE,
   AvailableIntegration.JPA_MODULE,
   AvailableIntegration.LIQUIBASE_MODULE,
-  AvailableIntegration.WEB_SECURITY_MODULE,
-  AvailableIntegration.WEB_TRANSACTION_MODULE,
+  AvailableIntegration.WEB_MODULE,
 })
 @EnableJpaRepositories(basePackages = LayoutApplication.MODULE_NAME)
 @PropertySource("classpath:application.properties")
diff --git a/layout-webapp/src/main/resources/locale/portlet/LayoutEditor_en.properties b/layout-webapp/src/main/resources/locale/portlet/LayoutEditor_en.properties
index 360ede8ad..ededd1635 100644
--- a/layout-webapp/src/main/resources/locale/portlet/LayoutEditor_en.properties
+++ b/layout-webapp/src/main/resources/locale/portlet/LayoutEditor_en.properties
@@ -110,3 +110,10 @@ layout.reminder.description.part1=From now on, in few clicks, design your page u
 layout.reminder.description.part2=- Organize Pages in Sections
 layout.reminder.description.part3=- Manage Apps Display
 layout.reminder.description.part4=- Preview Page Content
+
+pageTemplates.title=Page Templates
+pageTemplates.add=Add
+pageTemplates.filter.placeholder=Filter by name, description
+pageTemplates.label.name=Name
+pageTemplates.label.description=Description
+pageTemplate.label.preview=Preview of {0} template
diff --git a/layout-webapp/src/main/webapp/WEB-INF/gatein-resources.xml b/layout-webapp/src/main/webapp/WEB-INF/gatein-resources.xml
index 6e325efc8..3a7668f35 100644
--- a/layout-webapp/src/main/webapp/WEB-INF/gatein-resources.xml
+++ b/layout-webapp/src/main/webapp/WEB-INF/gatein-resources.xml
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="ISO-8859-1" ?>
+<?xml version="1.0" encoding="UTF-8" ?>
 <!--
 
 	This file is part of the Meeds project (https://meeds.io/).
@@ -20,9 +20,9 @@
 
 -->
 <gatein-resources
-    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-    xsi:schemaLocation="http://www.exoplatform.org/xml/ns/gatein_resources_1_4 http://www.exoplatform.org/xml/ns/gatein_resources_1_4"
-    xmlns="http://www.exoplatform.org/xml/ns/gatein_resources_1_4">
+  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+  xsi:schemaLocation="http://www.exoplatform.org/xml/ns/gatein_resources_1_4 http://www.exoplatform.org/xml/ns/gatein_resources_1_4"
+  xmlns="http://www.exoplatform.org/xml/ns/gatein_resources_1_4">
 
   <portlet-skin>
     <application-name>layout</application-name>
@@ -214,10 +214,6 @@
       <depends>
         <module>imageCropper</module>
       </depends>
-      <depends>
-        <module>cropper</module>
-        <as>Cropper</as>
-      </depends>
       <depends>
         <module>commonLayoutComponents</module>
       </depends>
@@ -239,5 +235,36 @@
     </module>
   </portlet>
 
+  <portlet>
+    <name>PageTemplatesManagement</name>
+    <module>
+      <script>
+        <minify>false</minify>
+        <path>/js/pageTemplatesManagement.bundle.js</path>
+      </script>
+      <depends>
+        <module>commonVueComponents</module>
+      </depends>
+      <depends>
+        <module>commonLayoutComponents</module>
+      </depends>
+      <depends>
+        <module>attachImage</module>
+      </depends>
+      <depends>
+        <module>translationField</module>
+      </depends>
+      <depends>
+        <module>applicationToolbarComponent</module>
+      </depends>
+      <depends>
+        <module>extensionRegistry</module>
+      </depends>
+      <depends>
+        <module>eXoVueI18n</module>
+      </depends>
+    </module>
+  </portlet>
+
 </gatein-resources>
 
diff --git a/layout-webapp/src/main/webapp/WEB-INF/portlet.xml b/layout-webapp/src/main/webapp/WEB-INF/portlet.xml
index fb17c13d7..946a7ecdb 100644
--- a/layout-webapp/src/main/webapp/WEB-INF/portlet.xml
+++ b/layout-webapp/src/main/webapp/WEB-INF/portlet.xml
@@ -78,4 +78,23 @@
     </portlet-info>
   </portlet>
 
+  <portlet>
+    <portlet-name>PageTemplatesManagement</portlet-name>
+    <display-name>Page Templates Management Portlet</display-name>
+    <portlet-class>org.exoplatform.commons.api.portlet.GenericDispatchedViewPortlet</portlet-class>
+    <init-param>
+      <name>portlet-view-dispatched-file-path</name>
+      <value>/html/pageTemplatesManagement.html</value>
+    </init-param>
+    <supports>
+      <mime-type>text/html</mime-type>
+    </supports>
+    <supported-locale>en</supported-locale>
+    <resource-bundle>locale.portlet.LayoutEditor</resource-bundle>
+    <portlet-info>
+      <title>site navigation</title>
+      <keywords>site navigation Management</keywords>
+    </portlet-info>
+  </portlet>
+
 </portlet-app>
diff --git a/layout-webapp/src/main/webapp/html/pageTemplatesManagement.html b/layout-webapp/src/main/webapp/html/pageTemplatesManagement.html
new file mode 100644
index 000000000..3a077d97b
--- /dev/null
+++ b/layout-webapp/src/main/webapp/html/pageTemplatesManagement.html
@@ -0,0 +1,7 @@
+<div class="VuetifyApp">
+  <div id="pageTemplatesManagement">
+    <script type="text/javascript">
+      require(['PORTLET/layout/PageTemplatesManagement'], app => app.init());
+    </script>
+  </div>
+</div>
diff --git a/layout-webapp/src/main/webapp/vue-app/page-templates-management/components/PageTemplatesManagement.vue b/layout-webapp/src/main/webapp/vue-app/page-templates-management/components/PageTemplatesManagement.vue
new file mode 100644
index 000000000..665764fc0
--- /dev/null
+++ b/layout-webapp/src/main/webapp/vue-app/page-templates-management/components/PageTemplatesManagement.vue
@@ -0,0 +1,48 @@
+<!--
+
+  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-app>
+    <v-card class="card-border-radius overflow-hidden pb-5" flat>
+      <h4 class="title font-weight-bold px-5 pt-5 ma-0">
+        {{ $t('pageTemplates.title') }}
+      </h4>
+      <page-templates-management-toolbar
+        ref="toolbar"
+        @page-templates-filter="keyword = $event"
+        @add-page-template="addPageTemplate" />
+      <page-templates-management-list
+        ref="list"
+        :keyword="keyword" />
+    </v-card>
+  </v-app>
+</template>
+<script>
+export default {
+  data: () => ({
+    keyword: null,
+  }),
+  methods: {
+    addPageTemplate() {
+      // TODO
+    },
+  },
+};
+</script>
diff --git a/layout-webapp/src/main/webapp/vue-app/page-templates-management/components/header/Toolbar.vue b/layout-webapp/src/main/webapp/vue-app/page-templates-management/components/header/Toolbar.vue
new file mode 100644
index 000000000..bf6b0eb99
--- /dev/null
+++ b/layout-webapp/src/main/webapp/vue-app/page-templates-management/components/header/Toolbar.vue
@@ -0,0 +1,57 @@
+<!--
+
+  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>
+  <application-toolbar
+    id="pageTemplatesApplication"
+    :right-text-filter="{
+      hide: false,
+      minCharacters: 1,
+      text: $t('pageTemplates.add'),
+      placeholder: $t('pageTemplates.filter.placeholder'),
+      tooltip: $t('pageTemplates.filter.placeholder'),
+    }"
+    @filter-text-input-end-typing="$emit('page-templates-filter', $event)">
+    <template #left>
+      <v-btn
+        id="applicationToolbarLeftButton"
+        :aria-label="$t('pageTemplates.add')"
+        class="btn btn-primary text-truncate"
+        disabled
+        @click="$emit('add-page-template')">
+        <v-icon
+          class="me-2"
+          size="18">
+          fa-plus
+        </v-icon>
+        <span class="text-truncate text-none">
+          {{ $t('pageTemplates.add') }}
+        </span>
+      </v-btn>
+    </template>
+  </application-toolbar>
+</template>
+<script>
+export default {
+  data: () => ({
+    pageTemplates: null,
+  }),
+};
+</script>
diff --git a/layout-webapp/src/main/webapp/vue-app/page-templates-management/components/list/PageTemplateItem.vue b/layout-webapp/src/main/webapp/vue-app/page-templates-management/components/list/PageTemplateItem.vue
new file mode 100644
index 000000000..ced1f241e
--- /dev/null
+++ b/layout-webapp/src/main/webapp/vue-app/page-templates-management/components/list/PageTemplateItem.vue
@@ -0,0 +1,52 @@
+<template>
+  <tr>
+    <!-- Illustration -->
+    <td align="center" width="70px">
+      <div :aria-label="$t('pageTemplate.label.preview', {0: name})">
+        <v-img
+          :src="illustrationSrc"
+          max-height="30"
+          max-width="60" />
+      </div>
+    </td>
+    <!-- name -->
+    <td
+      align="left"
+      class="text-truncate"
+      width="auto"
+      v-sanitized-html="name"></td>
+    <!-- description -->
+    <td
+      v-if="!$root.isMobile"
+      align="left"
+      class="text-truncate"
+      v-sanitized-html="description"></td>
+  </tr>
+</template>
+<script>
+export default {
+  props: {
+    pageTemplate: {
+      type: Object,
+      default: null,
+    },
+  },
+  computed: {
+    pageTemplateId() {
+      return this.pageTemplate?.id;
+    },
+    name() {
+      return this.$te(this.pageTemplate?.name) ? this.$t(this.pageTemplate?.name) : this.pageTemplate?.name;
+    },
+    description() {
+      return this.$te(this.pageTemplate?.description) ? this.$t(this.pageTemplate?.description) : this.pageTemplate?.description;
+    },
+    illustrationId() {
+      return this.pageTemplate?.illustrationId;
+    },
+    illustrationSrc() {
+      return this.illustrationId && `${eXo.env.portal.context}/${eXo.env.portal.rest}/v1/social/attachments/pageTemplate/${this.pageTemplateId}/${this.illustrationId}` || '/layout/images/page-templates/DefaultPreview.webp';
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/layout-webapp/src/main/webapp/vue-app/page-templates-management/components/list/PageTemplates.vue b/layout-webapp/src/main/webapp/vue-app/page-templates-management/components/list/PageTemplates.vue
new file mode 100644
index 000000000..3b7754a47
--- /dev/null
+++ b/layout-webapp/src/main/webapp/vue-app/page-templates-management/components/list/PageTemplates.vue
@@ -0,0 +1,72 @@
+<template>
+  <v-data-table
+    :headers="headers"
+    :items="pageTemplates"
+    :loading="loading"
+    :disable-sort="$root.isMobile"
+    :hide-default-header="$root.isMobile"
+    disable-pagination
+    hide-default-footer
+    class="pageTemplatesTable px-5">
+    <template slot="item" slot-scope="props">
+      <page-templates-management-item
+        :key="props.item.name"
+        :page-template="props.item" />
+    </template>
+  </v-data-table>
+</template>
+<script>
+export default {
+  props: {
+    keyword: {
+      type: String,
+      default: null,
+    },
+  },
+  data: () => ({
+    pageTemplates: [],
+    loading: false,
+  }),
+  computed: {
+    headers() {
+      return [
+        {
+          text: '',
+          value: 'illustrationId',
+          align: 'center',
+          sortable: false,
+          class: 'page-template-illustration-header',
+          width: '60px'
+        },
+        {
+          text: this.$t('pageTemplates.label.name'),
+          value: 'name',
+          align: 'left',
+          sortable: true,
+          class: 'page-template-name-header',
+          width: '20%'
+        },
+        {
+          text: this.$t('pageTemplates.label.description'),
+          value: 'description',
+          align: 'center',
+          sortable: false,
+          class: 'page-template-description-header',
+          width: '70%'
+        },
+      ];
+    },
+  },
+  created() {
+    this.refreshPageTemplates();
+  },
+  methods: {
+    refreshPageTemplates() {
+      this.loading = true;
+      return this.$pageTemplateService.getPageTemplates()
+        .then(pageTemplates => this.pageTemplates = pageTemplates || [])
+        .finally(() => this.loading = false);
+    },
+  },
+};
+</script>
diff --git a/layout-webapp/src/main/webapp/vue-app/page-templates-management/initComponents.js b/layout-webapp/src/main/webapp/vue-app/page-templates-management/initComponents.js
new file mode 100644
index 000000000..e71d3c9c0
--- /dev/null
+++ b/layout-webapp/src/main/webapp/vue-app/page-templates-management/initComponents.js
@@ -0,0 +1,36 @@
+/*
+ * 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.
+ */
+
+import PageTemplatesManagement from './components/PageTemplatesManagement.vue';
+
+import Toolbar from './components/header/Toolbar.vue';
+import PageTemplates from './components/list/PageTemplates.vue';
+
+import PageTemplateItem from './components/list/PageTemplateItem.vue';
+
+const components = {
+  'page-templates-management': PageTemplatesManagement,
+  'page-templates-management-toolbar': Toolbar,
+  'page-templates-management-list': PageTemplates,
+  'page-templates-management-item': PageTemplateItem,
+};
+
+for (const key in components) {
+  Vue.component(key, components[key]);
+}
diff --git a/layout-webapp/src/main/webapp/vue-app/page-templates-management/main.js b/layout-webapp/src/main/webapp/vue-app/page-templates-management/main.js
new file mode 100644
index 000000000..c7695b344
--- /dev/null
+++ b/layout-webapp/src/main/webapp/vue-app/page-templates-management/main.js
@@ -0,0 +1,50 @@
+/*
+ * 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.
+ */
+
+import './initComponents.js';
+
+// get overridden components if exists
+if (extensionRegistry) {
+  const components = extensionRegistry.loadComponents('PageTemplatesManagement');
+  if (components && components.length > 0) {
+    components.forEach(cmp => {
+      Vue.component(cmp.componentName, cmp.componentOptions);
+    });
+  }
+}
+
+const lang = eXo?.env.portal.language || 'en';
+const url = `${eXo.env.portal.context}/${eXo.env.portal.rest}/i18n/bundle/locale.portlet.LayoutEditor-${lang}.json`;
+
+const appId = 'pageTemplatesManagement';
+export function init() {
+  exoi18n.loadLanguageAsync(lang, url)
+    .then(i18n =>
+      Vue.createApp({
+        template: `<page-templates-management id="${appId}"/>`,
+        vuetify: Vue.prototype.vuetifyOptions,
+        i18n,
+        computed: {
+          isMobile() {
+            return this.$vuetify.breakpoint.smAndDown;
+          },
+        },
+      }, `#${appId}`, 'Page Layout')
+    );
+}
diff --git a/layout-webapp/webpack.prod.js b/layout-webapp/webpack.prod.js
index 5c3f10a5a..1eb9c1feb 100644
--- a/layout-webapp/webpack.prod.js
+++ b/layout-webapp/webpack.prod.js
@@ -9,6 +9,7 @@ const config = {
     siteManagement: './src/main/webapp/vue-app/site-management/main.js',
     layoutEditor: './src/main/webapp/vue-app/layout-editor/main.js',
     pageLayout: './src/main/webapp/vue-app/page-layout/main.js',
+    pageTemplatesManagement: './src/main/webapp/vue-app/page-templates-management/main.js',
   },
   mode: 'production',
   context: path.resolve(__dirname, '.'),