From 4cbf901eddc24015826cc014e2b43ac1e23881ef Mon Sep 17 00:00:00 2001
From: JUNG YI DAM <breeze@loafle.com>
Date: Sat, 27 Aug 2022 06:29:39 +0000
Subject: [PATCH] =?UTF-8?q?=EB=A0=88=EB=B2=A8=EC=84=A4=EC=A0=95=20?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../partner/components/list.component.html    | 29 +++++++++++++++++--
 .../partner/components/list.component.ts      |  9 ++++++
 .../user/components/list.component.html       | 26 ++++++++++++++++-
 .../member/user/components/list.component.ts  |  9 ++++++
 4 files changed, 69 insertions(+), 4 deletions(-)

diff --git a/src/app/modules/admin/member/partner/components/list.component.html b/src/app/modules/admin/member/partner/components/list.component.html
index e6b4068..7a12c52 100644
--- a/src/app/modules/admin/member/partner/components/list.component.html
+++ b/src/app/modules/admin/member/partner/components/list.component.html
@@ -10,8 +10,13 @@
       <mat-progress-bar [mode]="'indeterminate'"></mat-progress-bar>
     </div>
     <!-- Title -->
-    <div class="text-4xl font-extrabold tracking-tight">{{ title }}</div>
-    <!-- Actions -->
+    <div class="text-4xl font-extrabold tracking-tight">
+      <span>{{ title }}</span>
+      <span
+        ><button mat-icon-button (click)="__onClickLevel()">
+          <mat-icon [svgIcon]="'alpha-l-box-outline'"></mat-icon></button
+      ></span>
+    </div>
     <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
       <!-- Search -->
       <div>
@@ -53,13 +58,31 @@
       <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
         블랙
       </button>
-
       <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
         정지
       </button>
     </div>
   </div>
   <hr style="margin: 7px 0px" />
+  <div
+    *ngIf="__isLevelOpened"
+    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"
+  >
+    <div fxLayout="row wrap" class="items-center mt-6 sm:mt-0 sm:ml-0">
+      <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
+        LV1
+      </button>
+      <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
+        LV2
+      </button>
+      <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
+        LV3
+      </button>
+      <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
+        LV4
+      </button>
+    </div>
+  </div>
   <div class="flex flex-auto overflow-hidden">
     <!-- Products list -->
     <div
diff --git a/src/app/modules/admin/member/partner/components/list.component.ts b/src/app/modules/admin/member/partner/components/list.component.ts
index 67c1c01..9733b7e 100644
--- a/src/app/modules/admin/member/partner/components/list.component.ts
+++ b/src/app/modules/admin/member/partner/components/list.component.ts
@@ -96,6 +96,7 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
 
   listPartner$!: Observable<MemberModel[] | undefined>;
 
+  __isLevelOpened = false;
   isLoading = false;
   searchInputControl = new FormControl();
   selectedPartner?: Partner;
@@ -294,6 +295,14 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
    */
   __toggleDetails(productId: string): void {}
 
+  /**
+   * toggle the search
+   * Used in 'bar'
+   */
+  __onClickLevel(): void {
+    this.__isLevelOpened = !this.__isLevelOpened;
+  }
+
   /**
    * Track by function for ngFor loops
    *
diff --git a/src/app/modules/admin/member/user/components/list.component.html b/src/app/modules/admin/member/user/components/list.component.html
index 2460aca..46bdd9b 100644
--- a/src/app/modules/admin/member/user/components/list.component.html
+++ b/src/app/modules/admin/member/user/components/list.component.html
@@ -19,7 +19,12 @@
       </span>
       <span>
         <button mat-icon-button (click)="__onClickSearch()">
-          <mat-icon svgIcon="iconsmind:file_excel"></mat-icon>
+          <mat-icon [svgIcon]="'iconsmind:file_excel'"></mat-icon>
+        </button>
+      </span>
+      <span>
+        <button mat-icon-button (click)="__onClickLevel()">
+          <mat-icon [svgIcon]="'alpha-l-box-outline'"></mat-icon>
         </button>
       </span>
     </div>
@@ -202,6 +207,25 @@
       <button mat-menu-item>정지</button>
     </mat-menu>
   </div>
+  <div
+    *ngIf="__isLevelOpened"
+    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"
+  >
+    <div fxLayout="row wrap" class="items-center mt-6 sm:mt-0 sm:ml-0">
+      <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
+        LV1
+      </button>
+      <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
+        LV2
+      </button>
+      <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
+        LV3
+      </button>
+      <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
+        LV4
+      </button>
+    </div>
+  </div>
   <!-- Main -->
   <div class="flex flex-auto overflow-hidden">
     <!-- Products list -->
diff --git a/src/app/modules/admin/member/user/components/list.component.ts b/src/app/modules/admin/member/user/components/list.component.ts
index e445088..e638ef7 100644
--- a/src/app/modules/admin/member/user/components/list.component.ts
+++ b/src/app/modules/admin/member/user/components/list.component.ts
@@ -91,6 +91,7 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
   listMemberLevels$!: Observable<MemberLevel[] | undefined>;
 
   __isSearchOpened = false;
+  __isLevelOpened = false;
   isLoading = false;
   searchInputControl = new FormControl();
   selectedUser?: User;
@@ -247,6 +248,14 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
     this.__isSearchOpened = !this.__isSearchOpened;
   }
 
+  /**
+   * toggle the search
+   * Used in 'bar'
+   */
+  __onClickLevel(): void {
+    this.__isLevelOpened = !this.__isLevelOpened;
+  }
+
   /**
    * Track by function for ngFor loops
    *