Merge branch 'main' of github.com:quintet-sdr/elect-gen-frontend

package.json

@@ -21,8 +21,11 @@
     "@nuxtjs/tailwindcss": "^6.12.0",
     "@pinia/nuxt": "^0.5.1",
     "@vueuse/head": "^2.0.0",
+    "black": "^0.3.0",
     "mathjs": "^13.0.0",
     "nuxt": "^3.12.2",
+    "pre-commit": "^1.2.2",
+    "pre-commit-hooks": "^0.9.22",
     "vue": "^3.4.29",
     "vue-router": "^4.3.3"
   },

pages/description.vue

@@ -16,7 +16,7 @@ useHead({
       <div
         class="placeholder-p-4 bg-color-lightgray text-color-darkblue placeholder-color-gray w-full overflow-y-scroll rounded-3xl px-4 py-4 tablet:h-full laptop:h-80"
       >
-        <!-- an example -->
+        <!-- an example  f-->
         <p>
           This course aims to provide students with an introduction to the essential principles of
           contemporary front-end web development, alongside a brief overview of its historical

pages/form.vue

@@ -5,10 +5,15 @@ import type { Course, CourseGroup } from '~/server/utils/schemas'
 
 definePageMeta({ layout: false })
 
+useHead({
+  title: 'Select Electives - Elect.Gen',
+  meta: [{ name: 'description', content: 'Fill out the form with your five priorities.' }]
+})
+
 const NUM_OF_COURSES: number = 5
 
-async function getSortedCourses(): Promise<void> {
-  sortedCourses.value = (await api.getCourses(currentElectiveType.value))?.sort((a, b) =>
+async function setSortedCourses(elective: 'tech' | 'hum'): Promise<void> {
+  sortedCourses.value = (await api.getCourses(elective))?.sort((a, b) =>
     a.short_name.localeCompare(b.short_name)
   )
 }
@@ -75,24 +80,14 @@ const items = [
 const route = useRoute()
 const router = useRouter()
 
-function selectTab(value: number): void {
-  router.replace({
-    query: { type: items[value].type }
-  })
-
-  for (let i = 0; i < NUM_OF_COURSES; i += 1) {
-    selected.value[i] = undefined
-  }
-}
-
 const selectedTab = computed({
   get() {
     const index = items.findIndex((item) => item.type === route.query.type)
     if (index === -1) {
       return 0
     }
 
-    ;(async () => await getSortedCourses())()
+    ;(async () => await setSortedCourses(route.query.type as 'tech' | 'hum'))()
 
     return index
   },
@@ -153,18 +148,29 @@ async function submit(): Promise<void> {
   )
 }
 
-// FIXME
-const x = await api.coursesGroups(currentElectiveType.value)
-const courseGroups = ref(x !== undefined ? x.sort((a, b) => a.localeCompare(b)) : undefined)
+const courseGroupsRaw = ref<CourseGroup[]>()
+const courseGroupsSorted = computed(() =>
+  courseGroupsRaw !== undefined
+    ? courseGroupsRaw.value?.sort((a, b) => a.localeCompare(b))
+    : undefined
+)
 
 const selectedGroup = ref<CourseGroup>()
 
-onMounted(() => selectTab(0))
+function selectTab(value: number): void {
+  router.replace({
+    query: { type: items[value].type }
+  })
 
-useHead({
-  title: 'Select Electives - Elect.Gen',
-  meta: [{ name: 'description', content: 'Fill out the form with your five priorities.' }]
-})
+  for (let i = 0; i < NUM_OF_COURSES; i += 1) {
+    selected.value[i] = undefined
+  }
+
+  ;(async () =>
+    (courseGroupsRaw.value = await api.coursesGroups(items[value].type as 'hum' | 'tech')))()
+}
+
+onMounted(() => selectTab(0))
 </script>
 
 <template>
@@ -211,7 +217,7 @@ useHead({
       <UFormGroup class="w-48 self-start" label="Course groups" required>
         <USelectMenu
           v-model="selectedGroup"
-          :options="courseGroups"
+          :options="courseGroupsSorted"
           placeholder="Group…"
           searchable
         />