refactor: put alerts into separate components

This commit is contained in:
2025-11-05 09:10:42 +01:00
parent 0bbc658034
commit fc0ce811c5
29 changed files with 153 additions and 123 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -57,20 +57,17 @@ async function handleLogin() {
<v-card id="page-container-card">
<h2 class="page-title">Aktivácia účtu</h2>
<!-- Chybová hláška -->
<v-alert v-show="success" density="compact" title="Aktivácia ukončená" type="success" class="mx-auto alert">
<SuccessAlert v-show="success" title="Aktivácia ukončená">
<p>Váš účet bol úspešne aktivovaný! Prihláste sa <NuxtLink to="/login">tu</NuxtLink>.
</p>
</v-alert>
</SuccessAlert>
<div v-show="!success">
<!-- Chybová hláška -->
<v-alert v-if="error !== null" density="compact" :text="error" title="Chyba" type="error"
class="mx-auto alert"></v-alert>
<ErrorAlert v-if="error" :error="error" />
<!-- Čakajúca hláška -->
<v-alert v-if="loading" density="compact" text="Prosím čakajte..." title="Spracovávam" type="info"
class="mx-auto alert"></v-alert>
<LoadingAlert v-if="loading" />
<v-form v-else v-model="isValid" @submit.prevent="handleLogin">
<v-text-field v-model="password" :rules="[rules.required]"

View File

@@ -55,14 +55,10 @@ const changePassword = async () => {
<h1>Zmena hesla</h1>
<!-- Error alert -->
<v-alert v-if="error" type="error" density="compact" class="mb-3">
{{ error }}
</v-alert>
<ErrorAlert v-if="error" :error="error" />
<!-- Success alert -->
<v-alert v-else-if="success" type="success" density="compact" class="mb-3">
Heslo bolo úspešne zmenené.
</v-alert>
<SuccessAlert v-else-if="success" text=" Heslo bolo úspešne zmenené." />
<v-form v-else :disabled="loading" @submit.prevent="changePassword">
<!-- Nové heslo -->

View File

@@ -202,14 +202,10 @@ const deleteCompany = async () => {
</p>
<!-- Error message -->
<v-alert v-if="deleteError" type="error" density="compact" class="mt-3">
{{ deleteError }}
</v-alert>
<ErrorAlert v-if="deleteError" :error="deleteError" />
<!-- Success message -->
<v-alert v-if="deleteSuccess" type="success" density="compact" class="mt-3">
Firma bola úspešne vymazaná. Presmerovanie...
</v-alert>
<SuccessAlert v-if="deleteSuccess" text="Firma bola úspešne vymazaná" />
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>

View File

@@ -83,8 +83,7 @@ const deleteCompany = async () => {
<div style="height: 40px;"></div>
<!-- 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>
<ErrorAlert v-if="error" :error="error?.message" />
<div v-else>
<p>Aktuálne spolupracujeme s {{ data?.length }} firmami.</p>
@@ -135,9 +134,7 @@ const deleteCompany = async () => {
</p>
<!-- Error message -->
<v-alert v-if="deleteError" type="error" density="compact" class="mt-3">
{{ deleteError }}
</v-alert>
<ErrorAlert v-if="deleteError" :error="error" />
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>

View File

@@ -53,17 +53,14 @@ const { data, error, refresh } = await useSanctumFetch<Internship>(`/api/interns
<div style="height: 40px;"></div>
<!-- Čakajúca hláška -->
<v-alert v-if="loading" density="compact" text="Prosím čakajte..." title="Spracovávam" type="info"
class="mx-auto alert"></v-alert>
<LoadingAlert v-if="loading" />
<!-- Chybová hláška -->
<v-alert v-if="action_error !== null" density="compact" :text="action_error" title="Chyba" type="error"
class="mx-auto alert"></v-alert>
<ErrorAlert v-if="action_error" :error="action_error" />
<div v-else>
<!-- 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" />
<div v-else>
<div>

View File

@@ -36,9 +36,8 @@ const { data, error } = await useSanctumFetch<Internship[]>('/api/internships');
<div style="height: 40px;"></div>
<!-- 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>
<ErrorAlert v-if="error" :error="error?.message" />
<v-table v-else>
<thead>
<tr>

View File

@@ -199,14 +199,10 @@ const deleteStudent = async () => {
</p>
<!-- Error message -->
<v-alert v-if="deleteError" type="error" density="compact" class="mt-3">
{{ deleteError }}
</v-alert>
<ErrorAlert v-if="deleteError" :error="deleteError" />
<!-- Success message -->
<v-alert v-if="deleteSuccess" type="success" density="compact" class="mt-3">
Študent bol úspešne vymazaný. Presmerovanie...
</v-alert>
<SuccessAlert v-if="deleteSuccess" text="Študent bol úspešne vymazaný." />
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>

View File

@@ -83,8 +83,7 @@ const deleteStudent = async () => {
<div style="height: 40px;"></div>
<!-- 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>
<ErrorAlert v-if="error" :error="error?.message" />
<div v-else>
<p>Aktuálne evidujeme {{ students?.length || 0 }} študentov.</p>
@@ -117,8 +116,7 @@ const deleteStudent = async () => {
</tbody>
</v-table>
<v-alert v-else density="compact" text="Zatiaľ nie sú zaregistrovaní žiadni študenti." type="info"
class="mt-4"></v-alert>
<InfoAlert v-else text="Zatiaľ nie sú zaregistrovaní žiadni študenti." />
</div>
</v-card>
@@ -138,9 +136,7 @@ const deleteStudent = async () => {
</p>
<!-- Error message -->
<v-alert v-if="deleteError" type="error" density="compact" class="mt-3">
{{ deleteError }}
</v-alert>
<ErrorAlert v-if="deleteError" :error="deleteError" />
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>

View File

@@ -53,18 +53,15 @@ async function handleUpdateOfBasicInfo(internship: NewInternship) {
<div style="height: 40px;"></div>
<!-- Čakajúca hláška -->
<v-alert v-if="loading" density="compact" text="Prosím čakajte..." title="Spracovávam" type="info"
class="mx-auto alert"></v-alert>
<LoadingAlert />
<!-- Chybová hláška -->
<v-alert v-if="action_error !== null" density="compact" :text="action_error" title="Chyba" type="error"
class="mx-auto alert"></v-alert>
<ErrorAlert v-if="action_error" :error="action_error" />
<div>
<h2>Základné informácie</h2>
<v-alert v-if="data?.status.status !== InternshipStatus.SUBMITTED" density="compact"
text='Vaša prax nie je v stave "Zadaná" a teda nemôžete meniť údaje.' title="Blokované" type="error"
class="mx-auto alert"></v-alert>
<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>
@@ -93,8 +90,8 @@ async function handleUpdateOfBasicInfo(internship: NewInternship) {
<div>
<h2>Nahratie dokumentov</h2>
<v-alert v-if="data?.status.status !== InternshipStatus.CONFIRMED" type="error" variant="tonal"
title="Blokované" text='Vaša prax nie je v stave "Schválená" a teda nemôžete nahrať dokumenty.' />
<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>

View File

@@ -35,8 +35,7 @@ const { data, error } = await useSanctumFetch<Internship[]>('/api/internships/my
<div style="height: 40px;"></div>
<!-- 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>
<ErrorAlert v-if="error" :error="error?.message" />
<v-table v-else>
<thead>

View File

@@ -34,8 +34,7 @@ const { data, error } = await useSanctumFetch<CompanyData[]>('/api/companies/sim
<div style="height: 40px;"></div>
<!-- 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>
<ErrorAlert v-if="error" :error="error?.message" />
<div v-else>
<p>Aktuálne spolupracujeme s {{ data?.length }} firmami.</p>

View File

@@ -54,8 +54,7 @@ const { data, error } = await useSanctumFetch<Internship[]>('/api/internships/my
<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>
<ErrorAlert v-if="error" :error="error?.message" />
<v-table v-else>
<thead>

View File

@@ -41,12 +41,10 @@ async function handleInternshipRegistration(internship: NewInternship) {
<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>
<LoadingAlert />
<!-- 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>
<ErrorAlert v-if="error" :error="error" />
<InternshipEditor v-show="!loading" :submit="handleInternshipRegistration" />
</v-card>

View File

@@ -52,18 +52,15 @@ async function handleUpdateOfBasicInfo(internship: NewInternship) {
<div style="height: 40px;"></div>
<!-- Čakajúca hláška -->
<v-alert v-if="loading" density="compact" text="Prosím čakajte..." title="Spracovávam" type="info"
class="mx-auto alert"></v-alert>
<LoadingAlert />
<!-- Chybová hláška -->
<v-alert v-if="action_error !== null" density="compact" :text="action_error" title="Chyba" type="error"
class="mx-auto alert"></v-alert>
<ErrorAlert v-if="action_error" :error="action_error" />
<div>
<h2>Základné informácie</h2>
<v-alert v-if="data?.status.status !== InternshipStatus.SUBMITTED" density="compact"
text='Vaša prax nie je v stave "Zadaná" a teda nemôžete meniť údaje.' title="Blokované" type="error"
class="mx-auto alert"></v-alert>
<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>
@@ -87,8 +84,8 @@ async function handleUpdateOfBasicInfo(internship: NewInternship) {
<div>
<h2>Nahratie dokumentov</h2>
<v-alert v-if="data?.status.status !== InternshipStatus.CONFIRMED" type="error" variant="tonal"
title="Blokované" text='Vaša prax nie je v stave "Schválená" a teda nemôžete nahrať dokumenty.' />
<ErrorAlert v-if="data?.status.status !== InternshipStatus.CONFIRMED"
text='Vaša prax nie je v stave "Schválená" a teda nemôžete nahrať dokumenty.' />
<InternshipDocumentEditor v-else :internship="data!" @successful-submit="refresh" />
</div>

View File

@@ -50,12 +50,10 @@ async function handleLogin() {
<h2 class="page-title">Prihlásenie</h2>
<!-- Chybová hláška -->
<v-alert v-if="error !== null" density="compact" :text="error" title="Chyba" type="error"
id="login-error-alert" class="mx-auto alert"></v-alert>
<ErrorAlert v-if="error" :error="error" />
<!-- Čakajúca hláška -->
<v-alert v-if="loading" density="compact" text="Prosím čakajte..." title="Spracovávam" type="info"
id="login-error-alert" class="mx-auto alert"></v-alert>
<LoadingAlert v-if="loading" />
<v-form v-else v-model="isValid" @submit.prevent="handleLogin">
<v-text-field v-model="form.email" :rules="[rules.required, rules.email]" label="Email:"

View File

@@ -77,12 +77,10 @@ async function handleRegistration() {
<h4 class="page-title">Registrácia firmy</h4>
<!-- Chybová hláška -->
<v-alert v-if="error !== null" density="compact" :text="error" title="Chyba" type="error"
id="login-error-alert" class="mx-auto"></v-alert>
<ErrorAlert v-if=error :error="error" />
<!-- Čakajúca hláška -->
<v-alert v-if="loading" density="compact" text="Prosím čakajte..." title="Spracovávam" type="info"
id="login-error-alert" class="mx-auto"></v-alert>
<LoadingAlert v-if="loading" />
<v-form v-else v-model="isValid" @submit.prevent="handleRegistration">
<v-text-field v-model="form.name" :rules="[rules.required]" label="Názov firmy:" variant="outlined"

View File

@@ -85,12 +85,10 @@ async function handleRegistration() {
<h4 class="page-title">Registrácia študenta</h4>
<!-- Chybová hláška -->
<v-alert v-if="error !== null" density="compact" :text="error" title="Chyba" type="error"
id="login-error-alert" class="mx-auto alert"></v-alert>
<ErrorAlert v-if="error" :error="error" />
<!-- Čakajúca hláška -->
<v-alert v-if="loading" density="compact" text="Prosím čakajte..." title="Spracovávam" type="info"
id="login-error-alert" class="mx-auto alert"></v-alert>
<LoadingAlert v-if="loading" />
<v-form v-else v-model="isValid" @submit.prevent="handleRegistration">
<v-text-field v-model="form.firstName" :rules="[rules.required]" label="Meno:" variant="outlined"

View File

@@ -50,12 +50,10 @@ async function handleReset() {
<h2 class="page-title">Reset hesla</h2>
<!-- Chybová hláška -->
<v-alert v-if="error !== null" density="compact" :text="error" title="Chyba" type="error"
id="login-error-alert" class="alert mx-auto"></v-alert>
<ErrorAlert v-if="error" :error="error" />
<!-- Čakajúca hláška -->
<v-alert v-if="loading" density="compact" text="Prosím čakajte..." title="Spracovávam" type="info"
id="login-error-alert" class="alert mx-auto"></v-alert>
<LoadingAlert v-if="loading" />
<v-form v-else v-model="isValid" @submit.prevent="handleReset">
<v-text-field v-model="email" :rules="[rules.required, rules.email]" label="Email:" variant="outlined"

View File

@@ -16,8 +16,7 @@ useSeoMeta({
<v-card id="page-container-card">
<h2 class="page-title">Reset hesla</h2>
<v-alert density="compact" text="Nové heslo vám bolo zaslané na e-mail" title="Reset hesla" type="info"
class="mx-auto"></v-alert>
<InfoAlert title="Reset hesla" text="Nové heslo vám bolo zaslané na e-mail" />
</v-card>
</v-container>
</template>