UI: use modal for AI analysis errors

This commit is contained in:
jeremy bayse
2026-03-25 19:19:30 +01:00
parent 837bf367e9
commit 03006051a9

View File

@@ -126,9 +126,14 @@ const aiAnalysis = ref(props.candidate.ai_analysis || null);
const isAnalyzing = ref(false);
const selectedProvider = ref(props.ai_config?.default || 'ollama');
// Error Modal state
const showErrorModal = ref(false);
const modalErrorMessage = ref("");
const runAI = async () => {
if (!props.candidate.job_position_id) {
alert("Veuillez d'abord associer une fiche de poste à ce candidat.");
modalErrorMessage.value = "Veuillez d'abord associer une fiche de poste à ce candidat.";
showErrorModal.value = true;
return;
}
@@ -140,7 +145,8 @@ const runAI = async () => {
aiAnalysis.value = response.data;
} catch (error) {
console.error('AI Analysis Error:', error);
alert(error.response?.data?.error || "Une erreur est survenue lors de l'analyse.");
modalErrorMessage.value = error.response?.data?.error || "Une erreur est survenue lors de l'analyse.";
showErrorModal.value = true;
} finally {
isAnalyzing.value = false;
}
@@ -696,4 +702,28 @@ const runAI = async () => {
</div>
</Modal>
</AdminLayout>
<!-- Error Modal -->
<Modal :show="showErrorModal" @close="showErrorModal = false" maxWidth="md">
<div class="p-6">
<div class="flex items-center gap-4 mb-4 text-red-600">
<div class="flex-shrink-0 w-12 h-12 bg-red-100 dark:bg-red-900/30 rounded-full flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
</div>
<h2 class="text-xl font-bold">Attention</h2>
</div>
<p class="text-slate-600 dark:text-slate-400 mb-6">
{{ modalErrorMessage }}
</p>
<div class="flex justify-end">
<PrimaryButton @click="showErrorModal = false" class="!bg-red-600 hover:!bg-red-500 !border-none">
Fermer
</PrimaryButton>
</div>
</div>
</Modal>
</template>