Merge branch 'feature/31-Vytvorenie-novej-praxe-studentom' into develop

frontend/app/components/InternshipEditor.vue

@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import type { CompanyData } from '~/types/company_data';
+import type { NewInternship } from '~/types/internships';
+import type { User } from '~/types/user';
+
+const rules = {
+    required: (v: any) => (!!v && String(v).trim().length > 0) || 'Povinné pole',
+    mustAgree: (v: boolean) => v === true || 'Je potrebné potvrdiť',
+};
+
+const year_of_study_choices = [
+    {
+        title: '1',
+        subtitle: 'bakalárske',
+    },
+    {
+        title: '2',
+        subtitle: 'bakalárske',
+    },
+    {
+        title: '3',
+        subtitle: 'bakalárske',
+    },
+    {
+        title: '4',
+        subtitle: 'magisterské',
+    },
+    {
+        title: '5',
+        subtitle: 'magisterské',
+    }
+];
+
+const props = defineProps({
+    start: {
+        type: String,
+        required: false,
+        default: ''
+    },
+    end: {
+        type: String,
+        required: false,
+        default: ''
+    },
+    year_of_study: {
+        type: Number,
+        required: false,
+        default: 1
+    },
+    semester: {
+        type: String,
+        required: false,
+        default: ''
+    },
+    company_id: {
+        type: Number,
+        required: false,
+        default: -1
+    },
+    description: {
+        type: String,
+        required: false,
+        default: ''
+    },
+    submit: {
+        type: Function as PropType<(internship: NewInternship) => void>,
+        required: true
+    }
+});
+
+const isValid = ref(false);
+const form = ref({
+    start: props.start,
+    end: props.end,
+    year_of_study: props.year_of_study,
+    semester: props.semester,
+    company_id: props.company_id === -1 ? null : props.company_id,
+    description: props.description,
+    consent: false,
+});
+
+const user = useSanctumUser<User>();
+
+function triggerSubmit() {
+    const new_internship: NewInternship = {
+        user_id: user.value?.id!,
+        company_id: form.value.company_id!,
+        start: form.value.start,
+        end: form.value.end,
+        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>
+
+<template>
+    <v-form v-model="isValid" @submit.prevent="triggerSubmit">
+        <v-date-input v-model="form.start" :rules="[rules.required]" clearable label="Začiatok"></v-date-input>
+        <v-date-input v-model="form.end" :rules="[rules.required]" clearable label="Koniec"></v-date-input>
+
+        <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 } }"
+            :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ýber firmy -->
+
+        <!-- Č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" />
+
+        <v-btn type="submit" color="success" size="large" block :disabled="!isValid || !form.consent">
+            Pridať
+        </v-btn>
+    </v-form>
+</template>
+
+<style scoped>
+form {
+    width: 80%;
+    margin: 0 auto;
+}
+
+.alert {
+    margin-bottom: 10px;
+}
+</style>

frontend/app/pages/dashboard/student.vue

@@ -1,26 +0,0 @@
-<script setup lang="ts">
-import type { User } from '~/types/user';
-
-definePageMeta({
-    middleware: ['sanctum:auth', 'student-only'],
-});
-
-useSeoMeta({
-    title: "Portál študenta | ISOP",
-    ogTitle: "Portál študenta",
-    description: "Portál študenta ISOP",
-    ogDescription: "Portál študenta",
-});
-
-const user = useSanctumUser<User>();
-</script>
-
-<template>
-    <v-container fluid>
-        <v-card id="footer-card">
-            <h1>Vitajte, {{ user?.name }}</h1>
-
-
-        </v-card>
-    </v-container>
-</template>

frontend/app/pages/dashboard/student/index.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { prettyInternshipStatus } from '~/types/internship_status';
+import type { Internship } from '~/types/internships';
+import type { User } from '~/types/user';
+
+definePageMeta({
+    middleware: ['sanctum:auth', 'student-only'],
+});
+
+useSeoMeta({
+    title: "Portál študenta | ISOP",
+    ogTitle: "Portál študenta",
+    description: "Portál študenta ISOP",
+    ogDescription: "Portál študenta",
+});
+
+const headers = [
+    { title: 'Firma', key: 'company', align: 'left' },
+    { title: 'Od', key: 'start', align: 'left' },
+    { title: 'Do', key: 'end', align: 'left' },
+    { title: 'Ročník', key: 'year_of_study', align: 'middle' },
+    { title: 'Semester', key: 'semester', align: 'middle' },
+    { title: 'Stav', key: 'status', align: 'middle' },
+    { title: 'Operácie', key: 'ops', align: 'middle' },
+];
+
+const user = useSanctumUser<User>();
+const { data, error } = await useSanctumFetch<Internship[]>('/api/internships');
+</script>
+
+<template>
+    <v-container fluid>
+        <v-card id="page-container-card">
+            <h1>Vitajte, {{ user?.name }}</h1>
+            <hr />
+            <small>{{ user?.student_data?.study_field }}, {{ user?.student_data?.personal_email }}</small>
+
+            <!-- spacer -->
+            <div style="height: 40px;"></div>
+
+            <v-btn prepend-icon="mdi-plus" color="blue" class="mr-2" to="/dashboard/student/internship/create">
+                Pridať
+            </v-btn>
+            <v-btn prepend-icon="mdi-pencil" color="orange" class="mr-2">
+                Môj profil
+            </v-btn>
+
+            <!-- spacer -->
+            <div style="height: 40px;"></div>
+
+            <h3>Moje praxe</h3>
+
+            <!-- Chybová hláška -->
+            <v-alert v-if="error" density="compact" :text="error?.message" title="Chyba" type="error"
+                id="login-error-alert" class="mx-auto alert"></v-alert>
+
+            <v-table v-else>
+                <thead>
+                    <tr>
+                        <th v-for="header in headers" :class="'text-' + header.align">
+                            <strong>{{ header.title }}</strong>
+                        </th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="item in data">
+                        <td>{{ item.company.name }}</td>
+                        <td>{{ item.start }}</td>
+                        <td>{{ item.end }}</td>
+                        <td>{{ item.year_of_study }}</td>
+                        <td>{{ item.semester === "WINTER" ? "Zimný" : "Letný" }}</td>
+                        <td>
+                            <v-btn class="m-1" density="compact" base-color="grey">
+                                {{ prettyInternshipStatus(item.status.status) }}
+                            </v-btn>
+                        </td>
+                        <td class="text-left">
+                            <v-btn class="m-1 op-btn" density="compact" append-icon="mdi-pencil" base-color="orange"
+                                :to="'/dashboard/student/internship/edit/' + item.id">Editovať</v-btn>
+                            <v-btn class="m-1 op-btn" density="compact" append-icon="mdi-trash-can-outline"
+                                base-color="red" @click="async () => { }">Zmazať</v-btn>
+                        </td>
+                    </tr>
+                </tbody>
+            </v-table>
+        </v-card>
+    </v-container>
+</template>
+
+<style scoped>
+#page-container-card {
+    padding-left: 10px;
+    padding-right: 10px;
+}
+
+.op-btn {
+    margin: 10px;
+}
+</style>

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

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import type { NewInternship } from '~/types/internships';
+
+definePageMeta({
+    middleware: ['sanctum:auth', 'student-only'],
+});
+
+useSeoMeta({
+    title: "Vytvorenie praxe | ISOP",
+    ogTitle: "Vytvorenie praxe",
+    description: "Vytvorenie praxe ISOP",
+    ogDescription: "Vytvorenie praxe",
+});
+
+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>
+    <v-container fluid>
+        <v-card id="page-container-card">
+            <h1>Vytvorenie praxe</h1>
+
+            <br />
+
+            <!-- Č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>
+
+<style scoped>
+#page-container-card {
+    padding-left: 10px;
+    padding-right: 10px;
+    padding-bottom: 10px;
+}
+
+.alert {
+    margin-bottom: 10px;
+}
+</style>

frontend/app/pages/dashboard/student/internship/edit/[id].vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { User } from '~/types/user';
+
+definePageMeta({
+    middleware: ['sanctum:auth', 'student-only'],
+});
+
+useSeoMeta({
+    title: "Edit praxe | ISOP",
+    ogTitle: "Edit praxe",
+    description: "Edit praxe ISOP",
+    ogDescription: "Edit praxe",
+});
+
+const user = useSanctumUser<User>();
+</script>
+
+<template>
+    <v-container fluid>
+        <v-card id="page-container-card">
+            <p>...</p>
+        </v-card>
+    </v-container>
+</template>
+
+<style scoped>
+#page-container-card {
+    padding-left: 10px;
+    padding-right: 10px;
+}
+</style>

frontend/app/types/company_data.ts

@@ -1,9 +1,11 @@
+import type { User } from "./user";
+
 export interface CompanyData {
     id: number;
     name: string;
     address: string;
     ico: number;
-    contact: number;
+    contact: User;
     hiring: boolean;
 };
 

frontend/app/types/internship_status.ts

@@ -0,0 +1,35 @@
+import type { User } from "./user";
+
+export interface InternshipStatusData {
+    internship_id: number;
+    user_id: string;
+    status: InternshipStatus;
+    changed: string;
+    note: string;
+    modified_by: User;
+};
+
+export enum InternshipStatus {
+    SUBMITTED = 'SUBMITTED',
+    CONFIRMED = 'CONFIRMED',
+    DENIED = 'DENIED',
+    DEFENDED = 'DEFENDED',
+    NOT_DEFENDED = 'NOT_DEFENDED'
+};
+
+export function prettyInternshipStatus(status: InternshipStatus) {
+    switch (status) {
+        case InternshipStatus.SUBMITTED:
+            return "Zadané";
+        case InternshipStatus.CONFIRMED:
+            return "Potvrdené";
+        case InternshipStatus.DENIED:
+            return "Zamítnuté";
+        case InternshipStatus.DEFENDED:
+            return "Obhájené";
+        case InternshipStatus.NOT_DEFENDED:
+            return "Neobhájené";
+        default:
+            throw new Error("Unknown status");
+    }
+}

frontend/app/types/internships.ts

@@ -0,0 +1,26 @@
+import type { CompanyData } from "./company_data";
+import type { InternshipStatusData } from "./internship_status";
+
+export interface Internship {
+    id: number;
+    user_id: string;
+    company: CompanyData;
+    start: string;
+    end: string;
+    year_of_study: number;
+    semester: string;
+    position_description: string;
+    agreement?: Uint8Array;
+    status: InternshipStatusData;
+};
+
+export interface NewInternship {
+    user_id: number;
+    company_id: number;
+    start: string;
+    end: string;
+    year_of_study: number;
+    semester: string;
+    position_description: string;
+    agreement?: Uint8Array;
+};