feat: Allow to manage and list applications from dynamic containers -…

… MEED-5299 - Meeds-io/MIPs#131 (#48) This change will allow to manage portlets added in dynamic containers while editing the page. The dynamic containers will be deleted and the list of applications will be listed as is.
Meeds-io · Aug 29, 2024 · 35e9362 · 35e9362
1 parent a2e7b23
commit 35e9362
Show file tree

Hide file tree

Showing 11 changed files with 58 additions and 23 deletions.
diff --git a/layout-service/src/main/java/io/meeds/layout/rest/util/RestEntityBuilder.java b/layout-service/src/main/java/io/meeds/layout/rest/util/RestEntityBuilder.java
@@ -80,10 +80,10 @@ private static void computeApplicationContentId(LayoutService layoutService,
       if (layoutModel instanceof Container container) {
         computeApplicationContentId(layoutService, container.getChildren(), contentIds);
       } else if (layoutModel instanceof Application application) { // NOSONAR
-        String storageId = application.getStorageId();
-        if (StringUtils.isNotBlank(storageId)) {
+        String portletId = application.getStorageId() == null ? application.getId() : application.getStorageId();
+        if (StringUtils.isNotBlank(portletId)) {
           String contentId = layoutService.getId(application.getState());
-          contentIds.put(storageId, contentId);
+          contentIds.put(portletId, contentId);
         }
       }
     }

diff --git a/layout-service/src/main/java/io/meeds/layout/service/PageLayoutService.java b/layout-service/src/main/java/io/meeds/layout/service/PageLayoutService.java
@@ -47,6 +47,7 @@
 import org.exoplatform.portal.mop.page.PageKey;
 import org.exoplatform.portal.mop.page.PageState;
 import org.exoplatform.portal.mop.service.LayoutService;
+import org.exoplatform.portal.pom.spi.portlet.Portlet;
 
 import io.meeds.layout.model.PageCreateModel;
 import io.meeds.layout.model.PageTemplate;
@@ -313,7 +314,7 @@ private PageType getPageType(String pageType) {
 
   private void expandAddonContainerChildren(Container container) {
     if (StringUtils.equals(container.getFactoryId(), "addonContainer")) {
-      List<Application<?>> applications = addOnService.getApplications(container.getName());
+      List<Application<Portlet>> applications = addOnService.getApplications(container.getName());
       if (CollectionUtils.isNotEmpty(applications)) {
         container.setChildren(new ArrayList<>(applications));
       }

diff --git a/layout-service/src/test/java/io/meeds/layout/service/PageLayoutServiceTest.java b/layout-service/src/test/java/io/meeds/layout/service/PageLayoutServiceTest.java
@@ -165,7 +165,7 @@ public void getPageLayoutWithDynamicContainer() {
     when(dynamicContainer.getFactoryId()).thenReturn("addonContainer");
     when(dynamicContainer.getName()).thenReturn("testAddonContainer");
     when(page.getChildren()).thenReturn(new ArrayList<>(Collections.singleton(dynamicContainer)));
-    Application<?> application = mock(Application.class);
+    Application<Portlet> application = mock(Application.class);
     when(addOnService.getApplications("testAddonContainer")).thenReturn(Collections.singletonList(application));
     pageLayoutService.getPageLayout(PAGE_KEY);
     verify(dynamicContainer).setChildren(argThat(children -> children != null && children.size() == 1 && children.get(0) == application));

diff --git a/layout-webapp/src/main/webapp/skin/less/editor.less b/layout-webapp/src/main/webapp/skin/less/editor.less
@@ -42,10 +42,13 @@
   overflow-x: hidden;
 
   .PORTLET-FRAGMENT {
-    margin-bottom: ~"var(--grid-layout-gap, 20px) ! important";
+    margin-bottom: ~"var(--grid-layout-gap, 20px) !important";
   }
   .flex-cell {
     row-gap: 0;
+    .layout-application {
+      padding-bottom: 0 !important;
+    }
   }
   .hidden-sm-and-down {
     display: none !important;
@@ -62,6 +65,10 @@
   border: thin solid @primaryColor !important;
 }
 
+.layout-no-content {
+  margin-top: -10px;
+}
+
 .layout-no-content-caret {
   margin-left: -1px;
   padding-top: 1px;
@@ -71,6 +78,10 @@
   width: 36px;
 }
 
+.d-md-grid {
+  padding-bottom: 20px;
+}
+
 // TODO Delete those classes when the Applications Drawer is reworked
 // (forked from Spaces Administration Application Style)
 .ApplicationCard {
@@ -131,7 +142,9 @@
 .grid-gap-width {
   width: ~"var(--grid-layout-gap, 20px)";
 }
-
+.grid-gap-1 {
+  --grid-layout-gap: 4px;
+}
 .layout-column-resize {
   background-repeat: repeat !important;
   opacity: 0.8 !important;

diff --git a/...app/src/main/webapp/vue-app/layout-editor/components/content/common/SectionFlexEditor.vue b/...app/src/main/webapp/vue-app/layout-editor/components/content/common/SectionFlexEditor.vue
@@ -89,7 +89,7 @@ export default {
   }),
   computed: {
     gridClass() {
-      return `d-md-grid grid-cols-md-${this.cols}`;
+      return `d-md-grid pb-0 grid-cols-md-${this.cols}`;
     },
   },
   watch: {

diff --git a/...app/src/main/webapp/vue-app/layout-editor/components/content/common/SectionGridEditor.vue b/...app/src/main/webapp/vue-app/layout-editor/components/content/common/SectionGridEditor.vue
@@ -128,7 +128,7 @@ export default {
   }),
   computed: {
     gridClass() {
-      return `d-md-grid grid-cols-md-${this.cols} grid-rows-md-${this.rows}`;
+      return `d-md-grid pb-0 grid-cols-md-${this.cols} grid-rows-md-${this.rows}`;
     },
     length() {
       return this.rows * this.cols;

diff --git a/.../src/main/webapp/vue-app/layout-editor/components/content/common/SectionSelectionGrid.vue b/.../src/main/webapp/vue-app/layout-editor/components/content/common/SectionSelectionGrid.vue
@@ -51,7 +51,7 @@ export default {
       return this.section.colsCount;
     },
     gridClass() {
-      return `d-md-grid grid-cols-md-${this.cols} grid-rows-md-${this.rows}`;
+      return `d-md-grid pb-0 grid-cols-md-${this.cols} grid-rows-md-${this.rows}`;
     },
     length() {
       return this.rows * this.cols;

diff --git a/...webapp/src/main/webapp/vue-app/layout-editor/components/content/container/Application.vue b/...webapp/src/main/webapp/vue-app/layout-editor/components/content/container/Application.vue
@@ -39,7 +39,7 @@
           @move-end="moveEnd" />
       </v-hover>
       <div v-if="displayNoContent" class="full-width text-no-wrap border-color-grey-lighten ms-1">
-        <div class="absolute-vertical-center d-flex full-width ms-n1">
+        <div class="layout-no-content absolute-vertical-center d-flex full-width ms-n1">
           <div class="light-black-background white--text px-2">
             {{ applicationTitle }}
           </div>
@@ -92,7 +92,7 @@ export default {
       return this.$root.draftNodeUri;
     },
     id() {
-      return `UIPortlet-${this.container?.id || this.storageId}`;
+      return `UIPortlet-${this.container?.id || this.storageId || parseInt(Math.random() * 10000)}`;
     },
     cssStyle() {
       if (!this.height && !this.width && !this.borderColor) {
@@ -117,7 +117,7 @@ export default {
       return this.section?.template === this.$layoutUtils.flexTemplate;
     },
     applicationTitle() {
-      return this.container?.title || '';
+      return this.$root.applicationCategories?.flatMap?.(c => c.applications)?.find?.(a => a?.contentId === this.container?.contentId)?.displayName || this.container?.title || '';
     },
     applicationCategory() {
       return this.applicationTitle && this.$root.applicationCategories?.find?.(c => c?.applications?.find?.(a => a?.displayName === this.applicationTitle));
@@ -230,7 +230,7 @@ export default {
       this.hasContentCheckCount++;
       window.setTimeout(() => {
         if (this.$refs.content) {
-          this.hasContent = this.$refs.content.getBoundingClientRect().height > 10;
+          this.hasContent = this.$refs.content.getBoundingClientRect().height > 30;
           if (!this.hasContent) {
             this.computeHasContentAsync();
           }

diff --git a/layout-webapp/src/main/webapp/vue-app/layout-editor/components/content/container/Cell.vue b/layout-webapp/src/main/webapp/vue-app/layout-editor/components/content/container/Cell.vue
@@ -52,11 +52,7 @@
           <span v-if="applicationCategoryTitle" class="caption">({{ applicationCategoryTitle }})</span>
         </div>
       </div>
-      <div
-        v-if="$root.desktopDisplayMode"
-        :class="{
-          'mt-n5': isDynamicSection,
-        }">
+      <div v-if="$root.desktopDisplayMode">
         <layout-editor-cell-resize-button
           v-if="displayResizeButton"
           :container="container"

diff --git a/layout-webapp/src/main/webapp/vue-app/layout-editor/services.js b/layout-webapp/src/main/webapp/vue-app/layout-editor/services.js
@@ -24,3 +24,19 @@ if (!Vue.prototype.$layoutUtils) {
     value: layoutUtils,
   });
 }
+
+Vue.prototype.$updateApplicationVisibility = function(visible, element) {
+  if (!element) {
+    element = this?.$root?.$el;
+  }
+  if (!element?.className?.includes?.('PORTLET-FRAGMENT')) {
+    element = element?.parentElement;
+  }
+  if (element?.parentElement) {
+    if (visible) {
+      element.closest?.('.PORTLET-FRAGMENT')?.parentElement?.classList?.remove?.('hidden-sm-and-down');
+    } else {
+      element.closest?.('.PORTLET-FRAGMENT')?.parentElement?.classList?.add?.('hidden-sm-and-down');
+    }
+  }
+};
diff --git a/layout-webapp/src/main/webapp/vue-app/page-layout/components/container/Application.vue b/layout-webapp/src/main/webapp/vue-app/page-layout/components/container/Application.vue
@@ -45,8 +45,14 @@ export default {
     storageId() {
       return this.container?.storageId;
     },
+    portletId() {
+      return this.storageId || this.container?.id;
+    },
+    contentId() {
+      return this.container?.contentId;
+    },
     id() {
-      return `UIPortlet-${this.container?.id || this.storageId}`;
+      return `UIPortlet-${this.container?.id || this.storageId || `${this.parentId}-${parseInt(Math.random() * 10000)}`}`;
     },
     height() {
       return this.container.height;
@@ -86,9 +92,12 @@ export default {
   methods: {
     installApplication() {
       if (this.$refs.content
-          && this.nodeUri
-          && this.storageId) {
-        this.$applicationUtils.installApplication(this.nodeUri, this.storageId, this.$refs.content);
+          && this.nodeUri) {
+        if (this.portletId) {
+          this.$applicationUtils.installApplication(this.nodeUri, this.portletId, this.$refs.content);
+        } else {
+          console.warn(`Application '${this.contentId}' doesn't have a storageId neither and id`); // eslint-disable-line no-console
+        }
       }
     },
     hasUnit(length) {