From fc94ec2aacda5e7504124ac96a8fe4d1dac11331 Mon Sep 17 00:00:00 2001
From: Park Byung Eun <geekdev@naver.com>
Date: Tue, 26 Jul 2022 10:12:57 +0000
Subject: [PATCH] =?UTF-8?q?=EC=AA=BD=EC=A7=80=ED=95=A8=20=EB=A6=AC?=
 =?UTF-8?q?=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

---
 .../message/components/list.component.html    | 245 +++++++-----------
 .../message/components/list.component.ts      |  17 +-
 2 files changed, 110 insertions(+), 152 deletions(-)

diff --git a/src/app/modules/admin/board/message/components/list.component.html b/src/app/modules/admin/board/message/components/list.component.html
index 000857b..67dbf14 100644
--- a/src/app/modules/admin/board/message/components/list.component.html
+++ b/src/app/modules/admin/board/message/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="messages$ | async as messages">
-          <ng-container
-            *ngFor="let message of messages; trackBy: __trackByFn"
-          >
-            <div
-              class="inventory-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
-            >
-              <fieldset>
-                총 파트너수:{{ message.totalPartnerCount }} 총 보유머니:{{
-                  message.totalHoldingMoney
-                }}
-                총 콤프:{{ message.totalComp }} 총 합계:{{
-                  message.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,84 +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-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>
@@ -151,24 +76,38 @@
       class="flex flex-col flex-auto sm:mb-18 overflow-hidden sm:overflow-y-auto"
     >
       <ng-container *ngIf="messages$ | async as messages">
-        <ng-container *ngIf="messages.length > 0; else noMessage">
+        <ng-container *ngIf="messages.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
+              class="inventory-grid z-10 sticky top-0 grid gap-4 py-4 px-6 md:px-8shadow text-md font-semibold text-secondary bg-gray-50 dark:bg-black dark:bg-opacity-5"
             >
-              <div class="hidden sm:block"><mat-checkbox></mat-checkbox></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">
+                제목
+                <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 lg:block">
+                배팅내역
+                <hr style="margin: 7px 0px" />
+                회원정보
+                <hr style="margin: 7px 0px" />
+                사이트
+              </div>
             </div>
             <!-- Rows -->
             <ng-container *ngIf="messages$ | async as messages">
@@ -178,53 +117,63 @@
                 <div
                   class="inventory-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
                 >
-                  <div class="hidden sm:block truncate">
+                  <div class="hidden lg:block">
                     <mat-checkbox></mat-checkbox>
                   </div>
+
                   <!-- 제목 -->
-                  <div class="hidden sm:block truncate">
+                  <div class="hidden lg:block">
                     {{ message.title }}
-                  </div>
-                  <!-- 작성자 -->
-                  <div class="hidden sm:block truncate">
-                    {{ message.writer }}
-                  </div>
-                  <!-- 회원정보 -->
-                  <div class="hidden sm:block truncate">
-                    <button mat-flat-button [color]="'warn'">회원정보</button>
-                  </div>
-                  <!-- 배팅내역 -->
-                  <div class="hidden sm:block truncate">
-                    <button mat-flat-button [color]="'primary'">
-                      배팅리스트
-                    </button>
-                  </div>
-                  <!-- 사이트 -->
-                  <div class="hidden sm:block truncate">
-                    {{ message.site }}
-                  </div>
-                  <!-- 조회수 -->
-                  <div class="hidden sm:block truncate">
+                    <hr style="margin: 7px 0px" />
+
+                    <!-- 작성일 -->
+
+                    {{ message.writeDate }}
+                    <!-- 조회수 -->
+                    <hr style="margin: 7px 0px" />
                     {{ message.views }}
                   </div>
-                  <!-- 작성일 -->
-                  <div class="hidden sm:block truncate">
-                    {{ message.writeDate }}
-                  </div>
-                  <!-- 답변 -->
-                  <div class="hidden sm:block truncate">
+                  <!-- 작성자 (닉네임)-->
+                  <!-- id -->
+                  <div class="hidden lg:block">
+                    {{ message.writer }}
+                    <hr style="margin: 7px 0px" />
+                    <!-- 답변 -->
                     {{ message.answer }}
-                  </div>
-                  <!-- 상태 -->
-                  <div class="hidden sm:block truncate">
+                    <!-- 상태 -->
+                    <hr style="margin: 7px 0px" />
                     {{ message.state }}
                   </div>
+
+                  <div class="hidden lg:block">
+                    <!-- 배팅내역 -->
+                    <span>
+                      <button class="ml-4" mat-flat-button [color]="'primary'">
+                        <mat-icon
+                          [svgIcon]="'heroicons_outline:plus'"
+                        ></mat-icon>
+                        <span class="ml-2 mr-1">회원정보</span>
+                      </button>
+                    </span>
+                    <hr style="margin: 7px 0px" />
+                    <!-- 회원정보 -->
+                    <span>
+                      <button class="ml-4" mat-flat-button [color]="'primary'">
+                        <mat-icon
+                          [svgIcon]="'heroicons_outline:plus'"
+                        ></mat-icon>
+                        <span class="ml-2 mr-1">배팅리스트</span>
+                      </button>
+                    </span>
+                    <hr style="margin: 7px 0px" />
+                    <!-- 사이트 -->
+                    {{ message.site }}
+                  </div>
+
+                  <!-- management -->
                 </div>
               </ng-container>
             </ng-container>
-            <button mat-flat-button [color]="'primary'">
-              디비에서 완전 삭제
-            </button>
           </div>
 
           <mat-paginator
@@ -239,11 +188,11 @@
         </ng-container>
       </ng-container>
 
-      <ng-template #noMessage>
+      <ng-template #noUser>
         <div
           class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
         >
-          There are no messages!
+          There are no data!
         </div>
       </ng-template>
     </div>
diff --git a/src/app/modules/admin/board/message/components/list.component.ts b/src/app/modules/admin/board/message/components/list.component.ts
index 469b933..0642129 100644
--- a/src/app/modules/admin/board/message/components/list.component.ts
+++ b/src/app/modules/admin/board/message/components/list.component.ts
@@ -42,18 +42,18 @@ import { Router } from '@angular/router';
     /* language=SCSS */
     `
       .inventory-grid {
-        grid-template-columns: 60px auto 40px;
+        grid-template-columns: 20px auto 200px 200px;
 
         @screen sm {
-          grid-template-columns: 60px 60px 60px 60px 60px 60px auto 60px;
+          grid-template-columns: 20px auto 300px 300px;
         }
 
         @screen md {
-          grid-template-columns: 60px 60px 60px 60px 60px 60px auto 60px 60px;
+          grid-template-columns: 20px auto 300px 300px;
         }
 
         @screen lg {
-          grid-template-columns: 60px 70px 70px 70px 70px 100px 60px 60px auto 60px 60px 60px 60px;
+          grid-template-columns: 20px auto 300px 300px;
         }
       }
     `,
@@ -73,6 +73,7 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
   searchInputControl = new FormControl();
   selectedMessage?: Message;
   pagination?: MessagePagination;
+  __isSearchOpened = false;
 
   private _unsubscribeAll: Subject<any> = new Subject<any>();
 
@@ -179,6 +180,14 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
    */
   __createProduct(): void {}
 
+  /**
+   * toggle the search
+   * Used in 'bar'
+   */
+  __onClickSearch(): void {
+    this.__isSearchOpened = !this.__isSearchOpened;
+  }
+
   /**
    * Toggle product details
    *