import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation, } from '@angular/core'; import { AbstractControl, FormBuilder, FormControl, FormGroup, ValidatorFn, Validators, } from '@angular/forms'; import { MatPaginator } from '@angular/material/paginator'; import { MatSort } from '@angular/material/sort'; import { Observable, Subject, takeUntil } from 'rxjs'; import { fuseAnimations } from '@fuse/animations'; import { FuseConfirmationService } from '@fuse/services/confirmation'; import { ActivatedRoute } from '@angular/router'; import { GetMemberResponse, UpdateMemberForPasswordRequest, UpdateMemberForStateRequest, UpdateMemberRequest, } from 'app/modules/proto/c2se/member_pb'; import { MemberModel, MemberState } from 'app/modules/proto/models/member_pb'; import { MemberService } from 'app/modules/polyglot/member/services/member.service'; import { MemberLevel } from 'app/modules/proto/models/member_level_pb'; import { Bank } from 'app/modules/proto/models/bank_pb'; import { Site } from 'app/modules/proto/models/site_pb'; import { MatDrawer } from '@angular/material/sidenav'; import { FuseMediaWatcherService } from '@fuse/services/media-watcher'; import { FuseAlertType } from '@fuse/components/alert'; import { MatSelectChange } from '@angular/material/select'; import { ListMemberLevelsResponse } from 'app/modules/proto/c2se/member_level_pb'; import { UpdateMemberBankAccountForExchangePasswordRequest, UpdateMemberBankAccountRequest, } from 'app/modules/proto/c2se/member_bank_account_pb'; import { MemberBankAccountService } from 'app/modules/polyglot/member_bank_account/services/member_bank_account.service'; import { ListBanksResponse } from 'app/modules/proto/c2se/bank_pb'; import { ListSitesResponse } from 'app/modules/proto/c2se/site_pb'; import { UpdateMemberSettlementSettingRequest } from 'app/modules/proto/c2se/member_settlement_setting_pb'; import { ManualPaymentType, MemberSettlementSetting, } from 'app/modules/proto/models/member_settlement_setting_pb'; import { MemberSettlementSettingService } from 'app/modules/polyglot/member_settlement_setting/services/member_settlement_setting.service'; import { UpdateMemberGameSettingRequest } from 'app/modules/proto/c2se/member_game_setting_pb'; import { MemberGameSettingService } from 'app/modules/polyglot/member_game_setting/services/member_game_setting.service'; @Component({ selector: 'user-view', templateUrl: './view.component.html', styles: [ /* language=SCSS */ ` .user-view-grid { grid-template-columns: 48px auto 40px; @screen sm { grid-template-columns: 48px auto 112px 72px; } @screen md { grid-template-columns: 48px 112px auto 112px 72px; } @screen lg { grid-template-columns: 48px 112px auto 112px 96px 96px 72px; } } `, ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: fuseAnimations, }) export class ViewComponent implements OnInit, AfterViewInit, OnDestroy { @ViewChild(MatPaginator) private _paginator!: MatPaginator; @ViewChild(MatSort) private _sort!: MatSort; @ViewChild('drawer') drawer!: MatDrawer; drawerMode: 'over' | 'side' = 'side'; drawerOpened: boolean = true; isLoading = false; searchInputControl = new FormControl(); memberStateOptions = [ { value: 1, label: '정상', }, { value: 2, label: '대기', }, { value: 3, label: '탈퇴', }, { value: 4, label: '휴면', }, { value: 5, label: '블랙', }, { value: 6, label: '정지', }, ]; memberDefaultForm!: FormGroup; memberBankForm!: FormGroup; memberSettleForm!: FormGroup; memberGameSettingForm!: FormGroup; fuseAlertConfirmConfigForm!: FormGroup; /* currentMember?: User; */ currentMember?: MemberModel; panels: any[] = []; selectedPanel: string = 'accountInfo'; memberLevels!: MemberLevel[]; memberSettlement!: MemberSettlementSetting; banks!: Bank[]; sites!: Site[]; ManualPaymentType = ManualPaymentType; alertConfig: { type: FuseAlertType; message: string } = { type: 'success', message: '비밀번호가 수정 되었습니다.', }; changePasswordResultShowAlert: boolean = false; alertTitle = '알림'; alertChangePasswordMessage = '비밀번호를 변경 하시겠습니까?'; alertUpdateMemberMessage = '회원을 수정 하시겠습니까?'; private _unsubscribeAll: Subject = new Subject(); /** * Constructor */ constructor( private _activatedRoute: ActivatedRoute, private _changeDetectorRef: ChangeDetectorRef, private _fuseConfirmationService: FuseConfirmationService, private _fuseMediaWatcherService: FuseMediaWatcherService, private _formBuilder: FormBuilder, private _memberService: MemberService, private _memberBankAccountService: MemberBankAccountService, private _memberSettlementSettingService: MemberSettlementSettingService, private _memberGameSettingService: MemberGameSettingService ) {} // ----------------------------------------------------------------------------------------------------- // @ Lifecycle hooks // ----------------------------------------------------------------------------------------------------- /** * On init */ ngOnInit(): void { this.memberDefaultForm = this._formBuilder.group({ id: [''], username: [{ value: '', disabled: true }], signinPw: [''], signinPwConfirm: [''], nickname: [{ value: '', disabled: true }], ownCash: [''], mobilePhoneNumber: [''], levelName: [''], state: [''], comp: [''], coupon: [''], recommender: [{ value: '', disabled: true }], siteUrl: [''], recommendCount: [''], hodingGameMoney: [{ value: '0', disabled: true }], }); this.memberBankForm = this._formBuilder.group({ bankName: [''], accountNumber: [''], accountHolder: [''], exchangePw: [''], exchangePwConfirm: [''], description: [''], }); this.memberSettleForm = this._formBuilder.group({ rateCasinoBacara: ['', [Validators.required]], rateCasinoRoulette: ['', [Validators.required]], rateCasinoDragonTiger: ['', [Validators.required]], rateCasino: ['', [Validators.required]], rateSlot: ['', [Validators.required]], rateCasinoLoosing: ['', [Validators.required]], rateSlotLoosing: ['', [Validators.required]], canFirstChargeComp: [], canPerChargeComp: [], canExchange: [], manualPaymentTypeForPartner: ['', [Validators.required]], }); this.memberGameSettingForm = this._formBuilder.group({ canBetPowerball: [], canBetCasino: [], canBetSlot: [], }); this.fuseAlertConfirmConfigForm = this._formBuilder.group({ title: '알림', message: '비밀번호를 변경 하시겠습니까?', icon: this._formBuilder.group({ show: true, name: 'heroicons_outline:exclamation', color: 'warn', }), actions: this._formBuilder.group({ confirm: this._formBuilder.group({ show: true, label: '확인', color: 'warn', }), cancel: this._formBuilder.group({ show: true, label: '취소', }), }), dismissible: true, }); this.panels = [ { id: 'accountInfo', icon: 'heroicons_outline:user-circle', title: '기본정보', description: 'Manage your public profile and private information', }, { id: 'bankInfo', icon: 'heroicons_outline:user-circle', title: '계좌정보', description: 'Manage your public profile and private information', }, { id: 'settleInfo', icon: 'heroicons_outline:lock-closed', title: '정산설정', description: 'Manage your password and 2-step verification preferences', }, { id: 'gameInfo', icon: 'heroicons_outline:credit-card', title: '게임설정', description: 'Manage your subscription plan, payment method and billing information', }, { id: 'historyInfo', icon: 'heroicons_outline:bell', title: '내역', description: "Manage when you'll be notified on which channels", }, ]; // Subscribe to media changes this._fuseMediaWatcherService.onMediaChange$ .pipe(takeUntil(this._unsubscribeAll)) .subscribe(({ matchingAliases }) => { // Set the drawerMode and drawerOpened if (matchingAliases.includes('lg')) { this.drawerMode = 'side'; this.drawerOpened = true; } else { this.drawerMode = 'over'; this.drawerOpened = false; } // Mark for check this._changeDetectorRef.markForCheck(); }); this._activatedRoute.data.subscribe((data) => { let member: GetMemberResponse.Result = data['member']; this.currentMember = member.getMember(); let listMemberLevelsResult: ListMemberLevelsResponse.Result = data['listMemberLevels']; this.memberLevels = listMemberLevelsResult.getMemberLevelsList(); let listbanksResult: ListBanksResponse.Result = data['listMemberBanks']; this.banks = listbanksResult.getBanksList(); let listSitesResult: ListSitesResponse.Result = data['listSites']; this.sites = listSitesResult.getSitesList(); const memberSettlement = this.currentMember?.getMemberSettlementSetting(); const memberGameSetting = this.currentMember?.getMemberGameSetting(); this.memberDefaultForm.patchValue({ username: this.currentMember?.getUsername(), signinPw: '', exchangePw: '', mobilePhoneNumber: this.currentMember?.getMobilePhoneNumber(), levelName: this.currentMember?.getMemberLevel()?.getName(), state: this.currentMember?.getState(), nickname: this.currentMember?.getNickname(), siteUrl: this.currentMember?.getSite()?.getUrl(), }); this.memberBankForm.patchValue({ bankName: this.currentMember?.getBankAccount()?.getBank()?.getName(), accountNumber: this.currentMember?.getBankAccount()?.getAccountNumber(), accountHolder: this.currentMember?.getBankAccount()?.getName(), description: this.currentMember?.getBankAccount()?.getMemo(), }); this.memberSettleForm.patchValue({ rateCasinoBacara: memberSettlement?.getRateCasinoBacara(), rateCasinoRoulette: memberSettlement?.getRateCasinoRoulette(), rateCasinoDragonTiger: memberSettlement?.getRateCasinoDragonTiger(), rateCasino: memberSettlement?.getRateCasino(), rateSlot: memberSettlement?.getRateSlot(), rateCasinoLoosing: memberSettlement?.getRateCasinoLoosing(), rateSlotLoosing: memberSettlement?.getRateSlotLoosing(), canFirstChargeComp: memberSettlement?.getCanFirstChargeComp(), canPerChargeComp: memberSettlement?.getCanPerChargeComp(), canExchange: !!memberSettlement?.getCanExchange() ? 'true' : 'false', manualPaymentTypeForPartner: memberSettlement?.getManualPaymentTypeForPartner(), }); this.memberGameSettingForm.patchValue({ canBetPowerball: memberGameSetting?.getCanBetPowerball(), canBetCasino: memberGameSetting?.getCanBetCasino(), canBetSlot: memberGameSetting?.getCanBetSlot(), }); // Mark for check this._changeDetectorRef.markForCheck(); }); } /** * After view init */ ngAfterViewInit(): void {} /** * On destroy */ ngOnDestroy(): void { // Unsubscribe from all subscriptions this._unsubscribeAll.next(null); this._unsubscribeAll.complete(); } // ----------------------------------------------------------------------------------------------------- // @ Public methods // ----------------------------------------------------------------------------------------------------- // ----------------------------------------------------------------------------------------------------- // @ Private methods // ----------------------------------------------------------------------------------------------------- /** * Create product */ __createProduct(): void {} /** * Toggle product details * * @param productId */ __toggleDetails(productId: string): void {} /** * Track by function for ngFor loops * * @param index * @param item */ __trackByFn(index: number, item: any): any { return item.id || index; } __modifyMember(): void { if (!this.currentMember?.getId()) { return; } /* const dialogRef; */ const req = new UpdateMemberRequest(); req.setId(this.currentMember?.getId()); switch (this.selectedPanel) { case 'accountInfo': this.modifyMemberDefaultInfo(); break; case 'bankInfo': this.modifyMemberBankAccountInfo(); break; case 'settleInfo': this.modifyMemberSttlemtSettingInfo(); break; case 'gameInfo': this.modifyMemberGameSettingInfo(); break; case 'historyInfo': break; default: break; } } private modifyMemberDefaultInfo(): void { this.showConfirmAlert(this.alertTitle, this.alertUpdateMemberMessage).then( (result) => { if (!!result && !!this.currentMember?.getId()) { const req = new UpdateMemberRequest(); req.setId(this.currentMember?.getId()); const { username, signinPw, nickname, ownCash, mobilePhoneNumber, levelName, state, isExcahngeMoney, comp, coupon, siteUrl, hodingGameMoney, } = this.memberDefaultForm.value; if (!!levelName && levelName !== '') { const level = this.memberLevels.find( (v) => v.getName() === levelName ); if (!!level) req.setMemberLevelId(level?.getId()); } if (!!mobilePhoneNumber && mobilePhoneNumber !== '') { req.setMobilePhoneNumber(mobilePhoneNumber); } if (!!siteUrl && siteUrl !== '') { const site = this.sites.find((v) => v.getUrl() === siteUrl); if (!!site) req.setSiteId(site.getId()); } this._memberService .updateMember(req) .then((result) => { console.log(result); this.showAlert('success', '수정이 완료되었습니다.'); }) .catch((resson) => { this.showAlert('error', '수정 실패 잠시 후 다시 시도하세요.'); }) .finally(() => this.closeChangePasswordAlert()); } } ); } private modifyMemberBankAccountInfo(): void { if (!this.memberBankForm.valid) { return; } this.showConfirmAlert(this.alertTitle, this.alertUpdateMemberMessage).then( (result) => { if (!!result) { const { exchangePw, exchangePwConfirm, bankName, accountHolder, accountNumber, description, } = this.memberBankForm.value; const bankId = this.currentMember?.getBankAccount()?.getId(); const bankReq = new UpdateMemberBankAccountRequest(); const bankFind = this.banks.find((v) => v.getName() === bankName); if (!bankId || !bankFind) { console.log('Error bankId undefined or bankFind undefined'); return; } bankReq.setAccountNumber(accountNumber); bankReq.setBankId(bankFind?.getId()); bankReq.setId(bankId); bankReq.setMemo(description); bankReq.setName(accountHolder); this._memberBankAccountService .updateMemberBankAccount(bankReq) .then((result) => { this.showAlert('success', '수정이 완료되었습니다.'); }) .catch((reson) => { this.showAlert('error', '수정 실패 잠시 후 다시 시도하세요.'); }) .finally(() => this.closeChangePasswordAlert()); } } ); } private modifyMemberSttlemtSettingInfo(): void { if (!this.memberSettleForm.valid) { return; } this.showConfirmAlert(this.alertTitle, this.alertUpdateMemberMessage).then( (result) => { if (!!result) { const { rateCasinoBacara, rateCasinoRoulette, rateCasinoDragonTiger, rateCasino, rateSlot, rateCasinoLoosing, rateSlotLoosing, canFirstChargeComp, canPerChargeComp, canExchange, manualPaymentTypeForPartner, } = this.memberSettleForm.value; const updateSSReq = new UpdateMemberSettlementSettingRequest(); updateSSReq.setId( this.currentMember?.getMemberSettlementSetting()?.getId()! ); updateSSReq.setRateCasinoBacara(rateCasinoBacara); updateSSReq.setRateCasinoRoulette(rateCasinoRoulette); updateSSReq.setRateCasinoDragonTiger(rateCasinoDragonTiger); updateSSReq.setRateCasino(rateCasino); updateSSReq.setRateSlot(rateSlot); updateSSReq.setRateCasinoLoosing(rateCasinoLoosing); updateSSReq.setRateSlotLoosing(rateSlotLoosing); updateSSReq.setCanFirstChargeComp(canFirstChargeComp); updateSSReq.setCanPerChargeComp(canPerChargeComp); updateSSReq.setCanExchange(canExchange); updateSSReq.setManualPaymentTypeForPartner( manualPaymentTypeForPartner ); this._memberSettlementSettingService .updateMemberSettlementSetting(updateSSReq) .then((result) => { this.showAlert('success', '수정이 완료되었습니다.'); }) .catch((reson) => { this.showAlert('error', '수정 실패 잠시 후 다시 시도하세요.'); }) .finally(() => this.closeChangePasswordAlert()); } } ); } private modifyMemberGameSettingInfo(): void { this.showConfirmAlert(this.alertTitle, this.alertUpdateMemberMessage).then( (result) => { if (!!result) { const { canBetPowerball, canBetCasino, canBetSlot } = this.memberGameSettingForm.value; const updateGSReq = new UpdateMemberGameSettingRequest(); updateGSReq.setId( this.currentMember?.getMemberGameSetting()?.getId()! ); updateGSReq.setCanBetPowerball(canBetPowerball); updateGSReq.setCanBetCasino(canBetCasino); updateGSReq.setCanBetSlot(canBetSlot); this._memberGameSettingService .updateMemberGameSetting(updateGSReq) .then((result) => { this.showAlert('success', '수정이 완료되었습니다.'); }) .catch((reson) => { this.showAlert('error', '수정 실패 잠시 후 다시 시도하세요.'); }) .finally(() => this.closeChangePasswordAlert()); } } ); } /** * Navigate to the panel * * @param panel */ goToPanel(panel: string): void { this.selectedPanel = panel; // Close the drawer on 'over' mode if (this.drawerMode === 'over') { this.drawer.close(); } } /** * Get the details of the panel * * @param id */ getPanelInfo(id: string): any { return this.panels.find((panel) => panel.id === id); } /** * Track by function for ngFor loops * * @param index * @param item */ trackByFn(index: number, item: any): any { return item.id || index; } __changePassword(): void { const password = this.memberDefaultForm.get('signinPw')?.value as string; const passwordConfirm = this.memberDefaultForm.get('signinPwConfirm') ?.value as string; if (!password || !passwordConfirm) { this.showAlert('error', '비밀번호를 입력하세요.'); this.closeChangePasswordAlert(); return; } if (password !== passwordConfirm) { this.showAlert('error', '비밀번호가 일치하지 않습니다.'); this.closeChangePasswordAlert(); return; } this.showConfirmAlert( this.alertTitle, this.alertChangePasswordMessage ).then((result) => { if (!!result) { const req = new UpdateMemberForPasswordRequest(); req.setPassword(password); req.setId(this.currentMember!.getId()); this._memberService .updateMemberForPassword(req) .then((result) => { this.showAlert('success', '비밀번호가 수정 되었습니다.'); this._changeDetectorRef.markForCheck(); }) .catch((reson) => { this.showAlert('error', '패스워드 변경이 실패하였습니다.'); this._changeDetectorRef.markForCheck(); }) .finally(() => this.closeChangePasswordAlert()); } }); } __changeExcahngePassword(): void { const password = this.memberBankForm.get('exchangePw')?.value as string; const passwordConfirm = this.memberBankForm.get('exchangePwConfirm') ?.value as string; if (!password || !passwordConfirm) { this.showAlert('error', '비밀번호를 입력하세요.'); this.closeChangePasswordAlert(); return; } if (password !== passwordConfirm) { this.showAlert('error', '비밀번호가 일치하지 않습니다.'); this.closeChangePasswordAlert(); return; } this.showConfirmAlert( this.alertTitle, this.alertChangePasswordMessage ).then((result) => { if (!!result) { const req = new UpdateMemberBankAccountForExchangePasswordRequest(); req.setExchangePassword(password); req.setId(this.currentMember!.getId()); this._memberBankAccountService .updateMemberBankAccountForExchangePassword(req) .then((result) => { this.showAlert('success', '비밀번호가 수정 되었습니다.'); }) .catch((reson) => { this.showAlert('error', '패스워드 변경이 실패하였습니다.'); }) .finally(() => this.closeChangePasswordAlert()); } }); } onSelectionChangeState(event: MatSelectChange) { const state = event.value; if (!state) { this.showAlert('error', '상태값이 선택 되지 않았습니다.'); this.closeChangePasswordAlert(); return; } this.showConfirmAlert( this.alertTitle, '회원 상태를 수정하시겠습니까?' ).then((result) => { if (!!result) { const req = new UpdateMemberForStateRequest(); req.setId(this.currentMember!.getId()); req.setState(state); this._memberService .updateMemberForState(req) .then((result) => { this.showAlert('success', '회원 상태가 수정 되었습니다.'); }) .catch((reson) => { this.showAlert('error', '회원 상태 변경이 실패하였습니다.'); }) .finally(() => this.closeChangePasswordAlert()); } }); } private showAlert(type: FuseAlertType, message: string): void { this.changePasswordResultShowAlert = true; // Set the alert this.alertConfig = { type, message, }; this._changeDetectorRef.markForCheck(); } private closeChangePasswordAlert(): void { setTimeout(() => { this.changePasswordResultShowAlert = false; this._changeDetectorRef.markForCheck(); }, 5000); } private async showConfirmAlert( title: string, message: string ): Promise { this.fuseAlertConfirmConfigForm.get('title')?.setValue(title); this.fuseAlertConfirmConfigForm.get('message')?.setValue(message); return new Promise((resolve, reject) => { const dialogRef = this._fuseConfirmationService.open( this.fuseAlertConfirmConfigForm.value ); dialogRef.afterClosed().subscribe((result) => { if (result === 'confirmed') { resolve(true); } else { resolve(false); } }); }); } }