-project ux (ux for user role)

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']);
   }
 }