From f206924484479909cdc04c323cb76d02f76c545c Mon Sep 17 00:00:00 2001
From: dkecskes <steamacc311@gmail.com>
Date: Tue, 18 Nov 2025 20:49:56 +0100
Subject: [PATCH] refactor: use lazy fetching

---
 frontend/app/components/InternshipEditor.vue  |  4 +-
 .../app/components/InternshipStatusEditor.vue |  4 +-
 .../InternshipStatusHistoryView.vue           |  6 +-
 .../dashboard/admin/companies/edit/[id].vue   | 87 +------------------
 .../pages/dashboard/admin/companies/index.vue |  7 +-
 .../dashboard/admin/internships/edit/[id].vue | 15 +++-
 .../dashboard/admin/internships/index.vue     |  7 +-
 .../dashboard/admin/students/edit/[id].vue    |  2 +-
 .../pages/dashboard/admin/students/index.vue  | 10 ++-
 .../company/internships/edit/[id].vue         | 71 ++++++++-------
 .../dashboard/company/internships/index.vue   |  5 +-
 .../app/pages/dashboard/student/companies.vue |  7 +-
 .../app/pages/dashboard/student/index.vue     |  7 +-
 .../student/internship/edit/[id].vue          | 63 +++++++-------
 14 files changed, 122 insertions(+), 173 deletions(-)

diff --git a/frontend/app/components/InternshipEditor.vue b/frontend/app/components/InternshipEditor.vue
index 1bb4d03..fd13162 100644
--- a/frontend/app/components/InternshipEditor.vue
+++ b/frontend/app/components/InternshipEditor.vue
@@ -91,7 +91,7 @@ function yearOfStudyValueHandler(item: { title: string, subtitle: string }) {
     return parseInt(item.title) || 0;
 }
 
-const { data, error } = await useSanctumFetch<CompanyData[]>('/api/companies/simple');
+const { data, pending, error } = await useLazySanctumFetch<CompanyData[]>('/api/companies/simple');
 </script>
 
 <template>
@@ -109,7 +109,7 @@ const { data, error } = await useSanctumFetch<CompanyData[]>('/api/companies/sim
         <!-- Výber firmy -->
 
         <!-- Čakajúca hláška -->
-        <LoadingAlert v-if="!data && !error" />
+        <LoadingAlert v-if="pending" />
 
         <!-- Chybová hláška -->
         <ErrorAlert v-else-if="error" :error="error.message" />
diff --git a/frontend/app/components/InternshipStatusEditor.vue b/frontend/app/components/InternshipStatusEditor.vue
index a975be5..7133ab9 100644
--- a/frontend/app/components/InternshipStatusEditor.vue
+++ b/frontend/app/components/InternshipStatusEditor.vue
@@ -23,7 +23,7 @@ const loading = ref(false);
 const save_error = ref(null as null | string);
 
 const client = useSanctumClient();
-const { data, error: load_error, refresh } = await useSanctumFetch(`/api/internships/${props.internship.id}/next-statuses`, undefined, {
+const { data, error: load_error, refresh } = await useLazySanctumFetch(`/api/internships/${props.internship.id}/next-statuses`, undefined, {
     transform: (statuses: InternshipStatus[]) => statuses.map((state) => ({
         title: prettyInternshipStatus(state),
         value: state
@@ -47,7 +47,7 @@ async function submit() {
 
         new_state.value = null;
         note.value = "";
-        refresh();
+        await refresh();
         emit('successfulSubmit');
     } catch (e) {
         if (e instanceof FetchError) {
diff --git a/frontend/app/components/InternshipStatusHistoryView.vue b/frontend/app/components/InternshipStatusHistoryView.vue
index e8b7156..4aa6594 100644
--- a/frontend/app/components/InternshipStatusHistoryView.vue
+++ b/frontend/app/components/InternshipStatusHistoryView.vue
@@ -13,10 +13,10 @@ const headers = [
     { title: 'Zmenu vykonal', key: 'modified_by', align: 'left' },
 ];
 
-const { data, error, pending, refresh } = await useSanctumFetch<InternshipStatusData[]>(`/api/internships/${props.internship.id}/statuses`);
+const { data, error, pending, refresh } = await useLazySanctumFetch<InternshipStatusData[]>(`/api/internships/${props.internship.id}/statuses`);
 
-watch(() => props.internship, () => {
-    refresh();
+watch(() => props.internship, async () => {
+    await refresh();
 });
 </script>
 
diff --git a/frontend/app/pages/dashboard/admin/companies/edit/[id].vue b/frontend/app/pages/dashboard/admin/companies/edit/[id].vue
index 23bb732..4d9d838 100644
--- a/frontend/app/pages/dashboard/admin/companies/edit/[id].vue
+++ b/frontend/app/pages/dashboard/admin/companies/edit/[id].vue
@@ -14,10 +14,6 @@ const loading = ref(true);
 const saving = ref(false);
 
 // Delete state
-const deleteDialog = ref(false);
-const deleteLoading = ref(false);
-const deleteError = ref<string | null>(null);
-const deleteSuccess = ref(false);
 const company = ref<CompanyData | null>(null);
 
 const form = ref({
@@ -34,7 +30,7 @@ const form = ref({
 });
 
 // Načítanie dát firmy
-const { data } = await useSanctumFetch<CompanyData>(`/api/companies/${companyId}`);
+const { data } = await useLazySanctumFetch<CompanyData>(`/api/companies/${companyId}`);
 
 watch(data, (newData) => {
     if (newData) {
@@ -75,49 +71,6 @@ async function saveChanges() {
 function cancel() {
     navigateTo('/dashboard/admin/companies');
 }
-
-// Funkcia na otvorenie delete dialogu
-const openDeleteDialog = () => {
-    deleteDialog.value = true;
-    deleteError.value = null;
-};
-
-// Funkcia na zatvorenie dialogu
-const closeDeleteDialog = () => {
-    deleteDialog.value = false;
-    deleteError.value = null;
-    deleteSuccess.value = false;
-};
-
-// Funkcia na vymazanie firmy
-const deleteCompany = async () => {
-    if (!companyId) return;
-
-    deleteLoading.value = true;
-    deleteError.value = null;
-
-    try {
-        await client(`/api/companies/${companyId}`, {
-            method: 'DELETE'
-        });
-
-        deleteSuccess.value = true;
-
-        // Presmeruj na zoznam po 1.5 sekundách
-        setTimeout(() => {
-            navigateTo('/dashboard/admin/companies');
-        }, 1500);
-
-    } catch (e) {
-        if (e instanceof FetchError) {
-            deleteError.value = e.response?._data?.message || 'Chyba pri mazaní firmy.';
-        } else {
-            deleteError.value = 'Neznáma chyba pri mazaní firmy.';
-        }
-    } finally {
-        deleteLoading.value = false;
-    }
-};
 </script>
 
 <template>
@@ -176,49 +129,11 @@ const deleteCompany = async () => {
                             <v-btn @click="cancel" :disabled="saving">
                                 Zrušiť
                             </v-btn>
-                            <v-spacer></v-spacer>
-                            <v-btn color="red" variant="outlined" @click="openDeleteDialog" :disabled="saving">
-                                Vymazať firmu
-                            </v-btn>
                         </v-card-actions>
                     </v-card>
                 </v-col>
             </v-row>
         </div>
-
-        <!-- Delete Confirmation Dialog -->
-        <v-dialog v-model="deleteDialog" max-width="500px">
-            <v-card>
-                <v-card-title class="text-h5">
-                    Potvrdiť vymazanie
-                </v-card-title>
-                <v-card-text>
-                    <p v-if="!deleteSuccess">
-                        Naozaj chcete vymazať firmu <strong>{{ company?.name }}</strong>?
-                    </p>
-                    <p v-if="!deleteSuccess" class="text-error mt-2">
-                        Táto akcia vymaže aj kontaktnú osobu (EMPLOYER), všetky praxe a statusy spojené s touto firmou a
-                        <strong>nie je možné ju vrátiť späť</strong>.
-                    </p>
-
-                    <!-- Error message -->
-                    <ErrorAlert v-if="deleteError" :error="deleteError" />
-
-                    <!-- Success message -->
-                    <SuccessAlert v-if="deleteSuccess" title="Zmazanie" text="Firma bola úspešne vymazaná" />
-                </v-card-text>
-                <v-card-actions>
-                    <v-spacer></v-spacer>
-                    <v-btn color="grey" variant="text" @click="closeDeleteDialog" :disabled="deleteLoading">
-                        Zrušiť
-                    </v-btn>
-                    <v-btn color="red" variant="text" @click="deleteCompany" :loading="deleteLoading"
-                        :disabled="deleteSuccess">
-                        Vymazať
-                    </v-btn>
-                </v-card-actions>
-            </v-card>
-        </v-dialog>
     </v-container>
 </template>
 
diff --git a/frontend/app/pages/dashboard/admin/companies/index.vue b/frontend/app/pages/dashboard/admin/companies/index.vue
index c176003..2b744be 100644
--- a/frontend/app/pages/dashboard/admin/companies/index.vue
+++ b/frontend/app/pages/dashboard/admin/companies/index.vue
@@ -25,7 +25,7 @@ const headers = [
 
 const client = useSanctumClient();
 
-const { data, error, refresh } = await useSanctumFetch<CompanyData[]>('/api/companies/simple');
+const { data, error, pending, refresh } = await useLazySanctumFetch<CompanyData[]>('/api/companies/simple');
 
 // State pre delete dialog
 const deleteDialog = ref(false);
@@ -82,8 +82,11 @@ const deleteCompany = async () => {
             <!-- spacer -->
             <div style="height: 40px;"></div>
 
+            <!-- Čakajúca hláška -->
+            <LoadingAlert v-if="pending" />
+
             <!-- Chybová hláška -->
-            <ErrorAlert v-if="error" :error="error?.message" />
+            <ErrorAlert v-else-if="error" :error="error?.message" />
 
             <div v-else>
                 <p>Aktuálne spolupracujeme s {{ data?.length }} firmami.</p>
diff --git a/frontend/app/pages/dashboard/admin/internships/edit/[id].vue b/frontend/app/pages/dashboard/admin/internships/edit/[id].vue
index f74d4e2..af047b7 100644
--- a/frontend/app/pages/dashboard/admin/internships/edit/[id].vue
+++ b/frontend/app/pages/dashboard/admin/internships/edit/[id].vue
@@ -21,6 +21,8 @@ const loading = ref(false);
 const action_error = ref(null as null | string);
 const refreshKey = ref(0);
 
+const { data, error, pending, refresh } = await useLazySanctumFetch<Internship>(`/api/internships/${route.params.id}`);
+
 async function handleUpdateOfBasicInfo(internship: NewInternship) {
     action_error.value = null;
     loading.value = true;
@@ -41,7 +43,10 @@ async function handleUpdateOfBasicInfo(internship: NewInternship) {
     }
 }
 
-const { data, error, refresh } = await useSanctumFetch<Internship>(`/api/internships/${route.params.id}`);
+async function forceRefresh() {
+    await refresh();
+    refreshKey.value++;
+}
 </script>
 
 <template>
@@ -59,8 +64,11 @@ const { data, error, refresh } = await useSanctumFetch<Internship>(`/api/interns
             <ErrorAlert v-if="action_error" :error="action_error" />
 
             <div v-else>
+                <!-- Čakajúca hláška -->
+                <LoadingAlert v-if="pending" />
+
                 <!-- Chybová hláška -->
-                <ErrorAlert v-if="error" :error="error?.message" />
+                <ErrorAlert v-else-if="error" :error="error?.message" />
 
                 <div v-else>
                     <div>
@@ -84,8 +92,7 @@ const { data, error, refresh } = await useSanctumFetch<Internship>(`/api/interns
                         <br />
 
                         <h4>Zmena stavu</h4>
-                        <InternshipStatusEditor :internship="data!"
-                            @successful-submit="() => { refresh(); refreshKey++; }" />
+                        <InternshipStatusEditor :internship="data!" @successful-submit="forceRefresh" />
                     </div>
 
                     <hr />
diff --git a/frontend/app/pages/dashboard/admin/internships/index.vue b/frontend/app/pages/dashboard/admin/internships/index.vue
index 342c788..28c20d9 100644
--- a/frontend/app/pages/dashboard/admin/internships/index.vue
+++ b/frontend/app/pages/dashboard/admin/internships/index.vue
@@ -24,7 +24,7 @@ const headers = [
     { title: 'Operácie', key: 'ops', align: 'middle' },
 ];
 
-const { data, error } = await useSanctumFetch<Internship[]>('/api/internships');
+const { data, error, pending } = await useLazySanctumFetch<Internship[]>('/api/internships');
 </script>
 
 <template>
@@ -35,8 +35,11 @@ const { data, error } = await useSanctumFetch<Internship[]>('/api/internships');
             <!-- spacer -->
             <div style="height: 40px;"></div>
 
+            <!-- Čakajúca hláška -->
+            <LoadingAlert v-if="pending" />
+
             <!-- Chybová hláška -->
-            <ErrorAlert v-if="error" :error="error?.message" />
+            <ErrorAlert v-else-if="error" :error="error?.message" />
 
             <v-table v-else>
                 <thead>
diff --git a/frontend/app/pages/dashboard/admin/students/edit/[id].vue b/frontend/app/pages/dashboard/admin/students/edit/[id].vue
index 2a668a6..12f3b70 100644
--- a/frontend/app/pages/dashboard/admin/students/edit/[id].vue
+++ b/frontend/app/pages/dashboard/admin/students/edit/[id].vue
@@ -32,7 +32,7 @@ const form = ref({
     }
 });
 
-const { data } = await useSanctumFetch<User>(`/api/students/${studentId}`);
+const { data } = await useLazySanctumFetch<User>(`/api/students/${studentId}`);
 
 // Načítanie dát študenta
 watch(data, (newData) => {
diff --git a/frontend/app/pages/dashboard/admin/students/index.vue b/frontend/app/pages/dashboard/admin/students/index.vue
index bf2896d..3a18bcd 100644
--- a/frontend/app/pages/dashboard/admin/students/index.vue
+++ b/frontend/app/pages/dashboard/admin/students/index.vue
@@ -26,7 +26,7 @@ const headers = [
 const client = useSanctumClient();
 
 // Načítame všetkých študentov
-const { data: students, error, refresh } = await useSanctumFetch<User[]>('/api/students');
+const { data: students, error, pending, refresh } = await useLazySanctumFetch<User[]>('/api/students');
 
 // State pre delete dialog
 const deleteDialog = ref(false);
@@ -60,9 +60,8 @@ const deleteStudent = async () => {
             method: 'DELETE'
         });
 
-        refresh();
+        await refresh();
         closeDeleteDialog();
-
     } catch (err) {
         if (err instanceof FetchError) {
             deleteError.value = err.data?.message;
@@ -82,8 +81,11 @@ const deleteStudent = async () => {
             <!-- spacer -->
             <div style="height: 40px;"></div>
 
+            <!-- Čakajúca hláška -->
+            <LoadingAlert v-if="pending" />
+
             <!-- Chybová hláška -->
-            <ErrorAlert v-if="error" :error="error?.message" />
+            <ErrorAlert v-else-if="error" :error="error?.message" />
 
             <div v-else>
                 <p>Aktuálne evidujeme {{ students?.length || 0 }} študentov.</p>
diff --git a/frontend/app/pages/dashboard/company/internships/edit/[id].vue b/frontend/app/pages/dashboard/company/internships/edit/[id].vue
index 5a9fdab..22308c4 100644
--- a/frontend/app/pages/dashboard/company/internships/edit/[id].vue
+++ b/frontend/app/pages/dashboard/company/internships/edit/[id].vue
@@ -21,7 +21,7 @@ const loading = ref(false);
 const action_error = ref(null as null | string);
 const refreshKey = ref(0);
 
-const { data, error: load_error, refresh } = await useSanctumFetch<Internship>(`/api/internships/${route.params.id}`);
+const { data, error: load_error, pending, refresh } = await useLazySanctumFetch<Internship>(`/api/internships/${route.params.id}`);
 
 async function handleUpdateOfBasicInfo(internship: NewInternship) {
     action_error.value = null;
@@ -53,52 +53,57 @@ async function handleUpdateOfBasicInfo(internship: NewInternship) {
             <div style="height: 40px;"></div>
 
             <!-- Čakajúca hláška -->
-            <LoadingAlert v-if="loading" />
+            <LoadingAlert v-if="pending" />
 
             <!-- Chybová hláška -->
-            <ErrorAlert v-if="action_error" :error="action_error" />
-
-            <!-- Chybová hláška -->
-            <ErrorAlert v-if="load_error" :error="load_error.message" />
+            <ErrorAlert v-else-if="load_error" :error="load_error.message" />
 
             <div v-else>
-                <div>
-                    <h2>Základné informácie</h2>
-                    <ErrorAlert v-if="data?.status.status !== InternshipStatus.SUBMITTED" title="Blokované"
-                        error='Vaša prax nie je v stave "Zadaná" a teda nemôžete meniť údaje' />
-                    <InternshipEditor v-else :internship="data!" :submit="handleUpdateOfBasicInfo" />
-                </div>
+                <!-- Čakajúca hláška -->
+                <LoadingAlert v-if="loading" />
 
-                <hr />
+                <!-- Chybová hláška -->
+                <ErrorAlert v-else-if="action_error" :error="action_error" />
 
-                <div>
-                    <h2>Stav</h2>
-                    <h4>Aktuálny stav</h4>
-                    <p>{{ prettyInternshipStatus(data?.status.status!) }}</p>
-                    <p>Poznámka: <em>{{ data?.status.note }}</em></p>
-                    <p>Posledná zmena: <em>{{ data?.status.changed }}, {{ data?.status.modified_by.name }}</em></p>
+                <div v-else>
+                    <div>
+                        <h2>Základné informácie</h2>
+                        <ErrorAlert v-if="data?.status.status !== InternshipStatus.SUBMITTED" title="Blokované"
+                            error='Vaša prax nie je v stave "Zadaná" a teda nemôžete meniť údaje' />
+                        <InternshipEditor v-else :internship="data!" :submit="handleUpdateOfBasicInfo" />
+                    </div>
 
-                    <br />
+                    <hr />
 
-                    <h4>História</h4>
-                    <InternshipStatusHistoryView :internship="data!" />
+                    <div>
+                        <h2>Stav</h2>
+                        <h4>Aktuálny stav</h4>
+                        <p>{{ prettyInternshipStatus(data?.status.status!) }}</p>
+                        <p>Poznámka: <em>{{ data?.status.note }}</em></p>
+                        <p>Posledná zmena: <em>{{ data?.status.changed }}, {{ data?.status.modified_by.name }}</em></p>
 
-                    <br />
+                        <br />
 
-                    <h4>Zmena stavu</h4>
-                    <InternshipStatusEditor :internship="data!"
-                        @successful-submit="() => { refresh(); refreshKey++; }" />
-                </div>
+                        <h4>História</h4>
+                        <InternshipStatusHistoryView :internship="data!" />
 
-                <hr />
+                        <br />
 
-                <div>
-                    <h2>Nahratie dokumentov</h2>
+                        <h4>Zmena stavu</h4>
+                        <InternshipStatusEditor :internship="data!"
+                            @successful-submit="() => { refresh(); refreshKey++; }" />
+                    </div>
 
-                    <ErrorAlert v-if="data?.status.status !== InternshipStatus.CONFIRMED" title="Blokované"
-                        error='Vaša prax nie je v stave "Schválená" a teda nemôžete nahrať dokumenty.' />
+                    <hr />
 
-                    <InternshipDocumentEditor v-else :internship="data!" @successful-submit="refresh" />
+                    <div>
+                        <h2>Nahratie dokumentov</h2>
+
+                        <ErrorAlert v-if="data?.status.status !== InternshipStatus.CONFIRMED" title="Blokované"
+                            error='Vaša prax nie je v stave "Schválená" a teda nemôžete nahrať dokumenty.' />
+
+                        <InternshipDocumentEditor v-else :internship="data!" @successful-submit="refresh" />
+                    </div>
                 </div>
             </div>
         </v-card>
diff --git a/frontend/app/pages/dashboard/company/internships/index.vue b/frontend/app/pages/dashboard/company/internships/index.vue
index aadbdd9..9e7bb5b 100644
--- a/frontend/app/pages/dashboard/company/internships/index.vue
+++ b/frontend/app/pages/dashboard/company/internships/index.vue
@@ -23,7 +23,7 @@ const headers = [
     { title: 'Operácie', key: 'ops', align: 'middle' },
 ];
 
-const { data, error } = await useSanctumFetch<Internship[]>('/api/internships/my');
+const { data, error, pending } = await useLazySanctumFetch<Internship[]>('/api/internships/my');
 </script>
 
 <template>
@@ -34,6 +34,9 @@ const { data, error } = await useSanctumFetch<Internship[]>('/api/internships/my
             <!-- spacer -->
             <div style="height: 40px;"></div>
 
+            <!-- Čakajúca hláška -->
+            <LoadingAlert v-if="pending" />
+
             <!-- Chybová hláška -->
             <ErrorAlert v-if="error" :error="error?.message" />
 
diff --git a/frontend/app/pages/dashboard/student/companies.vue b/frontend/app/pages/dashboard/student/companies.vue
index e41ff15..a6bb181 100644
--- a/frontend/app/pages/dashboard/student/companies.vue
+++ b/frontend/app/pages/dashboard/student/companies.vue
@@ -21,7 +21,7 @@ const headers = [
     { title: 'Prijímajú študentov', key: 'hiring', align: 'middle' },
 ];
 
-const { data, error } = await useSanctumFetch<CompanyData[]>('/api/companies/simple');
+const { data, error, pending } = await useLazySanctumFetch<CompanyData[]>('/api/companies/simple');
 </script>
 
 <template>
@@ -33,8 +33,11 @@ const { data, error } = await useSanctumFetch<CompanyData[]>('/api/companies/sim
             <!-- spacer -->
             <div style="height: 40px;"></div>
 
+            <!-- Čakajúca hláška -->
+            <LoadingAlert v-if="pending" />
+
             <!-- Chybová hláška -->
-            <ErrorAlert v-if="error" :error="error?.message" />
+            <ErrorAlert v-else-if="error" :error="error?.message" />
 
             <div v-else>
                 <p>Aktuálne spolupracujeme s {{ data?.length }} firmami.</p>
diff --git a/frontend/app/pages/dashboard/student/index.vue b/frontend/app/pages/dashboard/student/index.vue
index adeb061..9be4f41 100644
--- a/frontend/app/pages/dashboard/student/index.vue
+++ b/frontend/app/pages/dashboard/student/index.vue
@@ -25,7 +25,7 @@ const headers = [
 ];
 
 const user = useSanctumUser<User>();
-const { data, error } = await useSanctumFetch<Internship[]>('/api/internships/my');
+const { data, error, pending } = await useLazySanctumFetch<Internship[]>('/api/internships/my');
 </script>
 
 <template>
@@ -53,8 +53,11 @@ const { data, error } = await useSanctumFetch<Internship[]>('/api/internships/my
 
             <h3>Moje praxe</h3>
 
+            <!-- Čakajúca hláška -->
+            <LoadingAlert v-if="pending" />
+
             <!-- Chybová hláška -->
-            <ErrorAlert v-if="error" :error="error?.message" />
+            <ErrorAlert v-else-if="error" :error="error?.message" />
 
             <v-table v-else>
                 <thead>
diff --git a/frontend/app/pages/dashboard/student/internship/edit/[id].vue b/frontend/app/pages/dashboard/student/internship/edit/[id].vue
index a7b8593..e00669b 100644
--- a/frontend/app/pages/dashboard/student/internship/edit/[id].vue
+++ b/frontend/app/pages/dashboard/student/internship/edit/[id].vue
@@ -20,7 +20,7 @@ const client = useSanctumClient();
 const loading = ref(false);
 const action_error = ref(null as null | string);
 
-const { data, error, refresh } = await useSanctumFetch<Internship>(`/api/internships/${route.params.id}`);
+const { data, error, pending, refresh } = await useLazySanctumFetch<Internship>(`/api/internships/${route.params.id}`);
 
 async function handleUpdateOfBasicInfo(internship: NewInternship) {
     action_error.value = null;
@@ -52,46 +52,51 @@ async function handleUpdateOfBasicInfo(internship: NewInternship) {
             <div style="height: 40px;"></div>
 
             <!-- Čakajúca hláška -->
-            <LoadingAlert v-if="loading" />
+            <LoadingAlert v-if="pending" />
 
             <!-- Chybová hláška -->
-            <ErrorAlert v-if="action_error" :error="action_error" />
-
-            <!-- Chybová hláška -->
-            <ErrorAlert v-if="error" :error="error.message" />
+            <ErrorAlert v-else-if="error" :error="error.message" />
 
             <div v-else>
-                <div>
-                    <h2>Základné informácie</h2>
-                    <ErrorAlert v-if="data?.status.status !== InternshipStatus.SUBMITTED"
-                        error='Vaša prax nie je v stave "Zadaná" a teda nemôžete meniť údaje.' />
-                    <InternshipEditor v-else :internship="data!" :submit="handleUpdateOfBasicInfo" />
-                </div>
+                <!-- Čakajúca hláška -->
+                <LoadingAlert v-if="loading" />
 
-                <hr />
+                <!-- Chybová hláška -->
+                <ErrorAlert v-else-if="action_error" :error="action_error" />
 
-                <div>
-                    <h2>Stav</h2>
-                    <h4>Aktuálny stav</h4>
-                    <p>{{ prettyInternshipStatus(data?.status.status!) }}</p>
-                    <p>Poznámka: <em>{{ data?.status.note }}</em></p>
-                    <p>Posledná zmena: <em>{{ data?.status.changed }}, {{ data?.status.modified_by.name }}</em></p>
+                <div v-else>
+                    <div>
+                        <h2>Základné informácie</h2>
+                        <ErrorAlert v-if="data?.status.status !== InternshipStatus.SUBMITTED"
+                            error='Vaša prax nie je v stave "Zadaná" a teda nemôžete meniť údaje.' />
+                        <InternshipEditor v-else :internship="data!" :submit="handleUpdateOfBasicInfo" />
+                    </div>
 
-                    <br />
+                    <hr />
 
-                    <h4>História</h4>
-                    <InternshipStatusHistoryView :internship="data!" />
-                </div>
+                    <div>
+                        <h2>Stav</h2>
+                        <h4>Aktuálny stav</h4>
+                        <p>{{ prettyInternshipStatus(data?.status.status!) }}</p>
+                        <p>Poznámka: <em>{{ data?.status.note }}</em></p>
+                        <p>Posledná zmena: <em>{{ data?.status.changed }}, {{ data?.status.modified_by.name }}</em></p>
 
-                <hr />
+                        <br />
 
-                <div>
-                    <h2>Nahratie dokumentov</h2>
+                        <h4>História</h4>
+                        <InternshipStatusHistoryView :internship="data!" />
+                    </div>
 
-                    <ErrorAlert v-if="data?.status.status !== InternshipStatus.CONFIRMED" title="Blokované"
-                        error='Vaša prax nie je v stave "Schválená" a teda nemôžete nahrať dokumenty.' />
+                    <hr />
 
-                    <InternshipDocumentEditor v-else :internship="data!" @successful-submit="refresh" />
+                    <div>
+                        <h2>Nahratie dokumentov</h2>
+
+                        <ErrorAlert v-if="data?.status.status !== InternshipStatus.CONFIRMED" title="Blokované"
+                            error='Vaša prax nie je v stave "Schválená" a teda nemôžete nahrať dokumenty.' />
+
+                        <InternshipDocumentEditor v-else :internship="data!" @successful-submit="refresh" />
+                    </div>
                 </div>
             </div>
         </v-card>