Integrate hacky GridDayRefreshController into other controllers

Now:
- Grid refresh happens automatically via schedule-grid controller's connect() when replaced
- Modal close is handled by bulk-dialog listening to stream events

bulk-dialog controller now:
- Opens modal on turbo:frame-load (when turbo-frame gets content)
- Closes modal on turbo:before-stream-render when schedule_day_* is replaced (successful creation/cancel)

Author: amatsuda

app/decorators/staff/time_slot_decorator.rb

@@ -104,9 +104,7 @@ def ts_data
     if ts.persisted?
       data.merge!({
         edit_path: h.edit_event_staff_schedule_grid_time_slot_path(object.event, object),
-        update_path: h.event_staff_schedule_grid_time_slot_url(object.event, object),
-        toggle: 'modal',
-        target: '#grid-time-slot-edit-dialog'
+        update_path: h.event_staff_schedule_grid_time_slot_url(object.event, object)
       })
     end
     data

app/helpers/schedule_helper.rb

@@ -26,7 +26,7 @@ def generate_grid_button(day)
     link_to('Generate Grid',
             new_event_staff_schedule_grid_bulk_time_slot_path(current_event, day),
             class: 'btn btn-primary btn-sm generate-grid',
-            data: {turbo: true, toggle: 'modal', target: '#bulk-time-slot-create-dialog'}
+            data: {turbo: true, turbo_frame: 'grid-modal-content'}
     )
   end
 

app/javascript/controllers/bulk_dialog_controller.js

@@ -68,18 +68,11 @@ export default class extends Controller {
     const scheduled = session.dataset.scheduled
 
     if (url && !scheduled) {
-      fetch(url, {
-        headers: {
-          'Accept': 'text/html',
-          'Turbo-Frame': 'program-session-show-dialog'
-        }
-      }).then(response => response.text())
-        .then(html => {
-          const frame = document.querySelector('#program-session-show-dialog turbo-frame')
-          if (frame) {
-            frame.innerHTML = html
-          }
-        })
+      const frame = document.getElementById('grid-modal-content')
+      if (frame) {
+        frame.innerHTML = ''
+        frame.src = url
+      }
     }
   }
 

app/javascript/controllers/draggable_sessions_controller.js

@@ -0,0 +1,66 @@
+import { Controller } from "@hotwired/stimulus"
+import { Modal } from "bootstrap"
+
+export default class extends Controller {
+  connect() {
+    this.element.addEventListener('turbo:frame-load', () => this.onFrameLoad())
+    document.addEventListener('turbo:submit-end', this.handleSubmitEnd)
+    document.addEventListener('turbo:before-stream-render', this.handleStreamRender)
+  }
+
+  disconnect() {
+    document.removeEventListener('turbo:submit-end', this.handleSubmitEnd)
+    document.removeEventListener('turbo:before-stream-render', this.handleStreamRender)
+  }
+
+  handleStreamRender = (event) => {
+    const stream = event.target
+    if (stream.action === 'replace' && stream.target?.startsWith('schedule_day_')) {
+      this.close()
+    }
+  }
+
+  onFrameLoad() {
+    this.setupBulkFormSync()
+    this.open()
+  }
+
+  handleSubmitEnd = (event) => {
+    const form = event.target
+    if (!this.element.contains(form)) return
+
+    if (event.detail.success) {
+      const submitter = event.detail.formSubmission?.submitter
+      if (submitter && submitter.value === 'save_and_add') {
+        return
+      }
+      this.close()
+    }
+  }
+
+  setupBulkFormSync() {
+    const formatSelect = this.element.querySelector('select.session-format')
+    const durationInput = this.element.querySelector('.time-slot-duration')
+
+    if (formatSelect && durationInput) {
+      formatSelect.addEventListener('change', () => {
+        durationInput.value = formatSelect.value
+      })
+
+      durationInput.addEventListener('keyup', () => {
+        if (document.activeElement === durationInput) {
+          formatSelect.value = ''
+        }
+      })
+    }
+  }
+
+  open() {
+    Modal.getOrCreateInstance(this.element).show()
+  }
+
+  close() {
+    const modal = Modal.getInstance(this.element)
+    if (modal) modal.hide()
+  }
+}

app/javascript/controllers/grid_day_refresh_controller.js

@@ -12,7 +12,7 @@ window.Stimulus = application
 import AlertAutodismissController from "./alert_autodismiss_controller"
 import AlertController from "./alert_controller"
 import BannerAdsController from "./banner_ads_controller"
-import BulkDialogController from "./bulk_dialog_controller"
+import GridModalController from "./grid_modal_controller"
 import CfpDatatableController from "./cfp_datatable_controller"
 import ContentController from "./content_controller"
 import CopySpeakerEmailsController from "./copy_speaker_emails_controller"
@@ -22,15 +22,12 @@ import EditorController from "./editor_controller"
 import FilterController from "./filter_controller"
 import FixedSubnavController from "./fixed_subnav_controller"
 import FlyOutController from "./fly_out_controller"
-import GridDayRefreshController from "./grid_day_refresh_controller"
-import GridShowModalController from "./grid_show_modal_controller"
 import GridTimeSlotRefreshController from "./grid_time_slot_refresh_controller"
 import HighlightController from "./highlight_controller"
 import InlineEditController from "./inline_edit_controller"
 import MaxlengthAlertController from "./maxlength_alert_controller"
 import MentionController from "./mention_controller"
 import ModalAutofocusController from "./modal_autofocus_controller"
-import ModalFormController from "./modal_form_controller"
 import NestedFormController from "./nested_form_controller"
 import NextProposalController from "./next_proposal_controller"
 import NotificationsChannelController from "./notifications_channel_controller"
@@ -58,7 +55,7 @@ import TrackFilterController from "./track_filter_controller"
 application.register("alert-autodismiss", AlertAutodismissController)
 application.register("alert", AlertController)
 application.register("banner-ads", BannerAdsController)
-application.register("bulk-dialog", BulkDialogController)
+application.register("grid-modal", GridModalController)
 application.register("cfp-datatable", CfpDatatableController)
 application.register("content", ContentController)
 application.register("copy-speaker-emails", CopySpeakerEmailsController)
@@ -68,15 +65,12 @@ application.register("editor", EditorController)
 application.register("filter", FilterController)
 application.register("fixed-subnav", FixedSubnavController)
 application.register("fly-out", FlyOutController)
-application.register("grid-day-refresh", GridDayRefreshController)
-application.register("grid-show-modal", GridShowModalController)
 application.register("grid-time-slot-refresh", GridTimeSlotRefreshController)
 application.register("highlight", HighlightController)
 application.register("inline-edit", InlineEditController)
 application.register("maxlength-alert", MaxlengthAlertController)
 application.register("mention", MentionController)
 application.register("modal-autofocus", ModalAutofocusController)
-application.register("modal-form", ModalFormController)
 application.register("nested-form", NestedFormController)
 application.register("next-proposal", NextProposalController)
 application.register("notifications-channel", NotificationsChannelController)

app/javascript/controllers/grid_modal_controller.js

@@ -1,5 +1,4 @@
 import { Controller } from '@hotwired/stimulus'
-import { Modal } from 'bootstrap'
 import palette from 'google-palette'
 import dayjs from 'dayjs'
 
@@ -288,18 +287,10 @@ export default class extends Controller {
     const url = slot.dataset.editPath
     if (!url || url.length === 0) return
 
-    fetch(url, {
-      headers: {
-        'Accept': 'text/vnd.turbo-stream.html, text/html',
-        'Turbo-Frame': 'grid-time-slot-edit-dialog'
-      }
-    }).then(response => response.text())
-      .then(html => {
-        const dialog = document.getElementById('grid-time-slot-edit-dialog')
-        dialog.innerHTML = html
-        const modal = Modal.getOrCreateInstance(dialog)
-        modal.show()
-      })
+    const frame = document.getElementById('grid-modal-content')
+    if (frame) {
+      frame.src = url
+    }
   }
 
   setupScrollHandlers() {