526 lines
28 KiB
Vue
526 lines
28 KiB
Vue
<script setup>
|
|
import { ref, computed } from 'vue';
|
|
import { Head, Link, useForm, usePage } from '@inertiajs/vue3';
|
|
|
|
const page = usePage();
|
|
const ollamaAvailable = computed(() => page.props.ollamaAvailable);
|
|
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
|
|
import InputLabel from '@/Components/InputLabel.vue';
|
|
import TextInput from '@/Components/TextInput.vue';
|
|
import InputError from '@/Components/InputError.vue';
|
|
import PrimaryButton from '@/Components/PrimaryButton.vue';
|
|
import axios from 'axios';
|
|
|
|
const props = defineProps({
|
|
order: {
|
|
type: Object,
|
|
default: null,
|
|
},
|
|
isEdit: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
});
|
|
|
|
// Calcul de la date par défaut (+30 jours) au format YYYY-MM-DD
|
|
const getDefaultDeadline = () => {
|
|
const date = new Date();
|
|
date.setDate(date.getDate() + 30);
|
|
const year = date.getFullYear();
|
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
const day = String(date.getDate()).padStart(2, '0');
|
|
return `${year}-${month}-${day}`;
|
|
};
|
|
|
|
// Initialisation du formulaire Inertia
|
|
const form = useForm({
|
|
label: props.order?.data?.label || props.order?.label || '',
|
|
type: props.order?.data?.type || props.order?.type || 'Matériel réseau / serveur',
|
|
supplier: props.order?.data?.supplier || props.order?.supplier || '',
|
|
quote_number: props.order?.data?.quote_number || props.order?.quote_number || '',
|
|
amount_ht: props.order?.data?.amount_ht !== undefined && props.order?.data?.amount_ht !== null
|
|
? String(props.order.data.amount_ht)
|
|
: (props.order?.amount_ht !== undefined && props.order?.amount_ht !== null
|
|
? String(props.order.amount_ht)
|
|
: ''),
|
|
requested_by: props.order?.data?.requested_by || props.order?.requested_by || 'Jérémy',
|
|
prescriber: props.order?.data?.prescriber || props.order?.prescriber || '',
|
|
delivery_deadline: props.order?.data?.delivery_deadline || props.order?.delivery_deadline || getDefaultDeadline(),
|
|
notes: props.order?.data?.notes || props.order?.notes || '',
|
|
exclude_vat: props.order?.data?.exclude_vat || props.order?.exclude_vat || false,
|
|
quote_file: null,
|
|
delivery_note_file: null,
|
|
invoice_file: null,
|
|
_method: props.isEdit ? 'put' : 'post', // Pour supporter l'upload de fichier en PHP/Laravel lors de la mise à jour
|
|
});
|
|
|
|
// Calcul automatique du montant TTC (HT + 20% TVA) en temps réel
|
|
const amountTtc = computed(() => {
|
|
const ht = parseFloat(form.amount_ht);
|
|
if (isNaN(ht) || ht < 0) return 0;
|
|
if (form.exclude_vat) return ht.toFixed(2);
|
|
return (ht * 1.20).toFixed(2);
|
|
});
|
|
|
|
// Récupérer le fichier en cours d'édition si présent
|
|
const getExistingFile = (type) => {
|
|
const attachments = props.order?.data?.attachments || props.order?.attachments;
|
|
if (!attachments) return null;
|
|
return attachments.find(a => a.file_type === type);
|
|
};
|
|
|
|
// Soumission du formulaire
|
|
const submit = () => {
|
|
if (props.isEdit) {
|
|
const orderId = props.order?.data?.id || props.order?.id;
|
|
form.post(route('commandes.update', { commande: orderId }), {
|
|
forceFormData: true,
|
|
});
|
|
} else {
|
|
form.post(route('commandes.store'));
|
|
}
|
|
};
|
|
|
|
const isOcrLoading = ref(false);
|
|
const ocrError = ref(null);
|
|
const ocrSuccess = ref(false);
|
|
const selectedModel = ref('gemini');
|
|
|
|
const loadPdfJs = () => {
|
|
return new Promise((resolve, reject) => {
|
|
if (window.pdfjsLib) {
|
|
resolve(window.pdfjsLib);
|
|
return;
|
|
}
|
|
const script = document.createElement('script');
|
|
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.min.js';
|
|
script.onload = () => {
|
|
window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.worker.min.js';
|
|
resolve(window.pdfjsLib);
|
|
};
|
|
script.onerror = reject;
|
|
document.head.appendChild(script);
|
|
});
|
|
};
|
|
|
|
const convertPdfBlobToImageFile = async (file) => {
|
|
const pdfjsLib = await loadPdfJs();
|
|
const arrayBuffer = await file.arrayBuffer();
|
|
const loadingTask = pdfjsLib.getDocument({ data: arrayBuffer });
|
|
const pdf = await loadingTask.promise;
|
|
const page = await pdf.getPage(1);
|
|
|
|
const viewport = page.getViewport({ scale: 2.0 });
|
|
const canvas = document.createElement('canvas');
|
|
const context = canvas.getContext('2d');
|
|
canvas.height = viewport.height;
|
|
canvas.width = viewport.width;
|
|
|
|
await page.render({ canvasContext: context, viewport }).promise;
|
|
|
|
return new Promise((resolve) => {
|
|
canvas.toBlob((convertedBlob) => {
|
|
resolve(new File([convertedBlob], file.name.replace(/\.pdf$/i, '.png'), { type: 'image/png' }));
|
|
}, 'image/png');
|
|
});
|
|
};
|
|
|
|
const handleQuoteOcr = async () => {
|
|
if (!form.quote_file) return;
|
|
|
|
isOcrLoading.value = true;
|
|
ocrError.value = null;
|
|
ocrSuccess.value = false;
|
|
|
|
try {
|
|
let fileToSend = form.quote_file;
|
|
const isPdf = /\.pdf$/i.test(form.quote_file.name);
|
|
|
|
if ((selectedModel.value === 'ollama' || selectedModel.value === 'mistral') && isPdf) {
|
|
fileToSend = await convertPdfBlobToImageFile(form.quote_file);
|
|
}
|
|
|
|
const formData = new FormData();
|
|
formData.append('file', fileToSend);
|
|
formData.append('mode', selectedModel.value);
|
|
|
|
const response = await axios.post(route('attachments.ocr-upload'), formData, {
|
|
headers: {
|
|
'Content-Type': 'multipart/form-data'
|
|
}
|
|
});
|
|
|
|
if (response.data.success && response.data.data) {
|
|
const data = response.data.data;
|
|
if (data.supplier) form.supplier = data.supplier;
|
|
if (data.quote_number) form.quote_number = data.quote_number;
|
|
|
|
let totalHt = data.total_ht;
|
|
if ((totalHt === undefined || totalHt === null || parseFloat(totalHt) === 0) && data.items && data.items.length > 0) {
|
|
totalHt = data.items.reduce((sum, item) => sum + (parseFloat(item.quantite) || 0) * (parseFloat(item.prix_unitaire) || 0), 0);
|
|
}
|
|
if (totalHt !== undefined && totalHt !== null) {
|
|
form.amount_ht = String(parseFloat(totalHt).toFixed(2));
|
|
}
|
|
|
|
if (data.title && !form.label) {
|
|
form.label = data.title;
|
|
}
|
|
|
|
if (data.items && data.items.length > 0) {
|
|
let itemsStr = "\n\n--- Détails du devis extraits par OCR ---\n";
|
|
data.items.forEach(item => {
|
|
itemsStr += `- [${item.type}] ${item.designation} : ${item.quantite} x ${item.prix_unitaire} € HT\n`;
|
|
});
|
|
form.notes = (form.notes + itemsStr).trim();
|
|
}
|
|
|
|
ocrSuccess.value = true;
|
|
} else {
|
|
ocrError.value = response.data.message || "Une erreur est survenue lors de l'analyse.";
|
|
}
|
|
} catch (e) {
|
|
ocrError.value = e.response?.data?.message || "Erreur lors de l'analyse du fichier.";
|
|
console.error(e);
|
|
} finally {
|
|
isOcrLoading.value = false;
|
|
}
|
|
};
|
|
|
|
const orderTypes = [
|
|
'Matériel réseau / serveur',
|
|
'Licences logicielles',
|
|
'Consommables / câblage',
|
|
'Prestations / services',
|
|
];
|
|
|
|
const demandeurs = ['Jérémy', 'Sylvain', 'Kévin'];
|
|
</script>
|
|
|
|
<template>
|
|
<Head :title="isEdit ? `Modifier la Commande ${order?.data?.number || order?.number}` : 'Nouvelle Commande'" />
|
|
|
|
<AuthenticatedLayout>
|
|
<template #header>
|
|
<div class="flex items-center justify-between">
|
|
<h2 class="text-xl font-bold leading-tight text-slate-800 dark:text-slate-200">
|
|
{{ isEdit ? `Modifier la Commande ${order?.data?.number || order?.number}` : 'Nouvelle Demande de Commande' }}
|
|
</h2>
|
|
<Link
|
|
:href="isEdit ? route('commandes.show', { commande: order?.data?.id || order?.id }) : route('commandes.index')"
|
|
class="inline-flex items-center px-4 py-2 text-sm font-semibold text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 dark:bg-slate-900 dark:text-slate-300 dark:border-slate-850 dark:hover:bg-slate-800 transition-colors"
|
|
>
|
|
Retour
|
|
</Link>
|
|
</div>
|
|
</template>
|
|
|
|
<div class="py-6">
|
|
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<!-- Formulaire -->
|
|
<div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-xl shadow-sm overflow-hidden">
|
|
<form @submit.prevent="submit" class="p-6 space-y-6">
|
|
|
|
<!-- Détails Article -->
|
|
<div class="border-b border-slate-100 dark:border-slate-850 pb-5">
|
|
<h3 class="text-md font-bold text-slate-800 dark:text-slate-200 mb-1">
|
|
Informations sur l'article
|
|
</h3>
|
|
<p class="text-xs text-slate-500 dark:text-slate-400">
|
|
Saisissez la référence ou le libellé principal du matériel ou service demandé.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<!-- Libellé article -->
|
|
<div class="md:col-span-3">
|
|
<InputLabel for="label" value="Libellé / Référence article" class="font-bold" />
|
|
<TextInput
|
|
id="label"
|
|
type="text"
|
|
class="mt-1 block w-full"
|
|
v-model="form.label"
|
|
required
|
|
placeholder="Ex: Serveur NAS Synology 8 baies ou 5x Licences Office 365"
|
|
/>
|
|
<InputError class="mt-2" :message="form.errors.label" />
|
|
</div>
|
|
|
|
<!-- Type de commande -->
|
|
<div>
|
|
<InputLabel for="type" value="Type de commande" class="font-bold" />
|
|
<select
|
|
id="type"
|
|
v-model="form.type"
|
|
class="mt-1 block w-full text-sm rounded-lg border-slate-300 shadow-sm focus:border-sky-500 focus:ring-sky-500 dark:bg-slate-950 dark:border-slate-800 dark:text-slate-200"
|
|
required
|
|
>
|
|
<option v-for="type in orderTypes" :key="type" :value="type">
|
|
{{ type }}
|
|
</option>
|
|
</select>
|
|
<InputError class="mt-2" :message="form.errors.type" />
|
|
</div>
|
|
|
|
<!-- Demandeur -->
|
|
<div>
|
|
<InputLabel for="requested_by" value="Demandeur" class="font-bold" />
|
|
<select
|
|
id="requested_by"
|
|
v-model="form.requested_by"
|
|
class="mt-1 block w-full text-sm rounded-lg border-slate-300 shadow-sm focus:border-sky-500 focus:ring-sky-500 dark:bg-slate-950 dark:border-slate-800 dark:text-slate-200"
|
|
required
|
|
>
|
|
<option v-for="d in demandeurs" :key="d" :value="d">
|
|
{{ d }}
|
|
</option>
|
|
</select>
|
|
<InputError class="mt-2" :message="form.errors.requested_by" />
|
|
</div>
|
|
|
|
<!-- Prescripteur -->
|
|
<div>
|
|
<InputLabel for="prescriber" value="Prescripteur / Service à l'origine" class="font-bold" />
|
|
<TextInput
|
|
id="prescriber"
|
|
type="text"
|
|
class="mt-1 block w-full"
|
|
v-model="form.prescriber"
|
|
required
|
|
placeholder="Ex: Service RH, Urbanisme..."
|
|
/>
|
|
<InputError class="mt-2" :message="form.errors.prescriber" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Fournisseur & Devis -->
|
|
<div class="border-b border-slate-100 dark:border-slate-850 pb-5 pt-4">
|
|
<h3 class="text-md font-bold text-slate-800 dark:text-slate-200 mb-1">
|
|
Fournisseur & Devis
|
|
</h3>
|
|
<p class="text-xs text-slate-500 dark:text-slate-400">
|
|
Références d'acquisition et détails financiers.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<!-- Fournisseur -->
|
|
<div>
|
|
<InputLabel for="supplier" value="Fournisseur" class="font-bold" />
|
|
<TextInput
|
|
id="supplier"
|
|
type="text"
|
|
class="mt-1 block w-full"
|
|
v-model="form.supplier"
|
|
required
|
|
placeholder="Ex: LDLC Pro, Dell France..."
|
|
/>
|
|
<InputError class="mt-2" :message="form.errors.supplier" />
|
|
</div>
|
|
|
|
<!-- Numéro de devis -->
|
|
<div>
|
|
<InputLabel for="quote_number" value="Numéro de devis" class="font-bold" />
|
|
<TextInput
|
|
id="quote_number"
|
|
type="text"
|
|
class="mt-1 block w-full"
|
|
v-model="form.quote_number"
|
|
required
|
|
placeholder="Ex: DEV-2026-99182"
|
|
/>
|
|
<InputError class="mt-2" :message="form.errors.quote_number" />
|
|
</div>
|
|
|
|
<!-- Montant HT -->
|
|
<div>
|
|
<InputLabel for="amount_ht" value="Montant HT (€)" class="font-bold" />
|
|
<TextInput
|
|
id="amount_ht"
|
|
type="number"
|
|
step="0.01"
|
|
min="0"
|
|
class="mt-1 block w-full"
|
|
v-model="form.amount_ht"
|
|
required
|
|
placeholder="0.00"
|
|
/>
|
|
<InputError class="mt-2" :message="form.errors.amount_ht" />
|
|
|
|
<div class="mt-3 flex items-center">
|
|
<input
|
|
id="exclude_vat"
|
|
type="checkbox"
|
|
v-model="form.exclude_vat"
|
|
class="rounded border-gray-300 text-sky-600 shadow-sm focus:ring-sky-500 dark:border-gray-700 dark:bg-gray-900"
|
|
/>
|
|
<label for="exclude_vat" class="ml-2 text-xs font-semibold text-slate-600 dark:text-slate-400 cursor-pointer select-none">
|
|
Exonérer de TVA / Non soumis à la TVA
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Montant TTC (calculé) -->
|
|
<div>
|
|
<InputLabel for="amount_ttc" :value="form.exclude_vat ? 'Montant TTC (€) - Sans TVA' : 'Montant TTC (€) - TVA 20 % (Calculé)'" class="font-bold text-slate-400" />
|
|
<input
|
|
id="amount_ttc"
|
|
type="text"
|
|
readonly
|
|
class="mt-1 block w-full text-sm rounded-lg border-slate-300 bg-slate-50 text-slate-500 shadow-sm focus:border-slate-300 focus:ring-0 dark:bg-slate-950 dark:border-slate-850 dark:text-slate-400 cursor-not-allowed font-semibold"
|
|
:value="new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(amountTtc)"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Date souhaitée de livraison -->
|
|
<div>
|
|
<InputLabel for="delivery_deadline" value="Date souhaitée de livraison" class="font-bold" />
|
|
<TextInput
|
|
id="delivery_deadline"
|
|
type="date"
|
|
class="mt-1 block w-full"
|
|
v-model="form.delivery_deadline"
|
|
required
|
|
/>
|
|
<InputError class="mt-2" :message="form.errors.delivery_deadline" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pièces jointes -->
|
|
<div class="border-b border-slate-100 dark:border-slate-850 pb-5 pt-4">
|
|
<h3 class="text-md font-bold text-slate-800 dark:text-slate-200 mb-1">
|
|
Pièces jointes (PDF, Images, Word, Excel)
|
|
</h3>
|
|
<p class="text-xs text-slate-500 dark:text-slate-400">
|
|
Joignez les fichiers officiels pour le cycle de vie de la commande.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<!-- Devis -->
|
|
<div class="space-y-2">
|
|
<InputLabel for="quote_file" value="Devis initial (PDF, Image...)" class="font-bold" />
|
|
<input
|
|
id="quote_file"
|
|
type="file"
|
|
@input="form.quote_file = $event.target.files[0]"
|
|
class="block w-full text-xs text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-xs file:font-semibold file:bg-sky-50 file:text-sky-700 hover:file:bg-sky-100 dark:file:bg-slate-800 dark:file:text-slate-300"
|
|
/>
|
|
<div v-if="form.quote_file" class="mt-2 flex flex-col gap-2">
|
|
<!-- Sélecteur de modèle -->
|
|
<div class="flex items-center gap-2 bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 rounded-lg px-2.5 py-1.5 shadow-sm">
|
|
<span class="text-xxs text-slate-500 dark:text-slate-400">Modèle OCR :</span>
|
|
<select v-model="selectedModel" class="text-xxs font-semibold border-0 p-0 pr-6 focus:ring-0 bg-transparent text-slate-700 dark:text-slate-300">
|
|
<option value="gemini">Gemini API</option>
|
|
<option value="mistral">Mistral AI</option>
|
|
<option v-if="ollamaAvailable" value="ollama">GLM-OCR (Ollama)</option>
|
|
</select>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
@click="handleQuoteOcr"
|
|
:disabled="isOcrLoading"
|
|
class="inline-flex items-center justify-center gap-1.5 px-3 py-1.5 text-xs font-semibold text-white bg-gradient-to-r from-violet-600 to-indigo-600 hover:from-violet-500 hover:to-indigo-500 rounded-lg shadow-sm focus:outline-none transition-all disabled:opacity-50"
|
|
>
|
|
<svg v-if="isOcrLoading" class="animate-spin h-3.5 w-3.5 text-white" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
<span>✨ {{ isOcrLoading ? 'Analyse...' : 'Analyser le devis (OCR)' }}</span>
|
|
</button>
|
|
<p v-if="ocrError" class="text-xxs font-semibold text-rose-600 mt-1">{{ ocrError }}</p>
|
|
<p v-if="ocrSuccess" class="text-xxs font-semibold text-emerald-600 mt-1">✓ Devis analysé avec succès !</p>
|
|
</div>
|
|
<div v-if="getExistingFile('quote')" class="text-xs mt-1 text-slate-500">
|
|
Fichier existant :
|
|
<a :href="getExistingFile('quote').url" target="_blank" class="text-sky-600 dark:text-sky-400 hover:underline inline-flex items-center">
|
|
{{ getExistingFile('quote').file_name }}
|
|
</a>
|
|
</div>
|
|
<InputError class="mt-2" :message="form.errors.quote_file" />
|
|
</div>
|
|
|
|
<!-- Bon de livraison -->
|
|
<div class="space-y-2">
|
|
<InputLabel for="delivery_note_file" value="Bon de livraison" class="font-bold" />
|
|
<input
|
|
id="delivery_note_file"
|
|
type="file"
|
|
@input="form.delivery_note_file = $event.target.files[0]"
|
|
class="block w-full text-xs text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-xs file:font-semibold file:bg-sky-50 file:text-sky-700 hover:file:bg-sky-100 dark:file:bg-slate-800 dark:file:text-slate-300"
|
|
/>
|
|
<div v-if="getExistingFile('delivery_note')" class="text-xs mt-1 text-slate-500">
|
|
Fichier existant :
|
|
<a :href="getExistingFile('delivery_note').url" target="_blank" class="text-sky-600 dark:text-sky-400 hover:underline inline-flex items-center">
|
|
{{ getExistingFile('delivery_note').file_name }}
|
|
</a>
|
|
</div>
|
|
<InputError class="mt-2" :message="form.errors.delivery_note_file" />
|
|
</div>
|
|
|
|
<!-- Facture -->
|
|
<div class="space-y-2">
|
|
<InputLabel for="invoice_file" value="Facture d'achat" class="font-bold" />
|
|
<input
|
|
id="invoice_file"
|
|
type="file"
|
|
@input="form.invoice_file = $event.target.files[0]"
|
|
class="block w-full text-xs text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-xs file:font-semibold file:bg-sky-50 file:text-sky-700 hover:file:bg-sky-100 dark:file:bg-slate-800 dark:file:text-slate-300"
|
|
/>
|
|
<div v-if="getExistingFile('invoice')" class="text-xs mt-1 text-slate-500">
|
|
Fichier existant :
|
|
<a :href="getExistingFile('invoice').url" target="_blank" class="text-sky-600 dark:text-sky-400 hover:underline inline-flex items-center">
|
|
{{ getExistingFile('invoice').file_name }}
|
|
</a>
|
|
</div>
|
|
<InputError class="mt-2" :message="form.errors.invoice_file" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Notes libres -->
|
|
<div class="border-b border-slate-100 dark:border-slate-850 pb-5 pt-4">
|
|
<h3 class="text-md font-bold text-slate-800 dark:text-slate-200 mb-1">
|
|
Notes & Commentaires
|
|
</h3>
|
|
</div>
|
|
|
|
<div>
|
|
<InputLabel for="notes" value="Notes libres" class="font-bold" />
|
|
<textarea
|
|
id="notes"
|
|
rows="4"
|
|
class="mt-1 block w-full text-sm rounded-lg border-slate-300 shadow-sm focus:border-sky-500 focus:ring-sky-500 dark:bg-slate-950 dark:border-slate-800 dark:text-slate-200"
|
|
v-model="form.notes"
|
|
placeholder="Commentaires libres sur la commande, le suivi fournisseur, ou l'utilisation du matériel..."
|
|
></textarea>
|
|
<InputError class="mt-2" :message="form.errors.notes" />
|
|
</div>
|
|
|
|
<!-- Barre de boutons -->
|
|
<div class="flex items-center justify-end gap-3 pt-6 border-t border-slate-100 dark:border-slate-850">
|
|
<Link
|
|
:href="isEdit ? route('commandes.show', { commande: order?.data?.id || order?.id }) : route('commandes.index')"
|
|
class="inline-flex items-center px-4 py-2 border border-slate-300 text-sm font-semibold rounded-lg text-slate-700 bg-white hover:bg-slate-50 dark:bg-slate-900 dark:text-slate-300 dark:border-slate-850 dark:hover:bg-slate-800 transition-colors"
|
|
>
|
|
Annuler
|
|
</Link>
|
|
|
|
<PrimaryButton
|
|
type="submit"
|
|
:disabled="form.processing"
|
|
class="inline-flex items-center px-5 py-2.5 text-sm font-semibold text-white bg-sky-600 hover:bg-sky-500 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-sky-500 transition-colors"
|
|
>
|
|
<svg v-if="form.processing" class="animate-spin -ml-1 mr-3 h-4 w-4 text-white" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
{{ isEdit ? 'Mettre à jour' : 'Créer la demande' }}
|
|
</PrimaryButton>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AuthenticatedLayout>
|
|
</template>
|