fix: Avoid displaying Empty containers - MEED-7939 - Meeds-io/meeds#2670

Prior to this change, when a container has an empty content, it displays an empty div. This may lead to not have the `Sticky` behavior to work. Thus, this change will simply avoid displaying containers having empty contents.

layout-webapp/src/main/webapp/vue-app/page-layout/components/container/CellContainer.vue

@@ -0,0 +1,39 @@
+<!--
+
+ 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>
+  <page-layout-container-base
+    :container="container"
+    :parent-id="parentId" />
+</template>
+<script>
+export default {
+  props: {
+    container: {
+      type: Object,
+      default: null,
+    },
+    parentId: {
+      type: String,
+      default: null,
+    },
+  },
+};
+</script>

layout-webapp/src/main/webapp/vue-app/page-layout/components/container/Container.vue

@@ -20,6 +20,7 @@
 -->
 <template>
   <page-layout-container-base
+    v-if="hasChildren"
     :container="container"
     :parent-id="parentId" />
 </template>
@@ -35,5 +36,10 @@ export default {
       default: null,
     },
   },
+  computed: {
+    hasChildren() {
+      return this.container?.children?.length;
+    },
+  },
 };
 </script>

layout-webapp/src/main/webapp/vue-app/page-layout/extensions.js

@@ -24,6 +24,13 @@ extensionRegistry.registerExtension('page-layout', 'container', {
   containerType: 'page-layout-container',
 });
 
+extensionRegistry.registerExtension('page-layout', 'container', {
+  rank: 400,
+  type: 'cell',
+  isValid: container => container.template === 'CellContainer',
+  containerType: 'page-layout-cell-container',
+});
+
 extensionRegistry.registerExtension('page-layout', 'container', {
   rank: 200,
   type: 'section',

layout-webapp/src/main/webapp/vue-app/page-layout/initComponents.js

@@ -25,6 +25,7 @@ import ContainerBase from './components/base/ContainerBase.vue';
 import PageContainer from './components/container/PageContainer.vue';
 import DynamicSection from './components/container/DynamicSection.vue';
 import FixedSection from './components/container/FixedSection.vue';
+import CellContainer from './components/container/CellContainer.vue';
 import Container from './components/container/Container.vue';
 import Application from './components/container/Application.vue';
 
@@ -37,6 +38,7 @@ const components = {
   'page-layout-page-container': PageContainer,
   'page-layout-dynamic-section': DynamicSection,
   'page-layout-fixed-section': FixedSection,
+  'page-layout-cell-container': CellContainer,
   'page-layout-container': Container,
   'page-layout-application': Application,
 };