사용자 상세화면 수정
This commit is contained in:
Park Byung Eun
parent
4d2656838a
commit
93a3edec9d
|
|
@ -1,33 +1,21 @@
|
|||
<p>view compoent</p>
|
||||
<div
|
||||
class="sm:absolute sm:inset-0 flex flex-col flex-auto min-w-0 sm:overflow-hidden bg-card dark:bg-transparent"
|
||||
class="flex flex-col w-full min-w-0 sm:absolute sm:inset-0 sm:overflow-hidden"
|
||||
>
|
||||
<mat-drawer-container class="flex-auto sm:h-full">
|
||||
<!-- Drawer -->
|
||||
<mat-drawer
|
||||
class="sm:w-96 dark:bg-gray-900"
|
||||
[autoFocus]="false"
|
||||
[mode]="drawerMode"
|
||||
[opened]="drawerOpened"
|
||||
#drawer
|
||||
>
|
||||
<!-- Header -->
|
||||
<div
|
||||
class="relative flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between py-8 px-6 md:px-8 border-b"
|
||||
>
|
||||
<!-- Loader -->
|
||||
<!-- <div class="absolute inset-x-0 bottom-0" *ngIf="isLoading">
|
||||
<mat-progress-bar [mode]="'indeterminate'"></mat-progress-bar> -->
|
||||
<!-- </div> -->
|
||||
<div class="flex items-center justify-between m-8 mr-6 sm:my-10">
|
||||
<!-- Title -->
|
||||
<div class="text-4xl font-extrabold tracking-tight">User View</div>
|
||||
<!-- Actions -->
|
||||
<div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4"></div>
|
||||
</div>
|
||||
|
||||
<!-- Main -->
|
||||
<div class="flex flex-auto overflow-hidden">
|
||||
<!-- Products list -->
|
||||
<div
|
||||
class="flex flex-col flex-auto sm:mb-18 overflow-hidden sm:overflow-y-auto"
|
||||
>
|
||||
<div>
|
||||
<fuse-card
|
||||
class="flex flex-col md:flex-row justify-between max-w-80 md:max-w-160 w-full p-8 pb-4 filter-listing"
|
||||
>
|
||||
<div class="text font-extrabold tracking-tight leading-none">
|
||||
<div class="flex flex-col flex-auto order-2 md:order-1">
|
||||
<div class="text-2xl font-semibold leading-tight">기본정보</div>
|
||||
<div class="text font-semibold leading-tight">사용자</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<div class="flex flex-wrap items-center text-secondary my-1">
|
||||
|
|
@ -92,21 +80,83 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fuse-card>
|
||||
</div>
|
||||
<!-- Close button -->
|
||||
<div class="lg:hidden">
|
||||
<button mat-icon-button (click)="drawer.close()">
|
||||
<mat-icon [svgIcon]="'heroicons_outline:x'"></mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Panel links -->
|
||||
<div class="flex flex-col divide-y border-t border-b">
|
||||
<ng-container *ngFor="let panel of panels; trackBy: trackByFn">
|
||||
<div
|
||||
class="flex px-8 py-5 cursor-pointer"
|
||||
[ngClass]="{
|
||||
'hover:bg-gray-100 dark:hover:bg-hover':
|
||||
!selectedPanel || selectedPanel !== panel.id,
|
||||
'bg-primary-50 dark:bg-hover':
|
||||
selectedPanel && selectedPanel === panel.id
|
||||
}"
|
||||
(click)="goToPanel(panel.id)"
|
||||
>
|
||||
<mat-icon
|
||||
[ngClass]="{
|
||||
'text-hint': !selectedPanel || selectedPanel !== panel.id,
|
||||
'text-primary dark:text-primary-500':
|
||||
selectedPanel && selectedPanel === panel.id
|
||||
}"
|
||||
[svgIcon]="panel.icon"
|
||||
></mat-icon>
|
||||
<div class="ml-3">
|
||||
<div
|
||||
class="font-medium leading-6"
|
||||
[ngClass]="{
|
||||
'text-primary dark:text-primary-500':
|
||||
selectedPanel && selectedPanel === panel.id
|
||||
}"
|
||||
>
|
||||
{{ panel.title }}
|
||||
</div>
|
||||
<div class="mt-0.5 text-secondary">
|
||||
{{ panel.description }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</mat-drawer>
|
||||
|
||||
<!-- Drawer content -->
|
||||
<mat-drawer-content class="flex flex-col">
|
||||
<form class="flex flex-col w-full" [formGroup]="memberViewForm">
|
||||
<!-- Main -->
|
||||
<div class="flex-auto px-6 pt-9 pb-12 md:p-8 md:pb-12 lg:p-12">
|
||||
<!-- Panel header -->
|
||||
<div class="flex items-center">
|
||||
<!-- Drawer toggle -->
|
||||
<button
|
||||
class="lg:hidden -ml-2"
|
||||
mat-icon-button
|
||||
(click)="drawer.toggle()"
|
||||
>
|
||||
<mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
|
||||
</button>
|
||||
|
||||
<!-- Panel title -->
|
||||
<div
|
||||
class="ml-2 lg:ml-0 text-3xl font-bold tracking-tight leading-none"
|
||||
>
|
||||
{{ getPanelInfo(selectedPanel).title }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="shadow-lg overflow-hidden">
|
||||
<div class="flex border-b">
|
||||
<!-- Selected product form -->
|
||||
<form class="flex flex-col w-full" [formGroup]="memberViewForm">
|
||||
<div class="flex flex-col sm:flex-row p-8">
|
||||
<!-- Product images and status -->
|
||||
|
||||
<div class="flex flex-auto flex-wrap">
|
||||
<!-- Name, SKU & etc. -->
|
||||
<div class="flex flex-col w-full lg:w-3/4 sm:pl-8">
|
||||
<!-- Name -->
|
||||
<!-- Load settings panel -->
|
||||
<div class="mt-8">
|
||||
<ng-container [ngSwitch]="selectedPanel">
|
||||
<!-- Account -->
|
||||
<ng-container *ngSwitchCase="'account'">
|
||||
<div class="flex">
|
||||
<mat-form-field class="w-1/3 pr-2">
|
||||
<mat-label>아이디</mat-label>
|
||||
|
|
@ -133,8 +183,6 @@
|
|||
/>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<!-- SKU and Barcode -->
|
||||
<div class="flex">
|
||||
<mat-form-field class="w-1/3 pr-2">
|
||||
<mat-label>닉네임</mat-label>
|
||||
|
|
@ -161,8 +209,6 @@
|
|||
/>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<!-- Category, Brand & Vendor -->
|
||||
<div class="flex">
|
||||
<mat-form-field class="w-1/3 pr-2">
|
||||
<mat-label>레벨</mat-label>
|
||||
|
|
@ -183,9 +229,7 @@
|
|||
<mat-label>상태</mat-label>
|
||||
<mat-select id="state" [formControlName]="'state'">
|
||||
<!-- <ng-container *ngFor="let brand of brands"> -->
|
||||
<mat-option value="brand.id">
|
||||
brand option
|
||||
</mat-option>
|
||||
<mat-option value="brand.id"> brand option </mat-option>
|
||||
<!-- </ng-container> -->
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
|
@ -193,15 +237,11 @@
|
|||
<mat-label>환전금지</mat-label>
|
||||
<mat-select [formControlName]="'isExcahngeMoney'">
|
||||
<!-- <ng-container *ngFor="let vendor of vendors"> -->
|
||||
<mat-option value="vendor.id">
|
||||
vendor option
|
||||
</mat-option>
|
||||
<mat-option value="vendor.id"> vendor option </mat-option>
|
||||
<!-- </ng-container> -->
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<!-- Stock and Reserved -->
|
||||
<div class="flex">
|
||||
<mat-form-field class="w-1/3 pr-2">
|
||||
<mat-label>은행명</mat-label>
|
||||
|
|
@ -245,6 +285,13 @@
|
|||
/>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<mat-form-field class="w-full fuse-mat-textarea">
|
||||
<mat-label>메모</mat-label>
|
||||
<textarea matInput name="memo" row="5"></textarea>
|
||||
</mat-form-field>
|
||||
</ng-container>
|
||||
<!-- Security -->
|
||||
<ng-container *ngSwitchCase="'security'">
|
||||
<div class="flex">
|
||||
<mat-form-field class="w-1/3 pr-2">
|
||||
<mat-label>콤프</mat-label>
|
||||
|
|
@ -289,8 +336,8 @@
|
|||
</mat-option>
|
||||
</mat-select>
|
||||
<!-- <mat-error *ngIf="composeForm.get('siteId')?.hasError('required')">
|
||||
사이트명은 필수 입력입니다.
|
||||
</mat-error> -->
|
||||
사이트명은 필수 입력입니다.
|
||||
</mat-error> -->
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="w-1/3 pr-2">
|
||||
|
|
@ -302,6 +349,9 @@
|
|||
/>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</ng-container>
|
||||
<!-- Plan & Billing -->
|
||||
<ng-container *ngSwitchCase="'plan-billing'">
|
||||
<div class="flex">
|
||||
<mat-form-field class="w-1/3 pr-2">
|
||||
<mat-label>바카라 요율</mat-label>
|
||||
|
|
@ -340,11 +390,7 @@
|
|||
<div class="flex">
|
||||
<mat-form-field class="w-1/3 pr-2">
|
||||
<mat-label>기타 게임 요율</mat-label>
|
||||
<input
|
||||
type="text"
|
||||
matInput
|
||||
[formControlName]="'etcRate'"
|
||||
/>
|
||||
<input type="text" matInput [formControlName]="'etcRate'" />
|
||||
<div class="mt-1 text-md text-hint">
|
||||
%(최소 0 ~ 최대 0.2)
|
||||
</div>
|
||||
|
|
@ -427,21 +473,10 @@
|
|||
<mat-label>/ 0원(이전일: 0원)</mat-label>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cost, Base price, Tax & Price -->
|
||||
<div class="flex flex-col w-full lg:w-1/4 sm:pl-8">
|
||||
<mat-form-field class="w-full fuse-mat-textarea">
|
||||
<mat-label>메모</mat-label>
|
||||
<textarea matInput name="memo" row="5"></textarea>
|
||||
</mat-form-field>
|
||||
<div
|
||||
class="flex flex-col flex-auto items-center bg-card shadow rounded-2xl overflow-hidden"
|
||||
>
|
||||
<!-- Avatar & Info -->
|
||||
<div
|
||||
class="flex flex-col flex-auto w-full p-8 text-center"
|
||||
>
|
||||
</ng-container>
|
||||
<!-- Notifications -->
|
||||
<ng-container *ngSwitchCase="'notifications'">
|
||||
<div class="flex flex-col flex-auto w-full p-8 text-center">
|
||||
<mat-form-field class="">
|
||||
<mat-label>게임중머니</mat-label>
|
||||
<input
|
||||
|
|
@ -460,7 +495,6 @@
|
|||
게임머니확인
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-semibold mb-2">파트너수동지급</span>
|
||||
<mat-radio-group
|
||||
|
|
@ -479,54 +513,15 @@
|
|||
</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex items-center justify-between w-full border-t px-8 py-4"
|
||||
>
|
||||
<button class="-ml-4" mat-button [color]="'primary'">
|
||||
목록으로
|
||||
</button>
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center mr-4" *ngIf="true">
|
||||
<ng-container *ngIf="true">
|
||||
<mat-icon
|
||||
class="text-green-500"
|
||||
[svgIcon]="'heroicons_outline:check'"
|
||||
></mat-icon>
|
||||
<span class="ml-2">Product updated</span>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="false">
|
||||
<mat-icon
|
||||
class="text-red-500"
|
||||
[svgIcon]="'heroicons_outline:x'"
|
||||
></mat-icon>
|
||||
<span class="ml-2">An error occurred, try again!</span>
|
||||
<!-- Team -->
|
||||
<ng-container *ngSwitchCase="'team'">
|
||||
<div>내역</div>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</div>
|
||||
<button
|
||||
mat-flat-button
|
||||
[color]="'primary'"
|
||||
(click)="__modifyMember()"
|
||||
>
|
||||
수정하기
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div>
|
||||
<div>충전내역</div>
|
||||
<div>환전내역</div>
|
||||
<div>웹로그인정보</div>
|
||||
<div>파트너로그인정보</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-drawer-content>
|
||||
</mat-drawer-container>
|
||||
</div>
|
||||
|
||||
<!-- <deposit-list></deposit-list> -->
|
||||
|
|
|
|||
|
|
@ -41,6 +41,9 @@ 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';
|
||||
|
||||
@Component({
|
||||
selector: 'user-view',
|
||||
|
|
@ -73,12 +76,19 @@ 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();
|
||||
memberViewForm!: FormGroup;
|
||||
/* selectedUser?: User; */
|
||||
selectedUser?: MemberModel;
|
||||
|
||||
panels: any[] = [];
|
||||
selectedPanel: string = 'account';
|
||||
|
||||
memberLevels!: MemberLevel[];
|
||||
banks!: Bank[];
|
||||
sites!: Site[];
|
||||
|
|
@ -92,6 +102,7 @@ export class ViewComponent implements OnInit, AfterViewInit, OnDestroy {
|
|||
private _activatedRoute: ActivatedRoute,
|
||||
private _changeDetectorRef: ChangeDetectorRef,
|
||||
private _fuseConfirmationService: FuseConfirmationService,
|
||||
private _fuseMediaWatcherService: FuseMediaWatcherService,
|
||||
private _formBuilder: FormBuilder,
|
||||
private _userService: UserService,
|
||||
private _memberService: MemberService,
|
||||
|
|
@ -118,7 +129,7 @@ export class ViewComponent implements OnInit, AfterViewInit, OnDestroy {
|
|||
nickname: [{ value: '', disabled: true }],
|
||||
ownCash: [''],
|
||||
mobilePhoneNumber: [''],
|
||||
level: [''],
|
||||
levelId: [''],
|
||||
state: [''],
|
||||
isExcahngeMoney: [''],
|
||||
bankId: [''],
|
||||
|
|
@ -140,21 +151,50 @@ export class ViewComponent implements OnInit, AfterViewInit, OnDestroy {
|
|||
slotRusingRate: [],
|
||||
});
|
||||
|
||||
// Get the User
|
||||
/* this._userService.user$
|
||||
.pipe(takeUntil(this._unsubscribeAll))
|
||||
.subscribe((user: User | undefined) => {
|
||||
if (!user) {
|
||||
return;
|
||||
}
|
||||
this.selectedUser = user;
|
||||
this.panels = [
|
||||
{
|
||||
id: 'account',
|
||||
icon: 'heroicons_outline:user-circle',
|
||||
title: '기본정보',
|
||||
description: 'Manage your public profile and private information',
|
||||
},
|
||||
{
|
||||
id: 'security',
|
||||
icon: 'heroicons_outline:lock-closed',
|
||||
title: '정산설정',
|
||||
description: 'Manage your password and 2-step verification preferences',
|
||||
},
|
||||
{
|
||||
id: 'plan-billing',
|
||||
icon: 'heroicons_outline:credit-card',
|
||||
title: '게임설정',
|
||||
description:
|
||||
'Manage your subscription plan, payment method and billing information',
|
||||
},
|
||||
{
|
||||
id: 'notifications',
|
||||
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;
|
||||
}
|
||||
|
||||
this.memberViewForm.patchValue(user);
|
||||
// Mark for check
|
||||
this._changeDetectorRef.markForCheck();
|
||||
}); */
|
||||
|
||||
/* this.user$ = this._userService.user$; */
|
||||
});
|
||||
|
||||
this._siteService
|
||||
.listSites()
|
||||
|
|
@ -244,4 +284,37 @@ export class ViewComponent implements OnInit, AfterViewInit, OnDestroy {
|
|||
valueForm.mobilePhoneNumber
|
||||
); */
|
||||
}
|
||||
|
||||
/**
|
||||
* 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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,6 +21,8 @@ import { MatDialogModule } from '@angular/material/dialog';
|
|||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatDatepickerModule } from '@angular/material/datepicker';
|
||||
import { MatMomentDateModule } from '@angular/material-moment-adapter';
|
||||
import { MatTabsModule } from '@angular/material/tabs';
|
||||
import { MatSidenavModule } from '@angular/material/sidenav';
|
||||
|
||||
import { FuseCardModule } from '@fuse/components/card';
|
||||
|
||||
|
|
@ -60,6 +62,8 @@ import { userRoutes } from 'app/modules/admin/member/user/user.routing';
|
|||
MatCardModule,
|
||||
MatDatepickerModule,
|
||||
MatMomentDateModule,
|
||||
MatTabsModule,
|
||||
MatSidenavModule,
|
||||
|
||||
FuseCardModule,
|
||||
],
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user