refactor: put alerts into separate components

frontend/app/components/ErrorAlert.vue

@@ -0,0 +1,21 @@
+<template>
+    <div>
+        <v-alert density="compact" :text="error" :title="error || 'Chyba'" type="error" class="mb-2 mt-2"></v-alert>
+    </div>
+</template>
+
+<script lang="ts">
+export default {
+    props: {
+        title: {
+            type: String,
+            required: false,
+            default: "Chyba"
+        },
+        error: {
+            type: String,
+            required: true,
+        }
+    }
+}
+</script>

frontend/app/components/InfoAlert.vue

@@ -0,0 +1,20 @@
+<template>
+    <div>
+        <v-alert density="compact" :text="text" :title="title" type="info" class="mb-2 mt-2"></v-alert>
+    </div>
+</template>
+
+<script lang="ts">
+export default {
+    props: {
+        title: {
+            type: String,
+            required: true,
+        },
+        text: {
+            type: String,
+            required: true,
+        }
+    }
+}
+</script>

frontend/app/components/InternshipDocumentEditor.vue

@@ -80,26 +80,23 @@ async function onSubmit() {
 <template>
     <div>
         <!-- Čakajúca hláška -->
-        <v-alert v-if="loading" density="compact" text="Prosím čakajte..." title="Spracovávam" type="info"
-            class="mx-auto mb-2"></v-alert>
+        <LoadingAlert v-if="loading" />
 
         <!-- Chybová hláška -->
-        <v-alert v-if="error" density="compact" :text="error" title="Chyba" type="error" class="mx-auto mb-2"></v-alert>
+        <ErrorAlert v-if="error" :error="error" />
 
         <v-form @submit.prevent="onSubmit" :disabled="loading">
             <div>
                 <h4 class="mb-2">Podpísaná zmluva / dohoda</h4>
 
-                <v-alert v-if="props.internship.agreement" class="mb-2" type="warning" variant="tonal"
-                    title="Existujúci dokument"
+                <WarningAlert v-if="props.internship.agreement" title="Existujúci dokument"
                     text="V systéme je už nahratá zmluva/dohoda. Ak chcete nahradiť existujúcu verziu, vyberte súbor, alebo v opačnom prípade nechajte toto pole nevyplnené.">
-
                     <br />
 
                     <v-btn prepend-icon="mdi-download" color="blue" class="mr-2 mt-2" @click="downloadAgreement">
                         Stiahnuť
                     </v-btn>
-                </v-alert>
+                </WarningAlert>
 
                 <v-file-input v-model="agreement" :rules="[rules.isPdf, rules.maxSize]" accept=".pdf,application/pdf"
                     prepend-icon="mdi-handshake" label="Nahrať PDF zmluvu" variant="outlined" show-size clearable
@@ -111,8 +108,7 @@ async function onSubmit() {
             <div>
                 <h4 class="mb-2">Výkaz</h4>
 
-                <v-alert v-if="props.internship.report" class="mb-2" type="warning" variant="tonal"
-                    title="Existujúci dokument"
+                <WarningAlert v-if="props.internship.agreement" title="Existujúci dokument"
                     text="V systéme je už nahratý výkaz. Ak chcete nahradiť existujúcu verziu, vyberte súbor, alebo v opačnom prípade nechajte toto pole nevyplnené.">
 
                     <br />
@@ -120,7 +116,7 @@ async function onSubmit() {
                     <v-btn prepend-icon="mdi-download" color="blue" class="mr-2 mt-2" @click="downloadReport">
                         Stiahnuť
                     </v-btn>
-                </v-alert>
+                </WarningAlert>
 
                 <v-file-input v-model="report" :rules="[rules.isPdf, rules.maxSize]" accept=".pdf,application/pdf"
                     prepend-icon="mdi-chart-box-outline" label="Nahrať PDF výkaz" variant="outlined" show-size clearable

frontend/app/components/InternshipDocumentViewer.vue

@@ -39,11 +39,11 @@ async function downloadReport() {
                         Podpísaná zmluva / dohoda
                     </v-card-title>
                     <v-card-text>
-                        <v-alert v-if="!props.internship.agreement" type="warning" variant="tonal" title="Neodovzdané"
+                        <WarningAlert v-if="!props.internship.agreement" title="Neodovzdané"
                             text="Zmluva zatiaľ nebola nahratá." />
 
                         <div v-else>
-                            <v-alert type="success" variant="tonal" title="Odovzdané" text="Zmluva bola nahratá." />
+                            <SuccessAlert title="Odovzdané" text="Zmluva bola nahratá." />
 
                             <v-btn prepend-icon="mdi-download" color="blue" class="mr-2 mt-2" block
                                 @click="downloadAgreement">
@@ -62,15 +62,14 @@ async function downloadReport() {
                         Výkaz
                     </v-card-title>
                     <v-card-text>
-                        <v-alert v-if="!props.internship.report" type="info" variant="tonal" title="Neodovzdané"
+                        <InfoAlert v-if="!props.internship.report" title="Neodovzdané"
                             text="Výkaz zatiaľ nebol nahratý." />
 
                         <div v-else>
-                            <v-alert v-if="!props.internship.report_confirmed" type="error" variant="tonal"
-                                title="Nepotvrdené" text="Výkaz bol nahratý, ale zatiaľ nebol potvrdený firmou." />
+                            <ErrorAlert v-if="!props.internship.report_confirmed" title="Nepotvrdené"
+                                error="Výkaz bol nahratý, ale zatiaľ nebol potvrdený firmou." />
 
-                            <v-alert v-else type="success" variant="tonal" title="Potvrdené"
-                                text="Výkaz bol nahratý, aj potvrdený firmou." />
+                            <SuccessAlert v-else title="Potvrdené" text="Výkaz bol nahratý, aj potvrdený firmou." />
 
                             <v-btn prepend-icon="mdi-download" color="blue" class="mr-2 mt-2" block
                                 @click="downloadReport">

frontend/app/components/InternshipEditor.vue

@@ -113,12 +113,10 @@ const { data, error } = await useSanctumFetch<CompanyData[]>('/api/companies/sim
         <!-- 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>
+        <LoadingAlert v-if="!data && !error" />
 
         <!-- 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>
+        <ErrorAlert v-else-if="error" :error="error.message" />
 
         <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>

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, refresh } = await useSanctumFetch(`/api/internships/${props.internship.id}/next-statuses`, undefined, {
+const { data, error: load_error, refresh } = await useSanctumFetch(`/api/internships/${props.internship.id}/next-statuses`, undefined, {
     transform: (statuses: InternshipStatus[]) => statuses.map((state) => ({
         title: prettyInternshipStatus(state),
         value: state
@@ -62,14 +62,12 @@ async function submit() {
 <template>
     <div>
         <!-- Chybová hláška -->
-        <v-alert v-if="save_error !== null" density="compact" :text="`Nepodarilo uložiť: ${save_error}`" title="Chyba"
-            type="error" class="mx-auto alert"></v-alert>
+        <ErrorAlert v-if="save_error" :error="`Nepodarilo uložiť: ${save_error}`" />
 
         <!-- Chybová hláška -->
-        <v-alert v-if="save_error !== null" density="compact" :text="`Nepodarilo sa načítať stavy: ${save_error}`"
-            title="Chyba" type="error" class="mx-auto alert"></v-alert>
+        <ErrorAlert v-if="load_error" :error="`Nepodarilo sa načítať stavy: ${save_error}`" />
 
-        <v-form v-model="isValid" @submit.prevent="submit" :disabled="loading">
+        <v-form v-else v-model="isValid" @submit.prevent="submit" :disabled="loading">
             <v-select v-model="new_state" label="Stav" :items="data" item-value="value"></v-select>
             <v-text-field v-model="note" :rules="[rules.required]" label="Poznámka"></v-text-field>
 

frontend/app/components/InternshipStatusHistoryView.vue

@@ -23,12 +23,10 @@ watch(() => props.internship, () => {
 <template>
     <div>
         <!-- Čakajúca hláška -->
-        <v-alert v-if="pending" density="compact" text="Prosím čakajte..." title="Spracovávam" type="info"
-            class="mx-auto alert"></v-alert>
+        <LoadingAlert v-if="pending" />
 
         <!-- Chybová hláška -->
-        <v-alert v-if="error" density="compact" :text="error?.message" title="Chyba" type="error"
-            class="mx-auto alert"></v-alert>
+        <ErrorAlert v-if="error" :error="error?.message" />
 
         <v-table v-else>
             <thead>

frontend/app/components/LoadingAlert.vue

@@ -0,0 +1,5 @@
+<template>
+    <div>
+        <v-alert density="compact" text="Prosím čakajte..." title="Spracovávam" type="info" class="mb-2 mt-2"></v-alert>
+    </div>
+</template>

frontend/app/components/SuccessAlert.vue

@@ -0,0 +1,20 @@
+<template>
+    <div>
+        <v-alert density="compact" :text="text" :title="title" type="success" class="mb-2 mt-2"></v-alert>
+    </div>
+</template>
+
+<script lang="ts">
+export default {
+    props: {
+        title: {
+            type: String,
+            required: true,
+        },
+        text: {
+            type: String,
+            required: true,
+        }
+    }
+}
+</script>

frontend/app/components/WarningAlert.vue

@@ -0,0 +1,21 @@
+<template>
+    <div>
+        <v-alert density="compact" :text="text" :title="title" type="warning" class="mb-2 mt-2"></v-alert>
+    </div>
+</template>
+
+<script lang="ts">
+export default {
+    props: {
+        title: {
+            type: String,
+            required: false,
+            default: "Upozornenie"
+        },
+        text: {
+            type: String,
+            required: true,
+        }
+    }
+}
+</script>