feat: Add a button from Portlet instance preview dialog - MEED-6924 - M…

…eeds-io/MIPs#139 (#97) This change will add a button in Applications Drawer inside the illustration preview, to be able to add the application.
Meeds-io · Jun 7, 2024 · 5451c7a · 5451c7a
1 parent d4cbe2f
commit 5451c7a
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 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
@@ -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/...bapp/src/main/webapp/vue-app/common-illustration/components/IllustrationPreviewDialog.vue b/...bapp/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>
diff --git a/...ebapp/src/main/webapp/vue-app/layout-editor/components/content/common/ApplicationCard.vue b/...ebapp/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() {