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

replace header analytics with adf-toolbar (#2218)

Browse Source
This commit is contained in:
Eugenio Romano 2017-08-15 13:39:32 +01:00 committed by Mario Romano
parent 8f5105d33f
commit 3bbc9d33df
5 changed files with 92 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,47 +1,59 @@
<div [class.hide]="hideComponent"> <div [class.hide]="hideComponent">
<div class="report-container"> <div class="adf-report-report-container">
<div class="col-md-6"> <div class="col-md-6">
<div *ngIf="reportParameters"> <div *ngIf="reportParameters">
<form [formGroup]="reportForm" novalidate> <form [formGroup]="reportForm" novalidate>
<div *ngIf="isEditable"> <adf-toolbar>
<input <adf-toolbar-title class="adf-report-title-container">
type="text" <div *ngIf="isEditable">
class="mdl-textfield__input large" <md-input-container>
id="reportName" <input
autofocus mdInput
data-automation-id="reportName" type="text"
[value]="reportParameters.name" class="adf-edit-report-title"
(input)="reportParameters.name=$event.target.value" id="reportName"
(blur)="editTitle($event)" autofocus
/> data-automation-id="reportName"
</div> [value]="reportParameters.name"
<div *ngIf="!isEditable"> (input)="reportParameters.name=$event.target.value"
<div class="report-icons"> (blur)="editTitle($event)"
<button mdTooltip="{{'ANALYTICS.MESSAGES.ICON-SETTING' | translate}}" (click)="toggleParameters()" class="mdl-button mdl-js-button"> (keyup.enter)="editTitle($event)"
<i class="material-icons">settings</i> />
</md-input-container>
</div>
<div *ngIf="!isEditable" (click)="editEnable()">
<md-icon class="adf-report-icon" >mode_edit</md-icon>
<h4 class="adf-report-title" >{{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>
<button id="delete-button" (click)="deleteReport(reportId)" mdTooltip="{{'ANALYTICS.MESSAGES.ICON-DELETE' | translate}}" class="mdl-button mdl-js-button"> <button md-button id="delete-button" (click)="deleteReport(reportId)"
<i class="material-icons">delete</i> mdTooltip="{{'ANALYTICS.MESSAGES.ICON-DELETE' | translate}}">
<md-icon>delete</md-icon>
</button> </button>
<span *ngIf="isFormValid()"> <span *ngIf="isFormValid()">
<button id="export-button" (click)="showDialog('Export')" mdTooltip="{{'ANALYTICS.MESSAGES.ICON-EXPORT-CSV' | translate}}" class="mdl-button mdl-js-button"> <button md-button id="export-button" (click)="showDialog('Export')"
<i class="material-icons">file_download</i> mdTooltip="{{'ANALYTICS.MESSAGES.ICON-EXPORT-CSV' | translate}}">
<md-icon>file_download</md-icon>
</button> </button>
<button id="save-button" (click)="showDialog('Save')" mdTooltip="{{'ANALYTICS.MESSAGES.ICON-SAVE' | translate}}" class="mdl-button mdl-js-button"> <button md-button id="save-button" (click)="showDialog('Save')"
<i class="material-icons">save</i> mdTooltip="{{'ANALYTICS.MESSAGES.ICON-SAVE' | translate}}">
<md-icon>save</md-icon>
</button> </button>
</span> </span>
</div> </div>
<div class="icon-small"> </adf-toolbar>
<i class="material-icons">mode_edit</i> <div *ngFor="let field of reportParameters.definition.parameters"
<h4 (click)="editEnable()">{{reportParameters.name}}</h4> [class.is-hide]="isParametersHide()">
</div>
</div>
<div *ngFor="let field of reportParameters.definition.parameters" [class.is-hide]="isParametersHide()">
<div [ngSwitch]="field.type"> <div [ngSwitch]="field.type">
<div *ngSwitchCase="'integer'"> <div *ngSwitchCase="'integer'">
<br> <br>
<number-widget [field]="field" [group]="reportForm.controls.processInstanceGroup" [controllerName]="'slowProcessInstanceInteger'" <number-widget [field]="field" [group]="reportForm.controls.processInstanceGroup"
[controllerName]="'slowProcessInstanceInteger'"
[required]="true"></number-widget> [required]="true"></number-widget>
</div> </div>
<div *ngSwitchCase="'duration'"> <div *ngSwitchCase="'duration'">
@ -56,26 +68,32 @@
</div> </div>
<div *ngSwitchCase="'status'"> <div *ngSwitchCase="'status'">
<br> <br>
<dropdown-widget [field]="field" [group]="reportForm.controls.statusGroup" [controllerName]="'status'" <dropdown-widget [field]="field" [group]="reportForm.controls.statusGroup"
[controllerName]="'status'"
[required]="true"></dropdown-widget> [required]="true"></dropdown-widget>
</div> </div>
<div *ngSwitchCase="'processDefinition'"> <div *ngSwitchCase="'processDefinition'">
<br> <br>
<dropdown-widget [field]="field" [group]="reportForm.controls.processDefGroup" [controllerName]="'processDefinitionId'" <dropdown-widget [field]="field" [group]="reportForm.controls.processDefGroup"
[required]="true" (fieldChanged)="onProcessDefinitionChanges(field)"></dropdown-widget> [controllerName]="'processDefinitionId'"
[required]="true"
(fieldChanged)="onProcessDefinitionChanges(field)"></dropdown-widget>
</div> </div>
<div *ngSwitchCase="'task'"> <div *ngSwitchCase="'task'">
<br> <br>
<dropdown-widget [field]="field" [group]="reportForm.controls.taskGroup" [controllerName]="'taskName'" <dropdown-widget [field]="field" [group]="reportForm.controls.taskGroup"
[controllerName]="'taskName'"
[required]="true"></dropdown-widget> [required]="true"></dropdown-widget>
</div> </div>
<div *ngSwitchCase="'dateRange'"> <div *ngSwitchCase="'dateRange'">
<br> <br>
<adf-date-range-widget [field]="field" [group]="reportForm.controls.dateRange"></adf-date-range-widget> <adf-date-range-widget [field]="field"
[group]="reportForm.controls.dateRange"></adf-date-range-widget>
</div> </div>
<div *ngSwitchCase="'dateInterval'"> <div *ngSwitchCase="'dateInterval'">
<br> <br>
<dropdown-widget [field]="field" [group]="reportForm.controls.dateIntervalGroup" [controllerName]="'dateRangeInterval'" <dropdown-widget [field]="field" [group]="reportForm.controls.dateIntervalGroup"
[controllerName]="'dateRangeInterval'"
[required]="true" [showDefaultOption]="false"></dropdown-widget> [required]="true" [showDefaultOption]="false"></dropdown-widget>
</div> </div>
<div *ngSwitchDefault> <div *ngSwitchDefault>
@ -86,7 +104,9 @@
<dialog id="report-dialog" class="mdl-dialog options-name-dialog" #reportNameDialog> <dialog id="report-dialog" class="mdl-dialog options-name-dialog" #reportNameDialog>
<h5 id="report-dialog-title" class="mdl-dialog__title">{{action}} report</h5> <h5 id="report-dialog-title" class="mdl-dialog__title">{{action}} report</h5>
<div class="mdl-dialog__content"> <div class="mdl-dialog__content">
<div *ngIf="isSaveAction()" id="save-title-submessage" class="export-message">{{'DIALOG.SAVE_MESSAGE' | translate}}</div> <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"> <div class="mdl-textfield mdl-js-textfield save-export-input">
<label id="report-name-label" [attr.for]="reportName">Report Name</label> <label id="report-name-label" [attr.for]="reportName">Report Name</label>
<input class="mdl-textfield__input" <input class="mdl-textfield__input"
@ -99,8 +119,11 @@
</div> </div>
</div> </div>
<div class="mdl-dialog__actions"> <div class="mdl-dialog__actions">
<button type="button" id="close-dialog-button" (click)="closeDialog()" class="mdl-button close">Close</button> <button type="button" id="close-dialog-button" (click)="closeDialog()"
<button type="button" id="action-dialog-button" (click)="performAction(action, reportParamQuery)" class="mdl-button close">Close
</button>
<button type="button" id="action-dialog-button"
(click)="performAction(action, reportParamQuery)"
class="mdl-button close">{{action}} class="mdl-button close">{{action}}
</button> </button>
</div> </div>

61
ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.css → ng2-components/ng2-activiti-analytics/src/components/analytics-report-parameters.component.scss
View File

@ -22,63 +22,54 @@
visibility: visible !important; visibility: visible !important;
} }
.large { .adf-edit-report-title {
font-size: x-large;
margin-top: 24px;
margin-left: 12px;
}
.icon-small i {
float: left; float: left;
margin-right: 10px; font-size: 20px;
display: none; padding-left: 38px;
position: absolute; padding-top: 10px;
} }
.icon-small h4 { .adf-report-icon {
clear: left; float: left;
margin-left: 26px; margin-right: 5px;
padding: 4px 0 0 9px;
visibility: hidden;
} }
.icon-small:hover { .adf-report-title-container {
color: rgb(68,138,255);
cursor: pointer; cursor: pointer;
}
.icon-small:hover .material-icons { :hover .adf-report-icon {
display: block; color: rgb(68, 138, 255);
visibility: visible;
}
} }
.is-hide { .is-hide {
height: 0px; height: 0;
overflow: hidden; overflow: hidden;
transition: height 0.5s; transition: height 0.5s;
} }
.report-container { .adf-report-report-container {
border-bottom: solid 1px rgb(212, 212, 212); border-bottom: solid 1px rgb(212, 212, 212);
padding: 10px 10px 10px 10px; padding: 10px 10px 10px 10px;
.mat-toolbar {
border: 0 !important;
}
} }
.report-container-setting { .report-container-setting {
padding-left: 10px; padding-left: 10px;
} }
.option_button_details{ .option_button_details {
padding-top: 20px; padding-top: 20px;
} }
.report-icons { .mdl-dialog__title.choose_name {
float: right;
}
.report-icons button {
min-width: 48px;
padding: 0 0px;
}
.mdl-dialog__title.choose_name{
padding: 0px; padding: 0px;
} }
@ -86,12 +77,12 @@
width: 30%; width: 30%;
} }
.export-message{ .export-message {
background-color: lightgray; background-color: lightgray;
} }
.save-export-input{ .save-export-input {
width:100%; width: 100%;
} }
.delete-parameter { .delete-parameter {

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

@ -31,12 +31,7 @@ import {
} from '@angular/core'; } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'; import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import * as moment from 'moment'; import * as moment from 'moment';
import { import { ParameterValueModel, ReportParameterDetailsModel, ReportParametersModel, ReportQuery } from 'ng2-activiti-diagrams';
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';
@ -46,7 +41,7 @@ declare let dialogPolyfill: any;
@Component({ @Component({
selector: 'adf-analytics-report-parameters, analytics-report-parameters', selector: 'adf-analytics-report-parameters, analytics-report-parameters',
templateUrl: './analytics-report-parameters.component.html', templateUrl: './analytics-report-parameters.component.html',
styleUrls: ['./analytics-report-parameters.component.css'], styleUrls: ['./analytics-report-parameters.component.scss'],
encapsulation: ViewEncapsulation.None encapsulation: ViewEncapsulation.None
}) })
export class AnalyticsReportParametersComponent implements OnInit, OnChanges, OnDestroy, AfterViewChecked, AfterContentChecked { export class AnalyticsReportParametersComponent implements OnInit, OnChanges, OnDestroy, AfterViewChecked, AfterContentChecked {

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

@ -1,6 +1,6 @@
{ {
"ANALYTICS": { "ANALYTICS": {
"TTILE": "ANALYTICS", "TITLE": "ANALYTICS",
"MESSAGES": { "MESSAGES": {
"UNKNOWN-WIDGET-TYPE": "UNKNOWN WIDGET TYPE", "UNKNOWN-WIDGET-TYPE": "UNKNOWN WIDGET TYPE",
"FILL-PARAMETER": "Fill in the parameters to generate your report", "FILL-PARAMETER": "Fill in the parameters to generate your report",

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

@ -1,6 +1,6 @@
{ {
"ANALYTICS": { "ANALYTICS": {
"TTILE": "ANALYTICS", "TITLE": "ANALYTICS",
"MESSAGES": { "MESSAGES": {
"UNKNOWN-WIDGET-TYPE": "TIPO WIDGET SCONOSCIUTO", "UNKNOWN-WIDGET-TYPE": "TIPO WIDGET SCONOSCIUTO",
"FILL-PARAMETER": "Riempi tutti i campi per generare il report", "FILL-PARAMETER": "Riempi tutti i campi per generare il report",