mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-19 17:14:57 +00:00
[ADF-1250] Remove MDL from Analytics (#2311)
* 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
Eugenio Romano
parent
0e219687ec
commit
3ba93a6840
@ -12,6 +12,11 @@
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
position: relative;
|
||||
top: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-home-card-title {
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
<div *ngFor="let report of reports; let idx = index">
|
||||
<div [ngSwitch]="report.type">
|
||||
<div *ngSwitchCase="'pie'">
|
||||
<div class="col-md-6" *ngIf="isCurrent(idx)">
|
||||
<div *ngIf="isCurrent(idx)">
|
||||
<h4>{{report.title}}</h4>
|
||||
<div *ngIf="!report.hasData()">{{'ANALYTICS.MESSAGES.NO-DATA-FOUND' | translate}}</div>
|
||||
<div *ngIf="report.hasData()">
|
||||
@ -68,7 +68,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div *ngSwitchCase="'bar'">
|
||||
<div class="col-md-6" *ngIf="isCurrent(idx)">
|
||||
<div *ngIf="isCurrent(idx)">
|
||||
<h4>{{report.title}}</h4>
|
||||
<div *ngIf="!report.hasDatasets()">{{'ANALYTICS.MESSAGES.NO-DATA-FOUND' | translate}}</div>
|
||||
<canvas baseChart *ngIf="report.hasDatasets()" class="chart"
|
||||
@ -80,17 +80,17 @@
|
||||
</div>
|
||||
</div>
|
||||
<div *ngSwitchCase="'multiBar'">
|
||||
<div class="col-md-6" *ngIf="isCurrent(idx)">
|
||||
<div *ngIf="isCurrent(idx)">
|
||||
<h4>{{report.title}}</h4>
|
||||
<div *ngIf="!report.hasDatasets()">{{'ANALYTICS.MESSAGES.NO-DATA-FOUND' | translate}}</div>
|
||||
<div *ngIf="report.hasDatasets()">
|
||||
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" [attr.for]="'stacked-id'">
|
||||
<input type="checkbox" [attr.id]="'stacked-id'" class="mdl-checkbox__input"
|
||||
[checked]="report.options.scales.xAxes[0].stacked"
|
||||
[(ngModel)]="report.options.scales.xAxes[0].stacked"
|
||||
(change)="refresh(report)">
|
||||
<span class="mdl-checkbox__label">Stacked</span>
|
||||
</label>
|
||||
<md-checkbox
|
||||
color="primary"
|
||||
[id]="'stacked-id'"
|
||||
[checked]="report.options.scales.xAxes[0].stacked"
|
||||
[(ngModel)]="report.options.scales.xAxes[0].stacked"
|
||||
(change)="refresh(report)">Stacked</md-checkbox>
|
||||
|
||||
<canvas baseChart class="chart"
|
||||
[datasets]="report.datasets"
|
||||
[labels]="report.labels"
|
||||
|
||||
@ -1,25 +1,29 @@
|
||||
<div class="adf-analytics-report-list menu-container">
|
||||
<ul class='mdl-list' *ngIf="isList()">
|
||||
<li class="mdl-list__item activiti-filters__entry" (click)="selectReport(report)" *ngFor="let report of reports; let idx = index"
|
||||
<md-nav-list *ngIf="isList()">
|
||||
<md-list-item class="activiti-filters__entry" (click)="selectReport(report)" *ngFor="let report of reports; let idx = index"
|
||||
[class.active]="currentReport === report">
|
||||
<span [attr.id]="'report-list-' + idx" class="mdl-list__item-primary-content">
|
||||
<i class="material-icons mdl-list__item-icon activiti-filters__entry-icon" [attr.data-automation-id]="report.name + '_filter'">assignment</i>
|
||||
<span [attr.id]="'report-list-' + idx">
|
||||
<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>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="mdl-grid" *ngIf="isGrid()">
|
||||
<div (click)="selectReport(report)" [ngClass]="['mdl-card mdl-cell', 'theme-1']" *ngFor="let report of reports;">
|
||||
<div class="logo"><i class="material-icons">equalizer</i></div>
|
||||
<div class="mdl-card__title">
|
||||
<h1 class="mdl-card__title-text application-title">{{report.name}}</h1>
|
||||
</md-list-item>
|
||||
</md-nav-list>
|
||||
<div class="adf-report-card-grids" *ngIf="isGrid()">
|
||||
<md-card (click)="selectReport(report)" class="adf-report-card" *ngFor="let report of reports;">
|
||||
<div class="adf-report-card-logo logo">
|
||||
<md-icon class="adf-report-card-logo-icon">equalizer</md-icon>
|
||||
</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>
|
||||
</div>
|
||||
<div class="mdl-card__actions mdl-card--border">
|
||||
<i class="material-icons selectedIcon" *ngIf="isSelected(report)">done</i>
|
||||
<div md-card-actions class="adf-report-card-actions">
|
||||
<md-icon class="adf-report-card-actions-icon" *ngIf="isSelected(report)">done</md-icon>
|
||||
</div>
|
||||
</div>
|
||||
</md-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -3,16 +3,17 @@
|
||||
|
||||
.adf-analytics-report-list {
|
||||
|
||||
.mdl-list__item {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.activiti-filters__entry {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.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 {
|
||||
@ -23,39 +24,69 @@
|
||||
color: mat-color($primary);
|
||||
}
|
||||
|
||||
.application-title {
|
||||
z-index: 7;
|
||||
.adf-report-card-grids {
|
||||
display: flex;
|
||||
padding: 8px;
|
||||
flex-flow: row wrap;
|
||||
margin: 0 auto;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.logo {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 35px;
|
||||
z-index: 6;
|
||||
}
|
||||
|
||||
.logo i {
|
||||
font-size: 70px;
|
||||
}
|
||||
|
||||
.theme-1 {
|
||||
.adf-report-card {
|
||||
margin: 8px;
|
||||
width: calc(33.3333333333% - 16px);
|
||||
position: relative;
|
||||
min-height: 200px;
|
||||
overflow: hidden;
|
||||
background-color: #269abc;
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
|
||||
.theme-1 .logo i {
|
||||
color: #168aac;
|
||||
}
|
||||
&-logo {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 35px;
|
||||
z-index: 6;
|
||||
|
||||
.theme-1 .mdl-card__actions i {
|
||||
color: #168aac;
|
||||
}
|
||||
&-icon {
|
||||
font-size: 70px;
|
||||
color: #168aac;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.theme-1 .mdl-card__actions i:hover {
|
||||
color: #b7dfea;
|
||||
}
|
||||
&-title {
|
||||
padding: 16px;
|
||||
z-index: 7;
|
||||
|
||||
.selectedIcon {
|
||||
color: #e9f1f3 !important;
|
||||
.application-title {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -115,7 +115,7 @@ describe('AnalyticsReportListComponent', () => {
|
||||
|
||||
component.onSuccess.subscribe(() => {
|
||||
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-1 > span').innerHTML).toBe('Fake Test Process definition overview');
|
||||
expect(element.querySelector('#report-list-2 > span').innerHTML).toBe('Fake Test Process instances overview');
|
||||
@ -132,7 +132,7 @@ describe('AnalyticsReportListComponent', () => {
|
||||
|
||||
component.onSuccess.subscribe(() => {
|
||||
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-1 > span').innerHTML).toBe('Fake Test Process definition overview');
|
||||
expect(element.querySelector('#report-list-2 > span').innerHTML).toBe('Fake Test Process instances overview');
|
||||
|
||||
@ -21,7 +21,7 @@ import { Observable, Observer } from 'rxjs/Rx';
|
||||
import { AnalyticsService } from '../services/analytics.service';
|
||||
|
||||
@Component({
|
||||
selector: ' adf-analytics-report-list, analytics-report-list',
|
||||
selector: 'adf-analytics-report-list, analytics-report-list',
|
||||
templateUrl: './analytics-report-list.component.html',
|
||||
styleUrls: ['./analytics-report-list.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
|
||||
@ -1,135 +1,139 @@
|
||||
<div [class.hide]="hideComponent">
|
||||
<div class="adf-report-report-container">
|
||||
<div class="col-md-6">
|
||||
<div *ngIf="reportParameters">
|
||||
<form [formGroup]="reportForm" novalidate>
|
||||
<adf-toolbar>
|
||||
<adf-toolbar-title class="adf-report-title-container">
|
||||
<div *ngIf="isEditable">
|
||||
<md-input-container class="adf-full-width-input">
|
||||
<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 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 *ngIf="reportParameters">
|
||||
<form [formGroup]="reportForm" novalidate>
|
||||
<adf-toolbar>
|
||||
<adf-toolbar-title class="adf-report-title-container">
|
||||
<div *ngIf="isEditable">
|
||||
<md-input-container class="adf-full-width-input">
|
||||
<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>
|
||||
</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'"
|
||||
[required]="true"></number-widget>
|
||||
</div>
|
||||
<div *ngSwitchCase="'duration'">
|
||||
<br>
|
||||
<duration-widget [field]="field" [group]="reportForm.controls.durationGroup"
|
||||
[controllerName]="'duration'"></duration-widget>
|
||||
</div>
|
||||
<div *ngSwitchCase="'boolean'">
|
||||
<br>
|
||||
<checkbox-widget [field]="field" [group]="reportForm.controls.typeFilteringGroup"
|
||||
[controllerName]="'typeFiltering'"></checkbox-widget>
|
||||
</div>
|
||||
<div *ngSwitchCase="'status'">
|
||||
<br>
|
||||
<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>
|
||||
</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 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>
|
||||
</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'"
|
||||
[required]="true"></number-widget>
|
||||
</div>
|
||||
<div *ngSwitchCase="'duration'">
|
||||
<br>
|
||||
<duration-widget [field]="field" [group]="reportForm.controls.durationGroup"
|
||||
[controllerName]="'duration'"></duration-widget>
|
||||
</div>
|
||||
<div *ngSwitchCase="'boolean'">
|
||||
<br>
|
||||
<checkbox-widget [field]="field" [group]="reportForm.controls.typeFilteringGroup"
|
||||
[controllerName]="'typeFiltering'"></checkbox-widget>
|
||||
</div>
|
||||
<div *ngSwitchCase="'status'">
|
||||
<br>
|
||||
<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>
|
||||
</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>
|
||||
<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>
|
||||
<ng-template #reportNameDialog>
|
||||
<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">
|
||||
{{'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"
|
||||
type="text"
|
||||
id="repName"
|
||||
[attr.value]="reportName"
|
||||
[(ngModel)]="reportName"
|
||||
[ngModelOptions]="{standalone: true}"
|
||||
placeholder="report name">
|
||||
<div class="save-export-input">
|
||||
<md-input-container class="example-full-width" floatPlaceholder="always">
|
||||
<input mdInput
|
||||
type="text"
|
||||
id="repName"
|
||||
placeholder="Report Name"
|
||||
[value]="reportName"
|
||||
[(ngModel)]="reportName"
|
||||
[ngModelOptions]="{standalone: true}">
|
||||
</md-input-container>
|
||||
</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)"
|
||||
class="mdl-button close">{{action}}
|
||||
</button>
|
||||
<div md-dialog-actions>
|
||||
<button md-button
|
||||
color="accent"
|
||||
type="button"
|
||||
id="close-dialog-button"
|
||||
(click)="closeDialog()">Close</button>
|
||||
<button md-button
|
||||
color="primary"
|
||||
type="button"
|
||||
id="action-dialog-button"
|
||||
(click)="performAction(action, reportParamQuery)">{{action}}</button>
|
||||
</div>
|
||||
</dialog>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -18,10 +18,6 @@
|
||||
background-color: #d50000;
|
||||
}
|
||||
|
||||
.dropdown-widget__invalid .mdl-textfield__error {
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
.adf-edit-report-title {
|
||||
float: left;
|
||||
font-size: 20px!important;
|
||||
@ -78,14 +74,6 @@
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.mdl-dialog__title.choose_name {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.mdl-dialog.options-name-dialog {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.export-message {
|
||||
background-color: lightgray;
|
||||
}
|
||||
@ -103,3 +91,13 @@
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.adf-report-dialog {
|
||||
.mat-input-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mat-dialog-actions {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
@ -215,7 +215,7 @@ describe('AnalyticsReportParametersComponent', () => {
|
||||
it('Should render a checkbox with the value true when the definition parameter type is \'boolean\' ', (done) => {
|
||||
component.onSuccessReportParams.subscribe(() => {
|
||||
fixture.detectChanges();
|
||||
let checkElement: any = element.querySelector('#typeFiltering');
|
||||
let checkElement: any = element.querySelector('#input-typeFiltering');
|
||||
expect(checkElement.checked).toBeTruthy();
|
||||
done();
|
||||
});
|
||||
@ -513,9 +513,10 @@ describe('AnalyticsReportParametersComponent', () => {
|
||||
|
||||
it('Should show a dialog to allowing report save', async(() => {
|
||||
component.saveReportSuccess.subscribe((repId) => {
|
||||
let reportDialogTitle: HTMLElement = <HTMLElement> element.querySelector('#report-dialog');
|
||||
expect(reportDialogTitle.getAttribute('open')).toBeNull();
|
||||
expect(repId).toBe('1');
|
||||
fixture.detectChanges();
|
||||
fixture.whenStable().then(() => {
|
||||
expect(repId).toBe('1');
|
||||
});
|
||||
});
|
||||
|
||||
component.submit(values);
|
||||
@ -529,16 +530,16 @@ describe('AnalyticsReportParametersComponent', () => {
|
||||
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
let reportDialogTitle: HTMLElement = <HTMLElement> element.querySelector('#report-dialog-title');
|
||||
let saveTitleSubMessage: HTMLElement = <HTMLElement> element.querySelector('#save-title-submessage');
|
||||
let inputSaveName: HTMLInputElement = <HTMLInputElement> element.querySelector('#repName');
|
||||
let performActionButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#action-dialog-button');
|
||||
let reportDialogTitle: HTMLElement = <HTMLElement> window.document.querySelector('#report-dialog-title');
|
||||
let saveTitleSubMessage: HTMLElement = <HTMLElement> window.document.querySelector('#save-title-submessage');
|
||||
let inputSaveName: HTMLInputElement = <HTMLInputElement> window.document.querySelector('#repName');
|
||||
let performActionButton: HTMLButtonElement = <HTMLButtonElement> window.document.querySelector('#action-dialog-button');
|
||||
let todayDate = component.getTodayDate();
|
||||
|
||||
expect(reportDialogTitle).not.toBeNull();
|
||||
expect(saveTitleSubMessage).not.toBeNull();
|
||||
expect(reportDialogTitle).not.toBeNull('Dialog title should not be null');
|
||||
expect(saveTitleSubMessage).not.toBeNull('Dialog save title submessage should not be null');
|
||||
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();
|
||||
|
||||
@ -562,9 +563,9 @@ describe('AnalyticsReportParametersComponent', () => {
|
||||
|
||||
fixture.whenStable().then(() => {
|
||||
fixture.detectChanges();
|
||||
let reportDialogTitle: HTMLElement = <HTMLElement> element.querySelector('#report-dialog-title');
|
||||
let inputSaveName: HTMLInputElement = <HTMLInputElement> element.querySelector('#repName');
|
||||
let performActionButton: HTMLButtonElement = <HTMLButtonElement> element.querySelector('#action-dialog-button');
|
||||
let reportDialogTitle: HTMLElement = <HTMLElement> window.document.querySelector('#report-dialog-title');
|
||||
let inputSaveName: HTMLInputElement = <HTMLInputElement> window.document.querySelector('#repName');
|
||||
let performActionButton: HTMLButtonElement = <HTMLButtonElement> window.document.querySelector('#action-dialog-button');
|
||||
let todayDate = component.getTodayDate();
|
||||
|
||||
expect(reportDialogTitle).not.toBeNull();
|
||||
|
||||
@ -30,13 +30,13 @@ import {
|
||||
ViewEncapsulation
|
||||
} from '@angular/core';
|
||||
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
|
||||
import { MdDialog } from '@angular/material';
|
||||
import * as moment from 'moment';
|
||||
import { ParameterValueModel, ReportParameterDetailsModel, ReportParametersModel, ReportQuery } from 'ng2-activiti-diagrams';
|
||||
import { ContentService, LogService } from 'ng2-alfresco-core';
|
||||
import { AnalyticsService } from '../services/analytics.service';
|
||||
|
||||
declare var componentHandler;
|
||||
declare let dialogPolyfill: any;
|
||||
|
||||
@Component({
|
||||
selector: 'adf-analytics-report-parameters, analytics-report-parameters',
|
||||
@ -104,7 +104,8 @@ export class AnalyticsReportParametersComponent implements OnInit, OnChanges, On
|
||||
constructor(private analyticsService: AnalyticsService,
|
||||
private formBuilder: FormBuilder,
|
||||
private logService: LogService,
|
||||
private contentService: ContentService) {
|
||||
private contentService: ContentService,
|
||||
private dialog: MdDialog) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
@ -317,18 +318,13 @@ export class AnalyticsReportParametersComponent implements OnInit, OnChanges, On
|
||||
}
|
||||
|
||||
public showDialog(event: string) {
|
||||
if (!this.reportNameDialog.nativeElement.showModal) {
|
||||
dialogPolyfill.registerDialog(this.reportNameDialog.nativeElement);
|
||||
}
|
||||
this.reportNameDialog.nativeElement.showModal();
|
||||
this.dialog.open(this.reportNameDialog, { width: '500px' });
|
||||
this.action = event;
|
||||
this.reportName = this.reportParameters.name + ' ( ' + this.getTodayDate() + ' )';
|
||||
}
|
||||
|
||||
closeDialog() {
|
||||
if (this.reportNameDialog) {
|
||||
this.reportNameDialog.nativeElement.close();
|
||||
}
|
||||
this.dialog.closeAll();
|
||||
}
|
||||
|
||||
performAction(action: string, reportParamQuery: ReportQuery) {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<div class="col-md-6">
|
||||
<div class="adf-analytics-container">
|
||||
<analytics-report-parameters [appId]="appId" [reportId]="reportId"
|
||||
[hideComponent]="hideParameters"
|
||||
(onFormValueChanged)="reset()"
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" [attr.for]="field.id" [formGroup]="formGroup">
|
||||
<input formControlName="{{controllerName}}" type="checkbox"
|
||||
[attr.id]="field.id"
|
||||
class="mdl-checkbox__input"
|
||||
[checked]="field.value"
|
||||
[(ngModel)]="field.value"
|
||||
(ngModelChange)="changeValue(field)">
|
||||
<span class="mdl-checkbox__label">{{field.nameKey | translate}}</span>
|
||||
</label>
|
||||
<div [formGroup]="formGroup">
|
||||
<md-checkbox
|
||||
color="primary"
|
||||
formControlName="{{controllerName}}"
|
||||
[id]="field.id"
|
||||
[checked]="field.value"
|
||||
[(ngModel)]="field.value"
|
||||
(ngModelChange)="changeValue(field)">{{field.nameKey | translate}}</md-checkbox>
|
||||
</div>
|
||||
@ -16,8 +16,4 @@
|
||||
|
||||
.adf-dropdown-widget__invalid .adf-dropdown-widget__label:after {
|
||||
background-color: #d50000;
|
||||
}
|
||||
|
||||
.adf-dropdown-widget__invalid .mdl-textfield__error {
|
||||
visibility: visible !important;
|
||||
}
|
||||
}
|
||||
@ -1,17 +1,19 @@
|
||||
<div class="mdl-grid">
|
||||
<div class="mdl-cell mdl-cell--6-col">
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label adf-number-widget">
|
||||
<input class="mdl-textfield__input"
|
||||
type="text"
|
||||
pattern="-?[0-9]*(\.[0-9]+)?"
|
||||
[attr.id]="field.id"
|
||||
[value]="field.value"
|
||||
[(ngModel)]="field.value"
|
||||
(ngModelChange)="calculateDuration()">
|
||||
<label class="mdl-textfield__label" [attr.for]="field.id">{{field.nameKey | translate}}</label>
|
||||
<div class="adf-duration-widget-grid">
|
||||
<div class="adf-duration-widget-cell">
|
||||
<div class="adf-number-widget">
|
||||
<md-input-container class="example-full-width" floatPlaceholder="always">
|
||||
<input mdInput
|
||||
placeholder="{{field.nameKey | translate}}"
|
||||
type="text"
|
||||
pattern="-?[0-9]*(\.[0-9]+)?"
|
||||
[id]="field.id"
|
||||
[value]="field.value"
|
||||
[(ngModel)]="field.value"
|
||||
(ngModelChange)="calculateDuration()">
|
||||
</md-input-container>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mdl-cell mdl-cell--6-col">
|
||||
<div class="adf-duration-widget-cell">
|
||||
<div class="dropdown-container">
|
||||
<dropdown-widget [field]="duration" [group]="formGroup" [controllerName]="'timeType'"
|
||||
[showDefaultOption]="false"
|
||||
|
||||
@ -1,20 +1,18 @@
|
||||
.adf-number-widget {
|
||||
width: 100%;
|
||||
.adf-duration-widget-grid {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.adf-number-widget__invalid {
|
||||
.mdl-textfield__input {
|
||||
border-color: #d50000;
|
||||
}
|
||||
.mdl-textfield__label {
|
||||
color: #d50000;
|
||||
&:after {
|
||||
background-color: #d50000;
|
||||
}
|
||||
}
|
||||
.mdl-textfield__error {
|
||||
visibility: visible !important;
|
||||
.adf-duration-widget-cell {
|
||||
width: 49%;
|
||||
}
|
||||
|
||||
.adf-number-widget {
|
||||
width: 100%;
|
||||
|
||||
.mat-input-container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-container {
|
||||
|
||||
@ -1,10 +1,13 @@
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label adf-number-widget" [formGroup]="formGroup">
|
||||
<input formControlName="{{controllerName}}" class="mdl-textfield__input"
|
||||
type="text"
|
||||
pattern="-?[0-9]*(\.[0-9]+)?"
|
||||
[attr.id]="field.id"
|
||||
[value]="field.value"
|
||||
[(ngModel)]="field.value"
|
||||
(ngModelChange)="changeValue(field)">
|
||||
<label class="mdl-textfield__label" [attr.for]="field.id">{{field.nameKey | translate}}</label>
|
||||
<div class="adf-number-widget" [formGroup]="formGroup">
|
||||
<md-input-container class="example-full-width" floatPlaceholder="always">
|
||||
<input mdInput
|
||||
placeholder="{{field.nameKey | translate}}"
|
||||
formControlName="{{controllerName}}"
|
||||
type="text"
|
||||
pattern="-?[0-9]*(\.[0-9]+)?"
|
||||
[id]="field.id"
|
||||
[value]="field.value"
|
||||
[(ngModel)]="field.value"
|
||||
(ngModelChange)="changeValue(field)">
|
||||
</md-input-container>
|
||||
</div>
|
||||
|
||||
@ -1,18 +1,7 @@
|
||||
.adf-number-widget {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.adf-number-widget__invalid {
|
||||
.mdl-textfield__input {
|
||||
border-color: #d50000;
|
||||
}
|
||||
.mdl-textfield__label {
|
||||
color: #d50000;
|
||||
&:after {
|
||||
background-color: #d50000;
|
||||
}
|
||||
}
|
||||
.mdl-textfield__error {
|
||||
visibility: visible !important;
|
||||
}
|
||||
}
|
||||
.mat-input-container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@ -51,19 +51,4 @@ export class NumberWidgetComponent extends WidgetComponent implements OnInit {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,8 +16,17 @@
|
||||
*/
|
||||
|
||||
import { NgModule } from '@angular/core';
|
||||
import { MdButtonModule, MdDatepickerModule, MdGridListModule,
|
||||
MdIconModule, MdInputModule, MdNativeDateModule, MdTooltipModule } from '@angular/material';
|
||||
import {
|
||||
MdButtonModule,
|
||||
MdCheckboxModule,
|
||||
MdDatepickerModule,
|
||||
MdGridListModule,
|
||||
MdIconModule,
|
||||
MdInputModule,
|
||||
MdListModule,
|
||||
MdNativeDateModule,
|
||||
MdTooltipModule
|
||||
} from '@angular/material';
|
||||
|
||||
export function modules() {
|
||||
return [
|
||||
@ -27,6 +36,8 @@ export function modules() {
|
||||
MdTooltipModule,
|
||||
MdNativeDateModule,
|
||||
MdDatepickerModule,
|
||||
MdCheckboxModule,
|
||||
MdListModule,
|
||||
MdGridListModule
|
||||
];
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user