Replace fraction filter radio buttons with ngx-bootstrap radio
parent
04e7a77233
commit
a7f9821a38
|
|
@ -1,43 +1,21 @@
|
|||
<div class="select-list">
|
||||
<div class="input-group list-header pull-left">
|
||||
<label class="radio-inline">
|
||||
<input type="radio" name="fractSelect"
|
||||
[checked]="(fractionRadioSelect == undefined) ? 'true' : 'false'"
|
||||
[(ngModel)]="fractionRadioSelect"
|
||||
(change)="filterDecorations(query.value, '')">Alle
|
||||
</label>
|
||||
<label class="radio-inline">
|
||||
<input type="radio" name="fractSelect" value="blufor"
|
||||
[(ngModel)]="fractionRadioSelect"
|
||||
#fractRadioBufor
|
||||
(change)="filterDecorations(query.value, fractRadioBufor.value)">NATO
|
||||
</label>
|
||||
<label class="radio-inline">
|
||||
<input type="radio" name="fractSelect" value="opfor"
|
||||
[(ngModel)]="fractionRadioSelect"
|
||||
#fractRadioOpfor
|
||||
(change)="filterDecorations(query.value, fractRadioOpfor.value)">CSAT
|
||||
</label>
|
||||
<br>
|
||||
<label class="radio-inline" style="padding-top: 8px;">
|
||||
<input type="radio" name="fractSelect" value="global"
|
||||
[(ngModel)]="fractionRadioSelect"
|
||||
#fractRadioGlobal
|
||||
(change)="filterDecorations(query.value, fractRadioGlobal.value)">Global
|
||||
</label>
|
||||
<a class="pull-right btn btn-success" (click)="openNewDecorationForm()">
|
||||
Auszeichnung hinzufügen
|
||||
</a>
|
||||
<div class="btn-group" (click)="filterDecorations()">
|
||||
<label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="blufor" uncheckable>NATO</label>
|
||||
<label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="opfor" uncheckable>CSAT</label>
|
||||
<label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="global" uncheckable>Global</label>
|
||||
</div>
|
||||
<a class="pull-right btn btn-success" (click)="openNewDecorationForm()">+</a>
|
||||
</div>
|
||||
|
||||
<div class="input-group list-header">
|
||||
<input id="search-tasks"
|
||||
type="text" #query class="form-control"
|
||||
(keyup.enter)="filterDecorations(query.value, fractionRadioSelect)"
|
||||
(keyup.enter)="filterDecorations()"
|
||||
[formControl]="searchTerm">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default" type="button"
|
||||
(click)="filterDecorations(query.value, fractionRadioSelect)">
|
||||
(click)="filterDecorations()">
|
||||
Suchen
|
||||
</button>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export class DecorationListComponent implements OnInit {
|
|||
|
||||
searchTerm = new FormControl();
|
||||
|
||||
fractionRadioSelect: string;
|
||||
public radioModel: string;
|
||||
|
||||
constructor(private decorationService: DecorationService,
|
||||
private router: Router,
|
||||
|
|
@ -42,7 +42,7 @@ export class DecorationListComponent implements OnInit {
|
|||
|
||||
Observable.merge(paramsStream, searchTermStream)
|
||||
.distinctUntilChanged()
|
||||
.switchMap(query => this.decorationService.findDecorations(query, this.fractionRadioSelect))
|
||||
.switchMap(query => this.decorationService.findDecorations(query, this.radioModel))
|
||||
.subscribe();
|
||||
|
||||
}
|
||||
|
|
@ -69,8 +69,8 @@ export class DecorationListComponent implements OnInit {
|
|||
}
|
||||
}
|
||||
|
||||
filterDecorations(query, fractionFilter) {
|
||||
this.decorations$ = this.decorationService.findDecorations(query, fractionFilter);
|
||||
filterDecorations() {
|
||||
this.decorations$ = this.decorationService.findDecorations(this.searchTerm.value, this.radioModel);
|
||||
}
|
||||
|
||||
adjustBrowserUrl(queryString = '') {
|
||||
|
|
|
|||
|
|
@ -4,10 +4,11 @@ import {CommonModule} from "@angular/common";
|
|||
import {DecorationStore} from "../services/stores/decoration.store";
|
||||
import {DecorationService} from "../services/decoration-service/decoration.service";
|
||||
import {NgModule} from "@angular/core";
|
||||
import {ButtonsModule} from "ngx-bootstrap";
|
||||
|
||||
@NgModule({
|
||||
declarations: decorationsRoutingComponents,
|
||||
imports: [CommonModule, SharedModule, decorationRoutesModule],
|
||||
imports: [CommonModule, SharedModule, ButtonsModule.forRoot(), decorationRoutesModule],
|
||||
providers: [DecorationStore, DecorationService]
|
||||
})
|
||||
export class DecorationsModule {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<form #form="ngForm" class="overview">
|
||||
<h3 *ngIf="decoration._id">Auszeichnung editieren</h3>
|
||||
<h3 *ngIf="!decoration._id">Neuen Auszeichnung hinzufügen</h3>
|
||||
<h3 *ngIf="!decoration._id">Neue Auszeichnung hinzufügen</h3>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="title">Name</label>
|
||||
|
|
|
|||
|
|
@ -1,38 +1,20 @@
|
|||
<div class="select-list">
|
||||
<div class="input-group list-header">
|
||||
<form class="pull-left">
|
||||
<label class="radio-inline">
|
||||
<input type="radio" name="fractSelect"
|
||||
[checked]="(fractionRadioSelect == undefined) ? 'true' : 'false'"
|
||||
[(ngModel)]="fractionRadioSelect"
|
||||
(change)="filterRanks(query.value, '')">Alle
|
||||
</label>
|
||||
<label class="radio-inline">
|
||||
<input type="radio" name="fractSelect" value="blufor"
|
||||
[(ngModel)]="fractionRadioSelect"
|
||||
#fractRadioBufor
|
||||
(change)="filterRanks(query.value, fractRadioBufor.value)">NATO
|
||||
</label>
|
||||
<label class="radio-inline">
|
||||
<input type="radio" name="fractSelect" value="opfor"
|
||||
[(ngModel)]="fractionRadioSelect"
|
||||
#fractRadioOpfor
|
||||
(change)="filterRanks(query.value, fractRadioOpfor.value)">CSAT
|
||||
</label>
|
||||
</form>
|
||||
<a class="pull-right btn btn-success" (click)="openNewRankForm()">
|
||||
Rang hinzufügen
|
||||
</a>
|
||||
<div class="btn-group" (click)="filterRanks()">
|
||||
<label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="blufor" uncheckable>NATO</label>
|
||||
<label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="opfor" uncheckable>CSAT</label>
|
||||
</div>
|
||||
<a class="pull-right btn btn-success" (click)="openNewRankForm()">+</a>
|
||||
</div>
|
||||
|
||||
<div class="input-group list-header">
|
||||
<input id="search-tasks"
|
||||
type="text" #query class="form-control"
|
||||
(keyup.enter)="filterRanks(query.value, fractionRadioSelect)"
|
||||
(keyup.enter)="filterRanks()"
|
||||
[formControl]="searchTerm">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default" type="button"
|
||||
(click)="filterRanks(query.value, fractionRadioSelect)">
|
||||
(click)="filterRanks()">
|
||||
Suchen
|
||||
</button>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export class RankListComponent implements OnInit {
|
|||
|
||||
searchTerm = new FormControl();
|
||||
|
||||
fractionRadioSelect: string;
|
||||
public radioModel: string;
|
||||
|
||||
constructor(private rankService: RankService,
|
||||
private router: Router,
|
||||
|
|
@ -42,7 +42,7 @@ export class RankListComponent implements OnInit {
|
|||
|
||||
Observable.merge(paramsStream, searchTermStream)
|
||||
.distinctUntilChanged()
|
||||
.switchMap(query => this.rankService.findRanks(query, this.fractionRadioSelect))
|
||||
.switchMap(query => this.rankService.findRanks(query, this.radioModel))
|
||||
.subscribe();
|
||||
|
||||
}
|
||||
|
|
@ -57,8 +57,8 @@ export class RankListComponent implements OnInit {
|
|||
this.router.navigate([{outlets: {'right': ['edit', rankId]}}], {relativeTo: this.route});
|
||||
}
|
||||
|
||||
filterRanks(query, fractionFilter) {
|
||||
this.ranks$ = this.rankService.findRanks(query, fractionFilter);
|
||||
filterRanks() {
|
||||
this.ranks$ = this.rankService.findRanks(this.searchTerm.value, this.radioModel);
|
||||
}
|
||||
|
||||
deleteRank(rank) {
|
||||
|
|
|
|||
|
|
@ -4,10 +4,11 @@ import {SharedModule} from "../shared.module";
|
|||
import {CommonModule} from "@angular/common";
|
||||
import {RankService} from "../services/rank-service/rank.service";
|
||||
import {RankStore} from "../services/stores/rank.store";
|
||||
import {ButtonsModule} from "ngx-bootstrap";
|
||||
|
||||
@NgModule({
|
||||
declarations: ranksRoutingComponents,
|
||||
imports: [CommonModule, SharedModule, rankRouterModule],
|
||||
imports: [CommonModule, SharedModule, ButtonsModule.forRoot(), rankRouterModule],
|
||||
providers: [RankStore, RankService]
|
||||
})
|
||||
export class RanksModule {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,3 @@
|
|||
.search-bar {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.squad-list {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,36 +1,20 @@
|
|||
<div class="select-list">
|
||||
<div class="input-group list-header pull-left">
|
||||
<label class="radio-inline">
|
||||
<input type="radio" name="fractSelect"
|
||||
[checked]="(fractionRadioSelect == undefined) ? 'true' : 'false'"
|
||||
[(ngModel)]="fractionRadioSelect"
|
||||
(change)="filterSquads(query.value, '')">Alle
|
||||
</label>
|
||||
<label class="radio-inline">
|
||||
<input type="radio" name="fractSelect" value="blufor"
|
||||
[(ngModel)]="fractionRadioSelect"
|
||||
#fractRadioBufor
|
||||
(change)="filterSquads(query.value, fractRadioBufor.value)">NATO
|
||||
</label>
|
||||
<label class="radio-inline">
|
||||
<input type="radio" name="fractSelect" value="opfor"
|
||||
[(ngModel)]="fractionRadioSelect"
|
||||
#fractRadioOpfor
|
||||
(change)="filterSquads(query.value, fractRadioOpfor.value)">CSAT
|
||||
</label>
|
||||
<a class="pull-right btn btn-success" (click)="openNewSquadForm()">
|
||||
Squad hinzufügen
|
||||
</a>
|
||||
<div class="btn-group" (click)="filterSquads()">
|
||||
<label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="blufor" uncheckable>NATO</label>
|
||||
<label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="opfor" uncheckable>CSAT</label>
|
||||
</div>
|
||||
<a class="pull-right btn btn-success" (click)="openNewSquadForm()">+</a>
|
||||
</div>
|
||||
|
||||
<div class="input-group search-bar" style="padding-top: 0;">
|
||||
<div class="input-group search-bar">
|
||||
<input id="search-tasks"
|
||||
type="text" #query class="form-control"
|
||||
(keyup.enter)="filterSquads(query.value, fractionRadioSelect)"
|
||||
(keyup.enter)="filterSquads()"
|
||||
[formControl]="searchTerm">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default" type="button"
|
||||
(click)="filterSquads(query.value, fractionRadioSelect)">
|
||||
(click)="filterSquads()">
|
||||
Suchen
|
||||
</button>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export class SquadListComponent implements OnInit {
|
|||
|
||||
searchTerm = new FormControl();
|
||||
|
||||
fractionRadioSelect: string;
|
||||
public radioModel: string;
|
||||
|
||||
constructor(private squadService: SquadService,
|
||||
private router: Router,
|
||||
|
|
@ -42,7 +42,7 @@ export class SquadListComponent implements OnInit {
|
|||
|
||||
Observable.merge(paramsStream, searchTermStream)
|
||||
.distinctUntilChanged()
|
||||
.switchMap(query => this.squadService.findSquads(query, this.fractionRadioSelect))
|
||||
.switchMap(query => this.squadService.findSquads(query, this.radioModel))
|
||||
.subscribe();
|
||||
|
||||
}
|
||||
|
|
@ -66,8 +66,8 @@ export class SquadListComponent implements OnInit {
|
|||
}
|
||||
}
|
||||
|
||||
filterSquads(query = '', fractionFilter) {
|
||||
this.squads$ = this.squadService.findSquads(query, fractionFilter);
|
||||
filterSquads() {
|
||||
this.squads$ = this.squadService.findSquads(this.searchTerm.value, this.radioModel);
|
||||
}
|
||||
|
||||
adjustBrowserUrl(queryString = '') {
|
||||
|
|
|
|||
|
|
@ -4,10 +4,11 @@ import {SharedModule} from "../shared.module";
|
|||
import {squadRouterModule, squadsRoutingComponents} from "./squads.routing";
|
||||
import {SquadStore} from "../services/stores/squad.store";
|
||||
import {SquadService} from "../services/squad-service/squad.service";
|
||||
import {ButtonsModule} from "ngx-bootstrap";
|
||||
|
||||
@NgModule({
|
||||
declarations: squadsRoutingComponents,
|
||||
imports: [CommonModule, SharedModule, squadRouterModule],
|
||||
imports: [CommonModule, SharedModule, ButtonsModule.forRoot(), squadRouterModule],
|
||||
providers: [SquadStore, SquadService]
|
||||
})
|
||||
export class SquadsModule {
|
||||
|
|
|
|||
|
|
@ -1,43 +1,21 @@
|
|||
<div class="select-list">
|
||||
<div class="input-group list-header pull-left">
|
||||
<label class="radio-inline">
|
||||
<input type="radio" name="fractSelect"
|
||||
[checked]="(fractionRadioSelect == undefined) ? 'true' : 'false'"
|
||||
[(ngModel)]="fractionRadioSelect"
|
||||
(change)="filterUser(query.value, '')">Alle
|
||||
</label>
|
||||
<label class="radio-inline">
|
||||
<input type="radio" name="fractSelect" value="blufor"
|
||||
[(ngModel)]="fractionRadioSelect"
|
||||
#fractRadioBufor
|
||||
(change)="filterUser(query.value, fractRadioBufor.value)">NATO
|
||||
</label>
|
||||
<label class="radio-inline">
|
||||
<input type="radio" name="fractSelect" value="opfor"
|
||||
[(ngModel)]="fractionRadioSelect"
|
||||
#fractRadioOpfor
|
||||
(change)="filterUser(query.value, fractRadioOpfor.value)">CSAT
|
||||
</label>
|
||||
<br>
|
||||
<label class="radio-inline" style="padding-top: 8px;">
|
||||
<input type="radio" name="fractSelect" value="unassigned"
|
||||
[(ngModel)]="fractionRadioSelect"
|
||||
#fractRadioUnassigned
|
||||
(change)="filterUser(query.value, fractRadioUnassigned.value)">Ohne Squad
|
||||
</label>
|
||||
<a class="pull-right btn btn-success" (click)="openNewUserForm()">
|
||||
Teilnehmer hinzufügen
|
||||
</a>
|
||||
<div class="btn-group" (click)="filterUsers()">
|
||||
<label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="blufor" uncheckable>NATO</label>
|
||||
<label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="opfor" uncheckable>CSAT</label>
|
||||
<label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="unassigned" uncheckable>Ohne Squad</label>
|
||||
</div>
|
||||
<a class="pull-right btn btn-success" (click)="openNewUserForm()">+</a>
|
||||
</div>
|
||||
|
||||
<div class="input-group list-header">
|
||||
<input id="search-tasks"
|
||||
type="text" #query class="form-control"
|
||||
(keyup.enter)="filterUser(query.value, fractionRadioSelect)"
|
||||
(keyup.enter)="filterUsers()"
|
||||
[formControl]="searchTerm">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default" type="button"
|
||||
(click)="filterUser(query.value, fractionRadioSelect)">
|
||||
(click)="filterUsers()">
|
||||
Suchen
|
||||
</button>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export class UserListComponent implements OnInit {
|
|||
|
||||
searchTerm = new FormControl();
|
||||
|
||||
fractionRadioSelect: string;
|
||||
public radioModel: string;
|
||||
|
||||
constructor(private userService: UserService,
|
||||
private router: Router,
|
||||
|
|
@ -42,7 +42,7 @@ export class UserListComponent implements OnInit {
|
|||
|
||||
Observable.merge(paramsStream, searchTermStream)
|
||||
.distinctUntilChanged()
|
||||
.switchMap(query => this.userService.findUsers(query, this.fractionRadioSelect))
|
||||
.switchMap(query => this.userService.findUsers(query, this.radioModel))
|
||||
.subscribe();
|
||||
|
||||
}
|
||||
|
|
@ -70,8 +70,8 @@ export class UserListComponent implements OnInit {
|
|||
}
|
||||
}
|
||||
|
||||
filterUser(query, fractionFilter) {
|
||||
this.users$ = this.userService.findUsers(query, fractionFilter);
|
||||
filterUsers() {
|
||||
this.users$ = this.userService.findUsers(this.searchTerm.value, this.radioModel);
|
||||
}
|
||||
|
||||
adjustBrowserUrl(queryString = '') {
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
import {NgModule} from '@angular/core';
|
||||
import {routes, usersRoutingComponents} from './users.routing';
|
||||
import {usersRouterModule, usersRoutingComponents} from './users.routing';
|
||||
import {CommonModule} from "@angular/common";
|
||||
import {SharedModule} from "../shared.module";
|
||||
import {ButtonsModule} from "ngx-bootstrap";
|
||||
|
||||
@NgModule({
|
||||
declarations: usersRoutingComponents,
|
||||
imports: [CommonModule, SharedModule, routes],
|
||||
imports: [CommonModule, SharedModule, ButtonsModule.forRoot(), usersRouterModule],
|
||||
})
|
||||
export class UsersModule {
|
||||
static routes = routes;
|
||||
static routes = usersRouterModule;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,6 +32,6 @@ export const usersRoutes: Routes = [{
|
|||
}
|
||||
];
|
||||
|
||||
export const routes: ModuleWithProviders = RouterModule.forChild(usersRoutes);
|
||||
export const usersRouterModule: ModuleWithProviders = RouterModule.forChild(usersRoutes);
|
||||
|
||||
export const usersRoutingComponents = [UserItemComponent, UsersComponent, UserListComponent, EditUserComponent, AwardUserComponent];
|
||||
|
|
|
|||
Loading…
Reference in New Issue