Made sure that the plugin work without "@danielmoncada/angular-datetime-picker": "16.0.1"

eform-client/e2e/Page objects/Workflow/WorkflowCases.page.ts

@@ -1,5 +1,5 @@
 import Page from '../Page';
-import { parse, format } from 'date-fns';
+import {selectDateOnDatePicker} from '../../Helpers/helper-functions';
 
 export class WorkflowCasesPage extends Page {
   constructor() {
@@ -262,8 +262,6 @@ export class WorkflowCaseRowObject {
 
   public async openEdit(updateModel: WorkflowCaseForEdit) {
     await this.updateBtn.click();
-    const spinnerAnimation = await $('#spinner-animation');
-    await spinnerAnimation.waitForDisplayed({ timeout: 90000, reverse: true });
     await (await workflowCasesPage.cancelEditBtn()).waitForDisplayed({
       timeout: 20000,
     });
@@ -298,14 +296,12 @@ export class WorkflowCaseRowObject {
       //     .click();
       // }
       if (updateModel.deadline) {
-        await (await workflowCasesPage.deadlineFormInput()).setValue(
-          format(updateModel.deadline, 'MM.dd.yyyy')
-        );
+        await (await workflowCasesPage.deadlineFormInput()).click();
+        await selectDateOnDatePicker(updateModel.deadline.year, updateModel.deadline.month, updateModel.deadline.day);
       }
       if (updateModel.dateOfIncident) {
-        await (await workflowCasesPage.dateOfIncidentFormInput()).setValue(
-          format(updateModel.dateOfIncident, 'MM.dd.yyyy')
-        );
+        await (await workflowCasesPage.dateOfIncidentFormInput()).click();
+        await selectDateOnDatePicker(updateModel.dateOfIncident.year, updateModel.dateOfIncident.month, updateModel.dateOfIncident.day);
       }
       if (updateModel.description) {
         await (await workflowCasesPage.descriptionEdit()).setValue(updateModel.description);
@@ -328,10 +324,18 @@ export class WorkflowCaseRowObject {
 }
 
 export class WorkflowCaseForEdit {
-  public dateOfIncident: Date;
+  public dateOfIncident: {
+    year: number;
+    month: number;
+    day: number;
+  };
   // public incidentPlace: string;
   public description: string;
-  public deadline: Date;
+  public deadline: {
+    year: number;
+    month: number;
+    day: number;
+  };
   public actionPlan: string;
   // public toBeSolvedBy: string;
   public status: string;

eform-client/e2e/Tests/workflow-general/workflow.edit.ts

@@ -15,11 +15,12 @@ describe('Workflow cases - Edit', function () {
   it('should not edit workflow case', async () => {
     const firstWorkflowCase = await workflowCasesPage.getFirstWorkflowCase();
     const modelForUpdate = new WorkflowCaseForEdit();
+    const dateNow = new Date();
     modelForUpdate.status = 'Igangværende';
     modelForUpdate.actionPlan = generateRandmString();
     modelForUpdate.description = generateRandmString();
-    modelForUpdate.deadline = new Date();
-    modelForUpdate.dateOfIncident = new Date();
+    modelForUpdate.deadline = {day: dateNow.getDate(), month: dateNow.getMonth(), year: dateNow.getFullYear()};
+    modelForUpdate.dateOfIncident = {day: dateNow.getDate(), month: dateNow.getMonth(), year: dateNow.getFullYear()};
     await firstWorkflowCase.update(modelForUpdate, true);
     const findWorkflowCase = await workflowCasesPage.getFirstWorkflowCase();
     // expect(findWorkflowCase.id).equal(1);
@@ -44,25 +45,36 @@ describe('Workflow cases - Edit', function () {
   it('should edit workflow case', async () => {
     const firstWorkflowCase = await workflowCasesPage.getFirstWorkflowCase();
     const modelForUpdate = new WorkflowCaseForEdit();
+    const dateNow = new Date();
     modelForUpdate.status = 'Igangværende';
     modelForUpdate.actionPlan = generateRandmString();
     modelForUpdate.description = generateRandmString();
-    modelForUpdate.deadline = new Date();
-    modelForUpdate.dateOfIncident = new Date();
+    modelForUpdate.deadline = {day: dateNow.getDate(), month: dateNow.getMonth(), year: dateNow.getFullYear()};
+    modelForUpdate.dateOfIncident = {day: dateNow.getDate(), month: dateNow.getMonth(), year: dateNow.getFullYear()};
     await firstWorkflowCase.update(modelForUpdate);
     const findWorkflowCase = await workflowCasesPage.getFirstWorkflowCase();
     expect(findWorkflowCase.id).equal(1);
     expect(findWorkflowCase.status, 'status not updated').equal(
       modelForUpdate.status
     );
+    const dateOfIncident = new Date();
+    dateOfIncident.setFullYear(
+      modelForUpdate.dateOfIncident.year,
+      modelForUpdate.dateOfIncident.month - 1,
+      modelForUpdate.dateOfIncident.day);
+    const deadline = new Date();
+    deadline.setFullYear(
+      modelForUpdate.deadline.year,
+      modelForUpdate.deadline.month - 1,
+      modelForUpdate.deadline.day);
     expect(
       findWorkflowCase.dateOfIncident,
       'dateOfIncident not updated'
-    ).equal(format(modelForUpdate.dateOfIncident, 'dd.MM.yyyy'));
+    ).equal(format(dateOfIncident, 'dd.MM.yyyy'));
     expect(
       findWorkflowCase.deadline,
       'deadline not updated'
-    ).equal(format(modelForUpdate.deadline, 'dd.MM.yyyy'));
+    ).equal(format(deadline, 'dd.MM.yyyy'));
     expect(findWorkflowCase.description, 'description not updated').equal(
       modelForUpdate.description
     );

eform-client/src/app/plugins/modules/workflow-pn/components/workflow-cases/workflow-case-edit/workflow-case-edit.component.html

@@ -18,19 +18,20 @@
       <mat-card class="px-0 pt-0">
         <mat-card-title class="pl-2 text-black py-2" style="background-color: rgb(232, 234, 246);">{{'Date of incident' | translate}}</mat-card-title>
         <mat-card-content class="px-3">
-          <mat-form-field [owlDateTimeTrigger]="dateOfIncidentPicker">
-            <mat-label>{{'Start date' | translate}}</mat-label>
-            <mat-icon matPrefix>calendar_today</mat-icon>
+          <mat-form-field>
+            <mat-label>{{ 'Start date' | translate }}</mat-label>
+            <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
             <input
               matInput
-              [owlDateTime]="dateOfIncidentPicker"
-              [ngModel]="workflowCaseModel.dateOfIncident"
-              (dateTimeChange)="onDateSelectedIncidentDate($event)"
-              type="text"
+              [matDatepicker]="picker"
+              [value]="workflowCaseModel.dateOfIncident"
+              (dateChange)="onDateSelectedIncidentDate($event)"
+              (click)="picker.open()"
               id="dateOfIncident"
-              name="dateOfIncident">
+              name="dateOfIncident"
+            >
+            <mat-datepicker #picker></mat-datepicker>
           </mat-form-field>
-          <owl-date-time [pickerType]="'calendar'" #dateOfIncidentPicker></owl-date-time>
         </mat-card-content>
       </mat-card>
       <mat-card class="px-0 pt-0 mt-3">
@@ -95,18 +96,19 @@
       <mat-card class="px-0 pt-0 mt-3">
         <mat-card-title class="pl-2 text-black py-2" style="background-color: rgb(255, 228, 228);">{{'Select deadline' | translate}}</mat-card-title>
         <mat-card-content class="px-3">
-          <mat-form-field [owlDateTimeTrigger]="deadlinePicker">
-            <mat-label>{{'Start date' | translate}}</mat-label>
-            <mat-icon matPrefix>calendar_today</mat-icon>
+          <mat-form-field>
+            <mat-label>{{ 'Start date' | translate }}</mat-label>
+            <mat-datepicker-toggle matSuffix [for]="pickerDeadline"></mat-datepicker-toggle>
             <input
               matInput
-              [owlDateTime]="deadlinePicker"
-              [ngModel]="workflowCaseModel.deadline"
-              (dateTimeChange)="onDateSelectedDeadline($event)"
-              type="text"
+              [matDatepicker]="pickerDeadline"
+              [value]="workflowCaseModel.deadline"
+              (dateChange)="onDateSelectedDeadline($event)"
+              (click)="pickerDeadline.open()"
               id="deadline"
-              name="deadline">
-            <owl-date-time [pickerType]="'calendar'" #deadlinePicker></owl-date-time>
+              name="deadline"
+            >
+            <mat-datepicker #pickerDeadline></mat-datepicker>
           </mat-form-field>
         </mat-card-content>
       </mat-card>

eform-client/src/app/plugins/modules/workflow-pn/components/workflow-cases/workflow-case-edit/workflow-case-edit.component.ts

@@ -1,27 +1,22 @@
-import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import {Component, OnDestroy, OnInit} from '@angular/core';
 import {
-  CaseEditRequest, CommonDictionaryTextModel,
+  CommonDictionaryTextModel,
   SiteNameDto,
-  TemplateDto,
 } from 'src/app/common/models';
-import { WorkflowCaseModel } from '../../../models';
-import { Subscription } from 'rxjs';
-import { UserClaimsEnum } from 'src/app/common/const';
-import { ActivatedRoute, Router } from '@angular/router';
+import {WorkflowCaseModel} from '../../../models';
+import {Subscription} from 'rxjs';
+import {UserClaimsEnum} from 'src/app/common/const';
+import {ActivatedRoute, Router} from '@angular/router';
 import {
-  AuthService, EntitySelectService,
-  SecurityGroupEformsPermissionsService,
+  EntitySelectService,
   SitesService,
 } from 'src/app/common/services';
-import { AutoUnsubscribe } from 'ngx-auto-unsubscribe';
-import { WorkflowPnCasesService } from '../../../services';
-import { DateTimeAdapter } from '@danielmoncada/angular-datetime-picker';
-import { AuthStateService } from 'src/app/common/store';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { Location } from '@angular/common';
-import { format } from 'date-fns';
-import {selectCurrentUserLocale} from 'src/app/state/auth/auth.selector';
+import {AutoUnsubscribe} from 'ngx-auto-unsubscribe';
+import {WorkflowPnCasesService} from '../../../services';
+import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+import {format} from 'date-fns';
 import {Store} from '@ngrx/store';
+import {MatDatepickerInputEvent} from '@angular/material/datepicker';
 
 @AutoUnsubscribe()
 @Component({
@@ -33,20 +28,11 @@ export class WorkflowCaseEditComponent implements OnInit, OnDestroy {
   deviceUsersList: SiteNameDto[] = [];
   places: Array<CommonDictionaryTextModel> = [];
   incidentTypes: Array<CommonDictionaryTextModel> = [];
-  @ViewChild('frame', { static: true }) frame;
   workflowCaseModel: WorkflowCaseModel = new WorkflowCaseModel();
-  entityGroupUidForPlaces: string;
-  entityGroupUidForIncidentTypes: string;
 
-  @ViewChild('caseConfirmation', { static: true }) caseConfirmation;
   id: number;
   templateId: number;
-  currentTemplate: TemplateDto = new TemplateDto();
-
-  requestModels: Array<CaseEditRequest> = [];
-  isSaveClicked = false;
   reverseRoute: string;
-  isNoSaveExitAllowed = false;
 
   activatedRouteSub$: Subscription;
   updateSub$: Subscription;
@@ -55,31 +41,22 @@ export class WorkflowCaseEditComponent implements OnInit, OnDestroy {
   dataForm: FormGroup;
 
   statuses = [
-    { id: 2, text: 'Vælg status' }, // No status
-    { id: 0, text: 'Igangværende' }, // Ongoing
-    { id: 3, text: 'Ikke igangsat' }, // Not initiated
-    { id: 1, text: 'Afsluttet' }, // Closed
-    { id: 4, text: 'Annulleret' }, // Canceled
+    {id: 2, text: 'Vælg status'}, // No status
+    {id: 0, text: 'Igangværende'}, // Ongoing
+    {id: 3, text: 'Ikke igangsat'}, // Not initiated
+    {id: 1, text: 'Afsluttet'}, // Closed
+    {id: 4, text: 'Annulleret'}, // Canceled
   ];
-  private selectCurrentUserLocale$ = this.authStore.select(selectCurrentUserLocale);
 
   constructor(
     private activateRoute: ActivatedRoute,
     private router: Router,
     private authStore: Store,
-    private authService: AuthService,
-    private securityGroupEformsService: SecurityGroupEformsPermissionsService,
-    dateTimeAdapter: DateTimeAdapter<any>,
     private workflowPnCasesService: WorkflowPnCasesService,
-    authStateService: AuthStateService,
     private formBuilder: FormBuilder,
-    private location: Location,
     private sitesService: SitesService,
     private entitySelectService: EntitySelectService
   ) {
-    this.selectCurrentUserLocale$.subscribe((locale) => {
-      dateTimeAdapter.setLocale(locale);
-    });
     this.activatedRouteSub$ = this.activateRoute.params.subscribe((params) => {
       this.id = +params['id'];
     });
@@ -112,7 +89,7 @@ export class WorkflowCaseEditComponent implements OnInit, OnDestroy {
       if (id === undefined) {
         return '';
       }
-      const result =  this.deviceUsersList.find(x => x.id === id);
+      const result = this.deviceUsersList.find(x => x.id === id);
       if (result === undefined) {
         return '';
       } else {
@@ -144,10 +121,6 @@ export class WorkflowCaseEditComponent implements OnInit, OnDestroy {
       });
   }
 
-  get userClaimsEnum() {
-    return UserClaimsEnum;
-  }
-
   ngOnInit() {
     this.dataForm = this.formBuilder.group({
       deadline: ['', Validators.required],
@@ -157,7 +130,8 @@ export class WorkflowCaseEditComponent implements OnInit, OnDestroy {
     this.loadCase();
   }
 
-  ngOnDestroy() {}
+  ngOnDestroy() {
+  }
 
   loadCase() {
     if (!this.id || this.id === 0) {
@@ -183,15 +157,15 @@ export class WorkflowCaseEditComponent implements OnInit, OnDestroy {
   loadPlaces() {
     this.entitySelectService.getEntitySelectableGroupDictionary(this.workflowCaseModel.incidentPlaceListId).subscribe((operation => {
       if (operation && operation.success) {
-        this.places  = operation.model;
+        this.places = operation.model;
       }
     }));
   }
 
   loadTypes() {
     this.entitySelectService.getEntitySelectableGroupDictionary(this.workflowCaseModel.incidentTypeListId).subscribe((operation => {
       if (operation && operation.success) {
-        this.incidentTypes  = operation.model;
+        this.incidentTypes = operation.model;
       }
     }));
   }
@@ -206,11 +180,11 @@ export class WorkflowCaseEditComponent implements OnInit, OnDestroy {
     this.workflowCaseModel.incidentType = e.text;
   }
 
-  onDateSelectedIncidentDate(e: any) {
+  onDateSelectedIncidentDate(e: MatDatepickerInputEvent<any, any>) {
     this.workflowCaseModel.dateOfIncident = format(e.value, 'yyyy-MM-dd');
   }
 
-  onDateSelectedDeadline(e: any) {
+  onDateSelectedDeadline(e: MatDatepickerInputEvent<any, any>) {
     this.workflowCaseModel.deadline = format(e.value, 'yyyy-MM-dd');
   }
 }

eform-client/src/app/plugins/modules/workflow-pn/workflow-pn.module.ts

@@ -15,7 +15,6 @@ import {
 import { WorkflowPnLayoutComponent } from './layouts';
 import { WorkflowPnCasesService, WorkflowPnSettingsService } from './services';
 import { WorkflowPnRouting } from './workflow-pn.routing';
-import { OwlDateTimeModule } from '@danielmoncada/angular-datetime-picker';
 import {EformImportedModule} from 'src/app/common/modules/eform-imported/eform-imported.module';
 import {EformCasesModule} from 'src/app/common/modules/eform-cases/eform-cases.module';
 import {MtxGridModule} from '@ng-matero/extensions/grid';
@@ -29,6 +28,7 @@ import {MatCardModule} from '@angular/material/card';
 import {MtxSelectModule} from '@ng-matero/extensions/select';
 import {StoreModule} from '@ngrx/store';
 import * as workflowCasesReducer from './state/workflow-cases/workflow-cases.reducer';
+import {MatDatepickerModule} from '@angular/material/datepicker';
 
 @NgModule({
   imports: [
@@ -38,7 +38,6 @@ import * as workflowCasesReducer from './state/workflow-cases/workflow-cases.red
     EformSharedModule,
     RouterModule,
     WorkflowPnRouting,
-    OwlDateTimeModule,
     EformImportedModule,
     EformCasesModule,
     MtxGridModule,
@@ -53,6 +52,7 @@ import * as workflowCasesReducer from './state/workflow-cases/workflow-cases.red
     StoreModule.forFeature('workflowPn', {
       workflowCasesState: workflowCasesReducer.reducer,
     }),
+    MatDatepickerModule,
   ],
   declarations: [
     WorkflowPnLayoutComponent,