161. User info modal - Part 1 (#21)
This commit is contained in:
Art
@ -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">×</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>
|
||||
|
||||
@ -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')
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
Reference in New Issue
Block a user