- add project
All checks were successful
Build Docker Image / Build Docker Image (push) Successful in 6m12s
All checks were successful
Build Docker Image / Build Docker Image (push) Successful in 6m12s
This commit is contained in:
x2Skyz
@@ -24,6 +24,9 @@ import { LicensePrivacyTermsComponent } from './component/license-privacy-terms/
|
||||
|
||||
import { provideCharts, withDefaultRegisterables } from 'ng2-charts';
|
||||
import { CachingInterceptor } from './services/caching.interceptor';
|
||||
import { MainProject } from './component/main-project/main-project';
|
||||
import { MainProjectContent } from './content/main-project-content/main-project-content';
|
||||
import { MainProjectAdd } from './component/main-project-add/main-project-add';
|
||||
// import { BudgetAproval } from './component/budget-aproval/budget-aproval';
|
||||
// import { AccDateFormatPipe } from './pipe/dtmtodatetime.pipe';
|
||||
// import { DtmtodatetimePipe } from './dtmtodatetime.pipe';
|
||||
@@ -35,6 +38,9 @@ import { CachingInterceptor } from './services/caching.interceptor';
|
||||
SidebarContentComponent,
|
||||
SidebarComponent,
|
||||
LicensePrivacyTermsComponent,
|
||||
// MainProjectAdd,
|
||||
// MainProject,
|
||||
// MainProjectContent,
|
||||
// BudgetAproval,
|
||||
// AccDateFormatPipe
|
||||
// DtmtodatetimePipe,
|
||||
|
||||
@@ -43,7 +43,7 @@
|
||||
<!-- Table -->
|
||||
<div class="overflow-x-auto bg-white border border-gray-200 rounded-2xl shadow-sm">
|
||||
<table class="min-w-full text-left border-collapse">
|
||||
<thead class="bg-gray-100 border-b border-gray-200 text-gray-700 text-sm">
|
||||
<thead class="bg-red-900 border-b border-gray-200 text-white text-sm">
|
||||
<tr>
|
||||
<th class="py-3 px-4 font-semibold">ลำดับ</th>
|
||||
<th class="py-3 px-4 font-semibold">รหัสโครงการ</th>
|
||||
|
||||
@@ -0,0 +1,175 @@
|
||||
<div class="flex items-start justify-center p-4">
|
||||
<div class="bg-white p-6 rounded-xl shadow-lg w-full max-w-2xl">
|
||||
|
||||
<h2 class="text-2xl font-bold text-gray-800 mb-6 border-b pb-3">สร้างโครงการใหม่</h2>
|
||||
|
||||
<div class="space-y-4">
|
||||
|
||||
<div class="border rounded-xl overflow-hidden shadow-sm"
|
||||
[ngClass]="{
|
||||
'border-red-500': currentStep === 1,
|
||||
'border-gray-200': currentStep !== 1
|
||||
}">
|
||||
|
||||
<div class="p-4 flex items-center justify-between cursor-pointer"
|
||||
[ngClass]="{
|
||||
'bg-red-50 text-red-700': currentStep === 1,
|
||||
'bg-gray-50 text-gray-700 hover:bg-gray-100': currentStep !== 1
|
||||
}"
|
||||
(click)="goToStep(1)">
|
||||
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-7 h-7 rounded-full flex items-center justify-center text-sm font-bold"
|
||||
[ngClass]="{
|
||||
'bg-red-500 text-white': currentStep === 1,
|
||||
'bg-gray-300 text-gray-700': currentStep !== 1
|
||||
}">
|
||||
1
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold">1. กรอกข้อมูลโครงการ</h3>
|
||||
</div>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor"
|
||||
[ngClass]="{'rotate-180': currentStep === 1}">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="p-4 pt-0 transition-all duration-300" *ngIf="currentStep === 1">
|
||||
<div class="border-t border-gray-200 pt-4 space-y-4">
|
||||
|
||||
<div>
|
||||
<label for="projectName" class="block text-sm font-medium text-gray-700 mb-1">ชื่อโครงการ</label>
|
||||
<input type="text" id="projectName" name="projectName"
|
||||
class="w-full p-3 border border-gray-300 rounded-lg focus:ring-red-500 focus:border-red-500 shadow-sm"
|
||||
placeholder="ป้อนชื่อโครงการ">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="budgetType" class="block text-sm font-medium text-gray-700 mb-1">ประเภทงบประมาณ</label>
|
||||
<select id="budgetType" name="budgetType"
|
||||
class="w-full p-3 border border-gray-300 rounded-lg focus:ring-red-500 focus:border-red-500 shadow-sm">
|
||||
<option value="">-- เลือกประเภท --</option>
|
||||
<option value="operation">งบดำเนินงาน</option>
|
||||
<option value="investment">งบลงทุน</option>
|
||||
<option value="research">งบวิจัย</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end pt-2">
|
||||
<button (click)="goToStep(2)"
|
||||
class="px-6 py-2 bg-red-500 text-white font-semibold rounded-lg shadow-md hover:bg-red-600 transition">
|
||||
บันทึกและต่อไป
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="border rounded-xl overflow-hidden shadow-sm"
|
||||
[ngClass]="{
|
||||
'border-red-500': currentStep === 2,
|
||||
'border-gray-200': currentStep !== 2
|
||||
}">
|
||||
|
||||
<div class="p-4 flex items-center justify-between cursor-pointer"
|
||||
[ngClass]="{
|
||||
'bg-red-50 text-red-700': currentStep === 2,
|
||||
'bg-gray-50 text-gray-700 hover:bg-gray-100': currentStep !== 2
|
||||
}"
|
||||
(click)="goToStep(2)">
|
||||
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-7 h-7 rounded-full flex items-center justify-center text-sm font-bold"
|
||||
[ngClass]="{
|
||||
'bg-red-500 text-white': currentStep === 2,
|
||||
'bg-gray-300 text-gray-700': currentStep !== 2
|
||||
}">
|
||||
2
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold">2. แนบเอกสารอ้างอิง</h3>
|
||||
</div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor"
|
||||
[ngClass]="{'rotate-180': currentStep === 2}">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="p-4 pt-0" *ngIf="currentStep === 2">
|
||||
<div class="border-t border-gray-200 pt-4 space-y-4">
|
||||
<p class="text-gray-600">โปรดแนบไฟล์ที่เกี่ยวข้อง (เช่น ใบเสนอราคา, แผนผัง)</p>
|
||||
<div class="h-24 border-2 border-dashed border-gray-300 rounded-lg flex items-center justify-center text-gray-500">
|
||||
คลิกหรือลากไฟล์มาวางที่นี่
|
||||
</div>
|
||||
<div class="flex justify-between pt-2">
|
||||
<button (click)="goToStep(1)"
|
||||
class="px-6 py-2 text-sm text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50">
|
||||
ย้อนกลับ
|
||||
</button>
|
||||
<button (click)="goToStep(3)"
|
||||
class="px-6 py-2 bg-red-500 text-white font-semibold rounded-lg shadow-md hover:bg-red-600 transition">
|
||||
ตรวจสอบและส่ง
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="border rounded-xl overflow-hidden shadow-sm"
|
||||
[ngClass]="{
|
||||
'border-red-500': currentStep === 3,
|
||||
'border-gray-200': currentStep !== 3
|
||||
}">
|
||||
|
||||
<div class="p-4 flex items-center justify-between cursor-pointer"
|
||||
[ngClass]="{
|
||||
'bg-red-50 text-red-700': currentStep === 3,
|
||||
'bg-gray-50 text-gray-700 hover:bg-gray-100': currentStep !== 3
|
||||
}"
|
||||
(click)="goToStep(3)">
|
||||
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-7 h-7 rounded-full flex items-center justify-center text-sm font-bold"
|
||||
[ngClass]="{
|
||||
'bg-red-500 text-white': currentStep === 3,
|
||||
'bg-gray-300 text-gray-700': currentStep !== 3
|
||||
}">
|
||||
3
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold">3. สรุปและส่งโครงการ</h3>
|
||||
</div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor"
|
||||
[ngClass]="{'rotate-180': currentStep === 3}">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="p-4 pt-0" *ngIf="currentStep === 3">
|
||||
<div class="border-t border-gray-200 pt-4 space-y-4">
|
||||
<p class="text-base font-medium text-gray-800">ตรวจสอบข้อมูลทั้งหมดก่อนยืนยันการส่ง</p>
|
||||
<ul class="text-sm text-gray-600 space-y-1 bg-gray-50 p-3 rounded-lg">
|
||||
<li>**ชื่อโครงการ:** โครงการปรับปรุงระบบน้ำ</li>
|
||||
<li>**ประเภทงบ:** งบดำเนินงาน</li>
|
||||
<li>**จำนวนเงิน:** 50,000 บาท</li>
|
||||
<li>**สถานะเอกสาร:** แนบครบ 2 ไฟล์</li>
|
||||
</ul>
|
||||
<div class="flex justify-end pt-2">
|
||||
<button (click)="goToStep(2)"
|
||||
class="px-6 py-2 text-sm text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50 mr-2">
|
||||
ย้อนกลับ
|
||||
</button>
|
||||
<button type="submit"
|
||||
class="px-6 py-2 bg-green-500 text-white font-semibold rounded-lg shadow-md hover:bg-green-600 transition">
|
||||
ยืนยันและส่งโครงการ
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,16 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-main-project-add',
|
||||
standalone: false,
|
||||
templateUrl: './main-project-add.html',
|
||||
styleUrl: './main-project-add.css',
|
||||
})
|
||||
export class MainProjectAdd {
|
||||
currentStep: number = 1; // 1 = กรอกข้อมูล, 2 = แนบเอกสาร, 3 = สรุปและส่ง
|
||||
|
||||
// ฟังก์ชันสำหรับเปลี่ยนขั้นตอน
|
||||
goToStep(step: number): void {
|
||||
this.currentStep = step;
|
||||
}
|
||||
}
|
||||
162
ng-ttc-frontend/src/app/component/main-project/main-project.html
Normal file
162
ng-ttc-frontend/src/app/component/main-project/main-project.html
Normal file
@@ -0,0 +1,162 @@
|
||||
<div class="mt-6">
|
||||
<!-- <header class="flex justify-end items-center py-2 px-2">
|
||||
|
||||
</header> -->
|
||||
|
||||
<body class="grid grid-cols-1 lg:grid-cols-3 gap-6 mt-4">
|
||||
|
||||
<div class="lg:col-span-2 space-y-6">
|
||||
|
||||
<div class="bg-white p-6 rounded-xl shadow-lg border border-gray-200">
|
||||
<h2 class="text-xl font-semibold text-gray-700 mb-4">โครงการของฉัน</h2>
|
||||
|
||||
<button class="flex items-center space-x-1 px-4 py-2 mb-4 text-sm font-medium text-white bg-red-900 rounded-lg shadow-md hover:bg-red-950 transition duration-150" (click)="navigate('/main/project/add')">
|
||||
<span class="text-xl leading-none">+</span>
|
||||
<span>เพิ่มโครงการ</span>
|
||||
</button>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full text-sm border-collapse">
|
||||
<thead class="bg-red-900 text-white">
|
||||
<tr>
|
||||
<th class="py-3 px-4 text-left rounded-tl-lg w-16">ลำดับ</th>
|
||||
<th class="py-3 px-4 text-left">ชื่อโครงการ</th>
|
||||
<th class="py-3 px-4 text-left">สถานะ</th>
|
||||
<th class="py-3 px-4 text-center rounded-tr-lg w-20">ดำเนินการ</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<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-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>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white p-6 rounded-xl shadow-lg border border-gray-200">
|
||||
<h2 class="text-xl font-semibold text-gray-700 mb-6">ความคืบหน้าโครงการ: โครงการปรับปรุงอาคาร</h2>
|
||||
|
||||
<div class="space-y-4">
|
||||
|
||||
<div class="flex items-start">
|
||||
<div class="flex flex-col items-center mr-4">
|
||||
<div class="w-8 h-8 rounded-full bg-green-500 text-white flex items-center justify-center text-sm font-bold shadow-md">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="w-px h-16 bg-green-500"></div> </div>
|
||||
<div>
|
||||
<h3 class="font-semibold text-green-700">1. ยื่นคำขอโครงการ</h3>
|
||||
<p class="text-sm text-gray-500">วันที่: 10/11/2568</p>
|
||||
<p class="text-sm text-gray-700 mt-1">เอกสารและรายละเอียดโครงการครบถ้วน</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start">
|
||||
<div class="flex flex-col items-center mr-4">
|
||||
<div class="w-8 h-8 rounded-full bg-blue-500 text-white flex items-center justify-center text-sm font-bold border-2 border-blue-700 shadow-xl">
|
||||
2
|
||||
</div>
|
||||
<div class="w-px h-16 bg-gray-300"></div> </div>
|
||||
<div>
|
||||
<h3 class="font-bold text-blue-700">2. พิจารณางบประมาณ</h3>
|
||||
<p class="text-sm text-gray-500">กำหนดแล้วเสร็จ: 25/11/2568</p>
|
||||
<p class="text-sm text-gray-700 mt-1 font-medium">รอฝ่ายบัญชีและงบประมาณอนุมัติยอดจัดสรร</p>
|
||||
<button class="mt-2 text-xs text-blue-500 hover:text-blue-700">ดูรายละเอียดการเงิน</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start">
|
||||
<div class="flex flex-col items-center mr-4">
|
||||
<div class="w-8 h-8 rounded-full bg-gray-300 text-gray-700 flex items-center justify-center text-sm font-bold">
|
||||
3
|
||||
</div>
|
||||
<div class="w-px h-16 bg-gray-300"></div> </div>
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-500">3. อนุมัติโดยผู้บริหาร</h3>
|
||||
<p class="text-sm text-gray-400">ยังไม่ระบุวันที่</p>
|
||||
<p class="text-sm text-gray-400 mt-1">รอขั้นตอนก่อนหน้าเสร็จสิ้น</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start">
|
||||
<div class="flex flex-col items-center mr-4">
|
||||
<div class="w-8 h-8 rounded-full bg-gray-300 text-gray-700 flex items-center justify-center text-sm font-bold">
|
||||
4
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-500">4. จัดสรรงบประมาณสำเร็จ</h3>
|
||||
<p class="text-sm text-gray-400">ยังไม่ระบุวันที่</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="lg:col-span-1 space-y-6">
|
||||
|
||||
<!-- <div class="bg-white p-6 rounded-xl shadow-lg border border-gray-200">
|
||||
<h2 class="text-xl font-semibold text-gray-700 mb-4">ปฏิทินแจ้งเตือน</h2>
|
||||
<div class="flex space-x-3">
|
||||
<div class="h-16 w-1/3 bg-gray-200 rounded-lg"></div>
|
||||
<div class="h-16 w-1/3 bg-gray-200 rounded-lg"></div>
|
||||
<div class="h-16 w-1/3 bg-gray-200 rounded-lg"></div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- <div class="bg-white p-6 rounded-xl shadow-lg border border-gray-200">
|
||||
<h2 class="text-xl font-semibold text-gray-700 mb-4">กล่องข้อความ</h2>
|
||||
<div class="space-y-3">
|
||||
<div class="h-4 bg-gray-200 rounded w-11/12"></div>
|
||||
<div class="h-4 bg-gray-200 rounded w-10/12"></div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="bg-white p-6 rounded-xl shadow-lg border border-gray-200">
|
||||
<h2 class="text-lg font-medium text-gray-700 mb-4">กล่องแจ้งเตือน</h2>
|
||||
<div class="space-y-4">
|
||||
|
||||
<!-- <div class="flex items-start space-x-3 p-3 bg-red-50 rounded-lg border-l-4 border-red-500 hover:bg-red-100 transition duration-150 cursor-pointer">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mt-0.5 text-red-600 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
||||
</svg>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-800">มี **โครงการ 3 รายการ** รออนุมัติ</p>
|
||||
<p class="text-xs text-red-600 mt-0.5">ครบกำหนด: วันนี้, 15:00 น.</p>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="flex items-start space-x-3 p-3 bg-blue-50 rounded-lg border-l-4 border-blue-500 hover:bg-blue-100 transition duration-150 cursor-pointer">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mt-0.5 text-blue-600 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-800">เอกสารฟอร์มวิทยาลัย **ฉบับใหม่** พร้อมดาวน์โหลดแล้ว</p>
|
||||
<p class="text-xs text-gray-500 mt-0.5">ประกาศเมื่อ: 17 พ.ย. 2568</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start space-x-3 p-3 bg-green-50 rounded-lg border-l-4 border-green-500 hover:bg-green-100 transition duration-150 cursor-pointer">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mt-0.5 text-green-600 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.102a9 9 0 11-12.728 0m12.728 0a9 9 0 00-12.728 0" />
|
||||
</svg>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-800">การเปิดงบประมาณ **ไตรมาส 4** ได้รับการอนุมัติแล้ว</p>
|
||||
<p class="text-xs text-gray-500 mt-0.5">สำเร็จเมื่อ: 15 พ.ย. 2568</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</div>
|
||||
@@ -0,0 +1,30 @@
|
||||
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
|
||||
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
|
||||
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';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-main-project',
|
||||
standalone: false,
|
||||
templateUrl: './main-project.html',
|
||||
styleUrl: './main-project.css',
|
||||
})
|
||||
export class MainProject implements OnInit {
|
||||
constructor(
|
||||
private generalService: GeneralService,
|
||||
private dashboardStateService: DashboardStateService,
|
||||
private router: Router
|
||||
) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
|
||||
}
|
||||
|
||||
|
||||
navigate(path: string) {
|
||||
this.router.navigate([path]);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
<div class="h-screen bg-gray-100 flex flex-col">
|
||||
|
||||
<header class="flex justify-between items-center py-4 px-6">
|
||||
@if (mode == 'default') {
|
||||
<h1 class="text-3xl font-bold text-gray-800">โครงการทั้งหมด</h1>
|
||||
} @else if (mode == 'add') {
|
||||
<h1 class="text-3xl font-bold text-gray-800">เพิ่มโครงการ</h1>
|
||||
}
|
||||
|
||||
</header>
|
||||
|
||||
<div class="grow overflow-y-auto px-6 pb-6">
|
||||
|
||||
@if ( mode == 'default') {
|
||||
<app-main-project></app-main-project>
|
||||
} @else if ( mode == 'add') {
|
||||
<app-main-project-add></app-main-project-add>
|
||||
}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="h-screen bg-gray-100 flex flex-col">
|
||||
|
||||
<header class="flex justify-between items-center py-4 px-6 bg-white shadow-sm shrink-0 z-10">
|
||||
<h1 class="text-2xl font-bold text-gray-800">
|
||||
{{ mode === 'add' ? 'สร้างโครงการใหม่' : 'โครงการทั้งหมด' }}
|
||||
</h1>
|
||||
|
||||
<button *ngIf="mode === 'default'"
|
||||
(click)="mode = 'add'"
|
||||
class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg shadow-sm text-sm font-medium transition">
|
||||
+ เพิ่มโครงการ
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div class="grow overflow-y-auto p-6">
|
||||
|
||||
@if (mode === 'default') {
|
||||
<app-main-project></app-main-project>
|
||||
|
||||
} @else if (mode === 'add') {
|
||||
|
||||
<div class="flex items-start justify-center min-h-full">
|
||||
<div class="bg-white p-8 rounded-xl shadow-lg w-full max-w-lg border border-gray-100">
|
||||
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h2 class="text-xl font-bold text-gray-800">รายละเอียดโครงการ</h2>
|
||||
<button (click)="mode = 'default'" class="text-gray-400 hover:text-gray-600">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form class="space-y-5"> <div>
|
||||
<label for="projectName" class="block text-sm font-medium text-gray-700 mb-1">ชื่อโครงการ</label>
|
||||
<input type="text" id="projectName" name="projectName"
|
||||
class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 outline-none transition shadow-sm"
|
||||
placeholder="ป้อนชื่อโครงการ">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="budgetType" class="block text-sm font-medium text-gray-700 mb-1">ประเภทงบประมาณ</label>
|
||||
<div class="relative">
|
||||
<select id="budgetType" name="budgetType"
|
||||
class="w-full p-3 bg-white border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 outline-none appearance-none shadow-sm cursor-pointer">
|
||||
<option value="">-- เลือกประเภท --</option>
|
||||
<option value="operation">งบดำเนินงาน</option>
|
||||
<option value="investment">งบลงทุน</option>
|
||||
<option value="research">งบวิจัย</option>
|
||||
</select>
|
||||
<div class="absolute inset-y-0 right-0 flex items-center px-3 pointer-events-none text-gray-500">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="amount" class="block text-sm font-medium text-gray-700 mb-1">จำนวนเงิน (บาท)</label>
|
||||
<input type="number" id="amount" name="amount"
|
||||
class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 outline-none transition shadow-sm"
|
||||
placeholder="เช่น 15000.00">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="date" class="block text-sm font-medium text-gray-700 mb-1">วันที่เริ่มโครงการ</label>
|
||||
<div class="relative">
|
||||
<input type="date" id="date" name="date"
|
||||
class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 outline-none transition shadow-sm text-gray-700">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3 pt-4">
|
||||
<button type="button" (click)="mode = 'default'"
|
||||
class="flex-1 px-4 py-3 bg-gray-100 text-gray-700 font-semibold rounded-lg hover:bg-gray-200 transition">
|
||||
ยกเลิก
|
||||
</button>
|
||||
|
||||
<button type="submit"
|
||||
class="flex-1 px-4 py-3 bg-red-500 text-white font-semibold rounded-lg shadow-md hover:bg-red-600 focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition">
|
||||
ส่งโครงการ
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
}
|
||||
|
||||
</div>
|
||||
</div> -->
|
||||
@@ -0,0 +1,30 @@
|
||||
import { Routes, Router, ActivatedRoute } from '@angular/router';
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-main-project-content',
|
||||
standalone: false,
|
||||
templateUrl: './main-project-content.html',
|
||||
styleUrl: './main-project-content.css',
|
||||
})
|
||||
export class MainProjectContent implements OnInit {
|
||||
mode: 'add' | 'edit' | 'default' = 'default';
|
||||
|
||||
constructor(
|
||||
private route: ActivatedRoute,
|
||||
private router: Router
|
||||
) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
let param = this.route.snapshot.paramMap.get('mode');
|
||||
|
||||
if (param === 'add') {
|
||||
this.mode = 'add';
|
||||
} else if (param === 'edit') {
|
||||
this.mode = 'edit';
|
||||
} else {
|
||||
this.mode = 'default';
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -5,6 +5,7 @@ import { MainDashboardContentComponent } from '../../content/main-dashboard-cont
|
||||
import { MainReportComponent } from '../../component/main-report/main-report.component';
|
||||
import { BudgetAproval } from '../../component/budget-aproval/budget-aproval';
|
||||
import { MainLandingComponent } from '../../component/main-landing/main-landing.component';
|
||||
import { MainProjectContent } from '../../content/main-project-content/main-project-content';
|
||||
// import { MainReportComponent } from '../../component/main-report/main-report.component';
|
||||
|
||||
|
||||
@@ -14,6 +15,8 @@ const routes: Routes = [
|
||||
{ path: 'dashboard', component: MainDashboardContentComponent },
|
||||
{ path: 'report', component: MainReportComponent },
|
||||
{ path: 'manager', component: MainManagerContentComponent },
|
||||
{ path: 'project', component: MainProjectContent },
|
||||
{ path: 'project/:mode', component: MainProjectContent },
|
||||
{
|
||||
path: 'manager',
|
||||
children: [
|
||||
|
||||
@@ -14,6 +14,9 @@ import { MainReportComponent } from '../../component/main-report/main-report.com
|
||||
import { MainManagerComponent } from '../../component/main-manager/main-manager.component';
|
||||
import { BudgetAproval } from '../../component/budget-aproval/budget-aproval';
|
||||
import { MainLandingComponent } from '../../component/main-landing/main-landing.component';
|
||||
import { MainProjectContent } from '../../content/main-project-content/main-project-content';
|
||||
import { MainProject } from '../../component/main-project/main-project';
|
||||
import { MainProjectAdd } from '../../component/main-project-add/main-project-add';
|
||||
|
||||
// import { MainReportComponent } from '../../component/main-report/main-report.component';
|
||||
|
||||
@@ -28,6 +31,9 @@ import { MainLandingComponent } from '../../component/main-landing/main-landing.
|
||||
MainManagerComponent,
|
||||
BudgetAproval,
|
||||
MainLandingComponent,
|
||||
MainProjectContent,
|
||||
MainProject,
|
||||
MainProjectAdd,
|
||||
AccDateFormatPipe
|
||||
// MainReportComponent
|
||||
],
|
||||
|
||||
Reference in New Issue
Block a user