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

Analytics - Add a property to hide the analytics parameters component (#1635)

Browse Source 
* Add a property to hide the analytics parameters component
Improve the save/delete/export icons

* Add documentations
This commit is contained in:
Maurizio Vitale
2017-02-15 14:45:05 +00:00
committed by Mario Romano
parent 7ee97efdca
commit e3ce65880f
10 changed files with 147 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
demo-shell-ng2/app/components/activiti/activiti-demo.component.html
View File

@@ -119,6 +119,7 @@
<activiti-analytics *ngIf="report" <activiti-analytics *ngIf="report"
[appId]="appId" [appId]="appId"
[reportId]="report.id" [reportId]="report.id"
[hideParameters]="false"
(editReport)="onEditReport($event)" (editReport)="onEditReport($event)"
(reportSaved)="onReportSaved()" (reportSaved)="onReportSaved()"
(reportDeleted)="onReportDeleted()"> (reportDeleted)="onReportDeleted()">

11
ng2-components/ng2-activiti-analytics/README.md
View File

@@ -207,7 +207,7 @@ import { AnalyticsModule } from 'ng2-activiti-analytics';
<div class="page-content"> <div class="page-content">
<div class="mdl-grid"> <div class="mdl-grid">
<div class="mdl-cell mdl-cell--8-col task-column mdl-shadow--2dp"> <div class="mdl-cell mdl-cell--8-col task-column mdl-shadow--2dp">
<activiti-analytics [appId]="1001" [reportId]="2006"></activiti-analytics> <activiti-analytics [appId]="1001" [reportId]="2006" [hideParameters]="false"></activiti-analytics>
</div> </div>
</div> </div>
</div>` </div>`
@@ -259,8 +259,17 @@ platformBrowserDynamic().bootstrapModule(AppModule);
| --- | --- | | --- | --- |
|`appId` | The application id | |`appId` | The application id |
|`reportId` | The report id | |`reportId` | The report id |
|`hideParameters` | Boolean to hide or show the analytics parameters |
|`debug` | Flag to enable or disable the Form values in the console log | |`debug` | Flag to enable or disable the Form values in the console log |
You can also use the activiti analytic component to show straight away the charts without show the parameters setting the hideParameters to true
```html
<activiti-analytics [appId]="appId" [reportId]="reportId" [hideParameters]="true"></activiti-analytics>
```
![Analytics-without-parameters](docs/assets/analytics-without-parameters.png)
## Basic usage example Analytics Generator ## Basic usage example Analytics Generator
The component generate and show the charts The component generate and show the charts

BIN
ng2-components/ng2-activiti-analytics/docs/assets/analytics-without-parameters.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 69 KiB

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

@@ -68,6 +68,16 @@
padding-top: 20px; 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; padding: 0px;
} }
@@ -89,3 +99,7 @@
margin-left: 60%; margin-left: 60%;
padding-top: 5px; padding-top: 5px;
} }
.hide {
display: none;
}

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

@@ -1,121 +1,117 @@
<div class="report-container"> <div [class.hide]="hideComponent">
<div class="col-md-6"> <div class="report-container">
<div *ngIf="reportParameters"> <div class="col-md-6">
<form [formGroup]="reportForm" novalidate> <div *ngIf="reportParameters">
<div *ngIf="isEditable"> <form [formGroup]="reportForm" novalidate>
<input <div *ngIf="isEditable">
type="text" <input
class="mdl-textfield__input large" type="text"
id="reportName" class="mdl-textfield__input large"
autofocus id="reportName"
data-automation-id="reportName" autofocus
[value]="reportParameters.name" data-automation-id="reportName"
(input)="reportParameters.name=$event.target.value" [value]="reportParameters.name"
(blur)="editTitle($event)" (input)="reportParameters.name=$event.target.value"
/> (blur)="editTitle($event)"
</div> />
<div *ngIf="!isEditable">
<button mdTooltip="{{'ANALYTICS.MESSAGES.SETTING-TITLE' | translate}}" (click)="toggleParameters()" class="mdl-button mdl-js-button" style="float: right">
<i class="material-icons">settings</i>
</button>
<div class="icon-small">
<i class="material-icons">mode_edit</i>
<h4 (click)="editEnable()">{{reportParameters.name}}</h4>
</div> </div>
</div> <div *ngIf="!isEditable">
<button id="delete-button" (click)="deleteReport(reportId)" class="mdl-button mdl-js-button"> <div class="report-icons">
Delete Report <button mdTooltip="{{'ANALYTICS.MESSAGES.ICON-SETTING' | translate}}" (click)="toggleParameters()" class="mdl-button mdl-js-button">
</button> <i class="material-icons">settings</i>
<div *ngFor="let field of reportParameters.definition.parameters" [class.is-hide]="isParametersHide()"> </button>
<div [ngSwitch]="field.type"> <button id="delete-button" (click)="deleteReport(reportId)" mdTooltip="{{'ANALYTICS.MESSAGES.ICON-DELETE' | translate}}" class="mdl-button mdl-js-button">
<div *ngSwitchCase="'integer'"> <i class="material-icons">delete</i>
<br> </button>
<number-widget [field]="field" [group]="reportForm.controls.processInstanceGroup" [controllerName]="'slowProcessInstanceInteger'" <span *ngIf="isFormValid()">
[required]="true"></number-widget> <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>
<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>
</span>
</div> </div>
<div *ngSwitchCase="'duration'"> <div class="icon-small">
<br> <i class="material-icons">mode_edit</i>
<duration-widget [field]="field" [group]="reportForm.controls.durationGroup" <h4 (click)="editEnable()">{{reportParameters.name}}</h4>
[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>
<date-range-widget [field]="field" [group]="reportForm.controls.dateRange"></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>
</div> <div *ngFor="let field of reportParameters.definition.parameters" [class.is-hide]="isParametersHide()">
<div *ngIf="isFormValid()"> <div [ngSwitch]="field.type">
<div class="option_button_details"> <div *ngSwitchCase="'integer'">
<button id="export-button" class="mdl-button mdl-js-button mdl-button--mini-fab mdl-js-ripple-effect" <br>
(click)="showDialog('Export')"> <number-widget [field]="field" [group]="reportForm.controls.processInstanceGroup" [controllerName]="'slowProcessInstanceInteger'"
<span> [required]="true"></number-widget>
Export to CSV <i class="material-icons">file_download</i> </div>
</span> <div *ngSwitchCase="'duration'">
</button> <br>
<button id="save-button" class="mdl-button mdl-js-button mdl-button--mini-fab mdl-js-ripple-effect" <duration-widget [field]="field" [group]="reportForm.controls.durationGroup"
(click)="showDialog('Save')"> [controllerName]="'duration'"></duration-widget>
<span> </div>
Save <i class="material-icons">add</i> <div *ngSwitchCase="'boolean'">
</span> <br>
</button> <checkbox-widget [field]="field" [group]="reportForm.controls.typeFilteringGroup"
</div> [controllerName]="'typeFiltering'"></checkbox-widget>
</div> </div>
<dialog id="report-dialog" class="mdl-dialog options-name-dialog" #reportNameDialog> <div *ngSwitchCase="'status'">
<h5 id="report-dialog-title" class="mdl-dialog__title">{{action}} report</h5> <br>
<div class="mdl-dialog__content"> <dropdown-widget [field]="field" [group]="reportForm.controls.statusGroup" [controllerName]="'status'"
<div *ngIf="isSaveAction()" id="save-title-submessage" class="export-message">{{'DIALOG.SAVE_MESSAGE' | translate}}</div> [required]="true"></dropdown-widget>
<div class="mdl-textfield mdl-js-textfield save-export-input"> </div>
<label id="report-name-label" [attr.for]="repname">Report Name</label> <div *ngSwitchCase="'processDefinition'">
<input class="mdl-textfield__input" <br>
type="text" <dropdown-widget [field]="field" [group]="reportForm.controls.processDefGroup" [controllerName]="'processDefinitionId'"
id="repName" [required]="true" (fieldChanged)="onProcessDefinitionChanges(field)"></dropdown-widget>
[attr.value]="reportName" </div>
[(ngModel)]="reportName" <div *ngSwitchCase="'task'">
[ngModelOptions]="{standalone: true}" <br>
placeholder="report name"> <dropdown-widget [field]="field" [group]="reportForm.controls.taskGroup" [controllerName]="'taskName'"
[required]="true"></dropdown-widget>
</div>
<div *ngSwitchCase="'dateRange'">
<br>
<date-range-widget [field]="field" [group]="reportForm.controls.dateRange"></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> </div>
<div class="mdl-dialog__actions"> <dialog id="report-dialog" class="mdl-dialog options-name-dialog" #reportNameDialog>
<button type="button" id="close-dialog-button" (click)="closeDialog()" class="mdl-button close">Close</button> <h5 id="report-dialog-title" class="mdl-dialog__title">{{action}} report</h5>
<button type="button" id="action-dialog-button" (click)="performAction(action, reportParamQuery)" <div class="mdl-dialog__content">
class="mdl-button close">{{action}} <div *ngIf="isSaveAction()" id="save-title-submessage" class="export-message">{{'DIALOG.SAVE_MESSAGE' | translate}}</div>
</button> <div class="mdl-textfield mdl-js-textfield save-export-input">
<label id="report-name-label" [attr.for]="repname">Report Name</label>
<input class="mdl-textfield__input"
type="text"
id="repName"
[attr.value]="reportName"
[(ngModel)]="reportName"
[ngModelOptions]="{standalone: true}"
placeholder="report name">
</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>
</dialog>
<div *ngIf="debug">
<p>ReportForm valid : {{ reportForm.valid }}</p>
<p>ReportForm status : {{ reportForm.errors | json }}</p>
<p>ReportForm FormGroup valid : {{reportForm && reportForm.controls.dateRange.valid | json }}</p>
</div> </div>
</dialog> </form>
<div *ngIf="debug"> </div>
<p>ReportForm valid : {{ reportForm.valid }}</p>
<p>ReportForm status : {{ reportForm.errors | json }}</p>
<p>ReportForm FormGroup valid : {{reportForm && reportForm.controls.dateRange.valid | json }}</p>
</div>
</form>
</div> </div>
</div> </div>
</div> </div>

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

@@ -57,6 +57,9 @@ export class AnalyticsReportParametersComponent implements OnInit, OnChanges, On
@Input() @Input()
reportId: string; reportId: string;
@Input()
hideComponent: boolean = false;
@Input() @Input()
debug: boolean = false; debug: boolean = false;

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

@@ -1,5 +1,6 @@
<div class="col-md-6"> <div class="col-md-6">
<analytics-report-parameters [appId]="appId" [reportId]="reportId" <analytics-report-parameters [appId]="appId" [reportId]="reportId"
[hideComponent]="hideParameters"
(onFormValueChanged)="reset()" (onFormValueChanged)="reset()"
(onSuccess)="showReport($event)" (onSuccess)="showReport($event)"
(saveReportSuccess)="onSaveReportSuccess()" (saveReportSuccess)="onSaveReportSuccess()"

3
ng2-components/ng2-activiti-analytics/src/components/analytics.component.ts
View File

@@ -35,6 +35,9 @@ export class AnalyticsComponent implements OnChanges {
@Input() @Input()
reportId: number; reportId: number;
@Input()
hideParameters: boolean = false;
@Input() @Input()
debug: boolean = false; debug: boolean = false;

5
ng2-components/ng2-activiti-analytics/src/i18n/en.json
View File

@@ -6,7 +6,10 @@
"FILL-PARAMETER": "Fill in the parameters to generate your report", "FILL-PARAMETER": "Fill in the parameters to generate your report",
"NO-DATA-FOUND": "No data found", "NO-DATA-FOUND": "No data found",
"ZERO-DATA-FOUND": "There are only zero values", "ZERO-DATA-FOUND": "There are only zero values",
"SETTING-TITLE": "Settings" "ICON-SETTING": "Settings",
"ICON-SAVE": "Save",
"ICON-DELETE": "Delete",
"ICON-EXPORT-CSV": "Export to CSV"
} }
}, },
"__KEY_REPORTING": { "__KEY_REPORTING": {

5
ng2-components/ng2-activiti-analytics/src/i18n/it.json
View File

@@ -6,7 +6,10 @@
"FILL-PARAMETER": "Riempi tutti i campi per generare il report", "FILL-PARAMETER": "Riempi tutti i campi per generare il report",
"NO-DATA-FOUND": "Nessun valore trovato", "NO-DATA-FOUND": "Nessun valore trovato",
"ZERO-DATA-FOUND": "Ci sono solo valori che valgono zero", "ZERO-DATA-FOUND": "Ci sono solo valori che valgono zero",
"SETTING-TITLE": "Modifica i parametri del report" "ICON-SETTING": "Modifica i parametri del report",
"ICON-SAVE": "Salva",
"ICON-DELETE": "Cancella",
"ICON-EXPORT-CSV": "Esporta come CSV"
} }
}, },
"__KEY_REPORTING": { "__KEY_REPORTING": {