74 lines
3.1 KiB
Vue
74 lines
3.1 KiB
Vue
<script setup>
|
|
import { ref } from 'vue'
|
|
import { useForm, usePage } from '@inertiajs/vue3'
|
|
|
|
const props = defineProps({
|
|
show: Boolean,
|
|
commande: Object,
|
|
targetStatut: String,
|
|
})
|
|
|
|
const emit = defineEmits(['close'])
|
|
const page = usePage()
|
|
|
|
const form = useForm({ statut: '', commentaire: '' })
|
|
|
|
function submit() {
|
|
form.statut = props.targetStatut
|
|
form.patch(route('commandes.transition', props.commande.id), {
|
|
onSuccess: () => {
|
|
form.reset()
|
|
emit('close')
|
|
},
|
|
})
|
|
}
|
|
|
|
function close() {
|
|
form.reset()
|
|
emit('close')
|
|
}
|
|
|
|
const statutLabel = (s) => page.props.config?.statuts?.[s] ?? s
|
|
</script>
|
|
|
|
<template>
|
|
<Transition enter-from-class="opacity-0" enter-active-class="transition-opacity duration-150"
|
|
leave-to-class="opacity-0" leave-active-class="transition-opacity duration-150">
|
|
<div v-if="show" class="fixed inset-0 z-50 flex items-center justify-center">
|
|
<div class="absolute inset-0 bg-black/50" @click="close" />
|
|
<div class="relative w-full max-w-md rounded-xl bg-white p-6 shadow-xl mx-4">
|
|
<h3 class="text-lg font-semibold text-gray-900">Changer le statut</h3>
|
|
<p class="mt-1 text-sm text-gray-600">
|
|
Commande <strong>{{ commande?.numero_commande }}</strong> →
|
|
<strong>{{ statutLabel(targetStatut) }}</strong>
|
|
</p>
|
|
|
|
<form @submit.prevent="submit" class="mt-4 space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">
|
|
Commentaire
|
|
<span v-if="targetStatut === 'annulee'" class="text-red-500">*</span>
|
|
</label>
|
|
<textarea v-model="form.commentaire" rows="3"
|
|
:required="targetStatut === 'annulee'"
|
|
placeholder="Optionnel — précisez la raison si nécessaire"
|
|
class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500" />
|
|
<p v-if="form.errors.commentaire" class="mt-1 text-xs text-red-600">{{ form.errors.commentaire }}</p>
|
|
</div>
|
|
|
|
<div class="flex justify-end gap-3">
|
|
<button type="button" @click="close"
|
|
class="rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors">
|
|
Annuler
|
|
</button>
|
|
<button type="submit" :disabled="form.processing"
|
|
class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50 transition-colors">
|
|
{{ form.processing ? 'Mise à jour...' : 'Confirmer' }}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</template>
|