Add interaction to calendar

app/components/users/non_working_times/calendar_component.rb

@@ -44,8 +44,12 @@ module Users
         user.present? && UserNonWorkingTimes::UpdateContract.can_update?(user: User.current, target_user: user)
       end
 
+      def can_create?
+        user.present? && UserNonWorkingTimes::CreateContract.can_create?(user: User.current, target_user: user)
+      end
+
       def wrapper_data
-        {
+        data = {
           "controller" => "users--non-working-times",
           "users--non-working-times-events-value" => events_json,
           "users--non-working-times-year-value" => year,
@@ -53,6 +57,12 @@ module Users
           "users--non-working-times-start-of-week-value" => first_day_of_week,
           "users--non-working-times-working-days-value" => working_days.to_json
         }
+
+        if can_create?
+          data["users--non-working-times-new-url-value"] = new_user_non_working_time_path(user)
+        end
+
+        data
       end
 
       def working_days

app/components/users/non_working_times/calendar_component.sass

@@ -24,6 +24,7 @@
       border-color: var(--bgColor-accent-emphasis) !important
       color: var(--fgColor-onEmphasis) !important
       border-radius: var(--borderRadius-medium) !important
+      cursor: pointer !important
 
     .fc-multimonth-daygrid-table
       .fc-day

app/controllers/users/non_working_times_controller.rb

@@ -50,7 +50,7 @@ class Users::NonWorkingTimesController < ApplicationController
   end
 
   def new
-    @non_working_time = @user.non_working_times.build
+    @non_working_time = @user.non_working_times.build(prefilled_params)
 
     respond_with_dialog(
       Users::NonWorkingTimes::DialogComponent.new(user: @user, non_working_time: @non_working_time)
@@ -140,4 +140,8 @@ class Users::NonWorkingTimesController < ApplicationController
   def non_working_time_params
     params.expect(user_non_working_time: %i[start_date end_date])
   end
+
+  def prefilled_params
+    params.permit(:start_date, :end_date)
+  end
 end

frontend/src/stimulus/controllers/dynamic/users/non-working-times.controller.ts

@@ -30,10 +30,12 @@
 
 import { Controller } from '@hotwired/stimulus';
 import { Calendar } from '@fullcalendar/core';
+import interactionPlugin from '@fullcalendar/interaction';
 import multiMonthPlugin from '@fullcalendar/multimonth';
 import allLocales from '@fullcalendar/core/locales-all';
 import { renderStreamMessage } from '@hotwired/turbo';
 import { TurboHelpers } from 'core-turbo/helpers';
+import moment from 'moment';
 
 interface NonWorkingDayEvent {
   date?:string;
@@ -54,6 +56,7 @@ export default class NonWorkingTimesController extends Controller {
     locale: String,
     startOfWeek: Number,
     workingDays: Array,
+    newUrl: String,
   };
 
   declare readonly calendarTarget:HTMLElement;
@@ -62,6 +65,8 @@ export default class NonWorkingTimesController extends Controller {
   declare readonly localeValue:string;
   declare readonly startOfWeekValue:number;
   declare readonly workingDaysValue:number[];
+  declare readonly hasNewUrlValue:boolean;
+  declare readonly newUrlValue:string;
 
   private calendar:Calendar;
 
@@ -84,7 +89,7 @@ export default class NonWorkingTimesController extends Controller {
 
   initializeCalendar() {
     this.calendar = new Calendar(this.calendarTarget, {
-      plugins: [multiMonthPlugin],
+      plugins: [multiMonthPlugin, interactionPlugin],
       initialView: 'multiMonthYear',
       multiMonthMaxColumns: 1,
       locales: allLocales,
@@ -107,6 +112,14 @@ export default class NonWorkingTimesController extends Controller {
           this.openDialog(editUrl);
         }
       },
+      selectable: this.hasNewUrlValue,
+      select: (info) => {
+        const inclusiveEnd = moment(info.end).subtract(12, 'hours').toDate();
+        const endStr = inclusiveEnd.toISOString().slice(0, 10);
+        const url = `${this.newUrlValue}?start_date=${info.startStr}&end_date=${endStr}`;
+        this.openDialog(url);
+        this.calendar.unselect();
+      },
     });
 
     this.calendar.render();