Skip to content

M
myjob-manage
Commit 03222346 by DESKTOP-E3GSHH7\myhr
Options

จัดการข้อมูลจังหวัด

parent ae496939
Showing with 194 additions and 19 deletions
src/app/DPU/common/company-department/province/province.component.html
......@@ -169,7 +169,7 @@
<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'"
[readonly]="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}}
......@@ -178,16 +178,14 @@
<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'">
<input type="text" class="form-control" id="shortTname" placeholder="" [(ngModel)]="selectModel.shortTname">
<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'">
<input type="text" class="form-control" id="shortEname" placeholder="" [(ngModel)]="selectModel.shortEname">
<div class="text-danger" *ngIf="!selectModel.shortEname">
{{'Please fill in information' | translate}}
</div>
......@@ -195,25 +193,50 @@
<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'">
<input type="text" class="form-control" id="thName" placeholder="" [(ngModel)]="selectModel.thName">
<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'">
<input type="text" class="form-control" id="engName" placeholder="" [(ngModel)]="selectModel.engName">
<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="ค้นหาหรือเลือกประเทศ">
<div class="xl:col-span-12 col-span-12">
<label for="engName" class="form-label">{{'เลือกประเทศ' | translate}}</label>
<ng-select id="countrySelect" #countrySelectRef [items]="countryList" bindLabel="thName" bindValue="this"
[(ngModel)]="selectedCountry" (change)="onCountryChange($event)" placeholder="ค้นหาหรือเลือกประเทศ"
[searchable]="true" [compareWith]="compareCountries"> <ng-template ng-header-tmp>
<input type="text" class="ti-form-input w-full form-controls"
placeholder="{{'ค้นหาประเทศ...' | translate}}"
(input)="countrySelectRef.filter($any($event.target).value)" />
</ng-template>
<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>
<div class="text-danger" *ngIf="!selectedCountry">
{{'Please fill in information' | translate}}
</div>
</div>
<div class="xl:col-span-12 col-span-12">
<label for="region" class="form-label">{{'เลือกภูมิภาค' | translate}}</label>
<ng-select id="regionSelect" #regionSelectRef [items]="regionList" bindLabel="thName" bindValue="this"
[(ngModel)]="selectedRegion" (change)="onRegionChange($event)" placeholder="ค้นหาหรือเลือกภูมิภาค"
[searchable]="true" [compareWith]="compareRegion"> <ng-template ng-header-tmp>
<input type="text" class="ti-form-input w-full form-controls"
placeholder="{{'ค้นหาภูมิภาค...' | translate}}"
(input)="regionSelectRef.filter($any($event.target).value)" />
</ng-template>
<ng-template ng-option-tmp let-item="item">
<div>{{item.thName}} ({{item.engName}})</div>
</ng-template>
......@@ -221,9 +244,11 @@
<div>{{item.thName}}</div>
</ng-template>
</ng-select>
<p class="mt-2">ประเทศที่เลือก: {{ selectedCountryId }}</p>
<div class="text-danger" *ngIf="!selectedRegion">
{{'Please fill in information' | translate}}
</div>
</div> -->
</div>
</div>
</div>
<div class="ti-modal-footer">
......
src/app/DPU/common/company-department/province/province.component.ts
......@@ -12,6 +12,8 @@ import { ProvinceModel } from '../../../models/province.model';
import { ProvinceService } from '../../../services/province.service';
import { CountryModel } from '../../../models/country.model';
import { RegionModel } from '../../../models/Region.model';
import { CountryService } from '../../../services/country.service';
import { RegionService } from '../../../services/region.service';
@Component({
selector: 'app-province',
......@@ -29,6 +31,8 @@ import { RegionModel } from '../../../models/Region.model';
styleUrl: './province.component.css',
})
export class ProvinceComponent {
@ViewChild('closeModal') public childModal?: ElementRef;
@ViewChild('modalDetail') public modalDetail?: ElementRef;
@ViewChild("ProvinceModel") ProvinceModel: any;
dialogRef: any
currentengNameTab: number = 1;
......@@ -43,7 +47,10 @@ export class ProvinceComponent {
selectedItems = new Map<string, boolean>();
countryList: CountryModel[] = [];
selectedCountry: CountryModel | undefined
regionList : RegionModel[] = []
selectedRegion: RegionModel | undefined
pageIndex = 0;
......@@ -63,7 +70,13 @@ export class ProvinceComponent {
_searchTerm = "";
constructor(private provinceservice: ProvinceService, public translate: TranslateService, private tokenService: TokenService, private router: Router,) {
constructor(private provinceservice: ProvinceService,
public translate: TranslateService,
private tokenService: TokenService,
private router: Router,
private countryservice: CountryService,
private regionService: RegionService,
) {
}
......@@ -81,8 +94,42 @@ export class ProvinceComponent {
});
}
getCountryList(): void {
this.countryservice.list().subscribe({
next: (response: CountryModel[]) => {
this.countryList = response;
if (this.selectModel.country && this.selectModel.country.countryId) {
this.selectedCountry = this.countryList.find(
c => c.countryId === this.selectModel.country?.countryId
);
}
},
error: (error) => {
console.error('Error fetching country list:', error);
}
});
}
getRegionList(): void {
this.regionService.getList().subscribe({
next: (response: RegionModel[]) => {
this.regionList = response;
if (this.selectModel.region && this.selectModel.region.regionId) {
this.selectedRegion = this.regionList.find(
c => c.regionId === this.selectModel.region?.regionId
);
}
},
error: (error) => {
console.error('Error fetching country list:', error);
}
});
}
ngOnInit(): void {
this.getJobtype();
this.getCountryList();
this.getRegionList();
}
filter(v: string) {
......@@ -125,16 +172,68 @@ export class ProvinceComponent {
this.selectModel.shortEname = "";
this.selectModel.thName = "";
this.selectModel.engName = "";
this.selectModel.country = new CountryModel();
this.selectModel.regio = new RegionModel();
this.selectedCountry = undefined;
this.selectedRegion = undefined
}
view(item: ProvinceModel) {
this.action = 'edit';
this.selectModel = new ProvinceModel(item);
if (this.selectModel.country && this.countryList) {
this.selectedCountry = this.countryList.find(
c => c.countryId === this.selectModel.country?.countryId
);
}
if (this.selectModel.region && this.regionList){
this.selectedRegion = this.regionList.find(
r => r.regionId === this.selectModel.region?.regionId
)
}
}
onCountryChange(selectedCountry: CountryModel): void {
this.selectedCountry = selectedCountry;
this.selectModel.country = selectedCountry;
}
compareCountries(country1: CountryModel, country2: CountryModel): boolean {
return country1 && country2 ? country1.countryId === country2.countryId : country1 === country2;
}
onRegionChange(selectedRegion: RegionModel): void {
this.selectedRegion = selectedRegion;
this.selectModel.region = selectedRegion;
}
compareRegion(region1: RegionModel, region2: RegionModel): boolean {
return region1 && region2 ? region1.regionId === region2.regionId : region1 === region2;
}
save() {
const checkprovince = this.selectModel;
if (!checkprovince.provinceId) {
swal({
title: "ข้อผิดพลาด!",
text: "กรุณาระบุรหัสจังหวัด",
icon: "warning",
buttons: ["ยกเลิก", "ยืนยัน"],
});
return;
} else if(!checkprovince.country){
swal({
title: "ข้อผิดพลาด!",
text: "กรุณาเลือกประเทศ",
icon: "warning",
buttons: ["ยกเลิก", "ยืนยัน"],
});
return;
} else if(!checkprovince.region){
swal({
title: "ข้อผิดพลาด!",
text: "กรุณาเลือกภูมิภาค",
icon: "warning",
buttons: ["ยกเลิก", "ยืนยัน"],
});
return;
}
console.log('Before Save, selectModel is:', this.selectModel);
swal({
title: "คุณแน่ใจหรือไม่?",
......@@ -149,6 +248,7 @@ export class ProvinceComponent {
console.log(result);
swal("บันทึกสำเร็จ!!", "บันทึกข้อมูลสมาชิก", "success");
this.ngOnInit();
this.childModal?.nativeElement.click();
}, error => {
console.error("เกิดข้อผิดพลาดในการบันทึก/อัปเดต:", error);
swal("ข้อผิดพลาด!!", "ไม่สามารถบันทึก/อัปเดตข้อมูลได้", "error");
......
src/app/DPU/services/region.service.ts 0 → 100644
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { environment } from "../../../environments/environment";
import { RegionModel } from '../models/Region.model';
@Injectable({
providedIn: 'root'
})
export class RegionService {
api = "/region"
urlApi = environment.baseUrl + "/region"
constructor(private http: HttpClient) { }
getById(regionId: string): Observable<RegionModel> {
return this.http.get<RegionModel>(this.urlApi + "/" + regionId)
}
getList(): Observable<RegionModel[]> {
return this.http.get<RegionModel[]>(this.urlApi + "/list")
}
post(body: RegionModel): Observable<any> {
return this.http.post(this.urlApi, body)
}
delete(body: RegionModel) {
const options = {
headers: new HttpHeaders({
"Content-Type": "application/json",
}),
body: body,
};
return this.http.delete(this.urlApi, options)
}
deleteById(regionId: string) {
const options = {
headers: new HttpHeaders({
"Content-Type": "application/json",
}),
body: {regionId : regionId},
};
return this.http.delete(this.urlApi, options)
}
}
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