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

* [ADF-3339] added test component for header

* [APM-3339] remove lint errors

* [ADF-3339] solved lint error

* [ADF-3339] removed numbers from tests

demo-shell/resources/i18n/en.json

@@ -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": {

demo-shell/src/app/app.module.ts

@@ -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,

demo-shell/src/app/app.routes.ts

@@ -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,

demo-shell/src/app/components/app-layout/app-layout.component.html

@@ -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>
 
@@ -43,7 +43,7 @@
         </ng-template>
     </adf-sidenav-layout-navigation>
 
-    <adf-sidenav-layout-content>
+    <adf-sidenav-layout-content >
         <ng-template>
             <router-outlet></router-outlet>
         </ng-template>

demo-shell/src/app/components/app-layout/app-layout.component.ts

@@ -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;
         }
@@ -83,4 +99,4 @@ export class AppLayoutComponent implements OnInit {
             this.userpreference.set('expandedSidenav', state);
         }
     }
-}
+ }

demo-shell/src/app/components/form/demo-form.ts

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

demo-shell/src/app/components/header-data/header-data.component.html

@@ -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>

demo-shell/src/app/components/header-data/header-data.component.scss

@@ -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;
+        }
+    }
+}

demo-shell/src/app/components/header-data/header-data.component.ts

@@ -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);
+        }
+    }
+}

demo-shell/src/app/components/header-data/header-data.service.ts

@@ -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);
+  }
+}

lib/core/layout/components/header/header.component.scss

@@ -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 {

lib/core/layout/components/header/header.component.spec.ts

@@ -89,7 +89,15 @@ describe('HeaderLayoutComponent', () => {
             expect(component.clicked.emit).toHaveBeenCalledWith(true);
         });
 
-        it('if showSidenavToggle is false the button menu should not be displayed', () => {
+        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();
 

lib/core/layout/components/header/header.component.ts

@@ -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';
+        }
+    }
 }