From d8c7c25404c57dcd7316f5c1142043e9bf13b71e Mon Sep 17 00:00:00 2001
From: Boubaker Khanfir <boubaker.khanfir@exoplatform.com>
Date: Tue, 28 May 2024 16:44:44 +0100
Subject: [PATCH] feat: Improve Default Portlet Instances List - MEED-6908 -
 Meeds-io/MIPs#139 (#81)

---
 .../PortletInstanceImportService.java         |   7 +-
 .../portlet-instance-categories.json          |  80 ++++++++++--
 .../src/main/resources/portlet-instances.json | 119 +++++++++++++++++-
 .../locale/portlet/LayoutEditor_en.properties |  79 ++++++++----
 .../components/instances/Categories.vue       |  19 +--
 .../components/instances/CategoryItem.vue     |   4 +-
 .../portlets/components/instances/Item.vue    |  27 +++-
 .../portlets/components/instances/List.vue    |  53 ++++----
 .../portlets/components/instances/Main.vue    |   3 +-
 .../portlets/components/portlets/List.vue     |  18 +--
 .../src/main/webapp/vue-app/portlets/main.js  |  50 ++++++++
 11 files changed, 362 insertions(+), 97 deletions(-)

diff --git a/layout-service/src/main/java/io/meeds/layout/service/injection/PortletInstanceImportService.java b/layout-service/src/main/java/io/meeds/layout/service/injection/PortletInstanceImportService.java
index ee41a99e0..fe7762fbf 100644
--- a/layout-service/src/main/java/io/meeds/layout/service/injection/PortletInstanceImportService.java
+++ b/layout-service/src/main/java/io/meeds/layout/service/injection/PortletInstanceImportService.java
@@ -29,6 +29,7 @@
 import java.util.concurrent.CompletableFuture;
 
 import org.apache.commons.io.IOUtils;
+import org.apache.commons.lang3.StringUtils;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.beans.factory.annotation.Value;
 import org.springframework.core.Ordered;
@@ -224,8 +225,10 @@ protected void importPortletInstance(PortletInstanceDescriptor d, long oldId) {
         saveNames(d, portletInstance);
         LOG.info("Importing Portlet instance {} description translations", descriptorId);
         saveDescriptions(d, portletInstance);
-        LOG.info("Importing Portlet instance {} illustration", descriptorId);
-        saveIllustration(portletInstance.getId(), d.getIllustrationPath());
+        if (StringUtils.isNotBlank(d.getIllustrationPath())) {
+          LOG.info("Importing Portlet instance {} illustration", descriptorId);
+          saveIllustration(portletInstance.getId(), d.getIllustrationPath());
+        }
         // Mark as imported
         setSettingValue(descriptorId, portletInstance.getId());
       }
diff --git a/layout-service/src/main/resources/portlet-instance-categories.json b/layout-service/src/main/resources/portlet-instance-categories.json
index cca24904d..ce38d12a2 100644
--- a/layout-service/src/main/resources/portlet-instance-categories.json
+++ b/layout-service/src/main/resources/portlet-instance-categories.json
@@ -1,40 +1,68 @@
 {
   "descriptors":[
     {
-      "nameId":"spaces",
+      "nameId":"content",
       "names":{
-        "en":"layout.portletInstance.category.spaces.name"
+        "en":"layout.portletInstance.category.content.name"
       },
       "descriptions":{
-        "en":"layout.portletInstance.category.spaces.description"
+        "en":"layout.portletInstance.category.content.description"
       },
-      "icon":"fa-braille",
+      "icon":"fa-newspaper",
       "permissions":[
         "*:/platform/users"
       ],
       "system":true
     },
     {
-      "nameId":"content",
+      "nameId":"tools",
       "names":{
-        "en":"layout.portletInstance.category.content.name"
+        "en":"layout.portletInstance.category.tools.name"
       },
       "descriptions":{
-        "en":"layout.portletInstance.category.content.description"
+        "en":"layout.portletInstance.category.tools.description"
       },
-      "icon":"fa-newspaper",
+      "icon":"fa-tools",
       "permissions":[
         "*:/platform/users"
       ],
       "system":true
     },
     {
-      "nameId":"tools",
+      "nameId":"spaceTools",
       "names":{
-        "en":"layout.portletInstance.category.tools.name"
+        "en":"layout.portletInstance.category.spaceTools.name"
       },
       "descriptions":{
-        "en":"layout.portletInstance.category.tools.description"
+        "en":"layout.portletInstance.category.spaceTools.description"
+      },
+      "icon":"fa-users-cog",
+      "permissions":[
+        "*:/platform/users"
+      ],
+      "system":true
+    },
+    {
+      "nameId":"profile",
+      "names":{
+        "en":"layout.portletInstance.category.profile.name"
+      },
+      "descriptions":{
+        "en":"layout.portletInstance.category.profile.description"
+      },
+      "icon":"fa-user",
+      "permissions":[
+        "*:/platform/users"
+      ],
+      "system":true
+    },
+    {
+      "nameId":"spaces",
+      "names":{
+        "en":"layout.portletInstance.category.spaces.name"
+      },
+      "descriptions":{
+        "en":"layout.portletInstance.category.spaces.description"
       },
       "icon":"fa-tools",
       "permissions":[
@@ -42,6 +70,20 @@
       ],
       "system":true
     },
+    {
+      "nameId":"userSettings",
+      "names":{
+        "en":"layout.portletInstance.category.userSettings.name"
+      },
+      "descriptions":{
+        "en":"layout.portletInstance.category.userSettings.description"
+      },
+      "icon":"fa-user-cog",
+      "permissions":[
+        "*:/platform/users"
+      ],
+      "system":true
+    },
     {
       "nameId":"navigation",
       "names":{
@@ -50,7 +92,21 @@
       "descriptions":{
         "en":"layout.portletInstance.category.navigation.description"
       },
-      "icon":"fa-columns",
+      "icon":"fa-project-diagram",
+      "permissions":[
+        "*:/platform/users"
+      ],
+      "system":true
+    },
+    {
+      "nameId":"others",
+      "names":{
+        "en":"layout.portletInstance.category.others.name"
+      },
+      "descriptions":{
+        "en":"layout.portletInstance.category.others.description"
+      },
+      "icon":"fa-ellipsis-h",
       "permissions":[
         "*:/platform/users"
       ],
diff --git a/layout-service/src/main/resources/portlet-instances.json b/layout-service/src/main/resources/portlet-instances.json
index 543e357a6..f58f5bcc5 100644
--- a/layout-service/src/main/resources/portlet-instances.json
+++ b/layout-service/src/main/resources/portlet-instances.json
@@ -101,8 +101,24 @@
       "spaceApplication":false
     },
     {
-      "nameId":"SpaceBannerPortlet",
+      "nameId":"GettingStarted",
       "categoryNameId":"tools",
+      "portletName":"GettingStarted",
+      "names":{
+        "en":"layout.portletInstance.GettingStarted.name"
+      },
+      "descriptions":{
+        "en":"layout.portletInstance.GettingStarted.description"
+      },
+      "permissions":[
+        "*:/platform/users"
+      ],
+      "system":true,
+      "spaceApplication":false
+    },
+    {
+      "nameId":"SpaceBannerPortlet",
+      "categoryNameId":"spaceTools",
       "portletName":"SpaceBannerPortlet",
       "names":{
         "en":"layout.portletInstance.SpaceBannerPortlet.name"
@@ -162,7 +178,7 @@
     },
     {
       "nameId":"SpaceActivityStreamPortlet",
-      "categoryNameId":"tools",
+      "categoryNameId":"spaceTools",
       "portletName":"SpaceActivityStreamPortlet",
       "names":{
         "en":"layout.portletInstance.SpaceActivityStreamPortlet.name"
@@ -178,7 +194,7 @@
         "*:/platform/users"
       ],
       "system":true,
-      "spaceApplication":false
+      "spaceApplication":true
     },
     {
       "nameId":"SpacesOverview",
@@ -221,8 +237,28 @@
       "spaceApplication":false
     },
     {
-      "nameId":"SpaceInfos",
+      "nameId":"UserActivityStreamPortlet",
       "categoryNameId":"tools",
+      "portletName":"UserActivityStreamPortlet",
+      "names":{
+        "en":"layout.portletInstance.UserActivityStreamPortlet.name"
+      },
+      "descriptions":{
+        "en":"layout.portletInstance.UserActivityStreamPortlet.description"
+      },
+      "illustrationPath":"war:/../skin/DefaultSkin/portletIcons/SpaceActivityStreamPortlet.png",
+      "preferences":[
+        
+      ],
+      "permissions":[
+        "*:/platform/users"
+      ],
+      "system":true,
+      "spaceApplication":false
+    },
+    {
+      "nameId":"SpaceInfos",
+      "categoryNameId":"spaceTools",
       "portletName":"SpaceInfos",
       "names":{
         "en":"layout.portletInstance.SpaceInfos.name"
@@ -299,6 +335,81 @@
       ],
       "system":true,
       "spaceApplication":false
+    },
+    {
+      "nameId":"GeneralSettings",
+      "categoryNameId":"userSettings",
+      "portletName":"GeneralSettings",
+      "names":{
+        "en":"layout.portletInstance.GeneralSettings.name"
+      },
+      "descriptions":{
+        "en":"layout.portletInstance.GeneralSettings.description"
+      },
+      "permissions":[
+        "*:/platform/users"
+      ],
+      "system":true
+    },
+    {
+      "nameId":"ProfileAboutMe",
+      "categoryNameId":"profile",
+      "portletName":"ProfileAboutMe",
+      "names":{
+        "en":"layout.portletInstance.ProfileAboutMe.name"
+      },
+      "descriptions":{
+        "en":"layout.portletInstance.ProfileAboutMe.description"
+      },
+      "permissions":[
+        "*:/platform/users"
+      ],
+      "system":true
+    },
+    {
+      "nameId":"ProfileContactInformation",
+      "categoryNameId":"profile",
+      "portletName":"ProfileContactInformation",
+      "names":{
+        "en":"layout.portletInstance.ProfileContactInformation.name"
+      },
+      "descriptions":{
+        "en":"layout.portletInstance.ProfileContactInformation.description"
+      },
+      "permissions":[
+        "*:/platform/users"
+      ],
+      "system":true
+    },
+    {
+      "nameId":"ProfileHeader",
+      "categoryNameId":"profile",
+      "portletName":"ProfileHeader",
+      "names":{
+        "en":"layout.portletInstance.ProfileHeader.name"
+      },
+      "descriptions":{
+        "en":"layout.portletInstance.ProfileHeader.description"
+      },
+      "permissions":[
+        "*:/platform/users"
+      ],
+      "system":true
+    },
+    {
+      "nameId":"ProfileWorkExperience",
+      "categoryNameId":"profile",
+      "portletName":"ProfileWorkExperience",
+      "names":{
+        "en":"layout.portletInstance.ProfileWorkExperience.name"
+      },
+      "descriptions":{
+        "en":"layout.portletInstance.ProfileWorkExperience.description"
+      },
+      "permissions":[
+        "*:/platform/users"
+      ],
+      "system":true
     }
   ]
 }
\ No newline at end of file
diff --git a/layout-webapp/src/main/resources/locale/portlet/LayoutEditor_en.properties b/layout-webapp/src/main/resources/locale/portlet/LayoutEditor_en.properties
index e73d6a142..a90d2696a 100644
--- a/layout-webapp/src/main/resources/locale/portlet/LayoutEditor_en.properties
+++ b/layout-webapp/src/main/resources/locale/portlet/LayoutEditor_en.properties
@@ -152,11 +152,11 @@ portlets.instances=instances
 portlets.filter.placeholder=Filter by name, description
 portlets.label.disableInstance=Disable instance
 portlets.label.enableInstance=Enable instance
-portlets.status.update.success=Template status successfully updated
+portlets.status.update.success=Portlet instance status successfully updated
 portlets.status.update.error=An unknown error occurred while updating instance. Please contact the administrator or try agan later.
-portlets.layout.update.success=Template layout successfully updated
+portlets.layout.update.success=Portlet instance successfully updated
 portlets.layout.update.error=An unknown error occurred while updating instance. Please contact the administrator or try agan later.
-portlets.delete.success=Template successfully deleted
+portlets.delete.success=Portlet instance successfully deleted
 portlets.delete.error=An unknown error occurred while deleting instance. Please contact the administrator or try agan later.
 portlets.label.confirmDeleteTitle=Delete page template?
 portlets.label.confirmDeleteMessage=Would you like to delete page template: {0}
@@ -166,6 +166,8 @@ portlets.label.name=Name
 portlets.label.instances=Instances
 portlets.label.description=Description
 portlets.label.status=Status
+portlets.label.category=Category
+portlets.label.portlet=Portlet
 portlets.label.actions=Actions
 portlets.menu.open=Open Menu
 portlets.label.instanceMenu={0}
@@ -182,39 +184,70 @@ portlets.label.preview=Preview of {0}
 portlets.label.openIllustrationPreview=Open illustration Preview
 
 layout.portletInstance.MembersPortlet.name=Members
-layout.portletInstance.MembersPortlet.description=Members Portlet
-layout.portletInstance.SpaceSettingPortlet.name=Space Setting
-layout.portletInstance.SpaceSettingPortlet.description=Space Setting Portlet
+layout.portletInstance.MembersPortlet.description=Members list of the space
+layout.portletInstance.SpaceSettingPortlet.name=Settings
+layout.portletInstance.SpaceSettingPortlet.description=Settings of the space
 layout.portletInstance.Image.name=Image
-layout.portletInstance.Image.description=Image Portlet
-layout.portletInstance.ExternalSpacesList.name=External Spaces list
-layout.portletInstance.ExternalSpacesList.description=External Spaces list Portlet
+layout.portletInstance.Image.description=Display an image
+layout.portletInstance.ExternalSpacesList.name=Spaces list
+layout.portletInstance.ExternalSpacesList.description=Gadget listing spaces of the current user
+layout.portletInstance.GettingStarted.name=Getting Started
+layout.portletInstance.GettingStarted.description=Gadget suggesting first steps to do
 layout.portletInstance.SpaceBannerPortlet.name=Space Banner
-layout.portletInstance.SpaceBannerPortlet.description=Space Banner Portlet
-layout.portletInstance.WhoIsOnLinePortlet.name=Who Is OnLine
-layout.portletInstance.WhoIsOnLinePortlet.description=Who Is OnLine Portlet
+layout.portletInstance.SpaceBannerPortlet.description=Space banner to illustrate spaces in the directory
+layout.portletInstance.WhoIsOnLinePortlet.name=Who is Online
+layout.portletInstance.WhoIsOnLinePortlet.description=Gadget listing users being online
 layout.portletInstance.PeopleOverview.name=People Overview
-layout.portletInstance.PeopleOverview.description=People Overview Portlet
+layout.portletInstance.PeopleOverview.description=Gadget listing requests, invitations to network connections
 layout.portletInstance.SpaceActivityStreamPortlet.name=Space Activity Stream
-layout.portletInstance.SpaceActivityStreamPortlet.description=Space Activity Stream Portlet
-layout.portletInstance.SuggestionsPeopleAndSpace.name=People and Space Suggestions
-layout.portletInstance.SuggestionsPeopleAndSpace.description=People and Space Suggestions Portlet
+layout.portletInstance.SpaceActivityStreamPortlet.description=List of activities of the space
+layout.portletInstance.UserActivityStreamPortlet.name=User Activity Stream
+layout.portletInstance.UserActivityStreamPortlet.description=List of activities of the user
+layout.portletInstance.SuggestionsPeopleAndSpace.name=Suggestions People & Spaces
+layout.portletInstance.SuggestionsPeopleAndSpace.description=Gadget suggesting to grow the network (spaces & people)
 layout.portletInstance.SpacesOverview.name=Spaces Overview
-layout.portletInstance.SpacesOverview.description=Spaces Overview Portlet
+layout.portletInstance.SpacesOverview.description=Gadget listing hosted spaces, requests, invitations
 layout.portletInstance.SpaceInfos.name=Space Infos
-layout.portletInstance.SpaceInfos.description=Space Infos Portlet
+layout.portletInstance.SpaceInfos.description=Gadget listing hosts, redactors and description of the space
 layout.portletInstance.VerticalMenu.name=Site Vertical Menu
 layout.portletInstance.VerticalMenu.description=Site Vertical Menu Portlet
-layout.portletInstance.Breadcrumb.name=Site Vertical Menu
-layout.portletInstance.Breadcrumb.description=Site Vertical Menu Portlet
+layout.portletInstance.Breadcrumb.name=Breadcrumb
+layout.portletInstance.Breadcrumb.description=Site Breadcrumb
 layout.portletInstance.Links.name=Links
-layout.portletInstance.Links.description=Links Portlet
+layout.portletInstance.Links.description=List useful links
+layout.portletInstance.GeneralSettings.name=General Settings
+layout.portletInstance.GeneralSettings.description=General Settings of the user
+layout.portletInstance.UserSettingLanguage.name=User Language Settings
+layout.portletInstance.UserSettingLanguage.description=Language Settings of the user
+layout.portletInstance.UserSettingNotifications.name=User Notifications Settings
+layout.portletInstance.UserSettingNotifications.description=Notifications Settings of the user
+layout.portletInstance.UserSettingSecurity.name=User Security Settings
+layout.portletInstance.UserSettingSecurity.description=Security Settings of the user
+layout.portletInstance.ProfileAboutMe.name=Profile About Me
+layout.portletInstance.ProfileAboutMe.description=Field for the user to introduce himself
+layout.portletInstance.ProfileContactInformation.name=Profile Contact Informations
+layout.portletInstance.ProfileContactInformation.description=List of contact informations of the user
+layout.portletInstance.ProfileHeader.name=Profile Header
+layout.portletInstance.ProfileHeader.description=Header grouping avatar, banner, display name and key actions of the user
+layout.portletInstance.ProfileWorkExperience.name=Profile Work Experience
+layout.portletInstance.ProfileWorkExperience.description=List of experiences of the user
+
 layout.portletInstance.category.all.name=All
+layout.portletInstance.category.others.name=Others
+layout.portletInstance.category.others.description=Other applications
 layout.portletInstance.category.spaces.name=Space
 layout.portletInstance.category.spaces.description=Spaces applications
+layout.portletInstance.category.spaceTools.name=Space Tools
+layout.portletInstance.category.spaceTools.description=Spaces Tools applications
 layout.portletInstance.category.content.name=Content
 layout.portletInstance.category.content.description=Content Applications
-layout.portletInstance.category.tools.name=Tools
-layout.portletInstance.category.tools.description=Tools
+layout.portletInstance.category.tools.name=General Tools
+layout.portletInstance.category.tools.description=General Tools
+layout.portletInstance.category.spaceTools.name=Space Tools
+layout.portletInstance.category.spaceTools.description=Space Tools
 layout.portletInstance.category.navigation.name=Navigation
 layout.portletInstance.category.navigation.description=Applications for Navigation
+layout.portletInstance.category.userSettings.name=User Settings
+layout.portletInstance.category.userSettings.description=Applications for User Settings
+layout.portletInstance.category.profile.name=Profile
+layout.portletInstance.category.profile.description=Applications for Profile
diff --git a/layout-webapp/src/main/webapp/vue-app/portlets/components/instances/Categories.vue b/layout-webapp/src/main/webapp/vue-app/portlets/components/instances/Categories.vue
index c7bd4fa33..700a80d2c 100644
--- a/layout-webapp/src/main/webapp/vue-app/portlets/components/instances/Categories.vue
+++ b/layout-webapp/src/main/webapp/vue-app/portlets/components/instances/Categories.vue
@@ -8,12 +8,12 @@
       color="primary"
       mandatory>
       <v-list-item>
-        <v-list-item-icon class="my-auto">
+        <v-list-item-icon class="my-auto me-4">
           <v-card
             width="30"
             class="transparent d-flex align-center justify-center"
             flat>
-            <v-icon>fa-braille</v-icon>
+            <v-icon class="icon-default-color">fa-braille</v-icon>
           </v-card>
         </v-list-item-icon>
         <v-list-item-content>
@@ -31,11 +31,13 @@
 export default {
   data: () => ({
     loading: false,
-    categories: [],
     selectedCategory: null,
     collator: new Intl.Collator(eXo.env.portal.language, {numeric: true, sensitivity: 'base'}),
   }),
   computed: {
+    categories() {
+      return this.$root.portletInstanceCategories || [];
+    },
     filteredCategories() {
       const categories = this.categories?.filter?.(c => c.name)?.slice() || [];
       categories.sort((a, b) => this.collator.compare(a.name.toLowerCase(), b.name.toLowerCase()));
@@ -47,16 +49,5 @@ export default {
       this.$root.$emit('portlets-instance-category-selected', this.filteredCategories[this.selectedCategory - 1]?.id || 0);
     },
   },
-  created() {
-    this.refreshPortletInstanceCategories();
-  },
-  methods: {
-    refreshPortletInstanceCategories() {
-      this.loading = true;
-      return this.$portletInstanceCategoryService.getPortletInstanceCategories()
-        .then(categories => this.categories = categories || [])
-        .finally(() => this.loading = false);
-    },
-  },
 };
 </script>
\ No newline at end of file
diff --git a/layout-webapp/src/main/webapp/vue-app/portlets/components/instances/CategoryItem.vue b/layout-webapp/src/main/webapp/vue-app/portlets/components/instances/CategoryItem.vue
index afdb91d9c..c6298465d 100644
--- a/layout-webapp/src/main/webapp/vue-app/portlets/components/instances/CategoryItem.vue
+++ b/layout-webapp/src/main/webapp/vue-app/portlets/components/instances/CategoryItem.vue
@@ -1,12 +1,12 @@
 <template>
   <v-hover @input="hover = $event">
     <v-list-item>
-      <v-list-item-icon class="my-auto">
+      <v-list-item-icon class="my-auto me-4">
         <v-card
           width="30"
           class="transparent d-flex align-center justify-center"
           flat>
-          <v-icon v-text="category.icon" />
+          <v-icon v-text="category.icon" class="icon-default-color" />
         </v-card>
       </v-list-item-icon>
       <v-list-item-content>
diff --git a/layout-webapp/src/main/webapp/vue-app/portlets/components/instances/Item.vue b/layout-webapp/src/main/webapp/vue-app/portlets/components/instances/Item.vue
index d9a0e4e24..5b378d8e5 100644
--- a/layout-webapp/src/main/webapp/vue-app/portlets/components/instances/Item.vue
+++ b/layout-webapp/src/main/webapp/vue-app/portlets/components/instances/Item.vue
@@ -16,7 +16,7 @@
       align="left">
       <v-card
         v-sanitized-html="name"
-        class="text-truncate transparent"
+        class="transparent"
         flat
         @click="$root.$emit('layout-illustration-preview', illustrationSrc)" />
     </td>
@@ -24,8 +24,19 @@
     <td
       v-if="!$root.isMobile"
       align="left"
-      class="text-truncate"
       v-sanitized-html="description"></td>
+    <td
+      v-if="!$root.isMobile"
+      align="center"
+      width="100px">
+      {{ categoryName }}
+    </td>
+    <td
+      v-if="!$root.isMobile"
+      align="center"
+      width="100px">
+      {{ portletName }}
+    </td>
     <td
       v-if="!$root.isMobile"
       align="center"
@@ -63,6 +74,18 @@ export default {
     enabled() {
       return !this.portletInstance?.disabled;
     },
+    category() {
+      return this.$root.portletInstanceCategories?.find?.(c => c.id === this.portletInstance.categoryId);
+    },
+    categoryName() {
+      return this.category?.name;
+    },
+    portlet() {
+      return this.$root.portlets?.find?.(p => p.contentId === this.portletInstance.contentId);
+    },
+    portletName() {
+      return this.portlet?.name;
+    },
     name() {
       return this.$te(this.portletInstance?.name) ? this.$t(this.portletInstance?.name) : this.portletInstance?.name;
     },
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
index bec00e65e..2963c483e 100644
--- 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
@@ -10,7 +10,7 @@
       must-sort
       disable-pagination
       hide-default-footer
-      class="portletInstancesTable px-5">
+      class="card-border-radius overflow-hidden portletInstancesTable px-5">
       <template slot="item" slot-scope="props">
         <portlets-instance-item
           :key="props.item.id"
@@ -36,13 +36,14 @@ export default {
     },
   },
   data: () => ({
-    portletInstances: [],
     portletInstanceToDelete: null,
     categoryId: 0,
-    loading: false,
     collator: new Intl.Collator(eXo.env.portal.language, {numeric: true, sensitivity: 'base'}),
   }),
   computed: {
+    loading() {
+      return !!this.$root.loading;
+    },
     headers() {
       return this.$root.isMobile && [
         {
@@ -76,7 +77,7 @@ export default {
           align: 'left',
           sortable: true,
           class: 'portlet-instance-name-header',
-          width: '20%'
+          width: '100px'
         },
         {
           text: this.$t('portlets.label.description'),
@@ -86,6 +87,22 @@ export default {
           class: 'portlet-instance-description-header',
           width: '70%'
         },
+        {
+          text: this.$t('portlets.label.category'),
+          value: 'categoryId',
+          align: 'center',
+          sortable: true,
+          class: 'portlet-instance-category-header',
+          width: '100px'
+        },
+        {
+          text: this.$t('portlets.label.portlet'),
+          value: 'contentId',
+          align: 'center',
+          sortable: true,
+          class: 'portlet-instance-portlet-header',
+          width: '100px'
+        },
         {
           text: this.$t('portlets.label.status'),
           value: 'disabled',
@@ -104,6 +121,9 @@ export default {
         },
       ];
     },
+    portletInstances() {
+      return this.categoryId && this.$root.portletInstances.filter(a => a.categoryId === this.categoryId) || this.$root.portletInstances;
+    },
     noEmptyPortletInstances() {
       const portletInstances = this.portletInstances?.filter?.(t => t.name) || [];
       portletInstances.sort((a, b) => this.collator.compare(a.name.toLowerCase(), b.name.toLowerCase()));
@@ -122,24 +142,12 @@ export default {
     },
   },
   created() {
-    this.$root.$on('portlets-instance-deleted', this.refreshPortletInstances);
-    this.$root.$on('portlets-instance-created', this.refreshPortletInstances);
-    this.$root.$on('portlets-instance-updated', this.refreshPortletInstances);
-    this.$root.$on('portlets-instance-enabled', this.refreshPortletInstances);
-    this.$root.$on('portlets-instance-disabled', this.refreshPortletInstances);
-    this.$root.$on('portlets-instance-saved', this.refreshPortletInstances);
     this.$root.$on('portlets-instance-delete', this.deletePortletInstanceConfirm);
     this.$root.$on('portlets-instance-category-selected', this.selectCategoryId);
-    this.refreshPortletInstances();
   },
   beforeDestroy() {
-    this.$root.$off('portlets-instance-deleted', this.refreshPortletInstances);
-    this.$root.$off('portlets-instance-created', this.refreshPortletInstances);
-    this.$root.$off('portlets-instance-updated', this.refreshPortletInstances);
-    this.$root.$off('portlets-instance-enabled', this.refreshPortletInstances);
-    this.$root.$off('portlets-instance-disabled', this.refreshPortletInstances);
-    this.$root.$off('portlets-instance-saved', this.refreshPortletInstances);
     this.$root.$off('portlets-instance-delete', this.deletePortletInstanceConfirm);
+    this.$root.$off('portlets-instance-category-selected', this.selectCategoryId);
   },
   methods: {
     applySortOnItems(portletInstances, sortFields, sortDescendings) {
@@ -153,6 +161,10 @@ export default {
         portletInstances.sort((a, b) => this.collator.compare(a.name.toLowerCase(), b.name.toLowerCase()));
       } else if (field === 'disabled') {
         portletInstances.sort((a, b) => (a.disabled ? 0 : 1) - (b.disabled ? 0 : 1));
+      } else if (field === 'categoryId') {
+        portletInstances.sort((a, b) => this.collator.compare(this.$root.categoriesById[a.categoryId]?.name?.toLowerCase?.(), this.$root.categoriesById[b.categoryId]?.name?.toLowerCase?.()));
+      } else if (field === 'contentId') {
+        portletInstances.sort((a, b) => this.collator.compare(this.$root.portletsById[a.contentId]?.name?.toLowerCase?.(), this.$root.portletsById[b.contentId]?.name?.toLowerCase?.()));
       }
       if (desc) {
         portletInstances.reverse();
@@ -168,15 +180,8 @@ export default {
     selectCategoryId(id) {
       if (this.categoryId !== id) {
         this.categoryId = id;
-        this.refreshPortletInstances();
       }
     },
-    refreshPortletInstances() {
-      this.loading = true;
-      return this.$portletInstanceService.getPortletInstances(this.categoryId)
-        .then(portletInstances => this.portletInstances = portletInstances || [])
-        .finally(() => this.loading = false);
-    },
     deletePortletInstance(portletInstance) {
       this.loading = true;
       this.$portletInstanceService.deletePortletInstance(portletInstance.id)
diff --git a/layout-webapp/src/main/webapp/vue-app/portlets/components/instances/Main.vue b/layout-webapp/src/main/webapp/vue-app/portlets/components/instances/Main.vue
index f94a4fb77..b5cacc9f3 100644
--- a/layout-webapp/src/main/webapp/vue-app/portlets/components/instances/Main.vue
+++ b/layout-webapp/src/main/webapp/vue-app/portlets/components/instances/Main.vue
@@ -6,8 +6,7 @@
       class="card-border-radius hidden-sm-and-down me-5" />
     <portlets-instance-list
       ref="list"
-      :keyword="keyword"
-      class="card-border-radius overflow-hidden" />
+      :keyword="keyword" />
   </div>
 </template>
 <script>
diff --git a/layout-webapp/src/main/webapp/vue-app/portlets/components/portlets/List.vue b/layout-webapp/src/main/webapp/vue-app/portlets/components/portlets/List.vue
index 22e4dafe2..1fcffe413 100644
--- a/layout-webapp/src/main/webapp/vue-app/portlets/components/portlets/List.vue
+++ b/layout-webapp/src/main/webapp/vue-app/portlets/components/portlets/List.vue
@@ -28,12 +28,15 @@ export default {
     },
   },
   data: () => ({
-    portlets: [],
-    portletToDelete: null,
-    loading: false,
     collator: new Intl.Collator(eXo.env.portal.language, {numeric: true, sensitivity: 'base'}),
   }),
   computed: {
+    portlets() {
+      return this.$root.portlets;
+    },
+    loading() {
+      return !!this.$root.loading;
+    },
     headers() {
       return this.$root.isMobile && [
         {
@@ -109,9 +112,6 @@ export default {
       }) || this.noEmptyPortlets;
     },
   },
-  created() {
-    this.refreshPortlets();
-  },
   methods: {
     applySortOnItems(portlets, sortFields, sortDescendings) {
       for (let i = 0; i < sortFields.length; i++) {
@@ -128,12 +128,6 @@ export default {
       }
       return portlets;
     },
-    refreshPortlets() {
-      this.loading = true;
-      return this.$portletService.getPortlets()
-        .then(portlets => this.portlets = portlets || [])
-        .finally(() => this.loading = false);
-    },
   },
 };
 </script>
diff --git a/layout-webapp/src/main/webapp/vue-app/portlets/main.js b/layout-webapp/src/main/webapp/vue-app/portlets/main.js
index b212f580c..0bdb20a64 100644
--- a/layout-webapp/src/main/webapp/vue-app/portlets/main.js
+++ b/layout-webapp/src/main/webapp/vue-app/portlets/main.js
@@ -43,10 +43,60 @@ export function init() {
         template: `<portlets-management id="${appId}"/>`,
         vuetify: Vue.prototype.vuetifyOptions,
         i18n,
+        data: {
+          portlets: [],
+          portletInstances: [],
+          portletInstanceCategories: [],
+          loading: 0,
+        },
         computed: {
           isMobile() {
             return this.$vuetify.breakpoint.smAndDown;
           },
+          categoriesById() {
+            return this.portletInstanceCategories.reduce((a, v) => {
+              a[v.id] = v;
+              return a;
+            }, {});
+          },
+          portletsById() {
+            return this.portlets.reduce((a, v) => {
+              a[v.contentId] = v;
+              return a;
+            }, {});
+          },
+        },
+        created() {
+          this.$root.$on('portlets-instance-deleted', this.refreshPortletInstances);
+          this.$root.$on('portlets-instance-created', this.refreshPortletInstances);
+          this.$root.$on('portlets-instance-updated', this.refreshPortletInstances);
+          this.$root.$on('portlets-instance-enabled', this.refreshPortletInstances);
+          this.$root.$on('portlets-instance-disabled', this.refreshPortletInstances);
+          this.$root.$on('portlets-instance-saved', this.refreshPortletInstances);
+
+          this.refreshPortlets();
+          this.refreshPortletInstances();
+          this.refreshPortletInstanceCategories();
+        },
+        methods: {
+          refreshPortlets() {
+            this.loading++;
+            return this.$portletService.getPortlets()
+              .then(data => this.portlets = data || [])
+              .finally(() => this.loading--);
+          },
+          refreshPortletInstances() {
+            this.loading++;
+            return this.$portletInstanceService.getPortletInstances()
+              .then(data => this.portletInstances = data || [])
+              .finally(() => this.loading--);
+          },
+          refreshPortletInstanceCategories() {
+            this.loading++;
+            return this.$portletInstanceCategoryService.getPortletInstanceCategories()
+              .then(data => this.portletInstanceCategories = data || [])
+              .finally(() => this.loading--);
+          },
         },
       }, `#${appId}`, 'Page Layout')
     );