-เชื่อมโยง api search กับ frontend

-ปรับปรุงระบบ state
-เพิ่ม ระบบ pipe dtmtodatetime

accounting-ng-nuttakit/src/app/app-routing.module.ts

@@ -8,7 +8,7 @@ const routes: Routes = [
 
  { path: 'login', loadChildren: () => import('./controls/login-control/login-control.module').then(m => m.LoginControlModule) },
 
- { path: 'c', component: LicensePrivacyTermsComponent},
+ { path: 'license', component: LicensePrivacyTermsComponent},
 
   {
     path: 'main',
@@ -25,6 +25,8 @@ const routes: Routes = [
     ],
   },
 
+  // {path: 'license' , component: LicensePrivacyTermsComponent}
+
   { path: '', redirectTo: 'login', pathMatch: 'full' },
 
   { path: '**', redirectTo: 'login' }

accounting-ng-nuttakit/src/app/app.module.ts

@@ -21,7 +21,10 @@ import { LicensePrivacyTermsComponent } from './component/license-privacy-terms/
 // import { LoginPageComponent } from './component/login-page/login-page.component';
 // import { LoginContentComponent } from './content/login-content/login-content.component';
 
+
 import { provideCharts, withDefaultRegisterables } from 'ng2-charts';
+// import { AccDateFormatPipe } from './pipe/dtmtodatetime.pipe';
+// import { DtmtodatetimePipe } from './dtmtodatetime.pipe';
 
 @NgModule({
   declarations: [
@@ -30,6 +33,8 @@ import { provideCharts, withDefaultRegisterables } from 'ng2-charts';
     SidebarContentComponent,
     SidebarComponent,
     LicensePrivacyTermsComponent,
+    // AccDateFormatPipe
+    // DtmtodatetimePipe,
     // MainDashboardContentComponent,
     // MainDashboardComponent,
     // LoginForgotComponent,
@@ -51,6 +56,9 @@ import { provideCharts, withDefaultRegisterables } from 'ng2-charts';
     HttpClientModule,
     FontAwesomeModule
   ],
+  exports: [
+    // AccDateFormatPipe
+  ],
   providers: [provideCharts(withDefaultRegisterables())],
   bootstrap: [AppComponent]
 })

accounting-ng-nuttakit/src/app/component/main-dashboard/main-dashboard.component.html

@@ -125,22 +125,51 @@
           <span>ยอดเงิน</span>
           <span>บันทึก</span>
         </div>
-        <div class="ledger-row" *ngFor="let idx of ledgerEntries; let i = index;">
+      <!-- @for (idx of myActData; track i; let i = $index) {
-          <div class="ledger-main">
+          <div class="ledger-row">
-            <span class="pill" [ngClass]="idx.type == 'i' ? 'pill--income' : 'pill--expense'">
+            <div class="ledger-main">
-              {{ idx.type == 'i' ? 'รับ' : 'จ่าย' }}
+              <span class="pill" [ngClass]="idx.acttyp === 'i' ? 'pill--income' : 'pill--expense'">
-            </span>
+                {{ idx.type === 'i' ? 'รับ' : 'จ่าย' }}
-            <div>
+              </span>
-              <p class="ledger-title">{{ idx.title }}</p>
+
-              <p class="ledger-date">{{ idx.date }}</p>
+              <div>
+                <p class="ledger-title">{{ idx.title }}</p>
+                <p class="ledger-date">{{ idx.date }}</p>
+              </div>
             </div>
+
+            <span class="ledger-category">{{ idx.category }}</span>
+
+            <span class="ledger-amount" [ngClass]="idx.type === 'i' ? 'is-credit' : 'is-debit'">
+              {{ idx.amount }}
+            </span>
+
+            <span class="ledger-note">{{ idx.note }}</span>
           </div>
-          <span class="ledger-category">{{ idx.category }}</span>
+        } -->
-          <span class="ledger-amount" [ngClass]="idx.type == 'i' ? 'is-credit' : 'is-debit'">
+          @for (idx of myActData; track idx.actseq; let i = $index) {
-            {{ idx.amount }}
+            <div class="ledger-row">
-          </span>
+
-          <span class="ledger-note">{{ idx.note }}</span>
+              <div class="ledger-main">
-        </div>
+                <span class="pill" [ngClass]="idx.acttyp === 'i' ? 'pill--income' : 'pill--expense'">
+                  {{ idx.acttyp === 'i' ? 'รับ' : 'จ่าย' }}
+                </span>
+
+                <div>
+                  <p class="ledger-title">{{ idx.acttypnam }}</p>
+                  <p class="ledger-date">{{ (idx.actacpdtm ?? '') | dtmtodatetime }}</p>
+                </div>
+              </div>
+
+              <span class="ledger-category">{{ idx.actcatnam }}</span>
+
+              <span class="ledger-amount" [ngClass]="idx.acttyp === 'i' ? 'is-credit' : 'is-debit'">
+                {{ idx.actqty }}
+              </span>
+
+              <span class="ledger-note">{{ idx.actcmt }}</span>
+            </div>
+          }
       </div>
     </article>
   </section>

accounting-ng-nuttakit/src/app/component/main-dashboard/main-dashboard.component.ts

@@ -1,7 +1,7 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
 import { GeneralService } from '../../services/generalservice';
-import { IDropAct, IStateDrop, IStateResultResponse } from '../../interfaces/dashboard.interface'
+import { IDropAct, IStateDrop, IStateResultResponse, IActData } from '../../interfaces/dashboard.interface'
 import { DashboardStateService } from '../../services/state/dashboard-state.service';
 
 @Component({
@@ -17,6 +17,7 @@ export class MainDashboardComponent implements OnInit {
   isSubmitting: boolean = false;
   arrearsForm!: FormGroup;
   saveFrm!: FormGroup;
+  myActData: IActData[] = [];
   // myDropAct: IStateDrop[] = [];
   myDropAct: IStateDrop = { income: [], expense: [] };
 
@@ -191,6 +192,12 @@ export class MainDashboardComponent implements OnInit {
         this.myDropAct = data;
       }
     });
+
+    this.dashboardStateService.getStateAccountResult().subscribe(data => {
+      if (data) {
+        this.myActData = data;
+      }
+    });
   }
 
   setupFormControl(){

accounting-ng-nuttakit/src/app/content/main-dashboard-content/main-dashboard-content.component.ts

@@ -3,7 +3,7 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 import { ChartConfiguration, ChartOptions } from 'chart.js';
 import { BaseChartDirective } from 'ng2-charts';
 import { GeneralService } from '../../services/generalservice';
-import { IDropAct, IStateDrop } from '../../interfaces/dashboard.interface';
+import { IDropAct, IStateDrop, IActData } from '../../interfaces/dashboard.interface';
 
 
 @Component({
@@ -15,6 +15,7 @@ import { IDropAct, IStateDrop } from '../../interfaces/dashboard.interface';
 export class MainDashboardContentComponent implements OnInit {
   @ViewChild(BaseChartDirective) chart?: BaseChartDirective;
   myDropAct!: IStateDrop;
+  myActData: IActData[] = [];
 
   constructor(
     private generalService: GeneralService,
@@ -36,7 +37,8 @@ export class MainDashboardContentComponent implements OnInit {
       next: (result: any) => {
         if (result.code === '200') {
           this.generalService.trowApi(result);
-          this.myDropAct = result.data
+          this.myActData = result.data;
+          this.dashboardStateService.setStateAccountResult(this.myActData);
         }
       },
       error: (error: any) => {

accounting-ng-nuttakit/src/app/controls/main-control/main-control.module.ts

@@ -8,6 +8,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 
 import { MainDashboardComponent } from '../../component/main-dashboard/main-dashboard.component';
 import { MainDashboardContentComponent } from '../../content/main-dashboard-content/main-dashboard-content.component';
+import { AccDateFormatPipe } from '../../pipe/dtmtodatetime.pipe';
 
 // import { MainReportComponent } from '../../component/main-report/main-report.component';
 
@@ -16,7 +17,8 @@ import { MainDashboardContentComponent } from '../../content/main-dashboard-cont
 @NgModule({
   declarations: [
     MainDashboardComponent,
-    MainDashboardContentComponent
+    MainDashboardContentComponent,
+    AccDateFormatPipe
     // MainReportComponent
   ],
   imports: [
@@ -24,6 +26,9 @@ import { MainDashboardContentComponent } from '../../content/main-dashboard-cont
     MainControlRoutingModule,
     ReactiveFormsModule
     // BrowserAnimationsModule
+  ],
+  exports: [
+    AccDateFormatPipe
   ]
 })
 export class MainControlModule { }

accounting-ng-nuttakit/src/app/interfaces/dashboard.interface.ts

@@ -8,6 +8,17 @@ export interface IDropAct {
   dtlcod?: string
 }
 
+export interface IActData {
+  actseq?: number,
+  actnum?: number,
+  acttyp?: string,
+  acttypnam?: string,
+  actcatnam?: string,
+  actqty?: number,
+  actcmt?: string,
+  actacpdtm?: string
+}
+
 export interface IStateResultResponse {
   data: IStateDrop;
 }

accounting-ng-nuttakit/src/app/pipe/dtmtodatetime.pipe.ts

@@ -0,0 +1,24 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'dtmtodatetime',
+  standalone: false
+})
+export class AccDateFormatPipe implements PipeTransform {
+
+  transform(value: string | number): string {
+    if (value === null || value === undefined) return '';
+
+    const str = value.toString();
+    if (str.length !== 12) return str;
+
+    const dd = str.slice(0, 2);
+    const mm = str.slice(2, 4);
+    const yyyy = str.slice(4, 8);
+    const hh = str.slice(8, 10);
+    const min = str.slice(10, 12);
+
+    return `${dd}/${mm}/${yyyy} ${hh}:${min}`;
+  }
+
+}

accounting-ng-nuttakit/src/app/services/state/dashboard-state.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { BehaviorSubject, Observable } from 'rxjs';
-import { IDropAct, IStateDrop } from '../../interfaces/dashboard.interface';
+import { IDropAct, IStateDrop, IActData } from '../../interfaces/dashboard.interface';
 
 @Injectable({
   providedIn: 'root'
@@ -8,6 +8,7 @@ import { IDropAct, IStateDrop } from '../../interfaces/dashboard.interface';
 export class DashboardStateService {
   // ประกาศ BehaviorSubject ด้วย Interface
   private dashboardState = new BehaviorSubject<IStateDrop | null>(null);
+  private accountting = new BehaviorSubject<IActData[] | null>(null);
 
   // ส่ง Observable ไปให้ components subscribe
   getStateResult(): Observable<IStateDrop | null> {
@@ -15,8 +16,13 @@ export class DashboardStateService {
   }
 
   // เซ็ท state
-  setStateResult(product: IStateDrop): void {
+  setStateResult(dashboard: IStateDrop): void {
-    this.dashboardState.next(product);
+    this.dashboardState.next(dashboard);
+  }
+
+
+  setStateAccountResult(dashboard: IActData[]): void {
+    this.accountting.next(dashboard);
   }
 
   // เคลียร์ state
@@ -24,8 +30,12 @@ export class DashboardStateService {
     this.dashboardState.next(null);
   }
 
+  getStateAccountResult(): Observable<IActData[] | null> {
+    return this.accountting.asObservable();
+  }
+
   // ดึงค่า current state (ไม่ใช่ observable)
   // getCurrentState(): IDropAct | null {
-  //   return this.productState.value;
+  //   return this.dashboardState.value;
   // }
 }