From f863769301d520d5c3b374a01d484f23a994d0e5 Mon Sep 17 00:00:00 2001
From: Boubaker Khanfir <boubaker.khanfir@exoplatform.com>
Date: Mon, 20 May 2024 13:34:41 +0100
Subject: [PATCH] feat: Add Page Template Illustration Preview - MEED-6849 -
 Meeds-io/MIPs#133

---
 .../locale/portlet/LayoutEditor_en.properties |  2 +
 .../components/PageTemplatesManagement.vue    |  1 +
 .../list/PageTemplateIllustration.vue         | 74 +++++++++++++++++
 .../PageTemplateIllustrationPreviewDialog.vue | 80 +++++++++++++++++++
 .../components/list/PageTemplateItem.vue      | 14 +---
 .../initComponents.js                         |  5 ++
 6 files changed, 164 insertions(+), 12 deletions(-)
 create mode 100644 layout-webapp/src/main/webapp/vue-app/page-templates-management/components/list/PageTemplateIllustration.vue
 create mode 100644 layout-webapp/src/main/webapp/vue-app/page-templates-management/components/list/PageTemplateIllustrationPreviewDialog.vue

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 884a98655..5dd0c6b80 100644
--- a/layout-webapp/src/main/resources/locale/portlet/LayoutEditor_en.properties
+++ b/layout-webapp/src/main/resources/locale/portlet/LayoutEditor_en.properties
@@ -136,6 +136,8 @@ pageTemplate.label.editProperties=Edit Properties
 pageTemplate.label.duplicate=Duplicate
 pageTemplate.label.templateMenu={0}
 pageTemplate.label.closeMenu=Close Menu
+pageTemplate.label.close=Close
+pageTemplate.label.openIllustrationPreview=Open illustration Preview
 pageTemplate.label.enableTemplate=Enable Template
 pageTemplate.label.disableTemplate=Disable Template
 pageTemplate.label.system.noDelete=This product template cannot be deleted
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
index bedce382e..1bca737d9 100644
--- 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
@@ -32,6 +32,7 @@
         :keyword="keyword" />
     </v-card>
     <layout-editor-page-template-drawer />
+    <page-templates-management-illustration-preview />
   </v-app>
 </template>
 <script>
diff --git a/layout-webapp/src/main/webapp/vue-app/page-templates-management/components/list/PageTemplateIllustration.vue b/layout-webapp/src/main/webapp/vue-app/page-templates-management/components/list/PageTemplateIllustration.vue
new file mode 100644
index 000000000..3c3a9171c
--- /dev/null
+++ b/layout-webapp/src/main/webapp/vue-app/page-templates-management/components/list/PageTemplateIllustration.vue
@@ -0,0 +1,74 @@
+<!--
+
+ 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-hover v-model="hover" :disabled="!illustrationId">
+    <div
+      :aria-label="$t('pageTemplate.label.preview', {0: name})"
+      class="position-relative full-height full-width d-flex align-center justify-center">
+      <v-expand-transition>
+        <v-card
+          v-if="hover"
+          :aria-label="$t('pageTemplate.label.openIllustrationPreview')"
+          class="d-flex absolute-full-size z-index-one align-center justify-center transition-fast-in-fast-out grey opacity-5"
+          flat
+          @click="openIllustration">
+          <v-icon color="white">fa-search</v-icon>
+        </v-card>
+      </v-expand-transition>
+      <v-img
+        :src="illustrationSrc"
+        max-height="30"
+        max-width="60" />
+    </div>
+  </v-hover>
+</template>
+<script>
+export default {
+  props: {
+    pageTemplate: {
+      type: Object,
+      default: null,
+    },
+  },
+  data: () => ({
+    hover: false,
+  }),
+  computed: {
+    pageTemplateId() {
+      return this.pageTemplate?.id;
+    },
+    name() {
+      return this.$te(this.pageTemplate?.name) ? this.$t(this.pageTemplate?.name) : this.pageTemplate?.name;
+    },
+    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';
+    },
+  },
+  methods: {
+    openIllustration() {
+      this.$root.$emit('page-templates-illustration-preview', this.illustrationSrc);
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/layout-webapp/src/main/webapp/vue-app/page-templates-management/components/list/PageTemplateIllustrationPreviewDialog.vue b/layout-webapp/src/main/webapp/vue-app/page-templates-management/components/list/PageTemplateIllustrationPreviewDialog.vue
new file mode 100644
index 000000000..3dde80a6c
--- /dev/null
+++ b/layout-webapp/src/main/webapp/vue-app/page-templates-management/components/list/PageTemplateIllustrationPreviewDialog.vue
@@ -0,0 +1,80 @@
+<!--
+
+ 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-dialog
+    v-model="dialog"
+    :persistent="false"
+    height="100%"
+    max-height="100%"
+    width="100%"
+    max-width="100%"
+    overlay-opacity="0.9"
+    content-class="overflow-y-initial full-height full-width pa-5">
+    <template v-if="dialog">
+      <div class="d-flex justify-end">
+        <v-btn
+          :aria-label="$t('pageTemplate.label.close')"
+          class="ma-4"
+          icon
+          @click="dialog = false">
+          <v-icon color="white">fa-times</v-icon>
+        </v-btn>
+      </div>
+      <v-card
+        max-height="80vh"
+        class="transparent"
+        flat
+        @click="dialog = false">
+        <v-img
+          :src="illustrationSrc"
+          :aspect-ratio="2"
+          height="80vh"
+          contain />
+      </v-card>
+    </template>
+  </v-dialog>
+</template>
+<script>
+export default {
+  data: () => ({
+    dialog: false,
+    illustrationSrc: null, 
+  }),
+  watch: {
+    dialog() {
+      if (this.dialog) {
+        document.dispatchEvent(new CustomEvent('modalOpened'));
+      } else {
+        document.dispatchEvent(new CustomEvent('modalClosed'));
+      }
+    }
+  },
+  created() {
+    this.$root.$on('page-templates-illustration-preview', this.open);
+  },
+  methods: {
+    open(illustrationSrc) {
+      this.illustrationSrc = illustrationSrc;
+      this.dialog = true;
+    },
+  }
+};
+</script>
\ No newline at end of file
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
index e4faf5e42..1ed7519f8 100644
--- 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
@@ -5,12 +5,8 @@
       v-if="!$root.isMobile"
       align="center"
       width="70px">
-      <div :aria-label="$t('pageTemplate.label.preview', {0: name})">
-        <v-img
-          :src="illustrationSrc"
-          max-height="30"
-          max-width="60" />
-      </div>
+      <page-templates-management-item-illustration
+        :page-template="pageTemplate" />
     </td>
     <!-- name -->
     <td
@@ -74,12 +70,6 @@ export default {
     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';
-    },
     category() {
       const i18nKey = `layout.pageTemplate.category.${this.pageTemplate?.category}`;
       return this.pageTemplate?.category
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
index a6ddb80c2..9aa1c78d5 100644
--- 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
@@ -27,6 +27,9 @@ import PageTemplateItemMenu from './components/list/PageTemplateItemMenu.vue';
 import PageTemplateDrawer from '../layout-editor/components/drawer/PageTemplateDrawer.vue';
 import PageTemplatePreview from '../layout-editor/components/form/PageTemplatePreview.vue';
 
+import PageTemplateIllustration from './components/list/PageTemplateIllustration.vue';
+import PageTemplateIllustrationPreviewDialog from './components/list/PageTemplateIllustrationPreviewDialog.vue';
+
 const components = {
   'page-templates-management': PageTemplatesManagement,
 
@@ -35,6 +38,8 @@ const components = {
 
   'page-templates-management-item': PageTemplateItem,
   'page-templates-management-item-menu': PageTemplateItemMenu,
+  'page-templates-management-item-illustration': PageTemplateIllustration,
+  'page-templates-management-illustration-preview': PageTemplateIllustrationPreviewDialog,
 
   'layout-editor-page-template-drawer': PageTemplateDrawer,
   'layout-editor-page-template-preview': PageTemplatePreview,