Implemented getUser Api

implemented getUser Api to show the view and edit of the selected Id in the form. later removed the edit function

src/app/services/user-setup.service.ts

@@ -4,6 +4,7 @@ import { BehaviorSubject, Observable } from 'rxjs';
 import { URIKey } from '../utils/uri-enums';
 import { URIService } from '../app.uri';
 import { HttpURIService } from '../app.http.uri.service';
+import { HttpParams } from '@angular/common/http';
 
 @Injectable({
   providedIn: 'root'
@@ -109,4 +110,10 @@ loadUsers(): void {
   return this.httpURIService.requestPOST<SetupUser>(URIKey.CREATE_USER, payload);
 }
 
+
+getUserById(userId: any){
+  const params = new HttpParams().set('userId', userId)
+  
+  return this.httpURIService.requestGET(URIKey.GET_USER_BY_ID, params);
+}
 }

src/app/user-management/setup-user/setup-user.component.html

@@ -101,11 +101,10 @@
                                                         </div>
                                                          <div class="row g-3 mb-3">
                                                             <div class="col-md-6 ms-auto text-end">
-                                                                <button
-                                                                    type="button"
-                                                                    class="btn btn-primary waves-effect waves-light"
-                                                                    (click)="onSubmit()"
-                                                                    >{{'save' | translate}}</button>
+                                                            <button type="button" class="btn btn-primary waves-effect waves-light" (click)="onSubmit()"
+                                                              [hidden]="mode === 'view' && showForm">
+                                                              {{ 'save' | translate }}
+                                                            </button>
                                                              
                                                                
                                                             </div>
@@ -157,9 +156,9 @@
                             <table class="table mb-0 border">
                               <thead class="table-light">
                                 <tr>
-                                  <th style="width: 33%">{{'userID' | translate}}</th>
-                                  <th style="width: 33%">{{'Name' | translate}}</th>                             
-                                  <th style="width: 33%">{{'action' | translate}}</th> 
+                                  <th style="width: 40%">{{'userID' | translate}}</th>
+                                  <th style="width: 40%">{{'Name' | translate}}</th>                             
+                                  <th style="width: 20%">{{'action' | translate}}</th> 
                                 </tr>
                               </thead>
                               <tbody>
@@ -171,15 +170,10 @@
                                   <td>
                                     <div class="d-flex justify-content-center gap-2">
                               
-                                      <button class="btn btn-info btn-sm" title="View">
+                                      <button class="btn btn-info btn-sm" title="View" (click)="onView(item.userId)">
                                         <i class="mdi mdi-eye-outline"></i>
                                       </button>
                               
-                                      <button class="btn btn-secondary btn-sm" title="Edit">
-                                        <i class="fas fa-pen"></i>
-                                      </button>
-                              
-                              
                                       <button class="btn btn-danger btn-sm" title="Delete">
                                         <i class="fas fa-trash-alt"></i>
                                       </button>
@@ -203,7 +197,7 @@
   </div>
 
   <div class="text-muted">
-      {{ 'page' | translate }} {{ currentPage }} {{ 'of' | translate }} {{ totalPages() }} ({{ totalCount }} {{ 'totalItems' | translate }})
+      {{ 'page' | translate }} {{ currentPage }} {{ 'of' | translate }} {{ getTotalPages() }} ({{ totalCount }} {{ 'totalItems' | translate }})
   </div>
 
   <div class="btn-group">

src/app/user-management/setup-user/setup-user.component.ts

@@ -25,6 +25,11 @@ export class SetupUserComponent implements OnInit {
   userId!: string;
   userFullname!: string;
   defaultPassword!: string;
+  mode: 'edit' | 'view' = 'view';
+  showForm = false;
+  selectedUserId!: any;
+  user: any;
+
   constructor(private userService: UserSetupService){}
 
   onSearch(value: string): void {
@@ -50,7 +55,9 @@ export class SetupUserComponent implements OnInit {
   toggleCard(arg0: string) {
     throw new Error('Method not implemented.');
   }
-  
+  getTotalPages(): number {
+    return this.userService.getTotalPages();
+  }
   onSubmit() {
     if(!this.userId || !this.userFullname|| !this.defaultPassword){
        console.warn('Form incomplete');
@@ -73,6 +80,19 @@ export class SetupUserComponent implements OnInit {
       },
       error: (err: any) => console.error(err)
     });
+
+
+    
+  }
+  onView(userId: any){
+    this.mode = 'view';
+    this.showForm = true;
+    this.selectedUserId = userId;
+    this.userService.getUserById(userId).subscribe((user: any)=>{
+      this.userId = user.userId;
+      this.userFullname = user.userFullname;
+      this.defaultPassword = '';
+    })
   }
   
 ngOnInit(): void {

src/app/utils/uri-enums.ts

@@ -3,5 +3,6 @@ export enum URIKey {
     USER_LOGIN_URI = "USER_LOGIN_URI",
     USER_REFRESH_TOKEN = "USER_REFRESH_TOKEN",
     CREATE_USER = 'CREATE_USER',
-    GET_ALL_USERS = 'GET_ALL_USERS'
+    GET_ALL_USERS = 'GET_ALL_USERS',
+    GET_USER_BY_ID = 'GET_USER_BY_ID'
 }

src/assets/data/app.uri.json

@@ -26,6 +26,11 @@
                         "Id": "ENTITY_GET_ALL_USERS",
                         "URI": "/user/getAllUsers",
                         "UUID": "GET_ALL_USERS"
+                    },
+                    {
+                        "Id" : "ENTITY_GET_USER_BY_ID",
+                        "URI": "/user/getUser",
+                        "UUID": "GET_USER_BY_ID"
                     }
                 ]
             }