feat: migrate to vue 3

[SebastianKrupinski]

Summary

• Resolves: Migrate to Vue 3 #7684
• Migrate to vue 3

Testing

• checkout branch
• delete existing node_modules directory
• npm ci && npm run dev

[SebastianKrupinski]

Initial testable vue 3 migration

[codecov]

Codecov Report

❌ Patch coverage is 20.00000% with 76 lines in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
src/mixins/EditorMixin.js	0.00%	32 Missing and 9 partials ⚠️
src/store/calendarObjectInstance.js	0.00%	12 Missing and 2 partials ⚠️
src/store/calendarObjects.js	0.00%	9 Missing and 3 partials ⚠️
src/store/calendars.js	42.85%	4 Missing ⚠️
src/store/fetchedTimeRanges.js	0.00%	2 Missing ⚠️
src/store/principals.js	0.00%	2 Missing ⚠️
src/services/talkService.ts	0.00%	1 Missing ⚠️

📢 Thoughts on this report? Let us know!

[GVodyanov]

A few issues I found while poking around:

[GVodyanov]

Fixed this:

Before	After

[GVodyanov]

I added the new datepicker, however it requires this: nextcloud-libraries/nextcloud-vue#8009

[DerDreschner]

I found the following issues (using Firefox, btw):

• Creating a new event, editing an existing one or viewing a read-only one doesn't show the option to select/show the calendar the event is being created on. For that reason, the buttons at the top right side stick out into the title field when using the quick view:

Pictures

• The menu doesn't close when clicking on an item in the follow cases:
  • Creating a new calendar (only exception: add public holiday calendar)
  • Adding a file to an event (both upload and select existing file)
  • Editing an reminder (only closes when removing reminder -> no more reminders there afterwards)

Example picture

• When using the day view and having multiple events at the same time, it looks pretty odd? Somethings wrong there.

Picture

• When opening "Add public holiday calendar" and "Repeat event", there is a new text in the top middle? But only in those cases? Don't know if that's desired, it irrated me as that are the only two cases an modal overlay creates that.

Pictures

• When editing the first notification of an event, the menu button sticks out into the drop-down selection field:

Picture

• The input fields are not on the same line of sight here:

Pictures

[DerDreschner]

Ohh, and the overlay for picking an existing file to attach to an event has the same issue with the "pick" button not having any borders/styling.

Example picture

[SebastianKrupinski]

Thanks for testing @DerDreschner !

The styling issues will be addressed in a few follow up PR's as per our team call conversation. There is also one issue that seems to be caused by a broken upstream component.

Style issues

• When editing the first notification of an event, the menu button sticks out into the drop-down selection field:
• The input fields are not on the same line of sight here:
• Ohh, and the overlay for picking an existing file to attach to an event has the same issue with the "pick" button not having any borders/styling.

New to vue 9

• When opening "Add public holiday calendar" and "Repeat event", there is a new text in the top middle? But only in those cases? Don't know if that's desired, it irrated me as that are the only two cases an modal overlay creates that.

Fixed

• Creating a new event, editing an existing one or viewing a read-only one doesn't show the option to select/show the calendar the event is being created on. For that reason, the buttons at the top right side stick out into the title field when using the quick view:
• Adding a file to an event (both upload and select existing file)
• Editing an reminder (only closes when removing reminder -> no more reminders there afterwards)

Broken upstream

• Creating a new calendar (only exception: add public holiday calendar)

[DerDreschner]

Thanks @SebastianKrupinski!! I found another thing that's broken without the migration here. So I'll give it a pass now. 😄

[wolfgang101]

@SebastianKrupinski I saw your mention in #6788 and can't wait for this to make it into the official release.

Are we allowed to give additional feedback here?

I tested this pull request and two minor things stood out:

• the two time fields use the wrong icon - previously it was the clock icon which has now changed to the calendar date icon that is also used in the two date fields
• [simple event editor only]: when clicking into the date and time input fields the date / time selectors are centered right below the input fields. the time selector container gets cut off to the right. on smaller screen sizes the date selector container gets cut off to the left and the time selector to the right. as far as I could see it's just cosmetic and does not hinder any input. But maybe there are edge cases in other locales where this could be a problem? Only tested with de_DE to see if the new selectors work - they work great BTW.

[SebastianKrupinski]

Are we allowed to give additional feedback here?

Of course! This is why we make these public.

* the two time fields use the wrong icon - previously it was the clock icon which has now changed to the calendar date icon that is also used in the two date fields
* [simple event editor only]: when clicking into the date and time input fields the date / time selectors are centered right below the input fields. the time selector container gets cut off to the right. on smaller screen sizes the date selector container gets cut off to the left and the time selector to the right. as far as I could see it's just cosmetic and does not hinder any input. But maybe there are edge cases in other locales where this could be a problem? Only tested with de_DE to see if the new selectors work - they work great BTW.

Minor styling issues will be fixed in follow up PR's, once this is merged we'll get a design review of issues to be fixed.

Thank you for testing!!!

[GVodyanov]

Calendar settings is showing timezone "floating"

[GVodyanov]

Fixing rn

[GVodyanov]

Fixed

[GVodyanov]

Hmm also NcFormBoxCopyButton doesn't copy anything but that sounds like a nextcloud vue issue

[GVodyanov]

This selector in appointment settings can't be changed

[GVodyanov]

Also doesn't work here

[GVodyanov]

"can edit and see confidential events" checkbox doesn't work

[GVodyanov]

Gave a test and fixed what I can find, let's get this in!

I'll fix small alignment issues due to nc vue update in a subsequent PR

[SebastianKrupinski]

6 months and alot of grit but its done

[tcitworld]

Congrats!