Merge branch 'feature/97-Optimalizácia-načítania-komponentov' into develop

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" />

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) {

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>
 

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>
 

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>

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 />

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>

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) => {

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>

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>

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" />
 

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>

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>

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>