From 978564dc9e5dfe3895c3d5b3c4991850e8b560fd Mon Sep 17 00:00:00 2001 From: Klaus Zanders Date: Mon, 9 Dec 2024 17:18:12 +0100 Subject: [PATCH] add time calculation logic --- .../dynamic/time-entry.controller.ts | 68 ++++++++++++++----- .../time_entries/time_entry_form.rb | 5 +- modules/costs/app/models/time_entry.rb | 2 + 3 files changed, 56 insertions(+), 19 deletions(-) diff --git a/frontend/src/stimulus/controllers/dynamic/time-entry.controller.ts b/frontend/src/stimulus/controllers/dynamic/time-entry.controller.ts index b3e3ba4893c3..ae9d47b16623 100644 --- a/frontend/src/stimulus/controllers/dynamic/time-entry.controller.ts +++ b/frontend/src/stimulus/controllers/dynamic/time-entry.controller.ts @@ -29,14 +29,19 @@ */ import { Controller } from '@hotwired/stimulus'; +import { parseChronicDuration, outputChronicDuration } from 'core-app/shared/helpers/chronic_duration'; import flatpickr from 'flatpickr'; +interface HTMLInputElementWithFlatpickr extends HTMLInputElement { + _flatpickr?:flatpickr.Instance; +} + export default class TimeEntryController extends Controller { static targets = ['startTimeInput', 'endTimeInput', 'hoursInput']; - declare readonly startTimeInputTarget: HTMLInputElement; - declare readonly endTimeInputTarget: HTMLInputElement; - declare readonly hoursInputTarget: HTMLInputElement; + declare readonly startTimeInputTarget:HTMLInputElementWithFlatpickr; + declare readonly endTimeInputTarget:HTMLInputElementWithFlatpickr; + declare readonly hoursInputTarget:HTMLInputElement; startTimeInputTargetConnected() { this.initTimePicker(this.startTimeInputTarget); @@ -46,33 +51,62 @@ export default class TimeEntryController extends Controller { this.initTimePicker(this.endTimeInputTarget); } - dateChanged() { + datesChanged(initiatedBy:HTMLInputElement) { const startTimeParts = this.startTimeInputTarget.value.split(':'); const endTimeParts = this.endTimeInputTarget.value.split(':'); - const startTime = parseInt(startTimeParts[0], 10) * 60 + parseInt(startTimeParts[1], 10); - const endTime = parseInt(endTimeParts[0], 10) * 60 + parseInt(endTimeParts[1], 10); + const startTimeInMinutes = parseInt(startTimeParts[0], 10) * 60 + parseInt(startTimeParts[1], 10); + const endTimeInMinutes = parseInt(endTimeParts[0], 10) * 60 + parseInt(endTimeParts[1], 10); + const hoursInMinutes = Math.round((parseChronicDuration(this.hoursInputTarget.value) || 0) / 60); + + // We calculate the hours field if: + // - We have start & end time and no hours + // - We have start & end time and we have triggered the change from the end time field + if (startTimeInMinutes && endTimeInMinutes && (hoursInMinutes === 0 || initiatedBy === this.endTimeInputTarget)) { + const duration = endTimeInMinutes - startTimeInMinutes; + this.hoursInputTarget.value = outputChronicDuration(duration * 60, { format: 'hours_only' }) || ''; + } else if (startTimeInMinutes && hoursInMinutes) { + const newEndTime = startTimeInMinutes + hoursInMinutes; - this.toggleEndPlusOneDayCapion(endTime < startTime); + const targetDate = new Date(); + targetDate.setHours(Math.floor(newEndTime / 60)); + targetDate.setMinutes(Math.round(newEndTime % 60)); + targetDate.setSeconds(0); + this.endTimeInputTarget._flatpickr!.setDate(targetDate); // eslint-disable-line no-underscore-dangle + } + + this.toggleEndTimePlusCaption(startTimeInMinutes + hoursInMinutes); + } + + hoursChanged() { + // Parse input through our chronic duration parser and then reformat as hours that can be nicely parsed on the + // backend + const hours = parseChronicDuration(this.hoursInputTarget.value, { defaultUnit: 'hours', ignoreSecondsWhenColonSeperated: true }); + this.hoursInputTarget.value = outputChronicDuration(hours, { format: 'hours_only' }) || ''; + + this.datesChanged(this.hoursInputTarget); + } + + hoursKeyEnterPress(event:KeyboardEvent) { + if (event.currentTarget instanceof HTMLInputElement) { + event.currentTarget.blur(); + } } - toggleEndPlusOneDayCapion(show: boolean) { + toggleEndTimePlusCaption(endTimeInMinutes:number) { const formControl = this.endTimeInputTarget.closest('.FormControl') as HTMLElement; + formControl.querySelectorAll('.FormControl-caption').forEach((caption) => caption.remove()); - if (show) { + if (endTimeInMinutes > (24 * 60)) { + const diffInDays = Math.floor(endTimeInMinutes / (60 * 24)); const span = document.createElement('span'); span.className = 'FormControl-caption'; - span.innerText = '+1 day'; + span.innerText = `+ ${diffInDays} ${diffInDays === 1 ? 'day' : 'days'}`; formControl.append(span); - } else { - const caption = formControl.querySelector('.FormControl-caption'); - if (caption) { - caption.remove(); - } } } - initTimePicker(field: HTMLInputElement) { + initTimePicker(field:HTMLInputElement) { flatpickr(field, { enableTime: true, noCalendar: true, @@ -81,7 +115,7 @@ export default class TimeEntryController extends Controller { static: true, appendTo: document.querySelector('#time-entry-dialog') as HTMLElement, onChange: () => { - this.dateChanged(); + this.datesChanged(field); }, }); } diff --git a/modules/costs/app/components/time_entries/time_entry_form.rb b/modules/costs/app/components/time_entries/time_entry_form.rb index cdc14754e5b1..c692b4589672 100644 --- a/modules/costs/app/components/time_entries/time_entry_form.rb +++ b/modules/costs/app/components/time_entries/time_entry_form.rb @@ -27,10 +27,10 @@ class TimeEntryForm < ApplicationForm type: "date", required: true, datepicker_options: { inDialog: true }, + value: model.spent_on&.iso8601, label: TimeEntry.human_attribute_name(:spent_on) f.group(layout: :horizontal) do |g| - # TODO: Add a time picker based on the date picker linked above g.text_field name: :start_time, required: true, label: TimeEntry.human_attribute_name(:start_time), @@ -47,7 +47,8 @@ class TimeEntryForm < ApplicationForm f.text_field name: :hours, required: true, label: TimeEntry.human_attribute_name(:hours), - data: { "time-entry-target" => "hoursInput" } + data: { "time-entry-target" => "hoursInput", + "action" => "blur->time-entry#hoursChanged keypress.enter->time-entry#hoursKeyEnterPress" } f.work_package_autocompleter name: :work_package_id, label: TimeEntry.human_attribute_name(:work_package), diff --git a/modules/costs/app/models/time_entry.rb b/modules/costs/app/models/time_entry.rb index 32048cb152c8..9984922099c6 100644 --- a/modules/costs/app/models/time_entry.rb +++ b/modules/costs/app/models/time_entry.rb @@ -128,6 +128,7 @@ def costs_visible_by?(usr) def start_timestamp return nil if start_time.blank? return nil if time_zone.blank? + return nil if spent_on.blank? time_zone_object.local(spent_on.year, spent_on.month, spent_on.day, start_time / 60, start_time % 60) end @@ -136,6 +137,7 @@ def end_timestamp return nil if start_time.blank? return nil if time_zone.blank? return nil if hours.blank? + return nil if spent_on.blank? start_timestamp + hours.hours end