Skip to content

M
myAppraisal
Commit 673f4a0f by LAPTOP-CV4JFSHE\kantavee
Options

ส่วนย่อยที่1 เเละ ส่วนย่อยที่2 API

parent f98e2989
Showing with 383 additions and 208 deletions
src/app/components/company-registration/branch-business-unit/sub-department-one/sub-department-one.component.html
...@@ -2,7 +2,9 @@ ...@@ -2,7 +2,9 @@
<div class="px-1"> <div class="px-1">
<div class="relative shadow-md"> <div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon" <input type="text" id="hs-leading-icon" name="hs-leading-icon"
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name"> class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name"
[(ngModel)]="search" (ngModelChange)="searchChange()">
<div <div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4"> class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<i class="ri-search-line text-gray"></i> <i class="ri-search-line text-gray"></i>
...@@ -11,7 +13,7 @@ ...@@ -11,7 +13,7 @@
</div> </div>
<div class="px-1"> <div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-45px m-0 shadow-md" <button type="button" class="ti-btn ti-btn-soft-secondary h-45px m-0 shadow-md"
data-hs-overlay="#sub-department-one-modal-add"> data-hs-overlay="#sub-department-one-component-modal-add">
<i class="ri-add-line"></i> <i class="ri-add-line"></i>
Add Add
</button> </button>
...@@ -60,38 +62,67 @@ ...@@ -60,38 +62,67 @@
</ng-container> </ng-container>
</tr> </tr>
</thead> </thead>
<tbody> <tbody *ngIf="!bu4ListFilter().length">
<tr *ngFor="let item of[ <tr>
['ACC', 'งานบัญชีเเละการเงิน', 'Accounting and Finance'], <td class="text-center" colspan="100%">
['ACC', 'งานบัญชีเเละการเงิน', 'Accounting and Finance'], ไม่พบข้อมูล
['ACC', 'งานบัญชีเเละการเงิน', 'Accounting and Finance'], </td>
['ACC', 'งานบัญชีเเละการเงิน', 'Accounting and Finance'], </tr>
['ACC', 'งานบัญชีเเละการเงิน', 'Accounting and Finance']];let i = index"> </tbody>
<td class="flex justify-center" style="font-size: 12px;">{{0+""+(i+1)}}</td> <tbody *ngIf="bu4ListFilter().length">
<td style="font-size: 12px;">{{item[0]}}</td> <tr
<td style="font-size: 12px;">{{item[1]}}</td> *ngFor="let item of bu4ListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
<td style="font-size: 12px;">{{item[2]}}</td>
<td class="flex justify-center"> <td class="flex justify-center">
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1" data-hs-overlay="#sub-department-one-modal-edit"></i> {{((currentPage-1) * 10)+(i+1)}}
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1"></i> </td>
<td>{{item.bu4id}}</td>
<td>{{item.tdesc}}</td>
<td>{{item.edesc}}</td>
<td class="flex justify-center">
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="selectBu4(item)"
data-hs-overlay="#sub-department-one-component-modal-edit"></i>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="deleteBu4(item)"></i>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<nav class="pagination-style-3 overflow-auto my-5" *ngIf="page.length">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="currentPage = (currentPage-1 || 1)">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li *ngFor="let item of page">
<a class="page-link" href="javascript:void(0);" [class.active]="item==currentPage"
(click)="currentPage=item">{{item}}
</a>
<!-- <a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a> -->
</li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="currentPage = (currentPage > page.length-1 ? currentPage: currentPage+1 )">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
</nav>
</div> </div>
</div> </div>
<div id="sub-department-one-modal-add" class="hs-overlay hidden ti-modal"> <div id="sub-department-one-component-modal-add" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]"> <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]">
<div class="max-h-full overflow-hidden ti-modal-content"> <div class="max-h-full overflow-hidden ti-modal-content">
<div class="ti-modal-header"> <div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary"> <h3 class="text-xxl font-bold text-primary">
เพิ่มข้อมูลทะเบียนส่วนย่อยที่ 1 เพิ่มข้อมูลทะเบียนส่วนย่อย 1
</h3> </h3>
<div class="flex justify-end"> <div class="flex justify-end" >
<div class="button-clear"> <div class="button-clear">
<button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md"> <button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md">
<svg class="svg-indigo" width="16" height="16" viewBox="0 0 64.00 64.00" <svg class="svg-indigo" width="16" height="16" viewBox="0 0 64.00 64.00"
...@@ -116,36 +147,36 @@ ...@@ -116,36 +147,36 @@
</button> </button>
</div> </div>
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger" <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#sub-department-one-modal-add"> data-hs-overlay="#sub-department-one-component-modal-add">
<span class="sr-only">Close</span> <span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i> <i class="ti ti-circle-x fs-xxl"></i>
</button> </button>
</div> </div>
</div> </div>
<div class="ti-modal-body" style="margin-top: 40px;"> <div class="ti-modal-body " style="margin-top: 40px;">
<label for="input-label" class="ti-form-label mt-2rem">อยู่ภายใต้หน่วยงาน</label> <label for="input-label" class="ti-form-label mt-2rem">อยู่ภายใต้หน่วยงาน</label>
<div class="relative"> <div class="relative">
<div class="relative rounded-xl overflow-auto"> <div class="relative rounded-xl overflow-auto">
<div class="sm:grid grid-cols-2 gap-1"> <div class="sm:grid grid-cols-2 gap-1">
<div class="relative w-full"> <div class="relative w-full">
<div> <div>
<div class="relative flex rounded-md"> <div class="relative flex rounded-md">
<input type="text" id="hs-leading-button-add-on-with-icon-and-button" name="hs-leading-button-add-on-with-icon-and-button" class="ti-form-input rounded-none ltr:rounded-r-md rtl:rounded-l-md focus:z-10" style="padding-right: 3.5rem;"> <input type="text" id="hs-leading-button-add-on-with-icon-and-button" name="hs-leading-button-add-on-with-icon-and-button" class="ti-form-input rounded-none ltr:rounded-r-md rtl:rounded-l-md focus:z-10" style="padding-right: 3.5rem;">
<div class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center pointer-events-none z-20 ltr:pr-4 rtl:pl-4 space-x-2"> <div class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center pointer-events-none z-20 ltr:pr-4 rtl:pl-4 space-x-2">
<i class="ti ti-circle-x text-red-500 cursor-pointer right-10"></i> <i class="ti ti-circle-x text-red-500 cursor-pointer right-10"></i>
<svg class="h-3.5 w-3.5 text-gray-500 dark:text-white/70" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <svg class="h-3.5 w-3.5 text-gray-500 dark:text-white/70" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/> <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg> </svg>
</div> </div>
</div>
</div> </div>
</div> </div>
</div> <div class="flex flex-col-6" >
<div class="flex flex-col-6" > <input type="text" id="input-label" class="ti-form-input w-full" style="background-color: #B3B3B3; margin-left:10px;" disabled>
<input type="text" id="input-label" class="ti-form-input w-full" style="background-color: #B3B3B3; margin-left:10px;" disabled> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<label for="input-label" class="ti-form-label mt-2rem">ส่วนย่อย1</label> <label for="input-label" class="ti-form-label mt-2rem">ส่วนย่อย1</label>
<div class="sm:grid grid-cols-2 gap-1"> <div class="sm:grid grid-cols-2 gap-1">
<div class="relative w-full"> <div class="relative w-full">
...@@ -161,18 +192,19 @@ ...@@ -161,18 +192,19 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<label for="detail_th" class="ti-form-label mt-2rem">รายละเอียด (ไทย)</label> <label for="detail_th" class="ti-form-label mt-2rem">รายละเอียด (ไทย)</label>
<input type="text" id="detail_th" class="ti-form-input h-16" placeholder=""> <input type="text" id="detail_th" class="ti-form-input h-16">
<label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียด (อังกฤษ)</label> <label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียด (อังกฤษ)</label>
<input type="text" id="detail_eng" class="ti-form-input h-16" placeholder=""> <input type="text" id="detail_eng" class="ti-form-input h-16" placeholder="">
<div class="flex justify-end mt-2rem mb-1rem space-x-4"> <div class="flex justify-end mt-2rem mb-1rem space-x-4">
<button type="button" <button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10" class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#sub-department-one-modal-add"> data-hs-overlay="#sub-department-one-component-modal-add">
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"> <a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#sub-department-one-alert-modal">
บันทึกข้อมูล บันทึกข้อมูล
</a> </a>
</div> </div>
...@@ -181,12 +213,12 @@ ...@@ -181,12 +213,12 @@
</div> </div>
</div> </div>
<div id="sub-department-one-modal-edit" class="hs-overlay hidden ti-modal"> <div id="sub-department-one-component-modal-edit" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]"> <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]">
<div class="max-h-full overflow-hidden ti-modal-content"> <div class="max-h-full overflow-hidden ti-modal-content">
<div class="ti-modal-header"> <div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary"> <h3 class="text-xxl font-bold text-primary">
แก้ไขข้อมูลทะเบียนส่วนย่อย 1 แก้ไขข้อมูลทะเบียนเเผนก
</h3> </h3>
<div class="flex justify-end"> <div class="flex justify-end">
<div class="button-clear"> <div class="button-clear">
...@@ -213,21 +245,21 @@ ...@@ -213,21 +245,21 @@
</button> </button>
</div> </div>
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger" <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#sub-department-one-modal-edit"> data-hs-overlay="#sub-department-one-component-modal-edit">
<span class="sr-only">Close</span> <span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i> <i class="ti ti-circle-x fs-xxl"></i>
</button> </button>
</div> </div>
</div> </div>
<div class="ti-modal-body " style="margin-top: 40px;"> <div class="ti-modal-body " style="margin-top: 40px;">
<label for="input-label" class="ti-form-label mt-2rem">เเก้ไขข้อมูลทะเบียนส่วนย่อย 1</label> <label for="input-label" class="ti-form-label mt-2rem">อยู่ภายใต้หน่วยงาน</label>
<div class="relative"> <div class="relative">
<div class="relative rounded-xl overflow-auto"> <div class="relative rounded-xl overflow-auto">
<div class="sm:grid grid-cols-2 gap-1"> <div class="sm:grid grid-cols-2 gap-1">
<div class="relative w-full"> <div class="relative w-full">
<div> <div>
<div class="relative flex rounded-md"> <div class="relative flex rounded-md">
<input type="text" id="hs-leading-button-add-on-with-icon-and-button" name="hs-leading-button-add-on-with-icon-and-button" class="ti-form-input rounded-none ltr:rounded-r-md rtl:rounded-l-md focus:z-10" value="01" style="padding-right: 3.5rem;"> <input type="text" id="hs-leading-button-add-on-with-icon-and-button" name="hs-leading-button-add-on-with-icon-and-button" class="ti-form-input rounded-none ltr:rounded-r-md rtl:rounded-l-md focus:z-10" style="padding-right: 3.5rem;" [(ngModel)]="bu3.bu3id" readonly>
<div class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center pointer-events-none z-20 ltr:pr-4 rtl:pl-4 space-x-2"> <div class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center pointer-events-none z-20 ltr:pr-4 rtl:pl-4 space-x-2">
<i class="ti ti-circle-x text-red-500 cursor-pointer right-10"></i> <i class="ti ti-circle-x text-red-500 cursor-pointer right-10"></i>
<svg class="h-3.5 w-3.5 text-gray-500 dark:text-white/70" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <svg class="h-3.5 w-3.5 text-gray-500 dark:text-white/70" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
...@@ -238,28 +270,64 @@ ...@@ -238,28 +270,64 @@
</div> </div>
</div> </div>
<div class="flex flex-col-6" > <div class="flex flex-col-6" >
<input type="text" id="input-label" class="ti-form-input w-full" style="background-color: #B3B3B3; margin-left:10px;" disabled value="ส่วน 1"> <input type="text" id="input-label" class="ti-form-input w-full" style="background-color: #B3B3B3; margin-left:10px;" disabled value="ฝ่าย" [(ngModel)]="bu3.tdesc">
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<label for="input-label" class="ti-form-label mt-2rem">ส่วนย่อย 1</label> <label for="input-label" class="ti-form-label mt-2rem">ส่วนย่อย1</label>
<div class="sm:grid grid-cols-2 gap-1"> <div class="sm:grid grid-cols-2 gap-1">
<div class="relative w-full"> <div class="relative w-full">
<input type="text" id="input-label" class="ti-form-input w-full pr-10 " style="background-color: #B3B3B3;" value="01"> <input type="text" id="input-label" class="ti-form-input w-full pr-10 " style="background-color: #B3B3B3;" [value]="bu4.bu4id">
</div>
</div> </div>
<label for="detail_th" class="ti-form-label mt-2rem">รายละเอียด (ไทย)</label> </div>
<input type="text" id="detail_th" class="ti-form-input h-16" placeholder="" value="ส่วนย่อย 1"> <label for="detail_th" class="ti-form-label mt-2rem">รายละเอียด (ไทย)</label>
<label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียด (อังกฤษ)</label> <input type="text" id="detail_th" class="ti-form-input h-16" [(ngModel)]="bu4.tdesc" >
<input type="text" id="detail_eng" class="ti-form-input h-16" placeholder=""> <label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียด (อังกฤษ)</label>
<div class="flex justify-end mt-2rem mb-1rem space-x-4"> <input type="text" id="detail_eng" class="ti-form-input h-16" [(ngModel)]="bu4.edesc">
<div class="flex justify-end mt-2rem mb-1rem space-x-4 ">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#sub-department-one-component-modal-edit">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#sub-department-one-alert-modal">
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
<div id="sub-department-one-alert-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
<div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
แจ้งเตือน
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#sub-department-one-alert-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการบันทึกข้อมูลหรือไม่
</p>
<div class="flex justify-end mt-2rem mb-1rem">
<button type="button" <button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10" class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#sub-department-one-modal-edit"> data-hs-overlay="#sub-department-one-alert-modal">
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"> <a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#sub-department-one-alert-modal" (click)="addBu4()">
บันทึกข้อมูล บันทึกข้อมูล
</a> </a>
</div> </div>
......
src/app/components/company-registration/branch-business-unit/sub-department-one/sub-department-one.component.ts
import { Component, EventEmitter, Input, Output } from '@angular/core'; import { Component, EventEmitter, Input, Output } from '@angular/core';
import { Bu3Model, MyBu3Model } from 'src/app/shared/model/bu3.model';
import { Bu4Model, MyBu4Model } from 'src/app/shared/model/bu4.model';
import { Bu3Service } from 'src/app/shared/services/bu3.service';
import { Bu4Service } from 'src/app/shared/services/bu4.service';
@Component({ @Component({
selector: 'app-sub-department-one', selector: 'app-sub-department-one',
...@@ -6,43 +10,52 @@ import { Component, EventEmitter, Input, Output } from '@angular/core'; ...@@ -6,43 +10,52 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
styleUrls: ['./sub-department-one.component.scss'] styleUrls: ['./sub-department-one.component.scss']
}) })
export class SubDepartmentOneComponent { export class SubDepartmentOneComponent {
modalOptions: { currentPage = 1
[nameModal: string]: { // ชื่อตรวจสอบการเปิดปิด page = Array.from({ length: 1 }, (_, i) => i + 1);
isModalOpen: boolean; // เปิด/ปิด bu4List: Bu4Model[] = []
modalSize: string; // ขนาดของ Modal (s,m,l,vw10-vw100 ) bu4: Bu4Model = new MyBu4Model({})
backdropClose: boolean; // (คลิก Backdrop แล้ว true ปิด false ไม่ปิด ) bu3: Bu3Model = new MyBu3Model({})
} search = ""
} = { constructor(private bu4Service: Bu4Service,
"add": { private bu3Service: Bu3Service
isModalOpen: false, ) { }
modalSize: 'm', ngOnInit(): void {
backdropClose: true, this.getBu4List()
},
"edit": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
}
}
openModal(name: string, size: string, closeOnBackdrop?: boolean) {
this.modalOptions[name].modalSize = size;
this.modalOptions[name].backdropClose = closeOnBackdrop || false;
this.modalOptions[name].isModalOpen = true;
document.body.style.overflow = 'hidden'; // ล็อก Scroll
} }
getBu4List() {
closeModal(name: string) { this.bu4Service.getList().subscribe(response => {
this.modalOptions[name].isModalOpen = false; this.bu4List = response
// ตรวจสอบว่ามี Modal อื่นเปิดอยู่หรือไม่ this.searchChange()
if (!this.isAnyModalOpen()) { })
document.body.style.overflow = ''; // คืนค่าการ Scroll เฉพาะเมื่อ Modal ทั้งหมดปิดแล้ว
}
} }
searchChange() {
isAnyModalOpen(): boolean { this.currentPage = 1
// Logic ตรวจสอบว่า Modal อื่นยังเปิดอยู่หรือไม่ this.page = Array.from({ length: Math.ceil(this.bu4ListFilter().length / 10) }, (_, i) => i + 1);
return Object.values(this.modalOptions).some(modal => modal.isModalOpen); // หากไม่มี Modal อื่นเปิด }
bu4ListFilter() {
return this.bu4List.filter(x => x.bu4id.toLowerCase().includes(this.search) ||
x.tdesc.toLowerCase().includes(this.search) ||
x.edesc.toLowerCase().includes(this.search))
}
selectBu4(bu4: Bu4Model) {
this.bu3Service.getById(bu4.parent).subscribe(response => {
this.bu3 = response
})
this.bu4 = new MyBu4Model(bu4)
}
addBu4() {
// this.bu4Service.post(this.bu4).subscribe((response:any) => {
// if (response.success) {
// this.getBu4List()
// }
// })
}
deleteBu4(bu4: Bu4Model) {
// this.bu4Service.delete(new MyBu4Model(bu4)).subscribe((response:any) => {
// if (response.success) {
// this.getBu4List()
// }
// })
} }
} }
......
src/app/components/company-registration/branch-business-unit/sub-department-two/sub-department-two.component.html
...@@ -2,7 +2,9 @@ ...@@ -2,7 +2,9 @@
<div class="px-1"> <div class="px-1">
<div class="relative shadow-md"> <div class="relative shadow-md">
<input type="text" id="hs-leading-icon" name="hs-leading-icon" <input type="text" id="hs-leading-icon" name="hs-leading-icon"
class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name"> class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 " placeholder="Search by No. or Name"
[(ngModel)]="search" (ngModelChange)="searchChange()">
<div <div
class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4"> class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
<i class="ri-search-line text-gray"></i> <i class="ri-search-line text-gray"></i>
...@@ -11,7 +13,7 @@ ...@@ -11,7 +13,7 @@
</div> </div>
<div class="px-1"> <div class="px-1">
<button type="button" class="ti-btn ti-btn-soft-secondary h-45px m-0 shadow-md" <button type="button" class="ti-btn ti-btn-soft-secondary h-45px m-0 shadow-md"
data-hs-overlay="#sub-department-two-modal-add"> data-hs-overlay="#sub-department-two-component-modal-add">
<i class="ri-add-line"></i> <i class="ri-add-line"></i>
Add Add
</button> </button>
...@@ -60,38 +62,67 @@ ...@@ -60,38 +62,67 @@
</ng-container> </ng-container>
</tr> </tr>
</thead> </thead>
<tbody> <tbody *ngIf="!bu5ListFilter().length">
<tr *ngFor="let item of[ <tr>
['ACC', 'งานบัญชีเเละการเงิน', 'Accounting and Finance'], <td class="text-center" colspan="100%">
['ACC', 'งานบัญชีเเละการเงิน', 'Accounting and Finance'], ไม่พบข้อมูล
['ACC', 'งานบัญชีเเละการเงิน', 'Accounting and Finance'], </td>
['ACC', 'งานบัญชีเเละการเงิน', 'Accounting and Finance'], </tr>
['ACC', 'งานบัญชีเเละการเงิน', 'Accounting and Finance']];let i = index"> </tbody>
<td class="flex justify-center" style="font-size: 12px;">{{0+""+(i+1)}}</td> <tbody *ngIf="bu5ListFilter().length">
<td style="font-size: 12px;">{{item[0]}}</td> <tr
<td style="font-size: 12px;">{{item[1]}}</td> *ngFor="let item of bu5ListFilter() | slice:((currentPage-1) * 10) : (((currentPage-1) * 10) + 10);let i = index">
<td style="font-size: 12px;">{{item[2]}}</td> <td class="flex justify-center">
{{((currentPage-1) * 10)+(i+1)}}
</td>
<td>{{item.bu5id}}</td>
<td>{{item.tdesc}}</td>
<td>{{item.edesc}}</td>
<td class="flex justify-center"> <td class="flex justify-center">
<i class="ti ti-edit cursor-pointer i-gray fs-l px-1" data-hs-overlay="#sub-department-two-modal-edit"></i> <i class="ti ti-edit cursor-pointer i-gray fs-l px-1" (click)="selectBu5(item)"
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1"></i> data-hs-overlay="#sub-department-two-modal-edit"></i>
<i class="ti ti-trash cursor-pointer i-gray fs-l px-1" (click)="deleteBu5(item)"></i>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
<nav class="pagination-style-3 overflow-auto my-5" *ngIf="page.length">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="currentPage = (currentPage-1 || 1)">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li *ngFor="let item of page">
<a class="page-link" href="javascript:void(0);" [class.active]="item==currentPage"
(click)="currentPage=item">{{item}}
</a>
<!-- <a aria-label="anchor" class="page-link" href="javascript:void(0);"><i class="ri-more-line"></i>
</a> -->
</li>
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="currentPage = (currentPage > page.length-1 ? currentPage: currentPage+1 )">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
</nav>
</div> </div>
</div> </div>
<div id="sub-department-two-modal-add" class="hs-overlay hidden ti-modal"> <div id="sub-department-two-component-modal-add" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]"> <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]">
<div class="max-h-full overflow-hidden ti-modal-content"> <div class="max-h-full overflow-hidden ti-modal-content">
<div class="ti-modal-header"> <div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary"> <h3 class="text-xxl font-bold text-primary">
เพิ่มข้อมูลทะเบียนส่วนย่อย 2 เพิ่มข้อมูลทะเบียนส่วนย่อย 1
</h3> </h3>
<div class="flex justify-end"> <div class="flex justify-end" >
<div class="button-clear"> <div class="button-clear">
<button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md"> <button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md">
<svg class="svg-indigo" width="16" height="16" viewBox="0 0 64.00 64.00" <svg class="svg-indigo" width="16" height="16" viewBox="0 0 64.00 64.00"
...@@ -116,56 +147,64 @@ ...@@ -116,56 +147,64 @@
</button> </button>
</div> </div>
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger" <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#sub-department-two-modal-add"> data-hs-overlay="#sub-department-two-component-modal-add">
<span class="sr-only">Close</span> <span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i> <i class="ti ti-circle-x fs-xxl"></i>
</button> </button>
</div> </div>
</div> </div>
<div class="ti-modal-body" style="margin-top: 40px;"> <div class="ti-modal-body " style="margin-top: 40px;">
<label for="part" class="ti-form-label mt-2rem">อยู่ภายใต้หน่วยงาน</label> <label for="input-label" class="ti-form-label mt-2rem">อยู่ภายใต้หน่วยงาน</label>
<div class="relative"> <div class="relative">
<div class="relative rounded-xl overflow-auto"> <div class="relative rounded-xl overflow-auto">
<div class="sm:grid grid-cols-2 gap-1"> <div class="sm:grid grid-cols-2 gap-1">
<div class="relative w-full"> <div class="relative w-full">
<input type="text" id="hs-leading-button-add-on-with-icon-and-button" name="hs-leading-button-add-on-with-icon-and-button" class="ti-form-input rounded-none ltr:rounded-r-md rtl:rounded-l-md focus:z-10" style="padding-right: 3.5rem;"> <div>
<div class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center pointer-events-none z-20 ltr:pr-4 rtl:pl-4 space-x-2"> <div class="relative flex rounded-md">
<i class="ti ti-circle-x text-red-500 cursor-pointer"></i> <input type="text" id="hs-leading-button-add-on-with-icon-and-button" name="hs-leading-button-add-on-with-icon-and-button" class="ti-form-input rounded-none ltr:rounded-r-md rtl:rounded-l-md focus:z-10" style="padding-right: 3.5rem;">
<svg class="h-3.5 w-3.5 text-gray-300 dark:text-white/70" xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="currentColor" viewBox="0 0 16 16"> <div class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center pointer-events-none z-20 ltr:pr-4 rtl:pl-4 space-x-2">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/> <i class="ti ti-circle-x text-red-500 cursor-pointer right-10"></i>
</svg> <svg class="h-3.5 w-3.5 text-gray-500 dark:text-white/70" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg>
</div>
</div>
</div>
</div>
<div class="flex flex-col-6" >
<input type="text" id="input-label" class="ti-form-input w-full" style="background-color: #B3B3B3; margin-left:10px;" disabled>
</div> </div>
</div> </div>
</div>
<div class="flex flex-col-6"> </div>
<input type="text" id="part2" class="ti-form-input w-full" placeholder="" style="background-color: #B3B3B3; margin-left: 10px;" disabled> <label for="input-label" class="ti-form-label mt-2rem">ส่วนย่อย1</label>
<div class="sm:grid grid-cols-2 gap-1">
<div class="relative w-full">
<div>
<div class="relative flex rounded-md">
<input type="text" id="hs-leading-button-add-on-with-icon-and-button" name="hs-leading-button-add-on-with-icon-and-button" class="ti-form-input rounded-none ltr:rounded-r-md rtl:rounded-l-md focus:z-10" style="padding-right: 3.5rem;">
<div class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center pointer-events-none z-20 ltr:pr-4 rtl:pl-4 space-x-2">
<i class="ti ti-circle-x text-red-500 cursor-pointer right-10"></i>
<svg class="h-3.5 w-3.5 text-gray-500 dark:text-white/70" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<label for="part" class="ti-form-label mt-2rem">ส่วนย่อย2</label>
<div class="relative w-1/2">
<input type="text" id="hs-leading-button-add-on-with-icon-and-button" name="hs-leading-button-add-on-with-icon-and-button" class="ti-form-input rounded-none ltr:rounded-r-md rtl:rounded-l-md focus:z-10" style="padding-right: 3.5rem;">
<div class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center pointer-events-none z-20 ltr:pr-4 rtl:pl-4 space-x-2">
<i class="ti ti-circle-x text-red-500 cursor-pointer"></i>
<svg class="h-3.5 w-3.5 text-gray-300 dark:text-white/70" xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="currentColor" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg>
</div>
</div>
<label for="detail_th" class="ti-form-label mt-2rem">รายละเอียด (ไทย)</label> <label for="detail_th" class="ti-form-label mt-2rem">รายละเอียด (ไทย)</label>
<input type="text" id="detail_th" class="ti-form-input h-16" placeholder=""> <input type="text" id="detail_th" class="ti-form-input h-16">
<label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียด (อังกฤษ)</label> <label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียด (อังกฤษ)</label>
<input type="text" id="detail_eng" class="ti-form-input h-16" placeholder=""> <input type="text" id="detail_eng" class="ti-form-input h-16" placeholder="">
<div class="flex justify-end mt-2rem mb-1rem space-x-4"> <div class="flex justify-end mt-2rem mb-1rem space-x-4">
<button type="button" <button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10" class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#sub-department-two-modal-add"> data-hs-overlay="#sub-department-two-component-modal-add">
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"> <a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#sub-department-two-alert-modal">
บันทึกข้อมูล บันทึกข้อมูล
</a> </a>
</div> </div>
...@@ -179,7 +218,7 @@ ...@@ -179,7 +218,7 @@
<div class="max-h-full overflow-hidden ti-modal-content"> <div class="max-h-full overflow-hidden ti-modal-content">
<div class="ti-modal-header"> <div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary"> <h3 class="text-xxl font-bold text-primary">
แก้ไขข้อมูลทะเบียนส่วนย่อย 2 แก้ไขข้อมูลทะเบียนเเผนก
</h3> </h3>
<div class="flex justify-end"> <div class="flex justify-end">
<div class="button-clear"> <div class="button-clear">
...@@ -212,42 +251,83 @@ ...@@ -212,42 +251,83 @@
</button> </button>
</div> </div>
</div> </div>
<div class="ti-modal-body" style="margin-top: 40px;"> <div class="ti-modal-body " style="margin-top: 40px;">
<label for="part" class="ti-form-label mt-2rem">อยู่ภายใต้หน่วยงาน</label> <label for="input-label" class="ti-form-label mt-2rem">อยู่ภายใต้หน่วยงาน</label>
<div class="relative"> <div class="relative">
<div class="relative rounded-xl overflow-auto"> <div class="relative rounded-xl overflow-auto">
<div class="sm:grid grid-cols-2 gap-1"> <div class="sm:grid grid-cols-2 gap-1">
<div class="relative w-full"> <div class="relative w-full">
<input type="text" id="hs-leading-button-add-on-with-icon-and-button" name="hs-leading-button-add-on-with-icon-and-button" class="ti-form-input rounded-none ltr:rounded-r-md rtl:rounded-l-md focus:z-10" style="padding-right: 3.5rem;" value="01"> <div>
<div class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center pointer-events-none z-20 ltr:pr-4 rtl:pl-4 space-x-2"> <div class="relative flex rounded-md">
<i class="ti ti-circle-x text-red-500 cursor-pointer"></i> <input type="text" id="hs-leading-button-add-on-with-icon-and-button" name="hs-leading-button-add-on-with-icon-and-button" class="ti-form-input rounded-none ltr:rounded-r-md rtl:rounded-l-md focus:z-10" style="padding-right: 3.5rem;" [(ngModel)]="bu4.bu4id" readonly>
<svg class="h-3.5 w-3.5 text-gray-300 dark:text-white/70" xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="currentColor" viewBox="0 0 16 16"> <div class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center pointer-events-none z-20 ltr:pr-4 rtl:pl-4 space-x-2">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/> <i class="ti ti-circle-x text-red-500 cursor-pointer right-10"></i>
</svg> <svg class="h-3.5 w-3.5 text-gray-500 dark:text-white/70" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg>
</div>
</div>
</div>
</div>
<div class="flex flex-col-6" >
<input type="text" id="input-label" class="ti-form-input w-full" style="background-color: #B3B3B3; margin-left:10px;" disabled value="ฝ่าย" [(ngModel)]="bu4.tdesc">
</div> </div>
</div>
<div class="flex flex-col-6">
<input type="text" id="part2" class="ti-form-input w-full" placeholder="" style="background-color: #B3B3B3; margin-left: 10px;" disabled value="ส่วนย่อย 1">
</div> </div>
</div> </div>
</div>
<label for="input-label" class="ti-form-label mt-2rem">ส่วนย่อย1</label>
<div class="sm:grid grid-cols-2 gap-1">
<div class="relative w-full">
<input type="text" id="input-label" class="ti-form-input w-full pr-10 " style="background-color: #B3B3B3;" [value]="bu5.bu5id">
</div> </div>
</div> </div>
<label for="part" class="ti-form-label mt-2rem">ส่วนย่อย2</label>
<input type="text" id="part" class="ti-form-input w-1/2 pr-10" placeholder="" style="background-color: #B3B3B3;" disabled value="01">
<label for="detail_th" class="ti-form-label mt-2rem">รายละเอียด (ไทย)</label> <label for="detail_th" class="ti-form-label mt-2rem">รายละเอียด (ไทย)</label>
<input type="text" id="detail_th" class="ti-form-input h-16" placeholder="" value="ส่วนย่อย 2"> <input type="text" id="detail_th" class="ti-form-input h-16" [(ngModel)]="bu5.tdesc" >
<label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียด (อังกฤษ)</label> <label for="detail_eng" class="ti-form-label mt-2rem">รายละเอียด (อังกฤษ)</label>
<input type="text" id="detail_eng" class="ti-form-input h-16" placeholder=""> <input type="text" id="detail_eng" class="ti-form-input h-16" [(ngModel)]="bu5.edesc">
<div class="flex justify-end mt-2rem mb-1rem space-x-4"> <div class="flex justify-end mt-2rem mb-1rem space-x-4 ">
<button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#sub-department-two-modal-edit">
ย้อนกลับ
</button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#sub-department-two-alert-modal">
บันทึกข้อมูล
</a>
</div>
</div>
</div>
</div>
</div>
<div id="sub-department-two-alert-modal" class="hs-overlay hidden ti-modal">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
<div class="max-h-full overflow-hidden ti-modal-content w-full">
<div class="ti-modal-header">
<h3 class="text-xxl font-bold text-primary">
แจ้งเตือน
</h3>
<div class="flex justify-end">
<button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#sub-department-two-alert-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
</div>
</div>
<div class="ti-modal-body ">
<p class="mt-1 text-gray-800 dark:text-white/70">
ยืนยันการบันทึกข้อมูลหรือไม่
</p>
<div class="flex justify-end mt-2rem mb-1rem">
<button type="button" <button type="button"
class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10" class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
data-hs-overlay="#sub-department-two-modal-add"> data-hs-overlay="#sub-department-two-alert-modal">
ย้อนกลับ ย้อนกลับ
</button> </button>
<a class="ti-btn ti-btn-success" href="javascript:void(0);"> <a class="ti-btn ti-btn-success" href="javascript:void(0);"
data-hs-overlay="#sub-department-two-alert-modal" (click)="addBu5()">
บันทึกข้อมูล บันทึกข้อมูล
</a> </a>
</div> </div>
......
src/app/components/company-registration/branch-business-unit/sub-department-two/sub-department-two.component.ts
import { Component, EventEmitter, Input, Output } from '@angular/core'; import { Component, EventEmitter, Input, OnInit } from '@angular/core';
import { Bu4Model, MyBu4Model } from 'src/app/shared/model/bu4.model';
import { Bu5Model, MyBu5Model } from 'src/app/shared/model/bu5.model';
import { Bu4Service } from 'src/app/shared/services/bu4.service';
import { Bu5Service } from 'src/app/shared/services/bu5.service';
@Component({ @Component({
selector: 'app-sub-department-two', selector: 'app-sub-department-two',
templateUrl: './sub-department-two.component.html', templateUrl: './sub-department-two.component.html',
styleUrls: ['./sub-department-two.component.scss'] styleUrls: ['./sub-department-two.component.scss']
}) })
export class SubDepartmentTwoComponent { export class SubDepartmentTwoComponent implements OnInit {
modalOptions: { currentPage = 1
[nameModal: string]: { // ชื่อตรวจสอบการเปิดปิด page = Array.from({ length: 1 }, (_, i) => i + 1);
isModalOpen: boolean; // เปิด/ปิด bu5List: Bu5Model[] = []
modalSize: string; // ขนาดของ Modal (s,m,l,vw10-vw100 ) bu5: Bu5Model = new MyBu5Model({})
backdropClose: boolean; // (คลิก Backdrop แล้ว true ปิด false ไม่ปิด ) bu4: Bu4Model = new MyBu4Model({})
} search = ""
} = { constructor(private bu5Service: Bu5Service,
"add": { private bu4Service: Bu4Service
isModalOpen: false, ) { }
modalSize: 'm', ngOnInit(): void {
backdropClose: true, this.getBu5List()
},
"edit": {
isModalOpen: false,
modalSize: 'm',
backdropClose: true,
}
}
openModal(name: string, size: string, closeOnBackdrop?: boolean) {
this.modalOptions[name].modalSize = size;
this.modalOptions[name].backdropClose = closeOnBackdrop || false;
this.modalOptions[name].isModalOpen = true;
document.body.style.overflow = 'hidden'; // ล็อก Scroll
} }
getBu5List() {
closeModal(name: string) { this.bu5Service.getList().subscribe(response => {
this.modalOptions[name].isModalOpen = false; this.bu5List = response
// ตรวจสอบว่ามี Modal อื่นเปิดอยู่หรือไม่ this.searchChange()
if (!this.isAnyModalOpen()) { })
document.body.style.overflow = ''; // คืนค่าการ Scroll เฉพาะเมื่อ Modal ทั้งหมดปิดแล้ว
}
} }
searchChange() {
isAnyModalOpen(): boolean { this.currentPage = 1
// Logic ตรวจสอบว่า Modal อื่นยังเปิดอยู่หรือไม่ this.page = Array.from({ length: Math.ceil(this.bu5ListFilter().length / 10) }, (_, i) => i + 1);
return Object.values(this.modalOptions).some(modal => modal.isModalOpen); // หากไม่มี Modal อื่นเปิด }
bu5ListFilter() {
return this.bu5List.filter(x => x.bu5id.toLowerCase().includes(this.search) ||
x.tdesc.toLowerCase().includes(this.search) ||
x.edesc.toLowerCase().includes(this.search))
}
selectBu5(bu5: Bu5Model) {
this.bu4Service.getById(bu5.parent).subscribe(response => {
this.bu4 = response
})
this.bu5 = new MyBu5Model(bu5)
}
addBu5() {
// this.bu5Service.post(this.bu5).subscribe((response:any) => {
// if (response.success) {
// this.getBu5List()
// }
// })
}
deleteBu5(bu5: Bu5Model) {
// this.bu5Service.delete(new MyBu5Model(bu5)).subscribe((response:any) => {
// if (response.success) {
// this.getBu5List()
// }
// })
} }
} }
src/app/components/dashboard/dashboard.module.ts
...@@ -44,7 +44,7 @@ import { FormsModule } from '@angular/forms'; ...@@ -44,7 +44,7 @@ import { FormsModule } from '@angular/forms';
import { Bu2Service } from 'src/app/shared/services/bu2.service'; import { Bu2Service } from 'src/app/shared/services/bu2.service';
import { Bu3Service } from 'src/app/shared/services/bu3.service'; import { Bu3Service } from 'src/app/shared/services/bu3.service';
import { Bu4Service } from 'src/app/shared/services/bu4.service'; import { Bu4Service } from 'src/app/shared/services/bu4.service';
import { Bu5Service } from 'src/app/shared/services/bu5service'; import { Bu5Service } from 'src/app/shared/services/bu5.service';
import { Bu6Service } from 'src/app/shared/services/bu6.service'; import { Bu6Service } from 'src/app/shared/services/bu6.service';
import { Bu7Service } from 'src/app/shared/services/bu7.service'; import { Bu7Service } from 'src/app/shared/services/bu7.service';
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment