➕ Add types to several

views

frontend/src/components/AppointmentCreatedModal.vue

@@ -1,3 +1,29 @@
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import ArtConfetti from '@/elements/arts/ArtConfetti.vue';
+import PrimaryButton from '@/elements/PrimaryButton.vue';
+import SecondaryButton from '@/elements/SecondaryButton.vue';
+
+// icons
+import { IconX } from '@tabler/icons-vue';
+
+// component constants
+const { t } = useI18n();
+
+// component properties
+interface Props {
+  open: boolean, // modal state
+  isSchedule: boolean, // confirmation is for a schedule instead of a common appointment
+  title: string, // title of created appointment
+  publicLink: string, // public link of created appointment for sharing
+};
+defineProps<Props>();
+
+// component emits
+const emit = defineEmits(['close']);
+</script>
+
 <template>
   <div
     v-if="open"
@@ -39,27 +65,3 @@
     </div>
   </div>
 </template>
-
-<script setup>
-import { useI18n } from 'vue-i18n';
-import ArtConfetti from '@/elements/arts/ArtConfetti';
-import PrimaryButton from '@/elements/PrimaryButton';
-import SecondaryButton from '@/elements/SecondaryButton';
-
-// icons
-import { IconX } from '@tabler/icons-vue';
-
-// component constants
-const { t } = useI18n();
-
-// component properties
-defineProps({
-  open: Boolean, // modal state
-  isSchedule: Boolean, // confirmation is for a schedule instead of a common appointment
-  title: String, // title of created appointment
-  publicLink: String, // public link of created appointment for sharing
-});
-
-// component emits
-const emit = defineEmits(['close']);
-</script>

frontend/src/components/ConfirmationModal.vue

@@ -1,3 +1,29 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import PrimaryButton from '@/elements/PrimaryButton.vue';
+import SecondaryButton from '@/elements/SecondaryButton.vue';
+import CautionButton from '@/elements/CautionButton.vue';
+
+// icons
+import { IconX } from '@tabler/icons-vue';
+
+const { t } = useI18n();
+
+// component properties
+interface Props {
+  open: boolean, // modal state
+  title: string,
+  message: string,
+  confirmLabel: string,
+  cancelLabel: string,
+  useCautionButton: boolean,
+};
+defineProps<Props>();
+
+// component emits
+const emit = defineEmits(['close', 'confirm', 'error']);
+</script>
+
 <template>
   <div
     v-if="open"
@@ -41,28 +67,3 @@
     </div>
   </div>
 </template>
-
-<script setup>
-import { useI18n } from 'vue-i18n';
-import PrimaryButton from '@/elements/PrimaryButton';
-import SecondaryButton from '@/elements/SecondaryButton';
-import CautionButton from '@/elements/CautionButton';
-
-// icons
-import { IconX } from '@tabler/icons-vue';
-
-const { t } = useI18n();
-
-// component properties
-defineProps({
-  open: Boolean, // modal state
-  title: String,
-  message: String,
-  confirmLabel: String,
-  cancelLabel: String,
-  useCautionButton: Boolean,
-});
-
-// component emits
-const emit = defineEmits(['close', 'confirm', 'error']);
-</script>

frontend/src/components/NavBar.vue

@@ -65,27 +65,29 @@
   </header>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { inject } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 import { useUserStore } from '@/stores/user-store';
-import UserAvatar from '@/elements/UserAvatar';
-import DropDown from '@/elements/DropDown';
-import NavBarItem from '@/elements/NavBarItem';
-import TextButton from '@/elements/TextButton';
+import { callKey } from '@/keys';
+import UserAvatar from '@/elements/UserAvatar.vue';
+import DropDown from '@/elements/DropDown.vue';
+import NavBarItem from '@/elements/NavBarItem.vue';
+import TextButton from '@/elements/TextButton.vue';
 
 // component constants
 const user = useUserStore();
 const route = useRoute();
 const router = useRouter();
 const { t } = useI18n();
-const call = inject('call');
+const call = inject(callKey);
 
 // component properties
-defineProps({
-  navItems: Array, // list of route names that are also lang keys (format: label.<key>), used as nav items
-});
+interface Props {
+  navItems: string[], // list of route names that are also lang keys (format: label.<key>), used as nav items
+};
+defineProps<Props>();
 
 // do log out
 const logout = async () => {

frontend/src/definitions.ts

@@ -154,6 +154,16 @@ export enum BookingsViewTypes {
   Grid = 2,
 };
 
+
+/**
+ * Type for event location.
+ * Corresponds to models.LocationType
+ */
+export enum EventLocationType {
+  InPerson = 1,
+  Online = 2,
+}
+
 /**
  * Settings page sections
  * @enum
@@ -291,12 +301,10 @@ export const tooltipPosition = {
 
 /**
  * This should match the enum in routes/waiting_list.py
- * @enum
- * @readonly
  */
-export const waitingListAction = {
-  confirm: 1,
-  leave: 2,
+export enum WaitingListAction {
+  Confirm = 1,
+  Leave = 2,
 };
 
 export default {
@@ -314,6 +322,7 @@ export default {
   ColorSchemes,
   dateFormatStrings,
   defaultSlotDuration,
+  EventLocationType,
   ftueStep,
   InviteStatus,
   locationTypes,
@@ -327,5 +336,5 @@ export default {
   tableDataButtonType,
   tableDataType,
   tooltipPosition,
-  waitingListAction,
+  WaitingListAction,
 };

frontend/src/models.ts

@@ -1,6 +1,6 @@
 import { Dayjs } from 'dayjs';
 import { UseFetchReturn } from '@vueuse/core';
-import { InviteStatus } from './definitions';
+import { InviteStatus, WaitingListAction, EventLocationType } from './definitions';
 
 export type Attendee = {
   id?: number;
@@ -83,6 +83,37 @@ export type CalendarEvent = {
   isCustom?: boolean;
 };
 
+/**
+ * Event location.
+ * Corresponds to schemas.EventLocation
+ */
+export type EventLocation = {
+  type: EventLocationType;
+  suggestions?: string;
+  selected?: string;
+  name?: string;
+  url?: string;
+  phone?: string;
+};
+
+/**
+ * Event from a remote calendar.
+ * Corresponds to schemas.Event
+ */
+export type RemoteEvent = {
+  title: string;
+  start: string;
+  end: string;
+  all_day?: boolean;
+  tentative?: boolean;
+  description?: string;
+  calendar_title?: string;
+  calendar_color?: string;
+  location?: EventLocation;
+  uuid?: string;
+  duration?: number;
+};
+
 export type EventPopup = {
   event?: CalendarEvent;
   display: string;
@@ -194,6 +225,11 @@ export type WaitingListEntry = {
   time_updated?: string;
 }
 
+export type WaitingListStatus = {
+  action: WaitingListAction;
+  success: boolean;
+}
+
 export type Signature = {
   url: string;
 };
@@ -224,6 +260,7 @@ export type ExternalConnectionCollectionResponse = UseFetchReturn<ExternalConnec
 export type Fetch = (url: string) => UseFetchReturn<any> & PromiseLike<UseFetchReturn<any>>;
 export type InviteListResponse = UseFetchReturn<Invite[]|Exception>;
 export type Refresh = () => Promise<void>;
+export type RemoteEventListResponse = UseFetchReturn<RemoteEvent[]>;
 export type ScheduleListResponse = UseFetchReturn<Schedule[]>;
 export type SignatureResponse = UseFetchReturn<Signature>;
 export type SlotResponse = UseFetchReturn<Slot|Exception>;
@@ -232,6 +269,7 @@ export type SubscriberListResponse = UseFetchReturn<Subscriber[]|Exception>;
 export type SubscriberResponse = UseFetchReturn<Subscriber>;
 export type TokenResponse = UseFetchReturn<Token>;
 export type WaitingListResponse = UseFetchReturn<WaitingListEntry[]|Exception>;
+export type WaitingListActionResponse = UseFetchReturn<WaitingListStatus>;
 
 // Utility types
 export type Time<T> = {