178. User profile template (#26 Section 27: User Page - Profile)
This commit is contained in:
Art
@ -22,8 +22,9 @@
|
||||
<i class="fa fa-cogs"></i>
|
||||
Settings
|
||||
</a>
|
||||
<a class="nav-item nav-link move-right mr-3" (click)="changeTitle('Profile')" data-bs-toggle="tab" href="#profile">
|
||||
Welcome, You ugly animal
|
||||
<a class="nav-item nav-link move-right mr-3" (click)="changeTitle('Profile')" data-bs-toggle="tab"
|
||||
href="#profile">
|
||||
Welcome, {{loggedInUser.firstName}} {{loggedInUser.lastName}}
|
||||
<i class="fa fa-user"></i>
|
||||
</a>
|
||||
</div>
|
||||
@ -37,9 +38,10 @@
|
||||
<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 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">
|
||||
@ -84,7 +86,8 @@
|
||||
<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" (click)="onDeleteUser(appUser)"><i class="fas fa-trash"></i></button>
|
||||
<button class="btn btn-outline-danger" (click)="onDeleteUser(appUser)"><i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@ -117,6 +120,169 @@
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- user profile -->
|
||||
<div class="tab-pane fade" id="profile">
|
||||
<div class="container">
|
||||
<div class="row flex-lg-nowrap">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col mb-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="e-profile">
|
||||
<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="135" width="135" src="{{loggedInUser?.profileImageUrl}}"
|
||||
alt="">
|
||||
</div>
|
||||
<div *ngIf="true" class="progress mt-1">
|
||||
<div class="progress-bar bg-info" role="progressbar"
|
||||
[style.width.%]="50" aria-valuenow="0" aria-valuemin="0"
|
||||
aria-valuemax="100">50%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col d-flex flex-column flex-sm-row justify-content-between mb-3">
|
||||
<div class="text-center text-sm-left mb-2 mb-sm-0">
|
||||
<h4
|
||||
class="pt-sm-2 pb-1 mb-0 text-nowrap">{{loggedInUser?.firstName}} {{loggedInUser?.lastName}}</h4>
|
||||
<p class="mb-0">{{loggedInUser?.username}}</p>
|
||||
<div *ngIf="loggedInUser?.lastLoginDateDisplay !== null" class="text-muted"><small>Last
|
||||
login:
|
||||
{{loggedInUser?.lastLoginDateDisplay | date:'medium'}}</small></div>
|
||||
<div class="mt-2">
|
||||
<button class="btn btn-primary" type="button">
|
||||
<i class="fa fa-fw fa-camera"></i>
|
||||
<span>Change Photo</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center text-sm-right">
|
||||
<div class="text-muted"><small>Joined {{loggedInUser?.joinDate | date:'mediumDate'}}</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-content pt-3">
|
||||
<div class="tab-pane active">
|
||||
<form #profileUserForm="ngForm" (ngSubmit)="onUpdateCurrentUser(profileUserForm)"
|
||||
class="form"
|
||||
novalidate>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="form-group">
|
||||
<label>First Name</label>
|
||||
<input type="text" name="firstName" required [(ngModel)]="loggedInUser.firstName"
|
||||
class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="form-group">
|
||||
<label>Last Name</label>
|
||||
<input type="text" name="lastName" required [(ngModel)]="loggedInUser.lastName"
|
||||
class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="form-group">
|
||||
<label>Username</label>
|
||||
<input type="text" name="username" required [(ngModel)]="loggedInUser.username"
|
||||
class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="form-group">
|
||||
<label>Email</label>
|
||||
<input type="text" name="email" required [(ngModel)]="loggedInUser.email"
|
||||
class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col mb-3">
|
||||
<div class="form-group">
|
||||
<label>Role</label><small [hidden]="false">(read only)</small>
|
||||
<select name="role" required [(ngModel)]="loggedInUser.role" class="form-control">
|
||||
<option [hidden]="false" value="ROLE_USER">USER</option>
|
||||
<option [hidden]="false" value="ROLE_HR">HR</option>
|
||||
<option [hidden]="false" value="ROLE_MANAGER">MANAGER</option>
|
||||
<option [hidden]="false" value="ROLE_ADMIN">ADMIN</option>
|
||||
<option [hidden]="false" value="ROLE_SUPER_ADMIN">SUPER ADMIN</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-5 offset-sm-1 mb-3">
|
||||
<div class="mb-2"><b>Account Settings</b></div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="custom-controls-stacked px-2">
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input name="active" type="checkbox" [(ngModel)]="loggedInUser.active"
|
||||
class="custom-control-input">
|
||||
<label class="custom-control-label">Active</label>
|
||||
</div>
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input name="notLocked" type="checkbox"
|
||||
[(ngModel)]="loggedInUser.notLocked" class="custom-control-input">
|
||||
<label class="custom-control-label">Unlocked</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col d-flex justify-content-end">
|
||||
<button class="btn btn-primary" type="submit">
|
||||
<i *ngIf="refreshing" class="fas fa-spinner fa-spin"></i>
|
||||
<span *ngIf="refreshing">Loading...</span>
|
||||
<span *ngIf="!refreshing">Save Changes</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-3 mb-3">
|
||||
<div class="card mb-3">
|
||||
<div class="card-body">
|
||||
<div class="px-xl-3">
|
||||
<button (click)="onLogOut()" class="btn btn-block btn-secondary">
|
||||
<span>Logout</span>
|
||||
<i class="fas fa-sign-in-alt ml-1"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="card-title font-weight-bold">Permissions From Role</h6>
|
||||
<h6 *ngFor="let authority of loggedInUser?.authorities" class="card-text">{{authority}}</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- modal user info -->
|
||||
<div *ngIf="selectedUser" class="modal fade bd-example-modal-lg" id="viewUserModal" tabindex="-1" role="dialog"
|
||||
@ -351,8 +517,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="closeEditUserButton">Close</button>
|
||||
<button type="button" class="btn btn-primary" (click)="onUpdateUser()" [disabled]="editUserForm.invalid">Save
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="closeEditUserButton">Close
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" (click)="onUpdateUser()" [disabled]="editUserForm.invalid">
|
||||
Save
|
||||
changes
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -7,6 +7,7 @@ import {NotificationType} from "../../notification/notification-type";
|
||||
import {HttpErrorResponse} from "@angular/common/http";
|
||||
import {NgForm} from "@angular/forms";
|
||||
import {CustomHttpResponse} from "../../dto/custom-http-response";
|
||||
import {AuthenticationService} from "../../service/authentication.service";
|
||||
|
||||
@Component({
|
||||
selector: 'app-user',
|
||||
@ -19,6 +20,9 @@ export class UserComponent implements OnInit, OnDestroy {
|
||||
public titleAction$ = this.titleSubject.asObservable();
|
||||
|
||||
public users: User[] = [];
|
||||
|
||||
public loggedInUser: User;
|
||||
|
||||
public refreshing: boolean;
|
||||
private subscriptions: Subscription[] = [];
|
||||
public selectedUser: User;
|
||||
@ -28,11 +32,13 @@ export class UserComponent implements OnInit, OnDestroy {
|
||||
private currentUsername: string;
|
||||
|
||||
constructor(private userService: UserService,
|
||||
private notificationService: NotificationService) {
|
||||
private notificationService: NotificationService,
|
||||
private authenticationService: AuthenticationService) {
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.getUsers(true);
|
||||
this.loggedInUser = this.authenticationService.getUserFromLocalStorage();
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
@ -193,4 +199,12 @@ export class UserComponent implements OnInit, OnDestroy {
|
||||
);
|
||||
this.subscriptions.push(subscription);
|
||||
}
|
||||
|
||||
onUpdateCurrentUser(profileUserForm: any) {
|
||||
|
||||
}
|
||||
|
||||
onLogOut() {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user