Merge pull request #497 from G-Core/category-page-support

Category page support
G-Core · Oct 26, 2023 · 2d2031d · 2d2031d
2 parents f2b57a5 + 79efa46
commit 2d2031d
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 31 deletions.
diff --git a/...ion/account-settings/users/about-users.md → documentation/account-settings/users.md b/...ion/account-settings/users/about-users.md → documentation/account-settings/users.md
@@ -1,12 +1,12 @@
 ---
-title: about-users
-displayName: Overview
+title: users
+displayName: Users
 published: true
-order: 10
 toc:
 pageTitle: Understanding user roles | Gcore
 pageDescription: A detailed guide to user roles and permissions, covering how roles affect service management, personal data changes, etc.
 ---
+
 # About Users
 
 In the Gcore Control Panel, there are roles that define user rights, such as permitted actions to manage the <a href="https://cdn.gcore.com" target="_blank">CDN</a> and <a href="https://streaming.gcore.com" target="_blank">Streaming Platform</a> and change personal data.
@@ -85,4 +85,4 @@ By default, a user who registers an account has the "Administrator" role with th
 
 **Note**: Other CDN and Streaming Platform actions not mentioned in the table are prohibited for roles.
 
-If an administrator invites a new user and assigns two roles to them, the role with more rights will be valid. For example, users who are assigned Users and Engineers roles will possess Engineers rights.
+If an administrator invites a new user and assigns two roles to them, the role with more rights will be valid. For example, users who are assigned Users and Engineers roles will possess Engineers rights.
diff --git a/src/app/components/documentation/documentation.component.ts b/src/app/components/documentation/documentation.component.ts
@@ -170,22 +170,7 @@ export class DocumentationComponent implements OnInit, AfterViewChecked, OnDestr
                     if (!isScullyRunning()) {
                         this.setLastModifiedDate(`documentation/${documentUrlWithCategory}.md`);
                     }
-                    documentUrl
-                        .split('/')
-                        .filter((value) => value)
-                        .forEach((routeSegment, index, arr) => {
-                            breadcrumbs.push({
-                                name:
-                                    index === arr.length - 1
-                                        ? filterdLinks.find((link) => link.title === document)?.displayName
-                                        : filterdLinks.find(
-                                              (link) =>
-                                                  link.title === METADATA_FILE_TITLE &&
-                                                  link.route.endsWith(`${routeSegment}/metadata`),
-                                          )?.displayName || routeSegment.split('-').join(' '),
-                                url: '',
-                            });
-                        });
+                    this.breadCrumbs = this.getDocumentBreadcrumbs(breadcrumbs, documentUrl, document, filterdLinks);
                 }
 
                 this.breadCrumbs = breadcrumbs;
@@ -196,13 +181,17 @@ export class DocumentationComponent implements OnInit, AfterViewChecked, OnDestr
                     const routeSegments = link.route.replace(`/${category}/`, '').split('/');
 
                     if (routeSegments.length === 1) {
-                        menuTree.set(routeSegments[0], {
-                            url: link.redirect || link.route,
-                            name: link.displayName,
-                            order: link.order,
-                            title: link.title,
-                            children: null,
-                        });
+                        if (menuTree.has(routeSegments[0])) {
+                            menuTree.get(routeSegments[0]).url = link.route;
+                        } else {
+                            menuTree.set(routeSegments[0], {
+                                url: link.redirect || link.route,
+                                name: link.displayName,
+                                order: link.order,
+                                title: link.title,
+                                children: null,
+                            });
+                        }
                     } else {
                         this.buildMenuSubTree(menuTree, routeSegments, link);
                     }
@@ -271,11 +260,15 @@ export class DocumentationComponent implements OnInit, AfterViewChecked, OnDestr
     private buildMenuSubTree(tree: Map<string, MenuTreeItem>, routeSegments: Array<string>, link: ScullyRoute): void {
         const unhandledRouteSegments = routeSegments.slice(1);
         let menuItem;
+
         if (tree.has(routeSegments[0])) {
             menuItem = tree.get(routeSegments[0]);
-            if (!menuItem.children) {
-                menuItem.children = new Map();
+
+            if (!unhandledRouteSegments.length) {
+                menuItem.url = link.route;
             }
+
+            menuItem.children = menuItem.children || new Map();
         } else {
             menuItem = {
                 url: unhandledRouteSegments.length ? '' : link.redirect || link.route,
@@ -362,6 +355,38 @@ export class DocumentationComponent implements OnInit, AfterViewChecked, OnDestr
         }
     }
 
+    private getDocumentBreadcrumbs(
+        rootBreadCrumbs: Array<MenuItem>,
+        documentUrl: string,
+        document: string,
+        filterdLinks: Array<ScullyRoute>,
+    ): Array<MenuItem> {
+        const breadcrumbs = [...rootBreadCrumbs];
+
+        documentUrl
+            .split('/')
+            .filter((value) => value)
+            .forEach((routeSegment, index, arr) => {
+                const name =
+                    index === arr.length - 1
+                        ? filterdLinks.find((link) => link.title === document)?.displayName
+                        : filterdLinks.find(
+                              (link) =>
+                                  link.title === METADATA_FILE_TITLE && link.route.endsWith(`${routeSegment}/metadata`),
+                          )?.displayName || routeSegment.split('-').join(' ');
+                const url =
+                    index === arr.length - 1
+                        ? ''
+                        : filterdLinks.find((link) => link.title === routeSegment)?.route || '';
+                breadcrumbs.push({
+                    name,
+                    url,
+                });
+            });
+
+        return breadcrumbs;
+    }
+
     private getContentLevel(name: string): number {
         const regExp = /--\d--/i;
         if (regExp.test(name)) {

diff --git a/src/app/components/left-bar-menu/dropdown-menu-item/dropdown-menu-item.component.html b/src/app/components/left-bar-menu/dropdown-menu-item/dropdown-menu-item.component.html
@@ -1,5 +1,8 @@
 <button class="menu-dropdown" [class.expanded]="isExpanded" #menuDropdown>
-    <span>{{ menuItemDisplayName }}</span>
+    <span *ngIf="!menuUrl">{{ menuItemDisplayName }}</span>
+    <a *ngIf="menuUrl" [routerLink]="menuUrl" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">{{
+        menuItemDisplayName
+    }}</a>
     <div class="menu-dropdown-arrow">
         <svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path
@@ -26,6 +29,7 @@
             [activeUrl]="activeUrl"
             [menuItemName]="menuItem.name"
             [menuItems]="menuItem.children"
+            [menuUrl]="menuItem.url"
             [menuItemTitle]="menuItem.title"
         ></gc-dropdown-menu-item>
     </ng-container>

diff --git a/src/app/components/left-bar-menu/dropdown-menu-item/dropdown-menu-item.component.scss b/src/app/components/left-bar-menu/dropdown-menu-item/dropdown-menu-item.component.scss
@@ -26,9 +26,16 @@
         margin-top: 1rem;
     }
 
-    span {
+    span,
+    a {
         flex: 1;
         text-align: left;
+        text-decoration: none;
+        color: #251b29;
+
+        &.active {
+            color: $actionPrimaryActive;
+        }
     }
 
     .menu-dropdown-arrow {

diff --git a/src/app/components/left-bar-menu/dropdown-menu-item/dropdown-menu-item.component.ts b/src/app/components/left-bar-menu/dropdown-menu-item/dropdown-menu-item.component.ts
@@ -12,6 +12,8 @@ import {
     SimpleChanges,
     ViewChild,
 } from '@angular/core';
+import { Router } from '@angular/router';
+
 import { MenuItem } from '../../../models';
 
 @Component({
@@ -25,6 +27,7 @@ export class DropdownMenuItemComponent implements OnInit, OnChanges, AfterViewIn
     @Input() public menuItemTitle: string;
     @Input() public menuItems: Array<MenuItem> = [];
     @Input() public activeUrl: string = '';
+    @Input() public menuUrl: string = '';
 
     public isExpanded: boolean = false;
     public menuItemDisplayName: string = '';

diff --git a/src/app/components/left-bar-menu/left-bar-menu.component.html b/src/app/components/left-bar-menu/left-bar-menu.component.html
@@ -40,6 +40,7 @@
             <gc-dropdown-menu-item
                 *ngIf="menuItem.children && menuItem.children.length"
                 [activeUrl]="activeUrl"
+                [menuUrl]="menuItem.url"
                 [menuItemName]="menuItem.name"
                 [menuItems]="menuItem.children"
                 [menuItemTitle]="menuItem.title"