-search project
This commit is contained in:
x2Skyz
@@ -1,4 +1,4 @@
|
||||
<div class="min-h-screen bg-gray-100 p-4">
|
||||
<div class="min-h-screen bg-gray-100 p-4 overflow-y-auto">
|
||||
<header class="flex justify-between items-center py-4 px-2">
|
||||
<h1 class="text-xl font-semibold text-gray-800">หน้าหลัก ( landing )</h1>
|
||||
<div class="flex space-x-4 text-2xl text-gray-600">
|
||||
|
||||
@@ -29,15 +29,31 @@
|
||||
|
||||
<!-- เนื้อหา -->
|
||||
<tbody>
|
||||
@for (item of myPrjMst; track item.prjseq; let i = $index) {
|
||||
<tr class="border-b hover:bg-gray-50 transition duration-100">
|
||||
<td class="py-3 px-4 text-gray-700">1</td>
|
||||
<td class="py-3 px-4 font-medium text-gray-800">โครงการปรับปรุงอาคาร</td>
|
||||
<td class="py-3 px-4 text-yellow-600 font-medium">รออนุมัติ</td>
|
||||
<td class="py-3 px-4 text-gray-700">{{ i + 1 }}</td>
|
||||
<td class="py-3 px-4 font-medium text-gray-800">{{ item.prjnam }}</td>
|
||||
<td class="py-3 px-4 font-medium"
|
||||
[ngClass]="{
|
||||
'text-yellow-600': item.prjcomstt === 'UAC',
|
||||
'text-green-600': item.prjcomstt === 'BAP',
|
||||
'text-red-600': item.prjcomstt === 'CN'
|
||||
}">
|
||||
@if(item.prjcomstt === 'UAC'){ รออนุมัติ }
|
||||
@else if(item.prjcomstt === 'BAP'){ อนุมัติแล้ว }
|
||||
@else if(item.prjcomstt === 'CN'){ ไม่อนุมัติ }
|
||||
@else { {{ item.prjcomstt }} }
|
||||
</td>
|
||||
<td class="py-3 px-4 text-center flex flex-row justify-center gap-2">
|
||||
<button class="px-3 py-1 text-xs font-semibold text-white bg-red-900 rounded-md hover:bg-red-950">แก้ไข</button>
|
||||
<button class="px-3 py-1 text-xs font-semibold text-white bg-red-900 rounded-md hover:bg-red-950">ติดตาม</button>
|
||||
</td>
|
||||
</tr>
|
||||
} @empty {
|
||||
<tr>
|
||||
<td colspan="4" class="py-6 text-center text-gray-500 bg-gray-50">ไม่พบข้อมูลโครงการ</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@@ -4,6 +4,8 @@ import { GeneralService } from '../../services/generalservice';
|
||||
import { IDropAct, IStateDrop, IStateResultResponse, IActData, IActSumData } from '../../interfaces/dashboard.interface'
|
||||
import { DashboardStateService } from '../../services/state/dashboard-state.service';
|
||||
import { Router } from '@angular/router';
|
||||
import { IPrjMst } from '../../interfaces/main.interface'; // เพิ่ม Import Interface
|
||||
import { ProjectStateService } from '../../services/state/project-state.service';
|
||||
|
||||
|
||||
@Component({
|
||||
@@ -13,16 +15,44 @@ import { Router } from '@angular/router';
|
||||
styleUrl: './main-project.css',
|
||||
})
|
||||
export class MainProject implements OnInit {
|
||||
|
||||
myPrjMst: IPrjMst[] = []; // ตัวแปรเก็บข้อมูลโครงการ
|
||||
|
||||
constructor(
|
||||
private generalService: GeneralService,
|
||||
private dashboardStateService: DashboardStateService,
|
||||
private projectStateService: ProjectStateService, // Inject ProjectStateService
|
||||
private router: Router
|
||||
) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
|
||||
this.projectStateService.getStateResult().subscribe((result: IPrjMst[] | null) => {
|
||||
if (result) {
|
||||
this.myPrjMst = result;
|
||||
}
|
||||
});
|
||||
// this.onSearchPrj(); // เรียกดึงข้อมูลเมื่อเริ่มทำงาน
|
||||
}
|
||||
|
||||
// // ฟังก์ชันดึงข้อมูลโครงการ
|
||||
// onSearchPrj(): void {
|
||||
// const uri = '/api/ttc/projectsearch?column=user';
|
||||
// const request = {}; // body ว่างตามที่ระบุ
|
||||
|
||||
// this.generalService.postRequest(uri, request).subscribe({
|
||||
// next: (result: any) => {
|
||||
// if (result.code === '200') {
|
||||
// // สำเร็จ: นำข้อมูลใส่ตัวแปร
|
||||
// this.myPrjMst = result.data;
|
||||
// } else {
|
||||
// this.generalService.trowApi(result);
|
||||
// }
|
||||
// },
|
||||
// error: (error: any) => {
|
||||
// this.generalService.trowApi(error);
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
|
||||
navigate(path: string) {
|
||||
this.router.navigate([path]);
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
<div class="h-screen bg-gray-100 flex flex-col">
|
||||
<div class="h-full bg-gray-100 flex flex-col w-full"> <!-- แก้ h-screen เป็น h-full -->
|
||||
|
||||
<header class="flex justify-between items-center py-4 px-6">
|
||||
<!-- Header: ใช้ flex-shrink-0 เพื่อไม่ให้โดนบีบ และ bg-white เพื่อให้ตัดกับ content -->
|
||||
<header class="shrink-0 flex justify-between items-center py-4 px-6">
|
||||
@if (mode == 'default') {
|
||||
<div class="flex flex-col md:flex-row justify-between items-end mb-6 gap-4">
|
||||
<div class="flex flex-col md:flex-row justify-between items-end gap-4 w-full">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-gray-800 flex items-center gap-2">
|
||||
<span class="w-2 h-8 bg-red-900 rounded-full"></span> รายการโครงการทั้งหมด
|
||||
@@ -10,9 +11,8 @@
|
||||
<p class="text-gray-500 mt-1 text-sm pl-4">ติดตาม สถานะโครงการ และ เสนอโครงการ</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <h1 class="text-3xl font-bold text-gray-800">โครงการทั้งหมด</h1> -->
|
||||
} @else if (mode == 'add') {
|
||||
<div class="flex flex-col md:flex-row justify-between items-end gap-4">
|
||||
<div class="flex flex-col md:flex-row justify-between items-end gap-4 w-full">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-gray-800 flex items-center gap-2">
|
||||
<button (click)="onCancelProject()"
|
||||
@@ -31,7 +31,8 @@
|
||||
|
||||
</header>
|
||||
|
||||
<div class="grow overflow-y-auto px-6 pb-6">
|
||||
<!-- Content: ใช้ flex-1 เพื่อกินพื้นที่ที่เหลือ และ overflow-y-auto เพื่อให้ scroll เฉพาะส่วนนี้ -->
|
||||
<div class="flex-1 overflow-y-auto px-6 pb-6">
|
||||
|
||||
@if ( mode == 'default') {
|
||||
<app-main-project></app-main-project>
|
||||
|
||||
@@ -2,6 +2,7 @@ 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
|
||||
import { ProjectStateService } from '../../services/state/project-state.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-main-project-content',
|
||||
@@ -18,6 +19,7 @@ export class MainProjectContent implements OnInit {
|
||||
constructor(
|
||||
private route: ActivatedRoute,
|
||||
private router: Router,
|
||||
private projectStateService: ProjectStateService, // Inject ProjectStateService
|
||||
private generalService: GeneralService
|
||||
) {}
|
||||
|
||||
@@ -33,6 +35,8 @@ export class MainProjectContent implements OnInit {
|
||||
this.mode = 'default';
|
||||
}
|
||||
});
|
||||
|
||||
this.onSearchPrj();
|
||||
}
|
||||
|
||||
// รับ Event (save) จากลูก แล้วยิง API
|
||||
@@ -65,6 +69,26 @@ export class MainProjectContent implements OnInit {
|
||||
});
|
||||
}
|
||||
|
||||
// ฟังก์ชันดึงข้อมูลโครงการ และ update state
|
||||
onSearchPrj(): void {
|
||||
const uri = '/api/ttc/projectsearch?column=user';
|
||||
const request = {}; // body ว่างตามที่ระบุ
|
||||
|
||||
this.generalService.postRequest(uri, request).subscribe({
|
||||
next: (result: any) => {
|
||||
if (result.code === '200') {
|
||||
// สำเร็จ: นำข้อมูลใส่ State (Pattern: Service ยิง -> ได้ของ -> ยัดใส่ State -> Component Subscribe รอรับ)
|
||||
this.projectStateService.setProjectState(result.data);
|
||||
} else {
|
||||
this.generalService.trowApi(result);
|
||||
}
|
||||
},
|
||||
error: (error: any) => {
|
||||
this.generalService.trowApi(error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// รับ Event (cancel) จากลูก
|
||||
onCancelProject(): void {
|
||||
this.router.navigate(['/main/project']);
|
||||
|
||||
Reference in New Issue
Block a user