mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
Analytics - Add a property to hide the analytics parameters component (#1635)
* Add a property to hide the analytics parameters component Improve the save/delete/export icons * Add documentations
This commit is contained in:
Maurizio Vitale
committed by
Mario Romano
Mario Romano
parent
7ee97efdca
commit
e3ce65880f
@@ -207,7 +207,7 @@ import { AnalyticsModule } from 'ng2-activiti-analytics';
|
||||
<div class="page-content">
|
||||
<div class="mdl-grid">
|
||||
<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>`
|
||||
@@ -259,8 +259,17 @@ platformBrowserDynamic().bootstrapModule(AppModule);
|
||||
| --- | --- |
|
||||
|`appId` | The application 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 |
|
||||
|
||||
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>
|
||||
```
|
||||
|
||||
|
||||
|
||||
## Basic usage example Analytics Generator
|
||||
|
||||
The component generate and show the charts
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
@@ -68,6 +68,16 @@
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.report-icons {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.report-icons button {
|
||||
min-width: 48px;
|
||||
padding: 0 0px;
|
||||
}
|
||||
|
||||
|
||||
.mdl-dialog__title.choose_name{
|
||||
padding: 0px;
|
||||
}
|
||||
@@ -89,3 +99,7 @@
|
||||
margin-left: 60%;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -1,121 +1,117 @@
|
||||
<div class="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">
|
||||
<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 [class.hide]="hideComponent">
|
||||
<div class="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>
|
||||
<button id="delete-button" (click)="deleteReport(reportId)" class="mdl-button mdl-js-button">
|
||||
Delete Report
|
||||
</button>
|
||||
<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 *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>
|
||||
</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>
|
||||
<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>
|
||||
<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 *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>
|
||||
<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 class="icon-small">
|
||||
<i class="material-icons">mode_edit</i>
|
||||
<h4 (click)="editEnable()">{{reportParameters.name}}</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="isFormValid()">
|
||||
<div class="option_button_details">
|
||||
<button id="export-button" class="mdl-button mdl-js-button mdl-button--mini-fab mdl-js-ripple-effect"
|
||||
(click)="showDialog('Export')">
|
||||
<span>
|
||||
Export to CSV <i class="material-icons">file_download</i>
|
||||
</span>
|
||||
</button>
|
||||
<button id="save-button" class="mdl-button mdl-js-button mdl-button--mini-fab mdl-js-ripple-effect"
|
||||
(click)="showDialog('Save')">
|
||||
<span>
|
||||
Save <i class="material-icons">add</i>
|
||||
</span>
|
||||
</button>
|
||||
</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 *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]="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 *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>
|
||||
<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 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>
|
||||
<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 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>
|
||||
</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>
|
||||
</form>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -57,6 +57,9 @@ export class AnalyticsReportParametersComponent implements OnInit, OnChanges, On
|
||||
@Input()
|
||||
reportId: string;
|
||||
|
||||
@Input()
|
||||
hideComponent: boolean = false;
|
||||
|
||||
@Input()
|
||||
debug: boolean = false;
|
||||
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<div class="col-md-6">
|
||||
<analytics-report-parameters [appId]="appId" [reportId]="reportId"
|
||||
[hideComponent]="hideParameters"
|
||||
(onFormValueChanged)="reset()"
|
||||
(onSuccess)="showReport($event)"
|
||||
(saveReportSuccess)="onSaveReportSuccess()"
|
||||
|
||||
@@ -35,6 +35,9 @@ export class AnalyticsComponent implements OnChanges {
|
||||
@Input()
|
||||
reportId: number;
|
||||
|
||||
@Input()
|
||||
hideParameters: boolean = false;
|
||||
|
||||
@Input()
|
||||
debug: boolean = false;
|
||||
|
||||
|
||||
@@ -6,7 +6,10 @@
|
||||
"FILL-PARAMETER": "Fill in the parameters to generate your report",
|
||||
"NO-DATA-FOUND": "No data found",
|
||||
"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": {
|
||||
|
||||
@@ -6,7 +6,10 @@
|
||||
"FILL-PARAMETER": "Riempi tutti i campi per generare il report",
|
||||
"NO-DATA-FOUND": "Nessun valore trovato",
|
||||
"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": {
|
||||
|
||||
Reference in New Issue
Block a user