Extract logic to update the edit field after the turboFrame was submi…

…tted into a directive so that it can be used for the datepicker as well

app/components/work_packages/date_picker/dialog_content_component.html.erb

@@ -65,6 +65,7 @@
                 end
                 second_row.with_column do
                   render(Primer::Alpha::TextField.new(name: :duration,
+                                                      type: "number",
                                                       label: I18n.t("activerecord.attributes.work_package.duration"),
                                                       value: work_package.duration))
                 end

app/controllers/work_packages/date_picker_controller.rb

@@ -60,6 +60,8 @@ def show
   end
 
   def update
+    # Todo
+    params[:duration] = params[:duration].to_i
     service_call = WorkPackages::UpdateService
                      .new(user: current_user,
                           model: @work_package)
@@ -79,7 +81,7 @@ def update
           # the request in order to fetch the new set of Work Package
           # attributes in the ancestry solely on success.
           render turbo_stream: [
-            turbo_stream.morph("work_package_datepicker_modal", datepicker_modal_component)
+            turbo_stream.morph("wp-datepicker-dialog--content", datepicker_modal_component)
           ], status: :unprocessable_entity
         end
       end
@@ -88,7 +90,7 @@ def update
 
   private
 
-  def progress_modal_component
+  def datepicker_modal_component
     WorkPackages::DatePicker::DialogContentComponent.new(work_package: @work_package, manually_scheduled:, focused_field:,
                                                          touched_field_map:)
   end
@@ -102,8 +104,7 @@ def find_work_package
   end
 
   def touched_field_map
-    params.require(:work_package)
-          .slice("schedule_manually_touched",
+    params.slice("schedule_manually_touched",
                  "ignore_non_working_days_touched",
                  "start_date_touched",
                  "due_date_touched",
@@ -121,20 +122,19 @@ def manually_scheduled
   end
 
   def work_package_datepicker_params
-    params.require(:work_package)
-          .slice(*allowed_touched_params)
+    params.slice(*allowed_params)
           .permit!
   end
 
-  def allowed_touched_params
-    allowed_params.filter { touched?(_1) }
-  end
+  # def allowed_touched_params
+  #   allowed_params.filter { touched?(_1) }
+  # end
 
   def allowed_params
     %i[schedule_manually ignore_non_working_days start_date due_date duration]
   end
 
-  def touched?(field)
-    touched_field_map[:"#{field}_touched"]
-  end
+  # def touched?(field)
+  #   touched_field_map[:"#{field}_touched"]
+  # end
 end

frontend/src/app/shared/components/datepicker/datepicker.module.ts

@@ -15,7 +15,6 @@ import { OpSpotModule } from 'core-app/spot/spot.module';
 import { OpenprojectModalModule } from '../modal/modal.module';
 import { OpDatePickerSheetComponent } from 'core-app/shared/components/datepicker/sheet/date-picker-sheet.component';
 import { OpenprojectContentLoaderModule } from 'core-app/shared/components/op-content-loader/openproject-content-loader.module';
-import { OpWpMultiDateDialogContentComponent } from 'core-app/shared/components/datepicker/wp-multi-date-form/wp-multi-date-dialog-content.component';
 import { OpWpModalDatePickerComponent } from 'core-app/shared/components/datepicker/wp-modal-date-picker/wp-modal-date-picker.component';
 
 @NgModule({
@@ -39,7 +38,6 @@ import { OpWpModalDatePickerComponent } from 'core-app/shared/components/datepic
     OpWpMultiDateFormComponent,
     OpWpSingleDateFormComponent,
     OpDatePickerSheetComponent,
-    OpWpMultiDateDialogContentComponent,
     OpWpModalDatePickerComponent,
   ],
 
@@ -49,7 +47,6 @@ import { OpWpModalDatePickerComponent } from 'core-app/shared/components/datepic
     OpWpSingleDateFormComponent,
     OpBasicDatePickerModule,
     OpDatePickerSheetComponent,
-    OpWpMultiDateDialogContentComponent,
     OpWpModalDatePickerComponent,
   ],
 })

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

@@ -20,10 +20,25 @@
       (save)="save()"
       (cancel)="cancel()"
     ></op-wp-single-date-form>
-    <op-wp-multi-date-dialog-content
-      *ngIf="opened && isMultiDate"
-      [changeset]="change"
-    ></op-wp-multi-date-dialog-content>
+
+    <turbo-frame *ngIf="turboFrameSrc && opened && isMultiDate"
+                 [src]="turboFrameSrc"
+                 opModalWithTurboContent
+                 [change]="change"
+                 [resource]="resource"
+                 (successfulCreate)="handleSuccessfulCreate($event)"
+                 (successfulUpdate)="handleSuccessfulUpdate()"
+                 id="wp-datepicker-dialog--content">
+      <op-content-loader viewBox="0 0 100 100">
+        <svg:rect x="5" y="5" width="70" height="5" rx="1"/>
+
+        <svg:rect x="80" y="5" width="15" height="5" rx="1"/>
+
+        <svg:rect x="5" y="15" width="90" height="8" rx="1"/>
+
+        <svg:rect x="5" y="30" width="90" height="12" rx="1"/>
+      </op-content-loader>
+    </turbo-frame>
 
     <!--<op-wp-multi-date-form
       *ngIf="opened && isMultiDate"

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

@@ -26,18 +26,38 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-import { Component } from '@angular/core';
+import {
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Inject,
+  Injector,
+  OnInit,
+} from '@angular/core';
 import { DatePickerEditFieldComponent } from 'core-app/shared/components/fields/edit/field-types/date-picker-edit-field.component';
 import { WorkPackageResource } from 'core-app/features/hal/resources/work-package-resource';
+import { PathHelperService } from 'core-app/core/path-helper/path-helper.service';
+import { I18nService } from 'core-app/core/i18n/i18n.service';
+import { ResourceChangeset } from 'core-app/shared/components/fields/changeset/resource-changeset';
+import { HalResource } from 'core-app/features/hal/resources/hal-resource';
+import { IFieldSchema } from 'core-app/shared/components/fields/field.base';
+import { EditFieldHandler } from 'core-app/shared/components/fields/edit/editing-portal/edit-field-handler';
+import {
+  OpEditingPortalChangesetToken,
+  OpEditingPortalHandlerToken,
+  OpEditingPortalSchemaToken,
+} from 'core-app/shared/components/fields/edit/edit-field.component';
 
 @Component({
   templateUrl: './combined-date-edit-field.component.html',
 })
-export class CombinedDateEditFieldComponent extends DatePickerEditFieldComponent {
+export class CombinedDateEditFieldComponent extends DatePickerEditFieldComponent implements OnInit {
   dates = '';
 
   opened = false;
 
+  turboFrameSrc:string;
+
   text = {
     placeholder: {
       startDate: this.I18n.t('js.label_no_start_date'),
@@ -46,6 +66,24 @@ export class CombinedDateEditFieldComponent extends DatePickerEditFieldComponent
     },
   };
 
+  constructor(
+    readonly I18n:I18nService,
+    readonly elementRef:ElementRef,
+    @Inject(OpEditingPortalChangesetToken) protected change:ResourceChangeset<HalResource>,
+    @Inject(OpEditingPortalSchemaToken) public schema:IFieldSchema,
+    @Inject(OpEditingPortalHandlerToken) readonly handler:EditFieldHandler,
+    readonly cdRef:ChangeDetectorRef,
+    readonly injector:Injector,
+    readonly pathHelper:PathHelperService,
+  ) {
+    super(I18n, elementRef, change, schema, handler, cdRef, injector);
+  }
+
+  ngOnInit() {
+    super.ngOnInit();
+    this.turboFrameSrc = `${this.pathHelper.workPackageDatepickerDialogContentPath(this.change.id)}?field=${this.name}`;
+  }
+
   get isMultiDate():boolean {
     return !this.change.schema.isMilestone;
   }
@@ -67,13 +105,22 @@ export class CombinedDateEditFieldComponent extends DatePickerEditFieldComponent
     this.resetDates();
   }
 
-  public save():void {
-    this.handler.handleUserSubmit();
+  public handleSuccessfulCreate(JSONResponse:{ duration:number, startDate:Date, dueDate:Date, includeNonWorkingDays:boolean, scheduleManually:boolean }):void {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-assignment
+    this.resource.duration = JSONResponse.duration;
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-assignment
+    this.resource.dueDate = JSONResponse.dueDate;
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-assignment
+    this.resource.startDate = JSONResponse.startDate;
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-assignment
+    this.resource.includeNonWorkingDays = JSONResponse.includeNonWorkingDays;
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-assignment
+    this.resource.scheduleManually = JSONResponse.scheduleManually;
+
     this.onModalClosed();
   }
 
-  public cancel():void {
-    this.handler.reset();
+  public handleSuccessfulUpdate():void {
     this.onModalClosed();
   }
 

frontend/src/app/shared/components/fields/edit/field-types/progress-popover-edit-field.component.html

@@ -37,9 +37,14 @@
 
     <div class="spot-drop-modal--content">
       <turbo-frame
-        #frameElement
         id="work_package_progress_modal"
-        [attr.src]="this.frameSrc">
+        [attr.src]="this.frameSrc"
+        opModalWithTurboContent
+        [change]="change"
+        [resource]="resource"
+        (successfulCreate)="handleSuccessfulCreate($event)"
+        (successfulUpdate)="handleSuccessfulUpdate()"
+      >
         <op-content-loader
           viewBox="0 0 180 80"
         >