Modal แก้ไข และการแสดงหน้าจอ

src/app/portal-manage/myjob/user-management/user-setting/user-setting.component.html

@@ -68,8 +68,8 @@
               </tr>
             </thead>
             <tbody>
-              @if (filterList.length > 0) {
-              @for(item of filterList;track filterList){
+              @if (pagedList.length > 0) {
+              @for(item of pagedList;track pagedList){
 
               <tr class="border border-defaultborder dark:border-defaultborder/10">
                 <td class="product-checkbox"><input class="form-check-input" type="checkbox"
@@ -148,35 +148,25 @@
         <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>
+              {{'Showing' | translate}} {{ (pageIndex * pageSize) + 1 }} – {{ showingEnd }} {{'entries' | translate}}
+              <i class="bi bi-arrow-right ms-2 font-semibold"></i>
             </div>
           </div>
           <div class="ms-auto">
-            <nav aria-label="Page navigation">
+            <nav aria-label="Page navigation" *ngIf="totalPages > 1">
               <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" [class.disabled]="pageIndex === 0">
+                  <a class="page-link px-3 py-[0.375rem] cursor-pointer" (click)="goPrev()">{{'Previous' | translate}}</a>
+                </li>
 
-                <li class="page-item"><a class="page-link active px-3 py-[0.375rem]"
-                    href="javascript:void(0);">{{pageIndex +1}}</a>
+                <li class="page-item" *ngFor="let p of pages">
+                  <a class="page-link px-3 py-[0.375rem] cursor-pointer"
+                    [class.active]="p === pageIndex"
+                    (click)="goTo(p)">{{ p + 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 class="page-item" [class.disabled]="pageIndex >= totalPages - 1">
+                  <a class="page-link px-3 py-[0.375rem] cursor-pointer" (click)="goNext()">{{'Next' | translate}}</a>
                 </li>
               </ul>
             </nav>
@@ -225,7 +215,7 @@
 
           <div class="xl:col-span-12 col-span-12" *ngIf="modalStatus=='edit'">
             <label for="deal-title" class="form-label">{{'Candidate ID' | translate}}</label>
-            <input type="text" class="form-control" [ngClass]="{ '!bg-input-readonly': action === 'edit' }"
+            <input type="text" class="form-control !bg-gray-200 cursor-not-allowed" [ngClass]="{ '!bg-input-readonly': action === 'edit' }"
               id="deal-title" placeholder="" [(ngModel)]="selectModel.candidateId" [readonly]="action === 'edit'">
             <div class="text-danger" *ngIf="!selectModel.candidateId">
               {{'Please fill in information' | translate}}
@@ -252,7 +242,7 @@
             </div>
           </div> -->
 
-          <div class="xl:col-span-6 col-span-12" *ngIf="modalStatus=='add'">
+          <div class="xl:col-span-6 col-span-12">
             <label for="deal-title" class="form-label">{{'Name(Thai)' | translate}}</label>
             <input type="text" class="form-control" id="deal-title" placeholder=""
               [(ngModel)]="selectModel.thFirstname">
@@ -260,14 +250,14 @@
               {{'Please fill in information' | translate}}
             </div>
           </div>
-          <div class="xl:col-span-6 col-span-12" *ngIf="modalStatus=='add'">
+          <div class="xl:col-span-6 col-span-12">
             <label for="deal-title" class="form-label">{{'Surname(Thai)' | translate}}</label>
             <input type="text" class="form-control" id="deal-title" placeholder="" [(ngModel)]="selectModel.thLastname">
             <div class="text-danger" *ngIf="!selectModel.thLastname">
               {{'Please fill in information' | translate}}
             </div>
           </div>
-          <div class="xl:col-span-6 col-span-12" *ngIf="modalStatus=='add'">
+          <div class="xl:col-span-6 col-span-12">
             <label for="deal-title" class="form-label">{{'Name(Eng)' | translate}}</label>
             <input type="text" class="form-control" id="deal-title" placeholder=""
               [(ngModel)]="selectModel.engFirstname">
@@ -275,7 +265,7 @@
               {{'Please fill in information' | translate}}
             </div>
           </div>
-          <div class="xl:col-span-6 col-span-12" *ngIf="modalStatus=='add'">
+          <div class="xl:col-span-6 col-span-12">
             <label for="deal-title" class="form-label">{{'Surname(Eng)' | translate}}</label>
             <input type="text" class="form-control" id="deal-title" placeholder=""
               [(ngModel)]="selectModel.engLastname">
@@ -283,28 +273,11 @@
               {{'Please fill in information' | translate}}
             </div>
           </div>
-          <div class="xl:col-span-6 col-span-12" *ngIf="modalStatus=='edit'">
-            <label for="deal-title" class="form-label">{{'Name-Surname(Thai)' | translate}}</label>
-            <input type="text" class="form-control" id="deal-title" placeholder="" [(ngModel)]="selectModel.thFullName"
-              [disabled]="action === 'edit'">
-            <div class="text-danger" *ngIf="!selectModel.thFullName">
-              {{'Please fill in information' | translate}}
-            </div>
-          </div>
-
-          <div class="xl:col-span-6 col-span-12" *ngIf="modalStatus=='edit'">
-            <label for="deal-title" class="form-label">{{'Name-Surname(Eng)' | translate}}</label>
-            <input type="text" class="form-control" id="deal-title" placeholder="" [disabled]="action === 'edit'"
-              [(ngModel)]="selectModel.engFullName">
-            <div class="text-danger" *ngIf="!selectModel.engFullName">
-              {{'Please fill in information' | translate}}
-            </div>
-          </div>
 
           <div class="xl:col-span-12 col-span-12">
             <label for="deal-title" class="form-label">{{ 'Email' | translate }}</label>
             <input type="text" class="form-control" id="deal-title" placeholder="" [(ngModel)]="selectModel.email"
-              [disabled]="action === 'edit'" (ngModelChange)="onEmailChange($event)" />
+             (ngModelChange)="onEmailChange($event)" />
             <div class="text-danger" *ngIf="!selectModel.email">
               {{ 'Please fill in information' | translate }}
             </div>
@@ -320,26 +293,59 @@
             </div>
           </div>
 
+          <!-- Change Password Section -->
+          <div class="xl:col-span-12 col-span-12" *ngIf="action === 'edit'">
+            <div class="flex justify-end">
+              <button type="button" (click)="togglePasswordFields()" class="ti-btn ti-btn-link text-primary !p-0">
+                {{ (showPasswordFields ? ('Cancel' | translate) : ('Change Password' | translate)) }}
+              </button>
+            </div>
+          </div>
 
-
-          <div class="xl:col-span-6 col-span-12" *ngIf="action !== 'edit'">
-            <label for="password" class="form-label">{{'Password' | translate}}</label>
-            <input type="password" class="form-control" id="password" placeholder="" [(ngModel)]="password">
-            <div class="text-danger" *ngIf="!password">
+          <!-- Unified password form for both add and edit -->
+          <ng-container *ngIf="action === 'add' || (showPasswordFields && action === 'edit')">
+            <div class="xl:col-span-6 col-span-12">
+              <label class="form-label">{{'Password' | translate}}</label>
+              <div class="relative">
+                <input *ngIf="action === 'add'" [type]="newPasswordVisible ? 'text' : 'password'" class="form-control" id="password" [placeholder]="'Password' | translate" [(ngModel)]="password" autocomplete="new-password" name="user-new-password">
+                <input *ngIf="action !== 'add'" [type]="newPasswordVisible ? 'text' : 'password'" class="form-control" id="newPassword" [placeholder]="'Enter new password' | translate" [(ngModel)]="newPassword" autocomplete="new-password" name="user-edit-new-password">
+                <button type="button" class="absolute top-1/2 end-3 -translate-y-1/2" (click)="newPasswordVisible = !newPasswordVisible">
+                  <i class="ri-eye-off-line" *ngIf="!newPasswordVisible"></i>
+                  <i class="ri-eye-line" *ngIf="newPasswordVisible"></i>
+                </button>
+              </div>
+              <div class="text-danger" *ngIf="action === 'add' && !password">
+                {{ 'Please fill in information' | translate }}
+              </div>
+              <div class="text-danger" *ngIf="action !== 'add' && !newPassword">
                 {{ 'Please fill in information' | translate }}
               </div>
             </div>
 
-          <div class="xl:col-span-6 col-span-12" *ngIf="action !== 'edit'">
-            <label for="deal-title" class="form-label">{{'Confirm Password' | translate}}</label>
-            <input type="password" class="form-control" id="deal-title" placeholder="" [(ngModel)]="confirmPassword">
-            <div class="text-danger" *ngIf="!confirmPassword">
-              {{'Please fill in information' | translate}}
+            <div class="xl:col-span-6 col-span-12">
+              <label class="form-label">{{'Confirm Password' | translate}}</label>
+              <div class="relative">
+                <input *ngIf="action === 'add'" [type]="confirmNewPasswordVisible ? 'text' : 'password'" class="form-control" id="confirmPassword" [placeholder]="'Confirm Password' | translate" [(ngModel)]="confirmPassword" autocomplete="new-password" name="user-confirm-password">
+                <input *ngIf="action !== 'add'" [type]="confirmNewPasswordVisible ? 'text' : 'password'" class="form-control" id="confirmNewPassword" [placeholder]="'Confirm new password' | translate" [(ngModel)]="confirmNewPassword" autocomplete="new-password" name="user-edit-confirm-new-password">
+                <button type="button" class="absolute top-1/2 end-3 -translate-y-1/2" (click)="confirmNewPasswordVisible = !confirmNewPasswordVisible">
+                  <i class="ri-eye-off-line" *ngIf="!confirmNewPasswordVisible"></i>
+                  <i class="ri-eye-line" *ngIf="confirmNewPasswordVisible"></i>
+                </button>
+              </div>
+              <div class="text-danger" *ngIf="action === 'add' && !confirmPassword">
+                {{ 'Please fill in information' | translate }}
               </div>
-            <div class="text-danger" *ngIf="confirmPassword && (confirmPassword != password)">
+              <div class="text-danger" *ngIf="action !== 'add' && !confirmNewPassword">
+                {{ 'Please fill in information' | translate }}
+              </div>
+              <div class="text-danger text-xs mt-1" *ngIf="action === 'add' && confirmPassword && (confirmPassword != password)">
                 {{'Password Not Match' | translate}}
               </div>
+              <div class="text-danger text-xs mt-1" *ngIf="action !== 'add' && confirmNewPassword && (confirmNewPassword != newPassword)">
+                {{'Password Not Match' | translate}}
               </div>
+            </div>
+          </ng-container>
 
 
           <!-- <div class="xl:col-span-12 col-span-12">
@@ -353,7 +359,7 @@
           <div class="xl:col-span-12 col-span-12">
             <label class="form-label">{{'Status' | translate}}</label>
             <ng-select name="choices-multiple-remove-button2" id="choices-multiple-remove-button2" placeholder=""
-              [disabled]="action === 'edit'" [(ngModel)]="selectModel.status">
+               [(ngModel)]="selectModel.status">
               <ng-option [value]="0">{{'Unactive' | translate}}</ng-option>
               <ng-option [value]="1">{{'Active' | translate}}</ng-option>
             </ng-select>
@@ -372,17 +378,33 @@
     !selectModel.thLastname ||
     !selectModel.engFirstname ||
     !selectModel.engLastname ||
-    (!selectModel.email || isEmailDuplicate || !selectModel.email.includes('@') || !selectModel.email.includes('.')) ||
+    (!selectModel.email || isEmailDuplicate || !selectModel.email.includes('@') || !selectModel.email.split('@')[1]?.includes('.')) ||
     !password || !confirmPassword || (confirmPassword !== password)
   " [disabled]="
     !selectModel.thFirstname ||
     !selectModel.thLastname ||
     !selectModel.engFirstname ||
     !selectModel.engLastname ||
-    (!selectModel.email || isEmailDuplicate || !selectModel.email.includes('@') || !selectModel.email.includes('.')) ||
+    (!selectModel.email || isEmailDuplicate || !selectModel.email.includes('@') || !selectModel.email.split('@')[1]?.includes('.')) ||
     !password || !confirmPassword || (confirmPassword !== password)">
           {{ 'Save' | translate }}
         </button>
+        <button type="button" *ngIf="modalStatus=='edit'" (click)="save()"
+          class="ti-btn bg-primary text-white !font-medium"
+          [class.ti-btn-disabled]="
+    !selectModel.thFirstname ||
+    !selectModel.thLastname ||
+    !selectModel.engFirstname ||
+    !selectModel.engLastname ||
+    (!selectModel.email || !selectModel.email.includes('@') || !selectModel.email.split('@')[1]?.includes('.'))
+  " [disabled]="
+    !selectModel.thFirstname ||
+    !selectModel.thLastname ||
+    !selectModel.engFirstname ||
+    !selectModel.engLastname ||
+    (!selectModel.email || !selectModel.email.includes('@') || !selectModel.email.split('@')[1]?.includes('.'))">
+          {{ 'Save' | translate }}
+        </button>
       </div>
     </div>
   </div>

src/app/portal-manage/myjob/user-management/user-setting/user-setting.component.ts

@@ -14,6 +14,7 @@ import { TokenService } from "../../../../shared/services/token.service";
 import { RoleModel } from "../../../models/role.model";
 import { AuthModel } from "../../../models/auth.model";
 import { ProfileModel } from "../../../models/profile.model";
+import { Observable, forkJoin } from "rxjs";
 
 @Component({
   selector: 'app-user-setting',
@@ -39,30 +40,42 @@ export class UserSettingComponent {
   confirmPassword = ""
   itemsList: ProfileModel[] = []
   filterList: ProfileModel[] = []
+  pagedList: ProfileModel[] = [];
   selectModel: ProfileModel = new ProfileModel()
   selectedItems = new Map<string, boolean>();
   roleList: RoleModel[] = []
   empList: ProfileModel[] = []
   descName = 'engName'
   pageIndex = 0;
+  pageSize = 10;
+  totalCount = 0;
+  totalPages = 1;
   uploaderProfile: FileUploader | undefined;
   uploadErrorMsg: string = "";
   modalStatus: "add" | "edit" = "add"
   existingEmails: ProfileModel[] = []
   isEmailDuplicate = false;
   password: string = '';
+
+  showPasswordFields = false;
+  newPassword = '';
+  confirmNewPassword = '';
+  newPasswordVisible = false;
+  confirmNewPasswordVisible = false;
+
   get searchTerm(): string {
     return this._searchTerm;
   }
   set searchTerm(val: string) {
     this.pageIndex = 0;
-    this.allSelected = false
+    this.allSelected = false;
     this._searchTerm = val;
     if (val != '') {
       this.filterList = this.filter(val);
     } else {
-      this.updatePagedItems()
+      this.filterList = this.itemsList.slice();
     }
+    this.onSearchChange();
   }
 
   _searchTerm = "";
@@ -70,6 +83,14 @@ export class UserSettingComponent {
     this.uploadConfig()
   }
 
+  togglePasswordFields() {
+    this.showPasswordFields = !this.showPasswordFields;
+    if (!this.showPasswordFields) {
+      this.newPassword = '';
+      this.confirmNewPassword = '';
+    }
+  }
+
   uploadConfig() {
     this.uploaderProfile = new FileUploader({
       url: environment.baseUrl + "/files/upload-image",
@@ -125,8 +146,9 @@ export class UserSettingComponent {
     ngOnInit(): void {
       this.userService.getListsProfile().subscribe(result => {
         this.itemsList = result.map(item => new ProfileModel(item, this.translate));
-      this.filterList = [...this.itemsList];
+        this.filterList = this.itemsList.slice();
         this.existingEmails = result;
+        this.updatePagedItems();
       });
   
     }
@@ -175,13 +197,18 @@ export class UserSettingComponent {
       this.action = 'add'
       this.selectModel = new ProfileModel()
       this.selectModel.status = 1;
+      this.showPasswordFields = false;
+      this.newPassword = '';
+      this.confirmNewPassword = '';
     }
   
     view(item: ProfileModel) {
       this.action = 'edit'
       this.confirmPassword = ''
       this.selectModel = new ProfileModel(item)
-
+      this.showPasswordFields = false;
+      this.newPassword = '';
+      this.confirmNewPassword = '';
     }
   
     save() {
@@ -233,14 +260,34 @@ export class UserSettingComponent {
             });
   
           } else if (this.action === 'edit') {
-          this.userService.update(this.selectModel).subscribe({
-            next: result => {
-              swal("Update Success!!", "บันทึกข้อมูลสมาชิก", "success");
+            const observables: Observable<any>[] = [];
+  
+            observables.push(this.userService.update(this.selectModel));
+  
+            if (this.showPasswordFields && this.newPassword && this.newPassword === this.confirmNewPassword) {
+                const authData = new AuthModel();
+                authData.username = this.selectModel.email;
+                authData.password = this.newPassword;
+                authData.profile = new ProfileModel({ 
+                  candidateId: this.selectModel.candidateId,
+                  profileId: this.selectModel.profileId
+                });
+  
+                observables.push(this.userService.editPassword(authData));
+            } else if (this.showPasswordFields && (this.newPassword || this.confirmNewPassword)) {
+                swal("Invalid Password", "Please ensure passwords match.", "warning");
+                return;
+            }
+  
+            forkJoin(observables).subscribe({
+                next: results => {
+                    swal("Update Success!!", "บันทึกข้อมูลเรียบร้อยแล้ว", "success");
                     this.ngOnInit();
                     this.childModal?.nativeElement.click();
                 },
                 error: err => {
-              swal("Error", "ไม่สามารถอัปเดตได้", "error");
+                    console.error('Update failed:', err);
+                    swal("Error", "เกิดข้อผิดพลาดในการอัปเดตข้อมูล", "error");
                 }
             });
           }
@@ -252,9 +299,47 @@ export class UserSettingComponent {
   
   
     updatePagedItems() {
-    const startIndex = this.pageIndex * 10;
-    const endIndex = startIndex + 10;
-    this.filterList = this.itemsList.slice(startIndex, endIndex);
+      this.totalCount = this.filterList.length;
+      this.totalPages = Math.max(1, Math.ceil(this.totalCount / this.pageSize));
+  
+      const startIndex = this.pageIndex * this.pageSize;
+      const endIndex = startIndex + this.pageSize;
+  
+      this.pagedList = this.filterList.slice(startIndex, endIndex);
+    }
+  
+    onSearchChange() {
+      this.pageIndex = 0;
+      this.updatePagedItems();
+    }
+  
+    get pages(): number[] {
+      return Array.from({ length: this.totalPages }, (_, i) => i);
+    }
+  
+    get showingEnd(): number {
+      return Math.min((this.pageIndex + 1) * this.pageSize, this.totalCount);
+    }
+  
+    goPrev() {
+      if (this.pageIndex > 0) {
+        this.pageIndex--;
+        this.updatePagedItems();
+      }
+    }
+  
+    goNext() {
+      if (this.pageIndex < this.totalPages - 1) {
+        this.pageIndex++;
+        this.updatePagedItems();
+      }
+    }
+  
+    goTo(p: number) {
+      if (p >= 0 && p < this.totalPages && p !== this.pageIndex) {
+        this.pageIndex = p;
+        this.updatePagedItems();
+      }
     }
   
   toggleAll(event: any) {

src/app/portal-manage/services/user.service.ts

@@ -109,6 +109,9 @@ export class UserService {
   registerCompany(body: AuthModel) {
     return this.http.post<ResponseModel>(this.apiAuthComUrl + "/register", body);
   }
+  editPassword(body: AuthModel) {
+    return this.http.post<ResponseModel>("/users", body)
+  }
   editPasswordCompany(body: AuthModel) {
     return this.http.post<ResponseModel>("/users/company", body)
   }