Fix date modal opening for new resources

frontend/src/app/shared/components/datepicker/services/date-modal-relations.service.ts

@@ -39,6 +39,7 @@ import {
   shareReplay,
   switchMap,
   take,
+  tap,
 } from 'rxjs/operators';
 import {
   combineLatest,

frontend/src/app/shared/components/datepicker/wp-multi-date-form/wp-multi-date-form.component.ts

@@ -53,7 +53,6 @@ import {
   map,
   switchMap,
 } from 'rxjs/operators';
-import { activeFieldContainerClassName } from 'core-app/shared/components/fields/edit/edit-form/edit-form';
 import {
   fromEvent,
   merge,
@@ -80,6 +79,7 @@ import { DatePicker } from '../datepicker';
 import DateOption = flatpickr.Options.DateOption;
 import { WorkPackageChangeset } from 'core-app/features/work-packages/components/wp-edit/work-package-changeset';
 import { UntilDestroyedMixin } from 'core-app/shared/helpers/angular/until-destroyed.mixin';
+import isNewResource from 'core-app/features/hal/helpers/is-new-resource';
 
 export type DateKeys = 'start'|'end';
 export type DateFields = DateKeys|'duration';
@@ -283,17 +283,24 @@ export class OpWpMultiDateFormComponent extends UntilDestroyedMixin implements A
   }
 
   ngAfterViewInit():void {
+    const init = (date:Date|null) => {
+      this.initializeDatepicker(date);
+
+      // Autofocus duration if that's what activated us
+      if (this.initialActivatedField === 'duration') {
+        this.focusHelper.focus(this.durationField.nativeElement);
+      }
+    };
+
+    if (isNewResource(this.changeset.pristineResource)) {
+      init(null);
+      return;
+    }
+
     this
       .dateModalRelations
       .getMinimalDateFromPreceeding()
-      .subscribe((date) => {
-        this.initializeDatepicker(date);
-
-        // Autofocus duration if that's what activated us
-        if (this.initialActivatedField === 'duration') {
-          this.focusHelper.focus(this.durationField.nativeElement);
-        }
-      });
+      .subscribe((date) => init(date));
   }
 
   changeSchedulingMode():void {

frontend/src/app/shared/components/fields/edit/field-types/combined-date-edit-field.component.html

@@ -13,7 +13,7 @@
   />
 
   <op-wp-single-date-form
-    *ngIf="!isMultiDate"
+    *ngIf="opened && !isMultiDate"
     [value]="dates"
     [changeset]="change"
     (save)="save()"
@@ -21,7 +21,7 @@
     slot="body"
   ></op-wp-single-date-form>
   <op-wp-multi-date-form
-    *ngIf="isMultiDate"
+    *ngIf="opened && isMultiDate"
     [value]="dates"
     [changeset]="change"
     [fieldName]="name"

spec/features/work_packages/new/new_work_package_spec.rb

@@ -291,6 +291,7 @@ describe 'new work package', js: true do
 
       date_field = wp_page.edit_field(:date)
 
+      byebug
       date_field.expect_value(I18n.t('js.label_no_date'))
 
       # Set date
@@ -339,6 +340,7 @@ describe 'new work package', js: true do
       create_work_package_globally(type_bug, project.name)
 
       date_field = wp_page.edit_field(:combinedDate)
+      byebug
       date_field.expect_value("no start date - no finish date")
 
       click_on 'Cancel'
@@ -363,6 +365,7 @@ describe 'new work package', js: true do
 
       # Open datepicker
       date_field = wp_page.edit_field(:combinedDate)
+      byebug
       date_field.click_to_open_datepicker
 
       # Select date
@@ -488,6 +491,7 @@ describe 'new work package', js: true do
       date_field = split_create_page.edit_field(:combinedDate)
       date_field.expect_value("#{parent.start_date} - #{parent.due_date}")
 
+      byebug
       date_field.click_to_open_datepicker
       date_field.update ['', parent.due_date]
 

spec/support/edit_fields/date_edit_field.rb

@@ -95,7 +95,7 @@ class DateEditField < EditField
     if active?
       modal_element.find(input_selector)
     else
-      page.find(".#{property_name}.-editable")
+      page.find(".#{property_name} .spot-input")
     end
   end
 
@@ -151,7 +151,7 @@ class DateEditField < EditField
   end
 
   def expect_value(value)
-    expect(page).to have_selector(".#{property_name}.-editable", text: value)
+    expect(page).to have_selector(".#{property_name} .spot-input", value: value)
   end
 
   def set_active_date(value)