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

[ADF-1095] Date Range picker remains on screen remove md-data-picker (#2190)

Browse Source 
* [ADF-1095] Date Range picker remains on screen

* created date widget component  with md datepicker.

* [ADF-1095] Date Range picker remains on screen.

* Changed mdl date picker to md date picker.
* Updated en.josn with new fields.
* Added md libraires to  spec files .

* [ADF-1095] Date Range picker remains on screen

* Removed old id's for start and end date inputs.

* remove md-date-time-picker

* use local MaterialModule in test

* [activiti-analytics] remove encapsulation and fix test

* remove from vendor md-date-time-picker
This commit is contained in:
Eugenio Romano 2017-08-14 13:59:22 +01:00 committed by Mario Romano
parent 6d30752386
commit 56e65cd652
44 changed files with 275 additions and 344 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
demo-shell-ng2/app/vendor.ts
View File

@ -57,10 +57,6 @@ require('script-loader!raphael/raphael.min.js');
require('script-loader!moment/min/moment.min.js');
import 'md-date-time-picker/dist/css/mdDateTimePicker.css';
require('script-loader!md-date-time-picker/dist/js/mdDateTimePicker.min.js');
require('script-loader!md-date-time-picker/dist/js/draggabilly.pkgd.min.js');
require('pdfjs-dist/web/compatibility.js');
// Setting worker path to worker bundle.

1
demo-shell-ng2/package.json
View File

@ -76,7 +76,6 @@
"intl": "1.2.5",
"material-design-icons": "2.2.3",
"material-design-lite": "1.2.1",
"md-date-time-picker": "2.2.0",
"minimatch": "3.0.4",
"moment": "2.15.1",
"ng2-3d-editor": "0.0.15",

5
ng2-components/config/karma.conf-all.js
View File

@ -20,11 +20,6 @@ module.exports = function (config) {
{pattern: './node_modules/alfresco-js-api/dist/alfresco-js-api.min.js', included: true, watched: false},
{pattern: './node_modules/raphael/raphael.min.js', included: true, watched: false},
{pattern: './node_modules/moment/min/moment.min.js', included: true, watched: false},
{
pattern: './node_modules/md-date-time-picker/dist/js/mdDateTimePicker.min.js',
included: true,
watched: false
},
{pattern: './node_modules/ng2-translate/ng2-translate.js', included: false, watched: false},
{

11
ng2-components/ng2-activiti-analytics/index.ts
View File

@ -16,7 +16,6 @@
*/
import { ModuleWithProviders, NgModule } from '@angular/core';
import { MdButtonModule, MdIconModule, MdTooltipModule } from '@angular/material';
import { DiagramsModule } from 'ng2-activiti-diagrams';
import { CoreModule, TRANSLATION_PROVIDER } from 'ng2-alfresco-core';
@ -27,8 +26,8 @@ import { AnalyticsReportListComponent } from './src/components/analytics-report-
import { AnalyticsReportParametersComponent } from './src/components/analytics-report-parameters.component';
import { AnalyticsComponent } from './src/components/analytics.component';
import { AnalyticsService } from './src/services/analytics.service';
import { WIDGET_DIRECTIVES } from './src/components/widgets/index';
import { MaterialModule } from './src/material.module';
export * from './src/components/analytics.component';
export * from './src/components/analytics-generator.component';
@ -55,9 +54,7 @@ export const ANALYTICS_PROVIDERS: any[] = [
CoreModule,
ChartsModule,
DiagramsModule,
MdTooltipModule,
MdButtonModule,
MdIconModule
MaterialModule
],
declarations: [
...ANALYTICS_DIRECTIVES
@ -75,9 +72,7 @@ export const ANALYTICS_PROVIDERS: any[] = [
],
exports: [
...ANALYTICS_DIRECTIVES,
MdTooltipModule,
MdButtonModule,
MdIconModule
MaterialModule
]
})
export class AnalyticsModule {

2
ng2-components/ng2-activiti-analytics/karma.conf.js
View File

@ -15,11 +15,9 @@ module.exports = function (config) {
'./node_modules/alfresco-js-api/dist/alfresco-js-api.js',
'./node_modules/raphael/raphael.js',
'./node_modules/moment/min/moment.min.js',
'./node_modules/md-date-time-picker/dist/js/mdDateTimePicker.js',
{pattern: './node_modules/ng2-translate/**/*.js', included: false, watched: false},
{pattern: './node_modules/ng2-charts/**/*.js', included: false, served: true, watched: false},
{pattern: './node_modules/md-date-time-picker/**/*.js', included: false, served: true, watched: false},
{pattern: './node_modules/moment/**/*.js', included: false, served: true, watched: false},
{pattern: 'karma-test-shim.js', watched: false},

3
ng2-components/ng2-activiti-analytics/package.json
View File

@ -44,11 +44,10 @@
"@angular/platform-browser-dynamic": "4.2.5",
"@angular/router": "4.2.5",
"@ngx-translate/core": "7.0.0",
"alfresco-js-api": "1.7.0",
"alfresco-js-api": "^1.8.0-beta1",
"chart.js": "2.5.0",
"core-js": "2.4.1",
"hammerjs": "2.0.8",
"md-date-time-picker": "2.2.0",
"moment": "2.15.1",
"ng2-activiti-diagrams": "1.7.0",
"ng2-alfresco-core": "1.7.0",

0
ng2-components/ng2-activiti-analytics/src/components/analytics-generator.component.css → ng2-components/ng2-activiti-analytics/src/components/analytics-generator.component.scss
View File

7
ng2-components/ng2-activiti-analytics/src/components/analytics-generator.component.spec.ts
View File

@ -17,7 +17,6 @@
import { DebugElement } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { MdButtonModule, MdIconModule, MdTooltipModule } from '@angular/material';
import { DiagramsModule } from 'ng2-activiti-diagrams';
import { AlfrescoTranslationService, CoreModule } from 'ng2-alfresco-core';
import { ChartsModule } from 'ng2-charts';
@ -31,6 +30,7 @@ import { AnalyticsReportHeatMapComponent } from '../components/analytics-report-
import { AnalyticsReportListComponent } from '../components/analytics-report-list.component';
import { AnalyticsReportParametersComponent } from '../components/analytics-report-parameters.component';
import { WIDGET_DIRECTIVES } from '../components/widgets/index';
import { MaterialModule } from '../material.module';
import { AnalyticsService } from '../services/analytics.service';
export const ANALYTICS_DIRECTIVES: any[] = [
@ -59,11 +59,8 @@ describe('AnalyticsGeneratorComponent', () => {
TestBed.configureTestingModule({
imports: [
CoreModule.forRoot(),
MdTooltipModule,
MdButtonModule,
MdIconModule,
MaterialModule,
ChartsModule,
DiagramsModule.forRoot()
],
declarations: [

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

@ -15,7 +15,7 @@
* limitations under the License.
*/
import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
import { Component, EventEmitter, Input, OnChanges, Output, ViewEncapsulation } from '@angular/core';
import { ReportQuery } from 'ng2-activiti-diagrams';
import { Chart } from 'ng2-activiti-diagrams';
import { AnalyticsService } from '../services/analytics.service';
@ -23,7 +23,8 @@ import { AnalyticsService } from '../services/analytics.service';
@Component({
selector: 'adf-analytics-generator, activiti-analytics-generator',
templateUrl: './analytics-generator.component.html',
styleUrls: ['./analytics-generator.component.css']
styleUrls: ['./analytics-generator.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class AnalyticsGeneratorComponent implements OnChanges {
@ -64,7 +65,7 @@ export class AnalyticsGeneratorComponent implements OnChanges {
constructor(private analyticsService: AnalyticsService) {
}
ngOnChanges(changes: SimpleChanges) {
ngOnChanges() {
if (this.reportId && this.reportParamQuery) {
this.generateReport(this.reportId, this.reportParamQuery);
} else {

4
ng2-components/ng2-activiti-analytics/src/components/analytics-report-heat-map.component.spec.ts
View File

@ -22,6 +22,7 @@ import { AlfrescoTranslationService, CoreModule } from 'ng2-alfresco-core';
import { Observable } from 'rxjs/Rx';
import { AnalyticsReportHeatMapComponent } from '../components/analytics-report-heat-map.component';
import { WIDGET_DIRECTIVES } from '../components/widgets/index';
import { MaterialModule } from '../material.module';
import { AnalyticsService } from '../services/analytics.service';
declare let jasmine: any;
@ -46,7 +47,8 @@ describe('AnalyticsReportHeatMapComponent', () => {
TestBed.configureTestingModule({
imports: [
CoreModule.forRoot(),
DiagramsModule.forRoot()
DiagramsModule.forRoot(),
MaterialModule
],
declarations: [
AnalyticsReportHeatMapComponent,

5
ng2-components/ng2-activiti-analytics/src/components/analytics-report-list.component.ts
View File

@ -15,7 +15,7 @@
* limitations under the License.
*/
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
import { ReportParametersModel } from 'ng2-activiti-diagrams';
import { Observable, Observer } from 'rxjs/Rx';
import { AnalyticsService } from '../services/analytics.service';
@ -23,7 +23,8 @@ import { AnalyticsService } from '../services/analytics.service';
@Component({
selector: ' adf-analytics-report-list, analytics-report-list',
templateUrl: './analytics-report-list.component.html',
styleUrls: ['./analytics-report-list.component.css']
styleUrls: ['./analytics-report-list.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AnalyticsReportListComponent implements OnInit {

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

@ -71,7 +71,7 @@
</div>
<div *ngSwitchCase="'dateRange'">
<br>
<date-range-widget [field]="field" [group]="reportForm.controls.dateRange"></date-range-widget>
<adf-date-range-widget [field]="field" [group]="reportForm.controls.dateRange"></adf-date-range-widget>
</div>
<div *ngSwitchCase="'dateInterval'">
<br>

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

@ -17,16 +17,15 @@
import { DebugElement, SimpleChange } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { MdButtonModule, MdTooltipModule, OVERLAY_PROVIDERS } from '@angular/material';
import * as moment from 'moment';
import { ReportParametersModel } from 'ng2-activiti-diagrams';
import { AlfrescoTranslationService, AppConfigModule, CoreModule } from 'ng2-alfresco-core';
import { Observable } from 'rxjs/Rx';
import { ReportParametersModel } from 'ng2-activiti-diagrams';
import * as analyticParamsMock from '../assets/analyticsParamsReportComponent.mock';
import { AnalyticsReportParametersComponent } from '../components/analytics-report-parameters.component';
import { WIDGET_DIRECTIVES } from '../components/widgets/index';
import { MaterialModule } from '../material.module';
import { AnalyticsService } from '../services/analytics.service';
import { DateRangeWidgetComponent } from './widgets/date-range/date-range.widget';
declare let jasmine: any;
@ -46,16 +45,15 @@ describe('AnalyticsReportParametersComponent', () => {
AppConfigModule.forRoot('app.config.json', {
bpmHost: 'http://localhost:9876/bpm'
}),
MdTooltipModule,
MdButtonModule
MaterialModule
],
declarations: [
DateRangeWidgetComponent,
AnalyticsReportParametersComponent,
...WIDGET_DIRECTIVES
],
providers: [
AnalyticsService,
OVERLAY_PROVIDERS
AnalyticsService
]
}).compileComponents();
@ -115,7 +113,7 @@ describe('AnalyticsReportParametersComponent', () => {
let reportId = 1;
let change = new SimpleChange(null, reportId, true);
component.ngOnChanges({ 'reportId': change });
component.ngOnChanges({'reportId': change});
jasmine.Ajax.requests.mostRecent().respondWith({
status: 200,
@ -135,7 +133,7 @@ describe('AnalyticsReportParametersComponent', () => {
let reportId = 1;
let change = new SimpleChange(null, reportId, true);
component.ngOnChanges({ 'reportId': change });
component.ngOnChanges({'reportId': change});
jasmine.Ajax.requests.mostRecent().respondWith({
status: 200,
@ -162,7 +160,7 @@ describe('AnalyticsReportParametersComponent', () => {
let reportId = 1;
let change = new SimpleChange(null, reportId, true);
component.ngOnChanges({ 'reportId': change });
component.ngOnChanges({'reportId': change});
jasmine.Ajax.requests.mostRecent().respondWith({
status: 200,
@ -224,7 +222,7 @@ describe('AnalyticsReportParametersComponent', () => {
let reportId = 1;
let change = new SimpleChange(null, reportId, true);
component.ngOnChanges({ 'reportId': change });
component.ngOnChanges({'reportId': change});
jasmine.Ajax.requests.mostRecent().respondWith({
status: 200,
@ -235,21 +233,15 @@ describe('AnalyticsReportParametersComponent', () => {
it('Should render a date range components when the definition parameter type is \'dateRange\' ', (done) => {
component.onSuccessReportParams.subscribe(() => {
fixture.detectChanges();
let today = moment().format('YYYY-MM-DD');
const startDate: any = element.querySelector('#startDateInput');
const endDate: any = element.querySelector('#endDateInput');
expect(startDate.value).toEqual(today);
expect(endDate.value).toEqual(today);
let dateElement: any = element.querySelector('adf-date-range-widget');
expect(dateElement).toBeDefined();
done();
});
let reportId = 1;
let change = new SimpleChange(null, reportId, true);
component.ngOnChanges({ 'reportId': change });
component.toggleParameters();
component.ngOnChanges({'reportId': change});
jasmine.Ajax.requests.mostRecent().respondWith({
status: 200,
@ -274,7 +266,7 @@ describe('AnalyticsReportParametersComponent', () => {
let reportId = 1;
let change = new SimpleChange(null, reportId, true);
component.ngOnChanges({ 'reportId': change });
component.ngOnChanges({'reportId': change});
jasmine.Ajax.requests.mostRecent().respondWith({
status: 200,
@ -312,7 +304,7 @@ describe('AnalyticsReportParametersComponent', () => {
let reportId = 1;
let change = new SimpleChange(null, reportId, true);
component.ngOnChanges({ 'reportId': change });
component.ngOnChanges({'reportId': change});
});
@ -346,7 +338,7 @@ describe('AnalyticsReportParametersComponent', () => {
component.appId = appId;
component.reportId = '1';
let change = new SimpleChange(null, appId, true);
component.ngOnChanges({ 'appId': change });
component.ngOnChanges({'appId': change});
});
@ -359,7 +351,7 @@ describe('AnalyticsReportParametersComponent', () => {
let reportId = 1;
let change = new SimpleChange(null, reportId, true);
component.ngOnChanges({ 'reportId': change });
component.ngOnChanges({'reportId': change});
jasmine.Ajax.requests.mostRecent().respondWith({
status: 200,
@ -409,7 +401,7 @@ describe('AnalyticsReportParametersComponent', () => {
let reportId = 1;
let change = new SimpleChange(null, reportId, true);
component.ngOnChanges({ 'reportId': change });
component.ngOnChanges({'reportId': change});
});
@ -421,7 +413,7 @@ describe('AnalyticsReportParametersComponent', () => {
let reportId = 1;
let change = new SimpleChange(null, reportId, true);
component.ngOnChanges({ 'reportId': change });
component.ngOnChanges({'reportId': change});
jasmine.Ajax.requests.mostRecent().respondWith({
status: 404,
@ -467,7 +459,7 @@ describe('AnalyticsReportParametersComponent', () => {
beforeEach(async(() => {
let reportId = 1;
let change = new SimpleChange(null, reportId, true);
component.ngOnChanges({ 'reportId': change });
component.ngOnChanges({'reportId': change});
fixture.detectChanges();
jasmine.Ajax.requests.mostRecent().respondWith({

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

@ -26,7 +26,8 @@ import {
OnInit,
Output,
SimpleChanges,
ViewChild
ViewChild,
ViewEncapsulation
} from '@angular/core';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import * as moment from 'moment';
@ -45,7 +46,8 @@ 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.css'],
encapsulation: ViewEncapsulation.None
})
export class AnalyticsReportParametersComponent implements OnInit, OnChanges, OnDestroy, AfterViewChecked, AfterContentChecked {

0
ng2-components/ng2-activiti-analytics/src/components/analytics.component.css → ng2-components/ng2-activiti-analytics/src/components/analytics.component.scss
View File

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

@ -15,14 +15,15 @@
* limitations under the License.
*/
import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewChild } from '@angular/core';
import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewChild, ViewEncapsulation } from '@angular/core';
import { ReportQuery } from 'ng2-activiti-diagrams';
import { AnalyticsGeneratorComponent } from './analytics-generator.component';
@Component({
selector: 'adf-analytics, activiti-analytics',
templateUrl: './analytics.component.html',
styleUrls: ['./analytics.component.css']
styleUrls: ['./analytics.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class AnalyticsComponent implements OnChanges {

5
ng2-components/ng2-activiti-analytics/src/components/widgets/checkbox/checkbox.widget.ts
View File

@ -18,13 +18,14 @@
/* tslint:disable:component-selector */
/* tslint:disable:no-access-missing-member */
import { Component, ElementRef, Input } from '@angular/core';
import { Component, ElementRef, Input, ViewEncapsulation } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { WidgetComponent } from './../widget.component';
@Component({
selector: 'checkbox-widget',
templateUrl: './checkbox.widget.html'
templateUrl: './checkbox.widget.html',
encapsulation: ViewEncapsulation.None
})
export class CheckboxWidgetComponent extends WidgetComponent {

3
ng2-components/ng2-activiti-analytics/src/components/widgets/date-range/date-range.widget.css
View File

@ -1,3 +0,0 @@
.date-picker-mdl {
margin-left: 20px;
}

77
ng2-components/ng2-activiti-analytics/src/components/widgets/date-range/date-range.widget.html
View File

@ -1,43 +1,46 @@
<label>{{field.nameKey | translate}}</label><br>
<div [formGroup]="dateRange">
<small *ngIf="dateRange && dateRange.errors && dateRange.errors.greaterThan" [hidden]="!dateRange.errors" class="text-danger">
Start date must be less than End date
<small *ngIf="isStartDateGreaterThanEndDate()" class="adf-text-danger">
{{'DATE-WIDGET.MESSAGES.START-LESS-THAN-END-DATE' | translate}}
</small>
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--4-col">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input"
formControlName="startDate"
type="text"
(onOk)="onOkStart(startElement)"
id="startDateInput" #startElement>
<label class="mdl-textfield__label" for="startDateInput">Start Date</label>
<small [hidden]="dateRange && dateRange.controls.startDate && dateRange.controls.startDate.valid" class="text-danger">
Start is required
</small>
</div>
</div>
<div class="mdl-cell mdl-cell--2-col">
<button id="startDateButton" class="mdl-button mdl-js-button mdl-button--fab date-picker-mdl">
<i class="material-icons">date_range</i>
</button>
</div>
<div class="mdl-cell mdl-cell--4-col">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input"
formControlName="endDate"
type="text"
(onOk)="onOkEnd(endElement)"
id="endDateInput" #endElement>
<label class="mdl-textfield__label" for="endDateInput">End Date</label>
</div>
</div>
<div class="mdl-cell mdl-cell--2-col">
<button id="endDateButton" class="mdl-button mdl-js-button mdl-button--fab date-picker-mdl">
<i class="material-icons">date_range</i>
</button>
</div>
</div>
<small *ngIf="isStartDateEmpty()" class="adf-text-danger">
{{'DATE-WIDGET.MESSAGES.START-DATE-REQUIRED' | translate}}
</small>
<md-grid-list cols="2" rowHeight="80px">
<md-grid-tile>
<md-input-container>
<input mdInput
[min]="minDate"
[max]="maxDate"
formControlName="startDate"
[mdDatepicker]="startDatePicker"
[value]="startDatePicker"
(keydown)="true"
placeholder="{{'DATE-WIDGET.START-DATE' | translate}}"
id="startDate_id"
required>
<button mdSuffix [mdDatepickerToggle]="startDatePicker"></button>
</md-input-container>
<md-datepicker #startDatePicker [touchUi]="true" [startAt]="startAt" (selectedChanged)="onGroupValueChanged($event)"></md-datepicker>
</md-grid-tile>
<md-grid-tile>
<md-input-container class="adf-start-task-input-container">
<input mdInput
[min]="minDate"
[max]="maxDate"
formControlName="endDate"
[mdDatepicker]="endDatePicker"
[value]="endDatePicker"
(keydown)="true"
placeholder="{{'DATE-WIDGET.END-DATE' | translate}}"
id="endDate_id"
required>
<button mdSuffix [mdDatepickerToggle]="endDatePicker"></button>
</md-input-container>
<md-datepicker #endDatePicker [touchUi]="true" [startAt]="startAt" (selectedChanged)="onGroupValueChanged($event)"></md-datepicker>
</md-grid-tile>
</md-grid-list>
</div>
<div *ngIf="debug">
<p>FormGroup : {{dateRange && dateRange.value | json }}</p>

7
ng2-components/ng2-activiti-analytics/src/components/widgets/date-range/date-range.widget.scss Normal file
View File

@ -0,0 +1,7 @@
.adf-text-danger {
color: #D8000C;
.mat-input-container {
width: 80% !important;
}
}

195
ng2-components/ng2-activiti-analytics/src/components/widgets/date-range/date-range.widget.ts
View File

@ -15,37 +15,26 @@
* limitations under the License.
*/
/* tslint:disable:component-selector */
/* tslint:disable::no-access-missing-member */
import { Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
import { AbstractControl, FormControl, FormGroup, Validators } from '@angular/forms';
import { DateAdapter, MD_DATE_FORMATS } from '@angular/material';
import * as moment from 'moment';
import { WidgetComponent } from './../widget.component';
function dateCheck(c: AbstractControl) {
let startDate = moment(c.get('startDate').value);
let endDate = moment(c.get('endDate').value);
let result = startDate.isAfter(endDate);
return result ? {'greaterThan': true} : null;
}
declare let mdDateTimePicker: any;
import { Moment } from 'moment';
import { MOMENT_DATE_FORMATS, MomentDateAdapter } from 'ng2-alfresco-core';
@Component({
selector: 'date-range-widget',
selector: 'adf-date-range-widget',
templateUrl: './date-range.widget.html',
styleUrls: ['./date-range.widget.css']
providers: [
{provide: DateAdapter, useClass: MomentDateAdapter},
{provide: MD_DATE_FORMATS, useValue: MOMENT_DATE_FORMATS}],
styleUrls: ['./date-range.widget.scss'],
encapsulation: ViewEncapsulation.None
})
export class DateRangeWidgetComponent extends WidgetComponent implements OnInit, OnDestroy {
export class DateRangeWidgetComponent implements OnInit {
public static FORMAT_DATE_ACTIVITI: string = 'YYYY-MM-DD';
@ViewChild('startElement')
startElement: any;
@ViewChild('endElement')
endElement: any;
public FORMAT_DATE_ACTIVITI: string = 'YYYY-MM-DD';
public SHOW_FORMAT: string = 'DD/MM/YYYY';
@Input('group')
public dateRange: FormGroup;
@ -56,152 +45,66 @@ export class DateRangeWidgetComponent extends WidgetComponent implements OnInit,
@Output()
dateRangeChanged: EventEmitter<any> = new EventEmitter<any>();
minDate: Moment;
maxDate: Moment;
startDatePicker: Moment;
endDatePicker: Moment;
debug: boolean = false;
dialogStart: any;
dialogEnd: any;
constructor(public elementRef: ElementRef) {
super();
constructor(public dateAdapter: DateAdapter<Moment>) {
}
ngOnInit() {
this.initForm();
this.addAccessibilityLabelToDatePicker();
}
let momentDateAdapter = <MomentDateAdapter> this.dateAdapter;
momentDateAdapter.overrideDisplyaFormat = this.SHOW_FORMAT;
initForm() {
let startDateForm = this.field.value ? this.field.value.startDate : '' ;
let startDate = this.convertToMomentDate(startDateForm);
let endDateForm = this.field.value ? this.field.value.endDate : '' ;
let endDate = this.convertToMomentDate(endDateForm);
if (this.field) {
if (this.field.value && this.field.value.startDate) {
this.startDatePicker = moment(this.field.value.startDate, this.FORMAT_DATE_ACTIVITI);
}
let startDateControl = new FormControl(startDate);
if (this.field.value && this.field.value.endDate) {
this.endDatePicker = moment(this.field.value.endDate, this.FORMAT_DATE_ACTIVITI);
}
}
let startDateControl = new FormControl(this.startDatePicker);
startDateControl.setValidators(Validators.required);
this.dateRange.addControl('startDate', startDateControl);
let endDateControl = new FormControl(endDate);
let endDateControl = new FormControl(this.endDatePicker);
endDateControl.setValidators(Validators.required);
this.dateRange.addControl('endDate', endDateControl);
this.dateRange.setValidators(dateCheck);
this.dateRange.valueChanges.subscribe(data => this.onGroupValueChanged(data));
this.initSartDateDialog(startDate);
this.initEndDateDialog(endDate);
this.dateRange.setValidators(this.dateCheck);
this.dateRange.valueChanges.subscribe(() => this.onGroupValueChanged());
}
initSartDateDialog(date: string) {
let settings: any = {
type: 'date',
past: moment().subtract(100, 'years'),
future: moment().add(100, 'years')
};
settings.init = moment(date, DateRangeWidgetComponent.FORMAT_DATE_ACTIVITI);
this.dialogStart = new mdDateTimePicker.default(settings);
this.dialogStart.trigger = this.startElement.nativeElement;
let startDateButton = document.getElementById('startDateButton');
startDateButton.addEventListener('click', () => {
this.dialogStart.toggle();
});
}
private addAccessibilityLabelToDatePicker() {
let left: any = document.querySelector('#mddtp-date__left');
if (left) {
left.appendChild(this.createCustomElement('date left'));
}
let right: any = document.querySelector('#mddtp-date__right');
if (right) {
right.appendChild(this.createCustomElement('date right'));
}
let cancel: any = document.querySelector('#mddtp-date__cancel');
if (cancel) {
cancel.appendChild(this.createCustomElement('date cancel'));
}
let ok: any = document.querySelector('#mddtp-date__ok');
if (ok) {
ok.appendChild(this.createCustomElement('date ok'));
}
}
private createCustomElement(text: string): HTMLElement {
let span = document.createElement('span');
span.style.visibility = 'hidden';
let rightSpanText = document.createTextNode(text);
span.appendChild(rightSpanText);
return span;
}
initEndDateDialog(date: string) {
let settings: any = {
type: 'date',
past: moment().subtract(100, 'years'),
future: moment().add(100, 'years')
};
settings.init = moment(date, DateRangeWidgetComponent.FORMAT_DATE_ACTIVITI);
this.dialogEnd = new mdDateTimePicker.default(settings);
this.dialogEnd.trigger = this.endElement.nativeElement;
let endDateButton = document.getElementById('endDateButton');
endDateButton.addEventListener('click', () => {
this.dialogEnd.toggle();
});
}
onOkStart(inputEl: HTMLInputElement) {
let date = this.dialogStart.time.format(DateRangeWidgetComponent.FORMAT_DATE_ACTIVITI);
this.dateRange.patchValue({
startDate: date
});
let materialElemen: any = inputEl.parentElement;
if (materialElemen) {
materialElemen.MaterialTextfield.change(date);
}
}
onOkEnd(inputEl: HTMLInputElement) {
let date = this.dialogEnd.time.format(DateRangeWidgetComponent.FORMAT_DATE_ACTIVITI);
this.dateRange.patchValue({
endDate: date
});
let materialElemen: any = inputEl.parentElement;
if (materialElemen) {
materialElemen.MaterialTextfield.change(date);
}
}
onGroupValueChanged(data: any) {
onGroupValueChanged() {
if (this.dateRange.valid) {
let dateStart = this.convertToMomentDateWithTime(this.dateRange.controls['startDate'].value);
let endStart = this.convertToMomentDateWithTime(this.dateRange.controls['endDate'].value);
let dateStart = this.convertToMomentDateWithTime(this.dateRange.controls.startDate.value);
let endStart = this.convertToMomentDateWithTime(this.dateRange.controls.endDate.value);
this.dateRangeChanged.emit({startDate: dateStart, endDate: endStart});
}
}
public convertToMomentDateWithTime(date: string) {
return moment(date, DateRangeWidgetComponent.FORMAT_DATE_ACTIVITI, true).format(DateRangeWidgetComponent.FORMAT_DATE_ACTIVITI) + 'T00:00:00.000Z';
convertToMomentDateWithTime(date: string) {
return moment(date, this.FORMAT_DATE_ACTIVITI, true).format(this.FORMAT_DATE_ACTIVITI) + 'T00:00:00.000Z';
}
private convertToMomentDate(date: string) {
if (date) {
return moment(date).format(DateRangeWidgetComponent.FORMAT_DATE_ACTIVITI);
} else {
return moment().format(DateRangeWidgetComponent.FORMAT_DATE_ACTIVITI);
}
dateCheck(formControl: AbstractControl) {
let startDate = moment(formControl.get('startDate').value);
let endDate = moment(formControl.get('endDate').value);
let result = startDate.isAfter(endDate);
return result ? {'greaterThan': true} : null;
}
ngOnDestroy() {
isStartDateGreaterThanEndDate() {
return this.dateRange && this.dateRange.errors && this.dateRange.errors.greaterThan;
}
isStartDateEmpty() {
return this.dateRange && this.dateRange.controls.startDate && !this.dateRange.controls.startDate.valid;
}
}

23
ng2-components/ng2-activiti-analytics/src/components/widgets/dropdown/dropdown.widget.css
View File

@ -1,23 +0,0 @@
.dropdown-widget {
width: 100%;
}
.dropdown-widget__select {
width: 100%;
}
.dropdown-widget__invalid .dropdown-widget__select {
border-color: #d50000;
}
.dropdown-widget__invalid .dropdown-widget__label {
color: #d50000;
}
.dropdown-widget__invalid .dropdown-widget__label:after {
background-color: #d50000;
}
.dropdown-widget__invalid .mdl-textfield__error {
visibility: visible !important;
}

11
ng2-components/ng2-activiti-analytics/src/components/widgets/dropdown/dropdown.widget.html
View File

@ -1,7 +1,10 @@
<div class="dropdown-widget" [formGroup]="formGroup">
<label class="dropdown-widget__label" [attr.for]="field.id">{{field.nameKey | translate}}</label>
<select [formControlName]="controllerName" [attr.id]="'select-' + field.id" class="dropdown-widget__select"
[(ngModel)]="field.value" (ngModelChange)="changeValue($event)">
<div class="adf-dropdown-widget" [formGroup]="formGroup">
<label class="adf-dropdown-widget__label" [attr.for]="field.id">{{field.nameKey | translate}}</label>
<select [formControlName]="controllerName"
[attr.id]="'select-' + field.id"
class="adf-dropdown-widget__select"
[(ngModel)]="field.value"
(ngModelChange)="changeValue($event)">
<option *ngIf="showDefaultOption" value="null">{{defaultOptionText}}</option>
<option *ngFor="let opt of field.options" [value]="opt.id">{{opt.label}}</option>
</select>

23
ng2-components/ng2-activiti-analytics/src/components/widgets/dropdown/dropdown.widget.scss Normal file
View File

@ -0,0 +1,23 @@
.adf-dropdown-widget {
width: 100%;
}
.adf-dropdown-widget__select {
width: 100%;
}
.adf-dropdown-widget__invalid .adf-dropdown-widget__select {
border-color: #d50000;
}
.adf-dropdown-widget__invalid .adf-dropdown-widget__label {
color: #d50000;
}
.adf-dropdown-widget__invalid .adf-dropdown-widget__label:after {
background-color: #d50000;
}
.adf-dropdown-widget__invalid .mdl-textfield__error {
visibility: visible !important;
}

5
ng2-components/ng2-activiti-analytics/src/components/widgets/dropdown/dropdown.widget.ts
View File

@ -18,14 +18,15 @@
/* tslint:disable:component-selector */
/* tslint:disable::no-access-missing-member */
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { WidgetComponent } from './../widget.component';
@Component({
selector: 'dropdown-widget',
templateUrl: './dropdown.widget.html',
styleUrls: ['./dropdown.widget.css']
styleUrls: ['./dropdown.widget.scss'],
encapsulation: ViewEncapsulation.None
})
export class DropdownWidgetComponent extends WidgetComponent implements OnInit {

23
ng2-components/ng2-activiti-analytics/src/components/widgets/duration/duration.widget.css
View File

@ -1,23 +0,0 @@
.number-widget {
width: 100%;
}
.number-widget__invalid .mdl-textfield__input {
border-color: #d50000;
}
.number-widget__invalid .mdl-textfield__label {
color: #d50000;
}
.number-widget__invalid .mdl-textfield__label:after {
background-color: #d50000;
}
.number-widget__invalid .mdl-textfield__error {
visibility: visible !important;
}
.dropdown-container {
margin-top: 30px;
}

2
ng2-components/ng2-activiti-analytics/src/components/widgets/duration/duration.widget.html
View File

@ -1,6 +1,6 @@
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--6-col">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label number-widget">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label adf-number-widget">
<input class="mdl-textfield__input"
type="text"
pattern="-?[0-9]*(\.[0-9]+)?"

22
ng2-components/ng2-activiti-analytics/src/components/widgets/duration/duration.widget.scss Normal file
View File

@ -0,0 +1,22 @@
.adf-number-widget {
width: 100%;
}
.adf-number-widget__invalid {
.mdl-textfield__input {
border-color: #d50000;
}
.mdl-textfield__label {
color: #d50000;
&:after {
background-color: #d50000;
}
}
.mdl-textfield__error {
visibility: visible !important;
}
}
.dropdown-container {
margin-top: 30px;
}

5
ng2-components/ng2-activiti-analytics/src/components/widgets/duration/duration.widget.ts
View File

@ -18,7 +18,7 @@
/* tslint:disable:component-selector */
/* tslint:disable::no-access-missing-member */
import { Component, ElementRef, Input, OnInit } from '@angular/core';
import { Component, ElementRef, Input, OnInit, ViewEncapsulation } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { ParameterValueModel, ReportParameterDetailsModel } from 'ng2-activiti-diagrams';
import { NumberWidgetComponent } from './../number/number.widget';
@ -26,7 +26,8 @@ import { NumberWidgetComponent } from './../number/number.widget';
@Component({
selector: 'duration-widget',
templateUrl: './duration.widget.html',
styleUrls: ['./duration.widget.css']
styleUrls: ['./duration.widget.scss'],
encapsulation: ViewEncapsulation.None
})
export class DurationWidgetComponent extends NumberWidgetComponent implements OnInit {

19
ng2-components/ng2-activiti-analytics/src/components/widgets/number/number.widget.css
View File

@ -1,19 +0,0 @@
.number-widget {
width: 100%;
}
.number-widget__invalid .mdl-textfield__input {
border-color: #d50000;
}
.number-widget__invalid .mdl-textfield__label {
color: #d50000;
}
.number-widget__invalid .mdl-textfield__label:after {
background-color: #d50000;
}
.number-widget__invalid .mdl-textfield__error {
visibility: visible !important;
}

2
ng2-components/ng2-activiti-analytics/src/components/widgets/number/number.widget.html
View File

@ -1,4 +1,4 @@
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label number-widget" [formGroup]="formGroup">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label adf-number-widget" [formGroup]="formGroup">
<input formControlName="{{controllerName}}" class="mdl-textfield__input"
type="text"
pattern="-?[0-9]*(\.[0-9]+)?"

18
ng2-components/ng2-activiti-analytics/src/components/widgets/number/number.widget.scss Normal file
View File

@ -0,0 +1,18 @@
.adf-number-widget {
width: 100%;
}
.adf-number-widget__invalid {
.mdl-textfield__input {
border-color: #d50000;
}
.mdl-textfield__label {
color: #d50000;
&:after {
background-color: #d50000;
}
}
.mdl-textfield__error {
visibility: visible !important;
}
}

5
ng2-components/ng2-activiti-analytics/src/components/widgets/number/number.widget.ts
View File

@ -18,14 +18,15 @@
/* tslint:disable:component-selector */
/* tslint:disable::no-access-missing-member */
import { Component, ElementRef, Input, OnInit } from '@angular/core';
import { Component, ElementRef, Input, OnInit, ViewEncapsulation } from '@angular/core';
import { FormGroup, Validators } from '@angular/forms';
import { WidgetComponent } from './../widget.component';
@Component({
selector: 'number-widget',
templateUrl: './number.widget.html',
styleUrls: ['./number.widget.css']
styleUrls: ['./number.widget.scss'],
encapsulation: ViewEncapsulation.None
})
export class NumberWidgetComponent extends WidgetComponent implements OnInit {

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

@ -50,5 +50,13 @@
"DIALOG":{
"SAVE_MESSAGE" : "The current parameter settings will be stored, and a new report will be shown in the reports list. When that particular report is clicked, the report will be generated using these saved parameter values.",
"EXPORT_MESSAGE":""
},
"DATE-WIDGET":{
"START-DATE" : "Start date",
"END-DATE": "End date",
"MESSAGES":{
"START-DATE-REQUIRED": "Start date is required",
"START-LESS-THAN-END-DATE":"Start date must be less than End date"
}
}
}

39
ng2-components/ng2-activiti-analytics/src/material.module.ts Normal file
View File

@ -0,0 +1,39 @@
/*!
* @license
* Copyright 2016 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { NgModule } from '@angular/core';
import { MdButtonModule, MdDatepickerModule, MdGridListModule,
MdIconModule, MdInputModule, MdNativeDateModule, MdTooltipModule } from '@angular/material';
export function modules() {
return [
MdButtonModule,
MdInputModule,
MdIconModule,
MdTooltipModule,
MdNativeDateModule,
MdDatepickerModule,
MdGridListModule
];
}
@NgModule({
imports: modules(),
exports: modules()
})
export class MaterialModule {
}

2
ng2-components/ng2-activiti-diagrams/package.json
View File

@ -40,7 +40,7 @@
"@angular/platform-browser-dynamic": "4.2.5",
"@angular/router": "4.2.5",
"@ngx-translate/core": "7.0.0",
"alfresco-js-api": "1.7.0",
"alfresco-js-api": "^1.8.0-beta1",
"core-js": "2.4.1",
"hammerjs": "2.0.8",
"ng2-alfresco-core": "1.7.0",

2
ng2-components/ng2-activiti-processlist/karma.conf.js
View File

@ -13,10 +13,8 @@ module.exports = function (config) {
//diagrams
'./node_modules/alfresco-js-api/dist/alfresco-js-api.js',
'./node_modules/moment/min/moment.min.js',
'./node_modules/md-date-time-picker/dist/js/mdDateTimePicker.js',
{pattern: './node_modules/ng2-translate/**/*.js', included: false, watched: false},
{pattern: './node_modules/md-date-time-picker/**/*.js', included: false, served: true, watched: false},
{pattern: './node_modules/moment/**/*.js', included: false, served: true, watched: false},
{pattern: 'karma-test-shim.js', watched: false},

1
ng2-components/ng2-activiti-processlist/package.json
View File

@ -49,7 +49,6 @@
"alfresco-js-api": "1.7.0",
"core-js": "2.4.1",
"hammerjs": "2.0.8",
"md-date-time-picker": "2.2.0",
"moment": "2.15.1",
"ng2-activiti-form": "1.7.0",
"ng2-activiti-tasklist": "1.7.0",

2
ng2-components/ng2-activiti-tasklist/karma.conf.js
View File

@ -15,11 +15,9 @@ module.exports = function (config) {
'./node_modules/alfresco-js-api/dist/alfresco-js-api.js',
'./node_modules/raphael/raphael.js',
'./node_modules/moment/min/moment.min.js',
'./node_modules/md-date-time-picker/dist/js/mdDateTimePicker.js',
{pattern: './node_modules/ng2-translate/**/*.js', included: false, watched: false},
{pattern: './node_modules/ng2-charts/**/*.js', included: false, served: true, watched: false},
{pattern: './node_modules/md-date-time-picker/**/*.js', included: false, served: true, watched: false},
{pattern: './node_modules/moment/**/*.js', included: false, served: true, watched: false},
{pattern: 'karma-test-shim.js', watched: false},

1
ng2-components/ng2-activiti-tasklist/package.json
View File

@ -53,7 +53,6 @@
"alfresco-js-api": "1.7.0",
"core-js": "2.4.1",
"hammerjs": "2.0.8",
"md-date-time-picker": "2.2.0",
"moment": "2.15.1",
"ng2-activiti-form": "1.7.0",
"ng2-alfresco-core": "1.7.0",

2
ng2-components/ng2-alfresco-core/src/directives/node-permission.directive.ts
View File

@ -25,7 +25,7 @@ import { AlfrescoContentService } from './../services/alfresco-content.service';
export class NodePermissionDirective implements OnChanges, AfterViewInit {
@Input('adf-node-permission')
permission: string = null;
permission: string = null;
@Input('adf-nodes')
nodes: MinimalNodeEntity[] = [];

2
ng2-components/ng2-alfresco-core/src/directives/node-permission.md
View File

@ -34,5 +34,5 @@ The button will become disabled by default, and is going to change its state onc
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| adf-node-permission | string | null | Node permission to check |
| adf-node-permission | [Permissions](https://github.com/Alfresco/alfresco-ng2-components/blob/master/ng2-components/ng2-alfresco-core/src/models/permissions.enum.ts) | null | Node permission to check (create, delete, update, updatePermissions, !create, !delete, !update, !updatePermissions)|
| adf-nodes | MinimalNodeEntity[] | [] | Nodes to check permission for |

2
ng2-components/ng2-alfresco-webscript/karma.conf.js
View File

@ -15,11 +15,9 @@ module.exports = function (config) {
'./node_modules/alfresco-js-api/dist/alfresco-js-api.js',
'./node_modules/raphael/raphael.js',
'./node_modules/moment/min/moment.min.js',
'./node_modules/md-date-time-picker/dist/js/mdDateTimePicker.js',
{pattern: './node_modules/ng2-translate/**/*.js', included: false, watched: false},
{pattern: './node_modules/ng2-charts/**/*.js', included: false, served: true, watched: false},
{pattern: './node_modules/md-date-time-picker/**/*.js', included: false, served: true, watched: false},
{pattern: './node_modules/moment/**/*.js', included: false, served: true, watched: false},
{pattern: 'karma-test-shim.js', watched: false},

1
ng2-components/package.json
View File

@ -85,7 +85,6 @@
"ng2-alfresco-core": "1.7.0",
"raphael": "2.2.7",
"chart.js": "2.5.0",
"md-date-time-picker": "2.2.0",
"moment": "2.15.1",
"ng2-activiti-diagrams": "1.7.0",
"ng2-charts": "1.6.0",