From 4476d9d2dc9234ce8e2b96eee219703b606aa4ea Mon Sep 17 00:00:00 2001 From: Supichai Pothong Date: Thu, 19 Oct 2023 03:05:50 +0700 Subject: [PATCH] [update] --- src/app/@common/utils/thaidate.pipe.ts | 19 ++++ src/app/app.shared.ts | 43 ++++++++- .../kyc/container/kyc/kyc.container.html | 5 +- .../manage/kyc/container/kyc/kyc.container.ts | 35 ++++++- src/app/pages/manage/kyc/kyc.module.ts | 4 +- .../presenter/dialog/dialog.component.html | 91 +++++++++++++++++++ .../presenter/dialog/dialog.component.scss | 0 .../presenter/dialog/dialog.component.spec.ts | 23 +++++ .../kyc/presenter/dialog/dialog.component.ts | 90 ++++++++++++++++++ .../kyc/presenter/list/list.component.html | 65 ++++++------- .../kyc/presenter/list/list.component.ts | 45 ++++++++- .../container/banner/banner.container.ts | 2 + .../presenter/dialog/dialog.component.html | 2 +- .../presenter/dialog/dialog.component.ts | 1 - .../promotion/promotion.container.ts | 4 +- src/styles/app.scss | 28 +++++- 16 files changed, 404 insertions(+), 53 deletions(-) create mode 100644 src/app/@common/utils/thaidate.pipe.ts create mode 100644 src/app/pages/manage/kyc/presenter/dialog/dialog.component.html create mode 100644 src/app/pages/manage/kyc/presenter/dialog/dialog.component.scss create mode 100644 src/app/pages/manage/kyc/presenter/dialog/dialog.component.spec.ts create mode 100644 src/app/pages/manage/kyc/presenter/dialog/dialog.component.ts diff --git a/src/app/@common/utils/thaidate.pipe.ts b/src/app/@common/utils/thaidate.pipe.ts new file mode 100644 index 0000000..38c9649 --- /dev/null +++ b/src/app/@common/utils/thaidate.pipe.ts @@ -0,0 +1,19 @@ +import { Pipe, PipeTransform } from '@angular/core'; + +@Pipe({ + name: 'thaidate', + pure :true +}) +export class ThaidatePipe implements PipeTransform { + + transform(value: string): string { + if(!value) return '-' + let date = new Date(value).toLocaleDateString('th-TH', { + year: 'numeric', + month: 'short', + day: 'numeric', + }) + return date + } + +} diff --git a/src/app/app.shared.ts b/src/app/app.shared.ts index 65fc96a..0d447e1 100644 --- a/src/app/app.shared.ts +++ b/src/app/app.shared.ts @@ -1,6 +1,6 @@ // ANGULAR -import { LOCALE_ID, NgModule } from "@angular/core"; -import { CommonModule } from "@angular/common"; +import { Injectable, LOCALE_ID, NgModule } from "@angular/core"; +import { CommonModule, registerLocaleData } from "@angular/common"; import { FormsModule, ReactiveFormsModule } from "@angular/forms"; // MATERIAL @@ -10,7 +10,7 @@ import { MatSortModule } from "@angular/material/sort"; import { MatProgressSpinnerModule } from "@angular/material/progress-spinner"; import { MatCardModule } from "@angular/material/card"; import { MatDatepickerModule } from "@angular/material/datepicker"; -import { MatNativeDateModule, MatRippleModule } from "@angular/material/core"; +import { DateAdapter, MAT_DATE_FORMATS, MatNativeDateModule, MatRippleModule, NativeDateAdapter } from "@angular/material/core"; import { MatProgressBarModule } from "@angular/material/progress-bar"; import { MatButtonToggleModule } from "@angular/material/button-toggle"; import { MatGridListModule } from "@angular/material/grid-list"; @@ -40,7 +40,36 @@ import { CanDirective } from "./utils/can.directive"; import { AllowRoleDirective } from "./utils/allow-role.directives"; import { CurrencyInputMaskDirective } from "./@common/utils/CurrencyInputMask"; import { NumberOnlyDirective } from "./@common/utils/NumberOnlyDirective"; +import { ThaidatePipe } from "./@common/utils/thaidate.pipe"; +import localeTh from '@angular/common/locales/th'; +registerLocaleData(localeTh) +@Injectable() +export class AppDateAdapter extends NativeDateAdapter { + format(date: Date, displayFormat: Object): string { + let monthNamesThai = ["ม.ค.", "ก.พ.", "มี.ค.", "เม.ย.", "พ.ค.", "มิ.ย.","ก.ค.", "ส.ค.", "ก.ย.", "ต.ค.", "พ.ย.", "ธ.ค"]; + date.setHours(7) + let day: string = date.getDate().toLocaleString() + day = +day < 10 ? '0' + day : day; + let year = date.getFullYear(); + return `${day}/${monthNamesThai[date.getMonth()]}/${year + 543}`; + } +} +export const PICK_FORMATS = { + parse: { + dateInput: { + month: 'short', + year: 'numeric', + day: 'numeric' + } + }, + display: { + dateInput: 'input', + monthYearLabel: { day: 'numeric', year: 'numeric', month: 'long' }, + dateA11yLabel: { year: 'numeric', month: 'long', day: 'numeric' }, + monthYearA11yLabel: { year: 'numeric', month: 'long' } + } +}; const MAT = [ MatAutocompleteModule, @@ -104,7 +133,8 @@ const PIPES = [ DateFormat, DateDiff, CurrencyInputMaskDirective, - NumberOnlyDirective + NumberOnlyDirective, + ThaidatePipe ]; const PROVIDERS: any = [ @@ -112,7 +142,10 @@ const PROVIDERS: any = [ provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: appearance }, - { provide: LOCALE_ID, useValue: "en-GB" } + { provide: LOCALE_ID, useValue: 'th-TH' }, + { provide: MAT_DATE_FORMATS, useValue: PICK_FORMATS }, + { provide: DateAdapter, useClass: AppDateAdapter }, +// { provide: LOCALE_ID, useValue: "en-GB" } ]; @NgModule({ diff --git a/src/app/pages/manage/kyc/container/kyc/kyc.container.html b/src/app/pages/manage/kyc/container/kyc/kyc.container.html index e42b219..a99c818 100644 --- a/src/app/pages/manage/kyc/container/kyc/kyc.container.html +++ b/src/app/pages/manage/kyc/container/kyc/kyc.container.html @@ -1 +1,4 @@ - \ No newline at end of file + + \ No newline at end of file diff --git a/src/app/pages/manage/kyc/container/kyc/kyc.container.ts b/src/app/pages/manage/kyc/container/kyc/kyc.container.ts index 4a165ba..1bdd246 100644 --- a/src/app/pages/manage/kyc/container/kyc/kyc.container.ts +++ b/src/app/pages/manage/kyc/container/kyc/kyc.container.ts @@ -1,6 +1,11 @@ -import { Component } from '@angular/core'; -import { Observable } from 'rxjs'; +import { ChangeDetectorRef, Component } from '@angular/core'; +import { Observable, catchError, switchMap, tap, throwError } from 'rxjs'; +import { IDialogConfig, CDialogConfig } from 'src/app/@common/interface/Dialog'; +import { EAction, EText } from 'src/app/@config/app'; import { KycService } from 'src/app/core/service/common/kyc.service'; +import { DialogComponent } from '../../presenter/dialog/dialog.component'; +import { MatDialog } from '@angular/material/dialog'; +import { AppService } from 'src/app/app.service'; @Component({ selector: 'app-kyc', @@ -8,10 +13,34 @@ import { KycService } from 'src/app/core/service/common/kyc.service'; styleUrls: ['./kyc.container.scss'] }) export class KycContainer { + dialogConfig: IDialogConfig = CDialogConfig kyc$ = new Observable(); constructor( - private kycService: KycService + private kycService: KycService, + private dialog: MatDialog, + private appService: AppService, + private cdr: ChangeDetectorRef ) { this.kyc$ = this.kycService.getAll(); } + + edit(uid){ + this.dialogConfig.data.action = EAction.UPDATE; + this.dialogConfig.data.ids = uid + const dialogRef = this.dialog.open(DialogComponent,this.dialogConfig); + const edit$ = dialogRef.afterClosed().pipe( + switchMap((res) => { + if(res === 'success'){ + return this.kyc$ = this.kycService.getAll().pipe( + catchError((err) => { + this.appService.message(EAction.ERROR, EText.ERROR); + return throwError(() => err) + }), + tap(() => this.cdr.detectChanges()) + ) + } + }) + ); + return edit$.subscribe(); + } } diff --git a/src/app/pages/manage/kyc/kyc.module.ts b/src/app/pages/manage/kyc/kyc.module.ts index 6bc215e..9703f6b 100644 --- a/src/app/pages/manage/kyc/kyc.module.ts +++ b/src/app/pages/manage/kyc/kyc.module.ts @@ -5,6 +5,7 @@ import { KycRouter } from "./router/router"; import { KycContainer } from "./container/kyc/kyc.container"; import { NgModule } from "@angular/core"; import { ListComponent } from "./presenter/list/list.component"; +import { DialogComponent } from './presenter/dialog/dialog.component'; const routes: Routes = [ @@ -24,7 +25,8 @@ const routes: Routes = [ declarations: [ KycRouter, KycContainer, - ListComponent + ListComponent, + DialogComponent ], imports: [ AppSharedModule, diff --git a/src/app/pages/manage/kyc/presenter/dialog/dialog.component.html b/src/app/pages/manage/kyc/presenter/dialog/dialog.component.html new file mode 100644 index 0000000..896ff39 --- /dev/null +++ b/src/app/pages/manage/kyc/presenter/dialog/dialog.component.html @@ -0,0 +1,91 @@ +
+
+
+

More Detail

+ clear +
+
+
+
+
+ เลขประจำตัวประชาชน + + + + +
+
+ +
+
+ คำนำหน้าชื่อ + + + + +
+
+ +
+
+ ชื่อ + + + + +
+
+ +
+
+ นามสกุล + + + + +
+
+ +
+
+ เกิดวันที่ + + + + + + +
+
+ +
+
+ วันบัตรหมดอายุ + + + + + + +
+
+ +
+
+ เลขหลังบัตร + + + + +
+
+
+
+
+ + +
+
+
+ + \ No newline at end of file diff --git a/src/app/pages/manage/kyc/presenter/dialog/dialog.component.scss b/src/app/pages/manage/kyc/presenter/dialog/dialog.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/pages/manage/kyc/presenter/dialog/dialog.component.spec.ts b/src/app/pages/manage/kyc/presenter/dialog/dialog.component.spec.ts new file mode 100644 index 0000000..feb64ee --- /dev/null +++ b/src/app/pages/manage/kyc/presenter/dialog/dialog.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DialogComponent } from './dialog.component'; + +describe('DialogComponent', () => { + let component: DialogComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ DialogComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(DialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/manage/kyc/presenter/dialog/dialog.component.ts b/src/app/pages/manage/kyc/presenter/dialog/dialog.component.ts new file mode 100644 index 0000000..f8f636a --- /dev/null +++ b/src/app/pages/manage/kyc/presenter/dialog/dialog.component.ts @@ -0,0 +1,90 @@ +import { Location } from '@angular/common'; +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 } 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 { KycService } from 'src/app/core/service/common/kyc.service'; + +@Component({ + selector: 'app-dialog', + templateUrl: './dialog.component.html', + styleUrls: ['./dialog.component.scss'] +}) +export class DialogComponent extends BaseForm implements OnInit { + + constructor( + public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public dialog: IDialogConfigData, + public router: Router, + public activatedRoute: ActivatedRoute, + public fb: FormBuilder, + public location: Location, + public kycService: KycService, + public appService: AppService, + public cdr: ChangeDetectorRef + ) { + super(router, activatedRoute, fb, location) + } + + ngOnInit(): void { + if (this.dialog.action === EAction.UPDATE){ + this.state = 'edit'; + this.getData(); + } + } + + createForm(): FormGroup { + return this.fb.group({ + kyc_uid: null, + id_card: null, + code_back_card: null, + exp_date: null, + prefix_name: null, + first_name: null, + last_name: null, + birth_date: [null], + phone: [null], + email: null, + image_front_url: [null], + image_back_url: [null], + is_pass: null, + status_id: [null], + created_by: null, + created_datetime: null, + updated_by: null, + updated_datetime: null, + owner_agency_uid: null + }) + } + + getData() { + if (!this.dialog.ids) this.appService.message(EAction.INFO, EText.NO_DATA); + return this.kycService.get(this.dialog.ids).pipe( + tap((res) => this.form.patchValue(res)), + tap(() => this.cdr.detectChanges()), + catchError((err) => { + this.appService.message(EAction.ERROR, EText.ERROR); + return throwError(() => err) + }) + ).subscribe() + } + + status(isApprove: boolean){ + const form = this.form.getRawValue(); + form.is_pass = isApprove; + const save$ = this.kycService.update2(form) + return save$.pipe( + tap(() => this.appService.message(EAction.SUCCESS, EText.UPDATE)), + tap(() => this.dialogRef.close('success')), + catchError((err) => { + this.appService.message(EAction.ERROR, EText.ERROR); + return throwError(() => err) + }) + ).subscribe() + } +} diff --git a/src/app/pages/manage/kyc/presenter/list/list.component.html b/src/app/pages/manage/kyc/presenter/list/list.component.html index 92aee6b..90a376f 100644 --- a/src/app/pages/manage/kyc/presenter/list/list.component.html +++ b/src/app/pages/manage/kyc/presenter/list/list.component.html @@ -5,13 +5,13 @@
- +
- +
@@ -24,80 +24,81 @@ - ลำดับ - {{item.code}} + ลำดับ + {{getIndex(i)}} - เลขบัตรประชาชน - - {{item.name }} + เลขบัตรประชาชน + + {{item.id_card}} - เลขหลังบัตร - {{item?.masterProductBrand.name }} + เลขหลังบัตร + {{item.code_back_card}} วันหมดอายุ - {{item.size }} + {{item.exp_date | thaidate}} - คำนำหน้า - {{item.weight }} + คำนำหน้า + {{item.prefix_name}} ชื่อ - {{item.color }} + {{item.first_name}} นามสกุล - {{item.year }} + {{item.last_name}} - วัน เดือน ปีเกิด + วัน เดือน ปีเกิด -
{{item.price | number : '1.2-2'}}
+
{{item.birth_date | thaidate}}
 - เบอร์โทรศัพท์ + เบอร์โทรศัพท์ -
{{item.latestPrice | number : '1.2-2' }}
+
{{item.phone}}
 - E-mail - + E-mail + +
{{item.email}}
+ + + + More Detail +
-
- +
+
- - More Detail - -
{{item.latestPrice | number : '1.2-2' }}
- - - สถานะ - -
{{item.latestPrice | number : '1.2-2' }}
+ สถานะ + +
Approve
+
Reject
- + \ No newline at end of file diff --git a/src/app/pages/manage/kyc/presenter/list/list.component.ts b/src/app/pages/manage/kyc/presenter/list/list.component.ts index 76bc684..50589f9 100644 --- a/src/app/pages/manage/kyc/presenter/list/list.component.ts +++ b/src/app/pages/manage/kyc/presenter/list/list.component.ts @@ -1,17 +1,52 @@ -import { Component, Input } from '@angular/core'; +import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core'; +import { Subject, debounceTime, distinctUntilChanged } from 'rxjs'; +import { BaseList } from 'src/app/core/base/base-list'; @Component({ selector: 'app-list', templateUrl: './list.component.html', styleUrls: ['./list.component.scss'] }) -export class ListComponent { +export class ListComponent extends BaseList implements OnChanges { @Input() kycList: any = []; + @Output() edit = new EventEmitter(); + @Output() search = new EventEmitter(); + query = { + name: null, + card: null + } + name: string; + filterCard: Subject = new Subject(); constructor() { - + super() + this.filterCard.pipe( + debounceTime(500), + distinctUntilChanged() + ).subscribe(() => this.onSearch()) } - getData(event: any) { - + ngOnChanges(): void { + this.kycList = this.updateMatTable(this.kycList? this.kycList:[]) } + + onEdit(uid){ + this.edit.emit(uid) + } + + onFilterCard($event) { + // this.filterCard.next($event); + const filterValue = this.query.card; + this.kycList.filter = filterValue.trim().toLowerCase(); + } + + onFilterName($event){ + const filterValue = this.query.name; + this.kycList.filter = filterValue.trim().toLowerCase(); + } + + onSearch(){ + const filterValue = this.query.card; + this.kycList.filter = filterValue.trim().toLowerCase(); + } + } diff --git a/src/app/pages/setting/banner/container/banner/banner.container.ts b/src/app/pages/setting/banner/container/banner/banner.container.ts index cfeb171..e9d7d17 100644 --- a/src/app/pages/setting/banner/container/banner/banner.container.ts +++ b/src/app/pages/setting/banner/container/banner/banner.container.ts @@ -38,6 +38,7 @@ export class BannerContainer { }) ) } + return of([]); }) ).subscribe() } @@ -57,6 +58,7 @@ export class BannerContainer { tap(() => this.cdr.detectChanges()) ) } + return of([]); }) ) return edit$.subscribe(); diff --git a/src/app/pages/setting/banner/presenter/dialog/dialog.component.html b/src/app/pages/setting/banner/presenter/dialog/dialog.component.html index 1659cdd..1a47974 100644 --- a/src/app/pages/setting/banner/presenter/dialog/dialog.component.html +++ b/src/app/pages/setting/banner/presenter/dialog/dialog.component.html @@ -59,7 +59,7 @@
แนบรูป
-
+
diff --git a/src/app/pages/setting/banner/presenter/dialog/dialog.component.ts b/src/app/pages/setting/banner/presenter/dialog/dialog.component.ts index 7803205..f1008d2 100644 --- a/src/app/pages/setting/banner/presenter/dialog/dialog.component.ts +++ b/src/app/pages/setting/banner/presenter/dialog/dialog.component.ts @@ -16,7 +16,6 @@ import { BannerService } from 'src/app/core/service/common/banner.service'; styleUrls: ['./dialog.component.scss'] }) export class DialogComponent extends BaseForm implements OnInit { - data = false; constructor( public dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) public dialog: IDialogConfigData, diff --git a/src/app/pages/setting/promotion/container/promotion/promotion.container.ts b/src/app/pages/setting/promotion/container/promotion/promotion.container.ts index c899d4c..3f56975 100644 --- a/src/app/pages/setting/promotion/container/promotion/promotion.container.ts +++ b/src/app/pages/setting/promotion/container/promotion/promotion.container.ts @@ -1,5 +1,5 @@ import { ChangeDetectorRef, Component } from '@angular/core'; -import { Observable, catchError, filter, switchMap, tap, throwError } from 'rxjs'; +import { Observable, catchError, filter, of, switchMap, tap, throwError } from 'rxjs'; import { IDialogConfig, CDialogConfig } from 'src/app/@common/interface/Dialog'; import { EAction, EText } from 'src/app/@config/app'; import { PromotionService } from 'src/app/core/service/common/promotion.service'; @@ -37,6 +37,7 @@ export class PromotionContainer { }) ) } + return of([]); }) ).subscribe() } @@ -55,6 +56,7 @@ export class PromotionContainer { }) ) } + return of([]); }) ) return edit$.subscribe() diff --git a/src/styles/app.scss b/src/styles/app.scss index 92d130f..40930bb 100644 --- a/src/styles/app.scss +++ b/src/styles/app.scss @@ -99,6 +99,18 @@ mat-label{ // material // -------------------------------------------------------------------------------- +.mat-calendar-previous-button::after, .mat-calendar-next-button::after { + top: 0; + left: 0; + right: 0; + bottom: 0; + position: absolute; + content: ""; + margin: 10.5px !important; + border: 0 solid currentColor; + border-top-width: 2px; +} + .mat-body, .mat-body-2, .mat-typography .mat-body, .mat-typography .mat-body-2, .mat-typography { font: 400 14px/20px $fontFamily !important; } @@ -692,18 +704,28 @@ iframe { .btn-submit { background: #624DE3 !important; color: #fff !important; - &:hover { background: #5a45e3 !important; } } +.btn-green { + background: green !important; + color: #fff !important; + transition: all 300ms; + &:hover { + background: #5a45e3 !important; + transition: all 300ms; + } +} + .btn-red { background: #A30D11 !important; color: #fff !important; - + transition: all 300ms; &:hover { - background: #A30D11 !important; + transition: all 300ms; + background: gray !important; } }