[NAE-1544] Timezone for Date a DateTime field

projects/netgrif-components-core/src/lib/authentication/authentication.module.ts

@@ -6,8 +6,9 @@ import {authenticationServiceFactory} from './authentication.factory';
 import {ConfigurationService} from '../configuration/configuration.service';
 import {AuthenticationMethodService} from './services/authentication-method.service';
 import {OverlayModule} from '@angular/cdk/overlay';
-import {MatProgressSpinnerModule, MatSpinner} from '@angular/material/progress-spinner';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import {AnonymousAuthenticationInterceptor} from './services/anonymous-authentication-interceptor';
+import { TimezoneInterceptor } from './services/timezone-interceptor';
 
 
 @NgModule({
@@ -24,6 +25,7 @@ import {AnonymousAuthenticationInterceptor} from './services/anonymous-authentic
     providers: [
         { provide: HTTP_INTERCEPTORS, useClass: AuthenticationInterceptor, multi: true },
         { provide: HTTP_INTERCEPTORS, useClass: AnonymousAuthenticationInterceptor, multi: true },
+        { provide: HTTP_INTERCEPTORS, useClass: TimezoneInterceptor, multi: true },
         { provide: AuthenticationMethodService, useFactory: authenticationServiceFactory, deps: [ConfigurationService, HttpClient] },
         // AuthenticationEffects
     ]

projects/netgrif-components-core/src/lib/authentication/services/timezone-interceptor.spec.ts

@@ -0,0 +1,52 @@
+import {inject, TestBed} from '@angular/core/testing';
+import {ConfigurationService} from '../../configuration/configuration.service';
+import {TestConfigurationService} from '../../utility/tests/test-config';
+import {HTTP_INTERCEPTORS, HttpClient, HttpHeaders} from '@angular/common/http';
+import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';
+import {RouterTestingModule} from '@angular/router/testing';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {LoggerService} from '../../logger/services/logger.service';
+import { TimezoneInterceptor } from './timezone-interceptor';
+
+describe('TimezoneInterceptor', () => {
+    let warnSpy: jasmine.Spy;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [HttpClientTestingModule, NoopAnimationsModule, RouterTestingModule.withRoutes([])],
+            providers: [
+                {provide: ConfigurationService, useClass: TestConfigurationService},
+                {
+                    provide: HTTP_INTERCEPTORS,
+                    useClass: TimezoneInterceptor,
+                    multi: true
+                }
+            ]
+        });
+        warnSpy = spyOn(TestBed.inject(LoggerService), 'warn');
+    });
+
+    describe('intercept HTTP request', () => {
+        it('should add timezone to Headers', (done) => {
+            inject([HttpClient, HttpTestingController],
+                (http: HttpClient, mock: HttpTestingController) => {
+
+                    http.get('/api').subscribe(response => {
+                        expect(response).toBeTruthy();
+                        done();
+                    });
+                    const request = mock.expectOne(req => (req.headers.has('X-Timezone-Offset')));
+                    request.flush({data: 'test'}, {headers: new HttpHeaders({'X-Timezone-Offset': '-120'})});
+                    mock.verify();
+                })();
+        });
+        afterEach(inject([HttpTestingController], (mock: HttpTestingController) => {
+            mock.verify();
+            TestBed.resetTestingModule();
+        }));
+    });
+
+    afterEach(() => {
+        TestBed.resetTestingModule();
+    });
+});

projects/netgrif-components-core/src/lib/authentication/services/timezone-interceptor.ts

@@ -0,0 +1,21 @@
+import { Injectable } from '@angular/core';
+import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+@Injectable()
+export class TimezoneInterceptor implements HttpInterceptor {
+
+    private readonly TIMEZONE_OFFSET_HEADER_NAME = 'X-Timezone-Offset'
+
+    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+        req = req.clone({
+            headers: req.headers.set(this.TIMEZONE_OFFSET_HEADER_NAME, this.getTimeZoneOffset())
+        });
+        return next.handle(req)
+    }
+
+    private getTimeZoneOffset(): string {
+        return (new Date()).getTimezoneOffset().toString();
+    }
+
+}

projects/netgrif-components-core/src/lib/data-fields/date-time-field/simple-date-time-field/abstract-simple-date-time-field.component.spec.ts

@@ -0,0 +1,97 @@
+import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
+import {AngularResizeEventModule} from 'angular-resize-event';
+import {NgxMatDatetimePickerModule} from '@angular-material-components/datetime-picker';
+import {HttpClientTestingModule} from '@angular/common/http/testing';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {Component, CUSTOM_ELEMENTS_SCHEMA, Inject, Optional} from '@angular/core';
+import moment from 'moment';
+import {BehaviorSubject} from 'rxjs';
+import {DateTimeField} from '../models/date-time-field';
+import {ChangedFields} from '../../models/changed-fields';
+import {TranslateService} from '@ngx-translate/core';
+import {MaterialModule} from '../../../material/material.module';
+import {TranslateLibModule} from '../../../translate/translate-lib.module';
+import {MockAuthenticationMethodService} from '../../../utility/tests/mocks/mock-authentication-method-service';
+import {AuthenticationMethodService} from '../../../authentication/services/authentication-method.service';
+import {AuthenticationService} from '../../../authentication/services/authentication/authentication.service';
+import {MockAuthenticationService} from '../../../utility/tests/mocks/mock-authentication.service';
+import {UserResourceService} from '../../../resources/engine-endpoint/user-resource.service';
+import {MockUserResourceService} from '../../../utility/tests/mocks/mock-user-resource.service';
+import {TestConfigurationService} from '../../../utility/tests/test-config';
+import {ConfigurationService} from '../../../configuration/configuration.service';
+import {NAE_INFORM_ABOUT_INVALID_DATA} from '../../models/invalid-data-policy-token';
+import { AbstractSimpleDateTimeFieldComponent } from './abstract-simple-date-time-field.component';
+
+describe('AbstractSimpleDateTimeFieldComponent', () => {
+    let component: TestDateTimeFieldComponent;
+    let fixture: ComponentFixture<TestWrapperComponent>;
+
+    beforeEach(waitForAsync(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                MaterialModule,
+                AngularResizeEventModule,
+                NgxMatDatetimePickerModule,
+                TranslateLibModule,
+                HttpClientTestingModule,
+                NoopAnimationsModule
+            ],
+            providers: [
+                {provide: AuthenticationMethodService, useClass: MockAuthenticationMethodService},
+                {provide: AuthenticationService, useClass: MockAuthenticationService},
+                {provide: UserResourceService, useClass: MockUserResourceService},
+                {provide: ConfigurationService, useClass: TestConfigurationService}
+            ],
+            declarations: [
+                TestDateTimeFieldComponent,
+                TestWrapperComponent
+            ],
+            schemas: [CUSTOM_ELEMENTS_SCHEMA]
+        }).compileComponents();
+        fixture = TestBed.createComponent(TestWrapperComponent);
+        component = fixture.debugElement.children[0].componentInstance;
+        fixture.detectChanges();
+    }));
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('should get error message', () => {
+        expect(component.getErrorMessage()).toEqual('This is custom message!');
+    });
+
+    afterEach(() => {
+        TestBed.resetTestingModule();
+    });
+});
+
+@Component({
+    selector: 'ncc-simple-test-date-time',
+    template: ''
+})
+class TestDateTimeFieldComponent extends AbstractSimpleDateTimeFieldComponent {
+    constructor(translate: TranslateService,
+                @Optional() @Inject(NAE_INFORM_ABOUT_INVALID_DATA) informAboutInvalidData: boolean | null) {
+        super(translate, informAboutInvalidData);
+    }
+}
+
+@Component({
+    selector: 'ncc-test-wrapper',
+    template: '<ncc-simple-test-date-time [dataField]="field" [changedFields]="changedFields"></ncc-simple-test-date-time>'
+})
+class TestWrapperComponent {
+    field = new DateTimeField('', '', moment('2020-03-09'), {
+        required: true,
+        optional: true,
+        visible: true,
+        editable: true,
+        hidden: true
+    }, undefined, undefined, undefined, [
+        {validationRule: 'between today,future', validationMessage: 'This is custom message!'},
+        {validationRule: 'between past,today', validationMessage: 'This is custom message!'},
+        {validationRule: 'between 2020-03-03,today', validationMessage: 'This is custom message!'},
+    ]);
+    changedFields = new BehaviorSubject<ChangedFields>({behavior: {editable: true}, taskId: 'testTaskId'});
+}

projects/netgrif-components-core/src/lib/data-fields/date-time-field/simple-date-time-field/abstract-simple-date-time-field.component.ts

@@ -0,0 +1,25 @@
+import {Component, Inject, Input, Optional} from '@angular/core';
+import {DateTimeField} from '../models/date-time-field';
+import {AbstractTimeInstanceFieldComponent} from '../../time-instance-abstract-field/abstract-time-instance-field.component';
+import {TranslateService} from '@ngx-translate/core';
+import {NAE_INFORM_ABOUT_INVALID_DATA} from '../../models/invalid-data-policy-token';
+import { WrappedBoolean } from '../../data-field-template/models/wrapped-boolean';
+
+@Component({
+    selector: 'ncc-abstract-date-time-field',
+    template: ''
+})
+export abstract class AbstractSimpleDateTimeFieldComponent extends AbstractTimeInstanceFieldComponent {
+
+    @Input() public dataField: DateTimeField;
+    @Input() public showLargeLayout: WrappedBoolean;
+
+    protected constructor(protected _translate: TranslateService,
+                          @Optional() @Inject(NAE_INFORM_ABOUT_INVALID_DATA) informAboutInvalidData: boolean | null) {
+        super(_translate, informAboutInvalidData);
+    }
+
+    getErrorMessage() {
+        return this.buildErrorMessage(this.dataField);
+    }
+}

projects/netgrif-components-core/src/lib/data-fields/date-time-field/zoned-date-time-field/abstract-zoned-date-time-field.component.spec.ts

@@ -0,0 +1,97 @@
+import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
+import {AngularResizeEventModule} from 'angular-resize-event';
+import {NgxMatDatetimePickerModule} from '@angular-material-components/datetime-picker';
+import {HttpClientTestingModule} from '@angular/common/http/testing';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {Component, CUSTOM_ELEMENTS_SCHEMA, Inject, Optional} from '@angular/core';
+import moment from 'moment';
+import {BehaviorSubject} from 'rxjs';
+import {DateTimeField} from '../models/date-time-field';
+import {ChangedFields} from '../../models/changed-fields';
+import {TranslateService} from '@ngx-translate/core';
+import {MaterialModule} from '../../../material/material.module';
+import {TranslateLibModule} from '../../../translate/translate-lib.module';
+import {MockAuthenticationMethodService} from '../../../utility/tests/mocks/mock-authentication-method-service';
+import {AuthenticationMethodService} from '../../../authentication/services/authentication-method.service';
+import {AuthenticationService} from '../../../authentication/services/authentication/authentication.service';
+import {MockAuthenticationService} from '../../../utility/tests/mocks/mock-authentication.service';
+import {UserResourceService} from '../../../resources/engine-endpoint/user-resource.service';
+import {MockUserResourceService} from '../../../utility/tests/mocks/mock-user-resource.service';
+import {TestConfigurationService} from '../../../utility/tests/test-config';
+import {ConfigurationService} from '../../../configuration/configuration.service';
+import {NAE_INFORM_ABOUT_INVALID_DATA} from '../../models/invalid-data-policy-token';
+import { AbstractZonedDateTimeFieldComponent } from './abstract-zoned-date-time-field.component';
+
+describe('AbstractZonedDateTimeFieldComponent', () => {
+    let component: TestDateTimeFieldComponent;
+    let fixture: ComponentFixture<TestWrapperComponent>;
+
+    beforeEach(waitForAsync(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                MaterialModule,
+                AngularResizeEventModule,
+                NgxMatDatetimePickerModule,
+                TranslateLibModule,
+                HttpClientTestingModule,
+                NoopAnimationsModule
+            ],
+            providers: [
+                {provide: AuthenticationMethodService, useClass: MockAuthenticationMethodService},
+                {provide: AuthenticationService, useClass: MockAuthenticationService},
+                {provide: UserResourceService, useClass: MockUserResourceService},
+                {provide: ConfigurationService, useClass: TestConfigurationService}
+            ],
+            declarations: [
+                TestDateTimeFieldComponent,
+                TestWrapperComponent
+            ],
+            schemas: [CUSTOM_ELEMENTS_SCHEMA]
+        }).compileComponents();
+        fixture = TestBed.createComponent(TestWrapperComponent);
+        component = fixture.debugElement.children[0].componentInstance;
+        fixture.detectChanges();
+    }));
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('should get error message', () => {
+        expect(component.getErrorMessage()).toEqual('This is custom message!');
+    });
+
+    afterEach(() => {
+        TestBed.resetTestingModule();
+    });
+});
+
+@Component({
+    selector: 'ncc-zoned-test-date-time',
+    template: ''
+})
+class TestDateTimeFieldComponent extends AbstractZonedDateTimeFieldComponent {
+    constructor(translate: TranslateService,
+                @Optional() @Inject(NAE_INFORM_ABOUT_INVALID_DATA) informAboutInvalidData: boolean | null) {
+        super(translate, informAboutInvalidData);
+    }
+}
+
+@Component({
+    selector: 'ncc-test-wrapper',
+    template: '<ncc-zoned-test-date-time [dataField]="field" [changedFields]="changedFields"></ncc-zoned-test-date-time>'
+})
+class TestWrapperComponent {
+    field = new DateTimeField('', '', moment('2020-03-09'), {
+        required: true,
+        optional: true,
+        visible: true,
+        editable: true,
+        hidden: true
+    }, undefined, undefined, undefined, [
+        {validationRule: 'between today,future', validationMessage: 'This is custom message!'},
+        {validationRule: 'between past,today', validationMessage: 'This is custom message!'},
+        {validationRule: 'between 2020-03-03,today', validationMessage: 'This is custom message!'},
+    ]);
+    changedFields = new BehaviorSubject<ChangedFields>({behavior: {editable: true}, taskId: 'testTaskId'});
+}

projects/netgrif-components-core/src/lib/data-fields/date-time-field/zoned-date-time-field/abstract-zoned-date-time-field.component.ts

@@ -0,0 +1,21 @@
+import {Component, Inject, Optional} from '@angular/core';
+import {TranslateService} from '@ngx-translate/core';
+import {NAE_INFORM_ABOUT_INVALID_DATA} from '../../models/invalid-data-policy-token';
+import {
+    AbstractSimpleDateTimeFieldComponent
+} from '../simple-date-time-field/abstract-simple-date-time-field.component';
+
+@Component({
+    selector: 'ncc-abstract-date-time-field',
+    template: ''
+})
+export abstract class AbstractZonedDateTimeFieldComponent extends AbstractSimpleDateTimeFieldComponent {
+
+    public timeZone: string;
+
+    protected constructor(protected _translate: TranslateService,
+                          @Optional() @Inject(NAE_INFORM_ABOUT_INVALID_DATA) informAboutInvalidData: boolean | null) {
+        super(_translate, informAboutInvalidData);
+        this.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    }
+}

projects/netgrif-components-core/src/lib/data-fields/public-api.ts

@@ -39,6 +39,8 @@ export * from './i18n-field/i18n-text-field/abstract-i18n-text-field.component';
 export * from './i18n-field/i18n-divider-field/abstract-i18n-divider-field.component';
 export * from './i18n-field/abstract-i18n-errors.component';
 export * from './user-list-field/abstract-user-list-field.component';
+export * from './date-time-field/simple-date-time-field/abstract-simple-date-time-field.component';
+export * from './date-time-field/zoned-date-time-field/abstract-zoned-date-time-field.component';
 
 /* Class */
 export * from './models/abstract-data-field';

projects/netgrif-components/src/lib/data-fields/data-fields.module.ts

@@ -65,6 +65,8 @@ import {
     MultichoiceAutocompleteFieldComponent
 } from './multichoice-field/multichoice-autocomplete-field/multichoice-autocomplete-field.component';
 import { UserListFieldComponent } from './user-list-field/user-list-field.component';
+import { SimpleDateTimeFieldComponent } from './date-time-field/simple-date-time-field/simple-date-time-field.component';
+import { ZonedDateTimeFieldComponent } from './date-time-field/zoned-date-time-field/zoned-date-time-field.component';
 
 @NgModule({
     declarations: [
@@ -106,6 +108,8 @@ import { UserListFieldComponent } from './user-list-field/user-list-field.compon
         I18nTextFieldComponent,
         EasymdeWrapperComponent,
         UserListFieldComponent,
+        SimpleDateTimeFieldComponent,
+        ZonedDateTimeFieldComponent
     ],
 	exports: [
 		BooleanFieldComponent,

projects/netgrif-components/src/lib/data-fields/date-time-field/date-time-field.component.html

@@ -4,27 +4,11 @@
                         [offset]="taskOffset">
 </nc-data-field-template>
 
-<ng-template #fieldTemplate let-showLargeLayout="showLargeLayout">
-    <mat-form-field [appearance]="dataField.materialAppearance" class="full-width" color="primary">
-        <mat-label *ngIf="!showLargeLayout.value">{{dataField.title}}</mat-label>
-        <input matInput
-               [ngxMatDatetimePicker]="picker"
-               [required]="dataField.behavior.required"
-               [placeholder]="dataField.placeholder"
-               [formControl]="formControl"
-               [min]="dataField.min"
-               [max]="dataField.max"
-               (click)="picker.open()">
-        <mat-datepicker-toggle matPrefix [for]="picker"></mat-datepicker-toggle>
-        <ngx-mat-datetime-picker #picker
-                                 [showSpinners]="true"
-                                 [showSeconds]="false"
-                                 [stepHour]="1"
-                                 [stepMinute]="5"
-                                 [color]="'primary'"
-                                 [enableMeridian]="false">
-        </ngx-mat-datetime-picker>
-        <mat-hint>{{dataField.description}}</mat-hint>
-        <mat-error *ngIf="dataField.isInvalid(formControl)">{{getErrorMessage()}}</mat-error>
-    </mat-form-field>
+<ng-template #fieldTemplate let-showLargeLayout="showLargeLayout" [ngSwitch]='dataField.getComponentType()'>
+    <nc-zoned-date-time-field *ngSwitchCase='"timeZone"'
+                               [dataField]='dataField'
+                               [showLargeLayout]='showLargeLayout'></nc-zoned-date-time-field>
+    <nc-simple-date-time-field *ngSwitchDefault
+                               [dataField]='dataField'
+                               [showLargeLayout]='showLargeLayout'></nc-simple-date-time-field>
 </ng-template>