[feat] - add authen and display transaction data

src/app/pages/@layouts/layouts.component.html

@@ -16,8 +16,8 @@
                 <nav class="main-menu-nav">
                     <ng-template #menuTemplate let-menus>
                         <div *ngFor="let item of menus; let i = index">
-                            <ng-container *ngIf="roleCheck(item.permission)">
-                                <ng-container [ngSwitch]="item.type">
+                            <ng-container *ngIf="roleCheck(item?.permission)">
+                                <ng-container [ngSwitch]="item?.type">
                                     <ng-container *ngSwitchCase="'heading'">
                                         <div class="menu-heading">{{ item.name }}</div>
                                     </ng-container>
@@ -141,4 +141,4 @@
         <i class="bi bi-power"></i>
         ออกจากระบบ
     </a>
-</mat-menu>
+</mat-menu>

src/app/pages/@layouts/layouts.component.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { AppService } from '../../app.service';
-import { MENU } from "../../@config/menus";
+import { MENU, NOT_ADMIN, ROLE_ADMIN } from "../../@config/menus";
 
 @Component({
     selector: 'app-pages-layouts',
@@ -35,6 +35,20 @@ export class PagesLayoutsComponent implements OnInit {
     }
     async initAuth() {
         this.auth = this.app.auth();
+        console.log(this.auth.isAdmin)
+        this.menus = this.menus.map(r => {
+          if(this.auth.isAdmin){
+            if(r.roles.includes(ROLE_ADMIN)) return {
+              ...r,
+              children: r.children.length ? r.children.filter(c => r.roles.includes(ROLE_ADMIN)) : []
+            }
+          } else {
+            if(r.roles.includes(NOT_ADMIN)) return {
+              ...r,
+              children: r.children.length ? r.children.filter(c => r.roles.includes(NOT_ADMIN)) : []
+            }
+          }
+        })
 
         if (!this.permissionCheck) {
             // const users = await lastValueFrom(this.app.get(`${API.users}/getById/${this.auth.id}`));

src/app/pages/report/transactions/container/transactions/transactions.container.html

@@ -1 +1 @@
-<app-list [reportList]="report$ | async"></app-list>
+<app-list [reportList]="report$ | async" (onSearch)="onSearchTransaction($event)"></app-list>

src/app/pages/report/transactions/container/transactions/transactions.container.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
-import { Observable } from 'rxjs';
+import { Observable, map } from 'rxjs';
 import { ReportService } from 'src/app/core/service/common/report.service';
+import { TransactionService } from 'src/app/core/service/transaction/transaction.service';
 
 @Component({
     selector: 'app-transactions',
@@ -10,8 +11,34 @@ import { ReportService } from 'src/app/core/service/common/report.service';
 export class TransactionsContainer {
     report$ = new Observable();
     constructor(
-        private reportService: ReportService
+
+        private transactionSV: TransactionService
     ) {
-        this.report$ = this.reportService.getAll()
+        // this.report$ = this.transactionSV.getAll()
     }
+
+    onSearchTransaction(event) {
+      let { createDatefrom, createDateto } = event
+      let req = {
+        "id": "",
+        "payeeUserAccountId": "",
+        "payerUserAccountId": "",
+        "invoiceId": "",
+        "referencE1": "",
+        "referencE2": "",
+        "referencE3": "",
+        "paymentStatus": "",
+        "paymentChannel": "",
+        "qrId": "",
+        "createDatefrom": createDatefrom,
+        "createDateto": createDateto,
+        "sattleDate": "",
+        "voidDate": "",
+        "refundDate": "",
+        "cancelDate": ""
+      }
+
+      this.report$  = this.transactionSV.add(req).pipe(map( (e: any) => e.data))
+    }
+
 }

src/app/pages/report/transactions/presenter/list/list.component.html

@@ -16,18 +16,23 @@
             </div>
             <div class="col-span-2 xl:col-span-3 xl:order-2">
                 <mat-form-field >
-                    <input matInput [matDatepicker]="startDate" placeholder="วันที่ชำระ" (dateChange)="test()" />
+                    <input matInput [matDatepicker]="startDate" placeholder="วันที่ชำระ" [(ngModel)]="request.createDatefrom"   required/>
                     <mat-datepicker-toggle [for]="startDate" matSuffix></mat-datepicker-toggle>
                     <mat-datepicker #startDate></mat-datepicker>
                 </mat-form-field>
             </div>
             <div class="col-span-2 xl:col-span-3 xl:order-2">
                 <mat-form-field >
-                    <input matInput [matDatepicker]="endDate" placeholder="ถึงวันที่" (dateChange)="test()"/>
+                    <input matInput [matDatepicker]="endDate" placeholder="ถึงวันที่" [(ngModel)]="request.createDateto"  required/>
                     <mat-datepicker-toggle [for]="endDate" matSuffix></mat-datepicker-toggle>
                     <mat-datepicker #endDate></mat-datepicker>
                 </mat-form-field>
             </div>
+
+            <button type="button" class="btn btn-create" (click)="emitSearch()">
+              <i class="bi bi-plus"></i>
+              ค้นหา
+          </button>
         </div>
     </div>
 
@@ -36,7 +41,9 @@
             <table class="table table-main" mat-table [dataSource]="reportList" matSort>
                 <tr mat-header-row *matHeaderRowDef="['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15']"></tr>
                 <tr mat-row *matRowDef="let row; columns: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15'];"></tr>
-
+                <tr class="mat-row" *matNoDataRow>
+                  <td class="no-data" colspan="100%">ไม่มีข้อมูล</td>
+                </tr>
                 <ng-container matColumnDef="1">
                     <th mat-header-cell *matHeaderCellDef class="tac" mat-sort-header>ลำดับ</th>
                     <td mat-cell *matCellDef="let item; let i = index" width="150" class="tac">{{getIndex(i)}}</td>
@@ -89,7 +96,7 @@
                 <ng-container matColumnDef="10">
                     <th mat-header-cell *matHeaderCellDef class="tal" width="150" mat-sort-header>paymentStatus</th>
                     <td mat-cell *matCellDef="let item" class="">
-                        <div class="b-color-green"> {{ item.referencE3 }}</div>
+                        <div class="b-color-green"> {{ item.paymentStatus }}</div>
                     </td>
                 </ng-container>
                 <ng-container matColumnDef="11">
@@ -120,7 +127,7 @@
                     <th mat-header-cell *matHeaderCellDef width="80">More Detail</th>
                     <td mat-cell *matCellDef="let item">
                         <div class="action flex justify-center">
-                            <div class="item">
+                            <div class="item" (click)="openDialog(item.payerUserAccountId)">
                                 <i class="bi bi-file-earmark-text icon-doc"></i>
                             </div>
                         </div>
@@ -131,4 +138,4 @@
         <!-- <div *ngIf="dataSourceCount === 0" class="no-data"></div> -->
         <mat-paginator [pageSizeOptions]="[5,10,20]" showFirstLastButtons></mat-paginator>
     </div>
-</div>
+</div>

src/app/pages/report/transactions/presenter/list/list.component.ts

@@ -1,17 +1,50 @@
-import { Component, Input } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { EAction, EText } from 'src/app/@config/app';
+import { AppService } from 'src/app/app.service';
+import { BaseList } from 'src/app/core/base/base-list';
+import { TransactionDialogComponent } from '../transaction-dialog/transaction-dialog.component';
 
 @Component({
     selector: 'app-list',
     templateUrl: './list.component.html',
     styleUrls: ['./list.component.scss']
 })
-export class ListComponent {
+export class ListComponent  extends BaseList implements OnChanges {
     @Input() reportList: any = [];
-    constructor() {
+    @Output() onSearch = new EventEmitter()
 
+    request = {
+      createDatefrom: null,
+      createDateto: null
     }
 
-    test(){
-        console.log('test')
+    constructor(
+      private appSV: AppService,
+      private dialog: MatDialog,
+    ) {
+        super()
     }
+  ngOnChanges(changes: SimpleChanges): void {
+    if('reportList' in  changes){
+      this.reportList = this.updateMatTable(changes.reportList.currentValue || [])
+    }
+  }
+
+  emitSearch(){
+      if(!this.request.createDatefrom){
+        return this.appSV.message('info', 'โปรดเลือกวันที่ชำระ')
+      }
+
+      if(!this.request.createDateto){
+        return this.appSV.message('info', 'โปรดเลือกวันที่ถึงวันที่')
+      }
+      this.onSearch.emit(this.request)
+  }
+
+  openDialog(payerUserAccountId){
+    console.log(payerUserAccountId)
+    this.dialogConfig.data.ids = payerUserAccountId
+    const dialogRef = this.dialog.open(TransactionDialogComponent,this.dialogConfig);
+  }
 }

src/app/pages/report/transactions/presenter/transaction-dialog/transaction-dialog.component.html

@@ -0,0 +1,90 @@
+<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">User Name: </mat-label>
+                      <span class="col-span-7">
+                          {{ userInformation?.userName || '-'}}
+                      </span>
+                      <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>
+                      <span class="col-span-7">
+                          {{ userInformation?.fullName  || '-'}}
+                      </span>
+                      <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>
+                      <span class="col-span-7">
+                          {{ userInformation?.email || '-'}}
+                      </span>
+                      <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>
+                      <span class="col-span-7">
+                          {{ userInformation?.phoneNumber || '-'}}
+                      </span>
+                      <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>
+                      <span class="col-span-7">
+                        {{ userInformation?.personalCardId || '-'}}
+                    </span>
+                      <!-- <mat-form-field class="col-span-7">
+                          <input matInput formControlName="birth_date" [matDatepicker]="birthdate" readonly />
+                          <mat-datepicker-toggle [for]="birthdate" disabled matSuffix></mat-datepicker-toggle>
+                          <mat-datepicker #birthdate></mat-datepicker>
+                      </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-7">
+                          <input matInput formControlName="exp_date" [matDatepicker]="expdate" readonly />
+                          <mat-datepicker-toggle [for]="expdate" disabled matSuffix></mat-datepicker-toggle>
+                          <mat-datepicker #expdate></mat-datepicker>
+                      </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-7">
+                          <input matInput required formControlName="code_back_card" readonly type="text">
+                      </mat-form-field> -->
+                      <span class="col-span-1"></span>
+                  </div>
+              </div>
+          </div>
+      </div>
+  </div>
+</form>
+
+<!-- <pre>{{form.getRawValue() | json}}</pre> -->

src/app/pages/report/transactions/presenter/transaction-dialog/transaction-dialog.component.spec.ts

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

src/app/pages/report/transactions/presenter/transaction-dialog/transaction-dialog.component.ts

@@ -0,0 +1,35 @@
+import { CDialogConfig } from './../../../../../@common/interface/Dialog';
+import { ChangeDetectorRef, Component, Inject } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { Router, ActivatedRoute } from '@angular/router';
+import { IDialogConfigData } from 'src/app/@common/interface/Dialog';
+import { EAction } from 'src/app/@config/app';
+import { AppService } from 'src/app/app.service';
+import { KycService } from 'src/app/core/service/common/kyc.service';
+import { UserCathayService } from 'src/app/core/service/users/user-cathay.service';
+
+
+
+@Component({
+  selector: 'app-transaction-dialog',
+  templateUrl: './transaction-dialog.component.html',
+  styleUrls: ['./transaction-dialog.component.scss']
+})
+export class TransactionDialogComponent {
+  userInformation
+  constructor(
+    public dialogRef: MatDialogRef<TransactionDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any,
+    public router: Router,
+    public activatedRoute: ActivatedRoute,
+    public fb: FormBuilder,
+    private userCathaySV: UserCathayService
+
+) {
+
+  this.userCathaySV.getUserCathay(this.data.ids)
+    .subscribe((data: any) => this.userInformation = {...data.data})
+}
+
+}

src/app/pages/report/transactions/transactions.module.ts

@@ -5,6 +5,7 @@ import { NgModule } from "@angular/core";
 import { ListComponent } from "./presenter/list/list.component";
 import { TransactionsRouter } from "./router/router";
 import { TransactionsContainer } from "./container/transactions/transactions.container";
+import { TransactionDialogComponent } from './presenter/transaction-dialog/transaction-dialog.component';
 
 
 const routes: Routes = [
@@ -24,7 +25,8 @@ const routes: Routes = [
     declarations: [
         TransactionsRouter,
         TransactionsContainer,
-        ListComponent
+        ListComponent,
+        TransactionDialogComponent
     ],
     imports: [
         AppSharedModule,