From ffda32c5e881508e47458ca26209374a280461f8 Mon Sep 17 00:00:00 2001
From: Park Byung Eun <geekdev@naver.com>
Date: Sun, 14 Aug 2022 07:22:47 +0000
Subject: [PATCH] bug fix

---
 .../components/list.component.html            | 440 +++++++++++-------
 .../current-user/components/list.component.ts |  26 +-
 2 files changed, 302 insertions(+), 164 deletions(-)

diff --git a/src/app/modules/admin/member/current-user/components/list.component.html b/src/app/modules/admin/member/current-user/components/list.component.html
index 5e411f9..d34a095 100644
--- a/src/app/modules/admin/member/current-user/components/list.component.html
+++ b/src/app/modules/admin/member/current-user/components/list.component.html
@@ -1,174 +1,296 @@
+<!-- <div>
+  <div
+    class="sm:col-span-6 flex flex-col flex-auto p-6 bg-card shadow rounded-2xl overflow-hidden"
+  >
+    <div class="text-lg font-medium tracking-tight leading-6 truncate">
+      현재 접속자 & 전체회원 쪽지보내기
+    </div>
+    <div class="flex flex-col flex-auto">
+      <form
+        [formGroup]="targetForm"
+        autocomplete="off"
+        class="flex flex-col flex-auto p-6 sm:p-8 overflow-y-auto"
+      >
+        <mat-card>
+          <mat-card-content>
+            <div>
+              <span class="font-semibold mb-2">구분</span>
+              <mat-radio-group
+                class="flex flex-col w-1/3 pr-2"
+                [color]="'primary'"
+                [value]="'b'"
+              >
+                <mat-radio-button class="mb-2" [value]="'a'">
+                  전체
+                </mat-radio-button>
+                <mat-radio-button class="mb-2" [value]="'b'">
+                  현재접속자
+                </mat-radio-button>
+                <mat-radio-button [value]="'c'"> 본사 </mat-radio-button>
+                <mat-radio-button [value]="'d'"> 대본 </mat-radio-button>
+                <mat-radio-button [value]="'e'"> 부본 </mat-radio-button>
+                <mat-radio-button [value]="'f'"> 총판 </mat-radio-button>
+                <mat-radio-button [value]="'g'"> 매장 </mat-radio-button>
+                <mat-radio-button [value]="'h'"> 회원 </mat-radio-button>
+              </mat-radio-group>
+            </div>
+            <div>
+              <span class="font-semibold mb-2">대본아이디</span>
+              <mat-radio-group
+                class="flex flex-col w-1/3 pr-2"
+                [color]="'primary'"
+                [value]="'i'"
+              >
+                <mat-radio-button class="mb-2" [value]="'i'">
+                  대본하부회원
+                </mat-radio-button>
+              </mat-radio-group>
+              <mat-form-field
+                fxFlex
+                class="bet-mat-form-field-wrapper-mb-0 mr-2"
+              >
+                <mat-select placeholder="선택">
+                  <mat-option value="">선택</mat-option>
+                  <mat-option value="">kgon2</mat-option>
+                  <mat-option value="">bbc100</mat-option>
+                  <mat-option value="">test00</mat-option>
+                  <mat-option value="">qwer11</mat-option>
+                  <mat-option value="">zxcv123</mat-option>
+                  <mat-option value="">on01</mat-option>
+                </mat-select>
+              </mat-form-field>
+            </div>
+            <div>
+              <span class="font-semibold mb-2">부본아이디</span>
+              <mat-radio-group
+                class="flex flex-col w-1/3 pr-2"
+                [color]="'primary'"
+                [value]="'j'"
+              >
+                <mat-radio-button class="mb-2" [value]="'j'">
+                  부본하부회원
+                </mat-radio-button>
+              </mat-radio-group>
+              <mat-form-field
+                fxFlex
+                class="bet-mat-form-field-wrapper-mb-0 mr-2"
+              >
+                <mat-select placeholder="선택">
+                  <mat-option value="">선택</mat-option>
+                  <mat-option value="">kgon3</mat-option>
+                  <mat-option value="">test33</mat-option>
+                  <mat-option value="">aa2315</mat-option>
+                  <mat-option value="">test770</mat-option>
+                  <mat-option value="">zxcv12</mat-option>
+                  <mat-option value="">on02</mat-option>
+                </mat-select>
+              </mat-form-field>
+            </div>
+            <div class="flex">
+              <mat-form-field class="w-1/3 pr-2">
+                <mat-label>제목</mat-label>
+                <input matInput />
+              </mat-form-field>
+            </div>
+            <div class="mt-8">
+              <mat-form-field
+                class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full"
+              >
+                <mat-label>글쓴이</mat-label>
+                <input matInput [formControlName]="'writer'" />
+              </mat-form-field>
+            </div>
+            <mat-form-field
+              class="mt-8 fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full"
+            >
+              <textarea
+                matInput
+                [required]="true"
+                [rows]="5"
+                matTextareaAutosize
+                [formControlName]="'content'"
+              ></textarea>
+              <mat-label>내용</mat-label>
+            </mat-form-field>
+          </mat-card-content>
+          <div>
+            <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
+              쪽지보내기
+            </button>
+          </div>
+          <div>
+            <button mat-flat-button class="bet-mat-small-8" [color]="'warn'">
+              취소
+            </button>
+          </div>
+        </mat-card>
+      </form>
+    </div>
+  </div>
+</div> -->
+
 <div class="flex flex-col flex-auto min-w-0">
   <div class="flex-auto border-t -mt-px pt-4 sm:pt-6">
     <div class="w-full max-w-screen-xl mx-auto">
       <div class="grid grid-cols-1 sm:grid-cols-6 gap-6 w-full min-w-0">
+        <!-- Budget distribution -->
         <div
           class="sm:col-span-6 flex flex-col flex-auto p-6 bg-card shadow rounded-2xl overflow-hidden"
         >
-          <!-- 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>
-            <!-- Title -->
-            <div class="text-4xl font-extrabold tracking-tight">
-              현재접속자&쪽지전송
-            </div>
+          <div class="text-lg font-medium tracking-tight leading-6 truncate">
+            현재접속자&쪽지전송
           </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 class="flex flex-col flex-auto mt-2 overflow-x-auto">
+            <table
+              class="min-w-240 overflow-y-visible"
+              mat-table
+              [dataSource]="currentUserDataSource"
             >
-              <ng-container *ngIf="currentUsers$ | async as currentUsers">
-                <ng-container
-                  *ngIf="currentUsers.length > 0; else noCurrentUser"
-                >
-                  <div class="grid">
-                    <!-- Header -->
-                    <div
-                      class="current-user-grid z-10 sticky top-0 grid gap-4 py-4 px-6 md:px-8 shadow text-md font-semibold text-secondary bg-gray-50 dark:bg-black dark:bg-opacity-5"
-                    >
-                      <div>번호</div>
-                      <div>상부</div>
-                      <div>
-                        아이디
-                        <hr style="margin: 7px 0px" />
-                        닉네임
-                      </div>
-                      <div>
-                        등급
-                        <hr style="margin: 7px 0px" />
-                        레벨
-                      </div>
-                      <div>현재위치</div>
-                      <div class="hidden md:block">보유금</div>
-                      <div class="hidden md:block">
-                        게임중머니
-                        <hr style="margin: 7px 0px" />
-                        콤프
-                      </div>
-                      <div class="hidden md:block">사이트</div>
-                      <div class="hidden md:block">카지노->캐쉬</div>
-                      <div class="hidden lg:block">쪽지보내기</div>
-                      <div class="hidden lg:block">배팅내역</div>
-                      <div class="hidden lg:block">로그아웃</div>
-                    </div>
-                    <!-- Rows -->
-                    <ng-container *ngIf="currentUsers$ | async as currentUsers">
-                      <ng-container
-                        *ngFor="
-                          let currentUser of currentUsers;
-                          trackBy: __trackByFn
-                        "
-                      >
-                        <div
-                          class="current-user-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
-                        >
-                          <div>{{ currentUser.idx }}</div>
-                          <div>{{ currentUser.highRank }}</div>
-                          <div>
-                            <div>
-                              {{ currentUser.signinId }}
-                            </div>
-                            <hr style="margin: 7px 0px" />
-                            {{ currentUser.nickname }}
-                            <hr style="margin: 7px 0px" />
-                            {{ currentUser.currentLocation }}
-                          </div>
-                          <div>
-                            {{ currentUser.rank }}
-                            <hr style="margin: 7px 0px" />
-                            {{ currentUser.level }}
-                          </div>
-                          <div>{{ currentUser.currentLocation }}</div>
-                          <div class="hidden md:block">
-                            {{ currentUser.ownCash }}
-                            <hr style="margin: 7px 0px" />
-                            {{ currentUser.ownComp }}
-                          </div>
-                          <div class="hidden md:block">
-                            {{ currentUser.gameMoney }}
-                            <hr style="margin: 7px 0px" />
-                            {{ currentUser.ownComp }}
-                          </div>
-                          <div class="hidden md:block">
-                            {{ currentUser.siteAddress }}
-                          </div>
-                          <div class="hidden md:block">
-                            <button
-                              mat-flat-button
-                              class="bet-mat-small-8"
-                              [color]="'primary'"
-                            >
-                              게임머니확인
-                            </button>
-                            <hr style="margin: 7px 0px" />
-                            <button
-                              mat-flat-button
-                              class="bet-mat-small-8"
-                              [color]="'primary'"
-                            >
-                              게임머니회수
-                            </button>
-                          </div>
-                          <div class="hidden lg:block">
-                            <button
-                              mat-flat-button
-                              class="bet-mat-small-8"
-                              [color]="'primary'"
-                            >
-                              <mat-icon svgIcon="email-outline"></mat-icon>
-                            </button>
-                          </div>
-                          <div class="hidden lg:block">
-                            <button
-                              mat-flat-button
-                              class="bet-mat-small-8"
-                              [color]="'primary'"
-                            >
-                              배팅내역
-                            </button>
-                          </div>
-                          <div class="hidden lg:block">
-                            <button
-                              mat-flat-button
-                              class="bet-mat-small-8"
-                              [color]="'primary'"
-                            >
-                              로그아웃
-                            </button>
-                          </div>
-                        </div>
-                      </ng-container>
-                    </ng-container>
-                  </div>
-
-                  <mat-paginator
-                    class="sm:absolute sm:inset-x-0 sm:bottom-0 border-b sm:border-t sm:border-b-0 z-10 bg-gray-50 dark:bg-transparent"
-                    [ngClass]="{ 'pointer-events-none': isLoading }"
-                    [length]="pagination?.length"
-                    [pageIndex]="pagination?.page"
-                    [pageSize]="pagination?.size"
-                    [pageSizeOptions]="[5, 10, 25, 100]"
-                    [showFirstLastButtons]="true"
-                  ></mat-paginator>
-                </ng-container>
+              <!-- Total -->
+              <ng-container matColumnDef="idx">
+                <th mat-header-cell *matHeaderCellDef>번호</th>
+                <td mat-cell *matCellDef="let info">
+                  <span class="font-medium text-right"> {{ info.idx }} </span>
+                </td>
               </ng-container>
 
-              <ng-template #noCurrentUser>
-                <div
-                  class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
-                >
-                  There are no data!
-                </div>
-              </ng-template>
-            </div>
+              <!-- Expenses amount -->
+              <ng-container matColumnDef="highRank">
+                <th mat-header-cell *matHeaderCellDef>상위</th>
+
+                <td mat-cell *matCellDef="let info">{{ info.highRank }}</td>
+              </ng-container>
+
+              <ng-container matColumnDef="signinId">
+                <th mat-header-cell *matHeaderCellDef>
+                  아이디
+                  <hr style="margin: 7px 0px" />
+                  닉네임
+                </th>
+                <td mat-cell *matCellDef="let info">
+                  {{ info.signinId }}
+                  <hr style="margin: 7px 0px" />
+                  {{ info.nickname }}
+                </td>
+              </ng-container>
+
+              <!-- Expenses amount -->
+              <ng-container matColumnDef="level">
+                <th mat-header-cell *matHeaderCellDef>
+                  등급
+                  <hr style="margin: 7px 0px" />
+                  레벨
+                  <hr style="margin: 7px 0px" />
+                  현재위치
+                </th>
+                <td mat-cell *matCellDef="let info">
+                  {{ info.rank }}
+                  <hr style="margin: 7px 0px" />
+                  {{ info.level }}
+                  <hr style="margin: 7px 0px" />
+                  {{ info.currentLocation }}
+                </td>
+              </ng-container>
+
+              <!-- Expenses amount -->
+              <ng-container matColumnDef="ownCash">
+                <th mat-header-cell *matHeaderCellDef>캐쉬</th>
+                <td mat-cell *matCellDef="let info">{{ info.ownCash }}</td>
+              </ng-container>
+
+              <!-- Expenses amount -->
+              <ng-container matColumnDef="comp">
+                <th mat-header-cell *matHeaderCellDef>
+                  게임중머니
+                  <hr style="margin: 7px 0px" />
+                  콤프
+                </th>
+                <td mat-cell *matCellDef="let info">
+                  {{ info.gameMoney }}
+                  <hr style="margin: 7px 0px" />
+                  {{ info.ownComp }}
+                </td>
+              </ng-container>
+
+              <!-- Expenses amount -->
+              <ng-container matColumnDef="site">
+                <th mat-header-cell *matHeaderCellDef>사이트</th>
+                <td mat-cell *matCellDef="let info">{{ info.siteAddress }}</td>
+              </ng-container>
+
+              <!-- Expenses amount -->
+              <ng-container matColumnDef="casino">
+                <th mat-header-cell *matHeaderCellDef>카지노->캐쉬</th>
+                <td mat-cell *matCellDef="let info">
+                  <button
+                    mat-flat-button
+                    class="bet-mat-small-8"
+                    [color]="'primary'"
+                  >
+                    게임머니확인
+                  </button>
+                  <hr style="margin: 7px 0px" />
+                  <button
+                    mat-flat-button
+                    class="bet-mat-small-8"
+                    [color]="'primary'"
+                  >
+                    게임머니회수
+                  </button>
+                </td>
+              </ng-container>
+
+              <!-- Expenses amount -->
+              <ng-container matColumnDef="etcBtn">
+                <th mat-header-cell *matHeaderCellDef>
+                  쪽지보내기
+                  <hr style="margin: 7px 0px" />
+                  배팅내역
+                  <hr style="margin: 7px 0px" />
+                  로그아웃
+                </th>
+                <td mat-cell *matCellDef="let basicSetting">
+                  <button
+                    mat-flat-button
+                    class="bet-mat-small-8"
+                    [color]="'primary'"
+                  >
+                    <mat-icon svgIcon="email-outline"> </mat-icon>
+                  </button>
+                  <hr style="margin: 7px 0px" />
+                  <button
+                    mat-flat-button
+                    class="bet-mat-small-8"
+                    [color]="'primary'"
+                  >
+                    배팅내역
+                  </button>
+                  <hr style="margin: 7px 0px" />
+                  <button
+                    mat-flat-button
+                    class="bet-mat-small-8"
+                    [color]="'primary'"
+                  >
+                    로그아웃
+                  </button>
+                </td>
+              </ng-container>
+
+              <tr
+                mat-header-row
+                *matHeaderRowDef="currentUserTableColumns"
+              ></tr>
+              <tr
+                mat-row
+                *matRowDef="let row; columns: currentUserTableColumns"
+              ></tr>
+            </table>
           </div>
+        </div>
+        <!-- Budget details -->
+        <div
+          class="sm:col-span-6 flex flex-col flex-auto p-6 bg-card shadow rounded-2xl overflow-hidden"
+        >
           <div>
             <div
               class="sm:col-span-6 flex flex-col flex-auto p-6 bg-card shadow rounded-2xl overflow-hidden"
diff --git a/src/app/modules/admin/member/current-user/components/list.component.ts b/src/app/modules/admin/member/current-user/components/list.component.ts
index 2444c16..466a6a6 100644
--- a/src/app/modules/admin/member/current-user/components/list.component.ts
+++ b/src/app/modules/admin/member/current-user/components/list.component.ts
@@ -43,21 +43,21 @@ import { Router } from '@angular/router';
     `
       .current-user-grid {
         /*                     번호  상부 아이디  등급  위치 */
-        grid-template-columns: 20px 40px auto 40px 140px;
+        grid-template-columns: 40px 40px auto 40px 140px;
 
         @screen sm {
           /*                     번호  상부 아이디  등급  위치 보유금 */
-          grid-template-columns: 20px 40px auto 40px 140px 140px;
+          grid-template-columns: 40px 40px auto 40px 140px 140px;
         }
 
         @screen md {
           /*                     번호  상부 아이디  등급  위치  보유금 게임중 사이트 */
-          grid-template-columns: 20px 40px auto 40px 140px 140px 140px 140px;
+          grid-template-columns: 40px 40px auto 40px 140px 140px 140px 140px;
         }
 
         @screen lg {
-          /*                     번호   상부  아이디 등급  위치  보유금  게임중 사이트 카지노 배팅  로그아웃 */
-          grid-template-columns: 20px 100px auto 40px 140px 140px 140px 140px 140px 140px 140px;
+          /*                     번호   상부  아이디 등급  캐시  게임중 사이트 카지노    배팅  */
+          grid-template-columns: 40px 100px auto 100px 100px 100px 140px 120px 120px;
         }
       }
     `,
@@ -70,6 +70,9 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
   @ViewChild(MatPaginator) private _paginator!: MatPaginator;
   @ViewChild(MatSort) private _sort!: MatSort;
 
+  currentUserDataSource: MatTableDataSource<CurrentUser> =
+    new MatTableDataSource();
+
   currentUsers$!: Observable<CurrentUser[] | undefined>;
   users$!: Observable<User[] | undefined>;
 
@@ -79,6 +82,18 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
   pagination?: CurrentUserPagination;
   targetForm!: FormGroup;
 
+  currentUserTableColumns: string[] = [
+    'idx',
+    'highRank',
+    'signinId',
+    'level',
+    'ownCash',
+    'comp',
+    'site',
+    'casino',
+    'etcBtn',
+  ];
+
   private _unsubscribeAll: Subject<any> = new Subject<any>();
 
   /**
@@ -122,6 +137,7 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
         if (!curUsers) {
           return;
         }
+        this.currentUserDataSource.data = curUsers;
 
         this.targetForm.patchValue(curUsers[0]);
         // Mark for check