From e5d4c173242c6627588883470499a3899c2c2361 Mon Sep 17 00:00:00 2001
From: Art <d.art.shishkin@gmail.com>
Date: Tue, 21 Sep 2021 08:09:33 +0300
Subject: [PATCH] 161. User info modal - Part 1 (#21)

---
 .../app/component/user/user.component.html    | 93 +++++++++++++++++--
 .../src/app/component/user/user.component.ts  |  6 ++
 support-portal-frontend/src/index.html        | 15 ++-
 3 files changed, 104 insertions(+), 10 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 ed15c26..7206d28 100644
--- a/support-portal-frontend/src/app/component/user/user.component.html
+++ b/support-portal-frontend/src/app/component/user/user.component.html
@@ -64,7 +64,7 @@
         </tr>
         </thead>
         <tbody>
-        <tr class="text-center" *ngFor="let appUser of users">
+        <tr class="text-center" *ngFor="let appUser of users" (click)="onSelectUser(appUser)">
           <td>
             <img height="40" width="40" src="{{appUser?.profileImageUrl}}"
                  class="rounded-circle img-fluid img-thumbnail" alt=""/>
@@ -86,16 +86,91 @@
           </td>
         </tr>
         </tbody>
-
-        <button [hidden]="true" type="button" id="openUserInfo" data-toggle="modal" data-target="#viewUserModal">
-        </button>
-        <button [hidden]="true" type="button" id="openUserEdit" data-toggle="modal" data-target="#editUserModal">
-        </button>
-
       </table>
     </div>
 
+    <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-target="#editUserModal">
+    </button>
+
+    <!-- modal user info -->
+    <div *ngIf="selectedUser" class="modal fade bd-example-modal-lg" id="viewUserModal" tabindex="-1" role="dialog"
+         aria-labelledby=""
+         aria-hidden="true">
+      <div class="modal-dialog" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title text-center"
+                id="exampleModalLongTitle">{{selectedUser.firstName}} {{selectedUser.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>
+              <div class="card">
+                <div class="card-body">
+                  <div class="row">
+                    <div class="col-12 col-sm-auto">
+                      <div class="mx-auto" style="width: 120px;">
+                        <div class="d-flex justify-content-center align-items-center rounded">
+                          <img class="rounded" height="120" width="120" src="{{selectedUser.profileImageUrl}}"
+                               alt="{{selectedUser.username}}">
+                        </div>
+                      </div>
+                    </div>
+                    <div class="col d-flex flex-column flex-sm-row justify-content-between">
+                      <div class="text-center text-sm-left mb-sm-0">
+                        <h6 class="pt-sm-2 pb-1 mb-0 text-nowrap">{{selectedUser.firstName}} {{selectedUser.lastName}}</h6>
+                        <p class="mb-1">{{selectedUser.username}}</p>
+                        <div class="">Status:
+                          <span *ngIf="selectedUser.active" class="badge bg-success">Active</span>
+                          <span *ngIf="!selectedUser.active" class="badge bg-danger">Inactive</span>
+                        </div>
+                        <div class="text-muted"><small>Last
+                          Login: {{selectedUser.lastLoginDateDisplay}}</small>
+                        </div>
+                      </div>
+                      <div class="text-center text-sm-right">
+                        <div class="text-muted"><small>Joined {{selectedUser?.joinDate}}</small>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <ul class="list-group list-group-flush">
+                  <li class="list-group-item"></li>
+                  <li class="list-group-item"><i class="fa fa-id-badge float-end"></i>{{selectedUser?.userId}}
+                  </li>
+                  <li class="list-group-item"><i class="fa fa-envelope float-end"></i>{{selectedUser?.email}}
+                  </li>
+                  <li class="list-group-item"><i
+                    class="fas fa-shield-alt float-end"></i>
+                    {{selectedUser?.role}}
+                  <li class="list-group-item"><i
+                    class="fas fa-sign-in-alt float-end"></i>12.03.2222
+                  </li>
+                  <li class="list-group-item">
+                    <span *ngIf="!selectedUser?.notLocked">
+                      <i class="fa fa-lock float-end" style="color: red;"></i>
+                      Account Locked
+                    </span>
+                    <span *ngIf="selectedUser?.notLocked">
+                      <i class="fa fa-unlock float-end" style="color: green;"></i>
+                      Account Unlocked
+                    </span>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
   </div>
-
-
 </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 340ba3f..61d7512 100644
--- a/support-portal-frontend/src/app/component/user/user.component.ts
+++ b/support-portal-frontend/src/app/component/user/user.component.ts
@@ -19,6 +19,7 @@ export class UserComponent implements OnInit, OnDestroy {
   public users: User[] = [];
   public refreshing: boolean;
   private subscriptions: Subscription[] = [];
+  public selectedUser: User;
 
   constructor(private userService: UserService,
               private notificationService: NotificationService) {
@@ -58,6 +59,11 @@ export class UserComponent implements OnInit, OnDestroy {
 
   }
 
+  public onSelectUser(selectedUser: User): void {
+    this.selectedUser = selectedUser;
+    document.getElementById('openUserInfo')?.click();
+  }
+
   private sendErrorNotification(message: string) {
     this.notificationService.notify(NotificationType.ERROR, message ? message : 'An error occurred. Please try again')
   }
diff --git a/support-portal-frontend/src/index.html b/support-portal-frontend/src/index.html
index cea38e9..54f26c6 100644
--- a/support-portal-frontend/src/index.html
+++ b/support-portal-frontend/src/index.html
@@ -8,6 +8,19 @@
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
 <body>
-  <app-root></app-root>
+<app-root></app-root>
+
+<!--  Bootstrap core Javascript -->
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"
+        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
+<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
+        integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
+        integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN"
+        crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js"
+        integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/"
+        crossorigin="anonymous"></script>
+
 </body>
 </html>