-
-
-
-
-
-
-
+
+
-
-
+
+
+
+
-
-
-
-
-
-
충전내역
-
환전내역
-
웹로그인정보
-
파트너로그인정보
-
+
+
+
+
-
+
+
+
+
+
+
+
+ {{ panel.title }}
+
+
+ {{ panel.description }}
+
+
+
+
+
-
+
+
+
+
+
+
diff --git a/src/app/modules/admin/member/user/components/view.component.ts b/src/app/modules/admin/member/user/components/view.component.ts
index 3062d65..ce442f8 100644
--- a/src/app/modules/admin/member/user/components/view.component.ts
+++ b/src/app/modules/admin/member/user/components/view.component.ts
@@ -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;
+ }
}
diff --git a/src/app/modules/admin/member/user/user.module.ts b/src/app/modules/admin/member/user/user.module.ts
index 7c32e8a..413deed 100644
--- a/src/app/modules/admin/member/user/user.module.ts
+++ b/src/app/modules/admin/member/user/user.module.ts
@@ -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,
],