-interface

-service

-เพิ่มเทคนิค การส่ง ผ่านข้อมูล
This commit is contained in:
2025-11-13 14:53:37 +07:00
parent 37ca45701b
commit b3fa94f904
4 changed files with 92 additions and 50 deletions

View File

@@ -1,7 +1,8 @@
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
import { GeneralService } from '../../services/generalservice';
import { IDropAct } from '../interfaces/dashboard.interface'
import { IDropAct } from '../../interfaces/dashboard.interface'
import { DashboardStateService } from '../../services/state/dashboard-state.service';
@Component({
selector: 'app-main-dashboard',
@@ -20,6 +21,10 @@ export class MainDashboardComponent implements OnInit {
readonly ownerName = 'Nuttakit';
constructor(
private dashboardStateService: DashboardStateService
){}
readonly kpiCards = [
{
label: 'รายรับรวม',
@@ -179,6 +184,12 @@ export class MainDashboardComponent implements OnInit {
ngOnInit(): void {
this.setupFormControl();
this.dashboardStateService.getStateResult().subscribe(data => {
if(data) {
this.myDropAct = data;
}
}
)
}
setupFormControl(){

View File

@@ -1,7 +1,10 @@
import { DashboardStateService } from './../../services/state/dashboard-state.service';
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 } from '../../interfaces/dashboard.interface';
@Component({
selector: 'app-main-dashboard-content',
@@ -11,44 +14,17 @@ import { GeneralService } from '../../services/generalservice';
})
export class MainDashboardContentComponent implements OnInit {
@ViewChild(BaseChartDirective) chart?: BaseChartDirective;
myDropAct!: IDropAct;
public lineChartData: ChartConfiguration<'line'>['data'] = {
labels: [],
datasets: [
{
data: [],
label: 'Revenue',
fill: true,
tension: 0.5,
borderColor: 'rgba(75,192,192,1)',
backgroundColor: 'rgba(75,192,192,0.2)'
}
]
};
public lineChartOptions: ChartOptions<'line'> = {
responsive: true,
scales: {
y: {
beginAtZero: true
}
},
plugins: {
legend: {
display: true,
},
title: {
display: true,
text: 'Revenue Summary - Last 6 Months'
}
}
};
constructor(private generalService: GeneralService) {}
constructor(
private generalService: GeneralService,
private dashboardStateService: DashboardStateService
) {}
ngOnInit(): void {
let token = localStorage.getItem('access_token')
this.OnSearchAct(token, true);
this.OnSetupDashboard(token, true);
}
OnSearchAct(value: any, setupFirst: boolean): void {
@@ -60,7 +36,31 @@ export class MainDashboardContentComponent implements OnInit {
next: (result: any) => {
if (result.code === '200') {
this.generalService.trowApi(result);
console.log(`✅ OTP ส่งไปที่ ${value.email}`);
this.myDropAct = result.data
}
},
error: (error: any) => {
},
complete: () => {
}
});
}
OnSetupDashboard(value: any, setupFirst: boolean): void {
const uri = '/api/web/accountingSetup';
let request = {
token: value
}
this.generalService.postRequest(uri, request).subscribe({
next: (result: any) => {
if (result.code === '200') {
this.generalService.trowApi(result);
this.myDropAct = result.data
this.dashboardStateService.setStateResult(this.myDropAct)
}
},
error: (error: any) => {
@@ -94,24 +94,24 @@ export class MainDashboardContentComponent implements OnInit {
// });
// }
processChartData(data: any[]): void {
const labels = data.map(item => item.month);
const revenues = data.map(item => item.revenue);
// processChartData(data: any[]): void {
// const labels = data.map(item => item.month);
// const revenues = data.map(item => item.revenue);
this.lineChartData.labels = labels;
this.lineChartData.datasets[0].data = revenues;
// this.lineChartData.labels = labels;
// this.lineChartData.datasets[0].data = revenues;
this.chart?.update();
}
// this.chart?.update();
// }
setupPlaceholderData(): void {
// This function is called if the API fails, to show a sample graph.
const labels = ['January', 'February', 'March', 'April', 'May', 'June'];
const revenues = [1200, 1900, 3000, 5000, 2300, 3200]; // Sample data
// setupPlaceholderData(): void {
// // This function is called if the API fails, to show a sample graph.
// const labels = ['January', 'February', 'March', 'April', 'May', 'June'];
// const revenues = [1200, 1900, 3000, 5000, 2300, 3200]; // Sample data
this.lineChartData.labels = labels;
this.lineChartData.datasets[0].data = revenues;
// this.lineChartData.labels = labels;
// this.lineChartData.datasets[0].data = revenues;
this.chart?.update();
}
// this.chart?.update();
// }
}

View File

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