feat: implement internship creation interface on frontend

frontend/app/components/InternshipEditor.vue

@@ -90,11 +90,22 @@ function triggerSubmit() {
         year_of_study: form.value.year_of_study,
         semester: form.value.semester === "Zimný" ? "WINTER" : "SUMMER",
         position_description: form.value.description
-    }
+    };
 
     props.submit(new_internship);
 }
 
+function companyListProps(company: CompanyData) {
+    return {
+        title: company.name,
+        subtitle: `IČO: ${company.ico}, Zodpovedný: ${company.contact.name}, ${!company.hiring ? "ne" : ""}prijímajú nových študentov`
+    };
+}
+
+function yearOfStudyValueHandler(item: { title: string, subtitle: string }) {
+    return parseInt(item.title) || 0;
+}
+
 const { data, error } = await useSanctumFetch<CompanyData[]>('/api/companies/simple');
 </script>
 
@@ -105,16 +116,25 @@ const { data, error } = await useSanctumFetch<CompanyData[]>('/api/companies/sim
 
         <v-select v-model="form.year_of_study" clearable label="Ročník" :items="year_of_study_choices"
             :item-props="(item) => { return { title: item.title, subtitle: item.subtitle } }"
-            :rules="[rules.required]"></v-select>
+            :item-value="yearOfStudyValueHandler" :rules="[rules.required]"></v-select>
 
         <v-select v-model="form.semester" clearable label="Semester" :items="['Zimný', 'Letný']"
             :rules="[rules.required]"></v-select>
 
-        <v-select v-model="form.company_id" clearable label="Firma" :items="[{ title: 'a', subtitle: 'b', value: 0 }]"
+        <!-- Výber firmy -->
-            :item-props="(item) => { return { title: item.title, subtitle: item.subtitle } }"
-            :rules="[rules.required]"></v-select>
 
-        <v-textarea clearable label="Popis práce" :rules="[rules.required]"></v-textarea>
+        <!-- Čakajúca hláška -->
+        <v-alert v-if="!data && !error" density="compact" text="Prosím čakajte..." title="Spracovávam" type="info"
+            id="data-error-alert" class="mx-auto alert"></v-alert>
+
+        <!-- Chybová hláška -->
+        <v-alert v-else-if="error" density="compact" :text="error.message" title="Chyba" type="error"
+            id="data-error-alert" class="mx-auto alert"></v-alert>
+
+        <v-select v-else v-model="form.company_id" clearable label="Firma" :items="data" :item-props="companyListProps"
+            item-value="id" :rules="[rules.required]"></v-select>
+
+        <v-textarea v-model="form.description" clearable label="Popis práce" :rules="[rules.required]"></v-textarea>
 
         <v-checkbox v-model="form.consent" :rules="[rules.mustAgree]" label="Potvrdzujem, že zadané údaje sú pravdivé"
             density="comfortable" />
@@ -130,4 +150,8 @@ form {
     width: 80%;
     margin: 0 auto;
 }
+
+.alert {
+    margin-bottom: 10px;
+}
 </style>

frontend/app/pages/dashboard/student/internship/create.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { User } from '~/types/user';
+import type { NewInternship } from '~/types/internships';
 
 definePageMeta({
     middleware: ['sanctum:auth', 'student-only'],
@@ -12,7 +12,25 @@ useSeoMeta({
     ogDescription: "Vytvorenie praxe",
 });
 
-const user = useSanctumUser<User>();
+const loading = ref(false);
+const error = ref(null as null | string);
+
+const client = useSanctumClient();
+
+async function handleInternshipRegistration(internship: NewInternship) {
+    try {
+        await client("/api/internships/new", {
+            method: 'PUT',
+            body: internship
+        });
+
+        navigateTo("/dashboard/student")
+    } catch (e: any) {
+        error.value = e.data?.message as string;
+    } finally {
+        loading.value = false;
+    }
+}
 </script>
 
 <template>
@@ -22,7 +40,15 @@ const user = useSanctumUser<User>();
 
             <br />
 
-            <InternshipEditor :submit="(form: any) => console.log(form)" />
+            <!-- Čakajúca hláška -->
+            <v-alert v-show="loading" density="compact" text="Prosím čakajte..." title="Spracovávam" type="info"
+                id="data-error-alert" class="mx-auto alert"></v-alert>
+
+            <!-- Chybová hláška -->
+            <v-alert v-if="error" density="compact" :text="error" title="Chyba" type="error" id="data-error-alert"
+                class="mx-auto alert"></v-alert>
+
+            <InternshipEditor v-show="!loading" :submit="handleInternshipRegistration" />
         </v-card>
     </v-container>
 </template>
@@ -33,4 +59,8 @@ const user = useSanctumUser<User>();
     padding-right: 10px;
     padding-bottom: 10px;
 }
+
+.alert {
+    margin-bottom: 10px;
+}
 </style>