inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-3339] added test component for header (#3576)

Browse Source 
* [ADF-3339] added test component for header

* [APM-3339] remove lint errors

* [ADF-3339] solved lint error

* [ADF-3339] removed numbers from tests
This commit is contained in:
Georgiana Roman
2018-07-17 22:21:37 +03:00
committed by Eugenio Romano
parent c63184334f
commit 9901295e25
13 changed files with 182 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
demo-shell/resources/i18n/en.json
View File

@@ -79,7 +79,8 @@
"EXTENDED_SEARCH_QUERY_BODY": "Extended Search with Query Body",
"WORD_TO_SEARCH": "Search Word",
"SEARCH_CREATED_BY": "Created By",
"SEARCH_SERVICE_APPROACH": "Check this to disable the input property and configure using the service"
"SEARCH_SERVICE_APPROACH": "Check this to disable the input property and configure using the service",
"HEADER_DATA": "Header data"
},
"TRASHCAN": {
"ACTIONS": {

9
demo-shell/src/app/app.module.ts
View File

@@ -57,7 +57,8 @@ import { ContentNodeSelectorComponent } from './components/content-node-selector
import { NotificationsComponent } from './components/notifications/notifications.component';
import { ReportIssueComponent } from './components/report-issue/report-issue.component';
import { CardViewComponent } from './components/card-view/card-view.component';
import { HeaderDataComponent } from './components/header-data/header-data.component';
import { HeaderDataService } from './components/header-data/header-data.service';
@NgModule({
imports: [
BrowserModule,
@@ -114,7 +115,8 @@ import { CardViewComponent } from './components/card-view/card-view.component';
CardViewComponent,
ContentNodeSelectorComponent,
ReportIssueComponent,
TaskListDemoComponent
TaskListDemoComponent,
HeaderDataComponent
],
providers: [
{ provide: AppConfigService, useClass: DebugAppConfigService }, // not use this service in production
@@ -134,7 +136,8 @@ import { CardViewComponent } from './components/card-view/card-view.component';
source: 'resources/lazy-loading'
}
},
PreviewService
PreviewService,
HeaderDataService
],
entryComponents: [
VersionManagerDialogAdapterComponent,

11
demo-shell/src/app/app.routes.ts
View File

@@ -54,6 +54,7 @@ import { NotificationsComponent } from './components/notifications/notifications
import { CardViewComponent } from './components/card-view/card-view.component';
import { ContentNodeSelectorComponent } from './components/content-node-selector/content-node-selector.component';
import { ReportIssueComponent } from './components/report-issue/report-issue.component';
import { HeaderDataComponent } from './components/header-data/header-data.component';
export const appRoutes: Routes = [
{ path: 'login', component: LoginComponent },
@@ -87,6 +88,16 @@ export const appRoutes: Routes = [
}
]
},
{
path: 'header-data',
component: AppLayoutComponent,
children: [
{
path: '',
component: HeaderDataComponent
}
]
},
{
path: '',
component: AppLayoutComponent,

2
demo-shell/src/app/components/app-layout/app-layout.component.html
View File

@@ -2,7 +2,7 @@
<adf-sidenav-layout-header>
<ng-template let-toggleMenu="toggleMenu">
<adf-layout-header title="{{ 'APP_LAYOUT.APP_NAME' | translate}}" color="primary" (clicked)=toggleMenu($event)>
<adf-layout-header [title]="title | translate" [logo]="logo" [showSidenavToggle]="showMenu" [color]="color" (clicked)=toggleMenu($event) >
<div class="adf-app-layout-menu-spacer"></div>

18
demo-shell/src/app/components/app-layout/app-layout.component.ts
View File

@@ -17,6 +17,8 @@
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { UserPreferencesService, AppConfigService, AlfrescoApiService } from '@alfresco/adf-core';
import { HeaderDataService } from '../header-data/header-data.service';
@Component({
templateUrl: 'app-layout.component.html',
@@ -35,6 +37,7 @@ export class AppLayoutComponent implements OnInit {
{ href: '/breadcrumb', icon: 'label', title: 'APP_LAYOUT.BREADCRUMB' },
{ href: '/notifications', icon: 'alarm', title: 'APP_LAYOUT.NOTIFICATIONS'},
{ href: '/card-view', icon: 'view_headline', title: 'APP_LAYOUT.CARD_VIEW'},
{ href: '/header-data', icon: 'edit', title: 'APP_LAYOUT.HEADER_DATA'},
{ href: '/node-selector', icon: 'attachment', title: 'APP_LAYOUT.NODE-SELECTOR' },
{ href: '/task-list', icon: 'assignment', title: 'APP_LAYOUT.TASK_LIST' },
{ href: '/activiti', icon: 'device_hub', title: 'APP_LAYOUT.PROCESS_SERVICES' },
@@ -58,8 +61,12 @@ export class AppLayoutComponent implements OnInit {
expandedSidenav = false;
hideSidenav = false;
showMenu = true;
enabelRedirect = true;
color = 'primary';
title = 'APP_LAYOUT.APP_NAME';
logo: string;
ngOnInit() {
const expand = this.config.get<boolean>('sideNav.expandedSidenav');
@@ -70,9 +77,18 @@ export class AppLayoutComponent implements OnInit {
} else if (expand) {
this.expandedSidenav = expand;
}
this.headerService.hideMenu.subscribe(show => this.showMenu = show);
this.headerService.color.subscribe(color => this.color = color);
this.headerService.title.subscribe(title => this.title = title);
this.headerService.logo.subscribe(path => this.logo = path);
}
constructor(private userpreference: UserPreferencesService, private config: AppConfigService, private alfrescoApiService: AlfrescoApiService) {
constructor(
private userpreference: UserPreferencesService,
private config: AppConfigService,
private alfrescoApiService: AlfrescoApiService,
private headerService: HeaderDataService) {
if (this.alfrescoApiService.getInstance().isOauthConfiguration()) {
this.enabelRedirect = false;
}

2
demo-shell/src/app/components/form/demo-form.ts
View File

@@ -1214,7 +1214,7 @@ export class DemoForm {
'readOnly': false,
'overrideId': false,
'colspan': 1,
'placeholder': null,
'placeholder': '10',
'minLength': 0,
'maxLength': 0,
'minValue': null,

26
demo-shell/src/app/components/header-data/header-data.component.html Normal file
View File

@@ -0,0 +1,26 @@
<div class="content header-data">
<h1>Header data</h1>
<mat-card>
<mat-checkbox [(ngModel)]="checkbox" (change)="hideButton()">Show menu button</mat-checkbox>
<div>
<label>Choose header color</label>
<select (change)="changeColor($event.target.value)">
<option value="primary">Primary</option>
<option value="accent">Accent</option>
</select>
</div>
<div>
<label>Change title</label>
<input type="text" name="title" (keyup.enter)="submitTitle($event.target.value)" placeholder ="{{ 'APP_LAYOUT.APP_NAME' | translate}}">
<p>*press enter for submitting new title</p>
</div>
<div>
<label>Change logo</label>
<input type="text" placeholder ="URL path" (keyup.enter)="submitLogo($event.target.value)" >
<p>*press enter for submitting new logo</p>
</div>
</mat-card>
</div>

15
demo-shell/src/app/components/header-data/header-data.component.scss Normal file
View File

@@ -0,0 +1,15 @@
.content {
padding: 10px;
.mat-card {
padding: 16px 24px;
max-width: 100% !important;
max-height: 100% !important;
.mat-form-field, input, select {
display: block;
width: 100%;
height: 30px;
margin-bottom: 20px;
}
}
}

49
demo-shell/src/app/components/header-data/header-data.component.ts Normal file
View File

@@ -0,0 +1,49 @@
/*!
* @license
* Copyright 2016 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an 'AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Component } from '@angular/core';
import { HeaderDataService } from './header-data.service';
@Component({
templateUrl: './header-data.component.html',
styleUrls: ['./header-data.component.scss']
})
export class HeaderDataComponent {
checkbox = true;
constructor(private headerService: HeaderDataService) {}
hideButton() {
this.headerService.hideMenuButton();
}
changeColor(color: string) {
this.headerService.changeColor(color);
}
submitTitle(title: string) {
if (title) {
this.headerService.changeTitle(title);
}
}
submitLogo(logoPath: string) {
if (logoPath) {
this.headerService.changeLogo(logoPath);
}
}
}

31
demo-shell/src/app/components/header-data/header-data.service.ts Normal file
View File

@@ -0,0 +1,31 @@
import { Injectable, Output, EventEmitter } from '@angular/core';
@Injectable()
export class HeaderDataService {
show = true;
@Output() hideMenu: EventEmitter<boolean> = new EventEmitter();
@Output() color: EventEmitter<string> = new EventEmitter();
@Output() title: EventEmitter<string> = new EventEmitter();
@Output() logo: EventEmitter<string> = new EventEmitter();
hideMenuButton() {
this.show = !this.show;
this.hideMenu.emit(this.show);
}
changeColor(color: string) {
this.color.emit(color);
}
changeTitle(title: string) {
this.title.emit(title);
}
changeLogo(logoPath: string) {
this.logo.emit(logoPath);
}
}

6
lib/core/layout/components/header/header.component.scss
View File

@@ -7,11 +7,12 @@
color: mat-color($primary, default-contrast) !important;
position: relative;
padding: 0 24px 0 0;
padding: 0 24px;
.adf-menu-icon {
position: relative;
margin-left: 14px;
margin-left: -11px;
margin-right: 3px;
}
.adf-app-logo {
@@ -19,7 +20,6 @@
height: 28px;
width: 28px;
margin-right: 6px;
margin-left: 3px;
}
.adf-header-delimiter {

8
lib/core/layout/components/header/header.component.spec.ts
View File

@@ -89,6 +89,14 @@ describe('HeaderLayoutComponent', () => {
expect(component.clicked.emit).toHaveBeenCalledWith(true);
});
it('if showSidenavToggle is true the button menu should be displayed', () => {
component.showSidenavToggle = true;
fixture.detectChanges();
const button = fixture.nativeElement.querySelector('.adf-menu-icon');
expect(button === null).toBeFalsy();
});
it('if showSidenavToggle is false the button menu should not be displayed', () => {
component.showSidenavToggle = false;
fixture.detectChanges();

12
lib/core/layout/components/header/header.component.ts
View File

@@ -15,7 +15,7 @@
* limitations under the License.
*/
import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core';
import { Component, Input, Output, EventEmitter, ViewEncapsulation, OnInit } from '@angular/core';
@Component({
selector: 'adf-layout-header',
@@ -23,9 +23,9 @@ import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angu
encapsulation: ViewEncapsulation.None,
host: { class: 'adf-layout-header' }
})
export class HeaderLayoutComponent {
export class HeaderLayoutComponent implements OnInit {
@Input() title: string;
@Input() logo: string = './assets/images/logo.png';
@Input() logo: string;
@Input() color: string;
@Input() showSidenavToggle: boolean = true;
@Output() clicked = new EventEmitter<any>();
@@ -33,4 +33,10 @@ export class HeaderLayoutComponent {
toggleMenu() {
this.clicked.emit(true);
}
ngOnInit() {
if (!this.logo) {
this.logo = './assets/images/logo.png';
}
}
}