Meeds-io · boubaker · Jun 1, 2024 · Jun 1, 2024
diff --git a/layout-service/src/main/java/io/meeds/layout/service/PortletInstanceRenderService.java b/layout-service/src/main/java/io/meeds/layout/service/PortletInstanceRenderService.java
@@ -69,8 +69,11 @@ public class PortletInstanceRenderService {
 
   private static final Context                         CONTEXT                        = Context.GLOBAL.id("PORTLET_INSTANCE");
 
-  private static final Scope                           SCOPE                          =
-                                                             Scope.APPLICATION.id("PORTLET_INSTANCE_APPLICATION");
+  private static final Scope                           PORTLET_INSTANCE_SCOPE         =
+                                                                              Scope.APPLICATION.id("PORTLET_INSTANCE_APPLICATION");
+
+  private static final Scope                           PAGE_APPLICATION_SCOPE         =
+                                                                              Scope.APPLICATION.id("APPLICATION_PORTLET_INSTANCE");
 
   private static final PageKey                         PORTLET_EDITOR_SYSTEM_PAGE_KEY = new PageKey(SiteKey.portal("global"),
                                                                                                     "_portletEditor");
@@ -139,6 +142,10 @@ public List<PortletInstancePreference> getPortletInstancePreferences(long portle
     }
   }
 
+  public long getApplicationPortletInstanceId(long applicationId) {
+    return getSettingValue(PAGE_APPLICATION_SCOPE, applicationId);
+  }
+
   private Application<?> getOrCreatePortletInstanceApplication(String portletInstanceId,
                                                                String userName) throws IllegalAccessException,
                                                                                 ObjectNotFoundException {
@@ -202,7 +209,11 @@ private synchronized Application<Portlet> createPortletInstanceApplication(Portl
   }
 
   private long getPortletInstanceApplicationId(long portletInstanceId) {
-    SettingValue<?> settingValue = settingService.get(CONTEXT, SCOPE, String.valueOf(portletInstanceId));
+    return getSettingValue(PORTLET_INSTANCE_SCOPE, portletInstanceId);
+  }
+
+  private long getSettingValue(Scope scope, long id) {
+    SettingValue<?> settingValue = settingService.get(CONTEXT, scope, String.valueOf(id));
     if (settingValue != null && settingValue.getValue() != null && StringUtils.isNotBlank(settingValue.getValue().toString())) {
       return Long.parseLong(settingValue.getValue().toString());
     } else {
@@ -212,9 +223,13 @@ private long getPortletInstanceApplicationId(long portletInstanceId) {
 
   private void savePortletInstanceApplicationId(long applicationStorageId, long portletInstanceId) {
     settingService.set(CONTEXT,
-                       SCOPE,
+                       PORTLET_INSTANCE_SCOPE,
                        String.valueOf(portletInstanceId),
                        SettingValue.create(applicationStorageId));
+    settingService.set(CONTEXT,
+                       PAGE_APPLICATION_SCOPE,
+                       String.valueOf(applicationStorageId),
+                       SettingValue.create(portletInstanceId));
   }
 
   private Container getPortletInstanceSystemContainer() {

diff --git a/layout-webapp/.eslintrc.json b/layout-webapp/.eslintrc.json
@@ -3,13 +3,10 @@
     "eslint-config-meedsio"
   ],
   "globals": {
-    "jQuery": true,
-    "echarts": true,
-    "fontLibrary": true
+    "html2canvas": true
   },
   "rules": {
     "vue/multi-word-component-names": "off",
-    "vue/no-mutating-props": ["warn"],
-    "no-restricted-imports": ["warn", "axios"]
+    "vue/no-mutating-props": ["warn"]
   }
 }
diff --git a/layout-webapp/src/main/resources/locale/portlet/LayoutEditor_en.properties b/layout-webapp/src/main/resources/locale/portlet/LayoutEditor_en.properties
@@ -280,6 +280,7 @@ layout.portletInstanceCategoryCreatedSuccessfully=Portlet Instance Category crea
 layout.portletInstanceCategoryUpdatedSuccessfully=Portlet Instance Category updated successfully
 layout.portletInstanceCreatedSuccessfully=Portlet Instance created successfully
 layout.portletInstanceUpdatedSuccessfully=Portlet Instance updated successfully
+layout.portletInstanceLayoutUpdatedSuccessfully=Portlet Instance layout and preview updated successfully
 
 portlets.portletInstancesList=Instances using {0}
 portlets.previewInstance=Preview the instance

diff --git a/layout-webapp/src/main/webapp/WEB-INF/gatein-resources.xml b/layout-webapp/src/main/webapp/WEB-INF/gatein-resources.xml
@@ -329,6 +329,9 @@
       <depends>
         <module>attachImage</module>
       </depends>
+      <depends>
+        <module>html2canvas</module>
+      </depends>
       <depends>
         <module>vue</module>
       </depends>

diff --git a/layout-webapp/src/main/webapp/vue-app/portlet-editor/components/content/Application.vue b/layout-webapp/src/main/webapp/vue-app/portlet-editor/components/content/Application.vue
@@ -49,6 +49,7 @@ export default {
   },
   mounted() {
     this.installApplication();
+    this.$root.portletInstanceElement = this.$el;
   },
   methods: {
     installApplication() {

diff --git a/...t-webapp/src/main/webapp/vue-app/portlet-editor/components/toolbar/actions/SaveButton.vue b/...t-webapp/src/main/webapp/vue-app/portlet-editor/components/toolbar/actions/SaveButton.vue
@@ -46,12 +46,53 @@ export default {
       try {
         const instance = await this.$portletInstanceService.getPortletInstance(this.$root.portletInstanceId);
         instance.preferences = await this.$portletInstanceService.getPortletInstancePreferences(this.$root.portletInstanceId);
-        this.$portletInstanceService.updatePortletInstance(instance);
-        this.$root.$emit('portlet-instance-updated', instance);
-        this.$root.$emit('alert-message', this.$t('layout.portletInstanceUpdatedSuccessfully'), 'success');
+        await this.$portletInstanceService.updatePortletInstance(instance);
+
+        const previewCanvas = await window.html2canvas(this.$root.portletInstanceElement);
+        const previewImage = previewCanvas.toDataURL('image/png');
+        const previewBlob = this.convertPreviewToFile(previewImage);
+        const uploadId =  await this.$uploadService.upload(previewBlob);
+        await new Promise((resolve, reject) => {
+          const interval = window.setInterval(() => {
+            this.$uploadService.getUploadProgress(uploadId)
+              .then(percent => {
+                if (Number(percent) === 100) {
+                  window.clearInterval(interval);
+                  resolve();
+                }
+              })
+              .catch(e => reject(e));
+          }, 200);
+        });
+        await this.$fileAttachmentService.saveAttachments({
+          objectType: 'portletInstance',
+          objectId: this.$root.portletInstanceId,
+          uploadedFiles: [{uploadId}],
+          attachedFiles: [],
+        });
+
+        if (window?.opener) {
+          window?.opener?.dispatchEvent?.(new CustomEvent('portlet-instance-layout-updated', {
+            detail: instance,
+          }));
+          window.close();
+        } else {
+          this.$root.$emit('alert-message', this.$t('layout.portletInstanceLayoutUpdatedSuccessfully'), 'success');
+        }
+      } catch (e) {
+        console.debug('Error saving portlet instance', e); // eslint-disable-line no-console
+        this.$root.$emit('alert-message', this.$t('layout.portletInstanceLayoutUpdatedSuccessfully'), 'success');
       } finally {
-        window.setTimeout(() => this.loading = false);
+        window.setTimeout(() => this.loading = false, 50);
+      }
+    },
+    convertPreviewToFile(previewImage) {
+      const imgString = window.atob(previewImage.replace(/^data:image\/\w+;base64,/, ''));
+      const bytes = new Uint8Array(imgString.length);
+      for (let i = 0; i < imgString.length; i++) {
+        bytes[i] = imgString.charCodeAt(i);
       }
+      return new Blob([bytes], {type: 'image/png'});
     },
   },
 };

diff --git a/layout-webapp/src/main/webapp/vue-app/portlet-editor/main.js b/layout-webapp/src/main/webapp/vue-app/portlet-editor/main.js
@@ -48,6 +48,7 @@ export function init() {
         data: {
           portletInstanceId: null,
           portletInstance: null,
+          portletInstanceElement: null,
         },
         i18n,
         created() {

diff --git a/layout-webapp/src/main/webapp/vue-app/portlets/components/instances/List.vue b/layout-webapp/src/main/webapp/vue-app/portlets/components/instances/List.vue
@@ -172,10 +172,12 @@ export default {
   created() {
     this.$root.$on('portlet-instance-delete', this.deletePortletInstanceConfirm);
     this.$root.$on('portlet-instance-category-selected', this.selectCategoryId);
+    this.$root.$on('portlet-instance-layout-updated', this.handleLayoutUpdated);
   },
   beforeDestroy() {
     this.$root.$off('portlet-instance-delete', this.deletePortletInstanceConfirm);
     this.$root.$off('portlet-instance-category-selected', this.selectCategoryId);
+    this.$root.$off('portlet-instance-layout-updated', this.handleLayoutUpdated);
   },
   methods: {
     applySortOnItems(portletInstances, sortFields, sortDescendings) {
@@ -216,6 +218,10 @@ export default {
         .catch(() => this.$root.$emit('alert-message', this.$t('portlets.delete.error'), 'error'))
         .finally(() => this.loading = false);
     },
+    handleLayoutUpdated(instance) {
+      this.$root.$emit('portlet-instance-saved', instance);
+      this.$root.$emit('alert-message', this.$t('layout.portletInstanceLayoutUpdatedSuccessfully'), 'success');
+    },
   },
 };
 </script>
diff --git a/layout-webapp/src/main/webapp/vue-app/portlets/components/instances/Menu.vue b/layout-webapp/src/main/webapp/vue-app/portlets/components/instances/Menu.vue
@@ -46,6 +46,7 @@
           <v-list-item
             :href="editLayoutLink"
             target="_blank"
+            rel="opener"
             dense>
             <v-icon size="13">
               fa-edit

diff --git a/layout-webapp/src/main/webapp/vue-app/portlets/main.js b/layout-webapp/src/main/webapp/vue-app/portlets/main.js
@@ -76,12 +76,16 @@ export function init() {
           this.$root.$on('portlet-instance-category-deleted', this.refreshPortletInstanceCategories);
           this.$root.$on('portlet-instance-category-deleted', this.refreshPortletInstances);
           this.$root.$on('portlet-instance-category-selected', this.selectCategory);
+          window.addEventListener('portlet-instance-layout-updated', this.propagateEventListenerLocally);
 
           this.refreshPortlets();
           this.refreshPortletInstances();
           this.refreshPortletInstanceCategories();
         },
         methods: {
+          propagateEventListenerLocally(event) {
+            this.$root.$emit(event.type, event.detail);
+          },
           selectCategory(categoryId) {
             this.selectedCategoryId = categoryId;
           },