inteligr8/alfresco-content-app
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-content-app.git synced 2025-05-12 17:04:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACS-5288]Changes to improve user experience by changing navigation (#3219)

Browse Source 
* Implemented changes as per requirement

* changes for view profile component

* added unit test cases
This commit is contained in:
Yasa-Nataliya 2023-05-25 00:30:37 +05:30 committed by GitHub
parent e5c38b3840
commit 0328ea09da
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 69 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
projects/aca-content/assets/i18n/en.json
View File

@ -432,7 +432,7 @@
"COLLAPSE_NAVIGATION": "Collapse navigation menu",
"OPTIONS_SETTINGS": "Options and settings",
"MY_PROFILE": "My profile",
"EXPAND_NAVIGATION": "Expand navigation"
"EXPAND_NAVIGATION": "Expand navigation menu"
}
},
"NODE_SELECTOR": {

2
projects/aca-content/src/lib/components/sidenav/components/expand-menu.component.html
View File

@ -18,7 +18,7 @@
<ng-container *ngIf="item.children && item.children.length">
<mat-expansion-panel
[expanded]="acaExpansionPanel.hasActiveLinks()"
[expanded]="true"
[acaExpansionPanel]="item"
#acaExpansionPanel="acaExpansionPanel"
[@.disabled]="true"

3
projects/aca-content/src/lib/components/sidenav/user-menu/user-menu.component.html
View File

@ -1,4 +1,5 @@
<button mat-button class="aca-user-menu-button" [matMenuTriggerFor]="menu">
<button mat-button class="aca-user-menu-button" [matMenuTriggerFor]="menu"
title="{{'APP.TOOLTIPS.OPTIONS_SETTINGS' | translate}}">
<div>{{ (displayName$ | async)?.initials }}</div>
</button>

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

@ -1,10 +1,13 @@
<div class="app-profile-container">
<div class="app-profile-row">
<div class="app-profile-title">
<button *ngIf="(appNavNarMode$ | async) === 'collapsed'" mat-icon-button (click)="toggleClick()"
title="{{'APP.TOOLTIPS.EXPAND_NAVIGATION' | translate}}">
<mat-icon>menu</mat-icon>
</button>
<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 class="app-profile-general-row" [formGroup]="profileForm">
<div class="app-profile-general">

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

@ -1,25 +1,30 @@
app-view-profile {
letter-spacing: .5px;
letter-spacing: 0.5px;
.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;
margin-left: 2rem;
flex-direction: row;
align-items: center;
height: 32px;
padding: 0 24px;
}
.app-profile {
cursor: pointer;
margin-top: 1rem;
}
.app-profile-general-row {
@ -31,7 +36,6 @@ app-view-profile {
.app-profile-icon {
margin-right: 1rem;
margin-top: 1rem;
cursor: pointer;
}
@ -40,7 +44,7 @@ app-view-profile {
}
.app-profile-text {
letter-spacing: .5px;
letter-spacing: 0.5px;
}
.app-profile-general {
@ -49,7 +53,7 @@ app-view-profile {
}
.app-profile-general-bottom-radius {
border-bottom-left-radius:0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
@ -63,11 +67,11 @@ app-view-profile {
.app-general-title {
margin-left: 0.6rem;
margin-top: 4px;
letter-spacing: .5px;
letter-spacing: 0.5px;
}
.app-general-edit-btn {
width:60%;
width: 60%;
text-align: end;
}
@ -81,7 +85,7 @@ app-view-profile {
.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);
}
@ -98,16 +102,16 @@ app-view-profile {
.app-general-cancel-btn {
height: 30px;
margin: 1rem;
margin-left: .5rem;
margin-left: 0.5rem;
background-color: var(--theme-grey-text-background-color);
padding-top: .25px;
padding-top: 0.25px;
}
.app-general-save-btn {
width: 75px;
height: 30px;
margin: 1rem;
margin-left: .5rem;
margin-left: 0.5rem;
color: white;
background-color: var(--theme-blue-button-color);
}
@ -128,12 +132,12 @@ app-view-profile {
color: var(--theme-heading-color);
width: 20%;
font-weight: 400;
letter-spacing: .5px;
letter-spacing: 0.5px;
}
.app-profile-general-dropdown-details {
margin-top: 1.3rem;
letter-spacing: .5px;
letter-spacing: 0.5px;
}
.app-profile-general-dropdown-input-details {
@ -161,7 +165,7 @@ app-view-profile {
height: 25px;
border: none;
margin-top: 1.3rem;
background-color: var(--theme-dropdown-color) ;
background-color: var(--theme-dropdown-color);
}
.app-profile-login-dropdown-heading-forgot {
@ -183,6 +187,6 @@ app-view-profile {
.app-error-message {
padding-top: 2rem;
padding-left: .5rem;
padding-left: 0.5rem;
}
}
}

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

@ -30,16 +30,28 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { By } from '@angular/platform-browser';
import { Router } from '@angular/router';
import { MatDividerModule } from '@angular/material/divider';
import { BehaviorSubject, Subject } from 'rxjs';
import { AppService } from '@alfresco/aca-shared';
describe('ViewProfileComponent', () => {
let fixture: ComponentFixture<ViewProfileComponent>;
let component: ViewProfileComponent;
let router: Router;
const appServiceMock = {
toggleAppNavBar$: new Subject(),
appNavNarMode$: new BehaviorSubject<'collapsed' | 'expanded'>('expanded')
};
beforeEach(() => {
TestBed.configureTestingModule({
imports: [AppTestingModule, AppConfigModule, FormsModule, ReactiveFormsModule, MatDividerModule],
declarations: [ViewProfileComponent]
declarations: [ViewProfileComponent],
providers: [
{
provide: AppService,
useValue: appServiceMock
}
]
});
fixture = TestBed.createComponent(ViewProfileComponent);
@ -53,6 +65,12 @@ describe('ViewProfileComponent', () => {
expect(component.contactSectionDropdown).toBe(false);
});
it('should toggle the appService toggleAppNavBar$ Subject', () => {
spyOn(appServiceMock.toggleAppNavBar$, 'next');
component.toggleClick();
expect(appServiceMock.toggleAppNavBar$.next).toHaveBeenCalled();
});
it('should save button is disabled if form has invalid mobile number', () => {
component.ngOnInit();
const profileFormGroup = component.profileForm;

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

@ -24,10 +24,12 @@
import { AlfrescoApiService } from '@alfresco/adf-core';
import { PeopleApi, Person } from '@alfresco/js-api';
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { throwError } from 'rxjs';
import { Observable, Subject, throwError } from 'rxjs';
import { AppService } from '@alfresco/aca-shared';
import { takeUntil } from 'rxjs/operators';
@Component({
selector: 'app-view-profile',
@ -35,7 +37,7 @@ import { throwError } from 'rxjs';
styleUrls: ['./view-profile.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class ViewProfileComponent implements OnInit {
export class ViewProfileComponent implements OnInit, OnDestroy {
peopleApi: PeopleApi;
profileForm: FormGroup;
@ -50,9 +52,12 @@ export class ViewProfileComponent implements OnInit {
contactSectionDropdown = false;
contactSectionButtonsToggle = true;
appNavNarMode$: Observable<'collapsed' | 'expanded'>;
private onDestroy$ = new Subject<boolean>();
constructor(private router: Router, apiService: AlfrescoApiService) {
constructor(private router: Router, apiService: AlfrescoApiService, private appService: AppService) {
this.peopleApi = new PeopleApi(apiService.getInstance());
this.appNavNarMode$ = appService.appNavNarMode$.pipe(takeUntil(this.onDestroy$));
}
ngOnInit() {
@ -68,6 +73,10 @@ export class ViewProfileComponent implements OnInit {
});
}
toggleClick() {
this.appService.toggleAppNavBar$.next();
}
populateForm(userInfo: Person) {
this.profileForm = new FormGroup({
jobTitle: new FormControl(userInfo?.jobTitle || ''),
@ -188,4 +197,9 @@ export class ViewProfileComponent implements OnInit {
isSaveButtonDisabled(): boolean {
return this.profileForm.invalid;
}
ngOnDestroy() {
this.onDestroy$.next(true);
this.onDestroy$.complete();
}
}

2
projects/aca-shared/src/lib/services/app.service.ts
View File

@ -63,7 +63,7 @@ export class AppService implements OnDestroy {
toggleAppNavBar$ = new Subject();
hideSidenavConditions = ['/preview/'];
minimizeSidenavConditions = ['search', 'about', 'profile'];
minimizeSidenavConditions = ['search'];
onDestroy$ = new Subject<boolean>();