From ccab3d0847962d80696e40d1dc21a28b5d5b4390 Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Fri, 27 Jan 2023 13:54:40 +0200
Subject: [PATCH] Slider-tabs: Add align left and right and merge query params
 on navigate to other fragment

---
 sharedComponents/tabs/slider-tab.component.ts |  2 ++
 .../tabs/slider-tabs.component.ts             | 29 +++++++++++++++----
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/sharedComponents/tabs/slider-tab.component.ts b/sharedComponents/tabs/slider-tab.component.ts
index 2060ccf2..bea2540b 100644
--- a/sharedComponents/tabs/slider-tab.component.ts
+++ b/sharedComponents/tabs/slider-tab.component.ts
@@ -13,4 +13,6 @@ export class SliderTabComponent {
   public active: boolean = false;
   @Input()
   public disabled: boolean = false;
+  @Input()
+  public align: 'left' | 'right' = 'left';
 }
diff --git a/sharedComponents/tabs/slider-tabs.component.ts b/sharedComponents/tabs/slider-tabs.component.ts
index 63257c9b..318d5802 100644
--- a/sharedComponents/tabs/slider-tabs.component.ts
+++ b/sharedComponents/tabs/slider-tabs.component.ts
@@ -27,13 +27,23 @@ declare var UIkit;
             [attr.uk-tab]="type === 'static'?('connect:' + connect):null"
             [ngClass]="'uk-flex-' + flexPosition">
           <ng-container *ngIf="type === 'static'">
-            <li *ngFor="let tab of tabs.toArray()" class="uk-text-capitalize">
+            <li *ngFor="let tab of leftTabs" class="uk-text-capitalize">
+              <a>{{tab.title}}</a>
+            </li>
+            <li *ngFor="let tab of rightTabs; let i=index;"
+                [ngClass]="i === 0?'uk-flex-1 uk-flex uk-flex-right':''"
+                class="uk-text-capitalize">
               <a>{{tab.title}}</a>
             </li>
           </ng-container>
           <ng-container *ngIf="type === 'scrollable'">
-            <li *ngFor="let tab of tabs.toArray()" class="uk-text-capitalize" [class.uk-active]="tab.active">
-              <a routerLink="./" [fragment]="tab.id">{{tab.title}}</a>
+            <li *ngFor="let tab of leftTabs" class="uk-text-capitalize" [class.uk-active]="tab.active">
+              <a routerLink="./" [fragment]="tab.id" queryParamsHandling="merge">{{tab.title}}</a>
+            </li>
+            <li *ngFor="let tab of rightTabs; let i=index;" class="uk-text-capitalize"
+                [ngClass]="i === 0?'uk-flex-1 uk-flex uk-flex-right':''"
+                [class.uk-active]="tab.active">
+              <a routerLink="./" [fragment]="tab.id" queryParamsHandling="merge">{{tab.title}}</a>
             </li>
           </ng-container>
         </ul>
@@ -126,7 +136,7 @@ export class SliderTabsComponent implements AfterViewInit, OnDestroy {
       let index = event.detail[0].index();
       if (index !== this.activeIndex) {
         this.activeIndex = index;
-        this.router.navigate(['./'], {relativeTo: this.route, fragment: this.connect.replace('#', '')});
+        this.router.navigate(['./'], {relativeTo: this.route, fragment: this.connect.replace('#', ''), queryParamsHandling: "merge"});
       }
     }));
   }
@@ -153,7 +163,8 @@ export class SliderTabsComponent implements AfterViewInit, OnDestroy {
             this.router.navigate(['./'], {
               fragment: entry.target.id,
               relativeTo: this.route,
-              state: {disableScroll: true}
+              state: {disableScroll: true},
+              queryParamsHandling: 'merge'
             });
           }, 200);
         }
@@ -186,6 +197,14 @@ export class SliderTabsComponent implements AfterViewInit, OnDestroy {
     this.cdr.detectChanges();
   }
   
+  get leftTabs(): SliderTabComponent[] {
+    return this.tabs.toArray().filter(tab => tab.align === 'left');
+  }
+  
+  get rightTabs(): SliderTabComponent[] {
+    return this.tabs.toArray().filter(tab => tab.align === 'right');
+  }
+  
   ngOnDestroy() {
     this.subscriptions.forEach(subscription => {
       if (subscription instanceof Subscription) {