Calendar, contact, home, profile and settings page TypeScript (#604)

* ➕ Add types to several views * ➕ Add types to settings components * 🔨 Fix section order * ➕ Add types to settings view * Update frontend/src/components/SettingsGeneral.vue Co-authored-by: Mel <[email protected]> --------- Co-authored-by: Mel <[email protected]>
thunderbird · Aug 7, 2024 · 8a747d3 · 8a747d3
1 parent 66888fd
commit 8a747d3
Show file tree

Hide file tree

Showing 21 changed files with 1,059 additions and 971 deletions.
diff --git a/frontend/src/components/AppointmentCreatedModal.vue b/frontend/src/components/AppointmentCreatedModal.vue
@@ -1,3 +1,28 @@
+<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 +64,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>
diff --git a/frontend/src/components/CalendarManagement.vue b/frontend/src/components/CalendarManagement.vue
@@ -1,7 +1,36 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import {
+  IconArrowRight, IconCalendar, IconPencil, IconX, IconRefresh,
+} from '@tabler/icons-vue';
+import { useI18n } from 'vue-i18n';
+import { CalendarManagementType } from '@/definitions';
+import { Calendar } from '@/models';
+import SecondaryButton from '@/elements/SecondaryButton.vue';
+
+const { t } = useI18n({ useScope: 'global' });
+const emit = defineEmits(['modify', 'remove', 'sync']);
+
+// component properties
+interface Props {
+  calendars: Calendar[], // List of calendars to display
+  title: String,
+  type: CalendarManagementType,
+  loading: boolean,
+};
+const props = defineProps<Props>();
+
+// Filter by connected or not connected depending on the list type
+const filteredCalendars = computed(() => props.calendars.filter((calendar: Calendar) => (
+  props.type === CalendarManagementType.Edit ? calendar.connected : !calendar.connected
+)));
+
+</script>
+
 <template>
   <div class="flex max-w-2xl">
     <div class="text-xl">{{ title }}</div>
-    <div class="mx-auto mr-0 inline-flex" v-if="type === calendarManagementType.connect">
+    <div class="mx-auto mr-0 inline-flex" v-if="type === CalendarManagementType.Connect">
       <secondary-button
         class="btn-sync text-sm !text-teal-500 disabled:scale-100 disabled:opacity-50 disabled:shadow-none"
         :disabled="loading"
@@ -24,7 +53,7 @@
       {{ cal.title }}
       </span>
       <button
-        v-if="type === calendarManagementType.connect"
+        v-if="type === CalendarManagementType.Connect"
         @click="emit('modify', cal.id)"
         :disabled="loading"
         class="
@@ -37,7 +66,7 @@
         {{ t('label.connectCalendar') }}
       </button>
       <button
-        v-if="type === calendarManagementType.edit"
+        v-if="type === CalendarManagementType.Edit"
         @click="emit('modify', cal.id)"
         :disabled="loading"
         class="
@@ -61,33 +90,3 @@
     </div>
   </div>
 </template>
-
-<script setup>
-import { calendarManagementType } from '@/definitions';
-import { computed } from 'vue';
-import {
-  IconArrowRight, IconCalendar, IconPencil, IconX, IconRefresh,
-} from '@tabler/icons-vue';
-import { useI18n } from 'vue-i18n';
-import SecondaryButton from '@/elements/SecondaryButton';
-
-const { t } = useI18n({ useScope: 'global' });
-const emit = defineEmits(['modify', 'remove', 'sync']);
-
-const props = defineProps({
-  calendars: Array, // List of calendars to display
-  title: String,
-  type: {
-    validator(value) {
-      return Object.values(calendarManagementType).includes(value);
-    },
-  },
-  loading: Boolean,
-});
-
-// Filter by connected or not connected depending on the list type
-const filteredCalendars = computed(() => props.calendars.filter((calendar) => (
-  props.type === calendarManagementType.edit ? calendar.connected : !calendar.connected
-)));
-
-</script>
diff --git a/frontend/src/components/ConfirmationModal.vue b/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>
diff --git a/frontend/src/components/FTUE/GooglePermissions.vue b/frontend/src/components/FTUE/GooglePermissions.vue
@@ -11,6 +11,7 @@ import { storeToRefs } from 'pinia';
 import { useRoute, useRouter } from 'vue-router';
 import { useExternalConnectionsStore } from '@/stores/external-connections-store';
 import { callKey } from '@/keys';
+import { ExternalConnectionProviders } from '@/definitions';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -42,7 +43,9 @@ onMounted(async () => {
       errorMessage.value = t('error.externalAccountHasNoCalendars', { external: 'Google' });
 
       // Also remove the google calendar
-      if (externalConnectionStore.google.length > 0) await externalConnectionStore.disconnect(call, 'google');
+      if (externalConnectionStore.google.length > 0) {
+        await externalConnectionStore.disconnect(call, ExternalConnectionProviders.Google);
+      }
     } else {
       errorMessage.value = route.query.error;
     }
@@ -74,6 +77,7 @@ const onSubmit = async () => {
 };
 
 </script>
+
 <template>
   <div class="content">
     <div class="card">
@@ -126,6 +130,7 @@ const onSubmit = async () => {
     </secondary-button>
   </div>
 </template>
+
 <style scoped>
 @import '@/assets/styles/custom-media.pcss';
 

diff --git a/frontend/src/components/NavBar.vue b/frontend/src/components/NavBar.vue
@@ -1,3 +1,34 @@
+<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 { 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(callKey);
+
+// component properties
+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 () => {
+  await user.logout(call);
+  await router.push('/');
+};
+</script>
+
 <template>
   <header
     class="
@@ -64,32 +95,3 @@
     </nav>
   </header>
 </template>
-
-<script setup>
-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';
-
-// component constants
-const user = useUserStore();
-const route = useRoute();
-const router = useRouter();
-const { t } = useI18n();
-const call = inject('call');
-
-// component properties
-defineProps({
-  navItems: Array, // list of route names that are also lang keys (format: label.<key>), used as nav items
-});
-
-// do log out
-const logout = async () => {
-  await user.logout(call);
-  await router.push('/');
-};
-</script>