[feat] - add filter transaction and display payer payee information

src/app/auth/login/login.component.ts

@@ -46,13 +46,22 @@ export class LoginComponent implements OnInit {
         try {
             // const result = await lastValueFrom(this.authService.login(this.dataForm));
             let cathayResult: any = await lastValueFrom(this.cathayAuthService.login(this.cathayForm));
+            let isAdmin = cathayResult.token.userName == ROLE_ADMIN ? true : false
             cathayResult = {
               ...cathayResult,
-              isAdmin: cathayResult.token.userName == ROLE_ADMIN ? true : false
+              isAdmin: isAdmin
             }
             this.appService.setToken(cathayResult.token.token)
             this.appService.setAuth(cathayResult);
+
+            if(isAdmin){
               return this.router.navigate(['/pages']);
+            }
+
+            if(!isAdmin){
+              return this.router.navigate(['/pages/report/transactions']);
+            }
+
         } catch (err) {
             return this.appService.message(EAction.ERROR, EText.NO_DATA);
         }

src/app/pages/report/transactions/components/user-information/user-information.component.html

@@ -0,0 +1,79 @@
+<h2>{{ title }}</h2>
+<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">
+                {{ user?.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">
+                {{ user?.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">
+                {{ user?.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">
+                {{ user?.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">
+              {{ user?.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>

src/app/pages/report/transactions/components/user-information/user-information.component.spec.ts

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

src/app/pages/report/transactions/components/user-information/user-information.component.ts

@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-user-information',
+  templateUrl: './user-information.component.html',
+  styleUrls: ['./user-information.component.scss']
+})
+export class UserInformationComponent {
+  @Input() title: string = ''
+  @Input() user
+}

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

@@ -1,5 +1,7 @@
 import { Component } from '@angular/core';
 import { Observable, map } from 'rxjs';
+import { AppService } from 'src/app/app.service';
+import { AuthService } from 'src/app/core/service/auth/auth.service';
 import { ReportService } from 'src/app/core/service/common/report.service';
 import { TransactionService } from 'src/app/core/service/transaction/transaction.service';
 
@@ -10,11 +12,11 @@ import { TransactionService } from 'src/app/core/service/transaction/transaction
 })
 export class TransactionsContainer {
     report$ = new Observable();
+    private isAdmin: boolean = false
     constructor(
-
+        private transactionSV: TransactionService,
-        private transactionSV: TransactionService
+        private appSV: AppService
     ) {
-        // this.report$ = this.transactionSV.getAll()
     }
 
     onSearchTransaction(event) {
@@ -22,7 +24,7 @@ export class TransactionsContainer {
       let req = {
         "id": "",
         "payeeUserAccountId": "",
-        "payerUserAccountId": "",
+        "payerUserAccountId": this.isAdmin ? "" : this.appSV.auth().token.id,
         "invoiceId": "",
         "referencE1": "",
         "referencE2": "",

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

@@ -90,7 +90,8 @@
                 <ng-container matColumnDef="9">
                     <th mat-header-cell *matHeaderCellDef class="tal" width="150" mat-sort-header>ref 3</th>
                     <td mat-cell *matCellDef="let item" class="">
-                        <div class="b-color-orange"> {{item.price | number : '1.2-2'}}</div>
+                      {{item.referencE3 }}
+                        <!-- <div class="b-color-orange"> {{item.referencE3 }}</div> -->
                     </td>
                 </ng-container>
                 <ng-container matColumnDef="10">
@@ -127,7 +128,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" (click)="openDialog(item.payerUserAccountId)">
+                            <div class="item" (click)="openDialog(item)">
                                 <i class="bi bi-file-earmark-text icon-doc"></i>
                             </div>
                         </div>

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

@@ -25,6 +25,7 @@ export class ListComponent  extends BaseList implements OnChanges {
     ) {
         super()
     }
+
   ngOnChanges(changes: SimpleChanges): void {
     if('reportList' in  changes){
       this.reportList = this.updateMatTable(changes.reportList.currentValue || [])
@@ -42,9 +43,12 @@ export class ListComponent  extends BaseList implements OnChanges {
       this.onSearch.emit(this.request)
   }
 
-  openDialog(payerUserAccountId){
+  openDialog(transaction){
-    console.log(payerUserAccountId)
+    console.log(transaction)
-    this.dialogConfig.data.ids = payerUserAccountId
+    this.dialogConfig.data.datas = {
+      payerUserAccountId: transaction.payerUserAccountId,
+      payeeUserAccountId: transaction.payeeUserAccountId
+    }
     const dialogRef = this.dialog.open(TransactionDialogComponent,this.dialogConfig);
   }
 }

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

@@ -5,84 +5,8 @@
           <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 ">
+          <app-user-information title="ข้อมูลผู้จ่ายเงิน" [user]="userPayerInformation"></app-user-information>
-              <div class="col-span-full">
+          <app-user-information title="ข้อมูลผู้รับเงิน" [user]="userPayeeInformation"></app-user-information>
-                  <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>

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

@@ -8,6 +8,40 @@ 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';
+export interface UserCathay {
+  fullName: string
+  nationalProfileId: any
+  createdDate: string
+  updatedDate: string
+  mobileDeviceId: string
+  personalCardId: string
+  parentId: string
+  pinLogin: string
+  userType: string
+  customerTypeId: string
+  genderCode: any
+  maritalStatusCode: any
+  titleCode: any
+  lockoutEndDateUtc: any
+  roleId: any
+  role: any
+  roleList: any
+  id: string
+  userName: string
+  normalizedUserName: string
+  email: string
+  normalizedEmail: string
+  emailConfirmed: boolean
+  passwordHash: string
+  securityStamp: string
+  concurrencyStamp: string
+  phoneNumber: string
+  phoneNumberConfirmed: boolean
+  twoFactorEnabled: boolean
+  lockoutEnd: any
+  lockoutEnabled: boolean
+  accessFailedCount: number
+}
 
 
 
@@ -17,7 +51,8 @@ import { UserCathayService } from 'src/app/core/service/users/user-cathay.servic
   styleUrls: ['./transaction-dialog.component.scss']
 })
 export class TransactionDialogComponent {
-  userInformation
+  userPayeeInformation: UserCathay
+  userPayerInformation: UserCathay
   constructor(
     public dialogRef: MatDialogRef<TransactionDialogComponent>,
     @Inject(MAT_DIALOG_DATA) public data: any,
@@ -28,8 +63,14 @@ export class TransactionDialogComponent {
 
 ) {
 
-  this.userCathaySV.getUserCathay(this.data.ids)
+
-    .subscribe((data: any) => this.userInformation = {...data.data})
+  let { payerUserAccountId, payeeUserAccountId } = this.data.datas
+
+  this.userCathaySV.getUserCathay(payerUserAccountId)
+    .subscribe((data: any) => this.userPayerInformation = {...data.data})
+
+  this.userCathaySV.getUserCathay(payeeUserAccountId)
+    .subscribe(r => this.userPayeeInformation  = {...data.data})
 }
 
 }

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

@@ -6,6 +6,7 @@ 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';
+import { UserInformationComponent } from './components/user-information/user-information.component';
 
 
 const routes: Routes = [
@@ -26,7 +27,8 @@ const routes: Routes = [
         TransactionsRouter,
         TransactionsContainer,
         ListComponent,
-        TransactionDialogComponent
+        TransactionDialogComponent,
+        UserInformationComponent
     ],
     imports: [
         AppSharedModule,