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

demo-shell-ng2/app/components/activiti/activiti-demo.component.html

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

ng2-components/ng2-activiti-analytics/README.md

@@ -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>
+```
+
+![Analytics-without-parameters](docs/assets/analytics-without-parameters.png)
+
 ## Basic usage example Analytics Generator
 
 The component generate and show the charts

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

@@ -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;
+}

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

@@ -1,3 +1,4 @@
+<div [class.hide]="hideComponent">
     <div class="report-container">
         <div class="col-md-6">
             <div *ngIf="reportParameters">
@@ -15,17 +16,27 @@
                         />
                     </div>
                     <div *ngIf="!isEditable">
-                    <button mdTooltip="{{'ANALYTICS.MESSAGES.SETTING-TITLE' | translate}}" (click)="toggleParameters()" class="mdl-button mdl-js-button" style="float: right">
+                        <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 class="icon-small">
                             <i class="material-icons">mode_edit</i>
                             <h4 (click)="editEnable()">{{reportParameters.name}}</h4>
                         </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'">
@@ -72,22 +83,6 @@
                             </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">
@@ -119,3 +114,4 @@
             </div>
         </div>
     </div>
+</div>

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

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

ng2-components/ng2-activiti-analytics/src/components/analytics.component.html

@@ -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()"

ng2-components/ng2-activiti-analytics/src/components/analytics.component.ts

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

ng2-components/ng2-activiti-analytics/src/i18n/en.json

@@ -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": {

ng2-components/ng2-activiti-analytics/src/i18n/it.json

@@ -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": {