hardi
/
opt-cc
1
0
Fork 0
Code Pull Requests Releases 47 Activity

Use generified components in list views

pull/40/head
HardiReady 2018-07-08 18:27:24 +02:00
parent f4a9ef7a9d
commit 84ddfe5a0b
15 changed files with 79 additions and 192 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
static/src/app/decorations/decoration-list/decoration-list.component.ts
View File

@ -10,7 +10,7 @@ import {MatButtonToggleGroup} from '@angular/material';
import {UIHelpers} from '../../utils/global.helpers';
@Component({
selector: 'decoration-list',
selector: 'cc-decoration-list',
templateUrl: './decoration-list.component.html',
styleUrls: ['./decoration-list.component.css', '../../style/select-list.css']
})

6
static/src/app/decorations/decoration.module.ts
View File

@ -4,14 +4,10 @@ import {CommonModule} from '@angular/common';
import {DecorationStore} from '../services/stores/decoration.store';
import {DecorationService} from '../services/army-management/decoration.service';
import {NgModule} from '@angular/core';
import {MatButtonToggleModule} from '@angular/material';
import {MatIconModule} from '@angular/material/icon';
import {MatButtonModule} from '@angular/material/button';
@NgModule({
declarations: decorationsRoutingComponents,
imports: [CommonModule, SharedModule, MatButtonToggleModule, MatButtonModule, MatIconModule,
decorationRoutesModule],
imports: [CommonModule, SharedModule, decorationRoutesModule],
providers: [DecorationStore, DecorationService]
})
export class DecorationsModule {

4
static/src/app/decorations/decoration.routing.ts
View File

@ -4,8 +4,6 @@ import {DecorationListComponent} from './decoration-list/decoration-list.compone
import {EditDecorationComponent} from './edit-decoration/edit-decoration.component';
import {ModuleWithProviders} from '@angular/core';
import {DecorationItemComponent} from './decoration-list/decoration-item.component';
import {ListFilterComponent} from '../common/user-interface/list-filter/list-filter.component';
import {SearchFieldComponent} from '../common/user-interface/search-field/search-field.component';
export const decorationsRoutes: Routes = [{
path: '', component: DecorationComponent,
@ -30,5 +28,5 @@ export const decorationsRoutes: Routes = [{
export const decorationRoutesModule: ModuleWithProviders = RouterModule.forChild(decorationsRoutes);
export const decorationsRoutingComponents = [DecorationItemComponent, DecorationComponent, DecorationListComponent,
EditDecorationComponent, ListFilterComponent, SearchFieldComponent];
EditDecorationComponent];

51
static/src/app/ranks/rank-list/rank-list.component.html
View File

@ -1,39 +1,22 @@
<div class="select-list">
<div class="list-header">
<mat-button-toggle-group #group="matButtonToggleGroup">
<mat-button-toggle value="BLUFOR" (change)="filterRanks(group)">
{{fraction.BLUFOR}}
</mat-button-toggle>
<mat-button-toggle value="OPFOR" (change)="filterRanks(group)">
{{fraction.OPFOR}}
</mat-button-toggle>
</mat-button-toggle-group>
<button mat-icon-button class="add-btn">
<mat-icon svgIcon="add" title="Neuen Rang hinzufügen"
(click)="openNewRankForm()"></mat-icon>
</button>
</div>
<cc-list-filter
[filterButtons]="[{label: fraction.BLUFOR, value: 'BLUFOR'},
{label: fraction.OPFOR, value: 'OPFOR'}]"
[addButton]="{svgIcon: 'add', tooltip: 'Neuen Rang hinzufügen'}"
(executeSearch)="filterRanks($event)"
(openAddFrom)="openNewRankForm()">
</cc-list-filter>
<div class="input-group list-header">
<input id="search-tasks"
type="text" #query class="form-control"
(keyup.enter)="filterRanks()"
[formControl]="searchTerm">
<span class="input-group-btn">
<button class="btn btn-default" type="button"
(click)="filterRanks()">
Suchen
</button>
</span>
</div>
<cc-list-search [searchTerm]="searchTerm"
(searchTermStream)="initObservable($event)"
(executeSearch)="filterRanks()">
</cc-list-search>
<div>
<pjm-rank-item *ngFor="let rank of ranks$ | async"
[rank]="rank"
(rankDelete)="deleteRank(rank)"
(rankSelected)="selectRank($event)"
[selected]="rank._id == selectedRankId">
</pjm-rank-item>
</div>
<pjm-rank-item *ngFor="let rank of ranks$ | async"
[rank]="rank"
(rankDelete)="deleteRank(rank)"
(rankSelected)="selectRank($event)"
[selected]="rank._id == selectedRankId">
</pjm-rank-item>
</div>

28
static/src/app/ranks/rank-list/rank-list.component.ts
View File

@ -1,5 +1,4 @@
import {Component, OnInit} from '@angular/core';
import {Location} from '@angular/common';
import {FormControl} from '@angular/forms';
import {ActivatedRoute, Router} from '@angular/router';
@ -11,7 +10,7 @@ import {UIHelpers} from '../../utils/global.helpers';
import {MatButtonToggleGroup} from '@angular/material';
@Component({
selector: 'rank-list',
selector: 'cc-rank-list',
templateUrl: './rank-list.component.html',
styleUrls: ['./rank-list.component.css', '../../style/select-list.css']
})
@ -29,29 +28,21 @@ export class RankListComponent implements OnInit {
constructor(private rankService: RankService,
private router: Router,
private route: ActivatedRoute,
private location: Location) {
private route: ActivatedRoute){
}
ngOnInit() {
this.ranks$ = this.rankService.ranks$;
}
const paramsStream = this.route.queryParams
.map(params => decodeURI(params['query'] || ''))
.do(query => this.searchTerm.setValue(query));
const searchTermStream = this.searchTerm.valueChanges
.debounceTime(400)
.do(query => this.adjustBrowserUrl(query));
Observable.merge(paramsStream, searchTermStream)
initObservable(observables: any) {
Observable.merge(observables.params as Observable<string>, observables.searchTerm)
.distinctUntilChanged()
.switchMap(query => this.rankService.findRanks(query, this.radioModel))
.subscribe();
}
openNewRankForm() {
this.selectedRankId = null;
this.router.navigate([{outlets: {'right': ['new']}}], {relativeTo: this.route});
@ -75,11 +66,4 @@ export class RankListComponent implements OnInit {
});
}
}
adjustBrowserUrl(queryString = '') {
const absoluteUrl = this.location.path().split('?')[0];
const queryPart = queryString !== '' ? `query=${queryString}` : '';
this.location.replaceState(absoluteUrl, queryPart);
}
}

6
static/src/app/ranks/ranks.module.ts
View File

@ -4,14 +4,10 @@ import {SharedModule} from '../shared.module';
import {CommonModule} from '@angular/common';
import {RankService} from '../services/army-management/rank.service';
import {RankStore} from '../services/stores/rank.store';
import {MatButtonToggleModule} from '@angular/material';
import {MatIconModule} from '@angular/material/icon';
import {MatButtonModule} from '@angular/material/button';
@NgModule({
declarations: ranksRoutingComponents,
imports: [CommonModule, SharedModule, MatButtonToggleModule, MatButtonModule, MatIconModule,
rankRouterModule],
imports: [CommonModule, SharedModule, rankRouterModule],
providers: [RankStore, RankService]
})
export class RanksModule {

1
static/src/app/ranks/ranks.routing.ts
View File

@ -5,7 +5,6 @@ import {EditRankComponent} from './edit-rank/edit-rank.component';
import {RankItemComponent} from './rank-list/rank-item.component';
import {ModuleWithProviders} from '@angular/core';
export const ranksRoutes: Routes = [{
path: '', component: RankComponent,
children: [

12
static/src/app/shared.module.ts
View File

@ -2,11 +2,17 @@ import {NgModule} from '@angular/core';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {ShowErrorComponent} from './common/show-error/show-error.component';
import {CommonModule} from '@angular/common';
import {ListFilterComponent} from './common/user-interface/list-filter/list-filter.component';
import {SearchFieldComponent} from './common/user-interface/search-field/search-field.component';
import {MatButtonToggleModule} from '@angular/material';
import {MatButtonModule} from '@angular/material/button';
import {MatIconModule} from '@angular/material/icon';
@NgModule({
declarations: [ShowErrorComponent],
imports: [CommonModule, FormsModule, ReactiveFormsModule],
exports: [FormsModule, ReactiveFormsModule, ShowErrorComponent],
declarations: [ShowErrorComponent, ListFilterComponent, SearchFieldComponent],
imports: [CommonModule, FormsModule, ReactiveFormsModule, MatButtonToggleModule, MatButtonModule, MatIconModule],
exports: [FormsModule, ReactiveFormsModule, MatButtonToggleModule, MatButtonModule, MatIconModule, ShowErrorComponent,
ListFilterComponent, SearchFieldComponent],
})
export class SharedModule {
}

52
static/src/app/squads/squad-list/squad-list.component.html
View File

@ -1,39 +1,21 @@
<div class="select-list">
<div class="list-header">
<mat-button-toggle-group #group="matButtonToggleGroup">
<mat-button-toggle value="BLUFOR" (change)="filterSquads(group)">
{{fraction.BLUFOR}}
</mat-button-toggle>
<mat-button-toggle value="OPFOR" (change)="filterSquads(group)">
{{fraction.OPFOR}}
</mat-button-toggle>
</mat-button-toggle-group>
<button mat-icon-button class="add-btn">
<mat-icon svgIcon="add" title="Neues Squad hinzufügen"
(click)="openNewSquadForm()"></mat-icon>
</button>
</div>
<cc-list-filter
[filterButtons]="[{label: fraction.BLUFOR, value: 'BLUFOR'},
{label: fraction.OPFOR, value: 'OPFOR'}]"
[addButton]="{svgIcon: 'add', tooltip: 'Neues Squad hinzufügen'}"
(executeSearch)="filterSquads($event)"
(openAddFrom)="openNewRankForm()">
</cc-list-filter>
<div class="input-group search-bar">
<input id="search-tasks"
type="text" #query class="form-control"
(keyup.enter)="filterSquads()"
[formControl]="searchTerm">
<span class="input-group-btn">
<button class="btn btn-default" type="button"
(click)="filterSquads()">
Suchen
</button>
</span>
</div>
<div>
<pjm-squad-item *ngFor="let squad of squads$ | async"
[squad]="squad"
(squadDelete)="deleteSquad(squad)"
(squadSelected)="selectSquad($event)"
[selected]="squad._id == selectedSquadId">
</pjm-squad-item>
</div>
<cc-list-search [searchTerm]="searchTerm"
(searchTermStream)="initObservable($event)"
(executeSearch)="filterSquads()">
</cc-list-search>
<pjm-squad-item *ngFor="let squad of squads$ | async"
[squad]="squad"
(squadDelete)="deleteSquad(squad)"
(squadSelected)="selectSquad($event)"
[selected]="squad._id == selectedSquadId">
</pjm-squad-item>
</div>

27
static/src/app/squads/squad-list/squad-list.component.ts
View File

@ -1,5 +1,4 @@
import {Component, OnInit} from '@angular/core';
import {Location} from '@angular/common';
import {FormControl} from '@angular/forms';
import {ActivatedRoute, Router} from '@angular/router';
@ -11,7 +10,7 @@ import {UIHelpers} from '../../utils/global.helpers';
import {MatButtonToggleGroup} from '@angular/material';
@Component({
selector: 'squad-list',
selector: 'cc-squad-list',
templateUrl: './squad-list.component.html',
styleUrls: ['./squad-list.component.css', '../../style/select-list.css']
})
@ -29,27 +28,18 @@ export class SquadListComponent implements OnInit {
constructor(private squadService: SquadService,
private router: Router,
private route: ActivatedRoute,
private location: Location) {
private route: ActivatedRoute) {
}
ngOnInit() {
this.squads$ = this.squadService.squads$;
}
const paramsStream = this.route.queryParams
.map(params => decodeURI(params['query'] || ''))
.do(query => this.searchTerm.setValue(query));
const searchTermStream = this.searchTerm.valueChanges
.debounceTime(400)
.do(query => this.adjustBrowserUrl(query));
Observable.merge(paramsStream, searchTermStream)
initObservable(observables: any) {
Observable.merge(observables.params as Observable<string>, observables.searchTerm)
.distinctUntilChanged()
.switchMap(query => this.squadService.findSquads(query, this.radioModel))
.subscribe();
}
openNewSquadForm() {
@ -75,11 +65,4 @@ export class SquadListComponent implements OnInit {
this.radioModel = UIHelpers.toggleReleaseButton(this.radioModel, group);
this.squads$ = this.squadService.findSquads(this.searchTerm.value, this.radioModel);
}
adjustBrowserUrl(queryString = '') {
const absoluteUrl = this.location.path().split('?')[0];
const queryPart = queryString !== '' ? `query=${queryString}` : '';
this.location.replaceState(absoluteUrl, queryPart);
}
}

6
static/src/app/squads/squads.module.ts
View File

@ -4,14 +4,10 @@ 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 {MatButtonToggleModule} from '@angular/material';
import {MatIconModule} from '@angular/material/icon';
import {MatButtonModule} from '@angular/material/button';
@NgModule({
declarations: squadsRoutingComponents,
imports: [CommonModule, SharedModule, MatButtonToggleModule, MatButtonModule, MatIconModule,
squadRouterModule],
imports: [CommonModule, SharedModule, squadRouterModule],
providers: [SquadStore, SquadService]
})
export class SquadsModule {

42
static/src/app/users/user-list/user-list.component.html
View File

@ -1,34 +1,17 @@
<div class="select-list">
<div class="input-group list-header pull-left">
<mat-button-toggle-group #group="matButtonToggleGroup">
<mat-button-toggle value="BLUFOR" (change)="filterUsers(undefined, group)">
{{fraction.BLUFOR}}
</mat-button-toggle>
<mat-button-toggle value="OPFOR" (change)="filterUsers(undefined, group)">
{{fraction.OPFOR}}
</mat-button-toggle>
<mat-button-toggle value="UNASSIGNED" (change)="filterUsers(undefined, group)">
Ohne Squad
</mat-button-toggle>
</mat-button-toggle-group>
<button mat-icon-button class="add-btn">
<mat-icon svgIcon="add-user" title="Neuen Teilnehmer hinzufügen"
(click)="openNewUserForm()"></mat-icon>
</button>
</div>
<cc-list-filter
[filterButtons]="[{label: fraction.BLUFOR, value: 'BLUFOR'},
{label: fraction.OPFOR, value: 'OPFOR'},
{label: 'Ohne Squad', value: 'UNASSIGNED'}]"
[addButton]="{svgIcon: 'add-user', tooltip: 'Neuen Teilnehmer hinzufügen'}"
(executeSearch)="filterUsers(undefined, $event)"
(openAddFrom)="openNewUserForm()">
</cc-list-filter>
<div class="input-group list-header">
<input id="search-tasks"
type="text" #query class="form-control"
(keyup.enter)="filterUsers()"
[formControl]="searchTerm">
<span class="input-group-btn">
<button class="btn btn-default" type="button"
(click)="filterUsers()">
Suchen
</button>
</span>
</div>
<cc-list-search [searchTerm]="searchTerm"
(searchTermStream)="initObservable($event)"
(executeSearch)="filterUsers()">
</cc-list-search>
<div class="search-results"
data-infinite-scroll
@ -44,5 +27,4 @@
[selected]="user._id == selectedUserId">
</pjm-user-item>
</div>
<br>
</div>

24
static/src/app/users/user-list/user-list.component.ts
View File

@ -12,7 +12,7 @@ import {MatButtonToggleGroup} from '@angular/material';
import {UIHelpers} from '../../utils/global.helpers';
@Component({
selector: 'squad-list',
selector: 'cc-user-list',
templateUrl: './user-list.component.html',
styleUrls: ['./user-list.component.css', '../../style/select-list.css']
})
@ -38,22 +38,15 @@ export class UserListComponent implements OnInit {
constructor(private userService: UserService,
private router: Router,
private route: ActivatedRoute,
private location: Location) {
private route: ActivatedRoute) {
}
ngOnInit() {
this.users$ = this.userService.users$;
}
const paramsStream = this.route.queryParams
.map(params => decodeURI(params['query'] || ''))
.do(query => this.searchTerm.setValue(query));
const searchTermStream = this.searchTerm.valueChanges
.debounceTime(400)
.do(query => this.adjustBrowserUrl(query));
Observable.merge(paramsStream, searchTermStream)
initObservable(observables: any) {
Observable.merge(observables.params as Observable<string>, observables.searchTerm)
.distinctUntilChanged()
.switchMap(query => this.filterUsers())
.subscribe();
@ -101,11 +94,4 @@ export class UserListComponent implements OnInit {
this.filterUsers(ADD);
}
}
adjustBrowserUrl(queryString = '') {
const absoluteUrl = this.location.path().split('?')[0];
const queryPart = queryString !== '' ? 'query=${queryString}' : '';
this.location.replaceState(absoluteUrl, queryPart);
}
}

7
static/src/app/users/users.module.ts
View File

@ -3,15 +3,10 @@ import {usersRouterModule, usersRoutingComponents} from './users.routing';
import {CommonModule} from '@angular/common';
import {SharedModule} from '../shared.module';
import {InfiniteScrollModule} from 'ngx-infinite-scroll';
import {MatButtonToggleModule} from '@angular/material';
import {MatButtonModule} from '@angular/material/button';
import {MatIconModule} from '@angular/material/icon';
@NgModule({
declarations: usersRoutingComponents,
imports: [CommonModule, SharedModule, MatButtonToggleModule, MatButtonModule, MatIconModule,
InfiniteScrollModule, usersRouterModule],
imports: [CommonModule, SharedModule, InfiniteScrollModule, usersRouterModule],
})
export class UsersModule {
static routes = usersRouterModule;

3
static/src/app/users/users.routing.ts
View File

@ -34,4 +34,5 @@ export const usersRoutes: Routes = [{
export const usersRouterModule: ModuleWithProviders = RouterModule.forChild(usersRoutes);
export const usersRoutingComponents = [UserItemComponent, UsersComponent, UserListComponent, EditUserComponent, AwardUserComponent];
export const usersRoutingComponents = [UserItemComponent, UsersComponent, UserListComponent, EditUserComponent,
AwardUserComponent];