[feat] - add user lsit , convert to coop and lock unlock user

src/app/pages/manage/users/container/users/users.container.html

@@ -0,0 +1,3 @@
+<app-user-list [userList]="userList$ | async" (edit)="edit($event)">
+
+</app-user-list>

src/app/pages/manage/users/container/users/users.container.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UsersContainer } from './users.container';
+
+describe('UsersContainer', () => {
+  let component: UsersContainer;
+  let fixture: ComponentFixture<UsersContainer>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ UsersContainer ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(UsersContainer);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/manage/users/container/users/users.container.ts

@@ -0,0 +1,41 @@
+import { ChangeDetectorRef, Component } from '@angular/core';
+import { catchError, filter, Observable, switchMap, tap, throwError } from 'rxjs';
+import { IDialogConfig, CDialogConfig } from 'src/app/@common/interface/Dialog';
+import { EAction, EText } from 'src/app/@config/app';
+import { SathonCathayPayService } from 'src/app/sathon-cathay-pay.service';
+import { DialogComponent } from '../../../kyc/presenter/dialog/dialog.component';
+import { MatDialog } from '@angular/material/dialog';
+import { AppService } from 'src/app/app.service';
+import { ModalComponent } from '../../presenter/modal/modal.component';
+
+@Component({
+  selector: 'app-users',
+  templateUrl: './users.container.html',
+  styleUrls: ['./users.container.scss']
+})
+export class UsersContainer {
+  userList$ = new Observable()
+  dialogConfig: IDialogConfig = CDialogConfig
+  constructor(
+    private sathonSV: SathonCathayPayService,
+    private dialog: MatDialog,
+    private appService: AppService,
+    private cdr: ChangeDetectorRef
+  ) {
+    this.userList$ = this.sathonSV.getAllUsers()
+  }
+
+
+  edit(user) {
+    this.dialogConfig.data.action = EAction.UPDATE;
+    this.dialogConfig.data = user
+    const dialogRef = this.dialog.open(ModalComponent, this.dialogConfig);
+    dialogRef.afterClosed().pipe(
+      filter(isRefresh => isRefresh),
+      tap(() => {
+        this.userList$ = this.sathonSV.getAllUsers()
+        this.cdr.detectChanges()
+      })
+    ).subscribe()
+  }
+}

src/app/pages/manage/users/presenter/modal/modal.component.html

@@ -0,0 +1,80 @@
+<form class="dialog-main form-dialog" autocomplete="off">
+  <div class="dialog-main">
+    <div class="dialog-header flex justify-between">
+      <h2>More Detail</h2>
+      <mat-icon mat-dialog-close class="cursor-pointer">clear</mat-icon>
+    </div>
+    <div class="dialog-body">
+      <div class="grid grid-cols-12 gap-4 md:gap-2 ">
+
+        <div class="col-span-full">
+          <div class="lg:flex lg:flex-col grid grid-cols-9 gap-2">
+            <mat-label
+              class="col-span-1 lg:text-left lg:self-auto text-right self-center mr-4">เลขประจำตัวประชาชน</mat-label>
+            <mat-form-field class="col-span-3">
+              <input matInput required type="text" [value]="dialog?.personalCardId" readonly>
+            </mat-form-field>
+            <span class="col-span-1"></span>
+          </div>
+        </div>
+
+        <div class="col-span-full">
+          <div class="lg:flex lg:flex-col grid grid-cols-9 gap-2">
+            <mat-label class="col-span-1 lg:text-left lg:self-auto text-right self-center mr-4">ชื่อ นามสกุล</mat-label>
+            <mat-form-field class="col-span-3">
+              <input matInput required type="text" readonly [value]="dialog?.fullName">
+            </mat-form-field>
+            <span class="col-span-5"></span>
+          </div>
+        </div>
+
+        <div class="col-span-full">
+          <div class="lg:flex lg:flex-col grid grid-cols-9 gap-2">
+            <mat-label class="col-span-1 lg:text-left lg:self-auto text-right self-center mr-4">Username</mat-label>
+            <mat-form-field class="col-span-3">
+              <input matInput required type="text" readonly [value]="dialog?.userName">
+            </mat-form-field>
+            <span class="col-span-1"></span>
+          </div>
+        </div>
+
+        <div class="col-span-full">
+          <div class="lg:flex lg:flex-col grid grid-cols-9 gap-2">
+            <mat-label class="col-span-1 lg:text-left lg:self-auto text-right self-center mr-4">เบอร์โทร</mat-label>
+            <mat-form-field class="col-span-3">
+              <input matInput required type="text" readonly [value]="dialog?.phoneNumber">
+            </mat-form-field>
+          </div>
+        </div>
+
+        <div class="col-span-full">
+          <div class="lg:flex lg:flex-col grid grid-cols-9 gap-2">
+            <mat-label class="col-span-1 lg:text-left lg:self-auto text-right self-center mr-4">อีเมล</mat-label>
+            <mat-form-field class="col-span-3">
+              <input matInput required type="text" readonly [value]="dialog?.normalizedEmail">
+            </mat-form-field>
+          </div>
+        </div>
+
+
+        <div class="col-span-full">
+          <div class="lg:flex lg:flex-col grid grid-cols-9 gap-2">
+            <mat-label class="col-span-1 lg:text-left lg:self-auto text-right self-center mr-4">Lock/Unlock</mat-label>
+            <mat-slide-toggle [checked]="dialog.lockoutEnabled" (change)="changeUserLock($event)"></mat-slide-toggle>
+            <span class="col-span-1"></span>
+          </div>
+        </div>
+
+        <div class="col-span-full">
+          <div class="lg:flex lg:flex-col grid grid-cols-9 gap-2">
+            <mat-label class="col-span-1 lg:text-left lg:self-auto text-right self-center mr-4"></mat-label>
+            <button type="submit" mat-raised-button class="btn btn-submit" (click)="save()">บันทึก</button>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</form>
+
+<!-- <pre>{{form.getRawValue() | json}}</pre> -->

src/app/pages/manage/users/presenter/modal/modal.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ModalComponent } from './modal.component';
+
+describe('ModalComponent', () => {
+  let component: ModalComponent;
+  let fixture: ComponentFixture<ModalComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ModalComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/manage/users/presenter/modal/modal.component.ts

@@ -0,0 +1,70 @@
+import { ChangeDetectorRef, Component, Inject, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { Router, ActivatedRoute } from '@angular/router';
+import { tap, catchError, throwError, lastValueFrom, filter, switchMap } from 'rxjs';
+import { IDialogConfigData } from 'src/app/@common/interface/Dialog';
+import { EAction, EText } from 'src/app/@config/app';
+import { AppService } from 'src/app/app.service';
+import { BaseForm } from 'src/app/core/base/base-form';
+import { PromotionService } from 'src/app/core/service/common/promotion.service';
+import { UploadService } from 'src/app/core/service/common/upload.service';
+import { DialogComponent } from '../../../kyc/presenter/dialog/dialog.component';
+import { Location } from '@angular/common';
+import { SathonCathayPayService } from 'src/app/sathon-cathay-pay.service';
+
+@Component({
+  selector: 'app-modal',
+  templateUrl: './modal.component.html',
+  styleUrls: ['./modal.component.scss']
+})
+export class ModalComponent implements OnInit {
+  IsRefresh: boolean = false
+  constructor(
+    public dialogRef: MatDialogRef<DialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public dialog: any,
+    private sathonSV: SathonCathayPayService,
+    private appsv: AppService
+  ) { }
+
+  ngOnInit(): void {
+  }
+
+  changeUserLock({ checked },) {
+    let userId = this.dialog.id
+    console.log(checked)
+    const msg = checked ? 'Unlock' : 'Lock'
+    this.sathonSV.lockUnlockUser(userId).pipe(
+      tap(event => {
+        this.appsv.message(EAction.SUCCESS, `${msg} สำเร็จแล้ว`)
+        this.IsRefresh = true
+      }),
+      tap(() => this.closeDialog()),
+      catchError(err => {
+        this.IsRefresh = false
+        return throwError(err)
+      })
+    ).subscribe()
+  }
+
+  save() {
+    let userId = this.dialog.id
+    this.appsv.confirm(EAction.UPDATE).pipe(
+      filter(r => r.isConfirmed),
+      switchMap(() => this.sathonSV.convertToCoperate(userId)),
+      tap(() => this.IsRefresh = true),
+      tap(() => this.closeDialog()),
+      catchError(err => {
+        this.IsRefresh = false
+        this.appsv.message('error', 'เกิดข้อผิดพลาด')
+        return throwError(err)
+      })
+    ).subscribe()
+    // this.sathonSV.convertToCoperate(userId).subscribe()
+  }
+
+  closeDialog() {
+    this.dialogRef.close(this.IsRefresh)
+  }
+
+}

src/app/pages/manage/users/presenter/user-list/user-list.component.html

@@ -0,0 +1,69 @@
+<div class="card card-table">
+
+  <div class="card-filter text-right">
+    <div class="card-filter-section grid grid-cols-12  gap-4 md:gap-2 items-center">
+      <div class="col-span-3 md:col-span-5 md:order-2">
+        <mat-form-field>
+          <i matTextPrefix class="bi bi-search"></i>
+          <input matInput placeholder="เลขบัตรประชาชน/เลขหลังบัตร" [(ngModel)]="query.card"
+            (ngModelChange)="onFilterCard($event)">
+        </mat-form-field>
+      </div>
+      <div class="col-span-5 md:col-span-7 md:order-2">
+        <mat-form-field>
+          <i matTextPrefix class="bi bi-search"></i>
+          <input matInput placeholder="ชื่อ-นามสกุล" [(ngModel)]="query.name" (ngModelChange)="onFilterName($event)">
+        </mat-form-field>
+      </div>
+    </div>
+  </div>
+
+  <div class="card-body">
+    <div class="table-wrap">
+      <table class="" mat-table [dataSource]="userList" matSort>
+        <tr mat-header-row *matHeaderRowDef="['1','2','3','4','6']"></tr>
+        <tr mat-row *matRowDef="let row; columns: ['1','2','3','4','6'];"></tr>
+
+        <ng-container matColumnDef="1">
+          <th mat-header-cell *matHeaderCellDef class="tac">ลำดับ</th>
+          <td mat-cell *matCellDef="let item; let i = index;" width="100" class="tac">{{getIndex(i)}}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="2">
+          <th mat-header-cell *matHeaderCellDef class="tac">เลขบัตรประชาชน</th>
+          <td mat-cell *matCellDef="let item" class="tac" style="min-width: 200px;">
+            {{item.personalCardId}}
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="3">
+          <th mat-header-cell *matHeaderCellDef class="tac" width="200">ชื่อ นามสกุล</th>
+          <td mat-cell *matCellDef="let item" class="tac whitespace-nowrap">{{item.fullName}}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="4">
+          <th mat-header-cell *matHeaderCellDef class="tal" width="150">Username</th>
+          <td mat-cell *matCellDef="let item" class="whitespace-nowrap">{{item.userName }}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="5">
+          <th mat-header-cell *matHeaderCellDef class="tac" width="100">Email</th>
+          <td mat-cell *matCellDef="let item" class="tac">{{item.email}}</td>
+        </ng-container>
+
+        <ng-container matColumnDef="6">
+          <th mat-header-cell *matHeaderCellDef class="tac" width="150">More Detail</th>
+          <td mat-cell *matCellDef="let item" class="tac">
+            <div class="action flex justify-center">
+              <div class="item cursor-pointer">
+                <i class="bi bi-pencil-square icon-edit mr-2" (click)="onEdit(item)"></i>
+              </div>
+            </div>
+          </td>
+        </ng-container>
+      </table>
+    </div>
+    <!-- <div *ngIf="dataSourceCount === 0" class="no-data"></div> -->
+    <mat-paginator [pageSizeOptions]="[5,10,20]" showFirstLastButtons></mat-paginator>
+  </div>
+</div>

src/app/pages/manage/users/presenter/user-list/user-list.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserListComponent } from './user-list.component';
+
+describe('UserListComponent', () => {
+  let component: UserListComponent;
+  let fixture: ComponentFixture<UserListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ UserListComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(UserListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/manage/users/presenter/user-list/user-list.component.ts

@@ -0,0 +1,57 @@
+import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
+import { Subject, debounceTime, distinctUntilChanged } from 'rxjs';
+import { BaseList } from 'src/app/core/base/base-list';
+
+@Component({
+  selector: 'app-user-list',
+  templateUrl: './user-list.component.html',
+  styleUrls: ['./user-list.component.scss']
+})
+export class UserListComponent extends BaseList implements OnChanges {
+  @Input() userList: any = [];
+  @Output() edit = new EventEmitter();
+  @Output() search = new EventEmitter();
+  @Output() OnDelete = new EventEmitter<string>()
+  query = {
+    name: null,
+    card: null
+  }
+  name: string;
+  filterCard: Subject<string> = new Subject<string>();
+  constructor() {
+    super()
+    this.filterCard.pipe(
+      debounceTime(500),
+      distinctUntilChanged()
+    ).subscribe(() => this.onSearch())
+  }
+
+  ngOnChanges(): void {
+    this.userList = this.updateMatTable(this.userList ? this.userList : [])
+  }
+
+  onEdit(user) {
+    this.edit.emit(user)
+  }
+
+  onDeleteKyc(uid: string) {
+    // console.log(uid)
+    this.OnDelete.emit(uid)
+  }
+
+  onFilterCard($event) {
+    const filterValue = this.query.card;
+    this.userList.filter = filterValue.trim().toLowerCase();
+  }
+
+  onFilterName($event) {
+    const filterValue = this.query.name;
+    this.userList.filter = filterValue.trim().toLowerCase();
+  }
+
+  onSearch() {
+    const filterValue = this.query.card;
+    this.userList.filter = filterValue.trim().toLowerCase();
+  }
+
+}

src/app/pages/manage/users/router/users-router/users-router.container.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-users-router',
+  template: '<router-outlet></router-outlet>',
+})
+export class UsersRouterContainer {
+
+}

src/app/pages/manage/users/users.module.ts

@@ -0,0 +1,37 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule, Routes } from '@angular/router';
+import { UsersRouterContainer } from './router/users-router/users-router.container';
+import { UsersContainer } from './container/users/users.container';
+import { ModalComponent } from './presenter/modal/modal.component';
+import { UserListComponent } from './presenter/user-list/user-list.component';
+import { AppSharedModule } from 'src/app/app.shared';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: UsersRouterContainer,
+    children: [
+      {
+        path: '',
+        component: UsersContainer
+      }
+    ]
+  }
+]
+
+
+@NgModule({
+  declarations: [
+    UsersRouterContainer,
+    UsersContainer,
+    ModalComponent,
+    UserListComponent
+  ],
+  imports: [
+    CommonModule,
+    RouterModule.forChild(routes),
+    AppSharedModule
+  ]
+})
+export class UsersModule { }