Files
isop-mirror/frontend/app/components/InternshipStatusEditor.vue

92 lines
2.8 KiB
Vue

<script setup lang="ts">
import type { Internship } from '~/types/internships';
import { InternshipStatus, prettyInternshipStatus, type NewInternshipStatusData } from '~/types/internship_status';
import type { User } from '~/types/user';
import { FetchError } from 'ofetch';
const props = defineProps<{
internship: Internship
}>();
const emit = defineEmits(['successfulSubmit']);
const user = useSanctumUser<User>();
const rules = {
required: (v: any) => (!!v && String(v).trim().length > 0) || 'Povinné pole',
};
const isValid = ref(false);
const new_state = ref(null as InternshipStatus | null);
const note = ref("");
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, {
transform: (statuses: InternshipStatus[]) => statuses.map((state) => ({
title: prettyInternshipStatus(state),
value: state
}))
});
async function submit() {
save_error.value = null;
loading.value = true;
const new_status: NewInternshipStatusData = {
status: new_state.value!,
note: note.value,
};
try {
await client(`/api/internships/${props.internship.id}/status`, {
method: 'PUT',
body: new_status
});
new_state.value = null;
note.value = "";
refresh();
emit('successfulSubmit');
} catch (e) {
if (e instanceof FetchError) {
save_error.value = e.response?._data.message;
}
} finally {
loading.value = false;
}
}
</script>
<template>
<div>
<!-- Čakajúca hláška -->
<LoadingAlert v-if="loading" />
<!-- Chybová hláška -->
<ErrorAlert v-if="save_error" :error="`Nepodarilo uložiť: ${save_error}`" />
<!-- Chybová hláška -->
<ErrorAlert v-if="load_error" :error="`Nepodarilo sa načítať stavy: ${load_error}`" />
<!-- Chybová hláška -->
<WarningAlert v-else-if="data?.length === 0" title="Blokované"
text="Stav praxe už nie je možné meniť, pretože bola (ne)obhájená alebo zamietnutá. V prípade, že ste prax zamietli omylom, alebo ak máte technické problémy, prosíme kontaktovať garanta praxe." />
<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>
<v-btn type="submit" color="success" size="large" block :disabled="!isValid">
Uloziť
</v-btn>
</v-form>
</div>
</template>
<style scoped>
.alert {
margin-bottom: 10px;
}
</style>