171. Open edit model logic (#23 Section 24: User Page - Edit User)

support-portal-frontend/src/app/component/user/user.component.html

@@ -67,23 +67,23 @@
         </tr>
         </thead>
         <tbody>
-        <tr class="text-center" *ngFor="let appUser of users" (click)="onSelectUser(appUser)">
+        <tr class="text-center" *ngFor="let appUser of users">
-          <td>
+          <td (click)="onSelectUser(appUser)">
             <img height="40" width="40" src="{{appUser?.profileImageUrl}}"
                  class="rounded-circle img-fluid img-thumbnail" alt=""/>
           </td>
-          <td>{{appUser?.userId}}</td>
+          <td (click)="onSelectUser(appUser)">{{appUser?.userId}}</td>
-          <td>{{appUser?.firstName}}</td>
+          <td (click)="onSelectUser(appUser)">{{appUser?.firstName}}</td>
-          <td>{{appUser?.lastName}}</td>
+          <td (click)="onSelectUser(appUser)">{{appUser?.lastName}}</td>
-          <td>{{appUser?.username}}</td>
+          <td (click)="onSelectUser(appUser)">{{appUser?.username}}</td>
-          <td>{{appUser?.email}}</td>
+          <td (click)="onSelectUser(appUser)">{{appUser?.email}}</td>
-          <td>
+          <td (click)="onSelectUser(appUser)">
             <span class="badge bg-success" [hidden]="!appUser?.active">Active</span>
             <span class="badge bg-danger" [hidden]="appUser?.active">Inactive</span>
           </td>
           <td class="">
             <div class="btn-group">
-              <button class="btn btn-outline-info"><i class="fas fa-edit"></i></button>
+              <button class="btn btn-outline-info" (click)="onEditUser(appUser)"><i class="fas fa-edit"></i></button>
               <button class="btn btn-outline-danger"><i class="fas fa-trash"></i></button>
             </div>
           </td>
@@ -94,7 +94,7 @@
 
     <button [hidden]="true" type="button" id="openUserInfo" data-bs-toggle="modal" data-bs-target="#viewUserModal">
     </button>
-    <button [hidden]="true" type="button" id="openUserEdit" data-toggle="modal" data-bs-target="#editUserModal">
+    <button [hidden]="true" type="button" id="openUserEdit" data-bs-toggle="modal" data-bs-target="#editUserModal">
     </button>
 
     <!-- modal user info -->
@@ -258,6 +258,87 @@
       </div>
     </div>
 
+    <!-- modal edit user -->
+    <div class="modal draggable fade bd-example-modal-lg" id="editUserModal" tabindex="-1" role="dialog"
+         aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
+      <div class="modal-dialog" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title text-center">Edit User</h5>
+            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div class="modal-body">
+            <div>
+              <form #editUserForm="ngForm" (ngSubmit)="onAddNewUser(editUserForm)">
+                <div class="form-group">
+                  <label for="firstName">First Name</label>
+                  <input type="text" name="firstName" required ngModel="{{editUser.firstName}}" class="form-control">
+                </div>
+                <div class="form-group">
+                  <label for="lastName">Last Name</label>
+                  <input type="text" name="lastName" required ngModel class="form-control">
+                </div>
+                <div class="form-group">
+                  <label for="username">Username</label>
+                  <input type="text" name="username" required ngModel class="form-control">
+                </div>
+                <div class="form-group">
+                  <label for="email">Email</label>
+                  <input type="email" name="email" required ngModel class="form-control">
+                </div>
+                <div class="form-group">
+                  <label for="authority">Role</label>
+                  <select name="role" required ngModel="ROLE_USER" class="form-control">
+                    <option value="ROLE_USER">USER</option>
+                    <option value="ROLE_HR">HR</option>
+                    <option value="ROLE_MANAGER">MANAGER</option>
+                    <option value="ROLE_ADMIN">ADMIN</option>
+                    <option value="ROLE_SUPER_ADMIN">SUPER ADMIN</option>
+                  </select>
+                </div>
+                <div class="input-group mb-2">
+                  <div class="input-group-prepend">
+                    <span class="input-group-text">Profile Picture </span>
+                  </div>
+                  <div class="custom-file">
+                    <input type="file" accept="image/*" name="profileImage"
+                           (change)="onProfileImageChange($any($event).target.files)"
+                           class="custom-file-input">
+                    <label class="custom-file-label">
+                      <span [hidden]="!profileImageFileName">{{profileImageFileName}}</span>
+                      <span [hidden]="profileImageFileName">Choose File</span>
+                    </label>
+                  </div>
+                </div>
+                <fieldset class="form-group">
+                  <div class="form-check">
+                    <label class="form-check-label">
+                      <input type="checkbox" name="active" ngModel class="form-check-input">
+                      Active
+                    </label>
+                  </div>
+                  <div class="form-check disabled">
+                    <label class="form-check-label">
+                      <input type="checkbox" name="notLocked" ngModel class="form-check-input">
+                      Unlocked
+                    </label>
+                  </div>
+                </fieldset>
+                <button type="submit" style="display: none;" id="new-user-save"></button>
+              </form>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="new-user-close">Close</button>
+            <button type="button" class="btn btn-primary" (click)="saveNewUser()" [disabled]="newUserForm.invalid">Save
+              changes
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
 
   </div>
 </div>

support-portal-frontend/src/app/component/user/user.component.ts

@@ -23,6 +23,8 @@ export class UserComponent implements OnInit, OnDestroy {
   public selectedUser: User;
   public profileImageFileName: string | null;
   public profileImage: File | null;
+  public editUser: User = new User();
+  private currentUsername: string;
 
   constructor(private userService: UserService,
               private notificationService: NotificationService) {
@@ -128,4 +130,10 @@ export class UserComponent implements OnInit, OnDestroy {
   private clickButton(buttonId: string): void {
     document.getElementById(buttonId)?.click();
   }
+
+  public onEditUser(user: User): void {
+    this.editUser = user;
+    this.currentUsername = user.username;
+    this.clickButton('openUserEdit');
+  }
 }