import { GeneralService } from './../../services/generalservice'; import { Component, OnInit, Output, EventEmitter } from '@angular/core'; import { FormGroup, FormControl, Validators } from '@angular/forms'; import { ToastrService } from 'ngx-toastr'; @Component({ selector: 'app-main-project-add', standalone: false, templateUrl: './main-project-add.html', styleUrl: './main-project-add.css', }) export class MainProjectAdd implements OnInit { // ไม่ต้องใช้ @Input() แล้ว Parent จะเข้าถึงผ่าน ViewChild isLoading: boolean = false; @Output() projectAddSave = new EventEmitter(); @Output() cancel = new EventEmitter(); currentStep: number = 1; projectForm!: FormGroup; // attachedFiles: any[] = []; // ตัวแปรสำหรับเก็บไฟล์ที่ผ่านการตรวจสอบแล้ว selectedFiles: File[] = []; // ตัวแปรสำหรับเก็บ Preview (ถ้าต้องการแสดงผล) filePreviews: any[] = []; constructor( private generalService: GeneralService, private toastr: ToastrService ) {} ngOnInit(): void { this.setupFormControl(); } setupFormControl(): void { this.projectForm = new FormGroup({ prjnam: new FormControl('', [Validators.required, Validators.maxLength(200)]), prjwntbdg: new FormControl('', [Validators.required, Validators.min(1)]) }); } goToStep(step: number): void { if (step === 2 && this.currentStep === 1) { if (this.projectForm.invalid) { this.projectForm.markAllAsTouched(); this.toastr.warning('กรุณากรอกข้อมูลให้ครบถ้วน', 'แจ้งเตือน'); return; } } this.currentStep = step; } onFileSelected(event: Event): void { const input = event.target as HTMLInputElement; if (input.files && input.files.length > 0) { // Reset ค่าเก่า (ถ้าต้องการให้เลือกใหม่ทับของเดิม) หรือจะใช้ concat ถ้าต้องการเพิ่มต่อท้าย // this.selectedFiles = []; // this.filePreviews = []; Array.from(input.files).forEach((file: File) => { // 1. Validate File Type (ตัวอย่าง: รับเฉพาะ Image และ PDF) const allowedTypes = ['image/jpeg', 'image/png', 'image/jpg', 'application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document']; if (!allowedTypes.includes(file.type)) { this.toastr.error('Invalid File Type', `ไฟล์ ${file.name} ไม่รองรับ (รองรับเฉพาะรูปภาพ, PDF, Word)`); return; // ข้ามไฟล์นี้ไป } // 2. Validate File Size (ตัวอย่าง: ไม่เกิน 5MB) const maxSize = 5 * 1024 * 1024; // 5MB in bytes if (file.size > maxSize) { this.toastr.error('File Too Large', `ไฟล์ ${file.name} มีขนาดใหญ่เกิน 5MB`); return; // ข้ามไฟล์นี้ไป } //ผ่านการตรวจสอบ: เก็บไฟล์ลง Array เพื่อเตรียมส่ง Form Data this.selectedFiles.push(file); // 3. Generate Preview (Optional: สำหรับแสดงผลหน้าเว็บ) const reader = new FileReader(); reader.onload = (e: ProgressEvent) => { this.filePreviews.push({ name: file.name, size: this.formatBytes(file.size), // แปลง bytes เป็น KB/MB type: file.type, content: e.target?.result // Base64 String }); }; reader.readAsDataURL(file); }); } } // Helper Function: แปลงขนาดไฟล์ให้อ่านง่าย formatBytes(bytes: number, decimals = 2): string { if (bytes === 0) return '0 Bytes'; const k = 1024; const dm = decimals < 0 ? 0 : decimals; const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']; const i = Math.floor(Math.log(bytes) / Math.log(k)); return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]; } // ฟังก์ชันลบไฟล์ที่เลือก (เผื่อใช้ใน UI) removeFile(index: number): void { this.selectedFiles.splice(index, 1); this.filePreviews.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; let seq = localStorage.getItem('id'); const formData = new FormData(); const prjnam = this.projectForm.get('prjnam')?.value || ''; const prjwntbdg = this.projectForm.get('prjwntbdg')?.value; formData.append('prjusrseq', seq ?? ''); formData.append('prjnam', prjnam); formData.append('prjwntbdg', prjwntbdg ? prjwntbdg : '0.00'); formData.append('typ', 'prj') for (let file of this.selectedFiles) { formData.append('prjdoc', file); // Key ต้องชื่อ 'prjdoc' ตาม Middleware } this.projectAddSave.emit(formData); } onCancel(): void { this.cancel.emit(); } }