Files
micro-frontend/ng-ttc-frontend/src/app/component/main-project-add/main-project-add.ts

139 lines
5.5 KiB
TypeScript
Raw Normal View History

import { GeneralService } from './../../services/generalservice';
2025-11-28 19:44:32 +07:00
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
2025-11-28 19:28:41 +07:00
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { ToastrService } from 'ngx-toastr';
2025-11-21 10:24:49 +07:00
@Component({
selector: 'app-main-project-add',
standalone: false,
templateUrl: './main-project-add.html',
styleUrl: './main-project-add.css',
})
2025-11-28 19:28:41 +07:00
export class MainProjectAdd implements OnInit {
2025-11-28 19:44:32 +07:00
// ไม่ต้องใช้ @Input() แล้ว Parent จะเข้าถึงผ่าน ViewChild
2025-11-28 19:28:41 +07:00
isLoading: boolean = false;
2025-11-21 10:24:49 +07:00
@Output() projectAddSave = new EventEmitter<any>();
2025-11-28 19:44:32 +07:00
@Output() cancel = new EventEmitter<void>();
currentStep: number = 1;
2025-11-28 19:28:41 +07:00
projectForm!: FormGroup;
// attachedFiles: any[] = [];
// ตัวแปรสำหรับเก็บไฟล์ที่ผ่านการตรวจสอบแล้ว
selectedFiles: File[] = [];
// ตัวแปรสำหรับเก็บ Preview (ถ้าต้องการแสดงผล)
filePreviews: any[] = [];
2025-11-28 19:28:41 +07:00
constructor(
private generalService: GeneralService,
private toastr: ToastrService
) {}
2025-11-28 19:28:41 +07:00
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)])
2025-11-28 19:28:41 +07:00
});
}
2025-11-21 10:24:49 +07:00
goToStep(step: number): void {
2025-11-28 19:28:41 +07:00
if (step === 2 && this.currentStep === 1) {
if (this.projectForm.invalid) {
this.projectForm.markAllAsTouched();
this.toastr.warning('กรุณากรอกข้อมูลให้ครบถ้วน', 'แจ้งเตือน');
return;
}
}
2025-11-21 10:24:49 +07:00
this.currentStep = step;
}
onFileSelected(event: Event): void {
const input = event.target as HTMLInputElement;
2025-11-28 19:28:41 +07:00
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: สำหรับแสดงผลหน้าเว็บ)
2025-11-28 19:28:41 +07:00
const reader = new FileReader();
reader.onload = (e: ProgressEvent<FileReader>) => {
this.filePreviews.push({
2025-11-28 19:28:41 +07:00
name: file.name,
size: this.formatBytes(file.size), // แปลง bytes เป็น KB/MB
2025-11-28 19:28:41 +07:00
type: file.type,
content: e.target?.result // Base64 String
2025-11-28 19:28:41 +07:00
});
};
reader.readAsDataURL(file);
});
2025-11-28 19:28:41 +07:00
}
}
// 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)
2025-11-28 19:28:41 +07:00
removeFile(index: number): void {
this.selectedFiles.splice(index, 1);
this.filePreviews.splice(index, 1);
2025-11-28 19:28:41 +07:00
}
2025-11-28 19:44:32 +07:00
get f() { return this.projectForm.controls; }
2025-11-28 19:28:41 +07:00
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')
2025-11-28 19:28:41 +07:00
for (let file of this.selectedFiles) {
formData.append('prjdoc', file); // Key ต้องชื่อ 'prjdoc' ตาม Middleware
}
this.projectAddSave.emit(formData);
2025-11-28 19:44:32 +07:00
}
2025-11-28 19:28:41 +07:00
2025-11-28 19:44:32 +07:00
onCancel(): void {
this.cancel.emit();
2025-11-28 19:28:41 +07:00
}
2025-11-21 10:24:49 +07:00
}