Skip to content

M
mySkill-x
Commit 348909e5 by Nattana Chaiyamat
Options

ส่วนย่อย3

parent d64e63f4
Showing with 80 additions and 143 deletions
src/app/components/company-components/company-registration/branch-business-unit/sub-department-three/sub-department-three.component.ts
import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit } from '@angular/core'; import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit } from '@angular/core';
import { ColumnModel } from '@syncfusion/ej2-grids';
import { ToastrService } from 'ngx-toastr'; import { ToastrService } from 'ngx-toastr';
import { Bu5Model, MyBu5Model } from 'src/app/shared/model/bu5.model'; import { Bu5Model, MyBu5Model } from 'src/app/shared/model/bu5.model';
import { Bu6Model, MyBu6Model } from 'src/app/shared/model/bu6.model'; import { Bu6Model, MyBu6Model } from 'src/app/shared/model/bu6.model';
...@@ -18,25 +19,12 @@ interface table { ...@@ -18,25 +19,12 @@ interface table {
styleUrls: ['./sub-department-three.component.scss'] styleUrls: ['./sub-department-three.component.scss']
}) })
export class SubDepartmentThreeComponent implements OnInit { export class SubDepartmentThreeComponent implements OnInit {
bu6List: { check: boolean, data: Bu6Model }[] = [] bu6: { loading: boolean, select: Bu6Model, dataList: Bu6Model[] } = { loading: false, select: new MyBu6Model(), dataList: [] }
bu6ListLoading = false
bu6: Bu6Model = new MyBu6Model()
bu6Table: table = {
currentPage: 1,
page: Array.from({ length: 1 }, (_, i) => i + 1),
search: "",
pageSize: 10
}
selectedFile: File | null = null; selectedFile: File | null = null;
selectedFileName: string = 'กรุณาเลือกไฟล์'; selectedFileName: string = 'กรุณาเลือกไฟล์';
bu6Modal: table = {
currentPage: 1,
page: Array.from({ length: 1 }, (_, i) => i + 1),
search: "",
pageSize: 10
}
bu5List: Bu5Model[] = [] bu5List: Bu5Model[] = []
bu5: Bu5Model = new MyBu5Model() bu5: Bu5Model = new MyBu5Model()
bu5Modal: table = { bu5Modal: table = {
...@@ -47,9 +35,29 @@ export class SubDepartmentThreeComponent implements OnInit { ...@@ -47,9 +35,29 @@ export class SubDepartmentThreeComponent implements OnInit {
} }
currentModal: 'add' | 'edit' | 'detele' = "add" currentModal: 'add' | 'edit' | 'detele' = "add"
numDataListChecked = 0 columns: ColumnModel[] = [{
isDataListChecked = false field: "bu6id",
isDataListCheckedAll = false headerText: "รหัสฝ่าย",
type: "string",
isPrimaryKey: true,
},
{
field: "tdesc",
headerText: "รายละเอียดฝ่าย(ไทย)",
type: "string"
},
{
field: "edesc",
headerText: "รายละเอียดฝ่าย(อังกฤษ)",
type: "string"
}]
searchSettings = {
fields: ['bu6id', 'tdesc', 'edesc'],
operator: 'contains',
ignoreCase: false
};
search = ''
selectedItems: { key: string, count: number, data: Map<string, boolean> } = { key: '', count: 0, data: new Map<string, boolean>() };
constructor(private bu6Service: Bu6Service, constructor(private bu6Service: Bu6Service,
private bu5Service: Bu5Service, private bu5Service: Bu5Service,
private toastr: ToastrService, private toastr: ToastrService,
...@@ -73,7 +81,7 @@ export class SubDepartmentThreeComponent implements OnInit { ...@@ -73,7 +81,7 @@ export class SubDepartmentThreeComponent implements OnInit {
} }
const formData = new FormData(); const formData = new FormData();
formData.append('file', this.selectedFile); formData.append('file', this.selectedFile);
this.bu6ListLoading = true this.bu6.loading = true
this.fileService.uploadExcel(formData, 'mbu6').subscribe({ this.fileService.uploadExcel(formData, 'mbu6').subscribe({
next: response => { next: response => {
if (response.success) { if (response.success) {
...@@ -81,11 +89,11 @@ export class SubDepartmentThreeComponent implements OnInit { ...@@ -81,11 +89,11 @@ export class SubDepartmentThreeComponent implements OnInit {
this.getBu6List() this.getBu6List()
} else { } else {
this.showAlert(response.message, 'error') this.showAlert(response.message, 'error')
this.bu6ListLoading = false this.bu6.loading = false
} }
}, error: error => { }, error: error => {
this.showAlert(error.message, 'error') this.showAlert(error.message, 'error')
this.bu6ListLoading = false this.bu6.loading = false
} }
}) })
} }
...@@ -110,76 +118,63 @@ export class SubDepartmentThreeComponent implements OnInit { ...@@ -110,76 +118,63 @@ export class SubDepartmentThreeComponent implements OnInit {
} }
getBu6List() { getBu6List() {
this.bu6ListLoading = true this.bu6.loading = true
this.selectedItems.data.clear()
this.bu6Service.getList().subscribe({ this.bu6Service.getList().subscribe({
next: response => { next: response => {
this.bu6List = response.map(x => ({ check: false, data: new MyBu6Model(x) })) this.bu6.dataList = response.map(x => {
this.bu6ListLoading = false this.selectedItems.data.set(x.bu6id, false)
this.onBu6TableSearchChange() return new MyBu6Model(x)
this.isDataListCheckedAll = false })
this.dataListCheckAll() this.selectedItems.key = 'bu6id'
this.selectedItems.count = 0
this.bu6.loading = false
this.cdr.detectChanges() this.cdr.detectChanges()
}, error: error => { }, error: error => {
this.bu6ListLoading = false this.bu6.loading = false
this.cdr.detectChanges() this.cdr.detectChanges()
} }
}) })
} }
onBu6TableSearchChange() {
this.bu6Table.currentPage = 1
this.bu6Table.page = Array.from({ length: Math.ceil(this.filterBu6Table().length / 10) }, (_, i) => i + 1);
this.dataListCheck()
}
filterBu6Table() {
return this.bu6List.filter(x => {
const data = x.data
return data.bu6id.toLowerCase().includes(this.bu6Table.search.toLowerCase()) ||
data.tdesc.toLowerCase().includes(this.bu6Table.search.toLowerCase()) ||
data.edesc.toLowerCase().includes(this.bu6Table.search.toLowerCase())
})
}
selectBu6(bu6?: Bu6Model) { selectBu6(bu6?: Bu6Model) {
this.bu6 = new MyBu6Model(bu6) if (bu6) {
this.bu6.select = new MyBu6Model(bu6)
} else if (this.currentModal == 'add') {
this.bu6.select = new MyBu6Model()
} else if (this.currentModal == 'edit') {
this.bu6.select = new MyBu6Model({ bu6id: this.bu6.select.bu6id })
}
this.selectBu5() this.selectBu5()
if (this.bu6.parent) { if (this.bu6.select.parent) {
this.bu5Service.getById(this.bu6.parent).subscribe(response => { this.bu5Service.getById(this.bu6.select.parent).subscribe(response => {
this.bu5 = new MyBu5Model(response) this.bu5 = new MyBu5Model(response)
this.cdr.detectChanges() this.cdr.detectChanges()
}) })
} }
} }
onBu6ModalSearchChange() {
this.bu6Modal.currentPage = 1
this.bu6Modal.page = Array.from({ length: Math.ceil(this.filterBu6Modal().length / 10) }, (_, i) => i + 1);
}
filterBu6Modal() {
return this.bu6List.filter(x => {
const data = x.data
return data.bu6id.toLowerCase().includes(this.bu6Table.search.toLowerCase()) ||
data.tdesc.toLowerCase().includes(this.bu6Table.search.toLowerCase()) ||
data.edesc.toLowerCase().includes(this.bu6Table.search.toLowerCase())
})
}
addBu6() { addBu6() {
this.bu6ListLoading = true this.bu6.loading = true
this.bu6Service.post({ ...this.bu6, parent: this.bu5.bu5id }).subscribe({ this.bu6Service.post({ ...this.bu6.select, parent: this.bu5.bu5id }).subscribe({
next: response => { next: response => {
if (response.success) { if (response.success) {
this.showAlert(response.message, 'success') this.showAlert(response.message, 'success')
this.getBu6List() this.getBu6List()
} else { } else {
this.showAlert(response.message, 'error') this.showAlert(response.message, 'error')
this.bu6ListLoading = false this.bu6.loading = false
} }
}, error: error => { }, error: error => {
this.showAlert(error.message, 'error') this.showAlert(error.message, 'error')
this.bu6ListLoading = false this.bu6.loading = false
} }
}) })
} }
deleteBu6() { deleteBu6() {
this.bu6ListLoading = true this.bu6.loading = true
const body = this.bu6List.filter(x => x.check).map(x => new MyBu6Model(x.data)) const selectedKeys = Array.from(this.selectedItems.data.keys());
const body = this.bu6.dataList.filter(x => selectedKeys.includes(x.bu6id) && this.selectedItems.data.get(x.bu6id)).map(x => new MyBu6Model(x))
this.bu6Service.delete(body).subscribe({ this.bu6Service.delete(body).subscribe({
next: response => { next: response => {
if (response.success) { if (response.success) {
...@@ -187,11 +182,11 @@ export class SubDepartmentThreeComponent implements OnInit { ...@@ -187,11 +182,11 @@ export class SubDepartmentThreeComponent implements OnInit {
this.getBu6List() this.getBu6List()
} else { } else {
this.showAlert(response.message, 'error') this.showAlert(response.message, 'error')
this.bu6ListLoading = false this.bu6.loading = false
} }
}, error: error => { }, error: error => {
this.showAlert(error.message, 'error') this.showAlert(error.message, 'error')
this.bu6ListLoading = false this.bu6.loading = false
} }
}) })
} }
...@@ -226,21 +221,18 @@ export class SubDepartmentThreeComponent implements OnInit { ...@@ -226,21 +221,18 @@ export class SubDepartmentThreeComponent implements OnInit {
}) })
} }
dataListCheckAll() { checkPrimary() {
const selectAll = this.isDataListCheckedAll; return this.bu6.dataList.find(x => x.bu6id == this.bu6.select.bu6id)
this.filterBu6Table().forEach(x => x.check = selectAll);
this.dataListCheck();
} }
dataListCheck() { numSelectItem() {
const dataCheck = this.filterBu6Table(); const selectedKeys = Array.from(this.selectedItems.data.keys());
this.isDataListCheckedAll = dataCheck.length ? dataCheck.every(x => x.check) : false; const num = this.bu6.dataList.filter(x => selectedKeys.includes(x.bu6id) && this.selectedItems.data.get(x.bu6id)).length
this.numDataListChecked = this.bu6List.filter(x => x.check).length return num
this.isDataListChecked = Boolean(this.numDataListChecked)
} }
checkPrimary() { onSelectItemChange(arg: any) {
return this.bu6List.find(x => x.data.bu6id == this.bu6.bu6id) this.selectedItems = arg
} }
} }
......
src/app/components/company-components/company-registration/branch-business-unit/sub-department-two/sub-department-two.component.html
...@@ -85,12 +85,6 @@ ...@@ -85,12 +85,6 @@
Clear Clear
</button> </button>
</div> </div>
<!-- <div class="px-1">
<button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
<i class="ti ti-book fs-l"></i>
Help
</button>
</div> -->
</div> </div>
</div> </div>
<div class="ti-modal-body"> <div class="ti-modal-body">
...@@ -125,7 +119,7 @@ ...@@ -125,7 +119,7 @@
</span> </span>
</label> </label>
<div class="relative flex rounded-md w-1/2"> <div class="relative flex rounded-md w-1/2">
<input type="text" class="ti-form-input h-16" [class.!bg-input-readonly]="currentModal=='edit'" <input type="text" class="ti-form-input" [class.!bg-input-readonly]="currentModal=='edit'"
[readonly]="currentModal=='edit'" [class.!border-red]="currentModal=='add'&&checkPrimary()" [readonly]="currentModal=='edit'" [class.!border-red]="currentModal=='add'&&checkPrimary()"
[(ngModel)]="bu5.select.bu5id"> [(ngModel)]="bu5.select.bu5id">
</div> </div>
...@@ -161,14 +155,7 @@ ...@@ -161,14 +155,7 @@
ข้อมูลทะเบียนส่วนย่อย 1 ข้อมูลทะเบียนส่วนย่อย 1
</h3> </h3>
<div class="flex justify-end"> <div class="flex justify-end">
<button *ngIf="currentModal=='add'" type="button" <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#sub-department-two-modal">
<span class="sr-only">Close</span>
<i class="ti ti-circle-x fs-xxl"></i>
</button>
<button *ngIf="currentModal=='edit'" type="button"
class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
data-hs-overlay="#sub-department-two-modal"> data-hs-overlay="#sub-department-two-modal">
<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>
...@@ -214,66 +201,24 @@ ...@@ -214,66 +201,24 @@
</tr> </tr>
</tbody> </tbody>
<tbody *ngIf="filterBu4Modal().length"> <tbody *ngIf="filterBu4Modal().length">
<ng-container *ngIf="currentModal=='add'"> <tr *ngFor="let item of filterBu4Modal() | slice:((bu4Modal.currentPage-1) * bu4Modal.pageSize) : (((bu4Modal.currentPage-1) * bu4Modal.pageSize) + bu4Modal.pageSize);let i = index"
<tr *ngFor="let item of filterBu4Modal() | slice:((bu4Modal.currentPage-1) * bu4Modal.pageSize) : (((bu4Modal.currentPage-1) * bu4Modal.pageSize) + bu4Modal.pageSize);let i = index" class="cursor-pointer" (click)="selectBu4(item)"
class="cursor-pointer" (click)="selectBu4(item)" data-hs-overlay="#sub-department-two-modal">
data-hs-overlay="#sub-department-two-modal"> <td class="flex justify-center">
<td class="flex justify-center"> {{((bu4Modal.currentPage-1) * bu4Modal.pageSize)+(i+1)}}
{{((bu4Modal.currentPage-1) * bu4Modal.pageSize)+(i+1)}} </td>
</td> <td>{{item.bu4id}}</td>
<td>{{item.bu4id}}</td> <td>{{item.tdesc}}</td>
<td>{{item.tdesc}}</td> <td>{{item.edesc}}</td>
<td>{{item.edesc}}</td> </tr>
</tr>
</ng-container>
<ng-container *ngIf="currentModal=='edit'">
<tr *ngFor="let item of filterBu4Modal() | slice:((bu4Modal.currentPage-1) * bu4Modal.pageSize) : (((bu4Modal.currentPage-1) * bu4Modal.pageSize) + bu4Modal.pageSize);let i = index"
class="cursor-pointer" (click)="selectBu4(item)"
data-hs-overlay="#sub-department-two-modal">
<td class="flex justify-center">
{{((bu4Modal.currentPage-1) * bu4Modal.pageSize)+(i+1)}}
</td>
<td>{{item.bu4id}}</td>
<td>{{item.tdesc}}</td>
<td>{{item.edesc}}</td>
</tr>
</ng-container>
</tbody> </tbody>
</table> </table>
</div> </div>
<app-pagination [totalItems]="filterBu4Modal().length" [pageSize]="bu4Modal.pageSize" <app-pagination [totalItems]="filterBu4Modal().length" [pageSize]="bu4Modal.pageSize"
(pageChange)="bu4Modal.currentPage = $event" (pageChange)="bu4Modal.currentPage = $event"
(pageSizeChange)="bu4Modal.pageSize = $event;bu4Modal.currentPage = 1"></app-pagination> (pageSizeChange)="bu4Modal.pageSize = $event;bu4Modal.currentPage = 1"></app-pagination>
<nav class="pagination-style-3 overflow-auto my-5" *ngIf="bu4Modal.page.length">
<ul class="ti-pagination">
<li>
<a aria-label="anchor" class="page-link" href="javascript:void(0);"
(click)="bu4Modal.currentPage = (bu4Modal.currentPage-1 || 1)">
<i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
<li *ngFor="let item of bu4Modal.page">
<a class="page-link" href="javascript:void(0);" [class.active]="item==bu4Modal.currentPage"
(click)="bu4Modal.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)="bu4Modal.currentPage = (bu4Modal.currentPage > bu4Modal.page.length-1 ? bu4Modal.currentPage: bu4Modal.currentPage+1 )">
<i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
</a>
</li>
</ul>
</nav>
<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" *ngIf="currentModal=='add'" <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">
ย้อนกลับ
</button>
<button type="button" *ngIf="currentModal=='edit'"
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"> data-hs-overlay="#sub-department-two-modal">
ย้อนกลับ ย้อนกลับ
......
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