inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-19 17:14:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-1250] Remove MDL from Analytics (#2311)

Browse Source 
* Removal of MDL dialog from report parameters

* Futher mdl removal

* Futher mdl removal

* Fixing demo shell icon position issues

* Futher mdl removal

* Futher mdl removal, tests fix

* Remove mdl leftover
This commit is contained in:
Popovics András 2017-09-10 20:42:32 +01:00 committed by Eugenio Romano
parent 0e219687ec
commit 3ba93a6840
19 changed files with 320 additions and 297 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
demo-shell-ng2/app/components/home/home.component.scss
View File

@ -12,6 +12,11 @@
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.material-icons {
position: relative;
top: 6px;
}
} }
.adf-home-card-title { .adf-home-card-title {

20
ng2-components/ng2-activiti-analytics/src/components/analytics-generator.component.html
View File

@ -12,7 +12,7 @@
<div *ngFor="let report of reports; let idx = index"> <div *ngFor="let report of reports; let idx = index">
<div [ngSwitch]="report.type"> <div [ngSwitch]="report.type">
<div *ngSwitchCase="'pie'"> <div *ngSwitchCase="'pie'">
<div class="col-md-6" *ngIf="isCurrent(idx)"> <div *ngIf="isCurrent(idx)">
<h4>{{report.title}}</h4> <h4>{{report.title}}</h4>
<div *ngIf="!report.hasData()">{{'ANALYTICS.MESSAGES.NO-DATA-FOUND' | translate}}</div> <div *ngIf="!report.hasData()">{{'ANALYTICS.MESSAGES.NO-DATA-FOUND' | translate}}</div>
<div *ngIf="report.hasData()"> <div *ngIf="report.hasData()">
@ -68,7 +68,7 @@
</div> </div>
</div> </div>
<div *ngSwitchCase="'bar'"> <div *ngSwitchCase="'bar'">
<div class="col-md-6" *ngIf="isCurrent(idx)"> <div *ngIf="isCurrent(idx)">
<h4>{{report.title}}</h4> <h4>{{report.title}}</h4>
<div *ngIf="!report.hasDatasets()">{{'ANALYTICS.MESSAGES.NO-DATA-FOUND' | translate}}</div> <div *ngIf="!report.hasDatasets()">{{'ANALYTICS.MESSAGES.NO-DATA-FOUND' | translate}}</div>
<canvas baseChart *ngIf="report.hasDatasets()" class="chart" <canvas baseChart *ngIf="report.hasDatasets()" class="chart"
@ -80,17 +80,17 @@
</div> </div>
</div> </div>
<div *ngSwitchCase="'multiBar'"> <div *ngSwitchCase="'multiBar'">
<div class="col-md-6" *ngIf="isCurrent(idx)"> <div *ngIf="isCurrent(idx)">
<h4>{{report.title}}</h4> <h4>{{report.title}}</h4>
<div *ngIf="!report.hasDatasets()">{{'ANALYTICS.MESSAGES.NO-DATA-FOUND' | translate}}</div> <div *ngIf="!report.hasDatasets()">{{'ANALYTICS.MESSAGES.NO-DATA-FOUND' | translate}}</div>
<div *ngIf="report.hasDatasets()"> <div *ngIf="report.hasDatasets()">
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" [attr.for]="'stacked-id'"> <md-checkbox
<input type="checkbox" [attr.id]="'stacked-id'" class="mdl-checkbox__input" color="primary"
[checked]="report.options.scales.xAxes[0].stacked" [id]="'stacked-id'"
[(ngModel)]="report.options.scales.xAxes[0].stacked" [checked]="report.options.scales.xAxes[0].stacked"
(change)="refresh(report)"> [(ngModel)]="report.options.scales.xAxes[0].stacked"
<span class="mdl-checkbox__label">Stacked</span> (change)="refresh(report)">Stacked</md-checkbox>
</label>
<canvas baseChart class="chart" <canvas baseChart class="chart"
[datasets]="report.datasets" [datasets]="report.datasets"
[labels]="report.labels" [labels]="report.labels"

34
ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.html
View File

@ -1,25 +1,29 @@
<div class="adf-analytics-report-list menu-container"> <div class="adf-analytics-report-list menu-container">
<ul class='mdl-list' *ngIf="isList()"> <md-nav-list *ngIf="isList()">
<li class="mdl-list__item activiti-filters__entry" (click)="selectReport(report)" *ngFor="let report of reports; let idx = index" <md-list-item class="activiti-filters__entry" (click)="selectReport(report)" *ngFor="let report of reports; let idx = index"
[class.active]="currentReport === report"> [class.active]="currentReport === report">
<span [attr.id]="'report-list-' + idx" class="mdl-list__item-primary-content"> <span [attr.id]="'report-list-' + idx">
<i class="material-icons mdl-list__item-icon activiti-filters__entry-icon" [attr.data-automation-id]="report.name + '_filter'">assignment</i> <md-icon md-list-icon
[attr.data-automation-id]="report.name + '_filter'"
class="activiti-filters__entry-icon">assignment</md-icon>
<span class="text">{{report.name}}</span> <span class="text">{{report.name}}</span>
</span> </span>
</li> </md-list-item>
</ul> </md-nav-list>
<div class="mdl-grid" *ngIf="isGrid()"> <div class="adf-report-card-grids" *ngIf="isGrid()">
<div (click)="selectReport(report)" [ngClass]="['mdl-card mdl-cell', 'theme-1']" *ngFor="let report of reports;"> <md-card (click)="selectReport(report)" class="adf-report-card" *ngFor="let report of reports;">
<div class="logo"><i class="material-icons">equalizer</i></div> <div class="adf-report-card-logo logo">
<div class="mdl-card__title"> <md-icon class="adf-report-card-logo-icon">equalizer</md-icon>
<h1 class="mdl-card__title-text application-title">{{report.name}}</h1>
</div> </div>
<div class="mdl-card__supporting-text"> <div md-card-title class="adf-report-card-title">
<h1 class="application-title">{{report.name}}</h1>
</div>
<div md-card-content class="adf-report-card-content">
<p>{{report.description}}</p> <p>{{report.description}}</p>
</div> </div>
<div class="mdl-card__actions mdl-card--border"> <div md-card-actions class="adf-report-card-actions">
<i class="material-icons selectedIcon" *ngIf="isSelected(report)">done</i> <md-icon class="adf-report-card-actions-icon" *ngIf="isSelected(report)">done</md-icon>
</div> </div>
</div> </md-card>
</div> </div>
</div> </div>

93
ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.scss
View File

@ -3,16 +3,17 @@
.adf-analytics-report-list { .adf-analytics-report-list {
.mdl-list__item {
cursor: pointer;
}
.activiti-filters__entry { .activiti-filters__entry {
cursor: pointer; cursor: pointer;
} }
.activiti-filters__entry-icon { .activiti-filters__entry-icon {
margin-right: 12px !important; position: relative;
top: 5px;
}
.mat-nav-list .mat-list-item .mat-list-item-content {
line-height: 48px;
} }
.activiti-filters__entry.active { .activiti-filters__entry.active {
@ -23,39 +24,69 @@
color: mat-color($primary); color: mat-color($primary);
} }
.application-title { .adf-report-card-grids {
z-index: 7; display: flex;
padding: 8px;
flex-flow: row wrap;
margin: 0 auto;
align-items: stretch;
} }
.logo { .adf-report-card {
position: absolute; margin: 8px;
right: 20px; width: calc(33.3333333333% - 16px);
top: 35px; position: relative;
z-index: 6; min-height: 200px;
} overflow: hidden;
.logo i {
font-size: 70px;
}
.theme-1 {
background-color: #269abc; background-color: #269abc;
} display: flex;
flex-direction: column;
cursor: pointer;
.theme-1 .logo i { &-logo {
color: #168aac; position: absolute;
} right: 20px;
top: 35px;
z-index: 6;
.theme-1 .mdl-card__actions i { &-icon {
color: #168aac; font-size: 70px;
} color: #168aac;
width: 1em;
height: 1em;
display: inline-block;
}
}
.theme-1 .mdl-card__actions i:hover { &-title {
color: #b7dfea; padding: 16px;
} z-index: 7;
.selectedIcon { .application-title {
color: #e9f1f3 !important; font-size: 24px;
margin: 0;
}
}
&-content {
padding: 16px;
flex-grow: 1;
}
&-actions {
border-top: 1px solid rgba(0,0,0,.1);
padding: 8px;
box-sizing: border-box;
height: 40px;
&-icon {
color: #e9f1f3;
&:hover {
color: #b7dfea;
}
}
}
} }
} }

4
ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.spec.ts
View File

@ -115,7 +115,7 @@ describe('AnalyticsReportListComponent', () => {
component.onSuccess.subscribe(() => { component.onSuccess.subscribe(() => {
fixture.detectChanges(); fixture.detectChanges();
expect(element.querySelector('#report-list-0 > i').innerHTML).toBe('assignment'); expect(element.querySelector('#report-list-0 .activiti-filters__entry-icon').innerHTML).toBe('assignment');
expect(element.querySelector('#report-list-0 > span').innerHTML).toBe('Fake Test Process definition heat map'); expect(element.querySelector('#report-list-0 > span').innerHTML).toBe('Fake Test Process definition heat map');
expect(element.querySelector('#report-list-1 > span').innerHTML).toBe('Fake Test Process definition overview'); expect(element.querySelector('#report-list-1 > span').innerHTML).toBe('Fake Test Process definition overview');
expect(element.querySelector('#report-list-2 > span').innerHTML).toBe('Fake Test Process instances overview'); expect(element.querySelector('#report-list-2 > span').innerHTML).toBe('Fake Test Process instances overview');
@ -132,7 +132,7 @@ describe('AnalyticsReportListComponent', () => {
component.onSuccess.subscribe(() => { component.onSuccess.subscribe(() => {
fixture.detectChanges(); fixture.detectChanges();
expect(element.querySelector('#report-list-0 > i').innerHTML).toBe('assignment'); expect(element.querySelector('#report-list-0 .activiti-filters__entry-icon').innerHTML).toBe('assignment');
expect(element.querySelector('#report-list-0 > span').innerHTML).toBe('Fake Test Process definition heat map'); expect(element.querySelector('#report-list-0 > span').innerHTML).toBe('Fake Test Process definition heat map');
expect(element.querySelector('#report-list-1 > span').innerHTML).toBe('Fake Test Process definition overview'); expect(element.querySelector('#report-list-1 > span').innerHTML).toBe('Fake Test Process definition overview');
expect(element.querySelector('#report-list-2 > span').innerHTML).toBe('Fake Test Process instances overview'); expect(element.querySelector('#report-list-2 > span').innerHTML).toBe('Fake Test Process instances overview');

2
ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.ts
View File

@ -21,7 +21,7 @@ import { Observable, Observer } from 'rxjs/Rx';
import { AnalyticsService } from '../services/analytics.service'; import { AnalyticsService } from '../services/analytics.service';
@Component({ @Component({
selector: ' adf-analytics-report-list, analytics-report-list', selector: 'adf-analytics-report-list, analytics-report-list',
templateUrl: './analytics-report-list.component.html', templateUrl: './analytics-report-list.component.html',
styleUrls: ['./analytics-report-list.component.scss'], styleUrls: ['./analytics-report-list.component.scss'],
encapsulation: ViewEncapsulation.None encapsulation: ViewEncapsulation.None

246
ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.html
View File

@ -1,135 +1,139 @@
<div [class.hide]="hideComponent"> <div [class.hide]="hideComponent">
<div class="adf-report-report-container"> <div class="adf-report-report-container">
<div class="col-md-6"> <div *ngIf="reportParameters">
<div *ngIf="reportParameters"> <form [formGroup]="reportForm" novalidate>
<form [formGroup]="reportForm" novalidate> <adf-toolbar>
<adf-toolbar> <adf-toolbar-title class="adf-report-title-container">
<adf-toolbar-title class="adf-report-title-container"> <div *ngIf="isEditable">
<div *ngIf="isEditable"> <md-input-container class="adf-full-width-input">
<md-input-container class="adf-full-width-input"> <input
<input mdInput
mdInput type="text"
type="text" class="adf-edit-report-title"
class="adf-edit-report-title" id="reportName"
id="reportName" autofocus
autofocus data-automation-id="reportName"
data-automation-id="reportName" [value]="reportParameters.name"
[value]="reportParameters.name" (input)="reportParameters.name=$event.target.value"
(input)="reportParameters.name=$event.target.value" (blur)="editTitle($event)"
(blur)="editTitle($event)" (keyup.enter)="editTitle($event)"
(keyup.enter)="editTitle($event)" />
/> </md-input-container>
</md-input-container>
</div>
<div class="adf-report-title" *ngIf="!isEditable" (click)="editEnable()">
<md-icon class="adf-report-icon" >mode_edit</md-icon>
<h4>{{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 md-button id="delete-button" (click)="deleteReport(reportId)"
mdTooltip="{{'ANALYTICS.MESSAGES.ICON-DELETE' | translate}}">
<md-icon>delete</md-icon>
</button>
<span *ngIf="isFormValid()">
<button md-button id="export-button" (click)="showDialog('Export')"
mdTooltip="{{'ANALYTICS.MESSAGES.ICON-EXPORT-CSV' | translate}}">
<md-icon>file_download</md-icon>
</button>
<button md-button id="save-button" (click)="showDialog('Save')"
mdTooltip="{{'ANALYTICS.MESSAGES.ICON-SAVE' | translate}}">
<md-icon>save</md-icon>
</button>
</span>
</div> </div>
</adf-toolbar> <div class="adf-report-title" *ngIf="!isEditable" (click)="editEnable()">
<div *ngFor="let field of reportParameters.definition.parameters" <md-icon class="adf-report-icon" >mode_edit</md-icon>
[class.is-hide]="isParametersHide()"> <h4>{{reportParameters.name}}</h4>
<div [ngSwitch]="field.type"> </div>
<div *ngSwitchCase="'integer'"> </adf-toolbar-title>
<br> <div *ngIf="!isEditable">
<number-widget [field]="field" [group]="reportForm.controls.processInstanceGroup" <button md-button mdTooltip="{{'ANALYTICS.MESSAGES.ICON-SETTING' | translate}}"
[controllerName]="'slowProcessInstanceInteger'" (click)="toggleParameters()">
[required]="true"></number-widget> <md-icon>settings</md-icon>
</div> </button>
<div *ngSwitchCase="'duration'"> <button md-button id="delete-button" (click)="deleteReport(reportId)"
<br> mdTooltip="{{'ANALYTICS.MESSAGES.ICON-DELETE' | translate}}">
<duration-widget [field]="field" [group]="reportForm.controls.durationGroup" <md-icon>delete</md-icon>
[controllerName]="'duration'"></duration-widget> </button>
</div> <span *ngIf="isFormValid()">
<div *ngSwitchCase="'boolean'"> <button md-button id="export-button" (click)="showDialog('Export')"
<br> mdTooltip="{{'ANALYTICS.MESSAGES.ICON-EXPORT-CSV' | translate}}">
<checkbox-widget [field]="field" [group]="reportForm.controls.typeFilteringGroup" <md-icon>file_download</md-icon>
[controllerName]="'typeFiltering'"></checkbox-widget> </button>
</div> <button md-button id="save-button" (click)="showDialog('Save')"
<div *ngSwitchCase="'status'"> mdTooltip="{{'ANALYTICS.MESSAGES.ICON-SAVE' | translate}}">
<br> <md-icon>save</md-icon>
<dropdown-widget [field]="field" [group]="reportForm.controls.statusGroup" </button>
[controllerName]="'status'" </span>
[required]="true"></dropdown-widget> </div>
</div> </adf-toolbar>
<div *ngSwitchCase="'processDefinition'"> <div *ngFor="let field of reportParameters.definition.parameters"
<br> [class.is-hide]="isParametersHide()">
<dropdown-widget [field]="field" [group]="reportForm.controls.processDefGroup" <div [ngSwitch]="field.type">
[controllerName]="'processDefinitionId'" <div *ngSwitchCase="'integer'">
[required]="true" <br>
(fieldChanged)="onProcessDefinitionChanges(field)"></dropdown-widget> <number-widget [field]="field" [group]="reportForm.controls.processInstanceGroup"
</div> [controllerName]="'slowProcessInstanceInteger'"
<div *ngSwitchCase="'task'"> [required]="true"></number-widget>
<br> </div>
<dropdown-widget [field]="field" [group]="reportForm.controls.taskGroup" <div *ngSwitchCase="'duration'">
[controllerName]="'taskName'" <br>
[required]="true"></dropdown-widget> <duration-widget [field]="field" [group]="reportForm.controls.durationGroup"
</div> [controllerName]="'duration'"></duration-widget>
<div *ngSwitchCase="'dateRange'"> </div>
<br> <div *ngSwitchCase="'boolean'">
<adf-date-range-widget [field]="field" <br>
[group]="reportForm.controls.dateRange"></adf-date-range-widget> <checkbox-widget [field]="field" [group]="reportForm.controls.typeFilteringGroup"
</div> [controllerName]="'typeFiltering'"></checkbox-widget>
<div *ngSwitchCase="'dateInterval'"> </div>
<br> <div *ngSwitchCase="'status'">
<dropdown-widget [field]="field" [group]="reportForm.controls.dateIntervalGroup" <br>
[controllerName]="'dateRangeInterval'" <dropdown-widget [field]="field" [group]="reportForm.controls.statusGroup"
[required]="true" [showDefaultOption]="false"></dropdown-widget> [controllerName]="'status'"
</div> [required]="true"></dropdown-widget>
<div *ngSwitchDefault> </div>
<span>{{'ANALYTICS.MESSAGES.UNKNOWN-WIDGET-TYPE' | translate}}: {{field.type}}</span> <div *ngSwitchCase="'processDefinition'">
</div> <br>
<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'"
[required]="true"></dropdown-widget>
</div>
<div *ngSwitchCase="'dateRange'">
<br>
<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'"
[required]="true" [showDefaultOption]="false"></dropdown-widget>
</div>
<div *ngSwitchDefault>
<span>{{'ANALYTICS.MESSAGES.UNKNOWN-WIDGET-TYPE' | translate}}: {{field.type}}</span>
</div> </div>
</div> </div>
<dialog id="report-dialog" class="mdl-dialog options-name-dialog" #reportNameDialog> </div>
<h5 id="report-dialog-title" class="mdl-dialog__title">{{action}} report</h5> <ng-template #reportNameDialog>
<div class="mdl-dialog__content"> <div id="report-dialog" class="adf-report-dialog">
<h5 md-dialog-title id="report-dialog-title">{{action}} report</h5>
<div md-dialog-content>
<div *ngIf="isSaveAction()" id="save-title-submessage" class="export-message"> <div *ngIf="isSaveAction()" id="save-title-submessage" class="export-message">
{{'DIALOG.SAVE_MESSAGE' | translate}} {{'DIALOG.SAVE_MESSAGE' | translate}}
</div> </div>
<div class="mdl-textfield mdl-js-textfield save-export-input"> <div class="save-export-input">
<label id="report-name-label" [attr.for]="reportName">Report Name</label> <md-input-container class="example-full-width" floatPlaceholder="always">
<input class="mdl-textfield__input" <input mdInput
type="text" type="text"
id="repName" id="repName"
[attr.value]="reportName" placeholder="Report Name"
[(ngModel)]="reportName" [value]="reportName"
[ngModelOptions]="{standalone: true}" [(ngModel)]="reportName"
placeholder="report name"> [ngModelOptions]="{standalone: true}">
</md-input-container>
</div> </div>
</div> </div>
<div class="mdl-dialog__actions"> <div md-dialog-actions>
<button type="button" id="close-dialog-button" (click)="closeDialog()" <button md-button
class="mdl-button close">Close color="accent"
</button> type="button"
<button type="button" id="action-dialog-button" id="close-dialog-button"
(click)="performAction(action, reportParamQuery)" (click)="closeDialog()">Close</button>
class="mdl-button close">{{action}} <button md-button
</button> color="primary"
type="button"
id="action-dialog-button"
(click)="performAction(action, reportParamQuery)">{{action}}</button>
</div> </div>
</dialog> </div>
</form> </ng-template>
</div> </form>
</div> </div>
</div> </div>
</div> </div>

22
ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.scss
View File

@ -18,10 +18,6 @@
background-color: #d50000; background-color: #d50000;
} }
.dropdown-widget__invalid .mdl-textfield__error {
visibility: visible !important;
}
.adf-edit-report-title { .adf-edit-report-title {
float: left; float: left;
font-size: 20px!important; font-size: 20px!important;
@ -78,14 +74,6 @@
padding-top: 20px; padding-top: 20px;
} }
.mdl-dialog__title.choose_name {
padding: 0px;
}
.mdl-dialog.options-name-dialog {
width: 30%;
}
.export-message { .export-message {
background-color: lightgray; background-color: lightgray;
} }
@ -103,3 +91,13 @@
.hide { .hide {
display: none; display: none;
} }
.adf-report-dialog {
.mat-input-container {
width: 100%;
}
.mat-dialog-actions {
justify-content: flex-end;
}
}

29
ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.spec.ts
View File

@ -215,7 +215,7 @@ describe('AnalyticsReportParametersComponent', () => {
it('Should render a checkbox with the value true when the definition parameter type is \'boolean\' ', (done) => { it('Should render a checkbox with the value true when the definition parameter type is \'boolean\' ', (done) => {
component.onSuccessReportParams.subscribe(() => { component.onSuccessReportParams.subscribe(() => {
fixture.detectChanges(); fixture.detectChanges();
let checkElement: any = element.querySelector('#typeFiltering'); let checkElement: any = element.querySelector('#input-typeFiltering');
expect(checkElement.checked).toBeTruthy(); expect(checkElement.checked).toBeTruthy();
done(); done();
}); });
@ -513,9 +513,10 @@ describe('AnalyticsReportParametersComponent', () => {
it('Should show a dialog to allowing report save', async(() => { it('Should show a dialog to allowing report save', async(() => {
component.saveReportSuccess.subscribe((repId) => { component.saveReportSuccess.subscribe((repId) => {
let reportDialogTitle: HTMLElement = <HTMLElement> element.querySelector('#report-dialog'); fixture.detectChanges();
expect(reportDialogTitle.getAttribute('open')).toBeNull(); fixture.whenStable().then(() => {
expect(repId).toBe('1'); expect(repId).toBe('1');
});
}); });
component.submit(values); component.submit(values);
@ -529,16 +530,16 @@ describe('AnalyticsReportParametersComponent', () => {
fixture.whenStable().then(() => { fixture.whenStable().then(() => {
fixture.detectChanges(); fixture.detectChanges();
let reportDialogTitle: HTMLElement = <HTMLElement> element.querySelector('#report-dialog-title'); let reportDialogTitle: HTMLElement = <HTMLElement> window.document.querySelector('#report-dialog-title');
let saveTitleSubMessage: HTMLElement = <HTMLElement> element.querySelector('#save-title-submessage'); let saveTitleSubMessage: HTMLElement = <HTMLElement> window.document.querySelector('#save-title-submessage');
let inputSaveName: HTMLInputElement = <HTMLInputElement> element.querySelector('#repName'); let inputSaveName: HTMLInputElement = <HTMLInputElement> window.document.querySelector('#repName');
let performActionButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#action-dialog-button'); let performActionButton: HTMLButtonElement = <HTMLButtonElement> window.document.querySelector('#action-dialog-button');
let todayDate = component.getTodayDate(); let todayDate = component.getTodayDate();
expect(reportDialogTitle).not.toBeNull(); expect(reportDialogTitle).not.toBeNull('Dialog title should not be null');
expect(saveTitleSubMessage).not.toBeNull(); expect(saveTitleSubMessage).not.toBeNull('Dialog save title submessage should not be null');
expect(inputSaveName.value.trim()).toEqual(analyticParamsMock.reportDefParamStatus.name + ' ( ' + todayDate + ' )'); expect(inputSaveName.value.trim()).toEqual(analyticParamsMock.reportDefParamStatus.name + ' ( ' + todayDate + ' )');
expect(performActionButton).not.toBeNull(); expect(performActionButton).not.toBeNull('Dialog action button should not be null');
performActionButton.click(); performActionButton.click();
@ -562,9 +563,9 @@ describe('AnalyticsReportParametersComponent', () => {
fixture.whenStable().then(() => { fixture.whenStable().then(() => {
fixture.detectChanges(); fixture.detectChanges();
let reportDialogTitle: HTMLElement = <HTMLElement> element.querySelector('#report-dialog-title'); let reportDialogTitle: HTMLElement = <HTMLElement> window.document.querySelector('#report-dialog-title');
let inputSaveName: HTMLInputElement = <HTMLInputElement> element.querySelector('#repName'); let inputSaveName: HTMLInputElement = <HTMLInputElement> window.document.querySelector('#repName');
let performActionButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#action-dialog-button'); let performActionButton: HTMLButtonElement = <HTMLButtonElement> window.document.querySelector('#action-dialog-button');
let todayDate = component.getTodayDate(); let todayDate = component.getTodayDate();
expect(reportDialogTitle).not.toBeNull(); expect(reportDialogTitle).not.toBeNull();

14
ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.ts
View File

@ -30,13 +30,13 @@ import {
ViewEncapsulation ViewEncapsulation
} from '@angular/core'; } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'; import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { MdDialog } from '@angular/material';
import * as moment from 'moment'; 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 { ContentService, LogService } from 'ng2-alfresco-core';
import { AnalyticsService } from '../services/analytics.service'; import { AnalyticsService } from '../services/analytics.service';
declare var componentHandler; declare var componentHandler;
declare let dialogPolyfill: any;
@Component({ @Component({
selector: 'adf-analytics-report-parameters, analytics-report-parameters', selector: 'adf-analytics-report-parameters, analytics-report-parameters',
@ -104,7 +104,8 @@ export class AnalyticsReportParametersComponent implements OnInit, OnChanges, On
constructor(private analyticsService: AnalyticsService, constructor(private analyticsService: AnalyticsService,
private formBuilder: FormBuilder, private formBuilder: FormBuilder,
private logService: LogService, private logService: LogService,
private contentService: ContentService) { private contentService: ContentService,
private dialog: MdDialog) {
} }
ngOnInit() { ngOnInit() {
@ -317,18 +318,13 @@ export class AnalyticsReportParametersComponent implements OnInit, OnChanges, On
} }
public showDialog(event: string) { public showDialog(event: string) {
if (!this.reportNameDialog.nativeElement.showModal) { this.dialog.open(this.reportNameDialog, { width: '500px' });
dialogPolyfill.registerDialog(this.reportNameDialog.nativeElement);
}
this.reportNameDialog.nativeElement.showModal();
this.action = event; this.action = event;
this.reportName = this.reportParameters.name + ' ( ' + this.getTodayDate() + ' )'; this.reportName = this.reportParameters.name + ' ( ' + this.getTodayDate() + ' )';
} }
closeDialog() { closeDialog() {
if (this.reportNameDialog) { this.dialog.closeAll();
this.reportNameDialog.nativeElement.close();
}
} }
performAction(action: string, reportParamQuery: ReportQuery) { performAction(action: string, reportParamQuery: ReportQuery) {

2
ng2-components/ng2-activiti-analytics/src/components/analytics.component.html
View File

@ -1,4 +1,4 @@
<div class="col-md-6"> <div class="adf-analytics-container">
<analytics-report-parameters [appId]="appId" [reportId]="reportId" <analytics-report-parameters [appId]="appId" [reportId]="reportId"
[hideComponent]="hideParameters" [hideComponent]="hideParameters"
(onFormValueChanged)="reset()" (onFormValueChanged)="reset()"

18
ng2-components/ng2-activiti-analytics/src/components/widgets/checkbox/checkbox.widget.html
View File

@ -1,9 +1,9 @@
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" [attr.for]="field.id" [formGroup]="formGroup"> <div [formGroup]="formGroup">
<input formControlName="{{controllerName}}" type="checkbox" <md-checkbox
[attr.id]="field.id" color="primary"
class="mdl-checkbox__input" formControlName="{{controllerName}}"
[checked]="field.value" [id]="field.id"
[(ngModel)]="field.value" [checked]="field.value"
(ngModelChange)="changeValue(field)"> [(ngModel)]="field.value"
<span class="mdl-checkbox__label">{{field.nameKey | translate}}</span> (ngModelChange)="changeValue(field)">{{field.nameKey | translate}}</md-checkbox>
</label> </div>

6
ng2-components/ng2-activiti-analytics/src/components/widgets/dropdown/dropdown.widget.scss
View File

@ -16,8 +16,4 @@
.adf-dropdown-widget__invalid .adf-dropdown-widget__label:after { .adf-dropdown-widget__invalid .adf-dropdown-widget__label:after {
background-color: #d50000; background-color: #d50000;
} }
.adf-dropdown-widget__invalid .mdl-textfield__error {
visibility: visible !important;
}

26
ng2-components/ng2-activiti-analytics/src/components/widgets/duration/duration.widget.html
View File

@ -1,17 +1,19 @@
<div class="mdl-grid"> <div class="adf-duration-widget-grid">
<div class="mdl-cell mdl-cell--6-col"> <div class="adf-duration-widget-cell">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label adf-number-widget"> <div class="adf-number-widget">
<input class="mdl-textfield__input" <md-input-container class="example-full-width" floatPlaceholder="always">
type="text" <input mdInput
pattern="-?[0-9]*(\.[0-9]+)?" placeholder="{{field.nameKey | translate}}"
[attr.id]="field.id" type="text"
[value]="field.value" pattern="-?[0-9]*(\.[0-9]+)?"
[(ngModel)]="field.value" [id]="field.id"
(ngModelChange)="calculateDuration()"> [value]="field.value"
<label class="mdl-textfield__label" [attr.for]="field.id">{{field.nameKey | translate}}</label> [(ngModel)]="field.value"
(ngModelChange)="calculateDuration()">
</md-input-container>
</div> </div>
</div> </div>
<div class="mdl-cell mdl-cell--6-col"> <div class="adf-duration-widget-cell">
<div class="dropdown-container"> <div class="dropdown-container">
<dropdown-widget [field]="duration" [group]="formGroup" [controllerName]="'timeType'" <dropdown-widget [field]="duration" [group]="formGroup" [controllerName]="'timeType'"
[showDefaultOption]="false" [showDefaultOption]="false"

26
ng2-components/ng2-activiti-analytics/src/components/widgets/duration/duration.widget.scss
View File

@ -1,20 +1,18 @@
.adf-number-widget { .adf-duration-widget-grid {
width: 100%; display: flex;
justify-content: space-between;
} }
.adf-number-widget__invalid { .adf-duration-widget-cell {
.mdl-textfield__input { width: 49%;
border-color: #d50000;
}
.mdl-textfield__label {
color: #d50000;
&:after {
background-color: #d50000;
}
}
.mdl-textfield__error {
visibility: visible !important;
} }
.adf-number-widget {
width: 100%;
.mat-input-container {
width: 100%;
}
} }
.dropdown-container { .dropdown-container {

21
ng2-components/ng2-activiti-analytics/src/components/widgets/number/number.widget.html
View File

@ -1,10 +1,13 @@
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label adf-number-widget" [formGroup]="formGroup"> <div class="adf-number-widget" [formGroup]="formGroup">
<input formControlName="{{controllerName}}" class="mdl-textfield__input" <md-input-container class="example-full-width" floatPlaceholder="always">
type="text" <input mdInput
pattern="-?[0-9]*(\.[0-9]+)?" placeholder="{{field.nameKey | translate}}"
[attr.id]="field.id" formControlName="{{controllerName}}"
[value]="field.value" type="text"
[(ngModel)]="field.value" pattern="-?[0-9]*(\.[0-9]+)?"
(ngModelChange)="changeValue(field)"> [id]="field.id"
<label class="mdl-textfield__label" [attr.for]="field.id">{{field.nameKey | translate}}</label> [value]="field.value"
[(ngModel)]="field.value"
(ngModelChange)="changeValue(field)">
</md-input-container>
</div> </div>

19
ng2-components/ng2-activiti-analytics/src/components/widgets/number/number.widget.scss
View File

@ -1,18 +1,7 @@
.adf-number-widget { .adf-number-widget {
width: 100%; width: 100%;
}
.adf-number-widget__invalid { .mat-input-container {
.mdl-textfield__input { width: 100%;
border-color: #d50000; }
} }
.mdl-textfield__label {
color: #d50000;
&:after {
background-color: #d50000;
}
}
.mdl-textfield__error {
visibility: visible !important;
}
}

15
ng2-components/ng2-activiti-analytics/src/components/widgets/number/number.widget.ts
View File

@ -51,19 +51,4 @@ export class NumberWidgetComponent extends WidgetComponent implements OnInit {
this.formGroup.get(this.controllerName).setValidators(Validators.required); this.formGroup.get(this.controllerName).setValidators(Validators.required);
} }
} }
setupMaterialComponents(handler: any): boolean {
// workaround for MDL issues with dynamic components
if (handler) {
handler.upgradeAllRegistered();
if (this.elementRef && this.hasValue()) {
let container = this.elementRef.nativeElement.querySelector('.mdl-textfield');
if (container && container.MaterialTextfield) {
container.MaterialTextfield.change(this.field.value.toString());
}
}
return true;
}
return false;
}
} }

15
ng2-components/ng2-activiti-analytics/src/material.module.ts
View File

@ -16,8 +16,17 @@
*/ */
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { MdButtonModule, MdDatepickerModule, MdGridListModule, import {
MdIconModule, MdInputModule, MdNativeDateModule, MdTooltipModule } from '@angular/material'; MdButtonModule,
MdCheckboxModule,
MdDatepickerModule,
MdGridListModule,
MdIconModule,
MdInputModule,
MdListModule,
MdNativeDateModule,
MdTooltipModule
} from '@angular/material';
export function modules() { export function modules() {
return [ return [
@ -27,6 +36,8 @@ export function modules() {
MdTooltipModule, MdTooltipModule,
MdNativeDateModule, MdNativeDateModule,
MdDatepickerModule, MdDatepickerModule,
MdCheckboxModule,
MdListModule,
MdGridListModule MdGridListModule
]; ];
} }