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="report-container">
<div class="adf-report-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">
<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>
<adf-toolbar>
<adf-toolbar-title class="adf-report-title-container">
<div *ngIf="isEditable">
<md-input-container>
<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 *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 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 md-button id="delete-button" (click)="deleteReport(reportId)"
mdTooltip="{{'ANALYTICS.MESSAGES.ICON-DELETE' | translate}}">
<md-icon>delete</md-icon>
</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 md-button id="export-button" (click)="showDialog('Export')"
mdTooltip="{{'ANALYTICS.MESSAGES.ICON-EXPORT-CSV' | translate}}">
<md-icon>file_download</md-icon>
</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 md-button id="save-button" (click)="showDialog('Save')"
mdTooltip="{{'ANALYTICS.MESSAGES.ICON-SAVE' | translate}}">
<md-icon>save</md-icon>
</button>
</span>
</div>
<div class="icon-small">
<i class="material-icons">mode_edit</i>
<h4 (click)="editEnable()">{{reportParameters.name}}</h4>
</div>
</div>
<div *ngFor="let field of reportParameters.definition.parameters" [class.is-hide]="isParametersHide()">
</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'"
<number-widget [field]="field" [group]="reportForm.controls.processInstanceGroup"
[controllerName]="'slowProcessInstanceInteger'"
[required]="true"></number-widget>
</div>
<div *ngSwitchCase="'duration'">
@ -56,26 +68,32 @@
</div>
<div *ngSwitchCase="'status'">
<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>
</div>
<div *ngSwitchCase="'processDefinition'">
<br>
<dropdown-widget [field]="field" [group]="reportForm.controls.processDefGroup" [controllerName]="'processDefinitionId'"
[required]="true" (fieldChanged)="onProcessDefinitionChanges(field)"></dropdown-widget>
<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'"
<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>
<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'"
<dropdown-widget [field]="field" [group]="reportForm.controls.dateIntervalGroup"
[controllerName]="'dateRangeInterval'"
[required]="true" [showDefaultOption]="false"></dropdown-widget>
</div>
<div *ngSwitchDefault>
@ -86,7 +104,9 @@
<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 *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"
@ -99,8 +119,11 @@
</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)"
<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>

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;
}
.large {
font-size: x-large;
margin-top: 24px;
margin-left: 12px;
}
.icon-small i {
.adf-edit-report-title {
float: left;
margin-right: 10px;
display: none;
position: absolute;
font-size: 20px;
padding-left: 38px;
padding-top: 10px;
}
.icon-small h4 {
clear: left;
margin-left: 26px;
.adf-report-icon {
float: left;
margin-right: 5px;
padding: 4px 0 0 9px;
visibility: hidden;
}
.icon-small:hover {
color: rgb(68,138,255);
.adf-report-title-container {
cursor: pointer;
}
.icon-small:hover .material-icons {
display: block;
:hover .adf-report-icon {
color: rgb(68, 138, 255);
visibility: visible;
}
}
.is-hide {
height: 0px;
height: 0;
overflow: hidden;
transition: height 0.5s;
}
.report-container {
.adf-report-report-container {
border-bottom: solid 1px rgb(212, 212, 212);
padding: 10px 10px 10px 10px;
.mat-toolbar {
border: 0 !important;
}
}
.report-container-setting {
padding-left: 10px;
}
.option_button_details{
.option_button_details {
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;
}
@ -86,12 +77,12 @@
width: 30%;
}
.export-message{
.export-message {
background-color: lightgray;
}
.save-export-input{
width:100%;
.save-export-input {
width: 100%;
}
.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';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import * as moment from 'moment';
import {
ParameterValueModel,
ReportParameterDetailsModel,
ReportParametersModel,
ReportQuery
} from 'ng2-activiti-diagrams';
import { ParameterValueModel, ReportParameterDetailsModel, ReportParametersModel, ReportQuery } from 'ng2-activiti-diagrams';
import { ContentService, LogService } from 'ng2-alfresco-core';
import { AnalyticsService } from '../services/analytics.service';
@ -46,7 +41,7 @@ declare let dialogPolyfill: any;
@Component({
selector: 'adf-analytics-report-parameters, analytics-report-parameters',
templateUrl: './analytics-report-parameters.component.html',
styleUrls: ['./analytics-report-parameters.component.css'],
styleUrls: ['./analytics-report-parameters.component.scss'],
encapsulation: ViewEncapsulation.None
})
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": {
"TTILE": "ANALYTICS",
"TITLE": "ANALYTICS",
"MESSAGES": {
"UNKNOWN-WIDGET-TYPE": "UNKNOWN WIDGET TYPE",
"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": {
"TTILE": "ANALYTICS",
"TITLE": "ANALYTICS",
"MESSAGES": {
"UNKNOWN-WIDGET-TYPE": "TIPO WIDGET SCONOSCIUTO",
"FILL-PARAMETER": "Riempi tutti i campi per generare il report",