admin/cmc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

31.5. Profile Component Base Implementation (#31)

Browse Source
This commit is contained in:
Art
2021-10-08 15:07:01 +03:00
parent eed99b2119
commit ac51c5cd37
2 changed files with 291 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
support-portal-frontend/src/app/component/management/profile/profile.component.html
View File

@ -1 +1,170 @@
<p>profile works!</p>
<!-- user profile -->
<div class="tab-pane fade show active" 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="fileUploadStatus?.status==='progress'" class="progress mt-1">
<div class="progress-bar bg-info" role="progressbar"
[style.width.%]="fileUploadStatus?.percentage" aria-valuenow="0" aria-valuemin="0"
aria-valuemax="100">{{fileUploadStatus?.percentage}}%
</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 (click)="updateProfileImage()" 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.value)"
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]="isAdmin">(read only)</small>
<select [disabled]="!isAdmin" name="role" required [(ngModel)]="loggedInUser.role"
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>
</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 [disabled]="!isAdmin" 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 [disabled]="!isAdmin" 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>&nbsp;&nbsp;
<span>{{refreshing ? 'Loading...' : '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>
<!-- profile image change form -->
<form enctype="multipart/form-data" style="display:none;">
<input type="file"
(change)="onProfileImageChange($any($event).target.files); onUpdateProfileImage()"
name="profile-image-input" id="profile-image-input" placeholder="file" accept="image/*"/>
</form>

123
support-portal-frontend/src/app/component/management/profile/profile.component.ts
View File

@ -1,4 +1,13 @@
import {Component, OnInit} from '@angular/core';
import {AuthenticationService} from "../../../service/authentication.service";
import {User} from "../../../model/user";
import {FileUploadStatus} from "../../../model/file-upload.status";
import {NotificationType} from "../../../notification/notification-type";
import {HttpErrorResponse, HttpEvent, HttpEventType} from "@angular/common/http";
import {SubSink} from "subsink";
import {UserService} from "../../../service/user.service";
import {NotificationService} from "../../../service/notification.service";
import {Router} from "@angular/router";
@Component({
selector: 'app-profile',
@ -7,9 +16,119 @@ import {Component, OnInit} from '@angular/core';
})
export class ProfileComponent implements OnInit {
constructor() { }
public profileImageFileName: string | null;
public profileImage: File | null;
ngOnInit(): void {
public loggedInUser: User;
public refreshing: boolean;
private subs = new SubSink();
public fileUploadStatus: FileUploadStatus = new FileUploadStatus();
constructor(private userService: UserService,
private notificationService: NotificationService,
private authenticationService: AuthenticationService,
private router: Router) {
}
ngOnInit(): void {
this.loggedInUser = this.authenticationService.getUserFromLocalStorage();
}
public get isAdmin(): boolean {
return this.authenticationService.isLoggedUserHasRoleAdmin();
}
public updateProfileImage(): void {
this.clickButton('profile-image-input');
}
private clickButton(buttonId: string): void {
document.getElementById(buttonId)?.click();
}
onUpdateCurrentUser(user: User) {
const userId = this.authenticationService.getUserFromLocalStorage().userId;
this.refreshing = true;
if (user.role == undefined) user.role = this.loggedInUser.role;
if (user.active == undefined) user.active = this.loggedInUser.active;
if (user.notLocked == undefined) user.notLocked = this.loggedInUser.notLocked;
const formData = this.userService.createUserFormData(user, this.profileImage);
this.subs.sink = this.userService.updateUser(userId, formData)
.subscribe(
(user: User) => {
this.authenticationService.addUserToLocalStorage(user);
this.invalidateVariables();
this.notificationService.notify(NotificationType.SUCCESS, `User ${user.username} updated successfully`);
this.refreshing = false;
},
(errorResponse: HttpErrorResponse) => {
this.notificationService.notify(NotificationType.ERROR, errorResponse.error.message);
this.refreshing = false;
}
);
}
onLogOut() {
this.authenticationService.logout();
this.router.navigate(['/login']);
this.notificationService.notify(NotificationType.SUCCESS, 'You have been successfully logged out');
}
private invalidateVariables(): void {
this.profileImage = null;
this.profileImageFileName = null;
}
public onUpdateProfileImage(): void {
if (!this.profileImage) return;
this.refreshing = true;
const formData = new FormData();
formData.append("profileImage", this.profileImage);
let user = this.authenticationService.getUserFromLocalStorage();
this.subs.sink = this.userService.updateProfileImage(user.userId, formData)
.subscribe(
(event: HttpEvent<any>) => {
this.reportUploadProgress(event);
},
(errorResponse: HttpErrorResponse) => {
this.notificationService.notify(NotificationType.ERROR, errorResponse.error.message);
this.refreshing = false;
this.fileUploadStatus.status = 'error';
},
() => {
this.refreshing = false;
}
);
}
private reportUploadProgress(event: HttpEvent<any>): void {
switch (event.type) {
case HttpEventType.UploadProgress:
this.fileUploadStatus.percentage = Math.round(100 * event.loaded / event.total!);
this.fileUploadStatus.status = 'progress';
break;
case HttpEventType.Response:
if (event.status === 200) {
//for browser to fetch image when updating (because name left the same)
this.loggedInUser.profileImageUrl = `${event.body.profileImageUrl}?time=${new Date().getTime()}`;
this.notificationService.notify(NotificationType.SUCCESS, `${event.body.firstName}'s image updated successfully`);
this.fileUploadStatus.status = 'done';
} else {
this.notificationService.notify(NotificationType.ERROR, 'Unable to upload image. Please try again');
}
break;
default:
this.fileUploadStatus.status = 'default';
}
}
public onProfileImageChange(fileList: FileList): void {
this.profileImageFileName = fileList[0].name;
this.profileImage = fileList[0];
}
}