From 3b1f4df55a0f615e7627e0c4ca7843e13f71752a Mon Sep 17 00:00:00 2001
From: Art <d.art.shishkin@gmail.com>
Date: Mon, 20 Sep 2021 16:55:41 +0300
Subject: [PATCH] 158. Adding user table template (#21)

---
 .../app/component/user/user.component.html    | 69 ++++++++++++++++++-
 1 file changed, 68 insertions(+), 1 deletion(-)

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 6129838..5fc522b 100644
--- a/support-portal-frontend/src/app/component/user/user.component.html
+++ b/support-portal-frontend/src/app/component/user/user.component.html
@@ -14,7 +14,7 @@
   <nav class="navbar navbar-expand-md breadcrumb">
     <div class="collapse navbar-collapse" id="navbarCollapse">
       <div class="nav nav-pills">
-        <a class="nav-item nav-link active ml-1" (click)="changeTitle('Users')" data-toggle="tab" >
+        <a class="nav-item nav-link active ml-1" (click)="changeTitle('Users')" data-toggle="tab">
           <i class="fa fa-users"></i>
           Users
         </a>
@@ -29,4 +29,71 @@
       </div>
     </div>
   </nav>
+
+  <!-- main content -->
+  <div class="tab-content mt-3" id="myTabContent">
+    <!-- user table -->
+    <div class="tab-pane fade show active" id="users">
+      <div class="mb-3 float-end">
+        <div class="btn-group mr-2">
+          <form class="form-inline my-2 my-lg-0 justify-content-center">
+            <input name="searchFileName" class="form-control mr-sm-2" type="search" placeholder="Search users...">
+          </form>
+          <button type="button" class="btn btn-info" data-toggle="modal" data-target="#addUserModal">
+            <i class="fa fa-plus"></i>New User
+          </button>
+        </div>
+        <div class="btn-group">
+          <button type="button" class="btn btn-info">
+            <i class="fas fa-sync fa-spin"></i><i class="fas fa-sync"></i>
+          </button>
+        </div>
+      </div>
+      <table class="table table-hover">
+        <thead class="table-borderless">
+        <tr class="text-center">
+          <th>Photo</th>
+          <th>User ID</th>
+          <th>First Name</th>
+          <th>Last Name</th>
+          <th>Username</th>
+          <th>Email</th>
+          <th>Status</th>
+          <th>Actions</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr class="text-center">
+          <td>
+            <img height="40" width="40" src="" class="rounded-circle img-fluid img-thumbnail" alt=""/>
+          </td>
+          <td>123456</td>
+          <td>Art</td>
+          <td>Shyshkin</td>
+          <td>art.shyshkin</td>
+          <td>art.shyshkin@example.com</td>
+          <td>
+            <span class="badge bg-success">Active</span>
+            <span class="badge bg-danger">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-danger"><i class="fas fa-trash"></i></button>
+            </div>
+          </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>
+
+  </div>
+
+
 </div>