From c4e7c23a5ff2f61ac259da0b2f0399bda8896fe9 Mon Sep 17 00:00:00 2001 From: byung eun park Date: Tue, 3 Sep 2019 15:15:59 +0900 Subject: [PATCH] =?UTF-8?q?=EB=A6=AC=EA=B7=B8=20=EC=B6=94=EA=B0=80=20?= =?UTF-8?q?=EB=B0=8F=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/app.module.ts | 5 +- .../league-management.component.html | 29 +-- .../league-management.component.scss | 8 +- .../league-management.component.ts | 221 +++++++++++------- .../league-management.data-source.ts | 73 ++++++ src/app/pages/games/resolver/index.ts | 0 src/modules/common/data/model/page.ts | 22 +- src/modules/game/game.module.ts | 23 ++ src/modules/game/model/league.model.ts | 2 +- src/modules/game/model/sports.model.ts | 4 +- src/modules/game/service/index.ts | 3 + src/modules/game/service/league.service.ts | 52 +++++ 12 files changed, 330 insertions(+), 112 deletions(-) create mode 100644 src/app/pages/games/component/league-management/league-management.data-source.ts create mode 100644 src/app/pages/games/resolver/index.ts create mode 100644 src/modules/game/game.module.ts create mode 100644 src/modules/game/service/index.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 25c0da8..f2db5c9 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -26,6 +26,7 @@ import { LayoutModule } from './layout/layout.module'; import { AuthModule } from 'src/modules/auth/auth.module'; import { DashboardModule } from 'src/modules/dashboard/dashboard.module'; import { UserModule } from 'src/modules/user/user.module'; +import { GameModule } from 'src/modules/game/game.module'; import { from } from 'rxjs'; @NgModule({ @@ -58,10 +59,10 @@ import { from } from 'rxjs'; AuthModule.forRoot(), DashboardModule.forRoot(), UserModule.forRoot(), - + GameModule.forRoot() ], declarations: [AppComponent], providers: [], bootstrap: [AppComponent] }) -export class AppModule { } +export class AppModule {} diff --git a/src/app/pages/games/component/league-management/league-management.component.html b/src/app/pages/games/component/league-management/league-management.component.html index b60fe7f..515ab5c 100644 --- a/src/app/pages/games/component/league-management/league-management.component.html +++ b/src/app/pages/games/component/league-management/league-management.component.html @@ -38,32 +38,33 @@ class="league-table" #table [dataSource]="dataSource" + [@animateStagger]="{ value: '50' }" matSort > - - + + 아이콘 - {{ - element.position - }} + icon - - + + 리그명 - {{ element.name }} + {{ league.korName }} - - + + 추가방식 - {{ element.weight }} + 파싱추가 - - + + 종목 - {{ element.symbol }} + {{ + league.sportsEntities[0].name + }} diff --git a/src/app/pages/games/component/league-management/league-management.component.scss b/src/app/pages/games/component/league-management/league-management.component.scss index c96a909..c2d926f 100644 --- a/src/app/pages/games/component/league-management/league-management.component.scss +++ b/src/app/pages/games/component/league-management/league-management.component.scss @@ -90,17 +90,17 @@ app-league-management { // flex: 15%; // } - .mat-column-position { + .mat-column-icon { max-width: 10%; // justify-content: start; } - .mat-column-name { + .mat-column-korName { max-width: 50%; } - .mat-column-weight { + .mat-column-addMethod { max-width: 15%; } - .mat-column-symbol { + .mat-column-sportsEntities { max-width: 10%; } .mat-column-test { diff --git a/src/app/pages/games/component/league-management/league-management.component.ts b/src/app/pages/games/component/league-management/league-management.component.ts index 74cc89b..44f92d6 100644 --- a/src/app/pages/games/component/league-management/league-management.component.ts +++ b/src/app/pages/games/component/league-management/league-management.component.ts @@ -1,8 +1,23 @@ -import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; +import { + Component, + ElementRef, + OnDestroy, + OnInit, + ViewChild, + ViewEncapsulation, + AfterViewInit +} from '@angular/core'; import { MatPaginator } from '@angular/material/paginator'; -import { MatTableDataSource } from '@angular/material/table'; +import { MatSort } from '@angular/material/sort'; +import { fromEvent, Subject } from 'rxjs'; +import { debounceTime, distinctUntilChanged } from 'rxjs/operators'; +import { FuseUtils } from 'src/@fuse/utils'; + +import { takeUntil } from 'rxjs/internal/operators'; import { fuseAnimations } from 'src/@fuse/animations'; +import { LeagueDataSource } from './league-management.data-source'; +import { LeagueService } from 'src/modules/game/service/league.service'; @Component({ selector: 'app-league-management', @@ -11,88 +26,138 @@ import { fuseAnimations } from 'src/@fuse/animations'; animations: fuseAnimations, encapsulation: ViewEncapsulation.None }) -export class LeagueManagementComponent implements OnInit { - displayedColumns: string[] = ['position', 'name', 'weight', 'symbol', 'test']; - dataSource = new MatTableDataSource(ELEMENT_DATA); +export class LeagueManagementComponent + implements OnInit, OnDestroy, AfterViewInit { + dataSource: LeagueDataSource | null; + displayedColumns = [ + // 'engName', + 'icon', + 'korName', + // 'sevenName', + // 'engCountry', + // 'korCountry', + 'addMethod', + 'sportsEntities', + 'test' + ]; @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator; - constructor() {} + @ViewChild('filter', { static: true }) + filter: ElementRef; + + @ViewChild(MatSort, { static: true }) + sort: MatSort; + + // Private + private _unsubscribeAll: Subject; + + constructor(private leagueService: LeagueService) { + this._unsubscribeAll = new Subject(); + } ngOnInit() { - this.dataSource.paginator = this.paginator; + this.dataSource = new LeagueDataSource( + this.leagueService, + this.paginator, + this.sort + ); + + console.log(this.dataSource); + // fromEvent(this.filter.nativeElement, 'keyup') + // .pipe( + // takeUntil(this._unsubscribeAll), + // debounceTime(150), + // distinctUntilChanged() + // ) + // .subscribe(() => { + // if (!this.dataSource) { + // return; + // } + // this.dataSource.filter = this.filter.nativeElement.value; + // }); } + /** + * On destroy + */ + ngOnDestroy(): void { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); + } + + ngAfterViewInit(): void {} } -export interface PeriodicElement { - name: string; - position: number; - weight: number; - symbol: string; - test: string; -} +// export interface PeriodicElement { +// name: string; +// position: number; +// weight: number; +// symbol: string; +// test: string; +// } -const ELEMENT_DATA: PeriodicElement[] = [ - { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H', test: 'test' }, - { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He', test: 'test' }, - { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li', test: 'test' }, - { - position: 4, - name: 'Beryllium', - weight: 9.0122, - symbol: 'Be', - test: 'test' - }, - { position: 5, name: 'Boron', weight: 10.811, symbol: 'B', test: 'test' }, - { position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C', test: 'test' }, - { position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N', test: 'test' }, - { position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O', test: 'test' }, - { position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F', test: 'test' }, - { position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne', test: 'test' }, - { position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na', test: 'test' }, - { - position: 12, - name: 'Magnesium', - weight: 24.305, - symbol: 'Mg', - test: 'test' - }, - { - position: 13, - name: 'Aluminum', - weight: 26.9815, - symbol: 'Al', - test: 'test' - }, - { - position: 14, - name: 'Silicon', - weight: 28.0855, - symbol: 'Si', - test: 'test' - }, - { - position: 15, - name: 'Phosphorus', - weight: 30.9738, - symbol: 'P', - test: 'test' - }, - { position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S', test: 'test' }, - { - position: 17, - name: 'Chlorine', - weight: 35.453, - symbol: 'Cl', - test: 'test' - }, - { position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar', test: 'test' }, - { - position: 19, - name: 'Potassium', - weight: 39.0983, - symbol: 'K', - test: 'test' - }, - { position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca', test: 'test' } -]; +// const ELEMENT_DATA: PeriodicElement[] = [ +// { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H', test: 'test' }, +// { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He', test: 'test' }, +// { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li', test: 'test' }, +// { +// position: 4, +// name: 'Beryllium', +// weight: 9.0122, +// symbol: 'Be', +// test: 'test' +// }, +// { position: 5, name: 'Boron', weight: 10.811, symbol: 'B', test: 'test' }, +// { position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C', test: 'test' }, +// { position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N', test: 'test' }, +// { position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O', test: 'test' }, +// { position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F', test: 'test' }, +// { position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne', test: 'test' }, +// { position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na', test: 'test' }, +// { +// position: 12, +// name: 'Magnesium', +// weight: 24.305, +// symbol: 'Mg', +// test: 'test' +// }, +// { +// position: 13, +// name: 'Aluminum', +// weight: 26.9815, +// symbol: 'Al', +// test: 'test' +// }, +// { +// position: 14, +// name: 'Silicon', +// weight: 28.0855, +// symbol: 'Si', +// test: 'test' +// }, +// { +// position: 15, +// name: 'Phosphorus', +// weight: 30.9738, +// symbol: 'P', +// test: 'test' +// }, +// { position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S', test: 'test' }, +// { +// position: 17, +// name: 'Chlorine', +// weight: 35.453, +// symbol: 'Cl', +// test: 'test' +// }, +// { position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar', test: 'test' }, +// { +// position: 19, +// name: 'Potassium', +// weight: 39.0983, +// symbol: 'K', +// test: 'test' +// }, +// { position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca', test: 'test' } +// ]; diff --git a/src/app/pages/games/component/league-management/league-management.data-source.ts b/src/app/pages/games/component/league-management/league-management.data-source.ts new file mode 100644 index 0000000..0f3e5ac --- /dev/null +++ b/src/app/pages/games/component/league-management/league-management.data-source.ts @@ -0,0 +1,73 @@ +import { DataSource } from '@angular/cdk/table'; + +import { BehaviorSubject, Observable, merge } from 'rxjs'; +import { switchMap, map } from 'rxjs/operators'; + +import { MatPaginator } from '@angular/material/paginator'; +import { MatSort } from '@angular/material/sort'; +import { CollectionViewer } from '@angular/cdk/collections'; + +import { League } from 'src/modules/game/model/league.model'; +import { LeagueService } from 'src/modules/game/service/league.service'; +import { Page } from 'src/modules/common/data/model/page'; + +export class LeagueDataSource extends DataSource { + private filterSubject = new BehaviorSubject(''); + private pageSubject = new BehaviorSubject>({}); + + constructor( + private leagueService: LeagueService, + private paginator: MatPaginator, + private sort: MatSort + ) { + super(); + } + + // Filter + get filter(): string { + return this.filterSubject.value; + } + + set filter(filter: string) { + this.filterSubject.next(filter); + } + + get page(): Page { + return this.pageSubject.value; + } + + set page(value: Page) { + this.pageSubject.next(value); + } + + connect( + collectionViewer: CollectionViewer + ): Observable { + const displayDataChanges = [ + this.paginator.page, + this.sort.sortChange, + this.filterSubject + ]; + + return merge(...displayDataChanges).pipe( + switchMap(() => { + const filter = this.filter; + const sortActive = this.sort.active; + const sortDirection = this.sort.direction; + const pageIndex = this.paginator.pageIndex; + const pageSize = this.paginator.pageSize; + + return this.leagueService.getAllLeague().pipe( + map(page => { + this.page = page; + return page.content; + }) + ); + }) + ); + } + + disconnect(collectionViewer: CollectionViewer): void { + this.filterSubject.complete(); + } +} diff --git a/src/app/pages/games/resolver/index.ts b/src/app/pages/games/resolver/index.ts new file mode 100644 index 0000000..e69de29 diff --git a/src/modules/common/data/model/page.ts b/src/modules/common/data/model/page.ts index e858820..9b691d4 100644 --- a/src/modules/common/data/model/page.ts +++ b/src/modules/common/data/model/page.ts @@ -13,15 +13,15 @@ export interface Pageable { } export interface Page { - content: T[] | null; - empty: boolean; - first: boolean; - last: boolean; - number: number; - numberOfElements: number; - pageable: Pageable; - size: number; - sort: Sort; - totalElements: number; - totalPages: number; + content?: T[] | null; + empty?: boolean; + first?: boolean; + last?: boolean; + number?: number; + numberOfElements?: number; + pageable?: Pageable; + size?: number; + sort?: Sort; + totalElements?: number; + totalPages?: number; } diff --git a/src/modules/game/game.module.ts b/src/modules/game/game.module.ts new file mode 100644 index 0000000..3cd75b1 --- /dev/null +++ b/src/modules/game/game.module.ts @@ -0,0 +1,23 @@ +import { NgModule, ModuleWithProviders } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { SERVICES } from './service'; + +@NgModule({ + imports: [], + exports: [] +}) +export class GameRootModule {} + +@NgModule({ + declarations: [], + imports: [CommonModule], + exports: [] +}) +export class GameModule { + public static forRoot(): ModuleWithProviders { + return { + ngModule: GameRootModule, + providers: [SERVICES] + }; + } +} diff --git a/src/modules/game/model/league.model.ts b/src/modules/game/model/league.model.ts index 29ae673..d1a2cd2 100644 --- a/src/modules/game/model/league.model.ts +++ b/src/modules/game/model/league.model.ts @@ -8,5 +8,5 @@ export interface League extends DateAudit { sevenName?: string; engCountry?: string; korCountry?: string; - sportsEntities?: Sports; + sportsEntities?: Sports[]; } diff --git a/src/modules/game/model/sports.model.ts b/src/modules/game/model/sports.model.ts index dbbdb2e..24c84b7 100644 --- a/src/modules/game/model/sports.model.ts +++ b/src/modules/game/model/sports.model.ts @@ -12,6 +12,6 @@ export enum SportsName { } export interface Sports extends DateAudit { - id: number; - name: SportsName; + id?: number; + name?: SportsName; } diff --git a/src/modules/game/service/index.ts b/src/modules/game/service/index.ts new file mode 100644 index 0000000..0af720d --- /dev/null +++ b/src/modules/game/service/index.ts @@ -0,0 +1,3 @@ +import { LeagueService } from './league.service'; + +export const SERVICES = [LeagueService]; diff --git a/src/modules/game/service/league.service.ts b/src/modules/game/service/league.service.ts index 7ed9ae4..2d03f23 100644 --- a/src/modules/game/service/league.service.ts +++ b/src/modules/game/service/league.service.ts @@ -16,4 +16,56 @@ export class LeagueService { public getAllLeague(): Observable> { return this.httpClient.get>(`${this.apiBaseUrl}/league`, {}); } + + public regist(league: League): Observable { + const engName = league.engName; + const korName = league.korName; + const sevenName = league.sevenName; + const engCountry = league.engCountry; + const korCountry = league.korCountry; + const sportsEntities = league.sportsEntities; + + return this.httpClient + .post(`${this.apiBaseUrl}/league`, { + engName, + korName, + sevenName, + engCountry, + korCountry, + sportsEntities + }) + .pipe( + map(res => { + console.log('league regist response: ' + res); + return res; + }) + ); + } + + public updateLeague(league: League): Observable { + const id = league.id; + const engName = league.engName; + const korName = league.korName; + const sevenName = league.sevenName; + const engCountry = league.engCountry; + const korCountry = league.korCountry; + const sportsEntities = league.sportsEntities; + + return this.httpClient + .put(`${this.apiBaseUrl}/league/${id}`, { + id, + engName, + korName, + sevenName, + engCountry, + korCountry, + sportsEntities + }) + .pipe( + map(res => { + console.log('league update response: ' + res); + return res; + }) + ); + } }