add vue recurrence picker

[jeriox]

closes #195 closes #958

• Implemented with Vue, similar to the signup block editor.
• Regarding the upcoming improvements in #958, the vue code is prepared to also pick times
• Getting the dates for the preview is no longer done via django, but directly in JS
• We decided against implementing a vue build step (see #1351)

ToDo

• [x] move widget to separate template
• [x] implement shift copy

[jeriox]

First draft implementation:

[lukasrad02]

The layout is not mobile-optimized. And it might make sense to not use two columns on mobile.

[lukasrad02]

I don't know what went wrong here, but the calculated dates are incorrect (should be 2024-09-16 and 2024-09-23).

However, when clicking copy, the events will be copied to the right dates.

[jeriox]

I don't know what went wrong here, but the calculated dates are incorrect (should be 2024-09-16 and 2024-09-23).

However, when clicking copy, the events will be copied to the right dates.

what timezone is your browser in? I fought a lot with that, but on my machine it was correct in the end when I was in Europe/Berlin as well.

[lukasrad02]

what timezone is your browser in? I fought a lot with that, but on my machine it was correct in the end when I was in Europe/Berlin as well.

Europe/Berlin (according to Intl.DateTimeFormat().resolvedOptions().timeZone).

Same behavior across Firefox (130.0), Firefox Developer Edition (130.0b9) and Chromium (128.0.6613.137) on the same machine as well as Firefox for Android (130.0). All browsers have timezone Europe/Berlin which is also set on the respective OS.

[lukasrad02]

I'm not familiar with the recurrence spec, but my naive expectation with a recurrence like "weekly, Mondays and Tuesdays, for 2 occurrences" would be that there are 4 copies in total (two times Monday and Tuesday), but there are only two total copies (one time Monday and Tuesday).

The behavior is consistent across the preview in the frontend and the actual copies created in the backend, so I think it is correct behavior, but it might be worth explaining, for example with an ℹ️-icon after "occurrences" that shows a tooltip explaining the interpretation of the number (overall number of copies, not number of weeks).

[lukasrad02]

Maybe related to the timezones: By chance, I've noticed that the following pattern causes an error "Invalid recurrence rule: unsupported RDATE parm: TZID=EUROPE/BERLIN" reproducibly:

Tested in Firefox Developer Edition and Chromium, but the error seems to come from the backend, as it is rendered as {{ form.errors }}. This is the recurrence string set to the server:

DTSTART;TZID=Europe/Berlin:20240914T000000RRULE:FREQ=WEEKLY;INTERVAL=1;BYDAY=MO;COUNT=2RDATE;TZID=Europe/Berlin:20240918T000000,20240919T000000

[jeriox]

Maybe related to the timezones: By chance, I've noticed that the following pattern causes an error "Invalid recurrence rule: unsupported RDATE parm: TZID=EUROPE/BERLIN" reproducibly:

good catch, forgot to mention that in the PR. this property is currently not supported in the library, I opened a PR to fix this

[jeriox]

thx for the review!

or adding relative deadlines to shifts in general.

https://github.com/ephios-dev/ephios/issues/209

[felixrindt]

• [x] optimize html:
  • [x] use <label> for more inputs
  • [x] proper spacing between inputs and the labels: avoid using bootstrap columns for inline layouting
  • [x] overflow: auto for the buttongroup overflowing on smartphone screens
• [x] I get errors when having a rule that uses "until" date.

[coveralls]

coverage: 83.906% (-1.0%) from 84.861% when pulling 3c5f1ee03be6ef7b4d541e9a198b794d8062ab56 on new-recurrence into 481a19acc9f4f556ceebb6fefb514abbc8d6e032 on main.