Commit 03222346 by DESKTOP-E3GSHH7\myhr

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

parent ae496939
...@@ -169,7 +169,7 @@ ...@@ -169,7 +169,7 @@
<div class="xl:col-span-12 col-span-12"> <div class="xl:col-span-12 col-span-12">
<label for="provinceId" class="form-label">{{'provinceId' | translate}}</label> <label for="provinceId" class="form-label">{{'provinceId' | translate}}</label>
<input type="text" class="form-control" id="provinceId" placeholder="" [(ngModel)]="selectModel.provinceId" <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' }"> [ngClass]="{ '!bg-input-readonly': action === 'edit' }">
<div class="text-danger" *ngIf="!selectModel.provinceId && action === 'add'"> <div class="text-danger" *ngIf="!selectModel.provinceId && action === 'add'">
{{'Please fill in information' | translate}} {{'Please fill in information' | translate}}
...@@ -178,16 +178,14 @@ ...@@ -178,16 +178,14 @@
<div class="xl:col-span-6 col-span-12"> <div class="xl:col-span-6 col-span-12">
<label for="shortTname" class="form-label">{{'ชื่อย่อ(ไทย)' | translate}}</label> <label for="shortTname" class="form-label">{{'ชื่อย่อ(ไทย)' | translate}}</label>
<input type="text" class="form-control" id="shortTname" placeholder="" [(ngModel)]="selectModel.shortTname" <input type="text" class="form-control" id="shortTname" placeholder="" [(ngModel)]="selectModel.shortTname">
[disabled]="action === 'edit'">
<div class="text-danger" *ngIf="!selectModel.shortTname"> <div class="text-danger" *ngIf="!selectModel.shortTname">
{{'Please fill in information' | translate}} {{'Please fill in information' | translate}}
</div> </div>
</div> </div>
<div class="xl:col-span-6 col-span-12"> <div class="xl:col-span-6 col-span-12">
<label for="shortEname" class="form-label">{{'ชื่อย่อ(อังกฤษ)' | translate}}</label> <label for="shortEname" class="form-label">{{'ชื่อย่อ(อังกฤษ)' | translate}}</label>
<input type="text" class="form-control" id="shortEname" placeholder="" [(ngModel)]="selectModel.shortEname" <input type="text" class="form-control" id="shortEname" placeholder="" [(ngModel)]="selectModel.shortEname">
[disabled]="action === 'edit'">
<div class="text-danger" *ngIf="!selectModel.shortEname"> <div class="text-danger" *ngIf="!selectModel.shortEname">
{{'Please fill in information' | translate}} {{'Please fill in information' | translate}}
</div> </div>
...@@ -195,35 +193,62 @@ ...@@ -195,35 +193,62 @@
<div class="xl:col-span-6 col-span-12"> <div class="xl:col-span-6 col-span-12">
<label for="thName" class="form-label">{{'Description(TH)' | translate}}</label> <label for="thName" class="form-label">{{'Description(TH)' | translate}}</label>
<input type="text" class="form-control" id="thName" placeholder="" [(ngModel)]="selectModel.thName" <input type="text" class="form-control" id="thName" placeholder="" [(ngModel)]="selectModel.thName">
[disabled]="action === 'edit'">
<div class="text-danger" *ngIf="!selectModel.thName"> <div class="text-danger" *ngIf="!selectModel.thName">
{{'Please fill in information' | translate}} {{'Please fill in information' | translate}}
</div> </div>
</div> </div>
<div class="xl:col-span-6 col-span-12"> <div class="xl:col-span-6 col-span-12">
<label for="engName" class="form-label">{{'Description(ENG)' | translate}}</label> <label for="engName" class="form-label">{{'Description(ENG)' | translate}}</label>
<input type="text" class="form-control" id="engName" placeholder="" [(ngModel)]="selectModel.engName" <input type="text" class="form-control" id="engName" placeholder="" [(ngModel)]="selectModel.engName">
[disabled]="action === 'edit'">
<div class="text-danger" *ngIf="!selectModel.engName"> <div class="text-danger" *ngIf="!selectModel.engName">
{{'Please fill in information' | translate}} {{'Please fill in information' | translate}}
</div> </div>
</div> </div>
<!-- <div class="xl:col-span-12 col-span-12"> <div class="xl:col-span-12 col-span-12">
<div class="flex justify-center items-center" style="font-size: 12px;"> <label for="engName" class="form-label">{{'เลือกประเทศ' | translate}}</label>
<ng-select id="countrySelect" [items]="countryList" bindLabel="thName" bindValue="countryId" <ng-select id="countrySelect" #countrySelectRef [items]="countryList" bindLabel="thName" bindValue="this"
[(ngModel)]="selectedCountryId" [searchable]="true" (change)="onCountryChange($event)" [(ngModel)]="selectedCountry" (change)="onCountryChange($event)" placeholder="ค้นหาหรือเลือกประเทศ"
placeholder="ค้นหาหรือเลือกประเทศ"> [searchable]="true" [compareWith]="compareCountries"> <ng-template ng-header-tmp>
<ng-template ng-option-tmp let-item="item"> <input type="text" class="ti-form-input w-full form-controls"
<div>{{item.thName}} ({{item.engName}})</div> placeholder="{{'ค้นหาประเทศ...' | translate}}"
</ng-template> (input)="countrySelectRef.filter($any($event.target).value)" />
<ng-template ng-label-tmp let-item="item"> </ng-template>
<div>{{item.thName}}</div>
</ng-template> <ng-template ng-option-tmp let-item="item">
</ng-select> <div>{{item.thName}} ({{item.engName}})</div>
<p class="mt-2">ประเทศที่เลือก: {{ selectedCountryId }}</p> </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> --> </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>
<ng-template ng-label-tmp let-item="item">
<div>{{item.thName}}</div>
</ng-template>
</ng-select>
<div class="text-danger" *ngIf="!selectedRegion">
{{'Please fill in information' | translate}}
</div>
</div>
</div> </div>
</div> </div>
<div class="ti-modal-footer"> <div class="ti-modal-footer">
......
...@@ -12,6 +12,8 @@ import { ProvinceModel } from '../../../models/province.model'; ...@@ -12,6 +12,8 @@ import { ProvinceModel } from '../../../models/province.model';
import { ProvinceService } from '../../../services/province.service'; import { ProvinceService } from '../../../services/province.service';
import { CountryModel } from '../../../models/country.model'; import { CountryModel } from '../../../models/country.model';
import { RegionModel } from '../../../models/Region.model'; import { RegionModel } from '../../../models/Region.model';
import { CountryService } from '../../../services/country.service';
import { RegionService } from '../../../services/region.service';
@Component({ @Component({
selector: 'app-province', selector: 'app-province',
...@@ -29,6 +31,8 @@ import { RegionModel } from '../../../models/Region.model'; ...@@ -29,6 +31,8 @@ import { RegionModel } from '../../../models/Region.model';
styleUrl: './province.component.css', styleUrl: './province.component.css',
}) })
export class ProvinceComponent { export class ProvinceComponent {
@ViewChild('closeModal') public childModal?: ElementRef;
@ViewChild('modalDetail') public modalDetail?: ElementRef;
@ViewChild("ProvinceModel") ProvinceModel: any; @ViewChild("ProvinceModel") ProvinceModel: any;
dialogRef: any dialogRef: any
currentengNameTab: number = 1; currentengNameTab: number = 1;
...@@ -43,7 +47,10 @@ export class ProvinceComponent { ...@@ -43,7 +47,10 @@ export class ProvinceComponent {
selectedItems = new Map<string, boolean>(); selectedItems = new Map<string, boolean>();
countryList: CountryModel[] = []; countryList: CountryModel[] = [];
selectedCountry: CountryModel | undefined
regionList : RegionModel[] = []
selectedRegion: RegionModel | undefined
pageIndex = 0; pageIndex = 0;
...@@ -63,7 +70,13 @@ export class ProvinceComponent { ...@@ -63,7 +70,13 @@ export class ProvinceComponent {
_searchTerm = ""; _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 { ...@@ -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 { ngOnInit(): void {
this.getJobtype(); this.getJobtype();
this.getCountryList();
this.getRegionList();
} }
filter(v: string) { filter(v: string) {
...@@ -125,16 +172,68 @@ export class ProvinceComponent { ...@@ -125,16 +172,68 @@ export class ProvinceComponent {
this.selectModel.shortEname = ""; this.selectModel.shortEname = "";
this.selectModel.thName = ""; this.selectModel.thName = "";
this.selectModel.engName = ""; this.selectModel.engName = "";
this.selectModel.country = new CountryModel(); this.selectedCountry = undefined;
this.selectModel.regio = new RegionModel(); this.selectedRegion = undefined
} }
view(item: ProvinceModel) { view(item: ProvinceModel) {
this.action = 'edit'; this.action = 'edit';
this.selectModel = new ProvinceModel(item); 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() { 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); console.log('Before Save, selectModel is:', this.selectModel);
swal({ swal({
title: "คุณแน่ใจหรือไม่?", title: "คุณแน่ใจหรือไม่?",
...@@ -149,6 +248,7 @@ export class ProvinceComponent { ...@@ -149,6 +248,7 @@ export class ProvinceComponent {
console.log(result); console.log(result);
swal("บันทึกสำเร็จ!!", "บันทึกข้อมูลสมาชิก", "success"); swal("บันทึกสำเร็จ!!", "บันทึกข้อมูลสมาชิก", "success");
this.ngOnInit(); this.ngOnInit();
this.childModal?.nativeElement.click();
}, error => { }, error => {
console.error("เกิดข้อผิดพลาดในการบันทึก/อัปเดต:", error); console.error("เกิดข้อผิดพลาดในการบันทึก/อัปเดต:", error);
swal("ข้อผิดพลาด!!", "ไม่สามารถบันทึก/อัปเดตข้อมูลได้", "error"); swal("ข้อผิดพลาด!!", "ไม่สามารถบันทึก/อัปเดตข้อมูลได้", "error");
......
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