사용자 상세화면 수정

src/app/modules/admin/member/user/components/view.component.html

@@ -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
+      <div class="flex items-center justify-between m-8 mr-6 sm:my-10">
-    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> -->
         <!-- Title -->
-    <div class="text-4xl font-extrabold tracking-tight">User View</div>
+        <div class="text font-extrabold tracking-tight leading-none">
-    <!-- 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="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>
+          <!-- Load settings panel -->
-        <div class="shadow-lg overflow-hidden">
+          <div class="mt-8">
-          <div class="flex border-b">
+            <ng-container [ngSwitch]="selectedPanel">
-            <!-- Selected product form -->
+              <!-- Account -->
-            <form class="flex flex-col w-full" [formGroup]="memberViewForm">
+              <ng-container *ngSwitchCase="'account'">
-              <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 -->
                 <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">
+                      <mat-option value="brand.id"> brand option </mat-option>
-                            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">
+                      <mat-option value="vendor.id"> vendor option </mat-option>
-                            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>
@@ -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
+                    <input type="text" matInput [formControlName]="'etcRate'" />
-                          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>
+              </ng-container>
-
+              <!-- Notifications -->
-                  <!-- Cost, Base price, Tax & Price -->
+              <ng-container *ngSwitchCase="'notifications'">
-                  <div class="flex flex-col w-full lg:w-1/4 sm:pl-8">
+                <div class="flex flex-col flex-auto w-full p-8 text-center">
-                    <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"
-                      >
                   <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">
+              <!-- Team -->
-                      <mat-icon
+              <ng-container *ngSwitchCase="'team'">
-                        class="text-red-500"
+                <div>내역</div>
-                        [svgIcon]="'heroicons_outline:x'"
+              </ng-container>
-                      ></mat-icon>
-                      <span class="ml-2">An error occurred, try again!</span>
             </ng-container>
-                  </div>
-                  <button
-                    mat-flat-button
-                    [color]="'primary'"
-                    (click)="__modifyMember()"
-                  >
-                    수정하기
-                  </button>
           </div>
         </div>
       </form>
+    </mat-drawer-content>
+  </mat-drawer-container>
 </div>
-          <div>
-            <div>충전내역</div>
-            <div>환전내역</div>
-            <div>웹로그인정보</div>
-            <div>파트너로그인정보</div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-<!-- <deposit-list></deposit-list> -->

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.panels = [
-    /* this._userService.user$
+      {
-      .pipe(takeUntil(this._unsubscribeAll))
+        id: 'account',
-      .subscribe((user: User | undefined) => {
+        icon: 'heroicons_outline:user-circle',
-        if (!user) {
+        title: '기본정보',
-          return;
+        description: 'Manage your public profile and private information',
-        }
+      },
-        this.selectedUser = user;
+      {
+        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;
+  }
 }

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,
   ],