From 6ebbcb733362872a7906a795c3a52b8c11c837d3 Mon Sep 17 00:00:00 2001 From: Andreas Date: Tue, 3 Sep 2024 17:04:15 +0200 Subject: [PATCH] FTUE TypeScript (#619) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * ➕ Add types for FTUE view * ➕ Add types for FTUE components * ➕ Add types for tbpro icons * ➕ Add types for tbpro elements * 🔨 Fix several type errors across the code base * 🔨 Fix optional props type errors * 🔨 Fix section order * ➕ Refactor constants and add durations constant --- frontend/src/components/CalendarQalendar.vue | 22 +- frontend/src/components/DataTable.vue | 206 +++++++++--------- .../src/components/FTUE/ConnectCalendars.vue | 87 ++++---- frontend/src/components/FTUE/ConnectVideo.vue | 28 +-- frontend/src/components/FTUE/Finish.vue | 15 +- .../src/components/FTUE/GooglePermissions.vue | 13 +- frontend/src/components/FTUE/SetupProfile.vue | 32 ++- .../src/components/FTUE/SetupSchedule.vue | 145 ++++++------ frontend/src/components/ScheduleCreation.vue | 7 +- frontend/src/components/SettingsCalendar.vue | 10 +- .../bookingView/BookingViewSlotSelection.vue | 2 +- frontend/src/definitions.ts | 83 +++---- frontend/src/elements/BubbleSelect.vue | 8 +- frontend/src/models.ts | 20 +- frontend/src/stores/ftue-store.ts | 57 +++-- frontend/src/tbpro/elements/BaseButton.vue | 39 ++-- frontend/src/tbpro/elements/LinkButton.vue | 7 +- frontend/src/tbpro/elements/NoticeBar.vue | 16 +- frontend/src/tbpro/elements/PrimaryButton.vue | 7 +- .../src/tbpro/elements/SecondaryButton.vue | 7 +- frontend/src/tbpro/elements/SelectInput.vue | 33 +-- frontend/src/tbpro/elements/SyncCard.vue | 48 ++-- frontend/src/tbpro/elements/TextInput.vue | 49 ++--- frontend/src/tbpro/elements/ToolTip.vue | 28 +-- .../src/tbpro/icons/NoticeCriticalIcon.vue | 2 +- frontend/src/tbpro/icons/NoticeInfoIcon.vue | 2 +- .../src/tbpro/icons/NoticeSuccessIcon.vue | 2 +- .../src/tbpro/icons/NoticeWarningIcon.vue | 2 +- .../src/views/FirstTimeUserExperienceView.vue | 33 +-- frontend/src/views/PostLoginView.vue | 6 +- .../src/views/admin/WaitingListPanelView.vue | 15 +- .../src/views/errors/NotAuthenticatedView.vue | 4 +- frontend/tsconfig.json | 2 +- 33 files changed, 516 insertions(+), 521 deletions(-) diff --git a/frontend/src/components/CalendarQalendar.vue b/frontend/src/components/CalendarQalendar.vue index 15c22a129..3a5d7177a 100644 --- a/frontend/src/components/CalendarQalendar.vue +++ b/frontend/src/components/CalendarQalendar.vue @@ -7,8 +7,8 @@ import 'qalendar/dist/style.css'; import CalendarEvent from '@/elements/calendar/CalendarEvent.vue'; import { ColorSchemes, - dateFormatStrings, - defaultSlotDuration, + DateFormatStrings, + DEFAULT_SLOT_DURATION, } from '@/definitions'; import { getLocale, getPreferredTheme, timeFormat } from '@/utils'; import { useRoute, useRouter } from 'vue-router'; @@ -76,7 +76,7 @@ const emit = defineEmits(['daySelected', 'eventSelected', 'dateChange']); const timeSlotDuration = computed(() => { // Duration on slots are fixed, so grab the first one. // This is the same data on schedule.slot_duration, but we never actually pull that info down to the frontend. - const duration = fixedDuration.value ?? defaultSlotDuration; + const duration = fixedDuration.value ?? DEFAULT_SLOT_DURATION; if (duration <= 15) { return qalendarSlotDurations['15']; } @@ -92,7 +92,7 @@ const timeSlotDuration = computed(() => { * @type {ComputedRef} */ const timeSlotHeight = computed(() => { - const duration = fixedDuration.value ?? defaultSlotDuration; + const duration = fixedDuration.value ?? DEFAULT_SLOT_DURATION; if (duration >= 15) { return 40; } @@ -208,11 +208,11 @@ const calendarEvents = computed(() => { colorScheme: processCalendarColorScheme(event.calendar_title, event.calendar_color), time: { start: event.all_day - ? start.format(dateFormatStrings.qalendarFullDay) - : start.format(dateFormatStrings.qalendar), + ? start.format(DateFormatStrings.QalendarFullDay) + : start.format(DateFormatStrings.Qalendar), end: event.all_day - ? end.subtract(1, 'minute').format(dateFormatStrings.qalendarFullDay) - : end.format(dateFormatStrings.qalendar), + ? end.subtract(1, 'minute').format(DateFormatStrings.QalendarFullDay) + : end.format(DateFormatStrings.Qalendar), }, description: event.description, customData: { @@ -240,7 +240,7 @@ const calendarEvents = computed(() => { const end = start.add(slot.duration, 'minutes'); return { - id: appointment.id ?? start.format(dateFormatStrings.qalendar), + id: appointment.id ?? start.format(DateFormatStrings.Qalendar), title: !isBookingRoute.value ? appointment.title : `${start.format(displayFormat)} - ${end.format(displayFormat)}`, @@ -249,8 +249,8 @@ const calendarEvents = computed(() => { appointment?.calendar_color ?? 'rgb(20, 184, 166)', ), time: { - start: start.format(dateFormatStrings.qalendar), - end: end.format(dateFormatStrings.qalendar), + start: start.format(DateFormatStrings.Qalendar), + end: end.format(DateFormatStrings.Qalendar), }, description: appointment.details, with: slot.attendee ? [slot.attendee].map((attendee) => `${attendee.name} <${attendee.email}>`).join(', ') : '', diff --git a/frontend/src/components/DataTable.vue b/frontend/src/components/DataTable.vue index 79bcde2c9..85252ce97 100644 --- a/frontend/src/components/DataTable.vue +++ b/frontend/src/components/DataTable.vue @@ -1,106 +1,3 @@ - - + + diff --git a/frontend/src/components/FTUE/ConnectCalendars.vue b/frontend/src/components/FTUE/ConnectCalendars.vue index 8bbc3100a..290a05463 100644 --- a/frontend/src/components/FTUE/ConnectCalendars.vue +++ b/frontend/src/components/FTUE/ConnectCalendars.vue @@ -1,52 +1,20 @@ - - - + + + diff --git a/frontend/src/tbpro/elements/TextInput.vue b/frontend/src/tbpro/elements/TextInput.vue index 547e01364..64618cd76 100644 --- a/frontend/src/tbpro/elements/TextInput.vue +++ b/frontend/src/tbpro/elements/TextInput.vue @@ -1,7 +1,8 @@ -