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

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,35 +193,62 @@
 
           <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="ค้นหาหรือเลือกประเทศ">
-                <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 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>
+
+          <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 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

+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)
+  }
+
+}