diff --git a/projects/aca-content/src/lib/components/search/search-input/search-input.component.scss b/projects/aca-content/src/lib/components/search/search-input/search-input.component.scss index af6c44f04..c2786f9c6 100644 --- a/projects/aca-content/src/lib/components/search/search-input/search-input.component.scss +++ b/projects/aca-content/src/lib/components/search/search-input/search-input.component.scss @@ -20,7 +20,6 @@ $top-margin: 12px; } .app-input-form-field { - .app-close-icon { height: 6px; diff --git a/projects/aca-content/src/lib/components/view-profile/view-profile.component.html b/projects/aca-content/src/lib/components/view-profile/view-profile.component.html index 203bd95e2..b30ed76b2 100644 --- a/projects/aca-content/src/lib/components/view-profile/view-profile.component.html +++ b/projects/aca-content/src/lib/components/view-profile/view-profile.component.html @@ -1,161 +1,137 @@
-
- -

{{'APP.EDIT_PROFILE.MY_PROFILE' | translate}}

+
+
+ arrow_back +

{{'APP.EDIT_PROFILE.MY_PROFILE' | translate}}

+
+
- -
+
- + + {{ generalSectionDropdown ? 'expand_more' : 'chevron_right'}}

{{'APP.EDIT_PROFILE.GENERAL' | translate}}

- -
- +
+
-
- - +
+ +
- - - -
-
-

{{'APP.EDIT_PROFILE.FIRST_NAME' | translate}}

-

{{personDetails?.firstName}}

-
- - - -
-

{{'APP.EDIT_PROFILE.LAST_NAME' | translate}}

-

{{personDetails?.lastName}}

-
- - - -
-

{{'APP.EDIT_PROFILE.JOB_TITLE' | translate}}

-

{{personDetails?.jobTitle}}

- -
- - - -
-

{{'APP.EDIT_PROFILE.LOCATION' | translate}}

-

{{personDetails?.location}}

- -
- - - -
-

{{'APP.EDIT_PROFILE.TELEPHONE' | translate}}

-

{{personDetails?.telephone}}

- - + +
+
+
+

{{'APP.EDIT_PROFILE.FIRST_NAME' | translate}}

+

{{personDetails?.firstName}}

+
+ +
+

{{'APP.EDIT_PROFILE.LAST_NAME' | translate}}

+

{{personDetails?.lastName}}

+
+ +
+

{{'APP.EDIT_PROFILE.JOB_TITLE' | translate}}

+

{{personDetails?.jobTitle}}

+ +
+ +
+

{{'APP.EDIT_PROFILE.LOCATION' | translate}}

+

{{personDetails?.location}}

+ +
+ +
+

{{'APP.EDIT_PROFILE.TELEPHONE' | translate}}

+

{{personDetails?.telephone}}

+ + + {{ 'APP.EDIT_PROFILE.INVALID_INPUT' | translate }} + +
+ +
+

{{'APP.EDIT_PROFILE.MOBILE' | translate}}

+

{{personDetails?.mobile}}

+ + {{ 'APP.EDIT_PROFILE.INVALID_INPUT' | translate }} -
- - - -
-

{{'APP.EDIT_PROFILE.MOBILE' | translate}}

-

{{personDetails?.mobile}}

- - - {{ 'APP.EDIT_PROFILE.INVALID_INPUT' | translate }} - +
-
-
+
+
- + + {{ contactSectionDropdown ? 'expand_more' : 'chevron_right'}}

{{'APP.EDIT_PROFILE.COMPANY_DETAILS' | translate}}

-
- +
+
-
- - +
+ +
- - - +
-

{{'APP.EDIT_PROFILE.NAME' | translate}}

-

{{personDetails?.company?.organization}}

- +

{{'APP.EDIT_PROFILE.NAME' | translate}}

+

{{personDetails?.company?.organization}}

+
- - - +
-

{{'APP.EDIT_PROFILE.ADDRESS' | translate}}

-

{{personDetails?.company?.address1}}

- +

{{'APP.EDIT_PROFILE.ADDRESS' | translate}}

+

{{personDetails?.company?.address1}}

+
- - - +
-

{{'APP.EDIT_PROFILE.POSTCODE' | translate}}

-

{{personDetails?.company?.postcode}}

- +

{{'APP.EDIT_PROFILE.POSTCODE' | translate}}

+

{{personDetails?.company?.postcode}}

+
- - - +
-

{{'APP.EDIT_PROFILE.TELEPHONE' | translate}}

-

{{personDetails?.company?.telephone}}

- +

{{'APP.EDIT_PROFILE.TELEPHONE' | translate}}

+

{{personDetails?.company?.telephone}}

+ {{ 'APP.EDIT_PROFILE.INVALID_INPUT' | translate }}
- - - +
-

{{'APP.EDIT_PROFILE.EMAIL' | translate}}

-

{{personDetails?.company?.email}}

- +

{{'APP.EDIT_PROFILE.EMAIL' | translate}}

+

{{personDetails?.company?.email}}

+ {{ 'APP.EDIT_PROFILE.INVALID_INPUT' | translate }} @@ -163,4 +139,4 @@
-
+
\ No newline at end of file diff --git a/projects/aca-content/src/lib/components/view-profile/view-profile.component.scss b/projects/aca-content/src/lib/components/view-profile/view-profile.component.scss index 162e8afda..2d62438fb 100644 --- a/projects/aca-content/src/lib/components/view-profile/view-profile.component.scss +++ b/projects/aca-content/src/lib/components/view-profile/view-profile.component.scss @@ -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; } -} +} \ No newline at end of file diff --git a/projects/aca-content/src/lib/components/view-profile/view-profile.component.spec.ts b/projects/aca-content/src/lib/components/view-profile/view-profile.component.spec.ts index cde68b5af..4fab7a5df 100644 --- a/projects/aca-content/src/lib/components/view-profile/view-profile.component.spec.ts +++ b/projects/aca-content/src/lib/components/view-profile/view-profile.component.spec.ts @@ -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; @@ -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); }); -}); +}); \ No newline at end of file diff --git a/projects/aca-content/src/lib/components/view-profile/view-profile.component.ts b/projects/aca-content/src/lib/components/view-profile/view-profile.component.ts index 7c0f49b54..d0ecb38fc 100644 --- a/projects/aca-content/src/lib/components/view-profile/view-profile.component.ts +++ b/projects/aca-content/src/lib/components/view-profile/view-profile.component.ts @@ -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; } -} +} \ No newline at end of file diff --git a/projects/aca-content/src/lib/components/view-profile/view-profile.guard.ts b/projects/aca-content/src/lib/components/view-profile/view-profile.guard.ts index fdfa31fbb..0c7a0b98c 100644 --- a/projects/aca-content/src/lib/components/view-profile/view-profile.guard.ts +++ b/projects/aca-content/src/lib/components/view-profile/view-profile.guard.ts @@ -24,4 +24,4 @@ export class ViewProfileRuleGuard implements CanActivate { private isEcmLoggedIn() { return this.authService.isEcmLoggedIn() || (this.authService.isECMProvider() && this.authService.isKerberosEnabled()); } -} +} \ No newline at end of file diff --git a/projects/aca-content/src/lib/components/view-profile/view-profile.module.ts b/projects/aca-content/src/lib/components/view-profile/view-profile.module.ts index b33d568f9..7c4fc1d64 100644 --- a/projects/aca-content/src/lib/components/view-profile/view-profile.module.ts +++ b/projects/aca-content/src/lib/components/view-profile/view-profile.module.ts @@ -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 {} \ No newline at end of file diff --git a/projects/aca-content/src/lib/ui/variables/variables.scss b/projects/aca-content/src/lib/ui/variables/variables.scss index cfb685856..a19a90136 100644 --- a/projects/aca-content/src/lib/ui/variables/variables.scss +++ b/projects/aca-content/src/lib/ui/variables/variables.scss @@ -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: (