cleanup user profile

This commit is contained in:
Denys Vuika
2023-02-13 19:03:46 -05:00
committed by Sheena Malhotra
parent cb8504434f
commit 8cbb0b66fd
5 changed files with 167 additions and 226 deletions

View File

@@ -1,138 +1,160 @@
<div class="app-profile-container">
<div class="app-profile-row">
<div class="app-profile-title">
<button mat-icon-button [routerLink]="landingPage">
<mat-icon class="app-profile-icon">arrow_back</mat-icon>
</button>
<h1 class="app-profile">{{'APP.EDIT_PROFILE.MY_PROFILE' | translate}}</h1>
</div>
<div class="app-profile-title">
<button mat-icon-button [routerLink]="landingPage">
<mat-icon>arrow_back</mat-icon>
</button>
<h1>{{'APP.EDIT_PROFILE.MY_PROFILE' | translate}}</h1>
</div>
<div class="app-profile-general-row" [formGroup]="profileForm">
<div class="app-profile-row" [formGroup]="profileForm">
<div class="app-profile-general">
<div class="app-profile-general-section">
<mat-icon class="app-profile-general-icon" (click)="toggleGeneralDropdown()" id="toggle-general-dropdown">
{{ generalSectionDropdown ? 'expand_more' : 'chevron_right'}}</mat-icon>
<mat-icon (click)="toggleGeneralDropdown()" id="toggle-general-dropdown">
{{ generalSectionDropdown ? 'expand_more' : 'chevron_right'}}
</mat-icon>
<h4 class="app-general-title">{{'APP.EDIT_PROFILE.GENERAL' | translate}}</h4>
</div>
<div class="app-general-edit-btn" *ngIf="generalSectionButtonsToggle">
<button mat-raised-button (click)="toggleGeneralButtons()" id="general-edit-button"
class="app-general-edit">{{'APP.EDIT_PROFILE.EDIT' | translate}}</button>
<div *ngIf="generalSectionButtonsToggle" class="app-profile-actions">
<button mat-raised-button (click)="toggleGeneralButtons()" id="general-edit-button">
{{'APP.EDIT_PROFILE.EDIT' | translate}}
</button>
</div>
<div class="app-general-edit-btn" *ngIf="!generalSectionButtonsToggle">
<button mat-raised-button class="app-general-cancel-btn" id="general-cancel-button"
(click)="toggleGeneralButtons()">{{'APP.EDIT_PROFILE.CANCEL' | translate}}</button>
<button mat-raised-button class="app-general-save-btn" id="general-save-button" [disabled]="isSaveButtonDisabled()"
(click)="onSaveGeneralData(profileForm)">{{'APP.EDIT_PROFILE.SAVE' | translate}}</button>
<div *ngIf="!generalSectionButtonsToggle" class="app-profile-actions">
<button mat-raised-button id="general-cancel-button"(click)="toggleGeneralButtons()">
{{'APP.EDIT_PROFILE.CANCEL' | translate}}
</button>
<button mat-raised-button
[color]="'primary'"
id="general-save-button"
[disabled]="isSaveButtonDisabled()"
(click)="onSaveGeneralData(profileForm)">
{{'APP.EDIT_PROFILE.SAVE' | translate}}
</button>
</div>
</div>
<mat-divider class="app-mat-divider" *ngIf="generalSectionDropdown"></mat-divider>
<div *ngIf="generalSectionDropdown">
<div class="app-general-dropdown">
<div class="app-general-dropdown-details">
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.FIRST_NAME' | translate}}</h4>
<p class="app-profile-general-dropdown-details">{{personDetails?.firstName}}</p>
</div>
<mat-divider class="app-general-dropdown-divider"></mat-divider>
<div class="app-general-dropdown-details">
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.LAST_NAME' | translate}}</h4>
<p class="app-profile-general-dropdown-details">{{personDetails?.lastName}}</p>
</div>
<mat-divider class="app-general-dropdown-divider"></mat-divider>
<div class="app-general-dropdown-details">
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.JOB_TITLE' | translate}}</h4>
<p class="app-profile-general-dropdown-details" *ngIf="generalSectionButtonsToggle">{{personDetails?.jobTitle}}</p>
<input type="text" value="" formControlName="jobTitle" *ngIf="!generalSectionButtonsToggle"
class="app-profile-general-dropdown-input-details app-selected">
</div>
<mat-divider class="app-general-dropdown-divider"></mat-divider>
<div class="app-general-dropdown-details">
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.LOCATION' | translate}}</h4>
<p class="app-profile-general-dropdown-details" *ngIf="generalSectionButtonsToggle">{{personDetails?.location}}</p>
<input type="text" value="" formControlName="location" *ngIf="!generalSectionButtonsToggle"
class="app-profile-general-dropdown-input-details app-selected">
</div>
<mat-divider class="app-general-dropdown-divider"></mat-divider>
<div class="app-general-dropdown-details">
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.TELEPHONE' | translate}}</h4>
<p class="app-profile-general-dropdown-details" *ngIf="generalSectionButtonsToggle">{{personDetails?.telephone}}</p>
<input type="tel" name="Telephone" value="" formControlName="telephone" *ngIf="!generalSectionButtonsToggle"
class="app-profile-general-dropdown-input-details app-selected">
<mat-error class="app-error-message" *ngIf="profileForm.get('telephone').invalid">
{{ 'APP.EDIT_PROFILE.INVALID_INPUT' | translate }}
</mat-error>
</div>
<mat-divider class="app-general-dropdown-divider"></mat-divider>
<div class="app-general-dropdown-details">
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.MOBILE' | translate}}</h4>
<p class="app-profile-general-dropdown-details" *ngIf="generalSectionButtonsToggle">{{personDetails?.mobile}}</p>
<input type="tel" value="" formControlName="mobile" *ngIf="!generalSectionButtonsToggle"
class="app-profile-general-dropdown-input-details app-selected">
<mat-error class="app-error-message" *ngIf="profileForm.get('mobile').invalid">
<mat-divider *ngIf="generalSectionDropdown"></mat-divider>
<div *ngIf="generalSectionDropdown" class="app-general-dropdown">
<div class="app-general-dropdown-details">
<h4>{{'APP.EDIT_PROFILE.FIRST_NAME' | translate}}</h4>
<p>{{personDetails?.firstName}}</p>
</div>
<mat-divider></mat-divider>
<div class="app-general-dropdown-details">
<h4>{{'APP.EDIT_PROFILE.LAST_NAME' | translate}}</h4>
<p>{{personDetails?.lastName}}</p>
</div>
<mat-divider></mat-divider>
<div class="app-general-dropdown-details">
<h4>{{'APP.EDIT_PROFILE.JOB_TITLE' | translate}}</h4>
<p *ngIf="generalSectionButtonsToggle">{{personDetails?.jobTitle}}</p>
<input *ngIf="!generalSectionButtonsToggle" type="text" formControlName="jobTitle">
</div>
<mat-divider></mat-divider>
<div class="app-general-dropdown-details">
<h4>{{'APP.EDIT_PROFILE.LOCATION' | translate}}</h4>
<p *ngIf="generalSectionButtonsToggle">{{personDetails?.location}}</p>
<input type="text" formControlName="location" *ngIf="!generalSectionButtonsToggle">
</div>
<mat-divider></mat-divider>
<div class="app-general-dropdown-details">
<h4>{{'APP.EDIT_PROFILE.TELEPHONE' | translate}}</h4>
<p *ngIf="generalSectionButtonsToggle">{{personDetails?.telephone}}</p>
<input type="tel" formControlName="telephone" *ngIf="!generalSectionButtonsToggle">
<mat-error class="app-error-message" *ngIf="profileForm.get('telephone').invalid">
{{ 'APP.EDIT_PROFILE.INVALID_INPUT' | translate }}
</mat-error>
</div>
</div>
<mat-divider></mat-divider>
<div class="app-general-dropdown-details">
<h4>{{'APP.EDIT_PROFILE.MOBILE' | translate}}</h4>
<p *ngIf="generalSectionButtonsToggle">{{personDetails?.mobile}}</p>
<input type="tel" formControlName="mobile" *ngIf="!generalSectionButtonsToggle">
<mat-error class="app-error-message" *ngIf="profileForm.get('mobile').invalid">
{{ 'APP.EDIT_PROFILE.INVALID_INPUT' | translate }}
</mat-error>
</div>
</div>
</div>
<div class="app-profile-contact-row" [formGroup]="profileForm">
<div class="app-profile-general profile-general-bottom-radius">
<div class="app-profile-row" [formGroup]="profileForm">
<div class="app-profile-general">
<div class="app-profile-general-section">
<mat-icon class="app-profile-general-icon" (click)="toggleContactDropdown()" id="toggle-contact-dropdown">
<mat-icon (click)="toggleContactDropdown()" id="toggle-contact-dropdown">
{{ contactSectionDropdown ? 'expand_more' : 'chevron_right'}}</mat-icon>
<h4 class="app-general-title">{{'APP.EDIT_PROFILE.COMPANY_DETAILS' | translate}}</h4>
</div>
<div class="app-general-edit-btn" *ngIf="contactSectionButtonsToggle">
<button mat-raised-button class="app-general-edit" id="contact-edit-button"
(click)="toggleContactButtons()">{{'APP.EDIT_PROFILE.EDIT' | translate}}</button>
<div *ngIf="contactSectionButtonsToggle" class="app-profile-actions">
<button mat-raised-button id="contact-edit-button" (click)="toggleContactButtons()">
{{'APP.EDIT_PROFILE.EDIT' | translate}}
</button>
</div>
<div class="app-general-edit-btn" *ngIf="!contactSectionButtonsToggle">
<button mat-raised-button class="app-general-cancel-btn" id="contact-cancel-button"
(click)="toggleContactButtons()">{{'APP.EDIT_PROFILE.CANCEL' | translate}}</button>
<button mat-raised-button class="app-general-save-btn" id="contact-save-button" [disabled]="isSaveButtonDisabled()"
(click)="onSaveCompanyData(profileForm)">{{'APP.EDIT_PROFILE.SAVE' | translate}}</button>
<div *ngIf="!contactSectionButtonsToggle" class="app-profile-actions">
<button mat-raised-button id="contact-cancel-button" (click)="toggleContactButtons()">
{{'APP.EDIT_PROFILE.CANCEL' | translate}}
</button>
<button mat-raised-button [color]="'primary'" id="contact-save-button" [disabled]="isSaveButtonDisabled()" (click)="onSaveCompanyData(profileForm)">
{{'APP.EDIT_PROFILE.SAVE' | translate}}
</button>
</div>
</div>
<mat-divider class="app-mat-divider" *ngIf="contactSectionDropdown"></mat-divider>
<mat-divider *ngIf="contactSectionDropdown"></mat-divider>
<div *ngIf="contactSectionDropdown">
<div class="app-general-dropdown">
<div class="app-general-dropdown-details">
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.NAME' | translate}}</h4>
<p class="app-profile-general-dropdown-details" *ngIf="contactSectionButtonsToggle">{{personDetails?.company?.organization}}</p>
<input type="text" value="" *ngIf="!contactSectionButtonsToggle" formControlName="companyName"
class="app-profile-general-dropdown-input-details app-selected">
<h4>{{'APP.EDIT_PROFILE.NAME' | translate}}</h4>
<p *ngIf="contactSectionButtonsToggle">{{personDetails?.company?.organization}}</p>
<input type="text" value="" *ngIf="!contactSectionButtonsToggle" formControlName="companyName">
</div>
<mat-divider class="app-general-dropdown-divider"></mat-divider>
<mat-divider></mat-divider>
<div class="app-general-dropdown-details">
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.ADDRESS' | translate}}</h4>
<p class="app-profile-general-dropdown-details" *ngIf="contactSectionButtonsToggle">{{personDetails?.company?.address1}}</p>
<input type="text" value="" *ngIf="!contactSectionButtonsToggle" formControlName="companyAddress"
class="app-profile-general-dropdown-input-details app-selected">
<h4>{{'APP.EDIT_PROFILE.ADDRESS' | translate}}</h4>
<p *ngIf="contactSectionButtonsToggle">{{personDetails?.company?.address1}}</p>
<input type="text" *ngIf="!contactSectionButtonsToggle" formControlName="companyAddress">
</div>
<mat-divider class="app-general-dropdown-divider"></mat-divider>
<mat-divider></mat-divider>
<div class="app-general-dropdown-details">
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.POSTCODE' | translate}}</h4>
<p class="app-profile-general-dropdown-details" *ngIf="contactSectionButtonsToggle">{{personDetails?.company?.postcode}}</p>
<input type="text" value="" *ngIf="!contactSectionButtonsToggle" formControlName="companyPostCode"
class="app-profile-general-dropdown-input-details app-selected">
<h4>{{'APP.EDIT_PROFILE.POSTCODE' | translate}}</h4>
<p *ngIf="contactSectionButtonsToggle">{{personDetails?.company?.postcode}}</p>
<input type="text" *ngIf="!contactSectionButtonsToggle" formControlName="companyPostCode">
</div>
<mat-divider class="app-general-dropdown-divider"></mat-divider>
<mat-divider></mat-divider>
<div class="app-general-dropdown-details">
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.TELEPHONE' | translate}}</h4>
<p class="app-profile-general-dropdown-details" *ngIf="contactSectionButtonsToggle">{{personDetails?.company?.telephone}}</p>
<input type="tel" value="" *ngIf="!contactSectionButtonsToggle" formControlName="companyTelephone"
class="app-profile-general-dropdown-input-details app-selected">
<h4>{{'APP.EDIT_PROFILE.TELEPHONE' | translate}}</h4>
<p *ngIf="contactSectionButtonsToggle">{{personDetails?.company?.telephone}}</p>
<input type="tel" *ngIf="!contactSectionButtonsToggle" formControlName="companyTelephone">
<mat-error class="app-error-message" *ngIf="profileForm.get('companyTelephone').invalid">
{{ 'APP.EDIT_PROFILE.INVALID_INPUT' | translate }}
</mat-error>
</div>
<mat-divider class="app-general-dropdown-divider"></mat-divider>
<mat-divider></mat-divider>
<div class="app-general-dropdown-details">
<h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.EMAIL' | translate}}</h4>
<p class="app-profile-general-dropdown-details" *ngIf="contactSectionButtonsToggle">{{personDetails?.company?.email}}</p>
<input type="text" value="" *ngIf="!contactSectionButtonsToggle" formControlName="companyEmail"
class="app-profile-general-dropdown-input-details app-selected">
<h4>{{'APP.EDIT_PROFILE.EMAIL' | translate}}</h4>
<p *ngIf="contactSectionButtonsToggle">{{personDetails?.company?.email}}</p>
<input type="text" *ngIf="!contactSectionButtonsToggle" formControlName="companyEmail">
<mat-error class="app-error-message" *ngIf="profileForm.get('companyEmail').invalid">
{{ 'APP.EDIT_PROFILE.INVALID_INPUT' | translate }}
</mat-error>

View File

@@ -1,6 +1,15 @@
app-view-profile {
.app-view-profile {
letter-spacing: .5px;
.app-profile-actions {
display: flex;
button {
margin: 1rem;
margin-left: 0;
}
}
.app-profile-container {
overflow: scroll;
height: 100%;
@@ -21,47 +30,27 @@ app-view-profile {
align-items: center;
height: 32px;
padding: 0 24px;
width: 100%;
height: 32px;
padding: 32px 0;
border-bottom: 1px solid var(--theme-header-border-color);
}
.app-profile {
cursor: pointer;
margin-top: 1rem;
}
.app-profile-general-row {
.app-profile-row {
margin: 2rem 0 0 2rem;
width: 70%;
border: 1px solid var(--theme-grey-background-color);
border-radius: 1rem;
}
.app-profile-icon {
margin-right: 1rem;
cursor: pointer;
}
.app-profile-general-icon {
cursor: pointer;
}
.app-profile-text {
letter-spacing: .5px;
}
.app-profile-general {
display: flex;
padding-left: 1rem;
}
.app-profile-general-bottom-radius {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.app-profile-general-section {
display: flex;
width: 60%;
width: 100%;
padding-top: 1rem;
cursor: pointer;
}
@@ -128,63 +117,33 @@ app-view-profile {
.app-general-dropdown-details {
display: flex;
}
.app-profile-general-dropdown-heading {
color: var(--theme-heading-color);
width: 20%;
font-weight: 400;
letter-spacing: .5px;
}
h4 {
color: var(--theme-heading-color);
width: 20%;
font-weight: 400;
letter-spacing: .5px;
}
.app-profile-general-dropdown-details {
margin-top: 1.3rem;
letter-spacing: .5px;
}
p {
margin-top: 1.3rem;
letter-spacing: .5px;
}
.app-profile-general-dropdown-input-details {
width: 24%;
height: 25px;
border: none;
margin-top: 1.3rem;
background-color: var(--theme-dropdown-color);
}
input {
width: 24%;
height: 25px;
border: none;
margin-top: 1.3rem;
background-color: var(--theme-dropdown-color);
.app-profile-login-row {
margin: 2rem 0 0 2rem;
width: 70%;
border: 1px solid var(--theme-grey-background-color);
border-radius: 1rem;
}
.app-profile-login {
display: flex;
padding-left: 1rem;
}
.app-profile-login-dropdown-details {
width: 24%;
height: 25px;
border: none;
margin-top: 1.3rem;
background-color: var(--theme-dropdown-color);
}
.app-profile-login-dropdown-heading-forgot {
margin-top: 1.3rem;
color: var(--theme-heading-color);
margin-left: 16rem;
}
.app-profile-company-row {
margin-top: 2rem;
}
.app-profile-contact-row {
margin: 2rem 0 5rem 2rem;
width: 70%;
border: 1px solid var(--theme-grey-background-color);
border-radius: 1rem;
&:focus {
border: 2px solid var(--theme-blue-button-color) !important;
border-radius: 6px;
outline: none !important;
box-shadow: 0 0 2px (--theme-blue-button-color);
}
}
}
.app-error-message {

View File

@@ -33,7 +33,6 @@ describe('ViewProfileComponent', () => {
});
it('should company dropdown remains close', async () => {
expect(component.loginSectionDropdown).toBe(false);
expect(component.contactSectionDropdown).toBe(false);
});

View File

@@ -15,7 +15,8 @@ import { throwError } from 'rxjs';
selector: 'app-view-profile',
templateUrl: './view-profile.component.html',
styleUrls: ['./view-profile.component.scss'],
encapsulation: ViewEncapsulation.None
encapsulation: ViewEncapsulation.None,
host: { class: 'app-view-profile' }
})
export class ViewProfileComponent implements OnInit {
private _peopleApi: PeopleApi;
@@ -30,13 +31,8 @@ export class ViewProfileComponent implements OnInit {
generalSectionDropdown = true;
generalSectionButtonsToggle = true;
loginSectionDropdown = false;
loginSectionButtonsToggle = true;
passwordSectionDropdown = false;
contactSectionDropdown = false;
contactSectionButtonsToggle = true;
hideSidenav: boolean;
landingPage: string;
@@ -45,7 +41,6 @@ export class ViewProfileComponent implements OnInit {
}
ngOnInit() {
this.populateForm(this.personDetails);
this.peopleApi
.getPerson('-me-')
.then((userInfo) => {
@@ -76,18 +71,12 @@ export class ViewProfileComponent implements OnInit {
toggleGeneralDropdown() {
this.generalSectionDropdown = !this.generalSectionDropdown;
if (!this.generalSectionDropdown) {
this.generalSectionButtonsToggle = true;
}
this.generalSectionButtonsToggle = true;
}
toggleGeneralButtons() {
this.generalSectionButtonsToggle = !this.generalSectionButtonsToggle;
if (!this.generalSectionButtonsToggle) {
this.generalSectionDropdown = true;
}
this.generalSectionDropdown = true;
}
onSaveGeneralData(event) {
@@ -95,48 +84,19 @@ export class ViewProfileComponent implements OnInit {
this.updatePersonDetails(event);
}
onSaveLoginData() {
this.passwordSectionDropdown = !this.passwordSectionDropdown;
this.loginSectionButtonsToggle = !this.loginSectionButtonsToggle;
}
onSaveCompanyData(event) {
this.contactSectionButtonsToggle = !this.contactSectionButtonsToggle;
this.updatePersonDetails(event);
}
toggleLoginDropdown() {
this.loginSectionDropdown = !this.loginSectionDropdown;
if (!this.loginSectionDropdown) {
this.loginSectionButtonsToggle = true;
}
}
toggleLoginButtons() {
this.loginSectionButtonsToggle = !this.loginSectionButtonsToggle;
this.passwordSectionDropdown = !this.passwordSectionDropdown;
if (!this.loginSectionButtonsToggle) {
this.loginSectionDropdown = true;
this.passwordSectionDropdown = true;
}
}
toggleContactDropdown() {
this.contactSectionDropdown = !this.contactSectionDropdown;
if (!this.contactSectionDropdown) {
this.contactSectionButtonsToggle = true;
}
this.contactSectionButtonsToggle = true;
}
toggleContactButtons() {
this.contactSectionButtonsToggle = !this.contactSectionButtonsToggle;
if (!this.contactSectionButtonsToggle) {
this.contactSectionDropdown = true;
}
this.contactSectionDropdown = true;
}
updatePersonDetails(event) {

View File

@@ -29,9 +29,10 @@ import { CommonModule } from '@angular/common';
import { CoreModule } from '@alfresco/adf-core';
import { RouterModule } from '@angular/router';
import { MatDividerModule } from '@angular/material/divider';
import { MatButtonModule } from '@angular/material/button';
@NgModule({
imports: [CommonModule, RouterModule, CoreModule.forChild(), MatDividerModule],
imports: [CommonModule, RouterModule, CoreModule.forChild(), MatDividerModule, MatButtonModule],
declarations: [ViewProfileComponent]
})
export class ViewProfileModule {}