Commit ae496939 by sawit

เพิ่มทะเบียนตำแหน่ง

parents 897a1cdb a3df138d
......@@ -192,7 +192,6 @@ export class ArticleManageComponent {
ngOnInit(): void {
this.getArticle();
this.itemsList
this.updateMinDate();
}
......
......@@ -42,6 +42,31 @@ export const admin: Routes = [
import('./company-department/company-department.component').then((m) => m.CompanyDepartmentComponent),
},
{
path: 'country-registration',
loadComponent: () =>
import('./company-department/country-registration/country-registration.component').then((m) => m.CountryRegistrationComponent),
},
{
path: 'category-company',
loadComponent: () =>
import('./company-department/category-company/category-company.component').then((m) => m.CategoryCompanyComponent),
},
{
path: 'degree-manage',
loadComponent: () =>
import('./company-department/degree-manage/degree-manage.component').then((m) => m.DegreeManageComponent),
},
{
path: 'job-types',
loadComponent: () =>
import('./company-department/job-type/job-type.component').then((m) => m.JobTypeComponent),
},
{
path: 'provinces',
loadComponent: () =>
import('./company-department/province/province.component').then((m) => m.ProvinceComponent),
},
{
path: 'admin-manage',
loadComponent: () =>
import('./admin-manage/admin-manage.component').then((m) => m.AdminManageComponent),
......
<app-page-header [title]="'จัดการทะเบียนประเภท'" [activeTitle]="'ผู้ดูแลระบบ'"
[title1]="'จัดการทะเบียนประเภท'"></app-page-header>
<div class="grid grid-cols-12 gap-6">
<div class="xl:col-span-12 col-span-12">
<div class="box">
<div class="box-header justify-between">
<div class="box-title">
{{ 'All List' | translate}} <span
class="badge bg-light text-default rounded-full ms-1 text-[0.75rem] align-middle">{{itemsList.length}}</span>
</div>
<div class="flex flex-wrap gap-2">
<a href="javascript:void(0);" class="hs-dropdown-toggle ti-btn ti-btn-primary-full me-2" (click)="new()"
data-hs-overlay="#modal-detail"><i class="ri-add-line font-semibold align-middle"></i>{{ 'Create' |
translate}}
</a>
<a href="javascript:void(0);" class="hs-dropdown-toggle ti-btn ti-btn-danger-full me-2" *ngIf="someSelected"
(click)="deleteSelect()"><i class="ri-delete-bin-line font-semibold align-middle"></i>{{ 'Delete' |
translate}}
</a>
<div>
<input class="form-control form-control" type="text" placeholder="ค้นหาประเภท"
aria-label=".form-control-sm example" [(ngModel)]='searchTerm'>
</div>
</div>
</div>
<div class="box-body">
<div class="table-responsive">
<table class="table whitespace-nowrap min-w-full ti-custom-table-hover">
<thead>
<tr class="border-b border-defaultborder">
<th scope="col" class="!text-start">
<input class="form-check-input check-all" type="checkbox" id="all-products"
(change)="toggleAll($event)" [checked]="allSelected" aria-label="...">
</th>
<th scope="col" class="text-start">{{ 'Category ID' | translate}}</th>
<th scope="col" class="text-start">{{ 'Description(TH)' | translate}}</th>
<th scope="col" class="text-start">{{ 'Description(ENG)' | translate}}</th>
<th scope="col" class="text-start">{{ 'Action' | translate}}</th>
<th scope="col" class="text-start"></th>
</tr>
</thead>
<tbody>
@if (filterList.length > 0) {
@for(item of filterList;track filterList){
<tr class="border border-defaultborder dark:border-defaultborder/10">
<td class="product-checkbox"><input class="form-check-input" type="checkbox"
[checked]="selectedItems.get(item.categoryId)" (change)="onCheckboxChange(item.categoryId)"
aria-label="..." value="">
</td>
<td>
<div>
<span class="block">{{item.categoryId}}</span>
</div>
</td>
<td>
<div>
<span>{{item.thName}}</span>
</div>
</td>
<td>
<div>
<span>{{item.engName}}</span>
</div>
</td>
<td>
<div class="flex flex-row items-center !gap-2 ">
<a aria-label="anchor" (click)="view(item)" data-hs-overlay="#modal-detail"
class="ti-btn ti-btn-wave !gap-0 !m-0 bg-info/10 text-info hover:bg-info hover:text-white hover:border-info"><i
class="ri-pencil-line"></i></a>
<a aria-label="anchor" href="javascript:void(0);" (click)="deletecategory(item)"
class="ti-btn ti-btn-wave product-btn !gap-0 !m-0 bg-danger/10 text-danger hover:bg-danger hover:text-white hover:border-danger"><i
class="ri-delete-bin-line"></i></a>
</div>
</td>
</tr>
}
} @else {
<tr>
<td [attr.colspan]="6" class="text-center py-4">
<ng-container *ngIf="itemsList.length === 0 && !searchTerm">
<p>กำลังโหลดข้อมูล หรือไม่มีข้อมูลเลย...</p>
</ng-container>
<ng-container *ngIf="itemsList.length > 0 && filterList.length === 0 && searchTerm">
<p>ไม่พบข้อมูลที่ค้นหา...</p>
</ng-container>
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
<div class="box-footer">
<div class="flex items-center flex-wrap overflow-auto" *ngIf="filterList.length > 0">
<div class="mb-2 sm:mb-0">
<div>
{{'Showing' | translate}} {{filterList.length}} {{'entries'
| translate}} <i class="bi bi-arrow-right ms-2 font-semibold"></i>
</div>
</div>
<div class="ms-auto">
<nav aria-label="Page navigation">
<ul class="ti-pagination mb-0">
<li *ngIf="pageIndex>0" class="page-item {{pageIndex==0 ? 'disabled' : ''}}"><a
class="page-link px-3 py-[0.375rem] cursor-pointer"
(click)="pageIndex = pageIndex-1;updatePagedItems()">{{'Previous' | translate}}</a></li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
*ngIf="pageIndex-1>0" (click)="pageIndex = pageIndex-2;updatePagedItems()">{{pageIndex-1}}</a>
</li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
*ngIf="pageIndex>0 && ((pageIndex-1)*10 < (searchTerm == '' ? itemsList.length : filterList.length))"
(click)="pageIndex = pageIndex-1;updatePagedItems()">{{pageIndex}}</a></li>
<li class="page-item"><a class="page-link active px-3 py-[0.375rem]"
href="javascript:void(0);">{{pageIndex +1}}</a>
</li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
*ngIf="(pageIndex+1)*10 < (searchTerm == '' ? itemsList.length : filterList.length)"
(click)="pageIndex = pageIndex+1;updatePagedItems()">{{pageIndex +2}}</a></li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
*ngIf="(pageIndex+2)*10 < (searchTerm == '' ? itemsList.length : filterList.length)"
(click)="pageIndex = pageIndex+2;updatePagedItems()">{{pageIndex +3}}</a></li>
<li *ngIf="(pageIndex+1)*10 < (searchTerm == '' ? itemsList.length : filterList.length)"
class="page-item"><a class="page-link px-3 py-[0.375rem] cursor-pointer"
(click)="pageIndex = pageIndex+1;updatePagedItems()">{{'Next' |
translate}}</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="modal-detail" class="hs-overlay hidden ti-modal [--overlay-backdrop:static]">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out">
<div class="ti-modal-content">
<div class="ti-modal-header">
<h6 class="modal-title text-[1rem] font-semibold text-defaulttextcolor" id="mail-ComposeLabel">
{{ (modalStatus == 'add' ? ('Create' | translate) : ('Edit' | translate)) + ' ' + ('Category' | translate) }}
</h6>
<button type="button" class="hs-dropdown-toggle !text-[1rem] !font-semibold !text-defaulttextcolor"
data-hs-overlay="#modal-detail" #closeModal>
<span class="sr-only">{{'Close' | translate}}</span>
<i class="ri-close-line"></i>
</button>
</div>
<div class="ti-modal-body px-4">
<div class="grid grid-cols-12 gap-4">
<div class="xl:col-span-12 col-span-12">
<label for="deal-title" class="form-label">{{'Category ID' | translate}}</label>
<input type="text" class="form-control" [ngClass]="{ '!bg-input-readonly': modalStatus === 'edit' }"
id="deal-title" placeholder="" [(ngModel)]="category.categoryId" [readonly]="modalStatus === 'edit'">
<div class="text-danger" *ngIf="!category.categoryId">
{{'Please fill in information' | translate}}
</div>
</div>
<div class="xl:col-span-6 col-span-12">
<label for="deal-title" class="form-label">{{'Description(TH)' | translate}}</label>
<input type="text" class="form-control" id="deal-title" placeholder=""
[(ngModel)]="category.thName">
<div class="text-danger" *ngIf="!category.thName">
{{'Please fill in information' | translate}}
</div>
</div>
<div class="xl:col-span-6 col-span-12">
<label for="deal-title" class="form-label">{{'Description(ENG)' | translate}}</label>
<input type="text" class="form-control" id="deal-title" placeholder="" [(ngModel)]="category.engName">
<div class="text-danger" *ngIf="!category.engName">
{{'Please fill in information' | translate}}
</div>
</div>
</div>
</div>
<div class="ti-modal-footer">
<button type="button" class="hs-dropdown-toggle ti-btn ti-btn-light align-middle"
data-hs-overlay="#modal-detail">
{{'Cancel' | translate}}
</button>
<button type="button" (click)="save()" [class.ti-btn-disabled]="!category.categoryId||!category.thName||!category.engName"
[disabled]="!category.categoryId||!category.thName||!category.engName" class="ti-btn bg-primary text-white !font-medium">{{'Save' |
translate}}</button>
</div>
</div>
</div>
</div>
\ No newline at end of file
/* tslint:disable:no-unused-variable */
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { CategoryCompanyComponent } from './category-company.component';
describe('CategoryCompanyComponent', () => {
let component: CategoryCompanyComponent;
let fixture: ComponentFixture<CategoryCompanyComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ CategoryCompanyComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(CategoryCompanyComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, ElementRef, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { TranslateModule, TranslateService } from '@ngx-translate/core';
import { MatDialog } from '@angular/material/dialog';
import swal from 'sweetalert';
import { CommonModule } from '@angular/common';
import { SharedModule } from '../../../../shared/shared.module';
import { NgSelectModule } from '@ng-select/ng-select';
import { FormsModule } from '@angular/forms';
import { MatPaginator } from '@angular/material/paginator';
import { FileUploadModule } from 'ng2-file-upload';
import { PdpaConfigComponent } from '../../pdpa-manage/pdpa-config/pdpa-config.component';
import { QuillModule } from 'ngx-quill';
import { CategoryModel } from '../../../models/category.model';
import { CategoryCompanyService } from '../../../services/category-company.service';
@Component({
standalone: true,
imports: [
CommonModule,
SharedModule,
TranslateModule,
NgSelectModule,
FormsModule,
MatPaginator,
FileUploadModule,
PdpaConfigComponent,
QuillModule
],
selector: 'app-category-company',
templateUrl: './category-company.component.html',
styleUrls: ['./category-company.component.css']
})
export class CategoryCompanyComponent implements OnInit {
@ViewChild('closeModal') public childModal?: ElementRef;
@ViewChild('modalDetail') modalDetail!: TemplateRef<any>;
currentTab = 1
allSelected = false;
someSelected = false;
itemsList: CategoryModel[] = []
filterList: CategoryModel[] = []
category: CategoryModel = new CategoryModel()
selectedItems = new Map<string, boolean>();
pageIndex = 0;
modalStatus: "add" | "edit" = "add"
isSaving = false;
get searchTerm(): string {
return this._searchTerm;
}
set searchTerm(val: string) {
this.pageIndex = 0;
this.allSelected = false
this._searchTerm = val;
if (val != '') {
this.filterList = this.filter(val);
} else {
this.updatePagedItems()
}
}
_searchTerm = "";
constructor(private categoryCompanyService: CategoryCompanyService, public translate: TranslateService, private modal: MatDialog) {
}
ngOnInit(): void {
this.categoryCompanyService.list().subscribe(res => {
this.itemsList = res.map(item => new CategoryModel(item, this.translate));
this.filterList = [...this.itemsList];
});
}
filter(v: string) {
return this.itemsList?.filter(
(x) =>
x.categoryId?.toLowerCase().indexOf(v.toLowerCase()) !== -1 ||
x.thName?.toLowerCase().indexOf(v.toLowerCase()) !== -1 ||
x.engName?.toLowerCase().indexOf(v.toLowerCase()) !== -1
);
}
new() {
this.modalStatus = 'add'
this.category = new CategoryModel();
}
view(item: CategoryModel) {
this.modalStatus = 'edit';
this.category = new CategoryModel(item, this.translate);
}
save() {
swal({
title: "Are you sure?",
text: "คุณต้องการบันทึกหรือไม่",
icon: "warning",
dangerMode: false,
buttons: ["Cancel", "Confirm"],
})
.then((willDelete: any) => {
if (willDelete) {
if (this.modalStatus == 'add') {
console.log(this.category);
this.categoryCompanyService.post(this.category).subscribe(result => {
swal("Save Success!!", "บันทึกประเภทสำเร็จ", "success");
this.ngOnInit()
this.childModal?.nativeElement.click()
})
} else if (this.modalStatus == 'edit') {
const respone = new CategoryModel(this.category);
this.categoryCompanyService.post(respone).subscribe(result => {
console.log(result)
swal("Update Success!!", "บันทึกประเภทสำเร็จ", "success");
this.ngOnInit()
this.childModal?.nativeElement.click()
})
}
}
});
}
deletecategory(item: CategoryModel) {
const versionText = `${this.translate.instant('category')}: ${item.thName}`;
swal({
title: "Are you sure?",
text: `Confirm to delete :\n${versionText}\!`,
icon: "warning",
dangerMode: true,
buttons: ["Cancel", "Yes,Delete it!"],
}).then((willDelete: any) => {
if (willDelete) {
const res = new CategoryModel(item)
this.categoryCompanyService.delete(res).subscribe(result => {
swal("Delete Success!!", "ลบข้อมูลสำเร็จ", "success");
this.ngOnInit();
});
}
});
}
deleteSelect() {
let categoryConfig = '';
this.selectedItems.forEach((isSelected, res) => {
if (isSelected) {
const category = this.itemsList.find(category => category.categoryId === res) as CategoryModel;
if (category) {
categoryConfig += `${this.translate.instant('category')}: ${category.thName}\n`;
}
}
});
swal({
title: "Are you sure?",
text: categoryConfig,
icon: "warning",
dangerMode: true,
buttons: ["Cancel", "Yes, Delete it!"],
})
.then((willDelete: any) => {
if (willDelete) {
this.selectedItems.forEach((isSelected, res) => {
if (isSelected) {
const category = this.itemsList.find(category => category.categoryId === res);
if (category) {
const newcategory = new CategoryModel(category)
this.categoryCompanyService.delete(newcategory).subscribe(result => {
swal("Delete Success!!", "ลบข้อมูลที่เลือกสำเร็จ", "success");
this.ngOnInit();
});
}
}
});
}
});
}
updatePagedItems() {
const startIndex = this.pageIndex * 10;
const endIndex = startIndex + 10;
this.filterList = this.itemsList.slice(startIndex, endIndex);
}
toggleAll(event: any) {
this.allSelected = event.target.checked;
this.selectedItems.clear();
this.itemsList.forEach(item => {
this.selectedItems.set(item.categoryId, this.allSelected);
});
this.someSelected = this.itemsList.some(item => this.selectedItems.get(item.categoryId));
}
onCheckboxChange(categoryId: string) {
const isSelected = this.selectedItems.get(categoryId) || false;
this.selectedItems.set(categoryId, !isSelected);
this.allSelected = this.itemsList.every(item => this.selectedItems.get(item.categoryId));
this.someSelected = this.itemsList.some(item => this.selectedItems.get(item.categoryId));
}
filterEmp(empId: string) {
this.category = this.itemsList.filter(e => e.categoryId == empId)[0]
}
}
<app-page-header [title]="'จัดการทะเบียนประเทศ'" [activeTitle]="'ผู้ดูแลระบบ'"
[title1]="'จัดการทะเบียนประเทศ'"></app-page-header>
<div class="grid grid-cols-12 gap-6">
<div class="xl:col-span-12 col-span-12">
<div class="box">
<div class="box-header justify-between">
<div class="box-title">
{{ 'All List' | translate}} <span
class="badge bg-light text-default rounded-full ms-1 text-[0.75rem] align-middle">{{itemsList.length}}</span>
</div>
<div class="flex flex-wrap gap-2">
<a href="javascript:void(0);" class="hs-dropdown-toggle ti-btn ti-btn-primary-full me-2" (click)="new()"
data-hs-overlay="#modal-detail"><i class="ri-add-line font-semibold align-middle"></i>{{ 'Add' |
translate}}
</a>
<a href="javascript:void(0);" class="hs-dropdown-toggle ti-btn ti-btn-danger-full me-2" *ngIf="someSelected"
(click)="deleteSelect()"><i class="ri-delete-bin-line font-semibold align-middle"></i>{{ 'Delete' |
translate}}
</a>
<div>
<input class="form-control form-control" type="text" placeholder="ค้นหาประเทศ"
aria-label=".form-control-sm example" [(ngModel)]='searchTerm'>
</div>
</div>
</div>
<div class="box-body">
<div class="table-responsive">
<table class="table whitespace-nowrap min-w-full ti-custom-table-hover">
<thead>
<tr class="border-b border-defaultborder">
<th scope="col" class="!text-start">
<input class="form-check-input check-all" type="checkbox" id="all-products"
(change)="toggleAll($event)" [checked]="allSelected" aria-label="...">
</th>
<th scope="col" class="text-start">{{ 'Country ID' | translate}}</th>
<th scope="col" class="text-start">{{ 'Description(TH)' | translate}}</th>
<th scope="col" class="text-start">{{ 'Description(ENG)' | translate}}</th>
<th scope="col" class="text-start">{{ 'Action' | translate}}</th>
<th scope="col" class="text-start"></th>
</tr>
</thead>
<tbody>
@if (filterList.length > 0) {
@for(item of filterList;track filterList){
<tr class="border border-defaultborder dark:border-defaultborder/10">
<td class="product-checkbox"><input class="form-check-input" type="checkbox"
[checked]="selectedItems.get(item.countryId)" (change)="onCheckboxChange(item.countryId)"
aria-label="..." value="">
</td>
<td>
<div>
<span class="block">{{item.countryId}}</span>
</div>
</td>
<td>
<div>
<span>{{item.thName}}</span>
</div>
</td>
<td>
<div>
<span>{{item.engName}}</span>
</div>
</td>
<td>
<div class="flex flex-row items-center !gap-2 ">
<a aria-label="anchor" (click)="view(item)" data-hs-overlay="#modal-detail"
class="ti-btn ti-btn-wave !gap-0 !m-0 bg-info/10 text-info hover:bg-info hover:text-white hover:border-info"><i
class="ri-pencil-line"></i></a>
<a aria-label="anchor" href="javascript:void(0);" (click)="deleteCountry(item)"
class="ti-btn ti-btn-wave product-btn !gap-0 !m-0 bg-danger/10 text-danger hover:bg-danger hover:text-white hover:border-danger"><i
class="ri-delete-bin-line"></i></a>
</div>
</td>
</tr>
}
} @else {
<tr>
<td [attr.colspan]="6" class="text-center py-4">
<ng-container *ngIf="itemsList.length === 0 && !searchTerm">
<p>กำลังโหลดข้อมูล หรือไม่มีข้อมูลเลย...</p>
</ng-container>
<ng-container *ngIf="itemsList.length > 0 && filterList.length === 0 && searchTerm">
<p>ไม่พบข้อมูลที่ค้นหา...</p>
</ng-container>
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
<div class="box-footer">
<div class="flex items-center flex-wrap overflow-auto" *ngIf="filterList.length > 0">
<div class="mb-2 sm:mb-0">
<div>
{{'Showing' | translate}} {{filterList.length}} {{'entries'
| translate}} <i class="bi bi-arrow-right ms-2 font-semibold"></i>
</div>
</div>
<div class="ms-auto">
<nav aria-label="Page navigation">
<ul class="ti-pagination mb-0">
<li *ngIf="pageIndex>0" class="page-item {{pageIndex==0 ? 'disabled' : ''}}"><a
class="page-link px-3 py-[0.375rem] cursor-pointer"
(click)="pageIndex = pageIndex-1;updatePagedItems()">{{'Previous' | translate}}</a></li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
*ngIf="pageIndex-1>0" (click)="pageIndex = pageIndex-2;updatePagedItems()">{{pageIndex-1}}</a>
</li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
*ngIf="pageIndex>0 && ((pageIndex-1)*10 < (searchTerm == '' ? itemsList.length : filterList.length))"
(click)="pageIndex = pageIndex-1;updatePagedItems()">{{pageIndex}}</a></li>
<li class="page-item"><a class="page-link active px-3 py-[0.375rem]"
href="javascript:void(0);">{{pageIndex +1}}</a>
</li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
*ngIf="(pageIndex+1)*10 < (searchTerm == '' ? itemsList.length : filterList.length)"
(click)="pageIndex = pageIndex+1;updatePagedItems()">{{pageIndex +2}}</a></li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
*ngIf="(pageIndex+2)*10 < (searchTerm == '' ? itemsList.length : filterList.length)"
(click)="pageIndex = pageIndex+2;updatePagedItems()">{{pageIndex +3}}</a></li>
<li *ngIf="(pageIndex+1)*10 < (searchTerm == '' ? itemsList.length : filterList.length)"
class="page-item"><a class="page-link px-3 py-[0.375rem] cursor-pointer"
(click)="pageIndex = pageIndex+1;updatePagedItems()">{{'Next' |
translate}}</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="modal-detail" class="hs-overlay hidden ti-modal [--overlay-backdrop:static]">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out">
<div class="ti-modal-content">
<div class="ti-modal-header">
<h6 class="modal-title text-[1rem] font-semibold text-defaulttextcolor" id="mail-ComposeLabel">
{{ (modalStatus == 'add' ? ('Create' | translate) : ('Edit' | translate)) + ' ' + ('Country' | translate) }}
</h6>
<button type="button" class="hs-dropdown-toggle !text-[1rem] !font-semibold !text-defaulttextcolor"
data-hs-overlay="#modal-detail" #closeModal>
<span class="sr-only">{{'Close' | translate}}</span>
<i class="ri-close-line"></i>
</button>
</div>
<div class="ti-modal-body px-4">
<div class="grid grid-cols-12 gap-4">
<div class="xl:col-span-12 col-span-12">
<label for="deal-title" class="form-label">{{'Country ID' | translate}}</label>
<input type="text" class="form-control" [ngClass]="{ '!bg-input-readonly': modalStatus === 'edit' }"
id="deal-title" placeholder="" [(ngModel)]="country.countryId" [readonly]="modalStatus === 'edit'">
<div class="text-danger" *ngIf="!country.countryId">
{{'Please fill in information' | translate}}
</div>
</div>
<div class="xl:col-span-6 col-span-12">
<label for="deal-title" class="form-label">{{'Description(TH)' | translate}}</label>
<input type="text" class="form-control" id="deal-title" placeholder=""
[(ngModel)]="country.thName">
<div class="text-danger" *ngIf="!country.thName">
{{'Please fill in information' | translate}}
</div>
</div>
<div class="xl:col-span-6 col-span-12">
<label for="deal-title" class="form-label">{{'Description(ENG)' | translate}}</label>
<input type="text" class="form-control" id="deal-title" placeholder="" [(ngModel)]="country.engName">
<div class="text-danger" *ngIf="!country.engName">
{{'Please fill in information' | translate}}
</div>
</div>
</div>
</div>
<div class="ti-modal-footer">
<button type="button" class="hs-dropdown-toggle ti-btn ti-btn-light align-middle"
data-hs-overlay="#modal-detail">
{{'Cancel' | translate}}
</button>
<button type="button" (click)="save()" [class.ti-btn-disabled]="!country.countryId||!country.thName||!country.engName"
[disabled]="!country.countryId||!country.thName||!country.engName" class="ti-btn bg-primary text-white !font-medium">{{'Save' |
translate}}</button>
</div>
</div>
</div>
</div>
\ No newline at end of file
/* tslint:disable:no-unused-variable */
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { CountryRegistrationComponent } from './country-registration.component';
describe('CountryRegistrationComponent', () => {
let component: CountryRegistrationComponent;
let fixture: ComponentFixture<CountryRegistrationComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ CountryRegistrationComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(CountryRegistrationComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { CommonModule } from "@angular/common";
import { ChangeDetectionStrategy, Component, ElementRef, TemplateRef, ViewChild } from '@angular/core';
import { NgSelectModule } from "@ng-select/ng-select";
import { TranslateModule, TranslateService } from "@ngx-translate/core";
import { FormsModule } from "@angular/forms";
import swal from 'sweetalert';
import { MatPaginator, PageEvent } from "@angular/material/paginator";
import { FileUploadModule } from 'ng2-file-upload';
import { FileItem, FileUploader, ParsedResponseHeaders } from "ng2-file-upload";
import { Router } from "@angular/router";
import { QuillModule } from "ngx-quill";
import { MatDialog } from "@angular/material/dialog";
import { SharedModule } from "../../../../shared/shared.module";
import { PdpaConfigComponent } from "../../pdpa-manage/pdpa-config/pdpa-config.component";
import { MyPdpaModel, PdpaModel } from "../../../models/pdpa.model";
import { CountryService } from "../../../services/country.service";
import { CountryModel } from "../../../models/country.model";
@Component({
selector: 'app-country-registration',
standalone: true,
imports: [
CommonModule,
SharedModule,
TranslateModule,
NgSelectModule,
FormsModule,
MatPaginator,
FileUploadModule,
PdpaConfigComponent,
QuillModule
],
templateUrl: './country-registration.component.html',
styleUrl: './country-registration.component.css'
})
export class CountryRegistrationComponent {
@ViewChild('closeModal') public childModal?: ElementRef;
@ViewChild('modalDetail') modalDetail!: TemplateRef<any>;
currentTab = 1
allSelected = false;
someSelected = false;
itemsList: CountryModel[] = []
filterList: CountryModel[] = []
country: CountryModel = new CountryModel()
selectedItems = new Map<string, boolean>();
pageIndex = 0;
modalStatus: "add" | "edit" = "add"
isSaving = false;
get searchTerm(): string {
return this._searchTerm;
}
set searchTerm(val: string) {
this.pageIndex = 0;
this.allSelected = false
this._searchTerm = val;
if (val != '') {
this.filterList = this.filter(val);
} else {
this.updatePagedItems()
}
}
_searchTerm = "";
constructor(private countryService: CountryService, public translate: TranslateService, private modal: MatDialog) {
}
ngOnInit(): void {
this.countryService.list().subscribe(res => {
this.itemsList = res.map(item => new CountryModel(item, this.translate));
this.filterList = [...this.itemsList];
});
}
filter(v: string) {
return this.itemsList?.filter(
(x) =>
x.countryId?.toLowerCase().indexOf(v.toLowerCase()) !== -1 ||
x.thName?.toLowerCase().indexOf(v.toLowerCase()) !== -1 ||
x.engName?.toLowerCase().indexOf(v.toLowerCase()) !== -1
);
}
new() {
this.modalStatus = 'add'
this.country = new CountryModel();
}
view(item: CountryModel) {
this.modalStatus = 'edit';
this.country = new CountryModel(item, this.translate);
}
save() {
swal({
title: "Are you sure?",
text: "คุณต้องการบันทึกหรือไม่",
icon: "warning",
dangerMode: false,
buttons: ["Cancel", "Confirm"],
})
.then((willDelete: any) => {
if (willDelete) {
if (this.modalStatus == 'add') {
console.log(this.country);
this.countryService.post(this.country).subscribe(result => {
swal("Save Success!!", "บันทึกประเทศสำเร็จ", "success");
this.ngOnInit()
this.childModal?.nativeElement.click()
})
} else if (this.modalStatus == 'edit') {
const respone = new CountryModel(this.country);
this.countryService.post(respone).subscribe(result => {
console.log(result)
swal("Update Success!!", "บันทึกประเทศสำเร็จ", "success");
this.ngOnInit()
this.childModal?.nativeElement.click()
})
}
}
});
}
deleteCountry(item: CountryModel) {
const versionText = `${this.translate.instant('Country')}: ${item.thName}`;
swal({
title: "Are you sure?",
text: `Confirm to delete :\n${versionText}\!`,
icon: "warning",
dangerMode: true,
buttons: ["Cancel", "Yes,Delete it!"],
}).then((willDelete: any) => {
if (willDelete) {
const res = new CountryModel(item)
console.log(res);
this.countryService.delete(res).subscribe(result => {
swal("Delete Success!!", "ลบข้อมูลสำเร็จ", "success");
this.ngOnInit();
});
}
});
}
deleteSelect() {
let countryConfig = '';
this.selectedItems.forEach((isSelected, res) => {
if (isSelected) {
const country = this.itemsList.find(country => country.countryId === res) as CountryModel;
if (country) {
countryConfig += `${this.translate.instant('Country')}: ${country.thName}\n`;
}
}
});
swal({
title: "Are you sure?",
text: countryConfig,
icon: "warning",
dangerMode: true,
buttons: ["Cancel", "Yes, Delete it!"],
})
.then((willDelete: any) => {
if (willDelete) {
this.selectedItems.forEach((isSelected, res) => {
if (isSelected) {
const country = this.itemsList.find(country => country.countryId === res);
if (country) {
const newCountry = new CountryModel(country)
console.log(newCountry);
this.countryService.delete(newCountry).subscribe(result => {
swal("Delete Success!!", "ลบข้อมูลที่เลือกสำเร็จ", "success");
this.ngOnInit();
});
}
}
});
}
});
}
updatePagedItems() {
const startIndex = this.pageIndex * 10;
const endIndex = startIndex + 10;
this.filterList = this.itemsList.slice(startIndex, endIndex);
}
toggleAll(event: any) {
this.allSelected = event.target.checked;
this.selectedItems.clear();
this.itemsList.forEach(item => {
this.selectedItems.set(item.countryId, this.allSelected);
});
this.someSelected = this.itemsList.some(item => this.selectedItems.get(item.countryId));
}
onCheckboxChange(countryId: string) {
const isSelected = this.selectedItems.get(countryId) || false;
this.selectedItems.set(countryId, !isSelected);
this.allSelected = this.itemsList.every(item => this.selectedItems.get(item.countryId));
this.someSelected = this.itemsList.some(item => this.selectedItems.get(item.countryId));
}
filterEmp(empId: string) {
this.country = this.itemsList.filter(e => e.countryId == empId)[0]
}
}
\ No newline at end of file
<app-page-header [title]="'ทะเบียนระดับวุฒิการศึกษา'" [activeTitle]="'ผู้ดูแลระบบ'"
[title1]="'ทะเบียนระดับวุฒิการศึกษา'"></app-page-header>
<div class="grid grid-cols-12 gap-6">
<div class="xl:col-span-12 col-span-12">
<div class="box">
<div class="box-header justify-between">
<div class="box-title">
{{ 'All List' | translate}} <span
class="badge bg-light text-default rounded-full ms-1 text-[0.75rem] align-middle">{{itemsList.length}}</span>
</div>
<div class="flex flex-wrap gap-2">
<a href="javascript:void(0);" class="hs-dropdown-toggle ti-btn ti-btn-primary-full me-2" (click)="new()"
data-hs-overlay="#modal-detail"><i class="ri-add-line font-semibold align-middle"></i>{{ 'Create' |
translate}}
</a>
<a href="javascript:void(0);" class="hs-dropdown-toggle ti-btn ti-btn-danger-full me-2" *ngIf="someSelected"
(click)="deleteSelect()"><i class="ri-delete-bin-line font-semibold align-middle"></i>{{ 'Delete' |
translate}}
</a>
<div>
<input class="form-control form-control" type="text" placeholder="ค้นหาระดับการศึกษา"
aria-label=".form-control-sm example" [(ngModel)]='searchTerm'>
</div>
</div>
</div>
<div class="box-body">
<div class="table-responsive">
<table class="table whitespace-nowrap min-w-full ti-custom-table-hover">
<thead>
<tr class="border-b border-defaultborder">
<th scope="col" class="!text-start">
<input class="form-check-input check-all" type="checkbox" id="all-products"
(change)="toggleAll($event)" [checked]="allSelected" aria-label="...">
</th>
<th scope="col" class="text-start">{{ 'Degree ID' | translate}}</th>
<th scope="col" class="text-start">{{ 'Description(TH)' | translate}}</th>
<th scope="col" class="text-start">{{ 'Description(ENG)' | translate}}</th>
<!-- <th scope="col" class="text-start">{{ 'Higher' | translate}}</th> -->
<th scope="col" class="text-start">{{ 'Action' | translate}}</th>
<th scope="col" class="text-start"></th>
</tr>
</thead>
<tbody>
@if (filterList.length > 0) {
@for(item of filterList;track filterList){
<tr class="border border-defaultborder dark:border-defaultborder/10">
<td class="product-checkbox"><input class="form-check-input" type="checkbox"
[checked]="selectedItems.get(item.degreeId)" (change)="onCheckboxChange(item.degreeId)"
aria-label="..." value="">
</td>
<td>
<div>
<span class="block">{{item.degreeId}}</span>
</div>
</td>
<td>
<div>
<span>{{item.thName}}</span>
</div>
</td>
<td>
<div>
<span>{{item.engName}}</span>
</div>
</td>
<!-- <td>
<div>
<span>{{item.higher}}</span>
</div>
</td> -->
<td>
<div class="flex flex-row items-center !gap-2 ">
<a aria-label="anchor" (click)="view(item)" data-hs-overlay="#modal-detail"
class="ti-btn ti-btn-wave !gap-0 !m-0 bg-info/10 text-info hover:bg-info hover:text-white hover:border-info"><i
class="ri-pencil-line"></i></a>
<a aria-label="anchor" href="javascript:void(0);" (click)="deletedegree(item)"
class="ti-btn ti-btn-wave product-btn !gap-0 !m-0 bg-danger/10 text-danger hover:bg-danger hover:text-white hover:border-danger"><i
class="ri-delete-bin-line"></i></a>
</div>
</td>
</tr>
}
} @else {
<tr>
<td [attr.colspan]="6" class="text-center py-4">
<ng-container *ngIf="itemsList.length === 0 && !searchTerm">
<p>กำลังโหลดข้อมูล หรือไม่มีข้อมูลเลย...</p>
</ng-container>
<ng-container *ngIf="itemsList.length > 0 && filterList.length === 0 && searchTerm">
<p>ไม่พบข้อมูลที่ค้นหา...</p>
</ng-container>
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
<div class="box-footer">
<div class="flex items-center flex-wrap overflow-auto" *ngIf="filterList.length > 0">
<div class="mb-2 sm:mb-0">
<div>
{{'Showing' | translate}} {{filterList.length}} {{'entries'
| translate}} <i class="bi bi-arrow-right ms-2 font-semibold"></i>
</div>
</div>
<div class="ms-auto">
<nav aria-label="Page navigation">
<ul class="ti-pagination mb-0">
<li *ngIf="pageIndex>0" class="page-item {{pageIndex==0 ? 'disabled' : ''}}"><a
class="page-link px-3 py-[0.375rem] cursor-pointer"
(click)="pageIndex = pageIndex-1;updatePagedItems()">{{'Previous' | translate}}</a></li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
*ngIf="pageIndex-1>0" (click)="pageIndex = pageIndex-2;updatePagedItems()">{{pageIndex-1}}</a>
</li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
*ngIf="pageIndex>0 && ((pageIndex-1)*10 < (searchTerm == '' ? itemsList.length : filterList.length))"
(click)="pageIndex = pageIndex-1;updatePagedItems()">{{pageIndex}}</a></li>
<li class="page-item"><a class="page-link active px-3 py-[0.375rem]"
href="javascript:void(0);">{{pageIndex +1}}</a>
</li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
*ngIf="(pageIndex+1)*10 < (searchTerm == '' ? itemsList.length : filterList.length)"
(click)="pageIndex = pageIndex+1;updatePagedItems()">{{pageIndex +2}}</a></li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
*ngIf="(pageIndex+2)*10 < (searchTerm == '' ? itemsList.length : filterList.length)"
(click)="pageIndex = pageIndex+2;updatePagedItems()">{{pageIndex +3}}</a></li>
<li *ngIf="(pageIndex+1)*10 < (searchTerm == '' ? itemsList.length : filterList.length)"
class="page-item"><a class="page-link px-3 py-[0.375rem] cursor-pointer"
(click)="pageIndex = pageIndex+1;updatePagedItems()">{{'Next' |
translate}}</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="modal-detail" class="hs-overlay hidden ti-modal [--overlay-backdrop:static]">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out">
<div class="ti-modal-content">
<div class="ti-modal-header">
<h6 class="modal-title text-[1rem] font-semibold text-defaulttextcolor" id="mail-ComposeLabel">
{{ (modalStatus == 'add' ? ('Create' | translate) : ('Edit' | translate)) + ' ' + ('Degree' | translate) }}
</h6>
<button type="button" class="hs-dropdown-toggle !text-[1rem] !font-semibold !text-defaulttextcolor"
data-hs-overlay="#modal-detail" #closeModal>
<span class="sr-only">{{'Close' | translate}}</span>
<i class="ri-close-line"></i>
</button>
</div>
<div class="ti-modal-body px-4">
<div class="grid grid-cols-12 gap-4">
<div class="xl:col-span-12 col-span-12">
<label for="deal-title" class="form-label">{{'Degree ID' | translate}}</label>
<input type="text" class="form-control" [ngClass]="{ '!bg-input-readonly': modalStatus === 'edit' }"
id="deal-title" placeholder="" [(ngModel)]="degree.degreeId" [readonly]="modalStatus === 'edit'">
<div class="text-danger" *ngIf="!degree.degreeId">
{{'Please fill in information' | translate}}
</div>
</div>
<div class="xl:col-span-6 col-span-12">
<label for="deal-title" class="form-label">{{'Description(TH)' | translate}}</label>
<input type="text" class="form-control" id="deal-title" placeholder=""
[(ngModel)]="degree.thName">
<div class="text-danger" *ngIf="!degree.thName">
{{'Please fill in information' | translate}}
</div>
</div>
<div class="xl:col-span-6 col-span-12">
<label for="deal-title" class="form-label">{{'Description(ENG)' | translate}}</label>
<input type="text" class="form-control" id="deal-title" placeholder="" [(ngModel)]="degree.engName">
<div class="text-danger" *ngIf="!degree.engName">
{{'Please fill in information' | translate}}
</div>
</div>
</div>
</div>
<div class="ti-modal-footer">
<button type="button" class="hs-dropdown-toggle ti-btn ti-btn-light align-middle"
data-hs-overlay="#modal-detail">
{{'Cancel' | translate}}
</button>
<button type="button" (click)="save()" [class.ti-btn-disabled]="!degree.degreeId||!degree.thName||!degree.engName"
[disabled]="!degree.degreeId||!degree.thName||!degree.engName" class="ti-btn bg-primary text-white !font-medium">{{'Save' |
translate}}</button>
</div>
</div>
</div>
</div>
\ No newline at end of file
/* tslint:disable:no-unused-variable */
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { DegreeManageComponent } from './degree-manage.component';
describe('DegreeManageComponent', () => {
let component: DegreeManageComponent;
let fixture: ComponentFixture<DegreeManageComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ DegreeManageComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(DegreeManageComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { CommonModule } from "@angular/common";
import { ChangeDetectionStrategy, Component, ElementRef, TemplateRef, ViewChild } from '@angular/core';
import { NgSelectModule } from "@ng-select/ng-select";
import { TranslateModule, TranslateService } from "@ngx-translate/core";
import { FormsModule } from "@angular/forms";
import swal from 'sweetalert';
import { MatPaginator, PageEvent } from "@angular/material/paginator";
import { FileUploadModule } from 'ng2-file-upload';
import { FileItem, FileUploader, ParsedResponseHeaders } from "ng2-file-upload";
import { Router } from "@angular/router";
import { QuillModule } from "ngx-quill";
import { MatDialog } from "@angular/material/dialog";
import { SharedModule } from "../../../../shared/shared.module";
import { PdpaConfigComponent } from "../../pdpa-manage/pdpa-config/pdpa-config.component";
import { MyPdpaModel, PdpaModel } from "../../../models/pdpa.model";
import { DegreeModel } from "../../../models/degree.model";
import { DegreeService } from "../../../services/degree.service";
@Component({
selector: 'app-degree-manage',
standalone: true,
imports: [
CommonModule,
SharedModule,
TranslateModule,
NgSelectModule,
FormsModule,
MatPaginator,
FileUploadModule,
PdpaConfigComponent,
QuillModule
],
templateUrl: './degree-manage.component.html',
styleUrl: './degree-manage.component.css'
})
export class DegreeManageComponent {
@ViewChild('closeModal') public childModal?: ElementRef;
@ViewChild('modalDetail') modalDetail!: TemplateRef<any>;
currentTab = 1
allSelected = false;
someSelected = false;
itemsList: DegreeModel[] = []
filterList: DegreeModel[] = []
degree: DegreeModel = new DegreeModel()
selectedItems = new Map<string, boolean>();
pageIndex = 0;
modalStatus: "add" | "edit" = "add"
isSaving = false;
get searchTerm(): string {
return this._searchTerm;
}
set searchTerm(val: string) {
this.pageIndex = 0;
this.allSelected = false
this._searchTerm = val;
if (val != '') {
this.filterList = this.filter(val);
} else {
this.updatePagedItems()
}
}
_searchTerm = "";
constructor(private degreeService: DegreeService, public translate: TranslateService, private modal: MatDialog) {
}
ngOnInit(): void {
this.degreeService.list().subscribe(res => {
this.itemsList = res.map(item => new DegreeModel(item, this.translate));
this.filterList = [...this.itemsList];
});
}
filter(v: string) {
return this.itemsList?.filter(
(x) =>
x.degreeId?.toLowerCase().indexOf(v.toLowerCase()) !== -1 ||
x.thName?.toLowerCase().indexOf(v.toLowerCase()) !== -1 ||
x.engName?.toLowerCase().indexOf(v.toLowerCase()) !== -1 ||
x.higher?.toLowerCase().indexOf(v.toLowerCase()) !== -1
);
}
new() {
this.modalStatus = 'add'
this.degree = new DegreeModel();
}
view(item: DegreeModel) {
this.modalStatus = 'edit';
this.degree = new DegreeModel(item, this.translate);
}
save() {
swal({
title: "Are you sure?",
text: "คุณต้องการบันทึกหรือไม่",
icon: "warning",
dangerMode: false,
buttons: ["Cancel", "Confirm"],
})
.then((willDelete: any) => {
if (willDelete) {
if (this.modalStatus == 'add') {
console.log(this.degree);
this.degreeService.post(this.degree).subscribe(result => {
swal("Save Success!!", "บันทึกระดับการศึกษาสำเร็จ", "success");
this.ngOnInit()
this.childModal?.nativeElement.click()
})
} else if (this.modalStatus == 'edit') {
const respone = new DegreeModel(this.degree);
this.degreeService.post(respone).subscribe(result => {
console.log(result)
swal("Update Success!!", "บันทึกระดับการศึกษาสำเร็จ", "success");
this.ngOnInit()
this.childModal?.nativeElement.click()
})
}
}
});
}
deletedegree(item: DegreeModel) {
const versionText = `${this.translate.instant('degree')}: ${item.thName}`;
swal({
title: "Are you sure?",
text: `Confirm to delete :\n${versionText}\!`,
icon: "warning",
dangerMode: true,
buttons: ["Cancel", "Yes,Delete it!"],
}).then((willDelete: any) => {
if (willDelete) {
const res = new DegreeModel(item)
console.log(res);
this.degreeService.delete(res).subscribe(result => {
swal("Delete Success!!", "ลบข้อมูลสำเร็จ", "success");
this.ngOnInit();
});
}
});
}
deleteSelect() {
let degreeConfig = '';
this.selectedItems.forEach((isSelected, res) => {
if (isSelected) {
const degree = this.itemsList.find(degree => degree.degreeId === res) as DegreeModel;
if (degree) {
degreeConfig += `${this.translate.instant('degree')}: ${degree.thName}\n`;
}
}
});
swal({
title: "Are you sure?",
text: degreeConfig,
icon: "warning",
dangerMode: true,
buttons: ["Cancel", "Yes, Delete it!"],
})
.then((willDelete: any) => {
if (willDelete) {
this.selectedItems.forEach((isSelected, res) => {
if (isSelected) {
const degree = this.itemsList.find(degree => degree.degreeId === res);
if (degree) {
const newdegree = new DegreeModel(degree)
console.log(newdegree);
this.degreeService.delete(newdegree).subscribe(result => {
swal("Delete Success!!", "ลบข้อมูลที่เลือกสำเร็จ", "success");
this.ngOnInit();
});
}
}
});
}
});
}
updatePagedItems() {
const startIndex = this.pageIndex * 10;
const endIndex = startIndex + 10;
this.filterList = this.itemsList.slice(startIndex, endIndex);
}
toggleAll(event: any) {
this.allSelected = event.target.checked;
this.selectedItems.clear();
this.itemsList.forEach(item => {
this.selectedItems.set(item.degreeId, this.allSelected);
});
this.someSelected = this.itemsList.some(item => this.selectedItems.get(item.degreeId));
}
onCheckboxChange(degreeId: string) {
const isSelected = this.selectedItems.get(degreeId) || false;
this.selectedItems.set(degreeId, !isSelected);
this.allSelected = this.itemsList.every(item => this.selectedItems.get(item.degreeId));
this.someSelected = this.itemsList.some(item => this.selectedItems.get(item.degreeId));
}
filterEmp(empId: string) {
this.degree = this.itemsList.filter(e => e.degreeId == empId)[0]
}
}
\ No newline at end of file
<app-page-header [title]="'จัดการประเภทงาน'" [activeTitle]="'ผู้ดูแลระบบ'" [title1]="'จัดการประเภทงาน'"></app-page-header>
<div class="grid grid-cols-12 gap-6">
<div class="xl:col-span-12 col-span-12">
<div class="box">
<div class="box-header justify-between">
<div class="box-title">
{{ 'All List' | translate}} <span
class="badge bg-light text-default rounded-full ms-1 text-[0.75rem] align-middle">{{itemsList.length}}</span>
</div>
<div class="flex flex-wrap gap-2">
<a href="javascript:void(0);" class="hs-dropdown-toggle ti-btn ti-btn-primary-full me-2" (click)="new()"
data-hs-overlay="#modal-detail"><i class="ri-add-line font-semibold align-middle"></i>{{ 'Create' |
translate}}
</a>
<a href="javascript:void(0);" class="hs-dropdown-toggle ti-btn ti-btn-danger-full me-2" *ngIf="someSelected"
(click)="deleteSelect()"><i class="ri-delete-bin-line font-semibold align-middle"></i>{{ 'Delete' |
translate}}
</a>
<div>
<input class="form-control form-control" type="text" placeholder="ค้นหาบริษัท"
aria-label=".form-control-sm example" [(ngModel)]='searchTerm'>
</div>
</div>
</div>
<div class="box-body">
<div class="table-responsive">
<table class="table whitespace-nowrap min-w-full ti-custom-table-hover">
<thead>
<tr class="border-b border-defaultborder">
<th scope="col" class="!text-start">
<input class="form-check-input check-all" type="checkbox" id="all-products"
(change)="toggleAll($event)" [checked]="allSelected" aria-label="...">
</th>
<th scope="col" class="text-start">รหัสประเภทงาน</th>
<th scope="col" class="text-start">รายละเอียด (ไทย)</th>
<th scope="col" class="text-start">รายละเอียด (อังกฤษ)</th>
<th scope="col" class="text-start">{{ 'Action' | translate}}</th>
<th scope="col" class="text-start"></th>
</tr>
</thead>
<tbody>
@if (filterList.length > 0) {
@for (item of filterList; track item.jobTypeId) {
<tr class="border border-defaultborder dark:border-defaultborder/10">
<td class="product-checkbox">
<input class="form-check-input" type="checkbox" [checked]="selectedItems.get(item.jobTypeId) || false"
(change)="onCheckboxChange(item.jobTypeId)" aria-label="...">
</td>
<td>
<div>
<span class="block mb-1">
{{item.jobTypeId}}
</span>
</div>
</td>
<td>
<span class="block mb-1">
{{item.thName}}
</span>
</td>
<td>
<span class="block mb-1">
{{item.engName}}
</span>
</td>
<td>
<div class="flex flex-row items-center !gap-2 ">
<a aria-label="anchor" (click)="view(item)" data-hs-overlay="#modal-detail"
class="ti-btn ti-btn-wave !gap-0 !m-0 bg-info/10 text-info hover:bg-info hover:text-white hover:border-info">
<i class="ri-pencil-line"></i>
</a>
<a aria-label="anchor" href="javascript:void(0);" (click)="delete(item)"
class="ti-btn ti-btn-wave product-btn !gap-0 !m-0 bg-danger/10 text-danger hover:bg-danger hover:text-white hover:border-danger">
<i class="ri-delete-bin-line"></i>
</a>
</div>
</td>
</tr>
}
} @else {
<tr>
<td [attr.colspan]="6" class="text-center py-4">
<ng-container *ngIf="itemsList.length === 0 && !searchTerm">
<p>กำลังโหลดข้อมูล หรือไม่มีข้อมูลเลย...</p>
</ng-container>
<ng-container *ngIf="itemsList.length > 0 && filterList.length === 0 && searchTerm">
<p>ไม่พบข้อมูลที่ค้นหา...</p>
</ng-container>
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
<div class="box-footer">
<div class="flex items-center flex-wrap overflow-auto" *ngIf="filterList.length > 0">
<div class="mb-2 sm:mb-0">
<div>
{{'Showing' | translate}} {{filterList.length}} {{'entries'
| translate}} <i class="bi bi-arrow-right ms-2 font-semibold"></i>
</div>
</div>
<div class="ms-auto">
<nav aria-label="Page navigation">
<ul class="ti-pagination mb-0">
<li *ngIf="pageIndex>0" class="page-item {{pageIndex==0 ? 'disabled' : ''}}"><a
class="page-link px-3 py-[0.375rem] cursor-pointer"
(click)="pageIndex = pageIndex-1;updatePagedItems()">{{'Previous' | translate}}</a></li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
*ngIf="pageIndex-1>0" (click)="pageIndex = pageIndex-2;updatePagedItems()">{{pageIndex-1}}</a></li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
*ngIf="pageIndex>0 && ((pageIndex-1)*10 < (searchTerm == '' ? itemsList.length : filterList.length))"
(click)="pageIndex = pageIndex-1;updatePagedItems()">{{pageIndex}}</a></li>
<li class="page-item"><a class="page-link active px-3 py-[0.375rem]"
href="javascript:void(0);">{{pageIndex +1}}</a>
</li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
*ngIf="(pageIndex+1)*10 < (searchTerm == '' ? itemsList.length : filterList.length)"
(click)="pageIndex = pageIndex+1;updatePagedItems()">{{pageIndex +2}}</a></li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
*ngIf="(pageIndex+2)*10 < (searchTerm == '' ? itemsList.length : filterList.length)"
(click)="pageIndex = pageIndex+2;updatePagedItems()">{{pageIndex +3}}</a></li>
<li *ngIf="(pageIndex+1)*10 < (searchTerm == '' ? itemsList.length : filterList.length)"
class="page-item"><a class="page-link px-3 py-[0.375rem] cursor-pointer"
(click)="pageIndex = pageIndex+1;updatePagedItems()">{{'Next' |
translate}}</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="modal-detail" class="hs-overlay hidden ti-modal [--overlay-backdrop:static]">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out">
<div class="ti-modal-content">
<div class="ti-modal-header">
<h6 class="modal-title text-[1rem] font-semibold text-defaulttextcolor" id="mail-ComposeLabel">{{ 'Create' |
translate }} {{ 'Company' | translate }}
</h6>
<button type="button" class="hs-dropdown-toggle !text-[1rem] !font-semibold !text-defaulttextcolor"
data-hs-overlay="#modal-detail" #closeModal>
<span class="sr-only">{{'Close' | translate}}</span>
<i class="ri-close-line"></i>
</button>
</div>
<div class="ti-modal-body px-4">
<div class="grid grid-cols-12 gap-4">
<div class="xl:col-span-12 col-span-12">
<label for="jobTypeId" class="form-label">{{'JobtypeId' | translate}}</label>
<input type="text" class="form-control" id="jobTypeId" placeholder="" [(ngModel)]="selectModel.jobTypeId"
[disabled]="action === 'edit'" [readonly]="action === 'edit'"
[ngClass]="{ '!bg-input-readonly': action === 'edit' }">
<div class="text-danger" *ngIf="!selectModel.jobTypeId && action === 'add'">
{{'Please fill in information' | translate}}
</div>
</div>
<div class="xl:col-span-12 col-span-12">
<label for="thName" class="form-label">{{'Description(TH)' | translate}}</label>
<input type="text" class="form-control" id="thName" placeholder="" [(ngModel)]="selectModel.thName"
[disabled]="action === 'edit'">
<div class="text-danger" *ngIf="!selectModel.thName">
{{'Please fill in information' | translate}}
</div>
</div>
<div class="xl:col-span-12 col-span-12">
<label for="thName" class="form-label">{{'Description(ENG)' | translate}}</label>
<input type="text" class="form-control" id="thName" placeholder="" [(ngModel)]="selectModel.engName"
[disabled]="action === 'edit'">
<div class="text-danger" *ngIf="!selectModel.thName">
{{'Please fill in information' | translate}}
</div>
</div>
</div>
</div>
<div class="ti-modal-footer">
<button type="button" class="hs-dropdown-toggle ti-btn ti-btn-light align-middle"
data-hs-overlay="#modal-detail">
{{'Cancel' | translate}}
</button>
<button type="button" (click)="save()" class="ti-btn bg-primary text-white !font-medium">{{'Save' |
translate}}</button>
</div>
</div>
</div>
</div>
/* tslint:disable:no-unused-variable */
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { JobTypeComponent } from './job-type.component';
describe('JobTypeComponent', () => {
let component: JobTypeComponent;
let fixture: ComponentFixture<JobTypeComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ JobTypeComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(JobTypeComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, ElementRef, ViewChild } from '@angular/core';
import { Router, RouterModule } from '@angular/router';
import { TranslateModule, TranslateService } from '@ngx-translate/core';
import swal from 'sweetalert';
import { MatPaginator } from '@angular/material/paginator';
import { FormsModule } from '@angular/forms';
import { NgSelectModule } from '@ng-select/ng-select';
import { CommonModule } from '@angular/common';
import { SharedModule } from '../../../../shared/shared.module';
import { TokenService } from '../../../../shared/services/token.service';
import { JobTypeModel } from '../../../models/job-type.model';
import { JobTypeService } from '../../../services/job-type.service';
@Component({
selector: 'app-job-type',
standalone: true,
imports: [
CommonModule,
SharedModule,
TranslateModule,
NgSelectModule,
FormsModule,
MatPaginator,
RouterModule,
],
templateUrl: './job-type.component.html',
styleUrl: './job-type.component.css',
})
export class JobTypeComponent {
@ViewChild("JobTypeModel") JobTypeModel: any;
dialogRef: any
currentengNameTab: number = 1;
currentExcerptTab: number = 1;
action = "new";
allSelected = false;
someSelected = false;
itemsList: JobTypeModel[] = [];
filterList: JobTypeModel[] = [];
selectModel: JobTypeModel = new JobTypeModel();
selectedItems = new Map<string, boolean>();
pageIndex = 0;
get searchTerm(): string {
return this._searchTerm;
}
set searchTerm(val: string) {
this.pageIndex = 0;
this.allSelected = false;
this._searchTerm = val;
if (val != '') {
this.filterList = this.filter(val);
} else {
this.updatePagedItems();
}
}
_searchTerm = "";
constructor(private jobtypeservice: JobTypeService, public translate: TranslateService, private tokenService: TokenService, private router: Router,) {
}
getJobtype() {
this.jobtypeservice.getList().subscribe({
next: (response: JobTypeModel[]) => {
this.itemsList = response.map((x: any) => new JobTypeModel(x, this.translate));
console.log('ข้อมูลบริษัท (itemsList)', this.itemsList);
this.updatePagedItems();
},
error: (error) => {
console.error('error cant get company', error);
swal("ข้อผิดพลาด", "ไม่สามารถดึงข้อมูลบริษัทได้", "error");
}
});
}
ngOnInit(): void {
this.getJobtype();
}
filter(v: string) {
return this.itemsList?.filter(
(x) =>
x.jobTypeId?.toLowerCase().indexOf(v.toLowerCase()) !== -1 ||
x.thName?.toLowerCase().indexOf(v.toLowerCase()) !== -1 ||
x.engName?.toLowerCase().indexOf(v.toLowerCase()) !== -1
// x.getStatus().toLowerCase().indexOf(v.toLowerCase()) !== -1
);
}
delete(item: JobTypeModel) {
swal({
title: "คุณแน่ใจหรือไม่?",
text: "คุณจะไม่สามารถกู้คืนข้อมูลนี้ได้!",
icon: "warning",
dangerMode: true,
buttons: ["ยกเลิก", "ใช่, ลบเลย!"],
})
.then((willDelete: any) => {
if (willDelete) {
this.jobtypeservice.deleteById(item.jobTypeId).subscribe(result => {
swal("ลบสำเร็จ!!", "ลบข้อมูลสำเร็จ", "success");
this.ngOnInit();
}, error => {
console.error("เกิดข้อผิดพลาดในการลบ:", error);
swal("ข้อผิดพลาด!!", "ไม่สามารถลบข้อมูลได้", "error");
});
}
});
}
new() {
this.action = 'add';
this.selectModel = new JobTypeModel();
this.selectModel.jobTypeId = "";
this.selectModel.thName = "";
this.selectModel.engName = "";
}
view(item: JobTypeModel) {
this.action = 'edit';
this.selectModel = new JobTypeModel(item);
}
save() {
console.log('Before Save, selectModel is:', this.selectModel);
swal({
title: "คุณแน่ใจหรือไม่?",
text: "คุณต้องการบันทึกหรือไม่",
icon: "warning",
dangerMode: false,
buttons: ["ยกเลิก", "ยืนยัน"],
})
.then((willSave: any) => {
if (willSave) {
this.jobtypeservice.post(this.selectModel).subscribe(result => {
console.log(result);
swal("บันทึกสำเร็จ!!", "บันทึกข้อมูลสมาชิก", "success");
this.ngOnInit();
}, error => {
console.error("เกิดข้อผิดพลาดในการบันทึก/อัปเดต:", error);
swal("ข้อผิดพลาด!!", "ไม่สามารถบันทึก/อัปเดตข้อมูลได้", "error");
});
}
});
}
updatePagedItems() {
const startIndex = this.pageIndex * 10;
const endIndex = startIndex + 10;
this.filterList = this.itemsList.slice(startIndex, endIndex);
}
toggleAll(event: any) {
this.allSelected = event.target.checked;
this.selectedItems.clear();
this.itemsList.forEach(item => {
this.selectedItems.set(item.jobTypeId, this.allSelected);
});
this.someSelected = this.itemsList.some(item => this.selectedItems.get(item.jobTypeId));
}
onCheckboxChange(jobTypeId: string) {
const isSelected = this.selectedItems.get(jobTypeId) || false;
this.selectedItems.set(jobTypeId, !isSelected);
this.allSelected = this.itemsList.every(item => this.selectedItems.get(item.jobTypeId));
this.someSelected = this.itemsList.some(item => this.selectedItems.get(item.jobTypeId));
}
deleteSelect() {
let companyInfo = '';
const selectedjobTypeIdsToDelete: string[] = [];
this.selectedItems.forEach((isSelected, jobTypeId) => {
if (isSelected) {
const item = this.itemsList.find(c => c.jobTypeId === jobTypeId);
if (item) {
companyInfo += `${this.translate.instant('บริษัท')}: ${item.thName}\n`;
selectedjobTypeIdsToDelete.push(item.jobTypeId);
}
}
});
if (selectedjobTypeIdsToDelete.length === 0) {
swal("ข้อผิดพลาด", "กรุณาเลือกบริษัทที่ต้องการลบ", "warning");
return;
}
swal({
title: "คุณแน่ใจหรือไม่?",
text: companyInfo,
icon: "warning",
dangerMode: true,
buttons: ["ยกเลิก", "ใช่, ลบเลย!"],
})
.then((willDelete: any) => {
if (willDelete) {
const deletePromises = selectedjobTypeIdsToDelete.map(jobTypeId =>
this.jobtypeservice.deleteById(jobTypeId).toPromise()
.then(() => true)
.catch(error => {
console.error(`Error deleting company ${jobTypeId}:`, error);
return false;
})
);
Promise.all(deletePromises)
.then(results => {
const allSuccessful = results.every(success => success);
if (allSuccessful) {
swal("ลบสำเร็จ!!", "บันทึกข้อมูลสำเร็จ", "success");
} else {
swal("สำเร็จบางส่วน/ข้อผิดพลาด!!", "มีการลบข้อมูลบางส่วนไม่สำเร็จ หรือมีข้อผิดพลาด", "warning");
}
this.ngOnInit();
this.selectedItems.clear();
this.allSelected = false;
this.someSelected = false;
});
}
});
}
}
<app-page-header [title]="'จัดการจังหวัด'" [activeTitle]="'ผู้ดูแลระบบ'" [title1]="'จัดการจังหวัด'"></app-page-header>
<div class="grid grid-cols-12 gap-6">
<div class="xl:col-span-12 col-span-12">
<div class="box">
<div class="box-header justify-between">
<div class="box-title">
{{ 'All List' | translate}} <span
class="badge bg-light text-default rounded-full ms-1 text-[0.75rem] align-middle">{{itemsList.length}}</span>
</div>
<div class="flex flex-wrap gap-2">
<a href="javascript:void(0);" class="hs-dropdown-toggle ti-btn ti-btn-primary-full me-2" (click)="new()"
data-hs-overlay="#modal-detail"><i class="ri-add-line font-semibold align-middle"></i>{{ 'Create' |
translate}}
</a>
<a href="javascript:void(0);" class="hs-dropdown-toggle ti-btn ti-btn-danger-full me-2" *ngIf="someSelected"
(click)="deleteSelect()"><i class="ri-delete-bin-line font-semibold align-middle"></i>{{ 'Delete' |
translate}}
</a>
<div>
<input class="form-control form-control" type="text" placeholder="ค้นหาจังหวัด"
aria-label=".form-control-sm example" [(ngModel)]='searchTerm'>
</div>
</div>
</div>
<div class="box-body">
<div class="table-responsive">
<table class="table whitespace-nowrap min-w-full ti-custom-table-hover">
<thead>
<tr class="border-b border-defaultborder">
<th scope="col" class="!text-start">
<input class="form-check-input check-all" type="checkbox" id="all-products"
(change)="toggleAll($event)" [checked]="allSelected" aria-label="...">
</th>
<th scope="col" class="text-start">รหัสประเภทงาน</th>
<th scope="col" class="text-start">ชื่อย่อ (ไทย)</th>
<th scope="col" class="text-start">ชื่อย่อ (อังกฤษ)</th>
<th scope="col" class="text-start">รายละเอียด (ไทย)</th>
<th scope="col" class="text-start">รายละเอียด (อังกฤษ)</th>
<th scope="col" class="text-start">{{ 'Action' | translate}}</th>
<th scope="col" class="text-start"></th>
</tr>
</thead>
<tbody>
@if (filterList.length > 0) {
@for (item of filterList; track item.provinceId) {
<tr class="border border-defaultborder dark:border-defaultborder/10">
<td class="product-checkbox">
<input class="form-check-input" type="checkbox"
[checked]="selectedItems.get(item.provinceId) || false" (change)="onCheckboxChange(item.provinceId)"
aria-label="...">
</td>
<td>
<div>
<span class="block mb-1">
{{item.provinceId}}
</span>
</div>
</td>
<td>
<span class="block mb-1">
{{item.shortTname}}
</span>
</td>
<td>
<span class="block mb-1">
{{item.shortEname}}
</span>
</td>
<td>
<span class="block mb-1">
{{item.thName}}
</span>
</td>
<td>
<span class="block mb-1">
{{item.engName}}
</span>
</td>
<td>
<div class="flex flex-row items-center !gap-2 ">
<a aria-label="anchor" (click)="view(item)" data-hs-overlay="#modal-detail"
class="ti-btn ti-btn-wave !gap-0 !m-0 bg-info/10 text-info hover:bg-info hover:text-white hover:border-info">
<i class="ri-pencil-line"></i>
</a>
<a aria-label="anchor" href="javascript:void(0);" (click)="delete(item)"
class="ti-btn ti-btn-wave product-btn !gap-0 !m-0 bg-danger/10 text-danger hover:bg-danger hover:text-white hover:border-danger">
<i class="ri-delete-bin-line"></i>
</a>
</div>
</td>
</tr>
}
} @else {
<tr>
<td [attr.colspan]="6" class="text-center py-4">
<ng-container *ngIf="itemsList.length === 0 && !searchTerm">
<p>กำลังโหลดข้อมูล หรือไม่มีข้อมูลเลย...</p>
</ng-container>
<ng-container *ngIf="itemsList.length > 0 && filterList.length === 0 && searchTerm">
<p>ไม่พบข้อมูลที่ค้นหา...</p>
</ng-container>
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
<div class="box-footer">
<div class="flex items-center flex-wrap overflow-auto" *ngIf="filterList.length > 0">
<div class="mb-2 sm:mb-0">
<div>
{{'Showing' | translate}} {{filterList.length}} {{'entries'
| translate}} <i class="bi bi-arrow-right ms-2 font-semibold"></i>
</div>
</div>
<div class="ms-auto">
<nav aria-label="Page navigation">
<ul class="ti-pagination mb-0">
<li *ngIf="pageIndex>0" class="page-item {{pageIndex==0 ? 'disabled' : ''}}"><a
class="page-link px-3 py-[0.375rem] cursor-pointer"
(click)="pageIndex = pageIndex-1;updatePagedItems()">{{'Previous' | translate}}</a></li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
*ngIf="pageIndex-1>0" (click)="pageIndex = pageIndex-2;updatePagedItems()">{{pageIndex-1}}</a></li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
*ngIf="pageIndex>0 && ((pageIndex-1)*10 < (searchTerm == '' ? itemsList.length : filterList.length))"
(click)="pageIndex = pageIndex-1;updatePagedItems()">{{pageIndex}}</a></li>
<li class="page-item"><a class="page-link active px-3 py-[0.375rem]"
href="javascript:void(0);">{{pageIndex +1}}</a>
</li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
*ngIf="(pageIndex+1)*10 < (searchTerm == '' ? itemsList.length : filterList.length)"
(click)="pageIndex = pageIndex+1;updatePagedItems()">{{pageIndex +2}}</a></li>
<li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
*ngIf="(pageIndex+2)*10 < (searchTerm == '' ? itemsList.length : filterList.length)"
(click)="pageIndex = pageIndex+2;updatePagedItems()">{{pageIndex +3}}</a></li>
<li *ngIf="(pageIndex+1)*10 < (searchTerm == '' ? itemsList.length : filterList.length)"
class="page-item"><a class="page-link px-3 py-[0.375rem] cursor-pointer"
(click)="pageIndex = pageIndex+1;updatePagedItems()">{{'Next' |
translate}}</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="modal-detail" class="hs-overlay hidden ti-modal [--overlay-backdrop:static]">
<div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out">
<div class="ti-modal-content">
<div class="ti-modal-header">
<h6 class="modal-title text-[1rem] font-semibold text-defaulttextcolor" id="mail-ComposeLabel">{{ 'Create' |
translate }} {{ 'Company' | translate }}
</h6>
<button type="button" class="hs-dropdown-toggle !text-[1rem] !font-semibold !text-defaulttextcolor"
data-hs-overlay="#modal-detail" #closeModal>
<span class="sr-only">{{'Close' | translate}}</span>
<i class="ri-close-line"></i>
</button>
</div>
<div class="ti-modal-body px-4">
<div class="grid grid-cols-12 gap-4">
<div class="xl:col-span-12 col-span-12">
<label for="provinceId" class="form-label">{{'provinceId' | translate}}</label>
<input type="text" class="form-control" id="provinceId" placeholder="" [(ngModel)]="selectModel.provinceId"
[disabled]="action === 'edit'" [readonly]="action === 'edit'"
[ngClass]="{ '!bg-input-readonly': action === 'edit' }">
<div class="text-danger" *ngIf="!selectModel.provinceId && action === 'add'">
{{'Please fill in information' | translate}}
</div>
</div>
<div class="xl:col-span-6 col-span-12">
<label for="shortTname" class="form-label">{{'ชื่อย่อ(ไทย)' | translate}}</label>
<input type="text" class="form-control" id="shortTname" placeholder="" [(ngModel)]="selectModel.shortTname"
[disabled]="action === 'edit'">
<div class="text-danger" *ngIf="!selectModel.shortTname">
{{'Please fill in information' | translate}}
</div>
</div>
<div class="xl:col-span-6 col-span-12">
<label for="shortEname" class="form-label">{{'ชื่อย่อ(อังกฤษ)' | translate}}</label>
<input type="text" class="form-control" id="shortEname" placeholder="" [(ngModel)]="selectModel.shortEname"
[disabled]="action === 'edit'">
<div class="text-danger" *ngIf="!selectModel.shortEname">
{{'Please fill in information' | translate}}
</div>
</div>
<div class="xl:col-span-6 col-span-12">
<label for="thName" class="form-label">{{'Description(TH)' | translate}}</label>
<input type="text" class="form-control" id="thName" placeholder="" [(ngModel)]="selectModel.thName"
[disabled]="action === 'edit'">
<div class="text-danger" *ngIf="!selectModel.thName">
{{'Please fill in information' | translate}}
</div>
</div>
<div class="xl:col-span-6 col-span-12">
<label for="engName" class="form-label">{{'Description(ENG)' | translate}}</label>
<input type="text" class="form-control" id="engName" placeholder="" [(ngModel)]="selectModel.engName"
[disabled]="action === 'edit'">
<div class="text-danger" *ngIf="!selectModel.engName">
{{'Please fill in information' | translate}}
</div>
</div>
<!-- <div class="xl:col-span-12 col-span-12">
<div class="flex justify-center items-center" style="font-size: 12px;">
<ng-select id="countrySelect" [items]="countryList" bindLabel="thName" bindValue="countryId"
[(ngModel)]="selectedCountryId" [searchable]="true" (change)="onCountryChange($event)"
placeholder="ค้นหาหรือเลือกประเทศ">
<ng-template ng-option-tmp let-item="item">
<div>{{item.thName}} ({{item.engName}})</div>
</ng-template>
<ng-template ng-label-tmp let-item="item">
<div>{{item.thName}}</div>
</ng-template>
</ng-select>
<p class="mt-2">ประเทศที่เลือก: {{ selectedCountryId }}</p>
</div>
</div> -->
</div>
</div>
<div class="ti-modal-footer">
<button type="button" class="hs-dropdown-toggle ti-btn ti-btn-light align-middle"
data-hs-overlay="#modal-detail">
{{'Cancel' | translate}}
</button>
<button type="button" (click)="save()" class="ti-btn bg-primary text-white !font-medium">{{'Save' |
translate}}</button>
</div>
</div>
</div>
</div>
\ No newline at end of file
/* tslint:disable:no-unused-variable */
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { ProvinceComponent } from './province.component';
describe('ProvinceComponent', () => {
let component: ProvinceComponent;
let fixture: ComponentFixture<ProvinceComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ProvinceComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ProvinceComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, ElementRef, ViewChild } from '@angular/core';
import { Router, RouterModule } from '@angular/router';
import { TranslateModule, TranslateService } from '@ngx-translate/core';
import swal from 'sweetalert';
import { MatPaginator } from '@angular/material/paginator';
import { FormsModule } from '@angular/forms';
import { NgSelectModule } from '@ng-select/ng-select';
import { CommonModule } from '@angular/common';
import { SharedModule } from '../../../../shared/shared.module';
import { TokenService } from '../../../../shared/services/token.service';
import { ProvinceModel } from '../../../models/province.model';
import { ProvinceService } from '../../../services/province.service';
import { CountryModel } from '../../../models/country.model';
import { RegionModel } from '../../../models/Region.model';
@Component({
selector: 'app-province',
standalone: true,
imports: [
CommonModule,
SharedModule,
TranslateModule,
NgSelectModule,
FormsModule,
MatPaginator,
RouterModule,
],
templateUrl: './province.component.html',
styleUrl: './province.component.css',
})
export class ProvinceComponent {
@ViewChild("ProvinceModel") ProvinceModel: any;
dialogRef: any
currentengNameTab: number = 1;
currentExcerptTab: number = 1;
action = "new";
allSelected = false;
someSelected = false;
itemsList: ProvinceModel[] = [];
filterList: ProvinceModel[] = [];
selectModel: ProvinceModel = new ProvinceModel();
selectedItems = new Map<string, boolean>();
countryList: CountryModel[] = [];
pageIndex = 0;
get searchTerm(): string {
return this._searchTerm;
}
set searchTerm(val: string) {
this.pageIndex = 0;
this.allSelected = false;
this._searchTerm = val;
if (val != '') {
this.filterList = this.filter(val);
} else {
this.updatePagedItems();
}
}
_searchTerm = "";
constructor(private provinceservice: ProvinceService, public translate: TranslateService, private tokenService: TokenService, private router: Router,) {
}
getJobtype() {
this.provinceservice.getList().subscribe({
next: (response: ProvinceModel[]) => {
this.itemsList = response.map((x: any) => new ProvinceModel(x, this.translate));
console.log('ข้อมูลบริษัท (itemsList)', this.itemsList);
this.updatePagedItems();
},
error: (error) => {
console.error('error cant get company', error);
swal("ข้อผิดพลาด", "ไม่สามารถดึงข้อมูลบริษัทได้", "error");
}
});
}
ngOnInit(): void {
this.getJobtype();
}
filter(v: string) {
return this.itemsList?.filter(
(x) =>
x.provinceId?.toLowerCase().indexOf(v.toLowerCase()) !== -1 ||
x.shortTname?.toLowerCase().indexOf(v.toLowerCase()) !== -1 ||
x.shortEname?.toLowerCase().indexOf(v.toLowerCase()) !== -1 ||
x.thName?.toLowerCase().indexOf(v.toLowerCase()) !== -1 ||
x.engName?.toLowerCase().indexOf(v.toLowerCase()) !== -1
);
}
delete(item: ProvinceModel) {
swal({
title: "คุณแน่ใจหรือไม่?",
text: "คุณจะไม่สามารถกู้คืนข้อมูลนี้ได้!",
icon: "warning",
dangerMode: true,
buttons: ["ยกเลิก", "ใช่, ลบเลย!"],
})
.then((willDelete: any) => {
if (willDelete) {
this.provinceservice.deleteById(item.provinceId).subscribe(result => {
swal("ลบสำเร็จ!!", "ลบข้อมูลสำเร็จ", "success");
this.ngOnInit();
}, error => {
console.error("เกิดข้อผิดพลาดในการลบ:", error);
swal("ข้อผิดพลาด!!", "ไม่สามารถลบข้อมูลได้", "error");
});
}
});
}
new() {
this.action = 'add';
this.selectModel = new ProvinceModel();
this.selectModel.provinceId = "";
this.selectModel.shortTname = "";
this.selectModel.shortEname = "";
this.selectModel.thName = "";
this.selectModel.engName = "";
this.selectModel.country = new CountryModel();
this.selectModel.regio = new RegionModel();
}
view(item: ProvinceModel) {
this.action = 'edit';
this.selectModel = new ProvinceModel(item);
}
save() {
console.log('Before Save, selectModel is:', this.selectModel);
swal({
title: "คุณแน่ใจหรือไม่?",
text: "คุณต้องการบันทึกหรือไม่",
icon: "warning",
dangerMode: false,
buttons: ["ยกเลิก", "ยืนยัน"],
})
.then((willSave: any) => {
if (willSave) {
this.provinceservice.post(this.selectModel).subscribe(result => {
console.log(result);
swal("บันทึกสำเร็จ!!", "บันทึกข้อมูลสมาชิก", "success");
this.ngOnInit();
}, error => {
console.error("เกิดข้อผิดพลาดในการบันทึก/อัปเดต:", error);
swal("ข้อผิดพลาด!!", "ไม่สามารถบันทึก/อัปเดตข้อมูลได้", "error");
});
}
});
}
updatePagedItems() {
const startIndex = this.pageIndex * 10;
const endIndex = startIndex + 10;
this.filterList = this.itemsList.slice(startIndex, endIndex);
}
toggleAll(event: any) {
this.allSelected = event.target.checked;
this.selectedItems.clear();
this.itemsList.forEach(item => {
this.selectedItems.set(item.provinceId, this.allSelected);
});
this.someSelected = this.itemsList.some(item => this.selectedItems.get(item.provinceId));
}
onCheckboxChange(provinceId: string) {
const isSelected = this.selectedItems.get(provinceId) || false;
this.selectedItems.set(provinceId, !isSelected);
this.allSelected = this.itemsList.every(item => this.selectedItems.get(item.provinceId));
this.someSelected = this.itemsList.some(item => this.selectedItems.get(item.provinceId));
}
deleteSelect() {
let companyInfo = '';
const selectedprovinceIdsToDelete: string[] = [];
this.selectedItems.forEach((isSelected, provinceId) => {
if (isSelected) {
const item = this.itemsList.find(c => c.provinceId === provinceId);
if (item) {
companyInfo += `${this.translate.instant('บริษัท')}: ${item.thName}\n`;
selectedprovinceIdsToDelete.push(item.provinceId);
}
}
});
if (selectedprovinceIdsToDelete.length === 0) {
swal("ข้อผิดพลาด", "กรุณาเลือกบริษัทที่ต้องการลบ", "warning");
return;
}
swal({
title: "คุณแน่ใจหรือไม่?",
text: companyInfo,
icon: "warning",
dangerMode: true,
buttons: ["ยกเลิก", "ใช่, ลบเลย!"],
})
.then((willDelete: any) => {
if (willDelete) {
const deletePromises = selectedprovinceIdsToDelete.map(provinceId =>
this.provinceservice.deleteById(provinceId).toPromise()
.then(() => true)
.catch(error => {
console.error(`Error deleting company ${provinceId}:`, error);
return false;
})
);
Promise.all(deletePromises)
.then(results => {
const allSuccessful = results.every(success => success);
if (allSuccessful) {
swal("ลบสำเร็จ!!", "บันทึกข้อมูลสำเร็จ", "success");
} else {
swal("สำเร็จบางส่วน/ข้อผิดพลาด!!", "มีการลบข้อมูลบางส่วนไม่สำเร็จ หรือมีข้อผิดพลาด", "warning");
}
this.ngOnInit();
this.selectedItems.clear();
this.allSelected = false;
this.someSelected = false;
});
}
});
}
}
import { HttpClient, HttpHeaders } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { environment } from "../../../environments/environment";
import { Observable } from "rxjs";
import { CategoryModel } from "../models/category.model";
@Injectable({
providedIn: 'root'
})
export class CategoryCompanyService {
constructor(private http: HttpClient) { }
list(): Observable<CategoryModel[]> {
return this.http.get<CategoryModel[]>(`${environment.baseUrl}/company-category/list`);
}
post(body: any): Observable<any> {
return this.http.post(`${environment.baseUrl}/company-category`, body, { observe: 'response' });
}
delete(body: any): Observable<any> {
const option = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
body: body
};
return this.http.delete<any>(`${environment.baseUrl}/company-category`, option);
}
}
import { HttpClient, HttpHeaders } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { environment } from "../../../environments/environment";
import { Observable } from "rxjs";
import { CountryModel } from "../models/country.model";
@Injectable({
providedIn: 'root'
})
export class CountryService {
constructor(private http: HttpClient) { }
list(): Observable<CountryModel[]> {
return this.http.get<CountryModel[]>(`${environment.baseUrl}/country/list`);
}
post(body: any): Observable<any> {
return this.http.post(`${environment.baseUrl}/country`, body, { observe: 'response' });
}
delete(body: any): Observable<any> {
const option = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
body: body
};
return this.http.delete<any>(`${environment.baseUrl}/country`, option);
}
}
import { HttpClient, HttpHeaders } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { environment } from "../../../environments/environment";
import { Observable } from "rxjs";
import { DegreeModel } from "../models/degree.model";
@Injectable({
providedIn: 'root'
})
export class DegreeService {
constructor(private http: HttpClient) { }
list(): Observable<DegreeModel[]> {
return this.http.get<DegreeModel[]>(`${environment.baseUrl}/degree/list`);
}
post(body: any): Observable<any> {
return this.http.post(`${environment.baseUrl}/degree`, body, { observe: 'response' });
}
delete(body: any): Observable<any> {
const option = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
body: body
};
return this.http.delete<any>(`${environment.baseUrl}/degree`, option);
}
}
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { environment } from "../../../environments/environment";
import { JobTypeModel } from '../models/job-type.model';
@Injectable({
providedIn: 'root'
})
export class JobTypeService {
api = "/job-type"
urlApi = environment.baseUrl + "/job-type"
constructor(private http: HttpClient) { }
getById(jobTypeId: string): Observable<JobTypeModel> {
return this.http.get<JobTypeModel>(this.urlApi + "/" + jobTypeId)
}
getList(): Observable<JobTypeModel[]> {
return this.http.get<JobTypeModel[]>(this.urlApi + "/list")
}
post(body: JobTypeModel): Observable<any> {
return this.http.post(this.urlApi, body)
}
delete(body: JobTypeModel) {
const options = {
headers: new HttpHeaders({
"Content-Type": "application/json",
}),
body: body,
};
return this.http.delete(this.urlApi, options)
}
deleteById(jobTypeId: string) {
const options = {
headers: new HttpHeaders({
"Content-Type": "application/json",
}),
body: {jobTypeId : jobTypeId},
};
return this.http.delete(this.urlApi, options)
}
}
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { environment } from "../../../environments/environment";
import { ProvinceModel } from '../models/province.model';
@Injectable({
providedIn: 'root'
})
export class ProvinceService {
api = "/province"
urlApi = environment.baseUrl + "/province"
constructor(private http: HttpClient) { }
getById(provinceId: string): Observable<ProvinceModel> {
return this.http.get<ProvinceModel>(this.urlApi + "/" + provinceId)
}
getList(): Observable<ProvinceModel[]> {
return this.http.get<ProvinceModel[]>(this.urlApi + "/list")
}
post(body: ProvinceModel): Observable<any> {
return this.http.post(this.urlApi, body)
}
postList(body: ProvinceModel): Observable<ProvinceModel[]> {
return this.http.post<ProvinceModel[]>(this.urlApi + "/list", body);
}
delete(body: ProvinceModel) {
const options = {
headers: new HttpHeaders({
"Content-Type": "application/json",
}),
body: body,
};
return this.http.delete(this.urlApi, options)
}
deleteById(provinceId: string) {
const options = {
headers: new HttpHeaders({
"Content-Type": "application/json",
}),
body: {provinceId : provinceId},
};
return this.http.delete(this.urlApi, options)
}
}
......@@ -130,6 +130,11 @@ export class NavService implements OnDestroy {
children: [
{ path: '/company-departments/company-info', title: 'ข้อมูลบริษัท', type: 'link' },
{ path: '/admin/position', title: 'ทะเบียนตำแหน่ง', type: 'link' },
{ path: '/admin/country-registration', title: 'ทะเบียนประเทศ', type: 'link' },
{ path: '/admin/category-company', title: 'ทะเบียนประเภทบริษัท', type: 'link' },
{ path: '/admin/degree-manage', title: 'ทะเบียนระดับวุฒิการศึกษา', type: 'link' },
{ path: '/admin/job-types', title: 'จัดการประเภทงาน', type: 'link' },
{ path: '/admin/provinces', title: 'จัดการจังหวัด', type: 'link' },
],
},
......
......@@ -93,5 +93,14 @@
"Name-Surname(Eng)":"Name-Surname(Eng)",
"Add Version":"Add Version",
"Remark":"Remark",
"Position Information":"Position Information"
"Position Information":"Position Information",
"Category ID":"Category ID",
"Category":"Category",
"Country ID":"Country ID",
"Country":"Country",
"Description(TH)":"Description(TH)",
"Description(ENG)":"Description(ENG)",
"JobtypeId":"JobtypeId",
"Degree ID":"Degree ID",
"Degree":"Degree"
}
......@@ -93,5 +93,14 @@
"Name-Surname(Eng)":"ชื่อ-นามสกุล(อังกฤษ)",
"Add Version":"สร้างเวอร์ชั่น",
"Remark":"หมายเหตุ",
"Position Information":"ข้อมูลตำแหน่ง"
"Position Information":"ข้อมูลตำแหน่ง",
"Category ID":"รหัสประเภทบริษัท",
"Category":"ประเภท",
"Country ID":"รหัสประเทศ",
"Country":"ประเทศ",
"Description(TH)":"รายละเอียด(ไทย)",
"Description(ENG)":"รายละเอียด(อังกฤษ)",
"JobtypeId":"รหัสประเภทงาน",
"Degree ID":"รหัสระดับการศึกษา",
"Degree":"ระดับการศึกษา"
}
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