Qalendar Integration #274

MelissaAutumn · 2024-02-16T23:43:47Z

Fixes #272

Not ready for review, but in case I get bus factor'd heres the wip. There's still some heavy clean up needed in CalendarEvent.vue.

I didn't throw everything out, we're keeping the individual event display styles, I need to look into if we can adjust the style of mobile month event list. (That contrast is terrifying.) I also added a function to help pick a good text colour based on background colour, I'll probably look for a better library for that though.

I also haven't started styling the buttons on the top right.

Calendar View

Month

Month (Mobile)

Week

(There's no mobile view for week view)

Day

Day (Mobile)

Booking View

Month

Month (Mobile)

Week

(There's no mobile view for week view)

Day

### Day (Mobile)

…design/flow. * CalendarEvent (which is a clone of CalendarMonthDay) gives us a all-in-one event display. * CalendarEvent still needs some heavy clean-up. * Additional style tweaks on CalendarQalendar. * Fix event details pop-up to actually work. * Adjusted timeFormat() util to try and source browser/locale default if localstorage entry is not found.

MelissaAutumn · 2024-02-16T23:58:15Z

Looks like the mobile event list is pending PR merge: tomosterlund/qalendar#220

We can have the event list as is for now until that merges. Worst case I can submit a follow-up PR on qalendar that just updates the docs as requested.

devmount · 2024-02-19T18:42:51Z

Looks great so far, Mel! keep it up and let me know, if I can help on this. I can also try to push development on the qalendar repo

* Light mode now looks better. * Additional style fixes. * Initial work on dayboundary.

MelissaAutumn · 2024-02-21T01:00:11Z

Thanks! And if you'd like. We might soft-fork it and add some additional fixes, but I'd like to get this in a ready state (hopefully by eod my time tomorrow), so we can play with it on stage and fine any problem points.

MelissaAutumn · 2024-02-21T01:04:22Z

Current WIP:

I'm looking into some issues with day boundaries, and I need to re-add the schedule preview to some of the other pages, but it's looking pretty ready. We can re-add our date navigator / mode switcher, and hide Qalendar's if we prefer that.

* Added support for schedule previews, and added qalendar to schedule page. * Add `type: 'schedule'` to schedulePreview object. (And accidentally lint the file.)

* Fixed events becoming un-aligned due to the `is-today` highlight. * Adjusted default calendar colour for events. * Fixed schedule preview in week and day view. (We can't easily hide them without re-processing the entire list everytime they flip between month/week/day...)

* Hacky watch function that pokes Qalendar's internal api. * Style update, it now looks less ugly with button states working! * Removed some components which are no longer used (from the page the SFC are still there.)

MelissaAutumn · 2024-02-21T19:58:22Z

Latest screenshots:

Should be good for review. There's some edge cases I need to iron out (like date navigation on big calendar not affecting little calendar.) but it's good for general testing / review.

I kept our small calendar for now as there's a re-style coming eventually, so I don't want to do the work if it's going to be tossed.

Styling is a bit annoying, tailwind doesn't support css native nesting without a plugin and that plugin broke my build. So we'll just repeat the base selector for now 😅

We do poke at Qalendar's internal API to do external date updates, we should look at the things we need to change and plan work on a fork (that we can then upstream in the future without being blocked.)

MelissaAutumn · 2024-02-21T19:59:16Z

...also we should really do that frontend linting. Apologies for accidentally linting another file, I have it set to do it on-save now.

malini · 2024-02-21T20:46:15Z

frontend/src/components/CalendarQalendar.vue

+/**
+ * Calculate the minimum amount of time we want to display
+ * Qalendar only supports [15, 30, 60] as values.
+ * @type {ComputedRef<number>}


🙌 thanks for all the comprehensive commenting! makes this a lot easier to understand at a glance

Yeah I agree. Mel always does great commenting 💪🏻

You can all thank pycharm for auto adding the handy type or return information 😄

malini · 2024-02-22T17:47:46Z

frontend/src/components/ScheduleCreation.vue

@@ -332,6 +332,8 @@ const { t } = useI18n();
 const dj = inject('dayjs');
 const call = inject('call');
 const isoWeekdays = inject('isoWeekdays');
+const dateFormat = 'YYYY-MM-DD';


minor nit: could you export this date format as a const and use it instead of the hardcoded YYYY-MM-DD string (ex: https://github.com/thunderbird/appointment/pull/274/files#diff-28cc5c6b86b44e9e43a9a5731d8021e395af71bf9551377a76001158f9202d4aR132), just so we can avoid typos breaking things. Doesn't have to be in this patch, but it would be helpful in a follow-up patch

devmount

This looks really good so far, Thank you Mel! 👏🏻 Just a few more things I found when testing it out (we can make extra issues for them)

We currently only support dark mode right? The calendar keeps being dark when switching to light mode and mixes styles when switching to system mode.
I selected English in the settings, but the Qalendar keeps showing me German labels like on the month button and the more-events link
The mini calendar for date selection in Qalendar is not styled yet as well as the view toggle for week and day views
The event popup does appear now without a fading or moving effect we had before when moving the cursor between different events, which feels a bit less smooth
The day view has some issues showing the times when having overlapping events (or might be a feature rather than a bug 😅 )

Thanks again for your hard work on this!

devmount · 2024-02-22T22:48:17Z

frontend/src/components/CalendarQalendar.vue

+/**
+ * Calculate the minimum amount of time we want to display
+ * Qalendar only supports [15, 30, 60] as values.
+ * @type {ComputedRef<number>}


Yeah I agree. Mel always does great commenting 💪🏻

frontend/src/components/CalendarQalendar.vue

devmount · 2024-02-22T22:58:24Z

frontend/src/components/CalendarQalendar.vue

+          :disabled="false"
+          :placeholder="isBookingRoute"
+          :event="eventProps.eventData"
+          :popup-position="calendarMode === 'day' ? 'top' : 'right'"


This might need some more conditions, maybe as a computed property. E.g. having the calendar on the right site currently causes some ugly horizontal scrolling effect (at least on Firefox on Windows):

That's odd, I think I need to re-add an overflow hidden somewhere 😅. I'll play around with that!

I think we just need to calculate/give the value "left" here, when the calendar is aligned to the right side of the screen. Or even better, we throw that property away and calculate the popup position from the position of the triggering event to always appear inside the calendar area. But that should be another issue.

frontend/src/views/CalendarView.vue

frontend/src/views/ScheduleView.vue

MelissaAutumn · 2024-02-23T00:17:05Z

Oh I think they're pretty easy fixes, I'll throw in a commit tomorrow.

Dark mode is handled by css, but we can force it via: https://tomosterlund.github.io/qalendar/guide.html#dark-mode

I forgot to hook up the locale string on config: https://tomosterlund.github.io/qalendar/guide.html#basic-configuration-1

Co-authored-by: Andreas <[email protected]>

MelissaAutumn · 2024-02-23T17:41:17Z

Light/Dark mode should be fixed now (so should locale)

Turns out most of the issue was from my media query whoops. I switched to detecting tailwind's html class for dark mode adjustments, and added the appropriate style/class. I also removed a bunch of unused code, so let me know if things still work as normal.

* Added getPreferredTheme which returns either colorSchemes.light or colorSchemes.dark based on preference. * Added getLocale which returns ['de', 'en', null] depending on preference (or lack of.) * Cleared out a bunch of unused code. * Fixed light/dark mode issues with Qalendar integration. (I hope!) * Removed media query for dark mode check, rely on tailwind dark class. * Hooked up locale to Qalendar if specified. * Adjusted various free date formats to our handy-dandy enum.

devmount · 2024-02-26T15:46:34Z

FYI: Once this is merged, I'll take care of the frontend linting issues. To avoid merge conflicts, it might make sense to only create new branches after that is taken care of.

devmount

Yes, this looks much better now! Dark/light mode working now 👍🏻

MelissaAutumn · 2024-02-26T16:20:30Z

Thanks! I'm off today, but Ill merge this in, and we'll put it on stage tomorrow.

devmount · 2024-02-26T16:24:08Z

Keep your day off, Mel! We can do it all tomorrow 🙏🏻

MelissaAutumn added 3 commits February 16, 2024 10:20

Initial integration with CalendarView and BookingView.

bce1608

Start styling the individual slot components

45e6131

MelissaAutumn self-assigned this Feb 16, 2024

Revert package-lock.json commit

2aea4a7

devmount mentioned this pull request Feb 17, 2024

[DRAFT] Multi-booked event view #195

Closed

Additional work on styling and functionality.

7b48a2e

* Light mode now looks better. * Additional style fixes. * Initial work on dayboundary.

MelissaAutumn added 4 commits February 21, 2024 09:32

Additional work on Qalendar integration

17869a2

* Added support for schedule previews, and added qalendar to schedule page. * Add `type: 'schedule'` to schedulePreview object. (And accidentally lint the file.)

Style fixes:

32d8b74

* Fixed events becoming un-aligned due to the `is-today` highlight. * Adjusted default calendar colour for events. * Fixed schedule preview in week and day view. (We can't easily hide them without re-processing the entire list everytime they flip between month/week/day...)

Connect our date object with Qalendar

cbed818

* Hacky watch function that pokes Qalendar's internal api. * Style update, it now looks less ugly with button states working! * Removed some components which are no longer used (from the page the SFC are still there.)

Don't crash if we didn't pass currentDate

ca8d569

MelissaAutumn changed the title ~~[WIP] Qalendar Integration~~ Qalendar Integration Feb 21, 2024

MelissaAutumn requested a review from devmount February 21, 2024 19:58

MelissaAutumn and others added 2 commits February 21, 2024 12:00

Merge branch 'main' into features/272-qalendar

dfd73c0

Revert package-lock.json deletion

4092d55

malini reviewed Feb 21, 2024

View reviewed changes

Don't convert current-date to date object anymore.

2f65f72

MelissaAutumn force-pushed the features/272-qalendar branch from 90db4f3 to 2f65f72 Compare February 21, 2024 21:12

malini reviewed Feb 22, 2024

View reviewed changes

malini approved these changes Feb 22, 2024

View reviewed changes

🔨 fix postcss error (at least on my end)

dfdeddc

devmount approved these changes Feb 22, 2024

View reviewed changes

Apply suggestions from code review

0d238bb

Co-authored-by: Andreas <[email protected]>

🔨 fix tag name case

d635549

MelissaAutumn force-pushed the features/272-qalendar branch from 0d0dd53 to a136b0c Compare February 23, 2024 17:42

MelissaAutumn requested a review from devmount February 23, 2024 17:44

devmount approved these changes Feb 26, 2024

View reviewed changes

MelissaAutumn merged commit a257773 into main Feb 26, 2024
2 checks passed

MelissaAutumn deleted the features/272-qalendar branch February 26, 2024 16:24

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Qalendar Integration #274

Qalendar Integration #274

MelissaAutumn commented Feb 16, 2024

MelissaAutumn commented Feb 16, 2024

devmount commented Feb 19, 2024

MelissaAutumn commented Feb 21, 2024

MelissaAutumn commented Feb 21, 2024

MelissaAutumn commented Feb 21, 2024

MelissaAutumn commented Feb 21, 2024

malini Feb 21, 2024

devmount Feb 22, 2024

MelissaAutumn Feb 23, 2024

malini Feb 22, 2024

devmount left a comment

devmount Feb 22, 2024

devmount Feb 22, 2024

MelissaAutumn Feb 23, 2024

devmount Feb 23, 2024 •

edited

Loading

MelissaAutumn commented Feb 23, 2024

MelissaAutumn commented Feb 23, 2024

devmount commented Feb 26, 2024 •

edited

Loading

devmount left a comment

MelissaAutumn commented Feb 26, 2024

devmount commented Feb 26, 2024

Qalendar Integration #274

Qalendar Integration #274

Conversation

MelissaAutumn commented Feb 16, 2024

Calendar View

Month

Month (Mobile)

Week

Day

Day (Mobile)

Booking View

Month

Month (Mobile)

Week

Day

MelissaAutumn commented Feb 16, 2024

devmount commented Feb 19, 2024

MelissaAutumn commented Feb 21, 2024

MelissaAutumn commented Feb 21, 2024

MelissaAutumn commented Feb 21, 2024

MelissaAutumn commented Feb 21, 2024

malini Feb 21, 2024

Choose a reason for hiding this comment

devmount Feb 22, 2024

Choose a reason for hiding this comment

MelissaAutumn Feb 23, 2024

Choose a reason for hiding this comment

malini Feb 22, 2024

Choose a reason for hiding this comment

devmount left a comment

Choose a reason for hiding this comment

devmount Feb 22, 2024

Choose a reason for hiding this comment

devmount Feb 22, 2024

Choose a reason for hiding this comment

MelissaAutumn Feb 23, 2024

Choose a reason for hiding this comment

devmount Feb 23, 2024 • edited Loading

Choose a reason for hiding this comment

MelissaAutumn commented Feb 23, 2024

MelissaAutumn commented Feb 23, 2024

devmount commented Feb 26, 2024 • edited Loading

devmount left a comment

Choose a reason for hiding this comment

MelissaAutumn commented Feb 26, 2024

devmount commented Feb 26, 2024

devmount Feb 23, 2024 •

edited

Loading

devmount commented Feb 26, 2024 •

edited

Loading