From 15ea13e225f2a270b542be67dadacf2cecb7dab6 Mon Sep 17 00:00:00 2001
From: HardiReady <hardi@noarch.de>
Date: Sat, 11 Aug 2018 18:43:41 +0200
Subject: [PATCH] Add url state representation for decoration overview

---
 .../decoration-overview.component.html        |  2 +-
 .../decoration-overview.component.ts          | 36 +++++++++++++++++--
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/static/src/app/pub/decoration-overview/decoration-overview.component.html b/static/src/app/pub/decoration-overview/decoration-overview.component.html
index 5e7b72f..20b199c 100644
--- a/static/src/app/pub/decoration-overview/decoration-overview.component.html
+++ b/static/src/app/pub/decoration-overview/decoration-overview.component.html
@@ -7,7 +7,7 @@
     <div [ngClass]="{active: active === 'GLOBAL'}" (click)="switchFraction('GLOBAL')">GLOBAL</div>
   </div>
 
-  <mat-tab-group>
+  <mat-tab-group [selectedIndex]="selectedType" (selectedIndexChange)="switchTab($event)">
     <mat-tab label="Orden">
       <ng-template matTabContent>
         <cc-decoration-panel *ngFor="let decoration of medals"
diff --git a/static/src/app/pub/decoration-overview/decoration-overview.component.ts b/static/src/app/pub/decoration-overview/decoration-overview.component.ts
index 2c0bf72..82996ec 100644
--- a/static/src/app/pub/decoration-overview/decoration-overview.component.ts
+++ b/static/src/app/pub/decoration-overview/decoration-overview.component.ts
@@ -6,6 +6,7 @@ import {Decoration} from '../../models/model-interfaces';
 import {DecorationService} from '../../services/army-management/decoration.service';
 import {MatBottomSheet} from '@angular/material';
 import {UserListSheetComponent} from '../user-list-sheet/user-list-sheet.component';
+import {Location} from '@angular/common';
 
 
 @Component({
@@ -23,10 +24,13 @@ export class DecorationOverviewComponent implements OnInit {
 
   active: string;
 
+  selectedType = 0;
+
   readonly fraction = Fraction;
 
   constructor(private router: Router,
               private route: ActivatedRoute,
+              private location: Location,
               private decorationService: DecorationService,
               private bottomSheet: MatBottomSheet) {
   }
@@ -36,17 +40,45 @@ export class DecorationOverviewComponent implements OnInit {
     this.decorationService.findDecorations()
         .subscribe(decorations => {
           this.decorations = decorations;
-          this.switchFraction('BLUFOR');
+          const queryParams = this.route.snapshot.queryParams;
+          if (queryParams.type < 2) {
+            this.selectedType = queryParams.type;
+          }
+
+          const fract = queryParams.fraction;
+          if (fract && (fract === 'BLUFOR' || fract === 'OPFOR' || fract === 'GLOBAL')) {
+            this.switchFraction(queryParams.fraction);
+          } else {
+            this.switchFraction('BLUFOR');
+          }
         });
   };
 
-  switchFraction(value: string) {
+  switchFraction(value: any) {
     this.medals = this.decorations.filter(d => d.fraction === value && d.isMedal);
     this.ribbons = this.decorations.filter(d => d.fraction === value && !d.isMedal);
     this.active = value;
+    this.adjustBrowserUrl(value)
+  }
+
+  switchTab(tabIndex) {
+    this.selectedType = tabIndex;
+    this.adjustBrowserUrl(this.active)
   }
 
   select(decoration: Decoration) {
     this.bottomSheet.open(UserListSheetComponent, {data: {decoration: decoration}});
   }
+
+  adjustBrowserUrl(fractionKey = '') {
+    const absoluteUrl = this.location.path().split('?')[0];
+    if (fractionKey === 'BLUFOR' && this.selectedType === 0) {
+      this.location.replaceState(absoluteUrl);
+      return;
+    }
+    const queryPart = fractionKey !== '' ? 'fraction='.concat(fractionKey)
+                                                      .concat('&type=' + this.selectedType) : 'type=0';
+
+    this.location.replaceState(absoluteUrl, queryPart);
+  }
 }