345 lines
16 KiB
HTML
345 lines
16 KiB
HTML
<div class="container">
|
|
<div class="row mb-2 mt-2 text-center">
|
|
<div class="col-md-4">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<h5>User Management Portal</h5>
|
|
<small *ngIf="titleAction$ | async as title">{{title}}</small>
|
|
</div>
|
|
<div class="col-md-4">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- nav bar -->
|
|
<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">
|
|
<i class="fa fa-users"></i>
|
|
Users
|
|
</a>
|
|
<a class="nav-item nav-link ml-3" (click)="changeTitle('Settings')" data-toggle="tab">
|
|
<i class="fa fa-cogs"></i>
|
|
Settings
|
|
</a>
|
|
<a class="nav-item nav-link move-right mr-3" (click)="changeTitle('Profile')" data-toggle="tab">
|
|
Welcome,
|
|
<i class="fa fa-user"></i>
|
|
</a>
|
|
</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="searchTerm" #searchTerm="ngModel" class="form-control mr-sm-2" type="search" placeholder="Search users..."
|
|
ngModel (ngModelChange)="searchUsers(searchTerm.value)">
|
|
</form>
|
|
|
|
<button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#addUserModal">
|
|
<i class="fa fa-plus"></i>New User
|
|
</button>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-info" (click)="getUsers(true)">
|
|
<i *ngIf="refreshing" class="fas fa-sync fa-spin"></i>
|
|
<i *ngIf="!refreshing" 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" *ngFor="let appUser of users">
|
|
<td (click)="onSelectUser(appUser)">
|
|
<img height="40" width="40" src="{{appUser?.profileImageUrl}}"
|
|
class="rounded-circle img-fluid img-thumbnail" alt=""/>
|
|
</td>
|
|
<td (click)="onSelectUser(appUser)">{{appUser?.userId}}</td>
|
|
<td (click)="onSelectUser(appUser)">{{appUser?.firstName}}</td>
|
|
<td (click)="onSelectUser(appUser)">{{appUser?.lastName}}</td>
|
|
<td (click)="onSelectUser(appUser)">{{appUser?.username}}</td>
|
|
<td (click)="onSelectUser(appUser)">{{appUser?.email}}</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" (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>
|
|
</tr>
|
|
</tbody>
|
|
</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-bs-toggle="modal" data-bs-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">×</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 *ngIf="selectedUser.lastLoginDateDisplay" class="text-muted">
|
|
<small>Last Login: {{selectedUser.lastLoginDateDisplay | date: 'medium' }}</small>
|
|
</div>
|
|
</div>
|
|
<div class="text-center text-sm-right">
|
|
<div class="text-muted"><small>Joined {{selectedUser.joinDate | date: 'medium' }}</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?.substring(5)}}
|
|
<li *ngIf="selectedUser.lastLoginDateDisplay" class="list-group-item">
|
|
<i class="fas fa-sign-in-alt float-end"></i>
|
|
{{ selectedUser.lastLoginDateDisplay | date: 'medium' }}
|
|
</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>
|
|
|
|
<!-- modal add user -->
|
|
<div class="modal draggable fade bd-example-modal-lg" id="addUserModal" 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">New User</h5>
|
|
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div>
|
|
<form #newUserForm="ngForm" (ngSubmit)="onAddNewUser(newUserForm)">
|
|
<div class="form-group">
|
|
<label for="firstName">First Name</label>
|
|
<input type="text" name="firstName" required ngModel 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>
|
|
|
|
<!-- 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">×</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>
|