support routerlink for local routes (#210)

AbsaOSS · Sep 14, 2023 · afd0fbb · afd0fbb
1 parent fc452af
commit afd0fbb
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 33 deletions.
diff --git a/projects/cps-ui-kit/src/lib/components/cps-menu/cps-menu.component.html b/projects/cps-ui-kit/src/lib/components/cps-menu/cps-menu.component.html
@@ -24,34 +24,65 @@
       <div *ngIf="header && !compressed" class="cps-menu-header">
         {{ header }}
       </div>
-      <a
-        *ngFor="let item of items; let i = index"
-        (click)="onItemClick($event, item)"
-        [attr.href]="item.url ? item.url : null"
-        [attr.target]="item.url ? item.target : null"
-        [ngClass]="{
-          'cps-menu-item-disabled': item.disabled,
-          'cps-menu-item-first': i === 0,
-          'cps-menu-item-compressed': compressed,
-          'cps-menu-item-compressed-with-icons': compressed && withIcons
-        }"
-        class="cps-menu-item">
-        <div class="cps-menu-item-icon" *ngIf="withIcons">
-          <cps-icon
-            *ngIf="item.icon"
-            [icon]="item.icon"
-            [color]="item.disabled ? 'text-light' : 'text-dark'"
-            [size]="compressed ? 'small' : 'normal'"></cps-icon>
-        </div>
-        <div class="cps-menu-item-content">
-          <span class="cps-menu-item-content-title">{{ item.title }}</span>
-          <span
-            *ngIf="item.desc && !compressed"
-            class="cps-menu-item-content-desc"
-            >{{ item.desc }}</span
-          >
-        </div>
-      </a>
+
+      <ng-container *ngFor="let item of items; let i = index">
+        <a
+          *ngIf="!item.url"
+          (click)="onItemClick($event, item)"
+          [ngClass]="itemsClasses[i]">
+          <ng-container
+            *ngTemplateOutlet="
+              itemTemplate;
+              context: {
+                item: item
+              }
+            "></ng-container>
+        </a>
+        <a
+          *ngIf="item.url && item.url.startsWith('/')"
+          (click)="onItemClick($event, item)"
+          [routerLink]="item.url"
+          [target]="item.target"
+          [ngClass]="itemsClasses[i]">
+          <ng-container
+            *ngTemplateOutlet="
+              itemTemplate;
+              context: {
+                item: item
+              }
+            "></ng-container>
+        </a>
+        <a
+          *ngIf="item.url && !item.url.startsWith('/')"
+          (click)="onItemClick($event, item)"
+          [href]="item.url"
+          [attr.target]="item.target"
+          [ngClass]="itemsClasses[i]">
+          <ng-container
+            *ngTemplateOutlet="
+              itemTemplate;
+              context: {
+                item: item
+              }
+            "></ng-container>
+        </a>
+      </ng-container>
     </div>
   </div>
 </div>
+
+<ng-template #itemTemplate let-item="item">
+  <div class="cps-menu-item-icon" *ngIf="withIcons">
+    <cps-icon
+      *ngIf="item.icon"
+      [icon]="item.icon"
+      [color]="item.disabled ? 'text-light' : 'text-dark'"
+      [size]="compressed ? 'small' : 'normal'"></cps-icon>
+  </div>
+  <div class="cps-menu-item-content">
+    <span class="cps-menu-item-content-title">{{ item.title }}</span>
+    <span *ngIf="item.desc && !compressed" class="cps-menu-item-content-desc">{{
+      item.desc
+    }}</span>
+  </div>
+</ng-template>
diff --git a/projects/cps-ui-kit/src/lib/components/cps-menu/cps-menu.component.ts b/projects/cps-ui-kit/src/lib/components/cps-menu/cps-menu.component.ts
@@ -7,6 +7,7 @@ import {
   trigger
 } from '@angular/animations';
 import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { RouterModule } from '@angular/router';
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
@@ -18,6 +19,7 @@ import {
   Input,
   NgZone,
   OnDestroy,
+  OnInit,
   Output,
   PLATFORM_ID,
   Renderer2,
@@ -47,7 +49,7 @@ export type CpsMenuAttachPosition = 'tr' | 'br' | 'tl' | 'bl' | 'default';
 
 @Component({
   standalone: true,
-  imports: [CommonModule, SharedModule, CpsIconComponent],
+  imports: [CommonModule, SharedModule, CpsIconComponent, RouterModule],
   selector: 'cps-menu',
   templateUrl: './cps-menu.component.html',
   styleUrls: ['./cps-menu.component.scss'],
@@ -81,7 +83,7 @@ export type CpsMenuAttachPosition = 'tr' | 'br' | 'tl' | 'bl' | 'default';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None
 })
-export class CpsMenuComponent implements AfterViewInit, OnDestroy {
+export class CpsMenuComponent implements OnInit, AfterViewInit, OnDestroy {
   @Input() header = '';
   @Input() items: CpsMenuItem[] = [];
   @Input() withArrow = true;
@@ -121,6 +123,8 @@ export class CpsMenuComponent implements AfterViewInit, OnDestroy {
 
   targetResizeObserver: ResizeObserver;
 
+  itemsClasses: string[] = [];
+
   // eslint-disable-next-line no-useless-constructor
   constructor(
     @Inject(DOCUMENT) private document: Document,
@@ -139,10 +143,30 @@ export class CpsMenuComponent implements AfterViewInit, OnDestroy {
     });
   }
 
+  ngOnInit(): void {
+    if (this.compressed) this.withIcons = this.items.some((itm) => itm.icon);
+    this._setItemsClasses();
+  }
+
   ngAfterViewInit(): void {
     this.renderer.setStyle(this.el.nativeElement, 'display', 'none');
   }
 
+  private _setItemsClasses() {
+    if (this.items.length < 1) return;
+
+    this.itemsClasses = this.items.map((item, index) => {
+      const res = ['cps-menu-item'];
+      if (item.disabled) res.push('cps-menu-item-disabled');
+      if (index === 0) res.push('cps-menu-item-first');
+      if (this.compressed) res.push('cps-menu-item-compressed');
+      if (this.compressed && this.withIcons)
+        res.push('cps-menu-item-compressed-with-icons');
+
+      return res.join(' ');
+    });
+  }
+
   toggle(event?: any, target?: any, pos?: CpsMenuAttachPosition) {
     if (this.isOverlayAnimationInProgress) {
       return;
@@ -407,7 +431,6 @@ export class CpsMenuComponent implements AfterViewInit, OnDestroy {
     if (event.toState === 'close') {
       this.beforeMenuHidden.emit(null);
     } else if (event.toState === 'open') {
-      if (this.compressed) this.withIcons = this.items.some((itm) => itm.icon);
       this.container = event.element;
       this.appendContainer();
       this.align();

diff --git a/projects/cps-ui-kit/src/lib/components/cps-sidebar-menu/cps-sidebar-menu.component.html b/projects/cps-ui-kit/src/lib/components/cps-sidebar-menu/cps-sidebar-menu.component.html
@@ -8,8 +8,7 @@
       class="cps-sidebar-menu-item"
       [routerLink]="[item.url]"
       routerLinkActive="active"
-      #rla="routerLinkActive"
-      [ngClass]="{ active: rla.isActive, disabled: item.disabled }">
+      [ngClass]="{ disabled: item.disabled }">
       <cps-icon [icon]="item.icon" size="normal"> </cps-icon>
       <span
         class="cps-sidebar-menu-item-label"