2022-08-24 09:43:15 +00:00

579 lines
15 KiB
TypeScript

import {
AfterViewInit,
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
OnDestroy,
OnInit,
ViewChild,
ViewEncapsulation,
} from '@angular/core';
import {
AbstractControl,
FormBuilder,
FormControl,
FormGroup,
ValidatorFn,
Validators,
} from '@angular/forms';
import { MatCheckboxChange } from '@angular/material/checkbox';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import {
debounceTime,
map,
merge,
Observable,
Subject,
switchMap,
takeUntil,
} from 'rxjs';
import { fuseAnimations } from '@fuse/animations';
import { FuseConfirmationService } from '@fuse/services/confirmation';
import { User } from '../models/user';
import { UserService } from '../services/user.service';
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 { MemberLevelService } from 'app/modules/polyglot/member_level/services/member_level.service';
import { BankService } from 'app/modules/polyglot/bank/services/bank.service';
import { MemberLevel } from 'app/modules/proto/models/member_level_pb';
import { Bank } from 'app/modules/proto/models/bank_pb';
import { SiteService } from 'app/modules/polyglot/site/services/site.service';
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';
@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();
/* NONE: 0;
NORMAL: 1;
PENDING: 2;
WITHDRAWAL: 3;
DORMANCY: 4;
BLACKLIST: 5;
SUSPENDED: 6; */
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;
passwordConfirmConfigForm!: FormGroup;
/* currentMember?: User; */
currentMember?: MemberModel;
panels: any[] = [];
selectedPanel: string = 'accountInfo';
memberLevels!: MemberLevel[];
banks!: Bank[];
sites!: Site[];
alertConfig: { type: FuseAlertType; message: string } = {
type: 'success',
message: '비밀번호가 수정 되었습니다.',
};
changePasswordResultShowAlert: boolean = false;
private _unsubscribeAll: Subject<any> = new Subject<any>();
/**
* Constructor
*/
constructor(
private _activatedRoute: ActivatedRoute,
private _changeDetectorRef: ChangeDetectorRef,
private _fuseConfirmationService: FuseConfirmationService,
private _fuseMediaWatcherService: FuseMediaWatcherService,
private _formBuilder: FormBuilder,
private _userService: UserService,
private _memberService: MemberService,
private _memberLevelService: MemberLevelService,
private _bankService: BankService,
private _siteService: SiteService
) {}
// -----------------------------------------------------------------------------------------------------
// @ Lifecycle hooks
// -----------------------------------------------------------------------------------------------------
/**
* On init
*/
ngOnInit(): void {
this.memberDefaultForm = this._formBuilder.group({
id: [''],
username: [{ value: '', disabled: true }],
signinPw: [''],
signinPwConfirm: [''],
nickname: [{ value: '', disabled: true }],
ownCash: [''],
mobilePhoneNumber: [''],
levelId: [''],
state: [''],
isExcahngeMoney: [''],
comp: [''],
coupon: [''],
recommender: [{ value: '', disabled: true }],
siteId: [''],
recommendCount: [''],
hodingGameMoney: [{ value: '0', disabled: true }],
});
this.memberBankForm = this._formBuilder.group({
bankId: [''],
accountNumber: [''],
accountHolder: [''],
exchangePw: [''],
description: [''],
});
this.memberSettleForm = this._formBuilder.group({
bacaraRate: [],
rulletRate: [],
dragonRate: [],
etcRate: [],
slotRate: [],
casinoRusingRate: [],
slotRusingRate: [],
});
this.memberGameSettingForm = this._formBuilder.group({});
this.passwordConfirmConfigForm = 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._siteService
.listSites()
.then((result) => (this.sites = result.getSitesList()));
this._memberLevelService.listMemberLevels().then((result) => {
this.memberLevels = result
.getMemberLevelsList()
.filter((v) => !!v.getShow());
});
this._bankService
.listBanks()
.then((result) => (this.banks = result.getBanksList()));
this._activatedRoute.data.subscribe((data) => {
let member: GetMemberResponse.Result = data['member'];
this.currentMember = member.getMember();
console.log(this.currentMember?.getState());
/* console.log('dddd', listMemberResult.getMembersList()); */
this.memberDefaultForm.patchValue({
username: this.currentMember?.getUsername(),
signinPw: '',
exchangePw: '',
mobilePhoneNumber: this.currentMember?.getMobilePhoneNumber(),
levelId: this.currentMember?.getMemberLevel()?.getId(),
state: this.currentMember?.getState(),
nickname: this.currentMember?.getNickname(),
bankId: this.currentMember?.getBankAccount()?.getId(),
});
// 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 req = new UpdateMemberRequest();
req.setId(this.currentMember?.getId());
switch (this.selectedPanel) {
case 'accountInfo':
{
const {
username,
signinPw,
nickname,
ownCash,
mobilePhoneNumber,
levelId,
state,
isExcahngeMoney,
comp,
coupon,
siteId,
hodingGameMoney,
} = this.memberDefaultForm.value;
if (!!levelId && levelId == '') {
req.setMemberLevelId(levelId);
}
if (!!mobilePhoneNumber && mobilePhoneNumber == '') {
req.setMobilePhoneNumber(mobilePhoneNumber);
}
if (!!siteId && siteId == '') {
req.setSiteId(siteId);
}
}
break;
case 'bankInfo':
{
if (!this.memberBankForm.valid) {
return;
}
const { exchangePw, accountHolder, accountNumber, description } =
this.memberBankForm.value;
const bank = new UpdateMemberRequest.BankAccount();
const bankId = this.currentMember?.getBankAccount()?.getId();
if (!!bankId) {
bank.setId(bankId);
bank.setAccountNumber(accountNumber);
bank.setName(accountHolder);
}
req.setBankAccount(bank);
}
break;
case 'settleInfo':
break;
case 'gameInfo':
break;
case 'historyInfo':
break;
default:
break;
}
this._memberService.updateMember(req).then((result) => {
console.log(result);
});
}
/**
* 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.changePasswordResultShowAlert = true;
this.alertConfig = {
type: 'error',
message: '비밀번호를 입력하세요.',
};
this.closeChangePasswordAlert();
return;
}
if (password !== passwordConfirm) {
this.changePasswordResultShowAlert = true;
this.alertConfig = {
type: 'error',
message: '비밀번호가 일치하지 않습니다.',
};
this.closeChangePasswordAlert();
return;
}
const dialogRef = this._fuseConfirmationService.open(
this.passwordConfirmConfigForm.value
);
/* const dialogRef = this._matDialog.open(AddComposeComponent); */
dialogRef.afterClosed().subscribe((result) => {
if (result === 'confirmed') {
const req = new UpdateMemberForPasswordRequest();
req.setPassword(password);
req.setId(this.currentMember!.getId());
this._memberService
.updateMemberForPassword(req)
.then((result) => {
this.alertConfig = {
type: 'success',
message: '비밀번호가 수정 되었습니다.',
};
this.changePasswordResultShowAlert = true;
})
.catch((reson) => {
this.changePasswordResultShowAlert = true;
// Set the alert
this.alertConfig = {
type: 'error',
message: '패스워드 변경이 실패하였습니다.',
};
})
.finally(() => this.closeChangePasswordAlert());
}
});
}
onSelectionChangeLanguage(event: MatSelectChange) {
const state = event.value;
if (!state) {
this.alertConfig = {
type: 'error',
message: '상태값이 선택 되지 않았습니다.',
};
this.closeChangePasswordAlert();
return;
}
const req = new UpdateMemberForStateRequest();
req.setId(this.currentMember!.getId());
req.setState(state);
this._memberService
.updateMemberForState(req)
.then((result) => {
this.changePasswordResultShowAlert = true;
this.alertConfig = {
type: 'success',
message: '회원 상태가 수정 되었습니다.',
};
})
.catch((reson) => {
this.changePasswordResultShowAlert = true;
// Set the alert
this.alertConfig = {
type: 'error',
message: '회원 상태 변경이 실패하였습니다.',
};
})
.finally(() => this.closeChangePasswordAlert());
}
__changeMemberState(): void {
const state = this.memberDefaultForm.get('state')?.value;
}
private closeChangePasswordAlert(): void {
setTimeout(() => {
this.changePasswordResultShowAlert = false;
this._changeDetectorRef.markForCheck();
}, 5000);
}
}