mirror of
https://github.com/Alfresco/alfresco-content-app.git
synced 2025-10-01 14:41:14 +00:00
linting fixes
This commit is contained in:
SheenaMalhotra182
committed by
Sheena Malhotra
Sheena Malhotra
parent
7ddb7e07e3
commit
8d2e7df738
@@ -20,7 +20,6 @@ $top-margin: 12px;
|
||||
}
|
||||
|
||||
.app-input-form-field {
|
||||
|
||||
.app-close-icon {
|
||||
height: 6px;
|
||||
|
||||
|
||||
@@ -1,161 +1,137 @@
|
||||
<div class="app-profile-container">
|
||||
<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 class="app-profile-row">
|
||||
<div class="app-profile-title">
|
||||
<mat-icon class="app-profile-icon" (click)="navigateToPersonalFiles()" id="backButton">arrow_back</mat-icon>
|
||||
<h3 class="app-profile">{{'APP.EDIT_PROFILE.MY_PROFILE' | translate}}</h3>
|
||||
</div>
|
||||
<mat-divider class="app-mat-divider"></mat-divider>
|
||||
</div>
|
||||
|
||||
<div *ngIf="profileForm" class="app-profile-row" [formGroup]="profileForm">
|
||||
<div class="app-profile-general-row" [formGroup]="profileForm">
|
||||
<div class="app-profile-general">
|
||||
<div class="app-profile-general-section">
|
||||
<button mat-icon-button (click)="toggleGeneralDropdown()" id="toggle-general-dropdown">
|
||||
<mat-icon>{{ generalSectionDropdown ? 'expand_more' : 'chevron_right'}}</mat-icon>
|
||||
</button>
|
||||
<mat-icon class="app-profile-general-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 *ngIf="generalSectionButtonsToggle" class="app-profile-actions">
|
||||
<button mat-raised-button (click)="toggleGeneralButtons()" id="general-edit-button">
|
||||
{{'APP.EDIT_PROFILE.EDIT' | translate}}
|
||||
</button>
|
||||
<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>
|
||||
<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 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>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<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">
|
||||
{{ 'APP.EDIT_PROFILE.INVALID_INPUT' | translate }}
|
||||
</mat-error>
|
||||
</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>
|
||||
|
||||
<div *ngIf="profileForm" class="app-profile-row" [formGroup]="profileForm">
|
||||
<div class="app-profile-general">
|
||||
<div class="app-profile-contact-row" [formGroup]="profileForm">
|
||||
<div class="app-profile-general profile-general-bottom-radius">
|
||||
<div class="app-profile-general-section">
|
||||
<button mat-icon-button (click)="toggleContactDropdown()" id="toggle-contact-dropdown">
|
||||
<mat-icon>{{ contactSectionDropdown ? 'expand_more' : 'chevron_right'}}</mat-icon>
|
||||
</button>
|
||||
<mat-icon class="app-profile-general-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 *ngIf="contactSectionButtonsToggle" class="app-profile-actions">
|
||||
<button mat-raised-button id="contact-edit-button" (click)="toggleContactButtons()">
|
||||
{{'APP.EDIT_PROFILE.EDIT' | translate}}
|
||||
</button>
|
||||
<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>
|
||||
<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 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>
|
||||
</div>
|
||||
|
||||
<mat-divider *ngIf="contactSectionDropdown"></mat-divider>
|
||||
|
||||
<mat-divider class="app-mat-divider" *ngIf="contactSectionDropdown"></mat-divider>
|
||||
<div *ngIf="contactSectionDropdown">
|
||||
<div class="app-general-dropdown">
|
||||
<div class="app-general-dropdown-details">
|
||||
<h4>{{'APP.EDIT_PROFILE.NAME' | translate}}</h4>
|
||||
<p *ngIf="contactSectionButtonsToggle">{{personDetails?.company?.organization}}</p>
|
||||
<input type="text" value="" *ngIf="!contactSectionButtonsToggle" formControlName="companyName">
|
||||
<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">
|
||||
</div>
|
||||
|
||||
<mat-divider></mat-divider>
|
||||
|
||||
<mat-divider class="app-general-dropdown-divider"></mat-divider>
|
||||
<div class="app-general-dropdown-details">
|
||||
<h4>{{'APP.EDIT_PROFILE.ADDRESS' | translate}}</h4>
|
||||
<p *ngIf="contactSectionButtonsToggle">{{personDetails?.company?.address1}}</p>
|
||||
<input type="text" *ngIf="!contactSectionButtonsToggle" formControlName="companyAddress">
|
||||
<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">
|
||||
</div>
|
||||
|
||||
<mat-divider></mat-divider>
|
||||
|
||||
<mat-divider class="app-general-dropdown-divider"></mat-divider>
|
||||
<div class="app-general-dropdown-details">
|
||||
<h4>{{'APP.EDIT_PROFILE.POSTCODE' | translate}}</h4>
|
||||
<p *ngIf="contactSectionButtonsToggle">{{personDetails?.company?.postcode}}</p>
|
||||
<input type="text" *ngIf="!contactSectionButtonsToggle" formControlName="companyPostCode">
|
||||
<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">
|
||||
</div>
|
||||
|
||||
<mat-divider></mat-divider>
|
||||
|
||||
<mat-divider class="app-general-dropdown-divider"></mat-divider>
|
||||
<div class="app-general-dropdown-details">
|
||||
<h4>{{'APP.EDIT_PROFILE.TELEPHONE' | translate}}</h4>
|
||||
<p *ngIf="contactSectionButtonsToggle">{{personDetails?.company?.telephone}}</p>
|
||||
<input type="tel" *ngIf="!contactSectionButtonsToggle" formControlName="companyTelephone">
|
||||
<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">
|
||||
<mat-error class="app-error-message" *ngIf="profileForm.get('companyTelephone').invalid">
|
||||
{{ 'APP.EDIT_PROFILE.INVALID_INPUT' | translate }}
|
||||
</mat-error>
|
||||
</div>
|
||||
|
||||
<mat-divider></mat-divider>
|
||||
|
||||
<mat-divider class="app-general-dropdown-divider"></mat-divider>
|
||||
<div class="app-general-dropdown-details">
|
||||
<h4>{{'APP.EDIT_PROFILE.EMAIL' | translate}}</h4>
|
||||
<p *ngIf="contactSectionButtonsToggle">{{personDetails?.company?.email}}</p>
|
||||
<input type="text" *ngIf="!contactSectionButtonsToggle" formControlName="companyEmail">
|
||||
<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">
|
||||
<mat-error class="app-error-message" *ngIf="profileForm.get('companyEmail').invalid">
|
||||
{{ 'APP.EDIT_PROFILE.INVALID_INPUT' | translate }}
|
||||
</mat-error>
|
||||
@@ -163,4 +139,4 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,68 +1,73 @@
|
||||
.app-view-profile {
|
||||
app-view-profile {
|
||||
letter-spacing: .5px;
|
||||
|
||||
.app-profile-actions {
|
||||
display: flex;
|
||||
|
||||
button {
|
||||
margin: 1rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.app-profile-container {
|
||||
margin-top: 1rem;
|
||||
overflow: scroll;
|
||||
height: 100%;
|
||||
height:100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.app-profile-row {
|
||||
width: 100%;
|
||||
margin: 2rem 0 0;
|
||||
height: 32px;
|
||||
padding: 32px 0;
|
||||
border-bottom: 1px solid var(--theme-header-border-color);
|
||||
}
|
||||
|
||||
.app-profile-title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
height: 32px;
|
||||
padding: 0 24px;
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
padding: 32px 0;
|
||||
border-bottom: 1px solid var(--theme-header-border-color);
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
.app-profile-row {
|
||||
.app-profile {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.app-profile-general-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;
|
||||
margin-top: 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: 100%;
|
||||
width: 60%;
|
||||
padding-top: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.app-general-title {
|
||||
margin-left: 0.6rem;
|
||||
margin-top: 11px;
|
||||
margin-top: 4px;
|
||||
letter-spacing: .5px;
|
||||
}
|
||||
|
||||
.app-general-edit-btn {
|
||||
width: 60%;
|
||||
width:60%;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
@@ -76,7 +81,7 @@
|
||||
.app-selected:focus {
|
||||
border: 2px solid var(--theme-blue-button-color) !important;
|
||||
border-radius: 6px;
|
||||
outline: none !important;
|
||||
outline : none !important;
|
||||
box-shadow: 0 0 2px (--theme-blue-button-color);
|
||||
}
|
||||
|
||||
@@ -117,37 +122,67 @@
|
||||
|
||||
.app-general-dropdown-details {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: var(--theme-heading-color);
|
||||
width: 20%;
|
||||
font-weight: 400;
|
||||
letter-spacing: .5px;
|
||||
}
|
||||
.app-profile-general-dropdown-heading {
|
||||
color: var(--theme-heading-color);
|
||||
width: 20%;
|
||||
font-weight: 400;
|
||||
letter-spacing: .5px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 1.3rem;
|
||||
letter-spacing: .5px;
|
||||
}
|
||||
.app-profile-general-dropdown-details {
|
||||
margin-top: 1.3rem;
|
||||
letter-spacing: .5px;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 24%;
|
||||
height: 25px;
|
||||
border: none;
|
||||
margin-top: 1.3rem;
|
||||
background-color: var(--theme-dropdown-color);
|
||||
.app-profile-general-dropdown-input-details {
|
||||
width: 24%;
|
||||
height: 25px;
|
||||
border: none;
|
||||
margin-top: 1.3rem;
|
||||
background-color: var(--theme-dropdown-color);
|
||||
}
|
||||
|
||||
&: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-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;
|
||||
}
|
||||
|
||||
.app-error-message {
|
||||
padding-top: 2rem;
|
||||
padding-left: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -13,7 +13,6 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||
import { By } from '@angular/platform-browser';
|
||||
import { Router } from '@angular/router';
|
||||
import { MatDividerModule } from '@angular/material/divider';
|
||||
import { ViewProfileModule } from './view-profile.module';
|
||||
|
||||
describe('ViewProfileComponent', () => {
|
||||
let fixture: ComponentFixture<ViewProfileComponent>;
|
||||
@@ -22,7 +21,7 @@ describe('ViewProfileComponent', () => {
|
||||
|
||||
beforeEach(() => {
|
||||
TestBed.configureTestingModule({
|
||||
imports: [AppTestingModule, ViewProfileModule, AppConfigModule, FormsModule, ReactiveFormsModule, MatDividerModule],
|
||||
imports: [AppTestingModule, AppConfigModule, FormsModule, ReactiveFormsModule, MatDividerModule],
|
||||
declarations: [ViewProfileComponent]
|
||||
});
|
||||
|
||||
@@ -32,109 +31,88 @@ describe('ViewProfileComponent', () => {
|
||||
router.initialNavigation();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
fixture.destroy();
|
||||
});
|
||||
|
||||
it('should company dropdown remains close', async () => {
|
||||
expect(component.loginSectionDropdown).toBe(false);
|
||||
expect(component.contactSectionDropdown).toBe(false);
|
||||
});
|
||||
|
||||
it('should save button is disabled if form has invalid mobile number', async () => {
|
||||
spyOn(component.peopleApi, 'getPerson').and.returnValue(
|
||||
Promise.resolve({
|
||||
entry: {
|
||||
id: 'user1',
|
||||
firstName: 'User1',
|
||||
lastName: 'User1',
|
||||
email: 'user1@company.com',
|
||||
enabled: true,
|
||||
jobTitle: 'Developer',
|
||||
location: 'US',
|
||||
telephone: '2744245',
|
||||
mobile: 'AB8866322112',
|
||||
company: {
|
||||
organization: 'test Name',
|
||||
postcode: '12345',
|
||||
address1: 'test address',
|
||||
telephone: '27442266',
|
||||
email: 'email@test.com'
|
||||
}
|
||||
}
|
||||
})
|
||||
);
|
||||
it('should save button is disabled if form has invalid mobile number', () => {
|
||||
component.ngOnInit();
|
||||
const profileFormGroup = component.profileForm;
|
||||
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
profileFormGroup.setValue({
|
||||
jobTitle: 'Developer',
|
||||
location: 'US',
|
||||
telephone: '2744245',
|
||||
mobile: 'AB8866322112',
|
||||
oldPassword: 'admin@123',
|
||||
newPassword: 'admin@1234',
|
||||
verifyPassword: 'admin@1234',
|
||||
companyName: 'test Name',
|
||||
companyPostCode: '12345',
|
||||
companyAddress: 'test address',
|
||||
companyTelephone: '27442266',
|
||||
companyEmail: 'email@test.com'
|
||||
});
|
||||
|
||||
expect(component.profileForm.valid).toEqual(false);
|
||||
expect(profileFormGroup.valid).toEqual(false);
|
||||
expect(component.isSaveButtonDisabled()).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should save button is disabled if form has invalid email', async () => {
|
||||
spyOn(component.peopleApi, 'getPerson').and.returnValue(
|
||||
Promise.resolve({
|
||||
entry: {
|
||||
id: 'user1',
|
||||
firstName: 'User1',
|
||||
lastName: 'User1',
|
||||
email: 'user1@company.com',
|
||||
enabled: true,
|
||||
jobTitle: 'Developer',
|
||||
location: 'US',
|
||||
telephone: '2744245',
|
||||
mobile: 'AB8866322112',
|
||||
company: {
|
||||
organization: 'test Name',
|
||||
postcode: '12345',
|
||||
address1: 'test address',
|
||||
telephone: '27442266',
|
||||
email: 'email'
|
||||
}
|
||||
}
|
||||
})
|
||||
);
|
||||
it('should save button is disabled if form has invalid email', () => {
|
||||
component.ngOnInit();
|
||||
const profileFormGroup = component.profileForm;
|
||||
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
profileFormGroup.setValue({
|
||||
jobTitle: 'Developer',
|
||||
location: 'US',
|
||||
telephone: '27442445',
|
||||
mobile: '457554',
|
||||
oldPassword: 'admin@123',
|
||||
newPassword: 'admin@1234',
|
||||
verifyPassword: 'admin@1234',
|
||||
companyName: 'test Name',
|
||||
companyPostCode: '12345',
|
||||
companyAddress: 'test address',
|
||||
companyTelephone: '27442266',
|
||||
companyEmail: 'email'
|
||||
});
|
||||
|
||||
expect(component.profileForm.valid).toEqual(false);
|
||||
expect(profileFormGroup.valid).toEqual(false);
|
||||
expect(component.isSaveButtonDisabled()).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should enable save button if form is valid', async () => {
|
||||
spyOn(component.peopleApi, 'getPerson').and.returnValue(
|
||||
Promise.resolve({
|
||||
entry: {
|
||||
id: 'user1',
|
||||
firstName: 'User1',
|
||||
lastName: 'User1',
|
||||
email: 'user1@company.com',
|
||||
enabled: true,
|
||||
jobTitle: 'Developer',
|
||||
location: 'US',
|
||||
telephone: '274-422-55',
|
||||
mobile: '886-632-2112',
|
||||
company: {
|
||||
organization: 'testCompany',
|
||||
postcode: '12345',
|
||||
address1: 'test address',
|
||||
telephone: '274-22-66',
|
||||
email: 'testEmail@test.com'
|
||||
}
|
||||
}
|
||||
})
|
||||
);
|
||||
it('should save button is enabled if form has valid inputs', () => {
|
||||
component.ngOnInit();
|
||||
const profileFormGroup = component.profileForm;
|
||||
|
||||
fixture.detectChanges();
|
||||
await fixture.whenStable();
|
||||
profileFormGroup.setValue({
|
||||
jobTitle: 'Developer',
|
||||
location: 'US',
|
||||
telephone: '274-422-55',
|
||||
mobile: '886-632-2112',
|
||||
oldPassword: 'test@123',
|
||||
newPassword: 'test@1234',
|
||||
verifyPassword: 'test@1234',
|
||||
companyName: 'testCompany',
|
||||
companyPostCode: '12345',
|
||||
companyAddress: 'test address',
|
||||
companyTelephone: '274-22-66',
|
||||
companyEmail: 'testEmail@test.com'
|
||||
});
|
||||
|
||||
expect(component.profileForm.valid).toEqual(true);
|
||||
expect(profileFormGroup.valid).toEqual(true);
|
||||
expect(component.isSaveButtonDisabled()).toBeFalsy();
|
||||
});
|
||||
|
||||
it('should navigate to personal files when back button is clicked', () => {
|
||||
const navigateSpy = spyOn(router, 'navigate');
|
||||
component.navigateToPersonalFiles();
|
||||
|
||||
expect(navigateSpy).toHaveBeenCalledWith(['/personal-files'], { replaceUrl: true });
|
||||
});
|
||||
|
||||
it('should expand or compress general dropdown when arrow button is clicked', () => {
|
||||
component.populateForm({} as any);
|
||||
spyOn(component, 'toggleGeneralDropdown').and.callThrough();
|
||||
component.generalSectionDropdown = false;
|
||||
fixture.detectChanges();
|
||||
@@ -147,7 +125,6 @@ describe('ViewProfileComponent', () => {
|
||||
});
|
||||
|
||||
it('should expand or compress contact dropdown when arrow button is clicked', () => {
|
||||
component.populateForm({} as any);
|
||||
spyOn(component, 'toggleContactDropdown').and.callThrough();
|
||||
component.contactSectionDropdown = false;
|
||||
fixture.detectChanges();
|
||||
@@ -160,7 +137,6 @@ describe('ViewProfileComponent', () => {
|
||||
});
|
||||
|
||||
it('should toggle form view when edit or cancel buttons is clicked for general form', () => {
|
||||
component.populateForm({} as any);
|
||||
spyOn(component, 'toggleGeneralButtons').and.callThrough();
|
||||
fixture.detectChanges();
|
||||
|
||||
@@ -175,7 +151,6 @@ describe('ViewProfileComponent', () => {
|
||||
});
|
||||
|
||||
it('should toggle form view when edit or cancel buttons is clicked for contact form', () => {
|
||||
component.populateForm({} as any);
|
||||
spyOn(component, 'toggleContactButtons').and.callThrough();
|
||||
fixture.detectChanges();
|
||||
|
||||
@@ -188,4 +163,4 @@ describe('ViewProfileComponent', () => {
|
||||
|
||||
expect(component.toggleContactButtons).toHaveBeenCalledTimes(2);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -5,25 +5,21 @@
|
||||
* pursuant to a written agreement and any use of this program without such an
|
||||
* agreement is prohibited.
|
||||
*/
|
||||
import { AlfrescoApiService, AppConfigService } from '@alfresco/adf-core';
|
||||
import { AlfrescoApiService } from '@alfresco/adf-core';
|
||||
import { PeopleApi, Person } from '@alfresco/js-api';
|
||||
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { FormControl, FormGroup, Validators } from '@angular/forms';
|
||||
import { Router } from '@angular/router';
|
||||
import { throwError } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'app-view-profile',
|
||||
templateUrl: './view-profile.component.html',
|
||||
styleUrls: ['./view-profile.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
host: { class: 'app-view-profile' }
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class ViewProfileComponent implements OnInit {
|
||||
private _peopleApi: PeopleApi;
|
||||
|
||||
get peopleApi(): PeopleApi {
|
||||
return this._peopleApi ?? (this._peopleApi = new PeopleApi(this.apiService.getInstance()));
|
||||
}
|
||||
peopleApi: PeopleApi;
|
||||
|
||||
profileForm: FormGroup;
|
||||
personDetails: Person;
|
||||
@@ -31,29 +27,39 @@ export class ViewProfileComponent implements OnInit {
|
||||
generalSectionDropdown = true;
|
||||
generalSectionButtonsToggle = true;
|
||||
|
||||
loginSectionDropdown = false;
|
||||
loginSectionButtonsToggle = true;
|
||||
passwordSectionDropdown = false;
|
||||
|
||||
contactSectionDropdown = false;
|
||||
contactSectionButtonsToggle = true;
|
||||
|
||||
landingPage: string;
|
||||
|
||||
constructor(private apiService: AlfrescoApiService, private appConfigService: AppConfigService) {
|
||||
this.landingPage = this.appConfigService.get('landingPage', '/personal-files');
|
||||
constructor(private router: Router, apiService: AlfrescoApiService) {
|
||||
this.peopleApi = new PeopleApi(apiService.getInstance());
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.populateForm(this.personDetails);
|
||||
this.peopleApi
|
||||
.getPerson('-me-')
|
||||
.then((userInfo) => this.populateForm(userInfo?.entry))
|
||||
.catch((error) => throwError(error));
|
||||
.then((userInfo) => {
|
||||
this.personDetails = userInfo?.entry;
|
||||
this.populateForm(userInfo?.entry);
|
||||
})
|
||||
.catch((error) => {
|
||||
throwError(error);
|
||||
});
|
||||
}
|
||||
|
||||
populateForm(userInfo: Person) {
|
||||
this.personDetails = userInfo;
|
||||
this.profileForm = new FormGroup({
|
||||
jobTitle: new FormControl(userInfo?.jobTitle || ''),
|
||||
location: new FormControl(userInfo?.location || ''),
|
||||
telephone: new FormControl(userInfo?.telephone || '', [Validators.pattern('^([0-9]+-)*[0-9]+$')]),
|
||||
mobile: new FormControl(userInfo?.mobile || '', [Validators.pattern('^([0-9]+-)*[0-9]+$')]),
|
||||
oldPassword: new FormControl(''),
|
||||
newPassword: new FormControl(''),
|
||||
verifyPassword: new FormControl(''),
|
||||
companyName: new FormControl(userInfo?.company?.organization || ''),
|
||||
companyPostCode: new FormControl(userInfo?.company?.postcode || ''),
|
||||
companyAddress: new FormControl(userInfo?.company?.address1 || ''),
|
||||
@@ -62,14 +68,26 @@ export class ViewProfileComponent implements OnInit {
|
||||
});
|
||||
}
|
||||
|
||||
navigateToPersonalFiles() {
|
||||
this.router.navigate(['/personal-files'], {
|
||||
replaceUrl: true
|
||||
});
|
||||
}
|
||||
|
||||
toggleGeneralDropdown() {
|
||||
this.generalSectionDropdown = !this.generalSectionDropdown;
|
||||
this.generalSectionButtonsToggle = true;
|
||||
|
||||
if (!this.generalSectionDropdown) {
|
||||
this.generalSectionButtonsToggle = true;
|
||||
}
|
||||
}
|
||||
|
||||
toggleGeneralButtons() {
|
||||
this.generalSectionButtonsToggle = !this.generalSectionButtonsToggle;
|
||||
this.generalSectionDropdown = true;
|
||||
|
||||
if (!this.generalSectionButtonsToggle) {
|
||||
this.generalSectionDropdown = true;
|
||||
}
|
||||
}
|
||||
|
||||
onSaveGeneralData(event) {
|
||||
@@ -77,19 +95,48 @@ 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;
|
||||
this.contactSectionButtonsToggle = true;
|
||||
|
||||
if (!this.contactSectionDropdown) {
|
||||
this.contactSectionButtonsToggle = true;
|
||||
}
|
||||
}
|
||||
|
||||
toggleContactButtons() {
|
||||
this.contactSectionButtonsToggle = !this.contactSectionButtonsToggle;
|
||||
this.contactSectionDropdown = true;
|
||||
|
||||
if (!this.contactSectionButtonsToggle) {
|
||||
this.contactSectionDropdown = true;
|
||||
}
|
||||
}
|
||||
|
||||
updatePersonDetails(event) {
|
||||
@@ -124,4 +171,4 @@ export class ViewProfileComponent implements OnInit {
|
||||
isSaveButtonDisabled(): boolean {
|
||||
return this.profileForm.invalid;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -24,4 +24,4 @@ export class ViewProfileRuleGuard implements CanActivate {
|
||||
private isEcmLoggedIn() {
|
||||
return this.authService.isEcmLoggedIn() || (this.authService.isECMProvider() && this.authService.isKerberosEnabled());
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -27,12 +27,9 @@ import { NgModule } from '@angular/core';
|
||||
import { ViewProfileComponent } from './view-profile.component';
|
||||
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, MatButtonModule],
|
||||
imports: [CommonModule, CoreModule.forChild()],
|
||||
declarations: [ViewProfileComponent]
|
||||
})
|
||||
export class ViewProfileModule {}
|
||||
export class ViewProfileModule {}
|
||||
@@ -36,7 +36,7 @@ $sidenav-background-color: #f8f8f8;
|
||||
$selected-text-color: #212121;
|
||||
$selected-background-color: rgba(31, 116, 219, 0.24);
|
||||
$action-button-text-color: rgba(33, 35, 40, 0.7);
|
||||
$page-layout-header-background-color: #ffffff;
|
||||
$page-layout-header-background-color: #fff;
|
||||
|
||||
// CSS Variables
|
||||
$defaults: (
|
||||
|
||||
Reference in New Issue
Block a user