From 84ddfe5a0b6ad119b15eac76d59cc6420ec378ca Mon Sep 17 00:00:00 2001 From: HardiReady Date: Sun, 8 Jul 2018 18:27:24 +0200 Subject: [PATCH] Use generified components in list views --- .../decoration-list.component.ts | 2 +- .../src/app/decorations/decoration.module.ts | 6 +-- .../src/app/decorations/decoration.routing.ts | 4 +- .../ranks/rank-list/rank-list.component.html | 51 ++++++------------ .../ranks/rank-list/rank-list.component.ts | 28 +++------- static/src/app/ranks/ranks.module.ts | 6 +-- static/src/app/ranks/ranks.routing.ts | 1 - static/src/app/shared.module.ts | 12 +++-- .../squad-list/squad-list.component.html | 52 ++++++------------- .../squads/squad-list/squad-list.component.ts | 27 ++-------- static/src/app/squads/squads.module.ts | 6 +-- .../users/user-list/user-list.component.html | 42 +++++---------- .../users/user-list/user-list.component.ts | 24 ++------- static/src/app/users/users.module.ts | 7 +-- static/src/app/users/users.routing.ts | 3 +- 15 files changed, 79 insertions(+), 192 deletions(-) diff --git a/static/src/app/decorations/decoration-list/decoration-list.component.ts b/static/src/app/decorations/decoration-list/decoration-list.component.ts index 390b927..ab627646 100644 --- a/static/src/app/decorations/decoration-list/decoration-list.component.ts +++ b/static/src/app/decorations/decoration-list/decoration-list.component.ts @@ -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'] }) diff --git a/static/src/app/decorations/decoration.module.ts b/static/src/app/decorations/decoration.module.ts index 4a7174f..0b8b888 100644 --- a/static/src/app/decorations/decoration.module.ts +++ b/static/src/app/decorations/decoration.module.ts @@ -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 { diff --git a/static/src/app/decorations/decoration.routing.ts b/static/src/app/decorations/decoration.routing.ts index b0a2ff0..ad7ea52 100644 --- a/static/src/app/decorations/decoration.routing.ts +++ b/static/src/app/decorations/decoration.routing.ts @@ -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]; diff --git a/static/src/app/ranks/rank-list/rank-list.component.html b/static/src/app/ranks/rank-list/rank-list.component.html index 7e12db3..7be0fd2 100644 --- a/static/src/app/ranks/rank-list/rank-list.component.html +++ b/static/src/app/ranks/rank-list/rank-list.component.html @@ -1,39 +1,22 @@
-
- - - {{fraction.BLUFOR}} - - - {{fraction.OPFOR}} - - - -
+ + -
- - - - -
+ + -
- - -
+ +
diff --git a/static/src/app/ranks/rank-list/rank-list.component.ts b/static/src/app/ranks/rank-list/rank-list.component.ts index 11a54db..ffb47eb 100644 --- a/static/src/app/ranks/rank-list/rank-list.component.ts +++ b/static/src/app/ranks/rank-list/rank-list.component.ts @@ -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, 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); - } } diff --git a/static/src/app/ranks/ranks.module.ts b/static/src/app/ranks/ranks.module.ts index 6a856ce..9940058 100644 --- a/static/src/app/ranks/ranks.module.ts +++ b/static/src/app/ranks/ranks.module.ts @@ -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 { diff --git a/static/src/app/ranks/ranks.routing.ts b/static/src/app/ranks/ranks.routing.ts index a052a69..fa72166 100644 --- a/static/src/app/ranks/ranks.routing.ts +++ b/static/src/app/ranks/ranks.routing.ts @@ -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: [ diff --git a/static/src/app/shared.module.ts b/static/src/app/shared.module.ts index 8dfc133..015a2e6 100644 --- a/static/src/app/shared.module.ts +++ b/static/src/app/shared.module.ts @@ -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 { } diff --git a/static/src/app/squads/squad-list/squad-list.component.html b/static/src/app/squads/squad-list/squad-list.component.html index 4f117e4..674012b 100644 --- a/static/src/app/squads/squad-list/squad-list.component.html +++ b/static/src/app/squads/squad-list/squad-list.component.html @@ -1,39 +1,21 @@
-
- - - {{fraction.BLUFOR}} - - - {{fraction.OPFOR}} - - - -
+ + -
- - - - -
- -
- - -
+ + + +
diff --git a/static/src/app/squads/squad-list/squad-list.component.ts b/static/src/app/squads/squad-list/squad-list.component.ts index 0d174da..c52d9ea 100644 --- a/static/src/app/squads/squad-list/squad-list.component.ts +++ b/static/src/app/squads/squad-list/squad-list.component.ts @@ -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, 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); - } } diff --git a/static/src/app/squads/squads.module.ts b/static/src/app/squads/squads.module.ts index 83f918c..1d0daca 100644 --- a/static/src/app/squads/squads.module.ts +++ b/static/src/app/squads/squads.module.ts @@ -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 { diff --git a/static/src/app/users/user-list/user-list.component.html b/static/src/app/users/user-list/user-list.component.html index 92045ab..cafa9f2 100644 --- a/static/src/app/users/user-list/user-list.component.html +++ b/static/src/app/users/user-list/user-list.component.html @@ -1,34 +1,17 @@
-
- - - {{fraction.BLUFOR}} - - - {{fraction.OPFOR}} - - - Ohne Squad - - - -
+ + -
- - - - -
+ +
-
diff --git a/static/src/app/users/user-list/user-list.component.ts b/static/src/app/users/user-list/user-list.component.ts index b6865ab..37c90e0 100644 --- a/static/src/app/users/user-list/user-list.component.ts +++ b/static/src/app/users/user-list/user-list.component.ts @@ -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, 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); - } } diff --git a/static/src/app/users/users.module.ts b/static/src/app/users/users.module.ts index 3bbdf31..9416eec 100644 --- a/static/src/app/users/users.module.ts +++ b/static/src/app/users/users.module.ts @@ -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; diff --git a/static/src/app/users/users.routing.ts b/static/src/app/users/users.routing.ts index a356adc..34813af 100644 --- a/static/src/app/users/users.routing.ts +++ b/static/src/app/users/users.routing.ts @@ -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];