Components elements subdirectories TypeScript (#528)

* ➕ Add types for components elements subdirectories * 🔨 Fix merge conflicts * Catch up from main (#551) * Bake in the github short sha as the container's release version. (#531) * Bake in the github short sha as the container's release version. * changed github_sha syntax for consistency within the file --------- Co-authored-by: Jo <[email protected]> * Bugs/517 ftue qa (#532) * Don't overwrite app theme, just remove the dark class from html. * * Require one weekday to be selected * Adjust styling of notice bar * Dynamically show warnings on notice bar * Add missing chip * Remove hardcoded cert (#533) * converted ssl cert to a variable * update ssl cert in validate workflow * corrected ssl cert variable reference (#534) * added env variable declaration (#535) * Replace yarn with npm (#537) * Replace yarn with npm * Fix validation workflow * Oops, also swap yarn here. * Add package lock * Waiting List Admin Panel (Readonly) (#536) * Add initial waiting list admin panel. Read-only for now, with some filters. * Add tests * 🌐 Update German translation * Adjust script tag and remove console log --------- Co-authored-by: Andreas Müller <[email protected]> * added recursive flag to frontend zip command (#539) * Add another except for any OAuth2Errors (#540) * Schedule booking confirmation (#519) * ➕ Add schedule booking confirmation * ➕ Enhance schedule API to handle bookings without confirmation * 🔨 Show proper success message depending on confirmation status * 🔨 Make field nullable and fix fn return * 🌐 Update frontend/src/locales/en.json Co-authored-by: Mel <[email protected]> * 🌐 Update German translation * 🔨 Assume appointment mustn't be null --------- Co-authored-by: Mel <[email protected]> * Add types for utils (#520) * Configuration to fix HMR (#527) * ➕ Add configuration to fix HMR * 🔨 Make polling optional by env var * 🔨 Fix merge config * 🔨 Only use necessary options * Update English heading cases (#548) * Use server_default for migrations, and fix a logic error from my suggestion (#549) --------- Co-authored-by: Mel <[email protected]> Co-authored-by: Jo <[email protected]> * ➕ Add types to calendar elements * 🔨 Fix type errors * 🔨 Rename type --------- Co-authored-by: Mel <[email protected]> Co-authored-by: Jo <[email protected]>
thunderbird · Jul 17, 2024 · 78e1683 · 78e1683
1 parent 0d941f8
commit 78e1683
Show file tree

Hide file tree

Showing 17 changed files with 230 additions and 198 deletions.
diff --git a/frontend/src/components/CalendarMiniMonth.vue b/frontend/src/components/CalendarMiniMonth.vue
@@ -30,7 +30,7 @@
         :is-selected="d.date === date"
         :is-today="d.date === today"
         :placeholder="placeholder"
-        :events="eventsByDate(d.date)"
+        :has-events="!!eventsByDate(d.date).length"
         :show-details="!placeholder"
         :popup-position="popupPosition"
         :disabled="dateDisabled(d.date)"
@@ -127,7 +127,7 @@ const eventsByDate = (d) => {
             || e.preview,
       );
   }
-  return null;
+  return [];
 };
 const eventSelected = (d) => {
   emit('eventSelected', d);

diff --git a/frontend/src/components/CalendarQalendar.vue b/frontend/src/components/CalendarQalendar.vue
@@ -179,7 +179,7 @@ const applyTimezone = (d) => dj(d).utc().tz(dj.tz.guess());
 
 /**
  * Generates a list of Qalendar friendly event objects from events and appointments props.
- * @type {ComputedRef<*[]>}
+ * @type {ComputedRef<CalendarEvent[]>}
  */
 const calendarEvents = computed(() => {
   const evts = events?.value?.map((event) => {
@@ -259,7 +259,7 @@ const calendarEvents = computed(() => {
 
 /**
  * Calculate the start and end times, and then space them our by 2 hours for style!
- * @type {ComputedRef<{start, end}>}
+ * @type {ComputedRef<TimeNumeric>}
  */
 const dayBoundary = computed(() => {
   if (calendarEvents?.value.length === 0) {

diff --git a/frontend/src/elements/admin/AdminNav.vue b/frontend/src/elements/admin/AdminNav.vue
@@ -1,17 +1,4 @@
-<template>
-  <div class="mb-4 flex h-12 justify-center gap-8">
-    <nav-bar-item
-      v-for="item in navItems"
-      :key="item"
-      :active="route.name == item"
-      :label="t(`label.${item}`)"
-      :link-name="item"
-    />
-  </div>
-</template>
-
-<script setup>
-
+<script setup lang="ts">
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import NavBarItem from '@/elements/NavBarItem.vue';
@@ -26,3 +13,15 @@ const navItems = [
 
 const route = useRoute();
 </script>
+
+<template>
+  <div class="mb-4 flex h-12 justify-center gap-8">
+    <nav-bar-item
+      v-for="item in navItems"
+      :key="item"
+      :active="route.name == item"
+      :label="t(`label.${item}`)"
+      :link-name="item"
+    />
+  </div>
+</template>
diff --git a/frontend/src/elements/arts/ArtConfetti.vue b/frontend/src/elements/arts/ArtConfetti.vue
@@ -1,5 +1,6 @@
+<script setup lang="ts"></script>
+
 <template>
+  <!-- Pending new illustration -->
   <div class="w-full text-center text-[10rem]">🎉</div>
 </template>
-
-<script setup></script>
diff --git a/frontend/src/elements/arts/ArtInvalidLink.vue b/frontend/src/elements/arts/ArtInvalidLink.vue
@@ -1,6 +1,6 @@
+<script setup lang="ts"></script>
+
 <template>
   <!-- Pending new illustration -->
   <div class="w-full text-center text-[10rem]">⛔</div>
 </template>
-
-<script setup></script>
diff --git a/frontend/src/elements/arts/ArtLeave.vue b/frontend/src/elements/arts/ArtLeave.vue
@@ -1,6 +1,6 @@
+<script setup lang="ts"></script>
+
 <template>
   <!-- Pending new illustration -->
   <div class="w-full text-center text-[10rem]">👋</div>
 </template>
-
-<script setup></script>
diff --git a/frontend/src/elements/arts/ArtSuccessfulBooking.vue b/frontend/src/elements/arts/ArtSuccessfulBooking.vue
@@ -1,6 +1,6 @@
+<script setup lang="ts"></script>
+
 <template>
   <!-- Pending new illustration -->
   <div class="w-full text-center text-[10rem]">🎉</div>
 </template>
-
-<script setup></script>
diff --git a/frontend/src/elements/calendar/CalendarEvent.vue b/frontend/src/elements/calendar/CalendarEvent.vue
@@ -1,7 +1,59 @@
+<script setup lang="ts">
+import { bookingStatus } from '@/definitions';
+import { computed, inject, ref, toRefs } from 'vue';
+import { timeFormat, initialEventPopupData, showEventPopup } from '@/utils';
+import CalendarEventPlaceholder from '@/elements/calendar/CalendarEventPlaceholder.vue';
+import CalendarEventPreview from '@/elements/calendar/CalendarEventPreview.vue';
+import CalendarEventRemote from '@/elements/calendar/CalendarEventRemote.vue';
+import CalendarEventScheduled from '@/elements/calendar/CalendarEventScheduled.vue';
+import EventPopup from '@/elements/EventPopup.vue';
+import { CalendarEvent } from "@/models";
+import { dayjsKey } from "@/keys";
+
+const dj = inject(dayjsKey);
+
+// component properties
+interface Props {
+  day?: string; // number of day in its month
+  isSelected: boolean; // flag showing if the event is currently selected by user
+  placeholder: boolean; // flag formating events as placeholder
+  monthView: boolean; // flag, are we in month view?
+  event: CalendarEvent; // the event to show
+  showDetails: boolean; // flag enabling event popups with details
+  popupPosition?: string; // currently supported: right, left, top
+  disabled: boolean; // flag making this day non-selectable and inactive
+  timeSlotDuration?: number; // minimum time shown: [15, 30, 60]
+  timeSlotHeight?: number; // height in pixels of each minimum time instance.
+}
+const props = defineProps<Props>();
+
+const { event, timeSlotDuration, timeSlotHeight } = toRefs(props);
+
+const eventData = event.value.customData;
+const elementHeight = computed(() => (eventData.duration / timeSlotDuration.value) * timeSlotHeight.value);
+const isBusy = computed(() => eventData.slot_status === bookingStatus.booked);
+
+// component emits
+const emit = defineEmits(['eventSelected']);
+
+// event details
+const popup = ref({ ...initialEventPopupData });
+const resetPopup = () => {
+  popup.value = { ...initialEventPopupData };
+};
+
+// formatted time range
+const formattedTimeRange = (eventObj: CalendarEvent) => {
+  const start = dj(eventObj.time.start);
+  const end = dj(eventObj.time.end);
+  return `${start.format(timeFormat())} - ${end.format(timeFormat())}`;
+};
+</script>
+
 <template>
   <div
     :class="{ 'cursor-not-allowed text-gray-400': disabled, 'h-full': !monthView }"
-    @mouseleave="popup = {...initialEventPopupData}"
+    @mouseleave="resetPopup"
   >
     <div
       class="flex flex-col gap-1.5 overflow-y-auto"
@@ -22,7 +74,7 @@
       <calendar-event-remote
         v-else-if="eventData.remote"
         :is-month-view="monthView"
-        :event="eventData"
+        :event-data="eventData"
         :label="event.title"
         @mouseenter="element => showDetails ? popup=showEventPopup(element, event, popupPosition) : null"
       />
@@ -31,7 +83,7 @@
       <calendar-event-preview
         v-else-if="eventData.preview"
         :is-month-view="monthView"
-        :event="eventData"
+        :event-data="eventData"
         :label="formattedTimeRange(event)"
         @mouseenter="element => showDetails ? popup=showEventPopup(element, event, popupPosition) : null"
       />
@@ -40,7 +92,7 @@
       <calendar-event-scheduled
         v-else
         :is-month-view="monthView"
-        :event="eventData"
+        :event-data="eventData"
         :label="event.title"
         @mouseenter="element => showDetails ? popup=showEventPopup(element, event, popupPosition) : null"
       />
@@ -59,52 +111,3 @@
     />
   </div>
 </template>
-
-<script setup>
-import { bookingStatus } from '@/definitions';
-import {
-  computed, inject, ref, toRefs,
-} from 'vue';
-import { timeFormat, initialEventPopupData, showEventPopup } from '@/utils';
-import CalendarEventPlaceholder from '@/elements/calendar/CalendarEventPlaceholder';
-import CalendarEventPreview from '@/elements/calendar/CalendarEventPreview';
-import CalendarEventRemote from '@/elements/calendar/CalendarEventRemote';
-import CalendarEventScheduled from '@/elements/calendar/CalendarEventScheduled';
-import EventPopup from '@/elements/EventPopup';
-import { dayjsKey } from "@/keys";
-
-const dj = inject(dayjsKey);
-
-// component properties
-const props = defineProps({
-  day: String, // number of day in its month
-  isSelected: Boolean, // flag showing if the event is currently selected by user
-  placeholder: Boolean, // flag formating events as placeholder
-  monthView: Boolean, // flag, are we in month view?
-  event: Object, // the event to show
-  showDetails: Boolean, // flag enabling event popups with details
-  popupPosition: String, // currently supported: right, left, top
-  disabled: Boolean, // flag making this day non-selectable and inactive
-  timeSlotDuration: Number, // minimum time shown: [15, 30, 60]
-  timeSlotHeight: Number, // height in pixels of each minimum time instance.
-});
-
-const { event, timeSlotDuration, timeSlotHeight } = toRefs(props);
-
-const eventData = event.value.customData;
-const elementHeight = computed(() => (eventData.duration / timeSlotDuration.value) * timeSlotHeight.value);
-const isBusy = computed(() => eventData.slot_status === bookingStatus.booked);
-
-// component emits
-const emit = defineEmits(['eventSelected']);
-
-// event details
-const popup = ref({ ...initialEventPopupData });
-
-// formatted time range
-const formattedTimeRange = (eventObj) => {
-  const start = dj(eventObj.time.start);
-  const end = dj(eventObj.time.end);
-  return `${start.format(timeFormat())} - ${end.format(timeFormat())}`;
-};
-</script>
diff --git a/frontend/src/elements/calendar/CalendarEventPlaceholder.vue b/frontend/src/elements/calendar/CalendarEventPlaceholder.vue
@@ -1,3 +1,19 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+// component properties
+interface Props {
+  isBusy: boolean, // flag showing this event as busy and non-selectable
+  isSelected: boolean, // flag showing if the event is currently selected by user
+  isMonthView: boolean, // flag, are we in month view?
+  label: string, // event title
+};
+defineProps<Props>();
+
+</script>
+
 <template>
   <div
     class="m-auto size-[95%] shrink-0 text-sm text-gray-700 hover:shadow-md dark:text-gray-200"
@@ -25,18 +41,3 @@
     </div>
   </div>
 </template>
-
-<script setup>
-import { useI18n } from 'vue-i18n';
-
-const { t } = useI18n();
-
-// component properties
-defineProps({
-  isBusy: Boolean, // flag showing this event as busy and non-selectable
-  isSelected: Boolean, // flag showing if the event is currently selected by user
-  isMonthView: Boolean, // flag, are we in month view?
-  label: String, // event title
-});
-
-</script>
diff --git a/frontend/src/elements/calendar/CalendarEventPreview.vue b/frontend/src/elements/calendar/CalendarEventPreview.vue
@@ -1,3 +1,17 @@
+<script setup lang="ts">
+import { eventColor, getAccessibleColor } from '@/utils';
+import { CustomEventData } from "@/models";
+
+// component properties
+interface Props {
+  isMonthView: boolean, // flag, are we in month view?
+  eventData: CustomEventData, // the event data to show
+  label: string, // event title
+};
+defineProps<Props>();
+
+</script>
+
 <template>
   <div
     class="
@@ -6,9 +20,9 @@
     "
     :class="{ 'h-full': !isMonthView }"
     :style="{
-      borderColor: eventColor(event, false).border,
-      backgroundColor: isMonthView ? eventColor(event, false).background : event.calendar_color,
-      color: !isMonthView ? getAccessibleColor(event.calendar_color) : null,
+      borderColor: eventColor(eventData, false).border,
+      backgroundColor: isMonthView ? eventColor(eventData, false).background : eventData.calendar_color,
+      color: !isMonthView ? getAccessibleColor(eventData.calendar_color) : null,
     }"
   >
     <div class="grid">
@@ -18,13 +32,3 @@
     </div>
   </div>
 </template>
-<script setup>
-import { eventColor, getAccessibleColor } from '@/utils';
-
-// component properties
-defineProps({
-  isMonthView: Boolean, // flag, are we in month view?
-  event: Object, // the event to show
-  label: String, // event title
-});
-</script>