Replace button toggle squad with material

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "start": "npm run deploy-static-prod && npm start --prefix ./api",
     "dev": "npm run deploy-static && npm run dev --prefix ./api",
-    "pre-deploy-clean": "unlink ./public/resource",
+    "pre-deploy-clean": "rm -f ./public/resource",
     "deploy-static": "npm run pre-deploy-clean && npm run build --prefix=static && npm run deploy-static:link-resource && npm run deploy-static:api-docs",
     "deploy-static:prod": "pre-deploy-clean && npm run build:prod --prefix=static && npm run deploy-static:link-resource && npm run deploy-static:api-docs",
     "deploy-static:link-resource": "ln -s ../api/resource/ public/resource",

static/src/app/ranks/rank-list/rank-list.component.ts

@@ -8,6 +8,7 @@ import {Rank} from '../../models/model-interfaces';
 import {RankService} from '../../services/army-management/rank.service';
 import {Fraction} from '../../utils/fraction.enum';
 import {UIHelpers} from '../../utils/global.helpers';
+import {MatButtonToggleGroup} from "@angular/material";
 
 @Component({
   selector: 'rank-list',
@@ -61,7 +62,7 @@ export class RankListComponent implements OnInit {
     this.router.navigate([{outlets: {'right': ['edit', rankId]}}], {relativeTo: this.route});
   }
 
-  filterRanks(group) {
+  filterRanks(group: MatButtonToggleGroup) {
     this.radioModel = UIHelpers.toggleReleaseButton(this.radioModel, group);
     this.ranks$ = this.rankService.findRanks(this.searchTerm.value, this.radioModel);
   }
@@ -81,5 +82,4 @@ export class RankListComponent implements OnInit {
 
     this.location.replaceState(absoluteUrl, queryPart);
   }
-
 }

static/src/app/squads/squad-list/squad-list.component.html

@@ -1,9 +1,13 @@
 <div class="select-list">
-  <div class="input-group list-header pull-left">
+  <div class="list-header">
-    <div class="btn-group" (click)="filterSquads()">
+    <mat-button-toggle-group #group="matButtonToggleGroup">
-      <label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="blufor" uncheckable>{{fraction.BLUFOR}}</label>
+      <mat-button-toggle value="BLUFOR" (change)="filterSquads(group)">
-      <label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="opfor" uncheckable>{{fraction.OPFOR}}</label>
+        {{fraction.BLUFOR}}
-    </div>
+      </mat-button-toggle>
+      <mat-button-toggle value="OPFOR" (change)="filterSquads(group)">
+        {{fraction.OPFOR}}
+      </mat-button-toggle>
+    </mat-button-toggle-group>
     <a class="pull-right btn btn-success" (click)="openNewSquadForm()">+</a>
   </div>
 

static/src/app/squads/squad-list/squad-list.component.ts

@@ -7,6 +7,8 @@ import {Observable} from 'rxjs/Observable';
 import {Squad} from '../../models/model-interfaces';
 import {SquadService} from '../../services/army-management/squad.service';
 import {Fraction} from '../../utils/fraction.enum';
+import {UIHelpers} from "../../utils/global.helpers";
+import {MatButtonToggleGroup} from "@angular/material";
 
 @Component({
   selector: 'squad-list',
@@ -69,7 +71,8 @@ export class SquadListComponent implements OnInit {
     }
   }
 
-  filterSquads() {
+  filterSquads(group: MatButtonToggleGroup) {
+    this.radioModel = UIHelpers.toggleReleaseButton(this.radioModel, group);
     this.squads$ = this.squadService.findSquads(this.searchTerm.value, this.radioModel);
   }
 
@@ -79,5 +82,4 @@ export class SquadListComponent implements OnInit {
 
     this.location.replaceState(absoluteUrl, queryPart);
   }
-
 }

static/src/app/squads/squads.module.ts

@@ -4,11 +4,11 @@ import {SharedModule} from '../shared.module';
 import {squadRouterModule, squadsRoutingComponents} from './squads.routing';
 import {SquadStore} from '../services/stores/squad.store';
 import {SquadService} from '../services/army-management/squad.service';
-import {ButtonsModule} from 'ngx-bootstrap';
+import {MatButtonToggleModule} from "@angular/material";
 
 @NgModule({
   declarations: squadsRoutingComponents,
-  imports: [CommonModule, SharedModule, ButtonsModule.forRoot(), squadRouterModule],
+  imports: [CommonModule, SharedModule, MatButtonToggleModule, squadRouterModule],
   providers: [SquadStore, SquadService]
 })
 export class SquadsModule {

static/src/app/utils/global.helpers.ts

@@ -1,3 +1,5 @@
+import {MatButtonToggleGroup} from "@angular/material";
+
 export const CSSHelpers = {
   getBackgroundCSS: (imageUrl) => {
     return 'background-image: url(' + imageUrl + ');' +
@@ -9,12 +11,11 @@ export const CSSHelpers = {
 };
 
 export const UIHelpers = {
-  toggleReleaseButton: (currentVal, group) => {
+  toggleReleaseButton: (currentVal, group: MatButtonToggleGroup) => {
     if (currentVal === group.value) {
       group.value = '';
       return '';
-    } else {
-      return group.value;
     }
+    return group.value;
   }
 };