From 3bbc9d33dfd8c2ef46c2dcf3ad8c89bf915fcdde Mon Sep 17 00:00:00 2001
From: Eugenio Romano <eromano@users.noreply.github.com>
Date: Tue, 15 Aug 2017 13:39:32 +0100
Subject: [PATCH] replace header analytics with adf-toolbar (#2218)

---
 ...analytics-report-parameters.component.html | 101 +++++++++++-------
 ...nalytics-report-parameters.component.scss} |  61 +++++------
 .../analytics-report-parameters.component.ts  |   9 +-
 .../ng2-activiti-analytics/src/i18n/en.json   |   2 +-
 .../ng2-activiti-analytics/src/i18n/it.json   |   2 +-
 5 files changed, 92 insertions(+), 83 deletions(-)
 rename ng2-components/ng2-activiti-analytics/src/components/{analytics-report-parameters.component.css => analytics-report-parameters.component.scss} (62%)

diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.html b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.html
index a196a78fdf..94d8aad71a 100644
--- a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.html
+++ b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.html
@@ -1,47 +1,59 @@
 <div [class.hide]="hideComponent">
-    <div class="report-container">
+    <div class="adf-report-report-container">
         <div class="col-md-6">
             <div *ngIf="reportParameters">
                 <form [formGroup]="reportForm" novalidate>
-                    <div *ngIf="isEditable">
-                        <input
-                            type="text"
-                            class="mdl-textfield__input large"
-                            id="reportName"
-                            autofocus
-                            data-automation-id="reportName"
-                            [value]="reportParameters.name"
-                            (input)="reportParameters.name=$event.target.value"
-                            (blur)="editTitle($event)"
-                        />
-                    </div>
-                    <div *ngIf="!isEditable">
-                        <div class="report-icons">
-                            <button mdTooltip="{{'ANALYTICS.MESSAGES.ICON-SETTING' | translate}}" (click)="toggleParameters()" class="mdl-button mdl-js-button">
-                                <i class="material-icons">settings</i>
+                    <adf-toolbar>
+                        <adf-toolbar-title class="adf-report-title-container">
+                            <div *ngIf="isEditable">
+                                <md-input-container>
+                                    <input
+                                        mdInput
+                                        type="text"
+                                        class="adf-edit-report-title"
+                                        id="reportName"
+                                        autofocus
+                                        data-automation-id="reportName"
+                                        [value]="reportParameters.name"
+                                        (input)="reportParameters.name=$event.target.value"
+                                        (blur)="editTitle($event)"
+                                        (keyup.enter)="editTitle($event)"
+                                    />
+                                </md-input-container>
+                            </div>
+                            <div *ngIf="!isEditable" (click)="editEnable()">
+                                <md-icon class="adf-report-icon" >mode_edit</md-icon>
+                                <h4 class="adf-report-title" >{{reportParameters.name}}</h4>
+                            </div>
+                        </adf-toolbar-title>
+                        <div *ngIf="!isEditable">
+                            <button md-button mdTooltip="{{'ANALYTICS.MESSAGES.ICON-SETTING' | translate}}"
+                                    (click)="toggleParameters()">
+                                <md-icon>settings</md-icon>
                             </button>
-                            <button id="delete-button" (click)="deleteReport(reportId)" mdTooltip="{{'ANALYTICS.MESSAGES.ICON-DELETE' | translate}}" class="mdl-button mdl-js-button">
-                                <i class="material-icons">delete</i>
+                            <button md-button id="delete-button" (click)="deleteReport(reportId)"
+                                    mdTooltip="{{'ANALYTICS.MESSAGES.ICON-DELETE' | translate}}">
+                                <md-icon>delete</md-icon>
                             </button>
                             <span *ngIf="isFormValid()">
-                                <button id="export-button" (click)="showDialog('Export')" mdTooltip="{{'ANALYTICS.MESSAGES.ICON-EXPORT-CSV' | translate}}" class="mdl-button mdl-js-button">
-                                     <i class="material-icons">file_download</i>
+                                <button md-button id="export-button" (click)="showDialog('Export')"
+                                        mdTooltip="{{'ANALYTICS.MESSAGES.ICON-EXPORT-CSV' | translate}}">
+                                    <md-icon>file_download</md-icon>
                                 </button>
-                                <button id="save-button" (click)="showDialog('Save')" mdTooltip="{{'ANALYTICS.MESSAGES.ICON-SAVE' | translate}}" class="mdl-button mdl-js-button">
-                                    <i class="material-icons">save</i>
+                                <button md-button id="save-button" (click)="showDialog('Save')"
+                                        mdTooltip="{{'ANALYTICS.MESSAGES.ICON-SAVE' | translate}}">
+                                    <md-icon>save</md-icon>
                                 </button>
                             </span>
                         </div>
-                        <div class="icon-small">
-                            <i class="material-icons">mode_edit</i>
-                            <h4 (click)="editEnable()">{{reportParameters.name}}</h4>
-                        </div>
-                    </div>
-                    <div *ngFor="let field of reportParameters.definition.parameters" [class.is-hide]="isParametersHide()">
+                    </adf-toolbar>
+                    <div *ngFor="let field of reportParameters.definition.parameters"
+                         [class.is-hide]="isParametersHide()">
                         <div [ngSwitch]="field.type">
                             <div *ngSwitchCase="'integer'">
                                 <br>
-                                <number-widget [field]="field" [group]="reportForm.controls.processInstanceGroup" [controllerName]="'slowProcessInstanceInteger'"
+                                <number-widget [field]="field" [group]="reportForm.controls.processInstanceGroup"
+                                               [controllerName]="'slowProcessInstanceInteger'"
                                                [required]="true"></number-widget>
                             </div>
                             <div *ngSwitchCase="'duration'">
@@ -56,26 +68,32 @@
                             </div>
                             <div *ngSwitchCase="'status'">
                                 <br>
-                                <dropdown-widget [field]="field" [group]="reportForm.controls.statusGroup" [controllerName]="'status'"
+                                <dropdown-widget [field]="field" [group]="reportForm.controls.statusGroup"
+                                                 [controllerName]="'status'"
                                                  [required]="true"></dropdown-widget>
                             </div>
                             <div *ngSwitchCase="'processDefinition'">
                                 <br>
-                                <dropdown-widget [field]="field" [group]="reportForm.controls.processDefGroup" [controllerName]="'processDefinitionId'"
-                                                 [required]="true" (fieldChanged)="onProcessDefinitionChanges(field)"></dropdown-widget>
+                                <dropdown-widget [field]="field" [group]="reportForm.controls.processDefGroup"
+                                                 [controllerName]="'processDefinitionId'"
+                                                 [required]="true"
+                                                 (fieldChanged)="onProcessDefinitionChanges(field)"></dropdown-widget>
                             </div>
                             <div *ngSwitchCase="'task'">
                                 <br>
-                                <dropdown-widget [field]="field" [group]="reportForm.controls.taskGroup" [controllerName]="'taskName'"
+                                <dropdown-widget [field]="field" [group]="reportForm.controls.taskGroup"
+                                                 [controllerName]="'taskName'"
                                                  [required]="true"></dropdown-widget>
                             </div>
                             <div *ngSwitchCase="'dateRange'">
                                 <br>
-                                <adf-date-range-widget [field]="field" [group]="reportForm.controls.dateRange"></adf-date-range-widget>
+                                <adf-date-range-widget [field]="field"
+                                                       [group]="reportForm.controls.dateRange"></adf-date-range-widget>
                             </div>
                             <div *ngSwitchCase="'dateInterval'">
                                 <br>
-                                <dropdown-widget [field]="field" [group]="reportForm.controls.dateIntervalGroup" [controllerName]="'dateRangeInterval'"
+                                <dropdown-widget [field]="field" [group]="reportForm.controls.dateIntervalGroup"
+                                                 [controllerName]="'dateRangeInterval'"
                                                  [required]="true" [showDefaultOption]="false"></dropdown-widget>
                             </div>
                             <div *ngSwitchDefault>
@@ -86,7 +104,9 @@
                     <dialog id="report-dialog" class="mdl-dialog options-name-dialog" #reportNameDialog>
                         <h5 id="report-dialog-title" class="mdl-dialog__title">{{action}} report</h5>
                         <div class="mdl-dialog__content">
-                            <div *ngIf="isSaveAction()" id="save-title-submessage" class="export-message">{{'DIALOG.SAVE_MESSAGE' | translate}}</div>
+                            <div *ngIf="isSaveAction()" id="save-title-submessage" class="export-message">
+                                {{'DIALOG.SAVE_MESSAGE' | translate}}
+                            </div>
                             <div class="mdl-textfield mdl-js-textfield save-export-input">
                                 <label id="report-name-label" [attr.for]="reportName">Report Name</label>
                                 <input class="mdl-textfield__input"
@@ -99,8 +119,11 @@
                             </div>
                         </div>
                         <div class="mdl-dialog__actions">
-                            <button type="button" id="close-dialog-button" (click)="closeDialog()" class="mdl-button close">Close</button>
-                            <button type="button" id="action-dialog-button" (click)="performAction(action, reportParamQuery)"
+                            <button type="button" id="close-dialog-button" (click)="closeDialog()"
+                                    class="mdl-button close">Close
+                            </button>
+                            <button type="button" id="action-dialog-button"
+                                    (click)="performAction(action, reportParamQuery)"
                                     class="mdl-button close">{{action}}
                             </button>
                         </div>
diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.css b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.scss
similarity index 62%
rename from ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.css
rename to ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.scss
index 6e9242b6a9..51cb05363b 100644
--- a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.css
+++ b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.scss
@@ -22,63 +22,54 @@
     visibility: visible !important;
 }
 
-.large {
-    font-size: x-large;
-    margin-top: 24px;
-    margin-left: 12px;
-}
-
-.icon-small i {
+.adf-edit-report-title {
     float: left;
-    margin-right: 10px;
-    display: none;
-    position: absolute;
+    font-size: 20px;
+    padding-left: 38px;
+    padding-top: 10px;
 }
 
-.icon-small h4 {
-    clear: left;
-    margin-left: 26px;
+.adf-report-icon {
+    float: left;
+    margin-right: 5px;
+    padding: 4px 0 0 9px;
+    visibility: hidden;
 }
 
-.icon-small:hover {
-    color: rgb(68,138,255);
+.adf-report-title-container {
     cursor: pointer;
-}
 
-.icon-small:hover .material-icons {
-    display: block;
+    :hover .adf-report-icon {
+        color: rgb(68, 138, 255);
+        visibility: visible;
+    }
+
 }
 
 .is-hide {
-    height: 0px;
+    height: 0;
     overflow: hidden;
     transition: height 0.5s;
 }
 
-.report-container {
+.adf-report-report-container {
     border-bottom: solid 1px rgb(212, 212, 212);
     padding: 10px 10px 10px 10px;
+
+    .mat-toolbar {
+        border: 0 !important;
+    }
 }
 
 .report-container-setting {
     padding-left: 10px;
 }
 
-.option_button_details{
+.option_button_details {
     padding-top: 20px;
 }
 
-.report-icons {
-    float: right;
-}
-
-.report-icons button {
-    min-width: 48px;
-    padding: 0 0px;
-}
-
-
-.mdl-dialog__title.choose_name{
+.mdl-dialog__title.choose_name {
     padding: 0px;
 }
 
@@ -86,12 +77,12 @@
     width: 30%;
 }
 
-.export-message{
+.export-message {
     background-color: lightgray;
 }
 
-.save-export-input{
-    width:100%;
+.save-export-input {
+    width: 100%;
 }
 
 .delete-parameter {
diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.ts b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.ts
index c89196f15f..02b41197ad 100644
--- a/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.ts
+++ b/ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.ts
@@ -31,12 +31,7 @@ import {
 } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import * as moment from 'moment';
-import {
-    ParameterValueModel,
-    ReportParameterDetailsModel,
-    ReportParametersModel,
-    ReportQuery
-} from 'ng2-activiti-diagrams';
+import { ParameterValueModel, ReportParameterDetailsModel, ReportParametersModel, ReportQuery } from 'ng2-activiti-diagrams';
 import { ContentService, LogService } from 'ng2-alfresco-core';
 import { AnalyticsService } from '../services/analytics.service';
 
@@ -46,7 +41,7 @@ declare let dialogPolyfill: any;
 @Component({
     selector: 'adf-analytics-report-parameters, analytics-report-parameters',
     templateUrl: './analytics-report-parameters.component.html',
-    styleUrls: ['./analytics-report-parameters.component.css'],
+    styleUrls: ['./analytics-report-parameters.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
 export class AnalyticsReportParametersComponent implements OnInit, OnChanges, OnDestroy, AfterViewChecked, AfterContentChecked {
diff --git a/ng2-components/ng2-activiti-analytics/src/i18n/en.json b/ng2-components/ng2-activiti-analytics/src/i18n/en.json
index 3692abf551..d9d3f56b23 100644
--- a/ng2-components/ng2-activiti-analytics/src/i18n/en.json
+++ b/ng2-components/ng2-activiti-analytics/src/i18n/en.json
@@ -1,6 +1,6 @@
 {
   "ANALYTICS": {
-    "TTILE": "ANALYTICS",
+    "TITLE": "ANALYTICS",
     "MESSAGES": {
       "UNKNOWN-WIDGET-TYPE": "UNKNOWN WIDGET TYPE",
       "FILL-PARAMETER": "Fill in the parameters to generate your report",
diff --git a/ng2-components/ng2-activiti-analytics/src/i18n/it.json b/ng2-components/ng2-activiti-analytics/src/i18n/it.json
index 70ca41db4b..f6a6ec696f 100644
--- a/ng2-components/ng2-activiti-analytics/src/i18n/it.json
+++ b/ng2-components/ng2-activiti-analytics/src/i18n/it.json
@@ -1,6 +1,6 @@
 {
     "ANALYTICS": {
-        "TTILE": "ANALYTICS",
+        "TITLE": "ANALYTICS",
         "MESSAGES": {
             "UNKNOWN-WIDGET-TYPE": "TIPO WIDGET SCONOSCIUTO",
             "FILL-PARAMETER": "Riempi tutti i campi per generare il report",