feat: Implement Sidebar Spaces List switch template - MEED-7790 - Mee…

…ds-io/MIPs#159 (#4206) This change will allow to access to space list from Sidebar by space template and switch designated sort type. In addition, an expand behavior has been added to space template group to allow user to change how the menu should look by default when displaying the page.
Meeds-io · Nov 28, 2024 · 0031984 · 0031984
1 parent 02ba706
commit 0031984
Show file tree

Hide file tree

Showing 16 changed files with 164 additions and 444 deletions.
diff --git a/component/service/src/main/java/org/exoplatform/social/rest/impl/space/SpaceRest.java b/component/service/src/main/java/org/exoplatform/social/rest/impl/space/SpaceRest.java
@@ -299,7 +299,7 @@ public Response getSpaces( // NOSONAR
     } else if (StringUtils.equalsIgnoreCase(SPACE_FILTER_TYPE_FAVORITE, filterType)) {
       listAccess = spaceService.getFavoriteSpacesByFilter(authenticatedUser, spaceFilter);
     } else if (StringUtils.equalsIgnoreCase(LAST_VISITED_SPACES, filterType)) {
-      listAccess = spaceService.getLastAccessedSpace(authenticatedUser);
+      listAccess = spaceService.getLastAccessedSpaceByFilter(authenticatedUser, spaceFilter);
     } else {
       return Response.status(400).entity("Unrecognized space filter type").build();
     }

diff --git a/webapp/src/main/resources/locale/portal/HamburgerMenu_en.properties b/webapp/src/main/resources/locale/portal/HamburgerMenu_en.properties
@@ -26,3 +26,7 @@ menu.productName.seeProduct=See Product Updates
 menu.settings=Access User Settings
 menu.logout=Log out
 menu.spaces.openSpaceAdvancedActions=See other options
+menu.spacesExpand=Expand spaces
+menu.spacesCollapse=Collapse spaces
+menu.accessToSpacesList=Access to spaces list
+menu.accessToPagesList=Access to pages list
diff --git a/...ettings/components/navigation/sidebar/drawer/NavigationSettingsAddSidebarSpacesDrawer.vue b/...ettings/components/navigation/sidebar/drawer/NavigationSettingsAddSidebarSpacesDrawer.vue
@@ -220,7 +220,7 @@ export default {
       this.option = this.isNew ? 'SPACE_TEMPLATE' : item.type;
       this.spaceTemplateId = item?.properties?.spaceTemplateId && Number(item.properties.spaceTemplateId) || null;
       this.sortBy = item?.properties?.sortBy || 'TITLE';
-      this.limit = item?.properties?.limit && Number(item.properties.limit) || 4;
+      this.limit = item?.properties && Object.hasOwn(item.properties, 'limit') ? Number(item.properties.limit) : 4;
       this.names = item?.properties?.names && JSON.parse(item?.properties?.names) || {};
     },
     async apply() {

diff --git a/webapp/src/main/webapp/vue-apps/hamburger-menu/components/Sidebar.vue b/webapp/src/main/webapp/vue-apps/hamburger-menu/components/Sidebar.vue
@@ -52,7 +52,7 @@
           :third-level-drawer="thirdLevelDrawer"
           :second-level="secondLevel"
           :opened-site="site"
-          :recent-spaces="recentSpaces"
+          :spaces="spaces"
           :opened-space="space"
           :drawer-width="drawerWidth"
           @firstLevelDrawer="updateFirstLevelDrawer($event)" />
@@ -64,7 +64,7 @@
           :third-level-drawer="thirdLevelDrawer"
           :second-level="secondLevel"
           :opened-site="site"
-          :recent-spaces="recentSpaces"
+          :spaces="spaces"
           :opened-space="space"
           :drawer-width="drawerWidth"
           @firstLevelDrawer="updateFirstLevelDrawer($event)" />
@@ -98,7 +98,7 @@ export default {
     space: null,
     site: null,
     initStep: 0,
-    recentSpaces: null,
+    spaces: null,
     limit: 7,
     offset: 0,
     unreadPerSpace: null,
@@ -197,7 +197,7 @@ export default {
   },
   created() {
     this.$root.$on('change-space-menu', this.changeSpaceMenu);
-    this.$root.$on('change-recent-spaces-menu', this.changeRecentSpacesMenu);
+    this.$root.$on('change-spaces-menu', this.changeSpacesMenu);
     this.$root.$on('change-site-menu', this.changeSiteMenu);
     this.$root.$on('dialog-opened', () => this.allowClosing = false);
     this.$root.$on('dialog-closed', () => window.setTimeout(() => {
@@ -214,23 +214,32 @@ export default {
       await this.$nextTick();
       this.firstLevelDrawer = true;
     },
-    changeRecentSpacesMenu() {
+    async changeSpacesMenu(spaceTemplateId, spacesUrl, sortBy) {
       this.site = null;
-      if (this.secondLevel === 'recentSpaces') {
+      if (this.secondLevel === 'spaces'
+          && ((spaceTemplateId && this.$root.openedSpaceTemplateId === spaceTemplateId)
+              || (spacesUrl && this.$root.openedSpacesUrl === spacesUrl))) {
         this.space = null;
         this.secondLevel = null;
         this.secondLevelDrawer = false;
         this.thirdLevelDrawer = false;
       } else {
+        if (this.secondLevel) {
+          this.secondLevel = null;
+          await this.$nextTick();
+        }
         this.space = null;
-        this.secondLevel = 'recentSpaces';
+        this.$root.openedSpaceTemplateId = spaceTemplateId;
+        this.$root.openedSpacesUrl = spacesUrl;
+        this.$root.spacesSortBy = sortBy;
+        this.secondLevel = 'spaces';
         this.secondLevelDrawer = true;
         this.thirdLevelDrawer = false;
       }
     },
     changeSpaceMenu(space, thirdLevel) {
       this.site = null;
-      if (!thirdLevel && this.secondLevel === 'recentSpaces') {
+      if (!thirdLevel && this.secondLevel === 'spaces') {
         this.space = space;
         this.secondLevel = 'spaceMenu';
         this.secondLevelDrawer = true;
@@ -244,7 +253,7 @@ export default {
         }
       } else {
         this.space = space;
-        if (this.secondLevel === 'recentSpaces') {
+        if (this.secondLevel === 'spaces') {
           this.thirdLevelDrawer = true;
         } else {
           this.secondLevel = 'spaceMenu';

diff --git a/webapp/src/main/webapp/vue-apps/hamburger-menu/components/drawer/SidebarFirstLevel.vue b/webapp/src/main/webapp/vue-apps/hamburger-menu/components/drawer/SidebarFirstLevel.vue
@@ -71,7 +71,7 @@ export default {
       type: Object,
       default: null,
     },
-    recentSpaces: {
+    spaces: {
       type: Array,
       default: null,
     },
@@ -91,9 +91,6 @@ export default {
     levelsOpened() {
       return this.secondLevelDrawer || this.thirdLevelDrawer;
     },
-    recentSpacesDrawerOpened() {
-      return this.secondLevelDrawer && this.secondLevel === 'recentSpaces';
-    },
     stickyDisplay() {
       return this.$root.sticky;
     },

diff --git a/webapp/src/main/webapp/vue-apps/hamburger-menu/components/drawer/SidebarSecondLevel.vue b/webapp/src/main/webapp/vue-apps/hamburger-menu/components/drawer/SidebarSecondLevel.vue
@@ -31,8 +31,8 @@
     hide-overlay>
     <v-hover v-if="drawer" v-model="$root.hoverSecondLevel">
       <div class="full-width fill-height overflow-x-hidden overflow-x-auto specific-scrollbar">
-        <recent-spaces-hamburger-navigation
-          v-if="secondLevel === 'recentSpaces'"
+        <spaces-hamburger-navigation
+          v-if="secondLevel === 'spaces'"
           :opened-space="thirdLevelDrawer && openedSpace"
           @close="drawer = false" />
         <space-panel-hamburger-navigation

diff --git a/webapp/src/main/webapp/vue-apps/hamburger-menu/components/list/SidebarListHeader.vue b/webapp/src/main/webapp/vue-apps/hamburger-menu/components/list/SidebarListHeader.vue
@@ -25,7 +25,8 @@
     min-height="57"
     flat>
     <v-list-item
-      :href="$root.defaultUserPath"
+      :href="defaultUserPath"
+      :target="defaultUserPathTarget"
       class="fill-height">
       <div class="my-auto me-2 logoContainer">
         <img
@@ -122,6 +123,17 @@ export default {
     arrowIconRight() {
       return this.$vuetify.rtl && 'fa-angle-double-left' || 'fa-angle-double-right';
     },
+    defaultUserExternalPath() {
+      return this.$root.defaultUserPath && Autolinker.parse(this.$root.defaultUserPath, {
+        email: true,
+      })?.[0]?.getUrl?.();
+    },
+    defaultUserPath() {
+      return this.defaultUserExternalPath || this.$root.defaultUserPath;
+    },
+    defaultUserPathTarget() {
+      return this.defaultUserExternalPath && '_blank' || '_self';
+    },
   },
   methods: {
     changeMenuStickiness(mode) {

diff --git a/webapp/src/main/webapp/vue-apps/hamburger-menu/components/list/SidebarListItem.vue b/webapp/src/main/webapp/vue-apps/hamburger-menu/components/list/SidebarListItem.vue
@@ -26,28 +26,64 @@
       :item="item" />
   </div>
   <div v-else-if="isSpaces || isSpaceTemplate">
-    <template v-if="menuItems?.length || isSpaces">
+    <v-hover v-if="hasItems || isSpaces" v-model="hover">
       <v-list-item
         v-bind="url && {
           href: url,
           target: item.target,
           value: item.url,
         }"
+        v-on="hover && hasItems && !url && {
+          click: () => collapsedSpaces = !collapsedSpaces,
+        }"
+        :title="displaySpacesExpandFull && (collapsedSpaces && $t('menu.spacesExpand') || $t('menu.spacesCollapse'))"
         :class="$root.iconCollapse && 'mx-0'"
-        :disabled="!item.url"
-        class="d-flex ps-3">
+        class="d-flex ps-3"
+        dense>
         <v-list-item-avatar class="me-2 my-auto" min-width="40">
-          <v-icon size="18">{{ item.icon || 'fa-folder' }}</v-icon>
+          <v-btn
+            v-if="displaySpacesExpandButton"
+            :title="collapsedSpaces && $t('menu.spacesExpand') || $t('menu.spacesCollapse')"
+            height="36"
+            width="36"
+            icon
+            @mousedown.prevent.stop="0"
+            @mouseup.prevent.stop="0"
+            @click.prevent.stop="collapsedSpaces = !collapsedSpaces">
+            <v-icon size="18">{{ spacesIcon }}</v-icon>
+          </v-btn>
+          <v-icon v-else size="18">{{ spacesIcon }}</v-icon>
         </v-list-item-avatar>
         <v-list-item-content v-if="$root.expand">
           <v-list-item-title class="menu-text-color text-truncate">
             {{ $t(item.name) }}
           </v-list-item-title>
         </v-list-item-content>
+        <v-list-item-action
+          v-if="toggleArrow && $root.expand"
+          class="my-auto align-center"
+          @mousedown.stop.prevent
+          @mouseup.stop.prevent>
+          <ripple-hover-button
+            :active="!drawerOpened"
+            :title="$t('menu.accessToSpacesList')"
+            class="ms-2"
+            icon
+            @ripple-hover="openSpacesList">
+            <v-icon
+              class="me-0 pa-2 icon-default-color"
+              small>
+              {{ arrowIcon }}
+            </v-icon>
+          </ripple-hover-button>
+        </v-list-item-action>
       </v-list-item>
+    </v-hover>
+    <v-expand-transition>
       <sidebar-list-sub-list
+        v-show="!collapsedSpaces"
         :item="item" />
-    </template>
+    </v-expand-transition>
   </div>
   <v-hover
     v-else-if="item.url"
@@ -98,6 +134,7 @@
         @mouseup.stop.prevent>
         <ripple-hover-button
           :active="!drawerOpened"
+          :title="$t('menu.accessToPagesList')"
           class="ms-2"
           icon
           @ripple-hover="openOrCloseDrawer()">
@@ -146,6 +183,7 @@ export default {
   },
   data: () => ({
     hover: false,
+    collapsedSpaces: false,
     space: null,
   }),
   computed: {
@@ -155,6 +193,9 @@ export default {
     menuItems() {
       return this.item?.items;
     },
+    hasItems() {
+      return this.menuItems?.length;
+    },
     defaultUserPath() {
       return this.$root.defaultUserPath;
     },
@@ -181,11 +222,25 @@ export default {
     },
     drawerOpened() {
       return (this.isSite && this.$root.openedSiteName === this.item?.properties?.siteName)
-        || (this.isSpace && Number(this.$root.openedSpaceId) === Number(this.item?.properties?.id));
+        || (this.isSpace && Number(this.$root.openedSpaceId) === Number(this.item?.properties?.id))
+        || (this.isSpaces && this.$root.openedSpacesUrl === this.url)
+        || (this.isSpaceTemplate && Number(this.$root.openedSpaceTemplateId) === Number(this.item?.properties?.spaceTemplateId));
     },
     arrowIconLeft() {
       return this.$vuetify.rtl && 'fa-arrow-right' || 'fa-arrow-left';
     },
+    displaySpacesExpandButton() {
+      return this.hover && this.hasItems && this.url;
+    },
+    displaySpacesExpandFull() {
+      return this.hover && this.hasItems && !this.url;
+    },
+    displaySpacesExpandKey() {
+      return `sidebar-collapsed-${this.item.type}-${this.item.url || this.item?.properties?.id || this.item?.properties?.spaceTemplateId}`;
+    },
+    spacesIcon() {
+      return this.hover && this.hasItems ? (this.collapsedSpaces && 'fa-caret-up' || 'fa-caret-down') : (this.item.icon || 'fa-folder');
+    },
     arrowIconRight() {
       return this.$vuetify.rtl && 'fa-arrow-left' || 'fa-arrow-right';
     },
@@ -223,7 +278,7 @@ export default {
       return this.isSpace && 2;
     },
     toggleArrow() {
-      return (this.isSite || this.isSpace)
+      return (this.isSite || this.isSpace || this.isSpaceTemplate || this.isSpaces)
         && (this.hover || this.drawerOpened);
     },
   },
@@ -233,8 +288,24 @@ export default {
         this.initHover();
       }
     },
+    collapsedSpaces() {
+      if (this.collapsedSpaces) {
+        window.localStorage.setItem(this.displaySpacesExpandKey, 'true');
+      } else {
+        window.localStorage.removeItem(this.displaySpacesExpandKey);
+      }
+    },
+  },
+  created() {
+    this.collapsedSpaces = (this.isSpaces || this.isSpaceTemplate) && window.localStorage.getItem(this.displaySpacesExpandKey) === 'true';
   },
   methods: {
+    openSpacesList() {
+      this.$root.$emit('change-spaces-menu',
+        this.isSpaceTemplate && this.item.properties?.spaceTemplateId,
+        this.isSpaces && this.url,
+        this.item.properties?.sortBy);
+    },
     async openOrCloseDrawer() {
       if (this.isSite) {
         if (!this.$root.sites) {