Merge branch 'feature/BETERAN-BACKEND-APP-BROWSER-init' of https://gitlab.loafle.net/bet/beteran-backend-app-browser into feature/BETERAN-BACKEND-APP-BROWSER-init

src/app/mock-api/apps/member/current-user/api.ts

@@ -42,7 +42,7 @@ export class MemberCurrentUserMockApi {
         let currentUsers: any[] | null = cloneDeep(this._currentUsers);
 
         // Sort the currentUsers
-        if (sort === 'sku' || sort === 'name' || sort === 'active') {
+        if (sort === 'id' || sort === 'signinId' || sort === 'nickname') {
           currentUsers.sort((a, b) => {
             const fieldA = a[sort].toString().toUpperCase();
             const fieldB = b[sort].toString().toUpperCase();

src/app/mock-api/apps/member/current-user/data.ts

@@ -2,7 +2,47 @@
 
 export const currentUsers = [
   {
-    id: 'aa100',
+    id: '2bfa2be5-7688-48d5-b5ac-dc0d9ac97f14',
+    signinId: 'kgon01',
+    highRank: '[매장]kgon5',
+    rank: '회원',
+    level: 4,
+    nickname: 'aa100',
+    currentLocation: '메인',
+    cash: 0,
+    comp: 3111,
+    gameMoney: 0,
+    siteAddress: 'web4nova114.com',
+  },
+  {
+    id: '77a4383b-b5a5-4943-bc46-04c3431d1566',
+    signinId: 'kgon02',
+    highRank: '[매장]kgon5',
+    rank: '회원',
+    level: 4,
+    nickname: 'aa100',
+    currentLocation: '메인',
+    cash: 0,
+    comp: 3111,
+    gameMoney: 0,
+    siteAddress: 'web4nova114.com',
+  },
+  {
+    id: '8bb0f597-673a-47ca-8c77-2f83219cb9af',
+    signinId: 'kgon03',
+    highRank: '[매장]kgon5',
+    rank: '회원',
+    level: 4,
+    nickname: 'aa100',
+    currentLocation: '메인',
+    cash: 0,
+    comp: 3111,
+    gameMoney: 0,
+    siteAddress: 'web4nova114.com',
+  },
+  {
+    id: '0a8bc517-631a-4a93-aacc-000fa2e8294c',
+    signinId: 'kgon04',
     highRank: '[매장]kgon5',
     rank: '회원',
     level: 4,

src/app/mock-api/apps/member/unconnected/api.ts

@@ -42,7 +42,12 @@ export class MemberUnconnectedMockApi {
         let unconnecteds: any[] | null = cloneDeep(this._unconnecteds);
 
         // Sort the unconnecteds
-        if (sort === 'sku' || sort === 'name' || sort === 'active') {
+        if (
+          sort === 'id' ||
+          sort === 'signinId' ||
+          sort === 'nickname' ||
+          sort === 'state'
+        ) {
           unconnecteds.sort((a, b) => {
             const fieldA = a[sort].toString().toUpperCase();
             const fieldB = b[sort].toString().toUpperCase();

src/app/mock-api/apps/member/unconnected/data.ts

@@ -2,7 +2,7 @@
 
 export const unconnecteds = [
   {
-    id: 'on04',
+    id: '8fcce528-d878-4cc8-99f7-bd3451ed5402',
     category: 'b899ec30-b85a-40ab-bb1f-18a596d5c6de',
     name: 'Benton Mens Automatic Watch 44mm 5 ATM',
     description:

src/app/modules/admin/member/current-user/components/list.component copy.html

@@ -0,0 +1,212 @@
+<div
+  class="sm:absolute sm:inset-0 flex flex-col flex-auto min-w-0 sm:overflow-hidden bg-card dark:bg-transparent"
+>
+  <!-- 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>
+    <!-- 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"
+    >
+      <ng-container *ngIf="currentUsers$ | async as currentUsers">
+        <ng-container *ngIf="currentUsers.length > 0; else noCurrentUser">
+          <div class="grid">
+            <!-- Header -->
+            <div
+              class="inventory-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"
+              matSort
+              matSortDisableClear
+            >
+              <div></div>
+              <div class="hidden sm:block" [mat-sort-header]="'index'">
+                번호
+              </div>
+              <div class="hidden sm:block" [mat-sort-header]="'highRank'">
+                상위
+              </div>
+              <div class="hidden sm:block" [mat-sort-header]="'rank'">등급</div>
+              <div class="hidden sm:block" [mat-sort-header]="'level'">
+                레벨
+              </div>
+              <div class="hidden sm:block" [mat-sort-header]="'id'">아이디</div>
+              <div class="hidden sm:block" [mat-sort-header]="'nickname'">
+                닉네임
+              </div>
+              <div
+                class="hidden sm:block"
+                [mat-sort-header]="'currentLocation'"
+              >
+                현재위치
+              </div>
+              <div class="hidden sm:block" [mat-sort-header]="'cash'">캐쉬</div>
+              <div class="hidden sm:block" [mat-sort-header]="'gameMoney'">
+                게임중머니
+              </div>
+              <div class="hidden sm:block">카지노->캐쉬</div>
+              <div class="hidden sm:block" [mat-sort-header]="'comp'">콤프</div>
+              <div class="hidden sm:block" [mat-sort-header]="'siteAddress'">
+                사이트
+              </div>
+              <div class="hidden sm:block">쪽지보내기</div>
+              <div class="hidden sm:block">배팅내역</div>
+              <div class="hidden sm:block">로그아웃</div>
+            </div>
+            <!-- Rows -->
+            <ng-container *ngIf="currentUsers$ | async as currentUsers">
+              <ng-container
+                *ngFor="let currentUser of currentUsers; trackBy: __trackByFn"
+              >
+                <div
+                  class="inventory-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
+                >
+                  <!-- index -->
+                  <div class="hidden sm:block truncate">
+                    {{ currentUser.index }}
+                  </div>
+                  <!-- highRank -->
+                  <div class="hidden sm:block truncate">
+                    {{ currentUser.highRank }}
+                  </div>
+                  <!-- rank -->
+                  <div class="hidden sm:block truncate">
+                    {{ currentUser.rank }}
+                  </div>
+                  <!-- level -->
+                  <div class="hidden sm:block truncate">
+                    LV.{{ currentUser.level }}
+                  </div>
+                  <!-- id -->
+                  <div
+                    class="hidden sm:block truncate"
+                    (click)="viewUserDetail(currentUser.id!)"
+                  >
+                    {{ currentUser.id }}
+                  </div>
+                  <!-- nickname -->
+                  <div class="hidden sm:block truncate">
+                    {{ currentUser.nickname }}
+                  </div>
+
+                  <!-- currentLocation -->
+                  <div class="hidden sm:block truncate">
+                    {{ currentUser.currentLocation }}
+                  </div>
+                  <!-- cash -->
+                  <div class="hidden sm:block truncate">
+                    캐쉬{{ currentUser.cash }}
+                  </div>
+                  <!-- casinoCash -->
+                  <div class="hidden sm:block truncate">
+                    <button mat-flat-button [color]="'primary'">
+                      게임머니확인
+                    </button>
+                    <button mat-flat-button [color]="'primary'">
+                      게임머니회수
+                    </button>
+                  </div>
+                  <!-- comp -->
+                  <div class="hidden sm:block truncate">
+                    {{ currentUser.comp }}
+                  </div>
+                  <!-- site -->
+                  <div class="hidden sm:block truncate">
+                    {{ currentUser.siteAddress }}
+                  </div>
+
+                  <!-- message -->
+                  <div class="hidden sm:block truncate">
+                    <button mat-flat-button [color]="'primary'">
+                      <mat-icon svgIcon="heroicons_outline:mail"></mat-icon>
+                    </button>
+                  </div>
+
+                  <!-- bettinglist -->
+                  <div class="hidden sm:block truncate">
+                    <button mat-flat-button [color]="'primary'">
+                      배팅리스트
+                    </button>
+                  </div>
+                  <!-- logout -->
+                  <div class="hidden sm:block truncate">
+                    <button mat-flat-button [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>
+      </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 currentUser!
+        </div>
+      </ng-template>
+    </div>
+  </div>
+</div>
+
+<div>
+  <div class="flex flex-auto">
+    <mat-card>
+      <mat-card-header>
+        <span><b>현재 접속자 & 전체회원 쪽지보내기</b></span>
+      </mat-card-header>
+      <mat-card-content>
+        <!-- 구분 -->
+
+        <div class="flex">
+          <mat-form-field class="w-1/3 pr-2">
+            <mat-label>제목</mat-label>
+            <input matInput />
+          </mat-form-field>
+        </div>
+        <div class="flex">
+          <mat-form-field class="w-1/3 pr-2">
+            <mat-label>글쓴이</mat-label>
+            <input matInput placeholder="관리자" />
+          </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="flex">
+          <mat-form-field class="w-1/3 pr-2">
+            <input matInput />
+          </mat-form-field>
+        </div>
+      </mat-card-content>
+    </mat-card>
+  </div>
+</div>

src/app/modules/admin/member/current-user/components/list.component.html

@@ -1,136 +1,97 @@
-<div
+<div class="flex flex-col flex-auto min-w-0">
-  class="sm:absolute sm:inset-0 flex flex-col flex-auto min-w-0 sm:overflow-hidden bg-card dark:bg-transparent"
+  <div class="flex-auto border-t -mt-px pt-4 sm:pt-6">
->
+    <div class="w-full max-w-screen-xl mx-auto">
-  <!-- Header -->
+      <div class="grid grid-cols-1 sm:grid-cols-6 gap-6 w-full min-w-0">
+        <!-- Budget distribution -->
         <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"
+          class="sm:col-span-6 flex flex-col flex-auto p-6 bg-card shadow rounded-2xl overflow-hidden"
         >
-    <!-- Loader -->
+          <div class="text-lg font-medium tracking-tight leading-6 truncate">
-    <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>
-    <!-- Actions -->
+          <div class="flex flex-col flex-auto mt-2 overflow-x-auto">
-    <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
+            <table
-      <!-- Main -->
+              class="min-w-240 overflow-y-visible"
-      <div class="flex flex-auto overflow-hidden">
+              mat-table
-        <!-- Products list -->
+              [dataSource]="currentUserDataSource"
-        <div
-          class="flex flex-col flex-auto sm:mb-18 overflow-hidden sm:overflow-y-auto"
             >
-          <ng-container *ngIf="currentUsers$ | async as currentUsers">
+              <!-- Type -->
-            <ng-container *ngIf="currentUsers.length > 0; else noCurrentUser">
+              <ng-container matColumnDef="id" sticky>
-              <div class="grid">
+                <th mat-header-cell *matHeaderCellDef>번호</th>
-                <!-- Header -->
+                <td mat-cell *matCellDef="let user; let idx = index">
-                <div
+                  <span class="flex items-center">
-                  class="inventory-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"
+                    <span class="w-2 h-2 rounded-full"></span>
-                  matSort
+                    <span class="ml-3 leading-4">{{ idx + 1 }}</span>
-                  matSortDisableClear
+                  </span>
-                >
+                </td>
-                  <div></div>
+              </ng-container>
-                  <div class="hidden sm:block" [mat-sort-header]="'index'">
-                    번호
-                  </div>
-                  <div class="hidden sm:block" [mat-sort-header]="'highRank'">
-                    상위
-                  </div>
-                  <div class="hidden sm:block" [mat-sort-header]="'rank'">
-                    등급
-                  </div>
-                  <div class="hidden sm:block" [mat-sort-header]="'level'">
-                    레벨
-                  </div>
-                  <div class="hidden sm:block" [mat-sort-header]="'id'">
-                    아이디
-                  </div>
-                  <div class="hidden sm:block" [mat-sort-header]="'nickname'">
-                    닉네임
-                  </div>
-                  <div
-                    class="hidden sm:block"
-                    [mat-sort-header]="'currentLocation'"
-                  >
-                    현재위치
-                  </div>
-                  <div class="hidden sm:block" [mat-sort-header]="'cash'">
-                    캐쉬
-                  </div>
-                  <div class="hidden sm:block" [mat-sort-header]="'gameMoney'">
-                    게임중머니
-                  </div>
-                  <div class="hidden sm:block" [mat-sort-header]="''">
-                    카지노->캐쉬
-                  </div>
-                  <div class="hidden sm:block" [mat-sort-header]="'comp'">
-                    콤프
-                  </div>
-                  <div
-                    class="hidden sm:block"
-                    [mat-sort-header]="'siteAddress'"
-                  >
-                    사이트
-                  </div>
-                  <div class="hidden sm:block" [mat-sort-header]="''">
-                    쪽지보내기
-                  </div>
-                  <div class="hidden sm:block" [mat-sort-header]="''">
-                    배팅내역
-                  </div>
-                  <div class="hidden sm:block" [mat-sort-header]="''">
-                    로그아웃
-                  </div>
-                </div>
-                <!-- Rows -->
-                <ng-container *ngIf="currentUsers$ | async as currentUsers">
-                  <ng-container
-                    *ngFor="
-                      let currentUser of currentUsers;
-                      trackBy: __trackByFn
-                    "
-                  >
-                    <div
-                      class="inventory-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
-                    >
-                      <!-- index -->
-                      <div class="hidden sm:block truncate">
-                        {{ currentUser.index }}
-                      </div>
-                      <!-- highRank -->
-                      <div class="hidden sm:block truncate">
-                        {{ currentUser.highRank }}
-                      </div>
-                      <!-- rank -->
-                      <div class="hidden sm:block truncate">
-                        {{ currentUser.rank }}
-                      </div>
-                      <!-- level -->
-                      <div class="hidden sm:block truncate">
-                        LV.{{ currentUser.level }}
-                      </div>
-                      <!-- id -->
-                      <div
-                        class="hidden sm:block truncate"
-                        (click)="viewUserDetail(currentUser.id!)"
-                      >
-                        {{ currentUser.id }}
-                      </div>
-                      <!-- nickname -->
-                      <div class="hidden sm:block truncate">
-                        {{ currentUser.nickname }}
-                      </div>
 
-                      <!-- currentLocation -->
+              <!-- Total -->
-                      <div class="hidden sm:block truncate">
+              <ng-container matColumnDef="highRank">
-                        {{ currentUser.currentLocation }}
+                <th mat-header-cell *matHeaderCellDef>상위</th>
-                      </div>
+                <td mat-cell *matCellDef="let user">
-                      <!-- cash -->
+                  <span class="font-medium text-right">
-                      <div class="hidden sm:block truncate">
+                    {{ user.highRank }}
-                        캐쉬{{ currentUser.cash }}
+                  </span>
-                      </div>
+                </td>
-                      <!-- casinoCash -->
+              </ng-container>
+
+              <!-- Expenses amount -->
+              <ng-container matColumnDef="rank">
+                <th mat-header-cell *matHeaderCellDef>등급</th>
+                <td mat-cell *matCellDef="let user">
+                  {{ user.rank }}
+                </td>
+              </ng-container>
+
+              <!-- Expenses percentage -->
+              <ng-container matColumnDef="level">
+                <th mat-header-cell *matHeaderCellDef>레벨</th>
+                <td mat-cell *matCellDef="let user">
+                  {{ user.level }}
+                </td>
+              </ng-container>
+
+              <!-- Remaining amount -->
+              <ng-container matColumnDef="signinId">
+                <th mat-header-cell *matHeaderCellDef>아이디</th>
+                <td mat-cell *matCellDef="let user">
+                  {{ user.signinId }}
+                </td>
+              </ng-container>
+
+              <!-- Remaining percentage -->
+              <ng-container matColumnDef="nickname">
+                <th mat-header-cell *matHeaderCellDef>닉네임</th>
+                <td mat-cell *matCellDef="let user">
+                  {{ user.nickname }}
+                </td>
+              </ng-container>
+
+              <ng-container matColumnDef="currentLocation">
+                <th mat-header-cell *matHeaderCellDef>현재위치</th>
+                <td mat-cell *matCellDef="let user">
+                  {{ user.currentLocation }}
+                </td>
+              </ng-container>
+
+              <ng-container matColumnDef="cash">
+                <th mat-header-cell *matHeaderCellDef>캐쉬</th>
+                <td mat-cell *matCellDef="let user">
+                  {{ user.cash }}
+                </td>
+              </ng-container>
+
+              <ng-container matColumnDef="gameMoney">
+                <th mat-header-cell *matHeaderCellDef>게임중머니</th>
+                <td mat-cell *matCellDef="let user">
+                  {{ user.gameMoney }}
+                </td>
+              </ng-container>
+
+              <ng-container matColumnDef="casinoMoney">
+                <th mat-header-cell *matHeaderCellDef>카지노->캐쉬</th>
+                <td mat-cell *matCellDef="let user">
                   <div class="hidden sm:block truncate">
                     <button mat-flat-button [color]="'primary'">
                       게임머니확인
@@ -139,67 +100,72 @@
                       게임머니회수
                     </button>
                   </div>
-                      <!-- comp -->
+                </td>
-                      <div class="hidden sm:block truncate">
+              </ng-container>
-                        {{ currentUser.comp }}
-                      </div>
-                      <!-- site -->
-                      <div class="hidden sm:block truncate">
-                        {{ currentUser.siteAddress }}
-                      </div>
 
-                      <!-- message -->
+              <ng-container matColumnDef="comp">
+                <th mat-header-cell *matHeaderCellDef>콤프</th>
+                <td mat-cell *matCellDef="let user">
+                  {{ user.comp }}
+                </td>
+              </ng-container>
+              <ng-container matColumnDef="siteAddress">
+                <th mat-header-cell *matHeaderCellDef>사이트</th>
+                <td mat-cell *matCellDef="let user">
+                  {{ user.siteAddress }}
+                </td>
+              </ng-container>
+              <ng-container matColumnDef="sendMessageBtn">
+                <th mat-header-cell *matHeaderCellDef>쪽지보내기</th>
+                <td mat-cell *matCellDef="let user">
                   <div class="hidden sm:block truncate">
                     <button mat-flat-button [color]="'primary'">
-                          <mat-icon svgIcon="heroicons_outline:mail"></mat-icon>
+                      쪽지보내기
                     </button>
                   </div>
-
+                </td>
-                      <!-- bettinglist -->
+              </ng-container>
+              <ng-container matColumnDef="betHistoryBtn">
+                <th mat-header-cell *matHeaderCellDef>배팅내역</th>
+                <td mat-cell *matCellDef="let user">
                   <div class="hidden sm:block truncate">
                     <button mat-flat-button [color]="'primary'">
-                          배팅리스트
+                      배팅내역
                     </button>
                   </div>
-                      <!-- logout -->
+                </td>
+              </ng-container>
+              <ng-container matColumnDef="forceSignOutBtn">
+                <th mat-header-cell *matHeaderCellDef>로그아웃</th>
+                <td mat-cell *matCellDef="let user">
                   <div class="hidden sm:block truncate">
                     <button mat-flat-button [color]="'primary'">
                       로그아웃
                     </button>
                   </div>
-                    </div>
+                </td>
-                  </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>
               </ng-container>
 
-          <ng-template #noCurrentUser>
+              <tr
+                mat-header-row
+                *matHeaderRowDef="currentUserTableColumns"
+              ></tr>
+              <tr
+                mat-row
+                *matRowDef="let row; columns: currentUserTableColumns"
+              ></tr>
+            </table>
+          </div>
+        </div>
+        <!-- Budget details -->
         <div
-              class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
+          class="sm:col-span-6 flex flex-col flex-auto p-6 bg-card shadow rounded-2xl overflow-hidden"
         >
-              There are no currentUser!
+          <div class="text-lg font-medium tracking-tight leading-6 truncate">
+            현재 접속자 & 전체회원 쪽지보내기
           </div>
-          </ng-template>
+          <div class="flex flex-col flex-auto">
-        </div>
-      </div>
-    </div>
-  </div>
-  <div>
             <mat-card>
-      <mat-card-header>
-        <span><b>현재 접속자 & 전체회원 쪽지보내기</b></span>
-      </mat-card-header>
               <mat-card-content>
                 <!-- 구분 -->
 
@@ -229,4 +195,8 @@
               </mat-card-content>
             </mat-card>
           </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>

src/app/modules/admin/member/current-user/components/list.component.ts

@@ -14,7 +14,7 @@ import {
   FormGroup,
   Validators,
 } from '@angular/forms';
-import { MatCheckboxChange } from '@angular/material/checkbox';
+import { MatTableDataSource } from '@angular/material/table';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import {
@@ -69,6 +69,26 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
   currentUsers$!: Observable<CurrentUser[] | undefined>;
   users$!: Observable<User[] | undefined>;
 
+  currentUserDataSource: MatTableDataSource<any> = new MatTableDataSource();
+  currentUserTableColumns: string[] = [
+    'id',
+    'highRank',
+    'rank',
+    'level',
+    'signinId',
+    'nickname',
+    'currentLocation',
+    'cash',
+    'gameMoney',
+    'casinoMoney',
+    'comp',
+    'siteAddress',
+    'sendMessageBtn',
+    'betHistoryBtn',
+    'forceSignOutBtn',
+  ];
+
+  data: any;
   isLoading = false;
   searchInputControl = new FormControl();
   selectedCurrentUser?: CurrentUser;
@@ -107,7 +127,14 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
       });
 
     // Get the products
-    this.currentUsers$ = this._currentUserService.currentUsers$;
+    this._currentUserService.currentUsers$
+      .pipe(takeUntil(this._unsubscribeAll))
+      .subscribe((currentUsers: any | undefined) => {
+        this.currentUserDataSource = currentUsers;
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
+      });
+    /* this.currentUsers$ = this._currentUserService.currentUsers$; */
   }
 
   /**

src/app/modules/admin/member/current-user/current-user.module.ts

@@ -9,6 +9,9 @@ import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatRippleModule } from '@angular/material/core';
 import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatDividerModule } from '@angular/material/divider';
 import { MatSelectModule } from '@angular/material/select';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatGridListModule } from '@angular/material/grid-list';
@@ -38,6 +41,9 @@ import { currentUserRoutes } from './current-user.routing';
     MatProgressBarModule,
     MatRippleModule,
     MatSortModule,
+    MatTableModule,
+    MatMenuModule,
+    MatDividerModule,
     MatSelectModule,
     MatTooltipModule,
     MatGridListModule,

src/app/modules/admin/member/unconnected/components/list.component.html

@@ -76,7 +76,7 @@
 
                   <div
                     class="hidden sm:block truncate"
-                    (click)="viewUserDetail(unconnected.id!)"
+                    (click)="viewUserDetail(unconnected.id)"
                   >
                     {{ unconnected.id }}
                   </div>

src/app/modules/admin/member/unconnected/models/unconnected.ts

@@ -1,5 +1,5 @@
 export interface Unconnected {
-  id?: string;
+  id: string;
   nickname?: string;
   highRank?: string;
   rank?: string;