From b33d69c32a1d7aeae69a63f8bf9f4b4a00612fba Mon Sep 17 00:00:00 2001
From: Boubaker Khanfir <boubaker.khanfir@exoplatform.com>
Date: Mon, 3 Jun 2024 12:54:46 +0100
Subject: [PATCH] feat: Add a button from Portlet instance preview dialog -
 MEED-6924 - Meeds-io/MIPs#139 (#97)

This change will add a button in Applications Drawer inside the
illustration preview, to be able to add the application.
---
 .../components/Illustration.vue               |  6 +++-
 .../components/IllustrationPreviewDialog.vue  | 28 +++++++++++++++++--
 .../content/common/ApplicationCard.vue        |  8 ++++++
 3 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/layout-webapp/src/main/webapp/vue-app/common-illustration/components/Illustration.vue b/layout-webapp/src/main/webapp/vue-app/common-illustration/components/Illustration.vue
index 008f4ba24..a6dc9941a 100644
--- a/layout-webapp/src/main/webapp/vue-app/common-illustration/components/Illustration.vue
+++ b/layout-webapp/src/main/webapp/vue-app/common-illustration/components/Illustration.vue
@@ -68,6 +68,10 @@ export default {
       type: String,
       default: () => '60',
     },
+    previewAction: {
+      type: String,
+      default: null,
+    },
   },
   data: () => ({
     hover: false,
@@ -88,7 +92,7 @@ export default {
   },
   methods: {
     openIllustration() {
-      this.$root.$emit('layout-illustration-preview', this.illustrationSrc);
+      this.$root.$emit('layout-illustration-preview', this.illustrationSrc, this.previewAction);
     },
   },
 };
diff --git a/layout-webapp/src/main/webapp/vue-app/common-illustration/components/IllustrationPreviewDialog.vue b/layout-webapp/src/main/webapp/vue-app/common-illustration/components/IllustrationPreviewDialog.vue
index 338983a7e..bf1205bed 100644
--- a/layout-webapp/src/main/webapp/vue-app/common-illustration/components/IllustrationPreviewDialog.vue
+++ b/layout-webapp/src/main/webapp/vue-app/common-illustration/components/IllustrationPreviewDialog.vue
@@ -30,6 +30,14 @@
     content-class="overflow-y-initial full-height full-width pa-5">
     <template v-if="dialog">
       <div class="d-flex justify-end">
+        <v-btn
+          v-if="actionClick"
+          :aria-label="actionLabel"
+          class="btn btn-primary my-4"
+          @click="clickOnAction">
+          <v-icon v-if="actionIcon" color="white">{{ actionIcon }}</v-icon>
+          <span>{{ actionLabel }}</span>
+        </v-btn>
         <v-btn
           :aria-label="$t('pageTemplate.label.close')"
           class="ma-4"
@@ -56,7 +64,11 @@
 export default {
   data: () => ({
     dialog: false,
-    illustrationSrc: null, 
+    illustrationSrc: null,
+    actionLabel: null,
+    actionIcon: null,
+    actionClick: null,
+    actionCloseOnClick: null,
   }),
   watch: {
     dialog() {
@@ -71,10 +83,22 @@ export default {
     this.$root.$on('layout-illustration-preview', this.open);
   },
   methods: {
-    open(illustrationSrc) {
+    open(illustrationSrc, action) {
       this.illustrationSrc = illustrationSrc;
+      this.actionIcon = action?.icon;
+      this.actionLabel = action?.label;
+      this.actionClick = action?.click;
+      this.actionCloseOnClick = action?.closeOnClick;
       this.dialog = true;
     },
+    clickOnAction() {
+      if (this.actionCloseOnClick) {
+        this.dialog = false;
+      }
+      if (this.actionClick) {
+        this.actionClick();
+      }
+    },
   }
 };
 </script>
\ No newline at end of file
diff --git a/layout-webapp/src/main/webapp/vue-app/layout-editor/components/content/common/ApplicationCard.vue b/layout-webapp/src/main/webapp/vue-app/layout-editor/components/content/common/ApplicationCard.vue
index f7347eae1..16cb609d9 100644
--- a/layout-webapp/src/main/webapp/vue-app/layout-editor/components/content/common/ApplicationCard.vue
+++ b/layout-webapp/src/main/webapp/vue-app/layout-editor/components/content/common/ApplicationCard.vue
@@ -62,6 +62,7 @@
         <layout-image-illustration
           ref="illustration"
           :value="application"
+          :preview-action="illustrationAction"
           object-type="portletInstance"
           max-height="110"
           max-width="100%"
@@ -98,6 +99,13 @@ export default {
     illustrationSrc() {
       return this.illustrationId && `${eXo.env.portal.context}/${eXo.env.portal.rest}/v1/social/attachments/portletInstance/${this.instanceId}/${this.illustrationId}` || this.defaultImageSrc;
     },
+    illustrationAction() {
+      return {
+        label: this.$t('layout.add'),
+        closeOnClick: true,
+        click: () => this.$emit('add'),
+      };
+    },
   },
   methods: {
     preview() {