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 aff7d18..b600ba8 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 @@ -1,175 +1,183 @@ -
-
- -

สร้างโครงการใหม่

- -
- -
- -
- -
-
- 1 -
-

1. กรอกข้อมูลโครงการ

-
- - - - -
- -
-
- -
- - -
- -
- - -
- -
- -
-
-
-
- - -
- -
- -
-
- 2 -
-

2. แนบเอกสารอ้างอิง

-
- - - -
- -
-
-

โปรดแนบไฟล์ที่เกี่ยวข้อง (เช่น ใบเสนอราคา, แผนผัง)

-
- คลิกหรือลากไฟล์มาวางที่นี่ -
-
- - -
-
-
-
- - -
- -
- -
-
- 3 -
-

3. สรุปและส่งโครงการ

-
- - - -
- -
-
-

ตรวจสอบข้อมูลทั้งหมดก่อนยืนยันการส่ง

-
    -
  • **ชื่อโครงการ:** โครงการปรับปรุงระบบน้ำ
    • -
  • **ประเภทงบ:** งบดำเนินงาน
    • -
  • **จำนวนเงิน:** 50,000 บาท
    • -
  • **สถานะเอกสาร:** แนบครบ 2 ไฟล์
    • -
-
- - -
-
-
-
+
+
+
+

สร้างโครงการใหม่

+

กรอกรายละเอียดเพื่อขออนุมัติงบประมาณ

+
+ +
+ +
+ +
+
+
+ 1 +
+

ข้อมูลโครงการ

+
+ +
+ +
+
+
+ + +

กรุณาระบุชื่อโครงการ

+
+ +
+ +
+ ฿ + +
+

กรุณาระบุจำนวนเงิน

+
+ +
+ +
+
+
+
+ +
+ +
+
+
+ 2 +
+

เอกสารอ้างอิง

+
+ +
+ +
+
+

+ + สามารถแนบไฟล์ PDF, JPG หรือ PNG ที่เกี่ยวข้องเพื่อประกอบการพิจารณา +

+ +
+ +
+ +
+ คลิกเพื่อเลือกไฟล์ หรือ ลากไฟล์มาวาง +
+ +
+
+
+ + {{ file.name }} + ({{ (file.size / 1024).toFixed(2) }} KB) +
+ +
+
+ +
+ + +
+
+
+
+ +
+ +
+
+
+ 3 +
+

ยืนยันการส่ง

+
+
+ +
+
+
+
+ +
+

ตรวจสอบความถูกต้อง

+

กรุณาตรวจสอบข้อมูลก่อนทำการส่งขออนุมัติ

+
+ +
+
+ ชื่อโครงการ + {{ f['projectName'].value || '-' }} +
+
+ จำนวนเงิน + {{ formatCurrency(f['budgetAmount'].value) }} +
+
+ เอกสารแนบ + + {{ attachedFiles.length }} ไฟล์ + +
+
+ +
+ + +
+
+
+
+ +
+
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 d88f564..e695c71 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,4 +1,8 @@ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; +import { FormGroup, FormControl, Validators } from '@angular/forms'; +import { GeneralService } from '../../services/generalservice'; +import { ToastrService } from 'ngx-toastr'; @Component({ selector: 'app-main-project-add', @@ -6,11 +10,99 @@ import { Component } from '@angular/core'; templateUrl: './main-project-add.html', styleUrl: './main-project-add.css', }) -export class MainProjectAdd { -currentStep: number = 1; // 1 = กรอกข้อมูล, 2 = แนบเอกสาร, 3 = สรุปและส่ง +export class MainProjectAdd implements OnInit { + currentStep: number = 1; + isLoading: boolean = false; - // ฟังก์ชันสำหรับเปลี่ยนขั้นตอน + projectForm!: FormGroup; + attachedFiles: any[] = []; + + constructor( + private generalService: GeneralService, + private router: Router, + private toastr: ToastrService + ) {} + + ngOnInit(): void { + this.setupFormControl(); + } + + setupFormControl(): void { + this.projectForm = new FormGroup({ + projectName: new FormControl('', [Validators.required, Validators.maxLength(200)]), + budgetAmount: new FormControl('', [Validators.required, Validators.min(1)]) + }); + } + + // ฟังก์ชันเปลี่ยน Step (เรียกใช้จากปุ่มเท่านั้น) goToStep(step: number): void { + // กรณีจะไป Step 2 ต้องผ่าน Validation Step 1 ก่อน + if (step === 2 && this.currentStep === 1) { + if (this.projectForm.invalid) { + this.projectForm.markAllAsTouched(); + this.toastr.warning('กรุณากรอกข้อมูลให้ครบถ้วน', 'แจ้งเตือน'); + return; + } + } this.currentStep = step; } + + onFileSelected(event: any): void { + const files = event.target.files; + if (files && files.length > 0) { + for (let i = 0; i < files.length; i++) { + const file = files[i]; + const reader = new FileReader(); + reader.onload = (e: any) => { + this.attachedFiles.push({ + name: file.name, + size: file.size, + type: file.type, + content: e.target.result + }); + }; + reader.readAsDataURL(file); + } + } + } + + removeFile(index: number): void { + this.attachedFiles.splice(index, 1); + } + + get f() { + return this.projectForm.controls; + } + + formatCurrency(amount: any): string { + if (!amount) return '0.00 บาท'; + return new Intl.NumberFormat('th-TH', { style: 'currency', currency: 'THB' }).format(Number(amount)); + } + + onSubmit(): void { + if (this.projectForm.invalid) return; + + this.isLoading = true; + const uri = '/api/project/create'; + + const request = { + ...this.projectForm.value, + files: this.attachedFiles + }; + + this.generalService.postRequest(uri, request).subscribe({ + next: (result: any) => { + this.isLoading = false; + this.generalService.trowApi(result); + + if (result.code === '200') { + this.router.navigate(['/main']); + } + }, + error: (error: any) => { + this.isLoading = false; + this.generalService.trowApi(error); + } + }); + } }