feat: Add Page Templates Portlet - MEED-6843 - Meeds-io/MIPs#133

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

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>
 

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>

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>

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>

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>

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>

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>

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 [email protected]
+ * 
+ * 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]);
+}