From d3c6f99041a7f3eddba7dbbd2c8908c195e382d8 Mon Sep 17 00:00:00 2001
From: Park Byung Eun <geekdev@naver.com>
Date: Tue, 26 Jul 2022 08:39:58 +0000
Subject: [PATCH] =?UTF-8?q?=EA=B3=A0=EA=B0=9D=EC=84=BC=ED=84=B0=20?=
 =?UTF-8?q?=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../customer/components/list.component.html   | 236 ++++++------------
 .../customer/components/list.component.ts     |  23 +-
 2 files changed, 98 insertions(+), 161 deletions(-)

diff --git a/src/app/modules/admin/board/customer/components/list.component.html b/src/app/modules/admin/board/customer/components/list.component.html
index f499d03..3e032c1 100644
--- a/src/app/modules/admin/board/customer/components/list.component.html
+++ b/src/app/modules/admin/board/customer/components/list.component.html
@@ -13,30 +13,23 @@
     <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">
-      <!-- Memo -->
-      <!-- <mat-form-field>
-        <ng-container *ngIf="customers$ | async as customers">
-          <ng-container
-            *ngFor="let customer of customers; trackBy: __trackByFn"
-          >
-            <div
-              class="inventory-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
-            >
-              <fieldset>
-                총 파트너수:{{ customer.totalPartnerCount }} 총 보유머니:{{
-                  customer.totalHoldingMoney
-                }}
-                총 콤프:{{ customer.totalComp }} 총 합계:{{
-                  customer.total
-                }}
-              </fieldset>
-            </div>
-          </ng-container>
-        </ng-container>
-      </mat-form-field> -->
+      <!-- Search -->
 
+      <button mat-icon-button (click)="__onClickSearch()">
+        <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
+      </button>
+    </div>
+  </div>
+
+  <!-- Search -->
+  <div
+    *ngIf="__isSearchOpened"
+    class="relative flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between py-4 px-6 md:px-8 border-b"
+  >
+    <!-- Actions -->
+    <div fxLayout="row wrap" class="items-center mt-6 sm:mt-0 sm:ml-0">
       <!-- SelectBox -->
-      <!-- <mat-form-field>
+      <mat-form-field fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
         <mat-select placeholder="리스트수">
           <mat-option value="40">40</mat-option>
           <mat-option value="60">60</mat-option>
@@ -44,7 +37,7 @@
           <mat-option value="100">100</mat-option>
         </mat-select>
       </mat-form-field>
-      <mat-form-field>
+      <mat-form-field fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
         <mat-select placeholder="레벨">
           <mat-option value="level1">LV.1</mat-option>
           <mat-option value="level2">LV.2</mat-option>
@@ -52,7 +45,7 @@
           <mat-option value="level4">LV.4</mat-option>
         </mat-select>
       </mat-form-field>
-      <mat-form-field>
+      <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="">대기</mat-option>
@@ -62,85 +55,16 @@
           <mat-option value="">정지</mat-option>
         </mat-select>
       </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="제한">
-          <mat-option value="">카지노제한</mat-option>
-          <mat-option value="">슬롯제한</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="입금">
-          <mat-option value="">계좌입금</mat-option>
-        </mat-select>
-      </mat-form-field> -->
-      <mat-form-field>
-        <mat-select placeholder="아이디">
-          <mat-option value="">아이디</mat-option>
-          <mat-option value="">작성자</mat-option>
-          <mat-option value="">글제목</mat-option>
-          <mat-option value="">글내용</mat-option>
-          <mat-option value="">사이트명</mat-option>
-          <mat-option value="">답변내용</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <!-- <mat-form-field>
-        <mat-select placeholder="입금">
-          <mat-option value="">계좌입금</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="아이디">
-          <mat-option value="">아이디</mat-option>
-          <mat-option value="">닉네임</mat-option>
-          <mat-option value="">이름</mat-option>
-          <mat-option value="">사이트</mat-option>
-          <mat-option value="">파트너수동지급</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="가입일 정렬">
-          <mat-option value="">가입일 정렬</mat-option>
-          <mat-option value="">아이디 정렬</mat-option>
-          <mat-option value="">닉네임 정렬</mat-option>
-          <mat-option value="">캐쉬 정렬</mat-option>
-          <mat-option value="">콤프 정렬</mat-option>
-          <mat-option value="">쿠폰 정렬</mat-option>
-          <mat-option value="">입금 정렬</mat-option>
-          <mat-option value="">출금 정렬</mat-option>
-          <mat-option value="">차익 정렬</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="내림차순">
-          <mat-option value="">내림차순</mat-option>
-          <mat-option value="">오름차순</mat-option>
-        </mat-select>
-      </mat-form-field> -->
-      <!-- Search -->
-      <mat-form-field
-        class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded min-w-64"
-      >
-        <mat-icon
-          class="icon-size-5"
-          matPrefix
-          [svgIcon]="'heroicons_solid:search'"
-        ></mat-icon>
-        <input
-          matInput
-          [formControl]="searchInputControl"
-          [autocomplete]="'off'"
-          [placeholder]="'Search'"
-        />
-      </mat-form-field>
-      <!-- Add user button -->
+      <!-- Search button -->
       <button
-        class="ml-4"
+        fxFlex
         mat-flat-button
+        style="position: fixed; margin-top: 4px"
         [color]="'primary'"
         (click)="__createProduct()"
       >
-        <!-- <mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon> -->
-        <span class="ml-2 mr-1">검색하기</span>
+        <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
+        <span class="ml-2 mr-1">Search</span>
       </button>
     </div>
   </div>
@@ -152,29 +76,42 @@
       class="flex flex-col flex-auto sm:mb-18 overflow-hidden sm:overflow-y-auto"
     >
       <ng-container *ngIf="customers$ | async as customers">
-        <ng-container *ngIf="customers.length > 0; else noCustomer">
+        <ng-container *ngIf="customers.length > 0; else noUser">
           <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 class="hidden sm:block">선택</div>
-              <div class="hidden sm:block">일련번호</div>
-              <div class="hidden sm:block">제목</div>
-              <div class="hidden sm:block">작성자</div>
-              <div class="hidden sm:block">등급</div>
-              <div class="hidden sm:block">메모</div>
-              <div class="hidden sm:block">최근충전</div>
-              <div class="hidden sm:block">최근로그인</div>
-              <div class="hidden sm:block">상위</div>
-              <div class="hidden sm:block">사이트</div>
-              <div class="hidden sm:block">조회수</div>
-              <div class="hidden sm:block">작성일</div>
-              <div class="hidden sm:block">답변</div>
-              <div class="hidden sm:block">상태</div>
-              <div class="hidden sm:block">로그인</div>
+              <div class="hidden lg:block">
+                <mat-checkbox></mat-checkbox>
+              </div>
+              <div class="hidden lg:block">번호</div>
+              <div class="hidden lg:block">
+                제목
+                <hr style="margin: 7px 0px" />
+                작성일
+                <hr style="margin: 7px 0px" />
+                조회수
+              </div>
+
+              <div class="hidden lg:block">
+                작성자
+                <hr style="margin: 7px 0px" />
+                등급
+                <hr style="margin: 7px 0px" />
+                상위
+              </div>
+              <div class="hidden md:block">메모</div>
+              <div class="hidden md:block">최근충전</div>
+              <div class="hidden md:block">최근로그인</div>
+              <div class="hidden md:block">사이트</div>
+              <div class="hidden lg:block">
+                답변
+                <hr style="margin: 7px 0px" />
+                상태
+                <hr style="margin: 7px 0px" />
+                로그인
+              </div>
             </div>
             <!-- Rows -->
             <ng-container *ngIf="customers$ | async as customers">
@@ -194,25 +131,27 @@
                   <!-- 제목 -->
                   <div class="hidden sm:block truncate">
                     {{ customer.title }}
+                    <hr style="margin: 7px 0px" />
+
+                    <!-- 작성일 -->
+
+                    {{ customer.writeDate }}
+                    <!-- 조회수 -->
+                    <hr style="margin: 7px 0px" />
+                    {{ customer.views }}
                   </div>
                   <!-- 작성자 (닉네임)-->
                   <!-- id -->
-                  <ng-container *ngIf="users$ | async as users">
-                    <ng-container
-                      *ngFor="let user of users; trackBy: __trackByFn"
-                    >
-                      <div
-                        class="hidden sm:block truncate"
-                        (click)="viewUserDetail(user.id!)"
-                      >
-                        {{ customer.signinId }}({{ customer.nickname }})
-                      </div>
-                    </ng-container>
-                  </ng-container>
-                  <!-- 등급 -->
                   <div class="hidden sm:block truncate">
-                    LV.{{ customer.level }}
+                    {{ customer.signinId }}
+                    <hr style="margin: 7px 0px" />
+                    <!-- 등급 -->
+                    {{ customer.level }}
+                    <!-- 상위 -->
+                    <hr style="margin: 7px 0px" />
+                    {{ customer.highRank }}
                   </div>
+
                   <!-- 메모 -->
                   <div class="hidden sm:block truncate">
                     {{ customer.memo }}
@@ -225,44 +164,29 @@
                   <div class="hidden sm:block truncate">
                     {{ customer.finalSigninDate }}
                   </div>
-                  <!-- 상위 -->
-                  <div class="hidden sm:block truncate">
-                    {{ customer.highRank }}
-                  </div>
+
                   <!-- 사이트 -->
                   <div class="hidden sm:block truncate">
                     {{ customer.site }}
                   </div>
-                  <!-- 조회수 -->
-                  <div class="hidden sm:block truncate">
-                    {{ customer.views }}
-                  </div>
-                  <!-- 작성일 -->
-                  <div class="hidden sm:block truncate">
-                    {{ customer.writeDate }}
-                  </div>
-                  <!-- 답변 -->
+
                   <div class="hidden sm:block truncate">
+                    <!-- 답변 -->
                     {{ customer.answer }}
-                  </div>
-                  <!-- 상태 -->
-                  <div class="hidden sm:block truncate">
+                    <hr style="margin: 7px 0px" />
+                    <!-- 상태 -->
                     {{ customer.state }}
-                  </div>
-                  <!-- 로그인 -->
-                  <div class="hidden sm:block truncate">
+                    <hr style="margin: 7px 0px" />
+                    <!-- 로그인 -->
                     <button mat-flat-button [color]="'primary'">
                       중복로그인
                     </button>
                   </div>
+
+                  <!-- management -->
                 </div>
               </ng-container>
             </ng-container>
-            <div class="hidden sm:block truncate">
-              <button mat-flat-button [color]="'primary'">
-                디비에서 완전삭제
-              </button>
-            </div>
           </div>
 
           <mat-paginator
@@ -277,11 +201,11 @@
         </ng-container>
       </ng-container>
 
-      <ng-template #noCustomer>
+      <ng-template #noUser>
         <div
           class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
         >
-          There are no customers!
+          There are no data!
         </div>
       </ng-template>
     </div>
diff --git a/src/app/modules/admin/board/customer/components/list.component.ts b/src/app/modules/admin/board/customer/components/list.component.ts
index 50501a1..1b54749 100644
--- a/src/app/modules/admin/board/customer/components/list.component.ts
+++ b/src/app/modules/admin/board/customer/components/list.component.ts
@@ -42,18 +42,22 @@ import { Router } from '@angular/router';
     /* language=SCSS */
     `
       .inventory-grid {
-        grid-template-columns: 60px auto 40px;
+        /*                     CB   번호  제목  작성자  답변 */
+        grid-template-columns: 20px 40px auto 100px 100px;
 
         @screen sm {
-          grid-template-columns: 60px 60px 60px 60px 60px 60px auto 60px;
+          /*                     CB   번호  제목  작성자  최근충전 답변 */
+          grid-template-columns: 20px 40px auto 100px 100px;
         }
 
         @screen md {
-          grid-template-columns: 60px 60px 60px 60px 60px 60px auto 60px 60px;
+          /*                     CB   번호  제목  작성자  최근충전 답변 */
+          grid-template-columns: 20px 40px auto 100px 100px;
         }
 
         @screen lg {
-          grid-template-columns: 60px 70px 70px 70px 70px 100px 60px 60px auto 60px 60px 60px 60px;
+          /*                     CB   번호  제목  작성자  메모   최근충전   최근로그인  사이트  답변 */
+          grid-template-columns: 20px 40px auto 100px 40px 140px 140px 140px 140px;
         }
       }
     `,
@@ -73,6 +77,7 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
   searchInputControl = new FormControl();
   selectedCustomer?: Customer;
   pagination?: CustomerPagination;
+  __isSearchOpened = false;
 
   private _unsubscribeAll: Subject<any> = new Subject<any>();
 
@@ -166,7 +171,7 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
   // @ Public methods
   // -----------------------------------------------------------------------------------------------------
 
-  viewUserDetail(id: string): void {
+  viewUserDetail(id?: string): void {
     let url: string = 'member/user/' + id;
     this.router.navigateByUrl(url);
   }
@@ -174,6 +179,14 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
   // @ Private methods
   // -----------------------------------------------------------------------------------------------------
 
+  /**
+   * toggle the search
+   * Used in 'bar'
+   */
+  __onClickSearch(): void {
+    this.__isSearchOpened = !this.__isSearchOpened;
+  }
+
   /**
    * Create product
    */