레벨변경버튼 수정

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

@@ -12,10 +12,6 @@
     <!-- Title -->
     <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 -->
@@ -65,23 +61,32 @@
   </div>
   <hr style="margin: 7px 0px" />
   <div
-    *ngIf="__isLevelOpened"
+    *ngIf="__checkedUsers.length > 0"
-    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"
+    class="relative flex flex-col sm:flex-row flex-0 sm:items-center 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-button [matMenuTriggerFor]="menuChangeMemberState">
-      <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
+      상태 변경
-        LV1
     </button>
-      <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
+    <mat-menu #menuChangeMemberState="matMenu">
-        LV2
+      <button mat-menu-item>정상</button>
+      <button mat-menu-item>대기</button>
+      <button mat-menu-item>탈퇴</button>
+      <button mat-menu-item>휴면</button>
+      <button mat-menu-item>블랙</button>
+      <button mat-menu-item>정지</button>
+    </mat-menu>
+    <button mat-button [matMenuTriggerFor]="menuChangeMemberLevel">
+      레벨 변경
     </button>
-      <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
+    <mat-menu #menuChangeMemberLevel="matMenu">
-        LV3
+      <ng-container *ngIf="listMemberLevels$ | async as memberLevels">
+        <ng-container *ngFor="let ml of memberLevels; let i = index">
+          <button mat-menu-item (click)="__onClickChangeLevel(ml.getId())">
+            {{ ml.getName() }}
           </button>
-      <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
+        </ng-container>
-        LV4
+      </ng-container>
-      </button>
+    </mat-menu>
-    </div>
   </div>
   <div class="flex flex-auto overflow-hidden">
     <!-- Products list -->
@@ -97,6 +102,11 @@
               matSortDisableClear
               class="partner-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 style="text-align: center">
+                <mat-checkbox
+                  (change)="__onChangeChkUsersAll($event)"
+                ></mat-checkbox>
+              </div>
               <div class="hidden lg:block">
                 관리
                 <hr style="margin: 7px 0px" />
@@ -138,6 +148,13 @@
                 <div
                   class="partner-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
                 >
+                  <div style="text-align: center">
+                    <mat-checkbox
+                      #chkUsers
+                      [value]="partner.getId()"
+                      (change)="__onChangeChkUsers($event)"
+                    ></mat-checkbox>
+                  </div>
                   <div class="hidden lg:block">
                     <div>
                       <div

src/app/modules/admin/member/partner/components/list.component.ts

@@ -5,7 +5,9 @@ import {
   Component,
   OnDestroy,
   OnInit,
+  QueryList,
   ViewChild,
+  ViewChildren,
   ViewEncapsulation,
 } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
@@ -47,13 +49,17 @@ import { MatDialog } from '@angular/material/dialog';
 import { SiteService } from 'app/modules/polyglot/site/services/site.service';
 import { Site } from 'app/modules/proto/models/site_pb';
 import { MemberService } from 'app/modules/polyglot/member/services/member.service';
-import { MemberModel } from 'app/modules/proto/models/member_pb';
+import { MemberModel, MemberState } from 'app/modules/proto/models/member_pb';
 import {
   ListMembersRequest,
   ListMembersResponse,
 } from 'app/modules/proto/c2se/member_pb';
+import { MatCheckbox, MatCheckboxChange } from '@angular/material/checkbox';
+import { ListMemberLevelsResponse } from 'app/modules/proto/c2se/member_level_pb';
+import { MemberLevel } from 'app/modules/proto/models/member_level_pb';
 import { Pagination } from 'app/modules/proto/protobuf/pagination_pb';
 import { VendorService } from 'app/modules/polyglot/api/services/vendor.service';
+
 @Component({
   selector: 'partner-list',
   templateUrl: './list.component.html',
@@ -92,9 +98,10 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
   @ViewChild(MatPaginator) private _paginator!: MatPaginator;
   @ViewChild(MatSort) private _sort!: MatSort;
 
-  /* partners$!: Observable<Partner[] | undefined>; */
+  @ViewChildren('chkUsers') chkUsers!: QueryList<MatCheckbox>;
 
   listPartner$!: Observable<MemberModel[] | undefined>;
+  listMemberLevels$!: Observable<MemberLevel[] | undefined>;
 
   __isLevelOpened = false;
   isLoading = false;
@@ -103,6 +110,7 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
   pagination?: PartnerPagination;
 
   __members: MemberModel[] = [];
+  __checkedUsers: string[] = [];
 
   title: string = '';
   btnTitle: string = '';
@@ -189,7 +197,9 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
       let listMemberResult: ListMembersResponse.Result = data['listPartner'];
       this.listPartner$ = of(listMemberResult.getMembersList());
 
-      /* console.log('dddd', listMemberResult.getMembersList()); */
+      let listMemberLevelsResult: ListMemberLevelsResponse.Result =
+        data['listMemberLevels'];
+      this.listMemberLevels$ = of(listMemberLevelsResult.getMemberLevelsList());
 
       // Mark for check
       this._changeDetectorRef.markForCheck();
@@ -295,14 +305,6 @@ 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
    *
@@ -417,4 +419,62 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
       this.signoutBlockConfigForm.value
     );
   }
+
+  __onChangeChkUsersAll(event: MatCheckboxChange): void {
+    let checked = event.checked;
+    this.chkUsers.forEach((c, i) => {
+      c.checked = checked;
+    });
+    this.__updateCheckedUsers();
+  }
+
+  __onChangeChkUsers(event: MatCheckboxChange): void {
+    this.__updateCheckedUsers();
+  }
+
+  __updateCheckedUsers(): void {
+    this.__checkedUsers = [];
+    this.chkUsers.forEach((c, i) => {
+      if (c.checked) {
+        this.__checkedUsers.push(c.value);
+      }
+    });
+  }
+
+  __onClickChangeLevel(member_level_id: string): void {
+    console.log('member_level_id', member_level_id);
+  }
+
+  __getMemberState(member: MemberModel): string {
+    const state = member.getState();
+    let resultStr = '';
+
+    switch (state) {
+      case MemberState.NONE:
+        resultStr = '없음';
+        break;
+      case MemberState.NORMAL:
+        resultStr = '정상';
+        break;
+      case MemberState.PENDING:
+        resultStr = '대기';
+        break;
+      case MemberState.WITHDRAWAL:
+        resultStr = '탈퇴';
+        break;
+      case MemberState.DORMANCY:
+        resultStr = '휴면';
+        break;
+      case MemberState.BLACKLIST:
+        resultStr = '블랙리스트';
+        break;
+      case MemberState.SUSPENDED:
+        resultStr = '정지';
+        break;
+      default:
+        break;
+    }
+
+    return resultStr;
+  }
 }

src/app/modules/admin/member/partner/partner.module.ts

@@ -13,6 +13,7 @@ import { MatSortModule } from '@angular/material/sort';
 import { MatSelectModule } from '@angular/material/select';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatGridListModule } from '@angular/material/grid-list';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatDividerModule } from '@angular/material/divider';
@@ -49,6 +50,7 @@ import { FuseAlertModule } from '@fuse/components/alert';
     MatSelectModule,
     MatTooltipModule,
     MatGridListModule,
+    MatCheckboxModule,
     MatMenuModule,
     MatRadioModule,
     MatDividerModule,

src/app/modules/admin/member/partner/partner.routing.ts

@@ -11,6 +11,7 @@ import {
   PartnerListResolver,
   PartnersResolver,
 } from './resolvers/partner.resolver';
+import { ListMemberLevelsResolver } from '../user/resolvers/member-level.resolver';
 
 export const partnerRoutes: Route[] = [
   // {
@@ -23,6 +24,7 @@ export const partnerRoutes: Route[] = [
     component: ListComponent,
     resolve: {
       listPartner: PartnerListResolver,
+      listMemberLevels: ListMemberLevelsResolver,
     },
   },
   {

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

@@ -22,11 +22,6 @@
           <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>
 
     <!-- Actions -->
@@ -193,7 +188,7 @@
   <!-- actions -->
   <div
     *ngIf="__checkedUsers.length > 0"
-    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"
+    class="relative flex flex-col sm:flex-row flex-0 sm:items-center py-4 px-6 md:px-8 border-b"
   >
     <button mat-button [matMenuTriggerFor]="menuChangeMemberState">
       상태 변경
@@ -206,25 +201,18 @@
       <button mat-menu-item>블랙</button>
       <button mat-menu-item>정지</button>
     </mat-menu>
-  </div>
+    <button mat-button [matMenuTriggerFor]="menuChangeMemberLevel">
-  <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'">
+    <mat-menu #menuChangeMemberLevel="matMenu">
-        LV2
+      <ng-container *ngIf="listMemberLevels$ | async as memberLevels">
+        <ng-container *ngFor="let ml of memberLevels; let i = index">
+          <button mat-menu-item (click)="__onClickChangeLevel(ml.getId())">
+            {{ ml.getName() }}
           </button>
-      <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
+        </ng-container>
-        LV3
+      </ng-container>
-      </button>
+    </mat-menu>
-      <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
-        LV4
-      </button>
-    </div>
   </div>
   <!-- Main -->
   <div class="flex flex-auto overflow-hidden">

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

@@ -91,7 +91,6 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
   listMemberLevels$!: Observable<MemberLevel[] | undefined>;
 
   __isSearchOpened = false;
-  __isLevelOpened = false;
   isLoading = false;
   searchInputControl = new FormControl();
   selectedUser?: User;
@@ -248,14 +247,6 @@ 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
    *
@@ -388,6 +379,10 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
 
   __onMatSortChangeUsers(sort: Sort): void {}
 
+  __onClickChangeLevel(member_level_id: string): void {
+    console.log('member_level_id', member_level_id);
+  }
+
   __getMemberState(member: MemberModel): string {
     const state = member.getState();
     let resultStr = '';