Fixed various issues with the new appointment form

app/controllers/customer_appointments_controller.rb

@@ -16,6 +16,15 @@ class CustomerAppointmentsController < ApplicationController
 
   helper :projects
 
+  def customer_options
+    customer = Customer.find_by(id: params[:customer_id])
+
+    render json: {
+      vehicles: customer&.vehicles&.map { |v| { id: v.id, name: v.name } } || [],
+      estimates: customer&.estimates&.map { |e| { id: e.id, name: e.name } } || []
+    }
+  end
+
   def index
     if params[:project_id]
       @project = Project.find(params[:project_id])
@@ -33,6 +42,7 @@ class CustomerAppointmentsController < ApplicationController
     @appointment = CustomerAppointment.new
     @appointment.project = @project
     @appointment.start_date = (params[:start_date].to_date + 9.hours) if params[:start_date].present?
+    @appointment.end_date = @appointment.start_date + 1.hour if @appointment.start_date.present?
   end
 
   def create

app/views/customer_appointments/_form.html.erb

@@ -6,17 +6,17 @@
 
     <p>
       <%= f.text_field :customer, label: :label_customer, class: "customer-name", autocomplete: "off", data: { autocomplete_url: "/customers/autocomplete" } %>
-      <%= f.hidden_field :customer_id, id: "customer_id", onchange: "this.form.requestSubmit()" %>
+      <%= f.hidden_field :customer_id, id: "customer_id" %>
     </p>
 
     <p>
       <%= f.label :vehicle_id, l(:label_vehicle) %>
-      <%= f.collection_select :vehicle_id, @appointment.customer&.vehicles || [], :id, :name, { include_blank: true }, { label: false } %>
+      <%= f.collection_select :vehicle_id, @appointment.customer&.vehicles || [], :id, :name, { include_blank: true }, { label: false, id: "appointment_vehicle_id" } %>
     </p>
 
     <p>
       <%= f.label :estimate_id, l(:label_estimate) %>
-      <%= f.collection_select :estimate_id, @appointment.customer&.estimates || [], :id, :name, { include_blank: true }, { label: false } %>
+      <%= f.collection_select :estimate_id, @appointment.customer&.estimates || [], :id, :name, { include_blank: true }, { label: false, id: "appointment_estimate_id" } %>
     </p>
 
     <p>
@@ -24,7 +24,7 @@
       <%= f.collection_select :user_id, User.active.sorted, :id, :name, { include_blank: true }, { label: false } %>
     </p>
 
-    <p><%= f.date_field :start_date, size: 10 %></p>
+    <p><%= f.datetime_local_field :start_date %></p>
     <p><%= f.date_field :end_date, size: 10 %></p>
 
     <p><%= f.number_field :estimated_hours, step: 0.1, size: 6 %></p>

assets/javascripts/customer_appointments.js

@@ -0,0 +1,53 @@
+function initCustomerAppointmentForm() {
+  const customerIdInput = document.getElementById('customer_id');
+  if (!customerIdInput) return;
+
+  let lastValue = customerIdInput.value;
+
+  // Watch for changes via value attribute modification or standard change events
+  const observer = new MutationObserver(checkValueChange);
+  observer.observe(customerIdInput, { attributes: true, attributeFilter: ['value'] });
+
+  customerIdInput.addEventListener('change', checkValueChange);
+
+  function checkValueChange() {
+    const customerId = customerIdInput.value;
+    if (customerId === lastValue) return;
+    lastValue = customerId;
+
+    if (!customerId) {
+      clearSelect('appointment_vehicle_id');
+      clearSelect('appointment_estimate_id');
+      return;
+    }
+
+    fetch(`/customer_appointments/customer_options?customer_id=${customerId}`)
+      .then(response => response.json())
+      .then(data => {
+        populateSelect('appointment_vehicle_id', data.vehicles);
+        populateSelect('appointment_estimate_id', data.estimates);
+      })
+      .catch(err => console.error('Failed to load customer options:', err));
+  }
+
+  function populateSelect(elementId, items) {
+    const select = document.getElementById(elementId);
+    if (!select) return;
+
+    select.innerHTML = '<option value=""></option>';
+    items.forEach(item => {
+      const option = document.createElement('option');
+      option.value = item.id;
+      option.textContent = item.name;
+      select.appendChild(option);
+    });
+  }
+
+  function clearSelect(elementId) {
+    const select = document.getElementById(elementId);
+    if (select) select.innerHTML = '<option value=""></option>';
+  }
+}
+
+// Initialize on DOM load
+document.addEventListener('DOMContentLoaded', initCustomerAppointmentForm);

config/routes.rb

@@ -10,6 +10,10 @@
 
 RedmineApp::Application.routes.draw do
 
-  resources :customer_appointments
+  resources :customer_appointments do
+    collection do
+      get :customer_options
+    end
+  end
 
 end

lib/redmine_qbo_calendar/hooks/view_hook_listener.rb

@@ -16,8 +16,8 @@ module RedmineQboCalendar
       # Load the javascript to support the autocomplete forms
       def view_layouts_base_html_head(context = {})
         safe_join([
-          # javascript_include_tag("redmine_qbo_calendar", plugin: :redmine_qbo_calendar),
-          stylesheet_link_tag('customer_appoitments', plugin: :redmine_qbo_calendar)
+          javascript_include_tag("customer_appointments", plugin: :redmine_qbo_calendar),
+          stylesheet_link_tag('customer_appointments', plugin: :redmine_qbo_calendar)
        ])
       end