Files
micro-frontend/ng-ttc-frontend/src/app/content/main-project-content/main-project-content.html

48 lines
2.4 KiB
HTML
Raw Normal View History

2025-11-28 21:32:50 +07:00
<div class="h-full bg-gray-100 flex flex-col w-full"> <!-- แก้ h-screen เป็น h-full -->
2025-11-21 10:24:49 +07:00
2025-11-28 21:32:50 +07:00
<!-- Header: ใช้ flex-shrink-0 เพื่อไม่ให้โดนบีบ และ bg-white เพื่อให้ตัดกับ content -->
<header class="shrink-0 flex justify-between items-center py-4 px-6">
2025-11-21 10:24:49 +07:00
@if (mode == 'default') {
2025-11-28 21:32:50 +07:00
<div class="flex flex-col md:flex-row justify-between items-end gap-4 w-full">
<div>
2025-11-28 19:44:32 +07:00
<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> รายการโครงการทั้งหมด
2025-11-28 19:44:32 +07:00
</h1>
<p class="text-gray-500 mt-1 text-sm pl-4">ติดตาม สถานะโครงการ และ เสนอโครงการ</p>
</div>
</div>
} @else if (mode == 'add') {
2025-11-28 21:32:50 +07:00
<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()"
class="group flex items-center justify-center w-8 h-8 rounded-full hover:bg-gray-100 transition-all mr-1"
title="ย้อนกลับ">
<i class="fas fa-arrow-left text-gray-400 group-hover:text-red-900 text-lg"></i>
</button>
<div class="h-6 w-px bg-gray-200 mr-2"></div>
<span class="w-2 h-8 bg-red-900 rounded-full"></span> เพิ่มโครงการ
</h1>
<p class="text-gray-500 mt-1 text-sm pl-14">กรอกรายละเอียดเพื่อขออนุมัติงบประมาณ</p>
</div>
</div>
}
2025-11-21 10:24:49 +07:00
</header>
2025-11-28 21:32:50 +07:00
<!-- Content: ใช้ flex-1 เพื่อกินพื้นที่ที่เหลือ และ overflow-y-auto เพื่อให้ scroll เฉพาะส่วนนี้ -->
<div class="flex-1 overflow-y-auto px-6 pb-6">
2025-11-21 10:24:49 +07:00
@if ( mode == 'default') {
<app-main-project></app-main-project>
} @else if ( mode == 'add') {
<app-main-project-add
(save)="onSaveProject($event)"
(cancel)="onCancelProject()">
</app-main-project-add>
2025-11-21 10:24:49 +07:00
}
</div>
</div>