diff --git a/ng-ttc-frontend/src/app/component/main-project-add/main-project-add.html b/ng-ttc-frontend/src/app/component/main-project-add/main-project-add.html index b600ba8..549725d 100644 --- a/ng-ttc-frontend/src/app/component/main-project-add/main-project-add.html +++ b/ng-ttc-frontend/src/app/component/main-project-add/main-project-add.html @@ -52,7 +52,7 @@
-
@@ -110,7 +110,7 @@ - diff --git a/ng-ttc-frontend/src/app/component/main-project-add/main-project-add.ts b/ng-ttc-frontend/src/app/component/main-project-add/main-project-add.ts index e695c71..6d756b8 100644 --- a/ng-ttc-frontend/src/app/component/main-project-add/main-project-add.ts +++ b/ng-ttc-frontend/src/app/component/main-project-add/main-project-add.ts @@ -1,7 +1,5 @@ -import { Component, OnInit } from '@angular/core'; -import { Router } from '@angular/router'; +import { Component, OnInit, Output, EventEmitter } from '@angular/core'; import { FormGroup, FormControl, Validators } from '@angular/forms'; -import { GeneralService } from '../../services/generalservice'; import { ToastrService } from 'ngx-toastr'; @Component({ @@ -11,17 +9,17 @@ import { ToastrService } from 'ngx-toastr'; styleUrl: './main-project-add.css', }) export class MainProjectAdd implements OnInit { - currentStep: number = 1; + // ไม่ต้องใช้ @Input() แล้ว Parent จะเข้าถึงผ่าน ViewChild isLoading: boolean = false; + @Output() save = new EventEmitter(); + @Output() cancel = new EventEmitter(); + + currentStep: number = 1; projectForm!: FormGroup; attachedFiles: any[] = []; - constructor( - private generalService: GeneralService, - private router: Router, - private toastr: ToastrService - ) {} + constructor(private toastr: ToastrService) {} ngOnInit(): void { this.setupFormControl(); @@ -34,9 +32,7 @@ export class MainProjectAdd implements OnInit { }); } - // ฟังก์ชันเปลี่ยน Step (เรียกใช้จากปุ่มเท่านั้น) goToStep(step: number): void { - // กรณีจะไป Step 2 ต้องผ่าน Validation Step 1 ก่อน if (step === 2 && this.currentStep === 1) { if (this.projectForm.invalid) { this.projectForm.markAllAsTouched(); @@ -70,9 +66,7 @@ export class MainProjectAdd implements OnInit { this.attachedFiles.splice(index, 1); } - get f() { - return this.projectForm.controls; - } + get f() { return this.projectForm.controls; } formatCurrency(amount: any): string { if (!amount) return '0.00 บาท'; @@ -82,27 +76,15 @@ export class MainProjectAdd implements OnInit { onSubmit(): void { if (this.projectForm.invalid) return; - this.isLoading = true; - const uri = '/api/project/create'; - - const request = { + const body = { ...this.projectForm.value, files: this.attachedFiles }; - this.generalService.postRequest(uri, request).subscribe({ - next: (result: any) => { - this.isLoading = false; - this.generalService.trowApi(result); + this.save.emit(body); + } - if (result.code === '200') { - this.router.navigate(['/main']); - } - }, - error: (error: any) => { - this.isLoading = false; - this.generalService.trowApi(error); - } - }); + onCancel(): void { + this.cancel.emit(); } } diff --git a/ng-ttc-frontend/src/app/content/main-project-content/main-project-content.html b/ng-ttc-frontend/src/app/content/main-project-content/main-project-content.html index a4e5c49..b48625d 100644 --- a/ng-ttc-frontend/src/app/content/main-project-content/main-project-content.html +++ b/ng-ttc-frontend/src/app/content/main-project-content/main-project-content.html @@ -1,115 +1,53 @@
-
+ +
@if (mode == 'default') { -

โครงการทั้งหมด

+

+ โครงการทั้งหมด +

} @else if (mode == 'add') { -

เพิ่มโครงการ

+
+ + +

+ เพิ่มโครงการ +

+
+ } @else if (mode == 'edit') { +
+ + +

+ แก้ไขโครงการ +

+
} -
-
+ +
@if ( mode == 'default') { + + } @else if ( mode == 'add') { - + + + + }
- - diff --git a/ng-ttc-frontend/src/app/content/main-project-content/main-project-content.ts b/ng-ttc-frontend/src/app/content/main-project-content/main-project-content.ts index dc97197..f24b319 100644 --- a/ng-ttc-frontend/src/app/content/main-project-content/main-project-content.ts +++ b/ng-ttc-frontend/src/app/content/main-project-content/main-project-content.ts @@ -1,6 +1,7 @@ -import { Routes, Router, ActivatedRoute } from '@angular/router'; -import { Component, OnInit } from '@angular/core'; - +import { Component, OnInit, ViewChild } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router'; +import { GeneralService } from '../../services/generalservice'; +import { MainProjectAdd } from '../../component/main-project-add/main-project-add'; // Import Dumb Component @Component({ selector: 'app-main-project-content', @@ -9,22 +10,63 @@ import { Component, OnInit } from '@angular/core'; styleUrl: './main-project-content.css', }) export class MainProjectContent implements OnInit { + // เข้าถึง Component ลูกเพื่อสั่ง Loading + @ViewChild(MainProjectAdd) mainProjectAdd!: MainProjectAdd; + mode: 'add' | 'edit' | 'default' = 'default'; constructor( private route: ActivatedRoute, - private router: Router + private router: Router, + private generalService: GeneralService ) {} ngOnInit(): void { - let param = this.route.snapshot.paramMap.get('mode'); + // Subscribe paramMap เพื่อให้เปลี่ยน Mode ได้ทันทีถ้า URL เปลี่ยน + this.route.paramMap.subscribe(params => { + const modeParam = params.get('mode'); + if (modeParam === 'add') { + this.mode = 'add'; + } else if (modeParam === 'edit') { + this.mode = 'edit'; + } else { + this.mode = 'default'; + } + }); + } - if (param === 'add') { - this.mode = 'add'; - } else if (param === 'edit') { - this.mode = 'edit'; - } else { - this.mode = 'default'; + // รับ Event (save) จากลูก แล้วยิง API + onSaveProject(projectData: any): void { + // เปิด Loading ที่ลูก + if (this.mainProjectAdd) { + this.mainProjectAdd.isLoading = true; } + + const uri = '/api/project/create'; // Endpoint Backend + + this.generalService.postRequest(uri, projectData).subscribe({ + next: (result: any) => { + // ปิด Loading ที่ลูก + if (this.mainProjectAdd) this.mainProjectAdd.isLoading = false; + + this.generalService.trowApi(result); + + if (result.code === '200') { + // สำเร็จ -> กลับไปหน้ารายการ + this.router.navigate(['/main/project']); + } + }, + error: (error: any) => { + // Error -> ปิด Loading ที่ลูก + if (this.mainProjectAdd) this.mainProjectAdd.isLoading = false; + + this.generalService.trowApi(error); + } + }); + } + + // รับ Event (cancel) จากลูก + onCancelProject(): void { + this.router.navigate(['/main/project']); } }