116 lines
5.4 KiB
HTML
116 lines
5.4 KiB
HTML
|
<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> -->
|