Replace button toggle squad with material

pull/40/head
HardiReady 2018-07-02 22:17:16 +02:00
parent 3bb7bd0e1d
commit 24a081de95
6 changed files with 22 additions and 15 deletions

View File

@ -6,7 +6,7 @@
"scripts": { "scripts": {
"start": "npm run deploy-static-prod && npm start --prefix ./api", "start": "npm run deploy-static-prod && npm start --prefix ./api",
"dev": "npm run deploy-static && npm run dev --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": "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: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", "deploy-static:link-resource": "ln -s ../api/resource/ public/resource",

View File

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

View File

@ -1,9 +1,13 @@
<div class="select-list"> <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> <a class="pull-right btn btn-success" (click)="openNewSquadForm()">+</a>
</div> </div>

View File

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

View File

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

View File

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