From 65fc2d927786a13b825532e5f91e65a78c1b4d2d Mon Sep 17 00:00:00 2001 From: byung eun park Date: Wed, 4 Sep 2019 18:51:23 +0900 Subject: [PATCH] =?UTF-8?q?=EA=B3=84=EC=A2=8C=EB=B6=84=EB=A6=AC=20?= =?UTF-8?q?=EC=A0=95=EB=B3=B4=20=EC=B6=94=EA=B0=80=20(=EB=8D=B0=EC=9D=B4?= =?UTF-8?q?=ED=84=B0=EC=86=8C=EC=8A=A4=20=EC=88=98=EC=A0=95=20=ED=95=84?= =?UTF-8?q?=EC=9A=94)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/navigation/navigation.ts | 80 +++++----- .../bank-info/component/list.component.html | 108 +++++++++++++- .../bank-info/component/list.component.scss | 140 ++++++++++++++++++ .../bank-info/component/list.component.ts | 68 ++++++++- .../bank-info/component/list.data-source.ts | 38 +---- .../bank-info/service/bank-info.service.ts | 2 +- 6 files changed, 354 insertions(+), 82 deletions(-) diff --git a/src/app/navigation/navigation.ts b/src/app/navigation/navigation.ts index 84b84fc..cbf292f 100644 --- a/src/app/navigation/navigation.ts +++ b/src/app/navigation/navigation.ts @@ -71,7 +71,7 @@ export const navigation: FuseNavigation[] = [ translate: 'NAV.GAME.SPORT_RESULT.TITLE', type: 'item', icon: 'email', - url: '/pages/games/management/sport-result', + url: '/pages/games/management/sport-result' }, { id: 'sportMix_management', @@ -79,7 +79,7 @@ export const navigation: FuseNavigation[] = [ translate: 'NAV.GAME.SPORT_MIX.TITLE', type: 'item', icon: 'email', - url: '/pages/games/management/sport-mix', + url: '/pages/games/management/sport-mix' }, { id: 'mini_game', @@ -87,7 +87,7 @@ export const navigation: FuseNavigation[] = [ translate: 'NAV.GAME.MINI_GAME.TITLE', type: 'item', icon: 'email', - url: '/pages/games/management/mini-game', + url: '/pages/games/management/mini-game' }, { id: 'mini_game_management', @@ -95,7 +95,7 @@ export const navigation: FuseNavigation[] = [ translate: 'NAV.GAME.MINI_GAME_MANAGEMENT.TITLE', type: 'item', icon: 'email', - url: '/pages/games/management/mini-game-settings', + url: '/pages/games/management/mini-game-settings' }, { id: 'excel_regist', @@ -103,7 +103,7 @@ export const navigation: FuseNavigation[] = [ translate: 'NAV.GAME.EXCEL_REGIST.TITLE', type: 'item', icon: 'email', - url: '/pages/games/management/excel-regist', + url: '/pages/games/management/excel-regist' }, { id: 'bet_history', @@ -111,7 +111,7 @@ export const navigation: FuseNavigation[] = [ translate: 'NAV.GAME.BET_HISTORY.TITLE', type: 'item', icon: 'email', - url: '/pages/games/management/bet-history', + url: '/pages/games/management/bet-history' }, { id: 'settlement', @@ -119,7 +119,7 @@ export const navigation: FuseNavigation[] = [ translate: 'NAV.GAME.SETTLEMENT.TITLE', type: 'item', icon: 'email', - url: '/pages/games/management/settlement', + url: '/pages/games/management/settlement' }, { id: 'item_management', @@ -127,7 +127,7 @@ export const navigation: FuseNavigation[] = [ translate: 'NAV.GAME.ITEM_MANAGEMENT.TITLE', type: 'item', icon: 'email', - url: '/pages/games/management/item-management', + url: '/pages/games/management/item-management' }, { id: 'league_management', @@ -135,7 +135,7 @@ export const navigation: FuseNavigation[] = [ translate: 'NAV.GAME.LEAGUE_MANAGEMENT.TITLE', type: 'item', icon: 'email', - url: '/pages/games/management/league-management', + url: '/pages/games/management/league-management' }, { id: 'except_auto_regist', @@ -143,7 +143,7 @@ export const navigation: FuseNavigation[] = [ translate: 'NAV.GAME.EXCEPT_AUTO_REGIST.TITLE', type: 'item', icon: 'email', - url: '/pages/games/management/except-auto-regist', + url: '/pages/games/management/except-auto-regist' } ] }, @@ -159,7 +159,7 @@ export const navigation: FuseNavigation[] = [ translate: 'NAV.DEPOSIT_WITHDRAWAL.DEPOST.TITLE', type: 'item', icon: 'email', - url: '/pages/deposit/management/deposit-management', + url: '/pages/deposit/management/deposit-management' }, { id: 'withdrawal', @@ -167,7 +167,7 @@ export const navigation: FuseNavigation[] = [ translate: 'NAV.DEPOSIT_WITHDRAWAL.WITHDRAWAL.TITLE', type: 'item', icon: 'email', - url: '/pages/deposit/management/withdrawal-management', + url: '/pages/deposit/management/withdrawal-management' }, { id: 'money_log', @@ -175,7 +175,7 @@ export const navigation: FuseNavigation[] = [ translate: 'NAV.DEPOSIT_WITHDRAWAL.MONEY_LOG.TITLE', type: 'item', icon: 'email', - url: '/pages/deposit/management/money-log', + url: '/pages/deposit/management/money-log' }, { id: 'point_log', @@ -183,7 +183,7 @@ export const navigation: FuseNavigation[] = [ translate: 'NAV.DEPOSIT_WITHDRAWAL.POINT_LOG.TITLE', type: 'item', icon: 'email', - url: '/pages/deposit/management/point-log', + url: '/pages/deposit/management/point-log' }, { id: 'daily_settlement', @@ -191,7 +191,7 @@ export const navigation: FuseNavigation[] = [ translate: 'NAV.DEPOSIT_WITHDRAWAL.DAILY_SETTLEMENT.TITLE', type: 'item', icon: 'email', - url: '/pages/deposit/management/dauly-settlement', + url: '/pages/deposit/management/dauly-settlement' } ] }, @@ -207,7 +207,7 @@ export const navigation: FuseNavigation[] = [ translate: 'NAV.INFO.SERVICE_CENTER_MANAGEMENT.TITLE', type: 'item', icon: 'email', - url: '/sample', + url: '/sample' }, { id: 'send_message', @@ -215,7 +215,7 @@ export const navigation: FuseNavigation[] = [ translate: 'NAV.INFO.SEND_MESSAGE_MANAGEMENT.TITLE', type: 'item', icon: 'email', - url: '/sample', + url: '/sample' }, { id: 'free_board', @@ -223,43 +223,39 @@ export const navigation: FuseNavigation[] = [ translate: 'NAV.INFO.FREE_BOARD_MANAGEMENT.TITLE', type: 'item', icon: 'email', - url: '/sample', - } - , + url: '/sample' + }, { id: 'bet_rule', title: '배팅규정', translate: 'NAV.INFO.BET_RULE.TITLE', type: 'item', icon: 'email', - url: '/sample', - } - , + url: '/sample' + }, { id: 'popup_setting', title: '팝업창', translate: 'NAV.INFO.POPUP_SETTING.TITLE', type: 'item', icon: 'email', - url: '/sample', - } - , + url: '/sample' + }, { id: 'main_event_regist', title: '메인 이벤트 등록', translate: 'NAV.INFO.MAIN_EVENT_REGIST.TITLE', type: 'item', icon: 'email', - url: '/sample', - } - , + url: '/sample' + }, { id: 'notice_board', title: '공지사항 관리', translate: 'NAV.INFO.NOTICE_BOARD_MANAGEMENT.TITLE', type: 'item', icon: 'email', - url: '/sample', + url: '/sample' }, { id: 'board_regist', @@ -267,7 +263,7 @@ export const navigation: FuseNavigation[] = [ translate: 'NAV.INFO.BOARD_REGIST.TITLE', type: 'item', icon: 'email', - url: '/sample', + url: '/sample' } ] }, @@ -283,7 +279,7 @@ export const navigation: FuseNavigation[] = [ translate: 'NAV.SITE.DEFAULT_SET.TITLE', type: 'item', icon: 'email', - url: '/sample', + url: '/sample' }, { id: 'account_separate', @@ -291,7 +287,7 @@ export const navigation: FuseNavigation[] = [ translate: 'NAV.SITE.ACCOUNT_SEPARATE.TITLE', type: 'item', icon: 'email', - url: '/sample', + url: '/pages/sites/bank-info' }, { id: 'set_bet_amount', @@ -299,7 +295,7 @@ export const navigation: FuseNavigation[] = [ translate: 'NAV.SITE.SET_BET_AMOUNT.TITLE', type: 'item', icon: 'email', - url: '/sample', + url: '/sample' }, { id: 'block_ip', @@ -307,7 +303,7 @@ export const navigation: FuseNavigation[] = [ translate: 'NAV.SITE.BLOCK_IP.TITLE', type: 'item', icon: 'email', - url: '/sample', + url: '/sample' }, { id: 'admin_ip', @@ -315,7 +311,7 @@ export const navigation: FuseNavigation[] = [ translate: 'NAV.SITE.ADMIN_IP.TITLE', type: 'item', icon: 'email', - url: '/sample', + url: '/sample' }, { id: 'set_level', @@ -323,7 +319,7 @@ export const navigation: FuseNavigation[] = [ translate: 'NAV.SITE.SET_LEVEL.TITLE', type: 'item', icon: 'email', - url: '/sample', + url: '/sample' } ] }, @@ -339,7 +335,7 @@ export const navigation: FuseNavigation[] = [ translate: 'NAV.SPECIAL.ROULETTE_COUPON.TITLE', type: 'item', icon: 'email', - url: '/sample', + url: '/sample' }, { id: 'fix_bonus', @@ -347,7 +343,7 @@ export const navigation: FuseNavigation[] = [ translate: 'NAV.SPECIAL.FIX_BONUS.TITLE', type: 'item', icon: 'email', - url: '/sample', + url: '/sample' }, { id: 'mini_game_martin', @@ -355,7 +351,7 @@ export const navigation: FuseNavigation[] = [ translate: 'NAV.SPECIAL.MINI_GAME_MARTIN.TITLE', type: 'item', icon: 'email', - url: '/sample', + url: '/sample' }, { id: 'set_alert', @@ -363,7 +359,7 @@ export const navigation: FuseNavigation[] = [ translate: 'NAV.SPECIAL.SET_ALERT.TITLE', type: 'item', icon: 'email', - url: '/sample', + url: '/sample' }, { id: 'check_notice', @@ -371,7 +367,7 @@ export const navigation: FuseNavigation[] = [ translate: 'NAV.SPECIAL.CHECK_NOTICE.TITLE', type: 'item', icon: 'email', - url: '/sample', + url: '/sample' } ] }, diff --git a/src/app/pages/sites/bank-info/component/list.component.html b/src/app/pages/sites/bank-info/component/list.component.html index 7c1fe15..574597d 100644 --- a/src/app/pages/sites/bank-info/component/list.component.html +++ b/src/app/pages/sites/bank-info/component/list.component.html @@ -1 +1,107 @@ -

list works!

+
+ + +
+
+
+ home + chevron_right + User Interface +
+
계좌분리 관리
+
+
+ + + +
+
+ 계좌분리 +
+ +
+
+
+ + + + 계좌순번 + {{ bankInfo.id }} + + + + + 은행명 + {{ + bankInfo.name + }} + + + + + 계좌번호 + {{ + bankInfo.number + }} + + + + + 예금주 + {{ + bankInfo.holder + }} + + + + + 설명 + {{ + bankInfo.description + }} + + + + + +
+
+
+
+ +
diff --git a/src/app/pages/sites/bank-info/component/list.component.scss b/src/app/pages/sites/bank-info/component/list.component.scss index e69de29..8abc401 100644 --- a/src/app/pages/sites/bank-info/component/list.component.scss +++ b/src/app/pages/sites/bank-info/component/list.component.scss @@ -0,0 +1,140 @@ +@import 'src/@fuse/scss/fuse'; + +app-page-sites-bank-info-list { + #bank-info { + .top-bg { + @include media-breakpoint('xs') { + height: 224px; + } + } + > .center { + > .header { + .search-wrapper { + width: 100%; + max-width: 480px; + border-radius: 28px; + overflow: hidden; + @include mat-elevation(1); + + @include media-breakpoint('xs') { + width: 100%; + } + + .search { + width: 100%; + height: 48px; + line-height: 48px; + padding: 0 18px; + + input { + width: 100%; + height: 48px; + min-height: 48px; + max-height: 48px; + padding: 0 16px; + border: none; + outline: none; + } + } + } + + @include media-breakpoint('xs') { + padding: 8px 0; + height: 160px !important; + min-height: 160px !important; + max-height: 160px !important; + } + } + } + } + + .bank-info-table { + color: black; + flex: 1 1 auto; + border-bottom: 1px solid rgba(0, 0, 0, 0.301); + overflow: auto; + // -webkit-overflow-scrolling: touch; + + .bankInfo { + position: relative; + cursor: pointer; + // height: 84px; + } + .mat-cell { + min-width: 0; + display: flex; + align-items: center; + } + + //First column and header + // .mat-header-cell:first-child, + // .mat-cell:first-child { + // flex: 10%; + // } + // //Second column and header + // .mat-header-cell:nth-child(2), + // .mat-cell:nth-child(2) { + // flex: 30%; + // } + // .mat-header-cell:nth-child(3), + // .mat-cell:nth-child(2) { + // flex: 20%; + // } + // .mat-header-cell:nth-child(4), + // .mat-cell:nth-child(2) { + // flex: 15%; + // } + // //Last column and header + // .mat-header-cell:last-child, + // .mat-cell:last-child { + // flex: 15%; + // } + + .mat-column-icon { + max-width: 11%; + // justify-content: start; + } + .mat-column-korName { + max-width: 22%; + } + .mat-column-addMethod { + max-width: 22%; + } + .mat-column-sportsEntities { + max-width: 22%; + } + .mat-column-test { + max-width: 22%; + // justify-content: flex-end; + } + .mat-column-image { + flex: 1 0 84px; + + .product-image { + width: 52px; + height: 52px; + border: 1px solid rgba(0, 0, 0, 0.12); + } + } + .mat-column-buttons { + flex: 0 0 80px; + } + .quantity-indicator { + display: inline-block; + vertical-align: middle; + width: 8px; + height: 8px; + border-radius: 4px; + margin-right: 8px; + + & + span { + display: inline-block; + vertical-align: middle; + } + } + + .active-icon { + border-radius: 50%; + } + } +} diff --git a/src/app/pages/sites/bank-info/component/list.component.ts b/src/app/pages/sites/bank-info/component/list.component.ts index 54b9e42..15ac2da 100644 --- a/src/app/pages/sites/bank-info/component/list.component.ts +++ b/src/app/pages/sites/bank-info/component/list.component.ts @@ -7,6 +7,8 @@ import { ViewEncapsulation, AfterViewInit } from '@angular/core'; +import { MatPaginator } from '@angular/material/paginator'; +import { MatSort } from '@angular/material/sort'; import { fromEvent, Subject } from 'rxjs'; import { debounceTime, distinctUntilChanged } from 'rxjs/operators'; import { takeUntil } from 'rxjs/internal/operators'; @@ -15,6 +17,15 @@ import { MatTableDataSource } from '@angular/material/table'; import { fuseAnimations } from 'src/@fuse/animations'; import { FuseUtils } from 'src/@fuse/utils'; +import { BankInfoDataSource } from './list.data-source'; +import { BankInfoService } from 'src/modules/sites/bank-info/service/bank-info.service'; +import { + FormGroup, + FormBuilder, + Validators, + FormArray, + FormControl +} from '@angular/forms'; @Component({ selector: 'app-page-sites-bank-info-list', @@ -23,8 +34,59 @@ import { FuseUtils } from 'src/@fuse/utils'; animations: fuseAnimations, encapsulation: ViewEncapsulation.None }) -export class ListComponent implements OnInit { - constructor() {} +export class ListComponent implements OnInit, OnDestroy, AfterViewInit { + dataSource: BankInfoDataSource | null; + displayedColumns = ['id', 'name', 'number', 'holder', 'description']; + bankInfoForm: FormGroup; + bankInfoFormArray: FormArray; - ngOnInit() {} + @ViewChild('filter', { static: true }) + filter: ElementRef; + + // Private + private _unsubscribeAll: Subject; + + constructor( + private bankInfoService: BankInfoService, + private fb: FormBuilder + ) { + this._unsubscribeAll = new Subject(); + } + + ngOnInit() { + this.dataSource = new BankInfoDataSource(this.bankInfoService); + + this.bankInfoForm = this.fb.group({ + items: this.createFormArray() + }); + } + + createFormArray(): FormArray { + return new FormArray( + this.dataSource[0]( + item => + new FormGroup({ + id: new FormControl(item.id), + name: new FormControl(item.name, [Validators.required]), + number: new FormControl(item.number, [Validators.required]), + holder: new FormControl(item.holder, [Validators.required]), + description: new FormControl(item.description, [ + Validators.required + ]) + }) + ) + ); + } + /** + * On destroy + */ + ngOnDestroy(): void { + // Unsubscribe from all subscriptions + this._unsubscribeAll.next(); + this._unsubscribeAll.complete(); + } + + ngAfterViewInit(): void {} + + bankInfoUpdate(): void {} } diff --git a/src/app/pages/sites/bank-info/component/list.data-source.ts b/src/app/pages/sites/bank-info/component/list.data-source.ts index cbe183e..be23818 100644 --- a/src/app/pages/sites/bank-info/component/list.data-source.ts +++ b/src/app/pages/sites/bank-info/component/list.data-source.ts @@ -13,53 +13,21 @@ import { Page } from 'src/modules/common/data/model/page'; export class BankInfoDataSource extends DataSource { private filterSubject = new BehaviorSubject(''); - private pageSubject = new BehaviorSubject>({}); + // private pageSubject = new BehaviorSubject>({}); - constructor( - private bankInfoService: BankInfoService, - private paginator: MatPaginator, - private sort: MatSort - ) { + constructor(private bankInfoService: BankInfoService) { 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 - ]; + const displayDataChanges = [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.bankInfoService.getBankInfos().pipe( map(page => { - this.page = page; return page.content; }) ); diff --git a/src/modules/sites/bank-info/service/bank-info.service.ts b/src/modules/sites/bank-info/service/bank-info.service.ts index 2876df6..69d8339 100644 --- a/src/modules/sites/bank-info/service/bank-info.service.ts +++ b/src/modules/sites/bank-info/service/bank-info.service.ts @@ -17,7 +17,7 @@ export class BankInfoService { public getBankInfos(): Observable> { return this.httpClient.get>( - `${this.apiBaseUrl}/bank-info`, + `${this.apiBaseUrl}/bank_info`, {} ); }