ttc/micro-frontend
2
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

- add project
All checks were successful
Build Docker Image / Build Docker Image (push) Successful in 6m12s
Details

Browse Source
This commit is contained in:
x2Skyz
2025-11-21 10:24:49 +07:00
parent 651a120e2b
commit 10aac6060b
13 changed files with 544 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
ng-ttc-frontend/src/app/content/main-project-content/main-project-content.css Normal file
View File

115
ng-ttc-frontend/src/app/content/main-project-content/main-project-content.html Normal file
View File

@@ -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> -->

30
ng-ttc-frontend/src/app/content/main-project-content/main-project-content.ts Normal file
View File

@@ -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';
}
}
}