340 lines
19 KiB
HTML
340 lines
19 KiB
HTML
|
|
<div class="w-full p-6 space-y-8 bg-gray-50 min-h-screen font-sans text-gray-800">
|
|
|
|
<!-- 1. Header Section -->
|
|
<div class="flex flex-col md:flex-row md:justify-between md:items-end gap-4 border-b border-gray-200 pb-4">
|
|
<div>
|
|
<h2 class="text-2xl font-bold text-gray-800 flex items-center gap-3">
|
|
<!-- <span class="bg-red-100 text-red-800 p-2 rounded-lg text-xl">💸</span> -->
|
|
<span>จัดสรรงบประมาณ</span>
|
|
</h2>
|
|
<p class="text-gray-500 mt-1 ml-1 text-sm">โครงการ: <span class="font-medium text-red-900">{{projectTitle}}</span></p>
|
|
</div>
|
|
<div class="text-sm text-gray-500 bg-white px-4 py-2 rounded-full shadow-sm border border-gray-100">
|
|
รายการทั้งหมด: <span class="font-bold text-red-800">{{ myTrnMst.length }}</span> รายการ
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 2. Add/Edit Budget Form (Collapsible) -->
|
|
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden transition-all duration-300">
|
|
<!-- Toggle Header -->
|
|
<div
|
|
class="flex justify-between items-center p-4 bg-gray-50 cursor-pointer hover:bg-gray-100 transition select-none border-b border-gray-100"
|
|
(click)="toggleFormCollapse()"
|
|
>
|
|
<div class="flex items-center gap-2 font-bold text-gray-700">
|
|
<!-- <span class="bg-red-600 text-white w-6 h-6 flex items-center justify-center rounded-full text-xs shadow-sm">
|
|
{{ isEditMode ? '✎' : '✚' }}
|
|
</span> -->
|
|
{{ isEditMode ? 'แก้ไขรายการ' : 'เพิ่มรายการงบประมาณ' }}
|
|
</div>
|
|
<button class="text-gray-400 transition-transform duration-300" [ngClass]="{'rotate-180': isFormExpanded}">
|
|
<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>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Form Content -->
|
|
@if(isFormExpanded){
|
|
<div class="p-6 bg-white animate-fade-in-down">
|
|
<form [formGroup]="budgetForm">
|
|
<div class="grid grid-cols-1 md:grid-cols-12 gap-6 items-start">
|
|
|
|
<!-- Dropdown หมวดงบ -->
|
|
<div class="md:col-span-5 space-y-1">
|
|
<label class="block text-xs font-bold text-gray-500 uppercase">
|
|
หมวดงบประมาณ <span class="text-red-500">*</span>
|
|
</label>
|
|
<select formControlName="bdgcod"
|
|
class="w-full p-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-transparent bg-gray-50 transition cursor-pointer"
|
|
[class.border-red-500]="budgetForm.get('bdgcod')?.invalid && budgetForm.get('bdgcod')?.touched">
|
|
<option value="">-- กรุณาเลือก --</option>
|
|
@for (item of myDropBdg; track item.bdgcod) {
|
|
<option [value]="item.bdgcod">{{ item.bdgnam }}</option>
|
|
}
|
|
</select>
|
|
<!-- Error Message -->
|
|
@if (budgetForm.get('bdgcod')?.invalid && budgetForm.get('bdgcod')?.touched) {
|
|
<div class="text-red-500 text-xs flex items-center gap-1">
|
|
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
|
กรุณาเลือกหมวดงบ
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
<!-- Input จำนวนเงิน -->
|
|
<div class="md:col-span-5 space-y-1">
|
|
<label class="block text-xs font-bold text-gray-500 uppercase">
|
|
จำนวนเงิน <span class="text-red-500">*</span>
|
|
</label>
|
|
<div class="relative">
|
|
<input type="number" formControlName="amount" placeholder="0.00"
|
|
class="w-full p-3 pr-12 border border-gray-200 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-transparent bg-gray-50 text-right font-mono text-gray-800 transition"
|
|
[class.border-red-500]="budgetForm.get('amount')?.invalid && budgetForm.get('amount')?.touched">
|
|
<span class="absolute right-4 top-3 text-gray-400 text-sm font-medium pointer-events-none">THB</span>
|
|
</div>
|
|
<!-- Error Message -->
|
|
@if (budgetForm.get('amount')?.invalid && budgetForm.get('amount')?.touched) {
|
|
<div class="text-red-500 text-xs flex items-center gap-1">
|
|
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
|
ระบุจำนวนเงินที่ถูกต้อง
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="md:col-span-2 flex gap-2 pt-6">
|
|
<button type="button" (click)="onSaveSubmit()"
|
|
class="flex-1 bg-red-800 hover:bg-red-900 text-white font-bold py-3 px-4 rounded-lg shadow-md hover:shadow-lg transition active:scale-95 flex justify-center items-center gap-2">
|
|
<span>{{ isEditMode ? 'บันทึกแก้ไข' : 'เพิ่ม' }}</span>
|
|
</button>
|
|
|
|
@if(isEditMode) {
|
|
<button type="button" (click)="cancelEdit()"
|
|
class="bg-gray-200 hover:bg-gray-300 text-gray-600 font-bold py-3 px-4 rounded-lg transition active:scale-95">
|
|
ยกเลิก
|
|
</button>
|
|
}
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
<!-- 3. Budget Table -->
|
|
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full text-left border-collapse">
|
|
<thead>
|
|
<tr class="bg-red-900 text-white text-sm uppercase tracking-wider">
|
|
<th class="py-4 px-6 font-semibold w-16 text-center">#</th>
|
|
<th class="py-4 px-6 font-semibold">รายการ / หมวดงบ</th>
|
|
<th class="py-4 px-6 font-semibold text-right w-48">จำนวนเงิน (บาท)</th>
|
|
<th class="py-4 px-6 font-semibold text-center w-32">จัดการ</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-100 text-sm">
|
|
@for (idx of myTrnMst; track idx.trnseq; let i = $index) {
|
|
<tr class="hover:bg-red-50/40 transition group">
|
|
<td class="py-4 px-6 text-center text-gray-500 font-mono">{{ i + 1 }}</td>
|
|
|
|
<td class="py-4 px-6">
|
|
<div class="font-bold text-gray-800">{{ idx.trnbdgnam }}</div>
|
|
<div class="text-xs text-gray-400 font-mono mt-0.5">{{ idx.trnbdgcod }}</div>
|
|
</td>
|
|
|
|
<td class="py-4 px-6 text-right font-mono font-medium text-gray-700">
|
|
{{ idx.trnexpbdg | number:'1.2-2' }}
|
|
</td>
|
|
|
|
<td class="py-4 px-6 text-center">
|
|
<div class="flex justify-center items-center gap-2">
|
|
<button (click)="editItem(i)" class="p-2 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition" title="แก้ไข">
|
|
<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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
|
</svg>
|
|
</button>
|
|
<button (click)="removeItem(i)" class="p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition" title="ลบ">
|
|
<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 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
} @empty {
|
|
<tr>
|
|
<td colspan="4" class="py-12 text-center text-gray-400 bg-gray-50/30">
|
|
<div class="text-4xl mb-2 opacity-50">📭</div>
|
|
<p>ยังไม่มีรายการงบประมาณ</p>
|
|
</td>
|
|
</tr>
|
|
}
|
|
</tbody>
|
|
|
|
<!-- Footer Total & Action Buttons -->
|
|
<tfoot class="bg-gray-50 border-t-2 border-red-200">
|
|
<tr>
|
|
<td colspan="2" class="py-4 px-6 text-right font-bold text-gray-600 uppercase text-xs tracking-wider">รวมยอดสุทธิ</td>
|
|
<td class="py-4 px-6 text-right">
|
|
<span class="text-xl font-extrabold text-red-900">{{ getTotalAmount() | number:'1.2-2' }}</span>
|
|
<span class="text-xs text-gray-500 ml-1 font-medium">THB</span>
|
|
</td>
|
|
<td class="py-4 px-6 text-center">
|
|
<div class="flex items-center justify-center gap-3">
|
|
<!-- 🟢 ปุ่มย้อนกลับ (Icon Arrow) -->
|
|
<button (click)="goBack()" class="p-2.5 bg-white border border-gray-200 rounded-lg text-gray-500 hover:text-red-700 hover:border-red-200 hover:bg-red-50 hover:shadow-sm transition active:scale-95 group" title="ย้อนกลับ">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 group-hover:-translate-x-1 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- 🟢 ปุ่มยืนยันบันทึกทั้งหมด -->
|
|
<button (click)="openConfirmModal()"
|
|
class="bg-green-600 hover:bg-green-700 text-white text-xs font-bold py-2.5 px-5 rounded-lg shadow transition active:scale-95 flex items-center gap-2">
|
|
<span>✓</span> บันทึก
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 🟢 Modal Confirmation (Save / Cancel) -->
|
|
@if(showConfirmModal) {
|
|
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm animate-fade-in">
|
|
<div class="bg-white rounded-2xl shadow-2xl w-96 overflow-hidden transform transition-all scale-100">
|
|
|
|
<!-- 🟢 Dynamic Header Color -->
|
|
<div class="p-4 text-white flex justify-between items-center"
|
|
[ngClass]="myTrnMst.length === 0 ? 'bg-red-600' : 'bg-red-900'">
|
|
<h3 class="font-bold text-lg flex items-center gap-2">
|
|
<span>{{ myTrnMst.length === 0 ? '⚠️' : '💾' }}</span>
|
|
{{ myTrnMst.length === 0 ? 'ยืนยันการยกเลิก' : 'ยืนยันการบันทึก' }}
|
|
</h3>
|
|
<button (click)="closeConfirmModal()" class="text-white/70 hover:text-white">✕</button>
|
|
</div>
|
|
|
|
<div class="p-6 text-center space-y-4">
|
|
<!-- 🟢 Dynamic Icon -->
|
|
<div class="w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-2"
|
|
[ngClass]="myTrnMst.length === 0 ? 'bg-red-50 text-red-600' : 'bg-red-50 text-red-600'">
|
|
<span class="text-3xl">{{ myTrnMst.length === 0 ? '🗑️' : '📝' }}</span>
|
|
</div>
|
|
|
|
<!-- 🟢 Dynamic Message -->
|
|
<p class="text-gray-600">
|
|
@if(myTrnMst.length === 0) {
|
|
คุณต้องการ <b>ยกเลิกการจัดสรรงบประมาณ</b> <br>ของโครงการนี้ใช่หรือไม่?
|
|
} @else {
|
|
คุณต้องการ <b>บันทึกข้อมูลการจัดสรรงบประมาณ</b> <br>ของโครงการนี้ใช่หรือไม่?
|
|
}
|
|
</p>
|
|
|
|
<!-- Summary Info -->
|
|
<div class="bg-gray-50 p-3 rounded-lg border border-gray-100 text-sm">
|
|
<div class="flex justify-between mb-1">
|
|
<span class="text-gray-500">จำนวนรายการ:</span>
|
|
<span class="font-bold text-gray-800">{{ myTrnMst.length }} รายการ</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-gray-500">ยอดรวม:</span>
|
|
<span class="font-bold text-red-800">{{ getTotalAmount() | number:'1.2-2' }} บาท</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 🟢 List of Items (บอกรายการ) -->
|
|
<div class="text-xs text-gray-500 mt-2 text-left max-h-32 overflow-y-auto border-t border-gray-200 pt-2">
|
|
<div class="font-semibold mb-1">รายการ:</div>
|
|
@if(myTrnMst.length > 0) {
|
|
<ul class="list-disc pl-4 space-y-1">
|
|
@for(item of myTrnMst; track $index) {
|
|
<li>{{ item.trnbdgnam }} ({{ item.trnexpbdg | number }})</li>
|
|
}
|
|
</ul>
|
|
} @else {
|
|
<p class="text-red-500 italic">- ไม่พบรายการคงเหลือ (ลบทั้งหมด) -</p>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal Footer -->
|
|
<div class="p-4 bg-gray-50 flex gap-3 border-t border-gray-100">
|
|
<button (click)="closeConfirmModal()" class="flex-1 py-2.5 px-4 bg-white border border-gray-300 text-gray-700 font-bold rounded-xl hover:bg-gray-50 transition">
|
|
ยกเลิก
|
|
</button>
|
|
<!-- 🟢 Dynamic Button Color -->
|
|
<button (click)="confirmSave()"
|
|
class="flex-1 py-2.5 px-4 text-white font-bold rounded-xl shadow-md hover:shadow-lg transition"
|
|
[ngClass]="myTrnMst.length === 0 ? 'bg-red-600 hover:bg-red-700' : 'bg-red-800 hover:bg-red-900'">
|
|
{{ myTrnMst.length === 0 ? 'ยืนยันการยกเลิก' : 'ยืนยัน' }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
<!-- 🟢 Modal Confirmation
|
|
@if(showConfirmModal) {
|
|
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm animate-fade-in">
|
|
<div class="bg-white rounded-2xl shadow-2xl w-96 overflow-hidden transform transition-all scale-100">
|
|
|
|
Modal Header
|
|
<div class="bg-red-900 p-4 text-white flex justify-between items-center">
|
|
<h3 class="font-bold text-lg flex items-center gap-2">
|
|
<span>💾</span> ยืนยันการบันทึก
|
|
</h3>
|
|
<button (click)="closeConfirmModal()" class="text-white/70 hover:text-white">✕</button>
|
|
</div>
|
|
|
|
Modal Body
|
|
<div class="p-6 text-center space-y-4">
|
|
<div class="w-16 h-16 bg-red-50 rounded-full flex items-center justify-center mx-auto mb-2">
|
|
<span class="text-3xl">📝</span>
|
|
</div>
|
|
<p class="text-gray-600">คุณต้องการบันทึกข้อมูลการจัดสรรงบประมาณใช่หรือไม่?</p>
|
|
|
|
<div class="bg-gray-50 p-3 rounded-lg border border-gray-100 text-sm">
|
|
<div class="flex justify-between mb-1">
|
|
<span class="text-gray-500">จำนวนรายการ:</span>
|
|
<span class="font-bold text-gray-800">{{ myTrnMst.length }} รายการ</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-gray-500">ยอดรวม:</span>
|
|
<span class="font-bold text-red-800">{{ getTotalAmount() | number:'1.2-2' }} บาท</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
Modal Footer
|
|
<div class="p-4 bg-gray-50 flex gap-3 border-t border-gray-100">
|
|
<button (click)="closeConfirmModal()" class="flex-1 py-2.5 px-4 bg-white border border-gray-300 text-gray-700 font-bold rounded-xl hover:bg-gray-50 transition">
|
|
ยกเลิก
|
|
</button>
|
|
<button (click)="confirmSave()" class="flex-1 py-2.5 px-4 bg-red-800 text-white font-bold rounded-xl hover:bg-red-900 shadow-md hover:shadow-lg transition">
|
|
ยืนยัน
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
} -->
|
|
|
|
|
|
<!-- 🔴 Modal Confirmation (Delete) -->
|
|
@if(showDeleteModal) {
|
|
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm animate-fade-in">
|
|
<div class="bg-white rounded-2xl shadow-2xl w-96 overflow-hidden transform transition-all scale-100">
|
|
|
|
<div class="bg-red-600 p-4 text-white flex justify-between items-center">
|
|
<h3 class="font-bold text-lg flex items-center gap-2">
|
|
<span>🗑️</span> ยืนยันการลบ
|
|
</h3>
|
|
<button (click)="closeDeleteModal()" class="text-white/70 hover:text-white">✕</button>
|
|
</div>
|
|
|
|
<div class="p-6 text-center space-y-4">
|
|
<div class="w-16 h-16 bg-red-50 rounded-full flex items-center justify-center mx-auto mb-2">
|
|
<span class="text-3xl">⚠️</span>
|
|
</div>
|
|
<p class="text-gray-600">คุณต้องการลบรายการนี้ใช่หรือไม่?</p>
|
|
<p class="text-sm text-gray-500">การกระทำนี้ไม่สามารถย้อนกลับได้ (ในหน้าจอนี้)</p>
|
|
</div>
|
|
|
|
<div class="p-4 bg-gray-50 flex gap-3 border-t border-gray-100">
|
|
<button (click)="closeDeleteModal()" class="flex-1 py-2.5 px-4 bg-white border border-gray-300 text-gray-700 font-bold rounded-xl hover:bg-gray-50 transition">
|
|
ยกเลิก
|
|
</button>
|
|
<button (click)="confirmDelete()" class="flex-1 py-2.5 px-4 bg-red-600 text-white font-bold rounded-xl hover:bg-red-700 shadow-md hover:shadow-lg transition">
|
|
ลบรายการ
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
</div>
|