From 3cc4a4a6327fe67358ddb4dfee46093b1a80b4c8 Mon Sep 17 00:00:00 2001 From: x2Skyz Date: Thu, 13 Nov 2025 18:00:51 +0700 Subject: [PATCH] =?UTF-8?q?-=E0=B9=80=E0=B8=8A=E0=B8=B7=E0=B9=88=E0=B8=AD?= =?UTF-8?q?=E0=B8=A1=E0=B9=82=E0=B8=A2=E0=B8=87=20api=20search=20=E0=B8=81?= =?UTF-8?q?=E0=B8=B1=E0=B8=9A=20frontend=20-=E0=B8=9B=E0=B8=A3=E0=B8=B1?= =?UTF-8?q?=E0=B8=9A=E0=B8=9B=E0=B8=A3=E0=B8=B8=E0=B8=87=E0=B8=A3=E0=B8=B0?= =?UTF-8?q?=E0=B8=9A=E0=B8=9A=20state=20-=E0=B9=80=E0=B8=9E=E0=B8=B4?= =?UTF-8?q?=E0=B9=88=E0=B8=A1=20=E0=B8=A3=E0=B8=B0=E0=B8=9A=E0=B8=9A=20pip?= =?UTF-8?q?e=20dtmtodatetime?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/app/app-routing.module.ts | 4 +- accounting-ng-nuttakit/src/app/app.module.ts | 8 +++ .../main-dashboard.component.html | 57 ++++++++++++++----- .../main-dashboard.component.ts | 9 ++- .../main-dashboard-content.component.ts | 6 +- .../main-control/main-control.module.ts | 7 ++- .../src/app/interfaces/dashboard.interface.ts | 11 ++++ .../src/app/pipe/dtmtodatetime.pipe.ts | 24 ++++++++ .../services/state/dashboard-state.service.ts | 18 ++++-- 9 files changed, 121 insertions(+), 23 deletions(-) create mode 100644 accounting-ng-nuttakit/src/app/pipe/dtmtodatetime.pipe.ts diff --git a/accounting-ng-nuttakit/src/app/app-routing.module.ts b/accounting-ng-nuttakit/src/app/app-routing.module.ts index eba6242..dd8c2a1 100644 --- a/accounting-ng-nuttakit/src/app/app-routing.module.ts +++ b/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' } diff --git a/accounting-ng-nuttakit/src/app/app.module.ts b/accounting-ng-nuttakit/src/app/app.module.ts index 90181ec..dcffdd5 100644 --- a/accounting-ng-nuttakit/src/app/app.module.ts +++ b/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] }) diff --git a/accounting-ng-nuttakit/src/app/component/main-dashboard/main-dashboard.component.html b/accounting-ng-nuttakit/src/app/component/main-dashboard/main-dashboard.component.html index c6f92e3..df518b8 100644 --- a/accounting-ng-nuttakit/src/app/component/main-dashboard/main-dashboard.component.html +++ b/accounting-ng-nuttakit/src/app/component/main-dashboard/main-dashboard.component.html @@ -125,22 +125,51 @@ ยอดเงิน บันทึก -
-
- - {{ idx.type == 'i' ? 'รับ' : 'จ่าย' }} - -
-

{{ idx.title }}

-

{{ idx.date }}

+ + @for (idx of myActData; track idx.actseq; let i = $index) { +
+ +
+ + {{ idx.acttyp === 'i' ? 'รับ' : 'จ่าย' }} + + +
+

{{ idx.acttypnam }}

+

{{ (idx.actacpdtm ?? '') | dtmtodatetime }}

+
+
+ + {{ idx.actcatnam }} + + + {{ idx.actqty }} + + + {{ idx.actcmt }} +
+ }
diff --git a/accounting-ng-nuttakit/src/app/component/main-dashboard/main-dashboard.component.ts b/accounting-ng-nuttakit/src/app/component/main-dashboard/main-dashboard.component.ts index 065914a..d981930 100644 --- a/accounting-ng-nuttakit/src/app/component/main-dashboard/main-dashboard.component.ts +++ b/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(){ diff --git a/accounting-ng-nuttakit/src/app/content/main-dashboard-content/main-dashboard-content.component.ts b/accounting-ng-nuttakit/src/app/content/main-dashboard-content/main-dashboard-content.component.ts index bfa35a5..34489e0 100644 --- a/accounting-ng-nuttakit/src/app/content/main-dashboard-content/main-dashboard-content.component.ts +++ b/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) => { diff --git a/accounting-ng-nuttakit/src/app/controls/main-control/main-control.module.ts b/accounting-ng-nuttakit/src/app/controls/main-control/main-control.module.ts index b2cf561..6bf2214 100644 --- a/accounting-ng-nuttakit/src/app/controls/main-control/main-control.module.ts +++ b/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 { } diff --git a/accounting-ng-nuttakit/src/app/interfaces/dashboard.interface.ts b/accounting-ng-nuttakit/src/app/interfaces/dashboard.interface.ts index a95cb80..cb0c16b 100644 --- a/accounting-ng-nuttakit/src/app/interfaces/dashboard.interface.ts +++ b/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; } diff --git a/accounting-ng-nuttakit/src/app/pipe/dtmtodatetime.pipe.ts b/accounting-ng-nuttakit/src/app/pipe/dtmtodatetime.pipe.ts new file mode 100644 index 0000000..66863ff --- /dev/null +++ b/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}`; + } + +} diff --git a/accounting-ng-nuttakit/src/app/services/state/dashboard-state.service.ts b/accounting-ng-nuttakit/src/app/services/state/dashboard-state.service.ts index 1a47aa2..15bfdd5 100644 --- a/accounting-ng-nuttakit/src/app/services/state/dashboard-state.service.ts +++ b/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(null); + private accountting = new BehaviorSubject(null); // ส่ง Observable ไปให้ components subscribe getStateResult(): Observable { @@ -15,8 +16,13 @@ export class DashboardStateService { } // เซ็ท state - setStateResult(product: IStateDrop): void { - this.dashboardState.next(product); + setStateResult(dashboard: IStateDrop): void { + 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 { + return this.accountting.asObservable(); + } + // ดึงค่า current state (ไม่ใช่ observable) // getCurrentState(): IDropAct | null { - // return this.productState.value; + // return this.dashboardState.value; // } }