158. Adding user table template (#21)

This commit is contained in:
Art
2021-09-20 16:55:41 +03:00
parent c49481f3c9
commit 3b1f4df55a

View File

@ -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>