.
This commit is contained in:
x2Skyz
@@ -28,6 +28,7 @@ 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 { BudgetAprovalContent } from './content/budget-aproval-content/budget-aproval-content';
|
||||
// import { BudgetAproval } from './component/budget-aproval/budget-aproval';
|
||||
// import { AccDateFormatPipe } from './pipe/dtmtodatetime.pipe';
|
||||
// import { DtmtodatetimePipe } from './dtmtodatetime.pipe';
|
||||
@@ -39,7 +40,8 @@ import { MainProjectAdd } from './component/main-project-add/main-project-add';
|
||||
SidebarContentComponent,
|
||||
SidebarComponent,
|
||||
LicensePrivacyTermsComponent,
|
||||
TokenTimerComponent
|
||||
TokenTimerComponent,
|
||||
// BudgetAprovalContent
|
||||
// MainProjectAdd,
|
||||
// MainProject,
|
||||
// MainProjectContent,
|
||||
|
||||
@@ -0,0 +1,16 @@
|
||||
.animate-fade-in-down { animation: fadeInDown 0.3s ease-out; }
|
||||
.animate-fade-in { animation: fadeIn 0.2s ease-out; }
|
||||
|
||||
@keyframes fadeInDown {
|
||||
from { opacity: 0; transform: translateY(-10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
input[type=number]::-webkit-inner-spin-button,
|
||||
input[type=number]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -1,307 +1,339 @@
|
||||
<div class="p-6 space-y-10">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex justify-between items-center mb-4 ">
|
||||
<h2 class="text-xl font-semibold">
|
||||
รายการงบประมาณของโครงการ: ระบบจัดการน้ำดื่ม
|
||||
<!-- {{ project?.name }} -->
|
||||
</h2>
|
||||
<div class="w-full p-6 space-y-8 bg-gray-50 min-h-screen font-sans text-gray-800">
|
||||
|
||||
<div class="text-gray-600 text-sm">
|
||||
แสดงข้อมูล {{ budgetItems.length }} รายการ
|
||||
<!-- 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>
|
||||
|
||||
|
||||
<!-- Add New Budget Item -->
|
||||
<!-- <form [formGroup]="addItemForm" class="bg-gray-50 border rounded-xl p-4 mb-6">
|
||||
|
||||
<h3 class="font-semibold mb-3 text-gray-700">เพิ่มรายการงบประมาณ</h3>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
|
||||
หมวดงบ
|
||||
<div>
|
||||
<label class="text-sm text-gray-600">หมวดงบประมาณ</label>
|
||||
<select
|
||||
formControlName="category"
|
||||
class="w-full px-4 py-2 border rounded-xl bg-white mt-1
|
||||
focus:ring-2 focus:ring-blue-200 focus:border-blue-300" >
|
||||
<option value="">-- เลือกหมวดงบ --</option>
|
||||
|
||||
@for (item of budgetCategoriesDrop.expense; track item.dtlcod) {
|
||||
<option [value]="item.dtlcod">{{ item.dtlnam }}</option>
|
||||
}
|
||||
</select>
|
||||
|
||||
error
|
||||
<div
|
||||
*ngIf="addItemForm.controls['category'].invalid && addItemForm.controls['category'].touched"
|
||||
class="text-red-500 text-xs mt-1"
|
||||
>
|
||||
กรุณาเลือกหมวดงบ
|
||||
</div>
|
||||
</div>
|
||||
|
||||
รายการ
|
||||
<div>
|
||||
<label class="text-sm text-gray-600">ชื่อรายการ</label>
|
||||
<select
|
||||
formControlName="name"
|
||||
class="w-full px-4 py-2 border rounded-xl bg-white mt-1
|
||||
focus:ring-2 focus:ring-blue-200 focus:border-blue-300"
|
||||
>
|
||||
<option value="">-- เลือกรายการ --</option>
|
||||
|
||||
<option *ngFor="let it of masterItems" [value]="it.name">
|
||||
{{ it.name }}
|
||||
</option>
|
||||
</select>
|
||||
|
||||
<div
|
||||
*ngIf="addItemForm.controls['name'].invalid && addItemForm.controls['name'].touched"
|
||||
class="text-red-500 text-xs mt-1"
|
||||
>
|
||||
กรุณาเลือกรายการ
|
||||
</div>
|
||||
</div>
|
||||
|
||||
จำนวน
|
||||
<div>
|
||||
<label class="text-sm text-gray-600">จำนวน</label>
|
||||
<input
|
||||
type="number"
|
||||
formControlName="qty"
|
||||
class="w-full px-4 py-2 border rounded-xl bg-white mt-1
|
||||
focus:ring-2 focus:ring-blue-200 focus:border-blue-300"
|
||||
/>
|
||||
|
||||
<div
|
||||
*ngIf="addItemForm.controls['qty'].invalid && addItemForm.controls['qty'].touched"
|
||||
class="text-red-500 text-xs mt-1"
|
||||
>
|
||||
จำนวนต้องมากกว่า 0
|
||||
</div>
|
||||
</div>
|
||||
|
||||
ราคา
|
||||
<div>
|
||||
<label class="text-sm text-gray-600">ราคา</label>
|
||||
<input
|
||||
type="number"
|
||||
formControlName="price"
|
||||
class="w-full px-4 py-2 border rounded-xl bg-white mt-1
|
||||
focus:ring-2 focus:ring-blue-200 focus:border-blue-300"/>
|
||||
|
||||
<div
|
||||
*ngIf="addItemForm.controls['price'].invalid && addItemForm.controls['price'].touched"
|
||||
class="text-red-500 text-xs mt-1"
|
||||
>
|
||||
ราคาต้องมากกว่า 0
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
Add button
|
||||
<button
|
||||
type="button"
|
||||
(click)="addBudgetItem()"
|
||||
class="mt-4 bg-green-600 hover:bg-green-700 text-white px-5 py-2 rounded-xl shadow"
|
||||
<!-- 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()"
|
||||
>
|
||||
➕ เพิ่มเข้าตาราง
|
||||
</button>
|
||||
|
||||
</form> -->
|
||||
|
||||
<div class="bg-white rounded-lg shadow-md border border-gray-200 ">
|
||||
<!-- หัวพับได้ -->
|
||||
<div class="flex justify-between items-center p-4 border-b bg-gray-50 rounded-t-lg" (click)="toggleFormCollapse()">
|
||||
<h3 class="text-base font-semibold text-gray-700">เพิ่มรายการงบประมาณสำหรับโครงการ</h3>
|
||||
<button class="text-gray-400 hover:text-gray-600 focus:outline-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"
|
||||
[ngClass]="{'rotate-180': !isFormExpanded}">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
|
||||
</button>
|
||||
<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>
|
||||
<!-- เนื้อหาพับได้ -->
|
||||
@if(!isFormExpanded){
|
||||
<div class="p-4 space-y-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label for="borrower_id" class="block text-sm font-medium text-gray-700 mb-1">หมวดงบประมาณ</label>
|
||||
<select name="" id="" class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 shadow-sm">
|
||||
<option value="">-- เลือกหมวดงบ --</option>
|
||||
@for (item of budgetCategoriesDrop.expense; track item.dtlcod) {
|
||||
<option [value]="item.dtlcod">{{ item.dtlnam }}</option>
|
||||
}
|
||||
</select>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<div>
|
||||
<label for="first_name" class="block text-sm font-medium text-gray-700 mb-1">จำนวนเงิน</label>
|
||||
<input type="text" id="first_name" name="first_name" type="number" class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 shadow-sm" placeholder="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end pt-4 space-x-2">
|
||||
|
||||
<!-- <button class="flex items-center px-4 py-2 text-sm font-medium text-white bg-gray-500 rounded-md shadow-sm hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||
</svg>
|
||||
รีเซ็ต
|
||||
</button> -->
|
||||
|
||||
<!-- <button class="flex items-center px-4 py-2 text-sm font-medium text-white bg-blue-500 rounded-md shadow-sm hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
ค้นหา
|
||||
</button> -->
|
||||
|
||||
<!-- <button class="flex items-center px-4 py-2 text-sm font-medium text-white bg-green-500 rounded-md shadow-sm hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0011.414 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3 3v-6" />
|
||||
</svg>
|
||||
ส่งออก Excel
|
||||
</button> -->
|
||||
<button class="flex items-center px-4 py-2 text-sm font-medium text-white bg-green-500 rounded-md shadow-sm hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0011.414 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3 3v-6" />
|
||||
</svg>
|
||||
เพิ่มเข้าสู่ตาราง
|
||||
<!-- 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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Table -->
|
||||
<!-- <div class="overflow-x-auto bg-white shadow rounded-xl border">
|
||||
<table class="min-w-full border-collapse text-sm">
|
||||
|
||||
<thead class="bg-gray-100 border-b">
|
||||
<tr class="text-gray-700">
|
||||
<th class="py-3 px-4">ลำดับ</th>
|
||||
<th class="py-3 px-4">สถานะ</th>
|
||||
<th class="py-3 px-4">รหัส</th>
|
||||
<th class="py-3 px-4">ชื่อรายการ</th>
|
||||
<th class="py-3 px-4 text-center">จำนวน</th>
|
||||
<th class="py-3 px-4 text-right">ราคา/หน่วย</th>
|
||||
<th class="py-3 px-4 text-right">ยอดชำระ</th>
|
||||
<th class="py-3 px-4 text-center">ดำเนินการ</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
|
||||
<tr
|
||||
*ngFor="let item of budgetItems; let i = index"
|
||||
class="border-b hover:bg-gray-50 transition"
|
||||
>
|
||||
<td class="py-3 px-4">{{ i + 1 }}</td>
|
||||
|
||||
<td class="py-3 px-4 text-center">
|
||||
<span class="text-green-500 text-xl">●</span>
|
||||
</td>
|
||||
|
||||
<td class="py-3 px-4 font-medium">{{ item.code }}</td>
|
||||
|
||||
<td class="py-3 px-4 font-semibold">{{ item.name }}</td>
|
||||
|
||||
<td class="py-3 px-4 text-center">
|
||||
<input
|
||||
type="number"
|
||||
class="w-20 px-3 py-2 border rounded-lg text-center"
|
||||
/>
|
||||
</td>
|
||||
|
||||
<td class="py-3 px-4 text-right">
|
||||
{{ item.price | number:'1.0-2' }}
|
||||
</td>
|
||||
|
||||
<td class="py-3 px-4 text-right font-semibold">
|
||||
{{ item.qty * item.price | number:'1.0-2' }}
|
||||
</td>
|
||||
|
||||
<td class="py-3 px-4 text-center space-x-2">
|
||||
<button
|
||||
class="bg-red-500 hover:bg-red-600 text-white px-3 py-2 rounded-lg shadow"
|
||||
>
|
||||
🗑
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="bg-gray-600 hover:bg-gray-700 text-white px-3 py-2 rounded-lg shadow"
|
||||
>
|
||||
👁
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
</div> -->
|
||||
<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">
|
||||
<tr>
|
||||
<th class="py-3 px-4 font-semibold">ลำดับ</th>
|
||||
<th class="py-3 px-4 font-semibold">ชื่องบประมาณ</th>
|
||||
<th class="py-3 px-4 font-semibold text-center">จำนวนเงิน</th>
|
||||
<th class="py-3 px-4 font-semibold text-right pr-11">ดำเนินการ</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr *ngFor="let p of projects; let i = index"
|
||||
class="border-b border-gray-100 hover:bg-blue-50/20 transition">
|
||||
<td class="py-4 px-4 text-gray-700">{{ i + 1 }}</td>
|
||||
<td class="py-4 px-4 font-medium text-gray-700"> {{ p.code }}</td>
|
||||
|
||||
<td class="py-4 px-4 text-center">
|
||||
<input type="number" class="w-40 px-3 py-2 border border-gray-300 rounded-lg text-center hover:shadow-2xl">
|
||||
</td>
|
||||
|
||||
<td class="py-4 px-4 text-right space-x-2 whitespace-nowrap pr-8">
|
||||
|
||||
<button
|
||||
class="bg-red-500 hover:bg-red-600 text-white px-3 py-2 rounded-lg shadow"
|
||||
>
|
||||
🗑
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="bg-gray-600 hover:bg-gray-700 text-white px-3 py-2 rounded-lg shadow"
|
||||
>
|
||||
🖊
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- endtable -->
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Summary -->
|
||||
<div class="text-right mt-4 text-lg font-semibold">
|
||||
ยอดรวมทั้งหมด:
|
||||
<span class="text-blue-600">
|
||||
{{ getTotalAmount() | number:'1.0-2' }} บาท
|
||||
</span>
|
||||
</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>
|
||||
|
||||
@@ -1,10 +1,13 @@
|
||||
import { TransactionStateService } from './../../services/state/transaction-state.service';
|
||||
import { ITrnmst, IDropBdg } from './../../interfaces/main.interface';
|
||||
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';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
import { Location } from '@angular/common';
|
||||
import { ToastrService } from 'ngx-toastr';
|
||||
|
||||
@Component({
|
||||
selector: 'app-budget-aproval',
|
||||
@@ -12,109 +15,239 @@ import { ActivatedRoute } from '@angular/router';
|
||||
templateUrl: './budget-aproval.html',
|
||||
styleUrl: './budget-aproval.css',
|
||||
})
|
||||
export class BudgetAproval {
|
||||
projectCode: any;
|
||||
project: any;
|
||||
addItemForm!: FormGroup;
|
||||
isFormExpanded: boolean = false;
|
||||
export class BudgetAproval implements OnInit {
|
||||
@Output() ExpenseEventSubmit = new EventEmitter<any>();
|
||||
|
||||
budgetItems = [
|
||||
{ code: 'ITEM001', name: 'เอกซ์เรย์', qty: 1, price: 1000 },
|
||||
{ code: 'ITEM002', name: 'กรอกคำสั่งซื้อ', qty: 1, price: 1500 },
|
||||
{ code: 'ITEM003', name: 'ตรวจพื้นฐาน', qty: 1, price: 1000 },
|
||||
];
|
||||
budgetForm!: FormGroup;
|
||||
isFormExpanded = true;
|
||||
isEditMode = false;
|
||||
editingIndex: number = -1;
|
||||
showConfirmModal = false;
|
||||
myTrnMst: ITrnmst[]=[];
|
||||
myDropBdg: IDropBdg[]=[];
|
||||
param:string = '';
|
||||
// State สำหรับการลบ
|
||||
showDeleteModal = false;
|
||||
deleteIndex: number = -1;
|
||||
|
||||
projects = [
|
||||
{ code: 'เงินรายได้', name: 'ระบบจัดการน้ำดื่ม', owner: 'นาย A', budget: 20000, status: 'WAIT', acp: 0, bdgnam: 'ยังไมจัดสรร' },
|
||||
{ code: 'งบดำเนินงาน', name: 'ปรับปรุงอาคาร B', owner: 'นางสาว B', budget: 45000, status: 'WAIT', acp: 0, bdgnam: 'ยังไมจัดสรร'},
|
||||
{ code: 'ค่ากิจกรรมพัฒนาคุณภาพผู้เรียน', name: 'ซื้อคอมพิวเตอร์', owner: 'นาย C', budget: 30000, status: 'APPROVED', acp: 20000, bdgnam: 'งบดำเนินงาน' }
|
||||
];
|
||||
// budgetCategoriesDrop = [
|
||||
// { dtlcod: 'EXP01', dtlnam: 'ค่าวัสดุอุปกรณ์ (EXP01)' },
|
||||
// { dtlcod: 'EXP02', dtlnam: 'ค่าจ้างเหมาแรงงาน (EXP02)' },
|
||||
// { dtlcod: 'EXP03', dtlnam: 'ค่าครุภัณฑ์ (EXP03)' }
|
||||
// ];
|
||||
|
||||
budgetCategoriesDrop = {
|
||||
expense: [
|
||||
{ dtlcod: 'BDG001', dtlnam: 'เงินรายได้' },
|
||||
{ dtlcod: 'BDG002', dtlnam: 'งบดำเนินงาน ปวส.' },
|
||||
{ dtlcod: 'BDG003', dtlnam: 'โครงการส่งเสริมพัฒนาทักษะวิชาชีพทักษะพื้นฐาน' },
|
||||
{ dtlcod: 'BDG004', dtlnam: 'ค่ากิจกรรมพัฒนาคุณภาพผู้เรียน' },
|
||||
{ dtlcod: 'BDG005', dtlnam: 'อุดหนุนส่งเสริมและพัฒนาผู้เรียนองค์การวิชาชีพแห่งประเทศไทย (อวท.)' },
|
||||
{ dtlcod: 'BDG006', dtlnam: 'งบดำเนินงาน ระยะสั้น' },
|
||||
{ dtlcod: 'BDG007', dtlnam: 'โครงการบูรณาการการพัฒนาทักษะทางวิชาชีพกับการเสริมสร้างคุณลักษณะอันพึงประสงค์ (FIX IT)' },
|
||||
{ dtlcod: 'BDG008', dtlnam: 'โครงการพัฒนาทักษะและสมรรถนะวิชาชีพกำลังคน (Up-skill, Re-skill)' },
|
||||
{ dtlcod: 'BDG009', dtlnam: 'งบดำเนินงาน ปวช.' },
|
||||
{ dtlcod: 'BDG010', dtlnam: 'โครงการขยายและยกระดับการจัดอาชีวศึกษาระบบทวิภาคีคุณภาพสูง' },
|
||||
{ dtlcod: 'BDG011', dtlnam: 'ปวช.(สอจ)' },
|
||||
{ dtlcod: 'BDG012', dtlnam: 'ค่าจัดการเรียนการสอน' },
|
||||
{ dtlcod: 'BDG013', dtlnam: 'งบดำเนินงาน 170000' },
|
||||
{ dtlcod: 'BDG014', dtlnam: 'โครงการพัฒนาทักษะและศักยภาพภาพการจัดการเรียนการสอนอาชีวศึกษา' },
|
||||
{ dtlcod: 'BDG015', dtlnam: 'ศึกษาธิการ' },
|
||||
{ dtlcod: 'BDG016', dtlnam: 'Up-skill' },
|
||||
{ dtlcod: 'BDG017', dtlnam: 'ติดตามผู้สำเร็จ' },
|
||||
{ dtlcod: 'BDG018', dtlnam: 'ทวิภาคี' },
|
||||
{ dtlcod: 'BDG019', dtlnam: 'พันธุกรรม' },
|
||||
{ dtlcod: 'BDG020', dtlnam: 'ปวส(สาธารณูประโภค)' },
|
||||
{ dtlcod: 'BDG021', dtlnam: 'ปวส(ค่าสาธารณูปโภค)' },
|
||||
{ dtlcod: 'BDG022', dtlnam: 'งบดำเนินงาน (ค่าสาธารณูปโภค)' },
|
||||
{ dtlcod: 'BDG023', dtlnam: 'ค่าหนังสือเรียน' },
|
||||
{ dtlcod: 'BDG024', dtlnam: 'โครงการอาชีวะต้านยาเสพติด' },
|
||||
{ dtlcod: 'BDG025', dtlnam: 'ค่าตอบแทนพนักงานราชการ' },
|
||||
{ dtlcod: 'BDG026', dtlnam: 'ค่าอุปกรณ์การเรียน' },
|
||||
{ dtlcod: 'BDG027', dtlnam: 'โครงการยกระดับและพัฒนาขีดความสามารถด้านภาษาและทักษะดิจิทัลเพื่อพัฒนากำลังคนให้มีสมรรถนะสูง' },
|
||||
{ dtlcod: 'BDG028', dtlnam: 'โครงการอนุรักษ์พันธุกรรมพืชอันเนื่องมาจากพระราชดำริ' },
|
||||
{ dtlcod: 'BDG029', dtlnam: 'ปวช.(สอจ.)' },
|
||||
{ dtlcod: 'BDG030', dtlnam: 'โครงการพัฒนาศักยภาพผู้เรียนอาชีวศึกษาในการเป็นผู้ประกอบการ (บ่มเพาะ)' },
|
||||
{ dtlcod: 'BDG031', dtlnam: 'โครงการพัฒนาและยกระดับการติดตามผู้สำเร็จการศึกษาอาชีวศึกษา' },
|
||||
{ dtlcod: 'BDG032', dtlnam: 'โครงการเสริมสร้างคุณธรรม จริยธรรมและธรรมาภิบาลในสถานศึกษา' },
|
||||
{ dtlcod: 'BDG033', dtlnam: 'โครงการจัดการอาชีวศึกษาเพื่อสนองพระราชดำริ' },
|
||||
{ dtlcod: 'BDG034', dtlnam: 'เงินรายได้ ป.ตรี' },
|
||||
{ dtlcod: 'BDG035', dtlnam: 'งบดำเนินงาน 235200' }
|
||||
]
|
||||
};
|
||||
// budgetItems: IBudgetItem[] = [];
|
||||
|
||||
constructor(
|
||||
private location: Location,
|
||||
private toastr: ToastrService,
|
||||
private route: ActivatedRoute,
|
||||
private transactionStateService: TransactionStateService
|
||||
) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.setupForm();
|
||||
}
|
||||
|
||||
setupForm() {
|
||||
this.addItemForm = new FormGroup({
|
||||
category: new FormControl('', [Validators.required]),
|
||||
name: new FormControl('', [Validators.required]),
|
||||
qty: new FormControl(1, [Validators.required, Validators.min(1)]),
|
||||
price: new FormControl(0, [Validators.required, Validators.min(1)])
|
||||
});
|
||||
}
|
||||
|
||||
toggleFormCollapse(): void {
|
||||
this.isFormExpanded = !this.isFormExpanded;
|
||||
}
|
||||
|
||||
addBudgetItem() {
|
||||
if (this.addItemForm.invalid) {
|
||||
this.addItemForm.markAllAsTouched();
|
||||
return;
|
||||
ngOnInit(): void {
|
||||
this.param = this.route.snapshot.paramMap.get('seq') ?? '';
|
||||
this.setupFormControl();
|
||||
this.transactionStateService.getTransactionState().subscribe(data => {
|
||||
this.myTrnMst = data || []
|
||||
});
|
||||
this.transactionStateService.getBudgetDrop().subscribe(data => {
|
||||
this.myDropBdg = data ?? []
|
||||
});
|
||||
}
|
||||
|
||||
const formValue = this.addItemForm.value;
|
||||
setupFormControl() {
|
||||
this.budgetForm = new FormGroup({
|
||||
bdgcod: new FormControl('', [Validators.required]),
|
||||
amount: new FormControl('', [Validators.required, Validators.min(1)])
|
||||
});
|
||||
}
|
||||
|
||||
this.budgetItems.push({
|
||||
code: 'NEW' + (this.budgetItems.length + 1).toString().padStart(3, '0'),
|
||||
name: formValue.name,
|
||||
qty: formValue.qty,
|
||||
price: formValue.price,
|
||||
// category: formValue.category
|
||||
});
|
||||
|
||||
// reset form
|
||||
this.addItemForm.reset({
|
||||
category: '',
|
||||
name: '',
|
||||
qty: 1,
|
||||
price: 0
|
||||
});
|
||||
}
|
||||
|
||||
getTotalAmount() {
|
||||
return this.budgetItems.reduce((sum, item) => sum + item.qty * item.price, 0);
|
||||
}
|
||||
toggleFormCollapse() {
|
||||
this.isFormExpanded = !this.isFormExpanded;
|
||||
}
|
||||
|
||||
// onSaveSubmit() {
|
||||
// if (this.budgetForm.invalid) {
|
||||
// this.budgetForm.markAllAsTouched();
|
||||
// return;
|
||||
// }
|
||||
|
||||
// const formValue = this.budgetForm.value;
|
||||
// const selectedCode = formValue.bdgcod;
|
||||
|
||||
// // Validation: เช็คว่าหมวดงบซ้ำหรือไม่
|
||||
// const duplicateIndex = this.myTrnMst.findIndex(idx => idx.trnbdgcod === selectedCode);
|
||||
|
||||
// if (duplicateIndex !== -1) {
|
||||
// // กรณีเพิ่มใหม่ (เจอซ้ำ = ห้าม) หรือ กรณีแก้ไข (เจอซ้ำกับแถวอื่นที่ไม่ใช่ตัวเอง = ห้าม)
|
||||
// if (!this.isEditMode || (this.isEditMode && duplicateIndex !== this.editingIndex)) {
|
||||
// this.toastr.error(`หมวดงบประมาณนี้ มีอยู่ในตารางแล้ว`, 'ไม่สามารถเพิ่มซ้ำได้', {
|
||||
// positionClass: 'toast-top-right',
|
||||
// timeOut: 3500,
|
||||
// progressBar: true,
|
||||
// progressAnimation: 'decreasing',
|
||||
// toastClass:
|
||||
// 'ngx-toastr error-toast bg-white bg-opacity-90 text-red-700 shadow-lg'
|
||||
// })
|
||||
// return;
|
||||
// }
|
||||
// }
|
||||
|
||||
// const category = this.myDropBdg.find(c => c.bdgcod === selectedCode);
|
||||
|
||||
// const newItem: ITrnmst = {
|
||||
// trnbdgcod: formValue.bdgcod,
|
||||
// trnbdgnam: category ? category.bdgcod : formValue.bdgcod,
|
||||
// trnexpbdg: Number(formValue.amount)
|
||||
// };
|
||||
|
||||
// if (this.isEditMode && this.editingIndex > -1) {
|
||||
// this.myTrnMst[this.editingIndex] = newItem;
|
||||
// this.cancelEdit();
|
||||
// } else {
|
||||
// this.myTrnMst.push(newItem);
|
||||
// this.budgetForm.reset();
|
||||
// this.budgetForm.get('bdgcod')?.setValue('');
|
||||
// }
|
||||
// }
|
||||
|
||||
onSaveSubmit() {
|
||||
if (this.budgetForm.invalid) {
|
||||
this.budgetForm.markAllAsTouched();
|
||||
return;
|
||||
}
|
||||
|
||||
const formValue = this.budgetForm.value;
|
||||
const selectedCode = formValue.bdgcod;
|
||||
|
||||
// 1. Validation: เช็คว่าหมวดงบซ้ำหรือไม่
|
||||
const duplicateIndex = this.myTrnMst.findIndex(idx => idx.trnbdgcod === selectedCode);
|
||||
|
||||
if (duplicateIndex !== -1) {
|
||||
// ถ้าไม่ใช่โหมดแก้ไข หรือ แก้ไขแต่ไปซ้ำกับคนอื่น
|
||||
if (!this.isEditMode || (this.isEditMode && duplicateIndex !== this.editingIndex)) {
|
||||
this.toastr.error(`หมวดงบประมาณนี้ (${selectedCode}) มีอยู่ในตารางแล้ว`, 'ไม่สามารถเพิ่มซ้ำได้', {
|
||||
timeOut: 3500,
|
||||
progressBar: true
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// ✅ 2. ค้นหาชื่อหมวดงบ (Name) จาก Dropdown โดยใช้ Code ที่เลือก
|
||||
const category = this.myDropBdg.find(c => c.bdgcod === selectedCode);
|
||||
|
||||
// ✅ 3. สร้าง Object ใหม่ โดยใส่ชื่อ (trnbdgnam) ที่ค้นหาได้ลงไป
|
||||
const newItem: ITrnmst = {
|
||||
trnbdgcod: selectedCode,
|
||||
// ถ้าเจอชื่อให้ใส่ชื่อ ถ้าไม่เจอให้ใส่รหัสแทน (กันเหนียว)
|
||||
trnbdgnam: category ? category.bdgnam : selectedCode,
|
||||
trnexpbdg: Number(formValue.amount),
|
||||
trnprjnam: this.projectTitle // คงชื่อโครงการเดิมไว้
|
||||
};
|
||||
|
||||
if (this.isEditMode && this.editingIndex > -1) {
|
||||
// กรณีแก้ไข: Merge ข้อมูลใหม่ทับของเดิม (เพื่อรักษา field อื่นๆ เช่น trnseq ไว้ถ้ามี)
|
||||
this.myTrnMst[this.editingIndex] = {
|
||||
...this.myTrnMst[this.editingIndex],
|
||||
...newItem
|
||||
};
|
||||
this.cancelEdit();
|
||||
} else {
|
||||
// กรณีเพิ่มใหม่
|
||||
this.myTrnMst.push(newItem);
|
||||
this.budgetForm.reset();
|
||||
this.budgetForm.get('bdgcod')?.setValue('');
|
||||
}
|
||||
}
|
||||
|
||||
editItem(index: number) {
|
||||
const item = this.myTrnMst[index];
|
||||
this.isEditMode = true;
|
||||
this.editingIndex = index;
|
||||
this.isFormExpanded = true;
|
||||
this.budgetForm.patchValue({
|
||||
bdgcod: item.trnbdgcod,
|
||||
amount: item.trnexpbdg
|
||||
});
|
||||
}
|
||||
|
||||
cancelEdit() {
|
||||
this.isEditMode = false;
|
||||
this.editingIndex = -1;
|
||||
this.budgetForm.reset();
|
||||
this.budgetForm.get('bdgcod')?.setValue('');
|
||||
}
|
||||
|
||||
removeItem(index: number) {
|
||||
// // if(confirm('ต้องการลบรายการนี้หรือไม่?')) {
|
||||
// this.myTrnMst.splice(index, 1);
|
||||
// if (this.isEditMode && this.editingIndex === index) {
|
||||
// this.cancelEdit();
|
||||
// }
|
||||
// // }
|
||||
|
||||
this.deleteIndex = index;
|
||||
this.showDeleteModal = true;
|
||||
}
|
||||
|
||||
confirmDelete() {
|
||||
if (this.deleteIndex > -1) {
|
||||
this.myTrnMst.splice(this.deleteIndex, 1);
|
||||
|
||||
// ถ้าลบตัวที่กำลังแก้อยู่ ให้เคลียร์ฟอร์ม
|
||||
if (this.isEditMode && this.editingIndex === this.deleteIndex) {
|
||||
this.cancelEdit();
|
||||
}
|
||||
|
||||
this.toastr.success('ลบรายการเรียบร้อย', 'สำเร็จ');
|
||||
}
|
||||
this.closeDeleteModal();
|
||||
}
|
||||
|
||||
closeDeleteModal() {
|
||||
this.showDeleteModal = false;
|
||||
this.deleteIndex = -1;
|
||||
}
|
||||
|
||||
getTotalAmount() {
|
||||
return this.myTrnMst.reduce((sum, item) => sum + Number(item.trnexpbdg || 0), 0);
|
||||
}
|
||||
|
||||
|
||||
openConfirmModal() {
|
||||
this.showConfirmModal = true;
|
||||
}
|
||||
|
||||
closeConfirmModal() {
|
||||
this.showConfirmModal = false;
|
||||
}
|
||||
|
||||
confirmSave() {
|
||||
const expenseList = this.myTrnMst.map(item => ({
|
||||
bdgcod: item.trnbdgcod,
|
||||
amount: Number(item.trnexpbdg)
|
||||
}));
|
||||
|
||||
|
||||
const body = {
|
||||
prjseq: this.param,
|
||||
expenseList: expenseList
|
||||
};
|
||||
|
||||
this.expenseEventSubmit(body);
|
||||
}
|
||||
|
||||
expenseEventSubmit(event: any){
|
||||
this.ExpenseEventSubmit.emit(event);
|
||||
}
|
||||
|
||||
goBack() {
|
||||
this.location.back();
|
||||
}
|
||||
|
||||
get projectTitle(): string {
|
||||
return this.myTrnMst?.[0]?.trnprjnam ?? '';
|
||||
}
|
||||
}
|
||||
|
||||
@@ -22,39 +22,39 @@
|
||||
|
||||
<main class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6">
|
||||
<div class="md:col-span-2 ">
|
||||
<div class="bg-white p-6 rounded-xl shadow-lg h-88">
|
||||
<div class="bg-white p-6 rounded-xl shadow-lg">
|
||||
<h2 class="text-lg font-medium text-gray-700 mb-4">เมนู</h2>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<button class="flex items-center space-x-3 p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition duration-150 cursor-pointer">
|
||||
<!-- <button class="flex items-center space-x-3 p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition duration-150 cursor-pointer">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m4 2h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" />
|
||||
</svg>
|
||||
<span class="text-gray-700">การเบิกงวดงบ</span>
|
||||
</button>
|
||||
</button> -->
|
||||
|
||||
<button class="flex items-center space-x-3 p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition duration-150 cursor-pointer">
|
||||
<!-- <button class="flex items-center space-x-3 p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition duration-150 cursor-pointer">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
|
||||
</svg>
|
||||
<span class="text-gray-700">สัญญา / ข้อตกลง</span>
|
||||
</button>
|
||||
</button> -->
|
||||
|
||||
<button class="flex items-center space-x-3 p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition duration-150 cursor-pointer">
|
||||
<!-- <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<!-- <button class="flex items-center space-x-3 p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition duration-150 cursor-pointer">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500" 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 0M3 12a9 9 0 1118 0" />
|
||||
</svg> -->
|
||||
</svg>
|
||||
<img src="stamp_0.png" alt="" class="h-6 w-6 text-gray-500 opacity-50">
|
||||
<span class="text-gray-700">การอนุมัติโครงการ</span>
|
||||
</button>
|
||||
</button> -->
|
||||
|
||||
<button class="flex items-center space-x-3 p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition duration-150 cursor-pointer">
|
||||
<!-- <button class="flex items-center space-x-3 p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition duration-150 cursor-pointer">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
<span class="text-gray-700">เอกสารฟอร์มวิทยาลัย</span>
|
||||
</button>
|
||||
</button> -->
|
||||
|
||||
<button class="flex items-center space-x-3 p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition duration-150 cursor-pointer">
|
||||
<button class="flex items-center space-x-3 p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition duration-150 cursor-pointer" (click)="navigate('main/manager')">
|
||||
<!-- <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.992 9.992 0 0112 21c-3.142 0-6.186-1.042-8.625-2.999M21 12a9.992 9.992 0 00-3-6.945M3 12a9.992 9.992 0 013-6.945M12 15a3 3 0 100-6 3 3 0 000 6z" />
|
||||
</svg> -->
|
||||
|
||||
@@ -1,131 +1,126 @@
|
||||
<div class="w-full p-6">
|
||||
|
||||
<!-- Summary Cards -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-6 mb-8">
|
||||
<!--
|
||||
<div class="bg-white border border-gray-200 rounded-2xl p-5 shadow-sm hover:shadow-md transition">
|
||||
<div class="text-gray-500 text-sm">งบทั้งหมด</div>
|
||||
<div class="text-3xl font-bold text-gray-800 mt-1">
|
||||
{{ totalBudget | number:'1.0-2' }} บาท
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full p-6">
|
||||
|
||||
<div class="bg-white border border-gray-200 rounded-2xl p-5 shadow-sm hover:shadow-md transition">
|
||||
<div class="text-gray-500 text-sm">งบที่อนุมัติแล้ว</div>
|
||||
<div class="text-3xl font-bold text-green-600 mt-1">
|
||||
{{ approvedBudget | number:'1.0-2' }} บาท
|
||||
</div>
|
||||
</div>
|
||||
<!-- Summary Cards -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-6 mb-8">
|
||||
<!--
|
||||
<div class="bg-white border border-gray-200 rounded-2xl p-5 shadow-sm hover:shadow-md transition">
|
||||
<div class="text-gray-500 text-sm">งบทั้งหมด</div>
|
||||
<div class="text-3xl font-bold text-gray-800 mt-1">
|
||||
{{ totalBudget | number:'1.0-2' }} บาท
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white border border-gray-200 rounded-2xl p-5 shadow-sm hover:shadow-md transition">
|
||||
<div class="text-gray-500 text-sm">งบคงเหลือ</div>
|
||||
<div
|
||||
class="text-3xl font-bold mt-1"
|
||||
[ngClass]="remainingBudget >= 0 ? 'text-blue-600' : 'text-red-600'"
|
||||
>
|
||||
{{ remainingBudget | number:'1.0-2' }} บาท
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="bg-white border border-gray-200 rounded-2xl p-5 shadow-sm hover:shadow-md transition">
|
||||
<div class="text-gray-500 text-sm">งบที่อนุมัติแล้ว</div>
|
||||
<div class="text-3xl font-bold text-green-600 mt-1">
|
||||
{{ approvedBudget | number:'1.0-2' }} บาท
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Add Button -->
|
||||
<div class="mb-4">
|
||||
<button
|
||||
class=" rounded-3xl bg-green-600 hover:bg-green-700 text-white px-5 py-2.5 text-sm font-medium shadow-sm flex items-center gap-2 transition"
|
||||
>
|
||||
➕ เพิ่มโครงการใหม่
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- 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-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>
|
||||
<th class="py-3 px-4 font-semibold">ชื่อโครงการ</th>
|
||||
<th class="py-3 px-4 font-semibold">ผู้รับผิดชอบ</th>
|
||||
<th class="py-3 px-4 font-semibold">งบที่ขออนุมัติ</th>
|
||||
<th class="py-3 px-4 font-semibold">หมวดงบ</th>
|
||||
<th class="py-3 px-4 font-semibold">จำนวนที่อนุมัติ</th>
|
||||
<th class="py-3 px-4 font-semibold text-center">สถานะ</th>
|
||||
<th class="py-3 px-4 font-semibold text-center">ดำเนินการ</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr *ngFor="let p of projects; let i = index"class="border-b border-gray-100 hover:bg-blue-50/20 transition">
|
||||
<td class="py-4 px-4 text-gray-700">{{ i + 1 }}</td>
|
||||
<td class="py-4 px-4 font-medium text-gray-700"> {{ p.code }}</td>
|
||||
<td class="py-4 px-4 text-gray-800 font-semibold leading-tight">{{ p.name }}</td>
|
||||
<td class="py-4 px-4 text-gray-700">{{ p.owner }}</td>
|
||||
<td class="py-4 px-4 text-blue-700 font-bold whitespace-nowrap"> {{ p.budget | number:'1.0-0' }} บาท</td>
|
||||
|
||||
<td class="py-4 px-4 w-64">
|
||||
<!-- <select class="w-full px-4 py-2.5 border border-gray-300 rounded-xl bg-white
|
||||
focus:outline-none focus:ring-2 focus:ring-blue-200 focus:border-blue-300
|
||||
text-sm transition">
|
||||
<option value="">ไม่เลือก</option>
|
||||
@for (item of budgetCategoriesDrop.expense; track item.dtlcod) {
|
||||
<option [value]="item.dtlcod">
|
||||
{{ item.dtlnam }}
|
||||
</option>
|
||||
}
|
||||
</select> -->
|
||||
{{ p.bdgnam }}
|
||||
</td>
|
||||
|
||||
<td class="py-4 px-4 w-40">
|
||||
<!-- <input type="number" class="w-full px-4 py-2.5 border border-gray-300 rounded-xl bg-white focus:outline-none focus:ring-2 focus:ring-blue-200 focus:border-blue-300 text-sm transition"/> -->
|
||||
{{ p.acp }} บาท
|
||||
</td>
|
||||
|
||||
<td class="py-4 px-4 text-center">
|
||||
<span
|
||||
class="px-3 py-1.5 rounded-full text-xs font-semibold inline-flex items-center gap-1
|
||||
shadow-sm border"
|
||||
[ngClass]="{
|
||||
'bg-yellow-50 text-yellow-700 border-yellow-200': p.status === 'WAIT',
|
||||
'bg-green-50 text-green-700 border-green-200': p.status === 'APPROVED',
|
||||
'bg-red-50 text-red-700 border-red-200': p.status === 'REJECTED'
|
||||
}"
|
||||
<div class="bg-white border border-gray-200 rounded-2xl p-5 shadow-sm hover:shadow-md transition">
|
||||
<div class="text-gray-500 text-sm">งบคงเหลือ</div>
|
||||
<div
|
||||
class="text-3xl font-bold mt-1"
|
||||
[ngClass]="remainingBudget >= 0 ? 'text-blue-600' : 'text-red-600'"
|
||||
>
|
||||
<ng-container *ngIf="p.status === 'APPROVED'">อนุมัติแล้ว</ng-container>
|
||||
<ng-container *ngIf="p.status === 'WAIT'">รออนุมัติ</ng-container>
|
||||
<ng-container *ngIf="p.status === 'REJECTED'">ไม่อนุมัติ</ng-container>
|
||||
</span>
|
||||
</td>
|
||||
{{ remainingBudget | number:'1.0-2' }} บาท
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<td class="py-4 px-4 text-center space-x-2 whitespace-nowrap">
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-xl text-sm
|
||||
shadow-sm font-medium transition"
|
||||
(click)="openBudgetDetail(p)">
|
||||
จัดสรรงบประมาณ
|
||||
</button>
|
||||
<!-- Add Button -->
|
||||
<!-- <div class="mb-4">
|
||||
<button
|
||||
class=" rounded-3xl bg-green-600 hover:bg-green-700 text-white px-5 py-2.5 text-sm font-medium shadow-sm flex items-center gap-2 transition"
|
||||
>
|
||||
➕ เพิ่มโครงการใหม่
|
||||
</button>
|
||||
</div>
|
||||
-->
|
||||
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- endtable -->
|
||||
</div>
|
||||
<!-- 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-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>
|
||||
<th class="py-3 px-4 font-semibold">ชื่อโครงการ</th>
|
||||
<th class="py-3 px-4 font-semibold">ผู้รับผิดชอบ</th>
|
||||
<th class="py-3 px-4 font-semibold">งบที่ขออนุมัติ</th>
|
||||
<th class="py-3 px-4 font-semibold">หมวดงบ</th>
|
||||
<th class="py-3 px-4 font-semibold">จำนวนที่อนุมัติ</th>
|
||||
<th class="py-3 px-4 font-semibold text-center">สถานะ</th>
|
||||
<th class="py-3 px-4 font-semibold text-center">ดำเนินการ</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
@for(idx of myPrjMst; track idx.prjseq; let i = $index){
|
||||
<tr class="border-b border-gray-100 hover:bg-blue-50/20 transition">
|
||||
<td class="py-4 px-4 text-gray-700">{{ i + 1 }}</td>
|
||||
<td class="py-4 px-4 font-medium text-gray-700"> {{ idx.prjseq }}</td>
|
||||
<td class="py-4 px-4 text-gray-800 font-semibold leading-tight">{{ idx.prjnam }}</td>
|
||||
<td class="py-4 px-4 text-gray-700">{{ idx.prjusrnam }}</td>
|
||||
<td class="py-4 px-4 text-blue-700 font-bold whitespace-nowrap"> {{ idx.prjwntbdg | number:'1.0-0' }} บาท</td>
|
||||
|
||||
@if(idx.prjbdgnam){
|
||||
<td class="py-4 px-4 text-gray-800 font-semibold leading-tight">{{ idx.prjbdgnam }}</td>
|
||||
}@else {
|
||||
<td class="py-4 px-4 text-gray-400 font-semibold leading-tight italic">ไม่จัดสรร</td>
|
||||
}
|
||||
|
||||
<td class="py-4 px-4 w-40">
|
||||
<!-- <input type="number" class="w-full px-4 py-2.5 border border-gray-300 rounded-xl bg-white focus:outline-none focus:ring-2 focus:ring-blue-200 focus:border-blue-300 text-sm transition"/> -->
|
||||
{{ idx.prjacpbdg }} บาท
|
||||
</td>
|
||||
|
||||
<td class="py-4 px-4 text-center">
|
||||
<span
|
||||
class="px-3 py-1.5 rounded-full text-xs font-semibold inline-flex items-center gap-1
|
||||
shadow-sm border"
|
||||
[ngClass]="{
|
||||
'bg-yellow-50 text-yellow-700 border-yellow-200': idx.prjcomstt === 'UAC',
|
||||
'bg-green-50 text-green-700 border-green-200': idx.prjcomstt === 'BAP',
|
||||
'bg-red-50 text-red-700 border-red-200': idx.prjcomstt === 'CN'
|
||||
}"
|
||||
>
|
||||
<ng-container *ngIf="idx.prjcomstt === 'BAP'">อนุมัติแล้ว</ng-container>
|
||||
<ng-container *ngIf="idx.prjcomstt === 'UAC'">รออนุมัติ</ng-container>
|
||||
<ng-container *ngIf="idx.prjcomstt === 'CN'">ไม่อนุมัติ</ng-container>
|
||||
</span>
|
||||
</td>
|
||||
|
||||
<td class="py-4 px-4 text-center space-x-2 whitespace-nowrap">
|
||||
|
||||
<button
|
||||
class="bg-red-900 hover:bg-red-950 text-white px-4 py-2 rounded-xl text-sm
|
||||
shadow-sm font-medium transition"
|
||||
(click)="openBudgetDetail(idx)">
|
||||
จัดสรรงบประมาณ
|
||||
</button>
|
||||
|
||||
|
||||
<!-- Pagination
|
||||
<div class="flex justify-end items-center gap-3 mt-5">
|
||||
<button class="px-4 py-2 border border-gray-300 rounded-xl bg-white hover:bg-gray-100">
|
||||
1
|
||||
</button>
|
||||
<button class="px-4 py-2 border border-gray-300 rounded-xl bg-white hover:bg-gray-100">
|
||||
2
|
||||
</button>
|
||||
</div> -->
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- endtable -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Pagination
|
||||
<div class="flex justify-end items-center gap-3 mt-5">
|
||||
<button class="px-4 py-2 border border-gray-300 rounded-xl bg-white hover:bg-gray-100">
|
||||
1
|
||||
</button>
|
||||
<button class="px-4 py-2 border border-gray-300 rounded-xl bg-white hover:bg-gray-100">
|
||||
2
|
||||
</button>
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
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 { IPrjMst } from '../../interfaces/main.interface'
|
||||
import { ProjectStateService } from '../../services/state/project-state.service';
|
||||
import { Router } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
@@ -15,6 +15,8 @@ export class MainManagerComponent implements OnInit {
|
||||
|
||||
mode: string = 'i';
|
||||
|
||||
myPrjMst:IPrjMst[] = [];
|
||||
|
||||
totalBudget = 200000; // งบทั้งหมด
|
||||
approvedBudget = 65000; // งบที่อนุมัติแล้ว
|
||||
|
||||
@@ -24,98 +26,22 @@ export class MainManagerComponent implements OnInit {
|
||||
return this.totalBudget - this.approvedBudget;
|
||||
}
|
||||
|
||||
|
||||
|
||||
projects = [
|
||||
{ code: 'PRJ001', name: 'ระบบจัดการน้ำดื่ม', owner: 'นาย A', budget: 20000, status: 'WAIT', acp: 0, bdgnam: 'ยังไมจัดสรร' },
|
||||
{ code: 'PRJ002', name: 'ปรับปรุงอาคาร B', owner: 'นางสาว B', budget: 45000, status: 'WAIT', acp: 0, bdgnam: 'ยังไมจัดสรร'},
|
||||
{ code: 'PRJ003', name: 'ซื้อคอมพิวเตอร์', owner: 'นาย C', budget: 30000, status: 'APPROVED', acp: 20000, bdgnam: 'งบดำเนินงาน' }
|
||||
];
|
||||
|
||||
approveProject(p: any) {
|
||||
p.status = 'APPROVED';
|
||||
p.status = 'BAP';
|
||||
this.approvedBudget += p.budget;
|
||||
}
|
||||
|
||||
rejectProject(p: any) {
|
||||
p.status = 'REJECTED';
|
||||
p.status = 'CN';
|
||||
}
|
||||
|
||||
openBudgetDetail(project: any) {
|
||||
this.router.navigate(['/main/manager/budget', project.code]);
|
||||
openBudgetDetail(idx: IPrjMst) {
|
||||
this.router.navigate(['/main/budget/approve', idx.prjseq]);
|
||||
}
|
||||
|
||||
|
||||
|
||||
budgetCategoriesDrop = {
|
||||
expense: [
|
||||
{ dtlcod: 'BDG001', dtlnam: 'เงินรายได้' },
|
||||
{ dtlcod: 'BDG002', dtlnam: 'งบดำเนินงาน ปวส.' },
|
||||
{ dtlcod: 'BDG003', dtlnam: 'โครงการส่งเสริมพัฒนาทักษะวิชาชีพทักษะพื้นฐาน' },
|
||||
{ dtlcod: 'BDG004', dtlnam: 'ค่ากิจกรรมพัฒนาคุณภาพผู้เรียน' },
|
||||
{ dtlcod: 'BDG005', dtlnam: 'อุดหนุนส่งเสริมและพัฒนาผู้เรียนองค์การวิชาชีพแห่งประเทศไทย (อวท.)' },
|
||||
{ dtlcod: 'BDG006', dtlnam: 'งบดำเนินงาน ระยะสั้น' },
|
||||
{ dtlcod: 'BDG007', dtlnam: 'โครงการบูรณาการการพัฒนาทักษะทางวิชาชีพกับการเสริมสร้างคุณลักษณะอันพึงประสงค์ (FIX IT)' },
|
||||
{ dtlcod: 'BDG008', dtlnam: 'โครงการพัฒนาทักษะและสมรรถนะวิชาชีพกำลังคน (Up-skill, Re-skill)' },
|
||||
{ dtlcod: 'BDG009', dtlnam: 'งบดำเนินงาน ปวช.' },
|
||||
{ dtlcod: 'BDG010', dtlnam: 'โครงการขยายและยกระดับการจัดอาชีวศึกษาระบบทวิภาคีคุณภาพสูง' },
|
||||
{ dtlcod: 'BDG011', dtlnam: 'ปวช.(สอจ)' },
|
||||
{ dtlcod: 'BDG012', dtlnam: 'ค่าจัดการเรียนการสอน' },
|
||||
{ dtlcod: 'BDG013', dtlnam: 'งบดำเนินงาน 170000' },
|
||||
{ dtlcod: 'BDG014', dtlnam: 'โครงการพัฒนาทักษะและศักยภาพภาพการจัดการเรียนการสอนอาชีวศึกษา' },
|
||||
{ dtlcod: 'BDG015', dtlnam: 'ศึกษาธิการ' },
|
||||
{ dtlcod: 'BDG016', dtlnam: 'Up-skill' },
|
||||
{ dtlcod: 'BDG017', dtlnam: 'ติดตามผู้สำเร็จ' },
|
||||
{ dtlcod: 'BDG018', dtlnam: 'ทวิภาคี' },
|
||||
{ dtlcod: 'BDG019', dtlnam: 'พันธุกรรม' },
|
||||
{ dtlcod: 'BDG020', dtlnam: 'ปวส(สาธารณูประโภค)' },
|
||||
{ dtlcod: 'BDG021', dtlnam: 'ปวส(ค่าสาธารณูปโภค)' },
|
||||
{ dtlcod: 'BDG022', dtlnam: 'งบดำเนินงาน (ค่าสาธารณูปโภค)' },
|
||||
{ dtlcod: 'BDG023', dtlnam: 'ค่าหนังสือเรียน' },
|
||||
{ dtlcod: 'BDG024', dtlnam: 'โครงการอาชีวะต้านยาเสพติด' },
|
||||
{ dtlcod: 'BDG025', dtlnam: 'ค่าตอบแทนพนักงานราชการ' },
|
||||
{ dtlcod: 'BDG026', dtlnam: 'ค่าอุปกรณ์การเรียน' },
|
||||
{ dtlcod: 'BDG027', dtlnam: 'โครงการยกระดับและพัฒนาขีดความสามารถด้านภาษาและทักษะดิจิทัลเพื่อพัฒนากำลังคนให้มีสมรรถนะสูง' },
|
||||
{ dtlcod: 'BDG028', dtlnam: 'โครงการอนุรักษ์พันธุกรรมพืชอันเนื่องมาจากพระราชดำริ' },
|
||||
{ dtlcod: 'BDG029', dtlnam: 'ปวช.(สอจ.)' },
|
||||
{ dtlcod: 'BDG030', dtlnam: 'โครงการพัฒนาศักยภาพผู้เรียนอาชีวศึกษาในการเป็นผู้ประกอบการ (บ่มเพาะ)' },
|
||||
{ dtlcod: 'BDG031', dtlnam: 'โครงการพัฒนาและยกระดับการติดตามผู้สำเร็จการศึกษาอาชีวศึกษา' },
|
||||
{ dtlcod: 'BDG032', dtlnam: 'โครงการเสริมสร้างคุณธรรม จริยธรรมและธรรมาภิบาลในสถานศึกษา' },
|
||||
{ dtlcod: 'BDG033', dtlnam: 'โครงการจัดการอาชีวศึกษาเพื่อสนองพระราชดำริ' },
|
||||
{ dtlcod: 'BDG034', dtlnam: 'เงินรายได้ ป.ตรี' },
|
||||
{ dtlcod: 'BDG035', dtlnam: 'งบดำเนินงาน 235200' }
|
||||
]
|
||||
};
|
||||
|
||||
// isModalOpen: boolean = false;
|
||||
// isSubmitting: boolean = false;
|
||||
// arrearsForm!: FormGroup;
|
||||
// saveFrm!: FormGroup;
|
||||
// myActData: IActData[] = [];
|
||||
// // myDropAct: IStateDrop[] = [];
|
||||
// myDropAct: IStateDrop = { income: [], expense: [] };
|
||||
// myActSumData: IActSumData = {
|
||||
// summary: {
|
||||
// totalIncome: '',
|
||||
// totalExpense: '',
|
||||
// netProfit: '',
|
||||
// profitRate: '',
|
||||
// adjustedProfitRate: '',
|
||||
// period: ''
|
||||
// },
|
||||
// pie: {
|
||||
// income: [],
|
||||
// expense: []
|
||||
// }
|
||||
// };
|
||||
// ActSumDataGradient: any
|
||||
|
||||
|
||||
// readonly ownerName = 'Nuttakit';
|
||||
|
||||
constructor(
|
||||
private router: Router,
|
||||
private dashboardStateService: DashboardStateService
|
||||
private projectStateService: ProjectStateService
|
||||
) {}
|
||||
|
||||
|
||||
@@ -123,40 +49,14 @@ export class MainManagerComponent implements OnInit {
|
||||
|
||||
ngOnInit(): void {
|
||||
this.setupFormControl();
|
||||
// this.dashboardStateService.getStateResult().subscribe(data => {
|
||||
// if (data) {
|
||||
// this.myDropAct = data;
|
||||
// }
|
||||
// });
|
||||
// // ผลลับท์ ของ รายการ
|
||||
// this.dashboardStateService.getStateAccountResult().subscribe(data => {
|
||||
// if (data) {
|
||||
// this.myActData = data;
|
||||
// }
|
||||
// });
|
||||
// // ผลลัพการ คำนวณ ของ ปัญชี ต่างๆ
|
||||
// this.dashboardStateService.getStateSumResult().subscribe(data => {
|
||||
// if (data) {
|
||||
// this.myActSumData = data;
|
||||
// this.ActSumDataGradient = this.buildExpenseGradient()
|
||||
// }
|
||||
// });
|
||||
this.projectStateService.getStateResult().subscribe(data => {
|
||||
if(data){
|
||||
this.myPrjMst = data
|
||||
}
|
||||
});
|
||||
}
|
||||
setupFormControl(){
|
||||
// this.arrearsForm = new FormGroup({
|
||||
// // email: new FormControl('',[Validators.required, Validators.email, Validators.maxLength(100)]),
|
||||
// amount: new FormControl('',[Validators.required, Validators.maxLength(20)]),
|
||||
// expdtm: new FormControl('',[Validators.required, Validators.maxLength(12)]),
|
||||
// note: new FormControl('',[Validators.maxLength(200)]),
|
||||
// reason: new FormControl('',[Validators.required, Validators.maxLength(200)])
|
||||
// });
|
||||
|
||||
// this.saveFrm = new FormGroup({
|
||||
// actacpdtm: new FormControl('',[Validators.required, Validators.maxLength(12)]),
|
||||
// actqty: new FormControl('',[Validators.required]),
|
||||
// actcat: new FormControl('',[Validators.required, Validators.maxLength(1)]),
|
||||
// actcmt: new FormControl('',[Validators.maxLength(200)])
|
||||
// });
|
||||
}
|
||||
|
||||
onSaveSubmit(){
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
<app-budget-aproval (ExpenseEventSubmit)="OnBudgetExp($event)"></app-budget-aproval>
|
||||
@@ -0,0 +1,92 @@
|
||||
import { IDropBdg, ITrnmst } from './../../interfaces/main.interface';
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { GeneralService } from '../../services/generalservice';
|
||||
import { TransactionStateService } from '../../services/state/transaction-state.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-budget-aproval-content',
|
||||
standalone: false,
|
||||
templateUrl: './budget-aproval-content.html',
|
||||
styleUrl: './budget-aproval-content.css',
|
||||
})
|
||||
export class BudgetAprovalContent implements OnInit {
|
||||
|
||||
myTrnmst: ITrnmst[]=[];
|
||||
myDropBdg: IDropBdg[]=[];
|
||||
constructor(
|
||||
private router: Router,
|
||||
private route: ActivatedRoute,
|
||||
private generalService: GeneralService,
|
||||
private transactionStateService: TransactionStateService
|
||||
){}
|
||||
|
||||
ngOnInit(): void {
|
||||
let param = this.route.snapshot.paramMap.get('seq');
|
||||
this.OnSearchTrn(param);
|
||||
this.OnBudgetSearch();
|
||||
}
|
||||
|
||||
OnSearchTrn(value: any): void {
|
||||
const uri = '/api/ttc/transactionsearch';
|
||||
let request = {
|
||||
trnprjseq: value
|
||||
}
|
||||
this.generalService.postRequest(uri, request).subscribe({
|
||||
next: (result: any) => {
|
||||
if (result.code === '200') {
|
||||
this.generalService.trowApi(result);
|
||||
this.myTrnmst = result.data;
|
||||
this.transactionStateService.setTransactionState(this.myTrnmst);
|
||||
}else{
|
||||
this.generalService.trowApi(result);
|
||||
}
|
||||
},
|
||||
error: (error: any) => {
|
||||
this.generalService.trowApi(error);
|
||||
},
|
||||
complete: () => {}
|
||||
});
|
||||
}
|
||||
|
||||
OnBudgetExp(value: any): void {
|
||||
const uri = '/api/ttc/budgetexpense';
|
||||
let request = value;
|
||||
this.generalService.postRequest(uri, request).subscribe({
|
||||
next: (result: any) => {
|
||||
if (result.code === '200') {
|
||||
this.generalService.trowApi(result);
|
||||
}else{
|
||||
this.generalService.trowApi(result);
|
||||
}
|
||||
},
|
||||
error: (error: any) => {
|
||||
this.generalService.trowApi(error);
|
||||
},
|
||||
complete: () => {
|
||||
this.router.navigate(['/main/manager'])
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
OnBudgetSearch(): void {
|
||||
const uri = '/api/ttc/budgetsearch';
|
||||
let request = {}
|
||||
this.generalService.postRequest(uri, request).subscribe({
|
||||
next: (result: any) => {
|
||||
if (result.code === '200') {
|
||||
// this.generalService.trowApi(result);
|
||||
this.myDropBdg = result.data;
|
||||
this.transactionStateService.setBudgetDrop(this.myDropBdg);
|
||||
}else{
|
||||
// this.generalService.trowApi(result);
|
||||
}
|
||||
},
|
||||
error: (error: any) => {
|
||||
// this.generalService.trowApi(error);
|
||||
},
|
||||
complete: () => {}
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -3,7 +3,8 @@ import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { ChartConfiguration, ChartOptions } from 'chart.js';
|
||||
import { BaseChartDirective } from 'ng2-charts';
|
||||
import { GeneralService } from '../../services/generalservice';
|
||||
import { IDropAct, IStateDrop, IActData, IActSumData } from '../../interfaces/dashboard.interface';
|
||||
import { IPrjMst } from '../../interfaces/main.interface';
|
||||
import { ProjectStateService } from '../../services/state/project-state.service';
|
||||
|
||||
|
||||
@Component({
|
||||
@@ -14,46 +15,41 @@ import { IDropAct, IStateDrop, IActData, IActSumData } from '../../interfaces/da
|
||||
})
|
||||
export class MainManagerContentComponent implements OnInit {
|
||||
// @ViewChild(BaseChartDirective) chart?: BaseChartDirective;
|
||||
myDropAct!: IStateDrop;
|
||||
myActData: IActData[] = [];
|
||||
myActSumData: IActSumData = {
|
||||
summary: {
|
||||
totalIncome: '',
|
||||
totalExpense: '',
|
||||
netProfit: '',
|
||||
profitRate: '',
|
||||
adjustedProfitRate: '',
|
||||
period: ''
|
||||
},
|
||||
pie: {
|
||||
income: [],
|
||||
expense: []
|
||||
}
|
||||
};
|
||||
myPrjMst: IPrjMst[]=[];
|
||||
// myActData: IActData[] = [];
|
||||
// myActSumData: IActSumData = {
|
||||
// summary: {
|
||||
// totalIncome: '',
|
||||
// totalExpense: '',
|
||||
// netProfit: '',
|
||||
// profitRate: '',
|
||||
// adjustedProfitRate: '',
|
||||
// period: ''
|
||||
// },
|
||||
// pie: {
|
||||
// income: [],
|
||||
// expense: []
|
||||
// }
|
||||
// };
|
||||
|
||||
constructor(
|
||||
private generalService: GeneralService,
|
||||
private dashboardStateService: DashboardStateService
|
||||
private projectStateService: ProjectStateService
|
||||
) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
let token = localStorage.getItem('access_token')
|
||||
// this.OnSearchAct(token, true);
|
||||
// this.OnSetupDashboard(token, true);
|
||||
// this.OnSearchSum(token, true);
|
||||
this.OnSearchPrj({}, true);
|
||||
}
|
||||
|
||||
OnSearchAct(value: any, setupFirst: boolean): void {
|
||||
const uri = '/api/web/accountingSearch';
|
||||
let request = {
|
||||
token: value
|
||||
}
|
||||
OnSearchPrj(value: any, setupFirst: boolean): void {
|
||||
const uri = '/api/ttc/projectsearch';
|
||||
let request = {}
|
||||
this.generalService.postRequest(uri, request).subscribe({
|
||||
next: (result: any) => {
|
||||
if (result.code === '200') {
|
||||
this.generalService.trowApi(result);
|
||||
this.myActData = result.data;
|
||||
this.dashboardStateService.setStateAccountResult(this.myActData);
|
||||
this.myPrjMst = result.data;
|
||||
this.projectStateService.setProjectState(this.myPrjMst);
|
||||
}else{
|
||||
this.generalService.trowApi(result);
|
||||
}
|
||||
@@ -69,94 +65,51 @@ export class MainManagerContentComponent implements OnInit {
|
||||
|
||||
|
||||
|
||||
OnSetupDashboard(value: any, setupFirst: boolean): void {
|
||||
const uri = '/api/web/accountingSetup';
|
||||
let request = {
|
||||
token: value
|
||||
}
|
||||
this.generalService.postRequest(uri, request).subscribe({
|
||||
next: (result: any) => {
|
||||
if (result.code === '200') {
|
||||
this.generalService.trowApi(result);
|
||||
this.myDropAct = result.data
|
||||
this.dashboardStateService.setStateResult(this.myDropAct)
|
||||
}else{
|
||||
this.generalService.trowApi(result);
|
||||
}
|
||||
},
|
||||
error: (error: any) => {
|
||||
this.generalService.trowApi(error);
|
||||
},
|
||||
complete: () => {
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
OnSearchSum(value: any, setupFirst: boolean): void {
|
||||
const uri = '/api/web/accountingSum';
|
||||
let request = {
|
||||
token: value
|
||||
}
|
||||
this.generalService.postRequest(uri, request).subscribe({
|
||||
next: (result: any) => {
|
||||
if (result.code === '200') {
|
||||
this.generalService.trowApi(result);
|
||||
this.myActSumData = result.data
|
||||
this.dashboardStateService.setStateSumResult(this.myActSumData);
|
||||
}else{
|
||||
this.generalService.trowApi(result);
|
||||
}
|
||||
},
|
||||
error: (error: any) => {
|
||||
this.generalService.trowApi(error);
|
||||
},
|
||||
complete: () => {
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// fetchChartData(): void {
|
||||
// // NOTE: Using a placeholder endpoint as the actual one was not provided.
|
||||
// const uri = '/api/dashboard/summary-last-6-months';
|
||||
|
||||
// this.generalService.getRequest(uri).subscribe({
|
||||
// OnSetupDashboard(value: any, setupFirst: boolean): void {
|
||||
// const uri = '/api/web/accountingSetup';
|
||||
// let request = {
|
||||
// token: value
|
||||
// }
|
||||
// this.generalService.postRequest(uri, request).subscribe({
|
||||
// next: (result: any) => {
|
||||
// if (result.code === '200' && result.data) {
|
||||
// this.processChartData(result.data);
|
||||
// } else {
|
||||
// console.warn('Could not fetch chart data:', result.message_th);
|
||||
// // Optionally, display placeholder data or an error message
|
||||
// this.setupPlaceholderData();
|
||||
// if (result.code === '200') {
|
||||
// this.generalService.trowApi(result);
|
||||
// this.myDropAct = result.data
|
||||
// this.dashboardStateService.setStateResult(this.myDropAct)
|
||||
// }else{
|
||||
// this.generalService.trowApi(result);
|
||||
// }
|
||||
// },
|
||||
// error: (error: any) => {
|
||||
// console.error('Error fetching chart data:', error);
|
||||
// // Display placeholder data on error to show the graph structure
|
||||
// this.setupPlaceholderData();
|
||||
// this.generalService.trowApi(error);
|
||||
// },
|
||||
// complete: () => {
|
||||
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
|
||||
// processChartData(data: any[]): void {
|
||||
// const labels = data.map(item => item.month);
|
||||
// const revenues = data.map(item => item.revenue);
|
||||
// OnSearchSum(value: any, setupFirst: boolean): void {
|
||||
// const uri = '/api/web/accountingSum';
|
||||
// let request = {
|
||||
// token: value
|
||||
// }
|
||||
// this.generalService.postRequest(uri, request).subscribe({
|
||||
// next: (result: any) => {
|
||||
// if (result.code === '200') {
|
||||
// this.generalService.trowApi(result);
|
||||
// this.myActSumData = result.data
|
||||
// this.dashboardStateService.setStateSumResult(this.myActSumData);
|
||||
// }else{
|
||||
// this.generalService.trowApi(result);
|
||||
// }
|
||||
// },
|
||||
// error: (error: any) => {
|
||||
// this.generalService.trowApi(error);
|
||||
// },
|
||||
// complete: () => {
|
||||
|
||||
// this.lineChartData.labels = labels;
|
||||
// this.lineChartData.datasets[0].data = revenues;
|
||||
|
||||
// this.chart?.update();
|
||||
// }
|
||||
|
||||
// setupPlaceholderData(): void {
|
||||
// // This function is called if the API fails, to show a sample graph.
|
||||
// const labels = ['January', 'February', 'March', 'April', 'May', 'June'];
|
||||
// const revenues = [1200, 1900, 3000, 5000, 2300, 3200]; // Sample data
|
||||
|
||||
// this.lineChartData.labels = labels;
|
||||
// this.lineChartData.datasets[0].data = revenues;
|
||||
|
||||
// this.chart?.update();
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
}
|
||||
|
||||
@@ -6,6 +6,7 @@ import { MainReportComponent } from '../../component/main-report/main-report.com
|
||||
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 { BudgetAprovalContent } from '../../content/budget-aproval-content/budget-aproval-content';
|
||||
// import { MainReportComponent } from '../../component/main-report/main-report.component';
|
||||
|
||||
|
||||
@@ -17,13 +18,14 @@ const routes: Routes = [
|
||||
{ path: 'manager', component: MainManagerContentComponent },
|
||||
{ path: 'project', component: MainProjectContent },
|
||||
{ path: 'project/:mode', component: MainProjectContent },
|
||||
{
|
||||
path: 'manager',
|
||||
children: [
|
||||
{ path: '', component: MainManagerContentComponent }, // รายการโครงการ
|
||||
{ path: 'budget/:code', component: BudgetAproval }, // จัดการงบประมาณ
|
||||
]
|
||||
},
|
||||
{ path: 'budget/approve/:seq', component: BudgetAprovalContent},
|
||||
// {
|
||||
// path: 'manager',
|
||||
// children: [
|
||||
// { path: '', component: MainManagerContentComponent }, // รายการโครงการ
|
||||
// { path: 'budget/:code', component: BudgetAproval }, // จัดการงบประมาณ
|
||||
// ]
|
||||
// },
|
||||
// children: [
|
||||
// {
|
||||
// path: 'dashboard',
|
||||
|
||||
@@ -5,7 +5,7 @@ import { CommonModule } from '@angular/common';
|
||||
|
||||
import { MainControlRoutingModule } from './main-control-routing.module';
|
||||
|
||||
import { ReactiveFormsModule } from '@angular/forms';
|
||||
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||
|
||||
import { MainDashboardComponent } from '../../component/main-dashboard/main-dashboard.component';
|
||||
import { MainDashboardContentComponent } from '../../content/main-dashboard-content/main-dashboard-content.component';
|
||||
@@ -17,6 +17,7 @@ import { MainLandingComponent } from '../../component/main-landing/main-landing.
|
||||
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 { BudgetAprovalContent } from '../../content/budget-aproval-content/budget-aproval-content';
|
||||
|
||||
// import { MainReportComponent } from '../../component/main-report/main-report.component';
|
||||
|
||||
@@ -34,13 +35,15 @@ import { MainProjectAdd } from '../../component/main-project-add/main-project-ad
|
||||
MainProjectContent,
|
||||
MainProject,
|
||||
MainProjectAdd,
|
||||
BudgetAprovalContent,
|
||||
AccDateFormatPipe
|
||||
// MainReportComponent
|
||||
],
|
||||
imports: [
|
||||
CommonModule,
|
||||
MainControlRoutingModule,
|
||||
ReactiveFormsModule
|
||||
ReactiveFormsModule,
|
||||
FormsModule
|
||||
// BrowserAnimationsModule
|
||||
],
|
||||
exports: [
|
||||
|
||||
@@ -2,6 +2,12 @@ export interface IStateDrop {
|
||||
income: IDropAct[];
|
||||
expense: IDropAct[];
|
||||
}
|
||||
export interface IBudgetItem {
|
||||
id?: number; // เอาไว้เช็คตอน Edit
|
||||
code: string;
|
||||
name: string;
|
||||
amount: number;
|
||||
}
|
||||
|
||||
export interface IDropAct {
|
||||
dtlnam?: string,
|
||||
@@ -22,6 +28,18 @@ export interface IStateResultResponse {
|
||||
data: IStateDrop;
|
||||
}
|
||||
|
||||
export interface IPrjData {
|
||||
prjseq?: number;
|
||||
prjnam?: string;
|
||||
prjusrnam?: string;
|
||||
prjwntbdg?: string;
|
||||
prjbdgnam?: string;
|
||||
prjbdgcod?: string;
|
||||
prjacpbdg?: string;
|
||||
prjcomstt?: string;
|
||||
prjacpdtm?: string;
|
||||
}
|
||||
|
||||
export interface IStateResultResponse {
|
||||
data: IStateDrop;
|
||||
}
|
||||
|
||||
26
ng-ttc-frontend/src/app/interfaces/main.interface.ts
Normal file
26
ng-ttc-frontend/src/app/interfaces/main.interface.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
export interface IPrjMst {
|
||||
prjseq?: number;
|
||||
prjnam?: string;
|
||||
prjusrnam?: string;
|
||||
prjwntbdg?: string;
|
||||
prjbdgnam?: string;
|
||||
prjbdgcod?: string;
|
||||
prjacpbdg?: string;
|
||||
prjcomstt?: string;
|
||||
prjacpdtm?: string;
|
||||
}
|
||||
|
||||
export interface ITrnmst {
|
||||
trnseq?: number;
|
||||
trnprjnam?: string;
|
||||
trnbdgnam?: string;
|
||||
trnbdgcod?: string;
|
||||
trncomstt?: string;
|
||||
trnexpbdg: number;
|
||||
trnacpdtm?: number;
|
||||
}
|
||||
|
||||
export interface IDropBdg {
|
||||
bdgnam?: string;
|
||||
bdgcod?: number;
|
||||
}
|
||||
@@ -1,32 +1,32 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { BehaviorSubject, Observable } from 'rxjs';
|
||||
import { IBudgetExpenseResponse, IBudgetAddResponse } from '../../interfaces/dashboard.interface';
|
||||
// import { Injectable } from '@angular/core';
|
||||
// import { BehaviorSubject, Observable } from 'rxjs';
|
||||
// import { IBudgetExpenseResponse, IBudgetAddResponse } from '../../interfaces/dashboard.interface';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class BudgetStateService {
|
||||
private budgetExpenseState = new BehaviorSubject<IBudgetExpenseResponse | null>(null);
|
||||
private budgetAddState = new BehaviorSubject<IBudgetAddResponse | null>(null);
|
||||
// @Injectable({
|
||||
// providedIn: 'root'
|
||||
// })
|
||||
// export class BudgetStateService {
|
||||
// private budgetExpenseState = new BehaviorSubject<IBudgetExpenseResponse | null>(null);
|
||||
// private budgetAddState = new BehaviorSubject<IBudgetAddResponse | null>(null);
|
||||
|
||||
getBudgetExpenseState(): Observable<IBudgetExpenseResponse | null> {
|
||||
return this.budgetExpenseState.asObservable();
|
||||
}
|
||||
// getBudgetExpenseState(): Observable<IBudgetExpenseResponse | null> {
|
||||
// return this.budgetExpenseState.asObservable();
|
||||
// }
|
||||
|
||||
setBudgetExpenseState(budgetExpense: IBudgetExpenseResponse): void {
|
||||
this.budgetExpenseState.next(budgetExpense);
|
||||
}
|
||||
// setBudgetExpenseState(budgetExpense: IBudgetExpenseResponse): void {
|
||||
// this.budgetExpenseState.next(budgetExpense);
|
||||
// }
|
||||
|
||||
getBudgetAddState(): Observable<IBudgetAddResponse | null> {
|
||||
return this.budgetAddState.asObservable();
|
||||
}
|
||||
// getBudgetAddState(): Observable<IBudgetAddResponse | null> {
|
||||
// return this.budgetAddState.asObservable();
|
||||
// }
|
||||
|
||||
setBudgetAddState(budgetAdd: IBudgetAddResponse): void {
|
||||
this.budgetAddState.next(budgetAdd);
|
||||
}
|
||||
// setBudgetAddState(budgetAdd: IBudgetAddResponse): void {
|
||||
// this.budgetAddState.next(budgetAdd);
|
||||
// }
|
||||
|
||||
clearState(): void {
|
||||
this.budgetExpenseState.next(null);
|
||||
this.budgetAddState.next(null);
|
||||
}
|
||||
}
|
||||
// clearState(): void {
|
||||
// this.budgetExpenseState.next(null);
|
||||
// this.budgetAddState.next(null);
|
||||
// }
|
||||
// }
|
||||
|
||||
@@ -1,32 +1,26 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { BehaviorSubject, Observable } from 'rxjs';
|
||||
import { IProjectSearchResponse, ITransactionSearchResponse } from '../../interfaces/dashboard.interface';
|
||||
import { IPrjMst } from '../../interfaces/main.interface';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class ProjectStateService {
|
||||
private projectState = new BehaviorSubject<IProjectSearchResponse | null>(null);
|
||||
private transactionState = new BehaviorSubject<ITransactionSearchResponse | null>(null);
|
||||
// ประกาศ BehaviorSubject ด้วย Interface
|
||||
private projectState = new BehaviorSubject<IPrjMst[] | null>(null);
|
||||
|
||||
getProjectState(): Observable<IProjectSearchResponse | null> {
|
||||
// ส่ง Observable ไปให้ components subscribe
|
||||
getStateResult(): Observable<IPrjMst[] | null> {
|
||||
return this.projectState.asObservable();
|
||||
}
|
||||
|
||||
setProjectState(project: IProjectSearchResponse): void {
|
||||
this.projectState.next(project);
|
||||
}
|
||||
|
||||
getTransactionState(): Observable<ITransactionSearchResponse | null> {
|
||||
return this.transactionState.asObservable();
|
||||
}
|
||||
|
||||
setTransactionState(transaction: ITransactionSearchResponse): void {
|
||||
this.transactionState.next(transaction);
|
||||
// เซ็ท state
|
||||
setProjectState(projects: IPrjMst[]): void {
|
||||
this.projectState.next(projects);
|
||||
}
|
||||
|
||||
// เคลียร์ state
|
||||
clearState(): void {
|
||||
this.projectState.next(null);
|
||||
this.transactionState.next(null);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,22 +1,22 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { BehaviorSubject, Observable } from 'rxjs';
|
||||
import { IReportResponse } from '../../interfaces/dashboard.interface';
|
||||
// import { Injectable } from '@angular/core';
|
||||
// import { BehaviorSubject, Observable } from 'rxjs';
|
||||
// import { IReportResponse } from '../../interfaces/dashboard.interface';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class ReportStateService {
|
||||
private reportState = new BehaviorSubject<IReportResponse | null>(null);
|
||||
// @Injectable({
|
||||
// providedIn: 'root'
|
||||
// })
|
||||
// export class ReportStateService {
|
||||
// private reportState = new BehaviorSubject<IReportResponse | null>(null);
|
||||
|
||||
getReportState(): Observable<IReportResponse | null> {
|
||||
return this.reportState.asObservable();
|
||||
}
|
||||
// getReportState(): Observable<IReportResponse | null> {
|
||||
// return this.reportState.asObservable();
|
||||
// }
|
||||
|
||||
setReportState(report: IReportResponse): void {
|
||||
this.reportState.next(report);
|
||||
}
|
||||
// setReportState(report: IReportResponse): void {
|
||||
// this.reportState.next(report);
|
||||
// }
|
||||
|
||||
clearState(): void {
|
||||
this.reportState.next(null);
|
||||
}
|
||||
}
|
||||
// clearState(): void {
|
||||
// this.reportState.next(null);
|
||||
// }
|
||||
// }
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { BehaviorSubject, Observable } from 'rxjs';
|
||||
import { ITrnmst, IDropBdg } from '../../interfaces/main.interface';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root'
|
||||
})
|
||||
export class TransactionStateService {
|
||||
// ประกาศ BehaviorSubject ด้วย Interface
|
||||
private transactionState = new BehaviorSubject<ITrnmst[] | null>(null);
|
||||
private budgetState = new BehaviorSubject<IDropBdg[] | null>(null);
|
||||
|
||||
// ส่ง Observable ไปให้ components subscribe
|
||||
getTransactionState(): Observable<ITrnmst[] | null> {
|
||||
return this.transactionState.asObservable();
|
||||
}
|
||||
|
||||
// เซ็ท state
|
||||
setTransactionState(transactions: ITrnmst[]): void {
|
||||
this.transactionState.next(transactions);
|
||||
}
|
||||
|
||||
// เคลียร์ state
|
||||
clearState(): void {
|
||||
this.transactionState.next(null);
|
||||
}
|
||||
|
||||
|
||||
setBudgetDrop(budget: IDropBdg[]): void {
|
||||
this.budgetState.next(budget);
|
||||
}
|
||||
|
||||
getBudgetDrop(): Observable<IDropBdg[] | null> {
|
||||
return this.budgetState.asObservable();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user