inteligr8/alfresco-content-app
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-content-app.git synced 2025-10-01 14:41:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

linting fixes

Browse Source
This commit is contained in:
SheenaMalhotra182
2023-03-17 17:41:53 +05:30
committed by Sheena Malhotra
parent 7ddb7e07e3
commit 8d2e7df738
8 changed files with 320 additions and 291 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
projects/aca-content/src/lib/components/search/search-input/search-input.component.scss
View File

@@ -20,7 +20,6 @@ $top-margin: 12px;
} }
.app-input-form-field { .app-input-form-field {
.app-close-icon { .app-close-icon {
height: 6px; height: 6px;

188
projects/aca-content/src/lib/components/view-profile/view-profile.component.html
View File

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

99
projects/aca-content/src/lib/components/view-profile/view-profile.component.scss
View File

@@ -1,16 +1,8 @@
.app-view-profile { app-view-profile {
letter-spacing: .5px; letter-spacing: .5px;
.app-profile-actions {
display: flex;
button {
margin: 1rem;
margin-left: 0;
}
}
.app-profile-container { .app-profile-container {
margin-top: 1rem;
overflow: scroll; overflow: scroll;
height:100%; height:100%;
width: 100%; width: 100%;
@@ -19,45 +11,58 @@
.app-profile-row { .app-profile-row {
width: 100%; width: 100%;
margin: 2rem 0 0; margin: 2rem 0 0;
height: 32px;
padding: 32px 0;
border-bottom: 1px solid var(--theme-header-border-color);
} }
.app-profile-title { .app-profile-title {
display: flex; display: flex;
flex-direction: row; margin-left: 2rem;
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-row { .app-profile {
cursor: pointer;
}
.app-profile-general-row {
margin: 2rem 0 0 2rem; margin: 2rem 0 0 2rem;
width: 70%; width: 70%;
border: 1px solid var(--theme-grey-background-color); border: 1px solid var(--theme-grey-background-color);
border-radius: 1rem; 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 { .app-profile-general {
display: flex; display: flex;
padding-left: 1rem; padding-left: 1rem;
} }
.app-profile-general-bottom-radius {
border-bottom-left-radius:0;
border-bottom-right-radius: 0;
}
.app-profile-general-section { .app-profile-general-section {
display: flex; display: flex;
width: 100%; width: 60%;
padding-top: 1rem; padding-top: 1rem;
cursor: pointer; cursor: pointer;
} }
.app-general-title { .app-general-title {
margin-left: 0.6rem; margin-left: 0.6rem;
margin-top: 11px; margin-top: 4px;
letter-spacing: .5px; letter-spacing: .5px;
} }
@@ -117,33 +122,63 @@
.app-general-dropdown-details { .app-general-dropdown-details {
display: flex; display: flex;
}
h4 { .app-profile-general-dropdown-heading {
color: var(--theme-heading-color); color: var(--theme-heading-color);
width: 20%; width: 20%;
font-weight: 400; font-weight: 400;
letter-spacing: .5px; letter-spacing: .5px;
} }
p { .app-profile-general-dropdown-details {
margin-top: 1.3rem; margin-top: 1.3rem;
letter-spacing: .5px; letter-spacing: .5px;
} }
input { .app-profile-general-dropdown-input-details {
width: 24%; width: 24%;
height: 25px; height: 25px;
border: none; border: none;
margin-top: 1.3rem; margin-top: 1.3rem;
background-color: var(--theme-dropdown-color); background-color: var(--theme-dropdown-color);
}
&:focus { .app-profile-login-row {
border: 2px solid var(--theme-blue-button-color) !important; margin: 2rem 0 0 2rem;
border-radius: 6px; width: 70%;
outline: none !important; border: 1px solid var(--theme-grey-background-color);
box-shadow: 0 0 2px (--theme-blue-button-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 { .app-error-message {

137
projects/aca-content/src/lib/components/view-profile/view-profile.component.spec.ts
View File

@@ -13,7 +13,6 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { By } from '@angular/platform-browser'; import { By } from '@angular/platform-browser';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { MatDividerModule } from '@angular/material/divider'; import { MatDividerModule } from '@angular/material/divider';
import { ViewProfileModule } from './view-profile.module';
describe('ViewProfileComponent', () => { describe('ViewProfileComponent', () => {
let fixture: ComponentFixture<ViewProfileComponent>; let fixture: ComponentFixture<ViewProfileComponent>;
@@ -22,7 +21,7 @@ describe('ViewProfileComponent', () => {
beforeEach(() => { beforeEach(() => {
TestBed.configureTestingModule({ TestBed.configureTestingModule({
imports: [AppTestingModule, ViewProfileModule, AppConfigModule, FormsModule, ReactiveFormsModule, MatDividerModule], imports: [AppTestingModule, AppConfigModule, FormsModule, ReactiveFormsModule, MatDividerModule],
declarations: [ViewProfileComponent] declarations: [ViewProfileComponent]
}); });
@@ -32,109 +31,88 @@ describe('ViewProfileComponent', () => {
router.initialNavigation(); router.initialNavigation();
}); });
afterEach(() => {
fixture.destroy();
});
it('should company dropdown remains close', async () => { it('should company dropdown remains close', async () => {
expect(component.loginSectionDropdown).toBe(false);
expect(component.contactSectionDropdown).toBe(false); expect(component.contactSectionDropdown).toBe(false);
}); });
it('should save button is disabled if form has invalid mobile number', async () => { it('should save button is disabled if form has invalid mobile number', () => {
spyOn(component.peopleApi, 'getPerson').and.returnValue( component.ngOnInit();
Promise.resolve({ const profileFormGroup = component.profileForm;
entry: {
id: 'user1', profileFormGroup.setValue({
firstName: 'User1',
lastName: 'User1',
email: 'user1@company.com',
enabled: true,
jobTitle: 'Developer', jobTitle: 'Developer',
location: 'US', location: 'US',
telephone: '2744245', telephone: '2744245',
mobile: 'AB8866322112', mobile: 'AB8866322112',
company: { oldPassword: 'admin@123',
organization: 'test Name', newPassword: 'admin@1234',
postcode: '12345', verifyPassword: 'admin@1234',
address1: 'test address', companyName: 'test Name',
telephone: '27442266', companyPostCode: '12345',
email: 'email@test.com' companyAddress: 'test address',
} companyTelephone: '27442266',
} companyEmail: 'email@test.com'
}) });
);
fixture.detectChanges(); expect(profileFormGroup.valid).toEqual(false);
await fixture.whenStable();
expect(component.profileForm.valid).toEqual(false);
expect(component.isSaveButtonDisabled()).toBeTruthy(); expect(component.isSaveButtonDisabled()).toBeTruthy();
}); });
it('should save button is disabled if form has invalid email', async () => { it('should save button is disabled if form has invalid email', () => {
spyOn(component.peopleApi, 'getPerson').and.returnValue( component.ngOnInit();
Promise.resolve({ const profileFormGroup = component.profileForm;
entry: {
id: 'user1', profileFormGroup.setValue({
firstName: 'User1',
lastName: 'User1',
email: 'user1@company.com',
enabled: true,
jobTitle: 'Developer', jobTitle: 'Developer',
location: 'US', location: 'US',
telephone: '2744245', telephone: '27442445',
mobile: 'AB8866322112', mobile: '457554',
company: { oldPassword: 'admin@123',
organization: 'test Name', newPassword: 'admin@1234',
postcode: '12345', verifyPassword: 'admin@1234',
address1: 'test address', companyName: 'test Name',
telephone: '27442266', companyPostCode: '12345',
email: 'email' companyAddress: 'test address',
} companyTelephone: '27442266',
} companyEmail: 'email'
}) });
);
fixture.detectChanges(); expect(profileFormGroup.valid).toEqual(false);
await fixture.whenStable();
expect(component.profileForm.valid).toEqual(false);
expect(component.isSaveButtonDisabled()).toBeTruthy(); expect(component.isSaveButtonDisabled()).toBeTruthy();
}); });
it('should enable save button if form is valid', async () => { it('should save button is enabled if form has valid inputs', () => {
spyOn(component.peopleApi, 'getPerson').and.returnValue( component.ngOnInit();
Promise.resolve({ const profileFormGroup = component.profileForm;
entry: {
id: 'user1', profileFormGroup.setValue({
firstName: 'User1',
lastName: 'User1',
email: 'user1@company.com',
enabled: true,
jobTitle: 'Developer', jobTitle: 'Developer',
location: 'US', location: 'US',
telephone: '274-422-55', telephone: '274-422-55',
mobile: '886-632-2112', mobile: '886-632-2112',
company: { oldPassword: 'test@123',
organization: 'testCompany', newPassword: 'test@1234',
postcode: '12345', verifyPassword: 'test@1234',
address1: 'test address', companyName: 'testCompany',
telephone: '274-22-66', companyPostCode: '12345',
email: 'testEmail@test.com' companyAddress: 'test address',
} companyTelephone: '274-22-66',
} companyEmail: 'testEmail@test.com'
}) });
);
fixture.detectChanges(); expect(profileFormGroup.valid).toEqual(true);
await fixture.whenStable();
expect(component.profileForm.valid).toEqual(true);
expect(component.isSaveButtonDisabled()).toBeFalsy(); 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', () => { it('should expand or compress general dropdown when arrow button is clicked', () => {
component.populateForm({} as any);
spyOn(component, 'toggleGeneralDropdown').and.callThrough(); spyOn(component, 'toggleGeneralDropdown').and.callThrough();
component.generalSectionDropdown = false; component.generalSectionDropdown = false;
fixture.detectChanges(); fixture.detectChanges();
@@ -147,7 +125,6 @@ describe('ViewProfileComponent', () => {
}); });
it('should expand or compress contact dropdown when arrow button is clicked', () => { it('should expand or compress contact dropdown when arrow button is clicked', () => {
component.populateForm({} as any);
spyOn(component, 'toggleContactDropdown').and.callThrough(); spyOn(component, 'toggleContactDropdown').and.callThrough();
component.contactSectionDropdown = false; component.contactSectionDropdown = false;
fixture.detectChanges(); fixture.detectChanges();
@@ -160,7 +137,6 @@ describe('ViewProfileComponent', () => {
}); });
it('should toggle form view when edit or cancel buttons is clicked for general form', () => { it('should toggle form view when edit or cancel buttons is clicked for general form', () => {
component.populateForm({} as any);
spyOn(component, 'toggleGeneralButtons').and.callThrough(); spyOn(component, 'toggleGeneralButtons').and.callThrough();
fixture.detectChanges(); fixture.detectChanges();
@@ -175,7 +151,6 @@ describe('ViewProfileComponent', () => {
}); });
it('should toggle form view when edit or cancel buttons is clicked for contact form', () => { it('should toggle form view when edit or cancel buttons is clicked for contact form', () => {
component.populateForm({} as any);
spyOn(component, 'toggleContactButtons').and.callThrough(); spyOn(component, 'toggleContactButtons').and.callThrough();
fixture.detectChanges(); fixture.detectChanges();

77
projects/aca-content/src/lib/components/view-profile/view-profile.component.ts
View File

@@ -5,25 +5,21 @@
* pursuant to a written agreement and any use of this program without such an * pursuant to a written agreement and any use of this program without such an
* agreement is prohibited. * agreement is prohibited.
*/ */
import { AlfrescoApiService, AppConfigService } from '@alfresco/adf-core'; import { AlfrescoApiService } from '@alfresco/adf-core';
import { PeopleApi, Person } from '@alfresco/js-api'; import { PeopleApi, Person } from '@alfresco/js-api';
import { Component, OnInit, ViewEncapsulation } from '@angular/core'; import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms'; import { FormControl, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { throwError } from 'rxjs'; import { throwError } from 'rxjs';
@Component({ @Component({
selector: 'app-view-profile', selector: 'app-view-profile',
templateUrl: './view-profile.component.html', templateUrl: './view-profile.component.html',
styleUrls: ['./view-profile.component.scss'], styleUrls: ['./view-profile.component.scss'],
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None
host: { class: 'app-view-profile' }
}) })
export class ViewProfileComponent implements OnInit { export class ViewProfileComponent implements OnInit {
private _peopleApi: PeopleApi; peopleApi: PeopleApi;
get peopleApi(): PeopleApi {
return this._peopleApi ?? (this._peopleApi = new PeopleApi(this.apiService.getInstance()));
}
profileForm: FormGroup; profileForm: FormGroup;
personDetails: Person; personDetails: Person;
@@ -31,29 +27,39 @@ export class ViewProfileComponent implements OnInit {
generalSectionDropdown = true; generalSectionDropdown = true;
generalSectionButtonsToggle = true; generalSectionButtonsToggle = true;
loginSectionDropdown = false;
loginSectionButtonsToggle = true;
passwordSectionDropdown = false;
contactSectionDropdown = false; contactSectionDropdown = false;
contactSectionButtonsToggle = true; contactSectionButtonsToggle = true;
landingPage: string; constructor(private router: Router, apiService: AlfrescoApiService) {
this.peopleApi = new PeopleApi(apiService.getInstance());
constructor(private apiService: AlfrescoApiService, private appConfigService: AppConfigService) {
this.landingPage = this.appConfigService.get('landingPage', '/personal-files');
} }
ngOnInit() { ngOnInit() {
this.populateForm(this.personDetails);
this.peopleApi this.peopleApi
.getPerson('-me-') .getPerson('-me-')
.then((userInfo) => this.populateForm(userInfo?.entry)) .then((userInfo) => {
.catch((error) => throwError(error)); this.personDetails = userInfo?.entry;
this.populateForm(userInfo?.entry);
})
.catch((error) => {
throwError(error);
});
} }
populateForm(userInfo: Person) { populateForm(userInfo: Person) {
this.personDetails = userInfo;
this.profileForm = new FormGroup({ this.profileForm = new FormGroup({
jobTitle: new FormControl(userInfo?.jobTitle || ''), jobTitle: new FormControl(userInfo?.jobTitle || ''),
location: new FormControl(userInfo?.location || ''), location: new FormControl(userInfo?.location || ''),
telephone: new FormControl(userInfo?.telephone || '', [Validators.pattern('^([0-9]+-)*[0-9]+$')]), telephone: new FormControl(userInfo?.telephone || '', [Validators.pattern('^([0-9]+-)*[0-9]+$')]),
mobile: new FormControl(userInfo?.mobile || '', [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 || ''), companyName: new FormControl(userInfo?.company?.organization || ''),
companyPostCode: new FormControl(userInfo?.company?.postcode || ''), companyPostCode: new FormControl(userInfo?.company?.postcode || ''),
companyAddress: new FormControl(userInfo?.company?.address1 || ''), companyAddress: new FormControl(userInfo?.company?.address1 || ''),
@@ -62,35 +68,76 @@ export class ViewProfileComponent implements OnInit {
}); });
} }
navigateToPersonalFiles() {
this.router.navigate(['/personal-files'], {
replaceUrl: true
});
}
toggleGeneralDropdown() { toggleGeneralDropdown() {
this.generalSectionDropdown = !this.generalSectionDropdown; this.generalSectionDropdown = !this.generalSectionDropdown;
if (!this.generalSectionDropdown) {
this.generalSectionButtonsToggle = true; this.generalSectionButtonsToggle = true;
} }
}
toggleGeneralButtons() { toggleGeneralButtons() {
this.generalSectionButtonsToggle = !this.generalSectionButtonsToggle; this.generalSectionButtonsToggle = !this.generalSectionButtonsToggle;
if (!this.generalSectionButtonsToggle) {
this.generalSectionDropdown = true; this.generalSectionDropdown = true;
} }
}
onSaveGeneralData(event) { onSaveGeneralData(event) {
this.generalSectionButtonsToggle = !this.generalSectionButtonsToggle; this.generalSectionButtonsToggle = !this.generalSectionButtonsToggle;
this.updatePersonDetails(event); this.updatePersonDetails(event);
} }
onSaveLoginData() {
this.passwordSectionDropdown = !this.passwordSectionDropdown;
this.loginSectionButtonsToggle = !this.loginSectionButtonsToggle;
}
onSaveCompanyData(event) { onSaveCompanyData(event) {
this.contactSectionButtonsToggle = !this.contactSectionButtonsToggle; this.contactSectionButtonsToggle = !this.contactSectionButtonsToggle;
this.updatePersonDetails(event); 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() { toggleContactDropdown() {
this.contactSectionDropdown = !this.contactSectionDropdown; this.contactSectionDropdown = !this.contactSectionDropdown;
if (!this.contactSectionDropdown) {
this.contactSectionButtonsToggle = true; this.contactSectionButtonsToggle = true;
} }
}
toggleContactButtons() { toggleContactButtons() {
this.contactSectionButtonsToggle = !this.contactSectionButtonsToggle; this.contactSectionButtonsToggle = !this.contactSectionButtonsToggle;
if (!this.contactSectionButtonsToggle) {
this.contactSectionDropdown = true; this.contactSectionDropdown = true;
} }
}
updatePersonDetails(event) { updatePersonDetails(event) {
if (this.profileForm.valid) { if (this.profileForm.valid) {

5
projects/aca-content/src/lib/components/view-profile/view-profile.module.ts
View File

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

2
projects/aca-content/src/lib/ui/variables/variables.scss
View File

@@ -36,7 +36,7 @@ $sidenav-background-color: #f8f8f8;
$selected-text-color: #212121; $selected-text-color: #212121;
$selected-background-color: rgba(31, 116, 219, 0.24); $selected-background-color: rgba(31, 116, 219, 0.24);
$action-button-text-color: rgba(33, 35, 40, 0.7); $action-button-text-color: rgba(33, 35, 40, 0.7);
$page-layout-header-background-color: #ffffff; $page-layout-header-background-color: #fff;
// CSS Variables // CSS Variables
$defaults: ( $defaults: (