From 49e705ff31a38cd35f709c6b676444c05a0d114c Mon Sep 17 00:00:00 2001
From: Art <d.art.shishkin@gmail.com>
Date: Tue, 21 Sep 2021 20:52:24 +0300
Subject: [PATCH] 172. Edit user back end call (#23)

---
 .../app/component/user/user.component.html    | 23 +++++++++----------
 .../src/app/component/user/user.component.ts  | 17 ++++++++++++++
 .../src/app/service/user.service.ts           |  4 ++--
 3 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/support-portal-frontend/src/app/component/user/user.component.html b/support-portal-frontend/src/app/component/user/user.component.html
index 15d4cde..a5ae6bc 100644
--- a/support-portal-frontend/src/app/component/user/user.component.html
+++ b/support-portal-frontend/src/app/component/user/user.component.html
@@ -264,33 +264,33 @@
       <div class="modal-dialog" role="document">
         <div class="modal-content">
           <div class="modal-header">
-            <h5 class="modal-title text-center">Edit User</h5>
+            <h5 class="modal-title text-center">Edit {{editUser.firstName}} {{editUser.lastName}}</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)">
+              <form #editUserForm="ngForm">
                 <div class="form-group">
                   <label for="firstName">First Name</label>
-                  <input type="text" name="firstName" required ngModel="{{editUser.firstName}}" class="form-control">
+                  <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">
+                  <input type="text" name="lastName" required [(ngModel)]="editUser.lastName" class="form-control">
                 </div>
                 <div class="form-group">
                   <label for="username">Username</label>
-                  <input type="text" name="username" required ngModel class="form-control">
+                  <input type="text" name="username" required [(ngModel)]="editUser.username" class="form-control">
                 </div>
                 <div class="form-group">
                   <label for="email">Email</label>
-                  <input type="email" name="email" required ngModel class="form-control">
+                  <input type="email" name="email" required [(ngModel)]="editUser.email" class="form-control">
                 </div>
                 <div class="form-group">
                   <label for="authority">Role</label>
-                  <select name="role" required ngModel="ROLE_USER" class="form-control">
+                  <select name="role" required [(ngModel)]="editUser.role" class="form-control">
                     <option value="ROLE_USER">USER</option>
                     <option value="ROLE_HR">HR</option>
                     <option value="ROLE_MANAGER">MANAGER</option>
@@ -315,24 +315,23 @@
                 <fieldset class="form-group">
                   <div class="form-check">
                     <label class="form-check-label">
-                      <input type="checkbox" name="active" ngModel class="form-check-input">
+                      <input type="checkbox" name="active" [(ngModel)]="editUser.active" 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">
+                      <input type="checkbox" name="notLocked" [(ngModel)]="editUser.notLocked" 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
+            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="closeEditUserButton">Close</button>
+            <button type="button" class="btn btn-primary" (click)="onUpdateUser()" [disabled]="editUserForm.invalid">Save
               changes
             </button>
           </div>
diff --git a/support-portal-frontend/src/app/component/user/user.component.ts b/support-portal-frontend/src/app/component/user/user.component.ts
index c6ce48b..1a662d4 100644
--- a/support-portal-frontend/src/app/component/user/user.component.ts
+++ b/support-portal-frontend/src/app/component/user/user.component.ts
@@ -136,4 +136,21 @@ export class UserComponent implements OnInit, OnDestroy {
     this.currentUsername = user.username;
     this.clickButton('openUserEdit');
   }
+
+  public onUpdateUser(): void {
+    const formData = this.userService.createUserFormData(this.currentUsername, this.editUser, this.profileImage);
+    let subscription = this.userService.updateUser(formData)
+      .subscribe(
+        (user: User) => {
+          this.clickButton('closeEditUserButton');
+          this.getUsers(false);
+          this.invalidateVariables();
+          this.notificationService.notify(NotificationType.SUCCESS, `User ${user.username} updated successfully`);
+        },
+        (errorResponse: HttpErrorResponse) => {
+          this.sendErrorNotification(errorResponse.error.message);
+        }
+      );
+    this.subscriptions.push(subscription);
+  }
 }
diff --git a/support-portal-frontend/src/app/service/user.service.ts b/support-portal-frontend/src/app/service/user.service.ts
index 503f605..d9e4c4c 100644
--- a/support-portal-frontend/src/app/service/user.service.ts
+++ b/support-portal-frontend/src/app/service/user.service.ts
@@ -26,10 +26,10 @@ export class UserService {
       .post<User>(`${this.host}/user/add`, formData);
   }
 
-  public updateUser(formData: FormData): Observable<User | HttpErrorResponse> {
+  public updateUser(formData: FormData): Observable<User> {
     let currentUsername = formData.get(`currentUsername`);
     return this.httpClient
-      .put<User | HttpErrorResponse>(`${this.host}/user/${currentUsername}`, formData);
+      .put<User>(`${this.host}/user/${currentUsername}`, formData);
   }
 
   public resetPassword(email: string): Observable<CustomHttpResponse> {