refactor|feat: Aprimora transições e apaga cliente de forma permanente.

This commit is contained in:
lukibeg 2025-11-16 21:48:26 -03:00
parent c788a80d03
commit 4afc2b4e0a
1 changed files with 24 additions and 38 deletions

View File

@ -3,42 +3,35 @@
- 'showQuestion' controla a visibilidade.
- '@sure.window' é o evento que dispara a abertura.
-->
<div x-data="{showQuestion: false}"
@sure.window="showQuestion = true"
x-cloak {{-- x-cloak é bom para evitar "piscadas" na tela --}}
>
<div x-data="{showQuestion: false, clientId: null}" @sure.window="showQuestion = true; clientId = $event.detail.id"
x-cloak {{-- x-cloak é bom para evitar "piscadas" na tela --}}>
<!--
1. O OVERLAY (Fundo)
Copiado 1-para-1 do seu 'create-user'
-->
<div x-show="showQuestion"
class="modal-overlay"
x-transition:enter.duration.300ms
x-transition:leave.duration.300ms
>
<div x-show="showQuestion" class="modal-overlay" x-transition:enter.duration.300ms
x-transition:leave.duration.300ms>
<!--
2. O CONTAINER (Card)
Copiado 1-para-1 do seu 'create-user'
-->
<div x-on:click.outside="showQuestion = false"
x-show="showQuestion"
x-transition:enter="transition-enter"
x-transition:enter-start="transition-enter-start"
x-transition:enter-end="transition-enter-end"
x-transition:leave="transition-leave"
x-transition:leave-start="transition-leave-start"
x-transition:leave-end="transition-leave-end"
class="modal-container max-w-sm" {{-- Adicionei 'max-w-sm' para um modal de alerta menor --}}
>
<div x-on:click.outside="showQuestion = false" x-show="showQuestion" x-transition:enter="transition-enter"
x-transition:enter-start="transition-enter-start" x-transition:enter-end="transition-enter-end"
x-transition:leave="transition-leave" x-transition:leave-start="transition-leave-start"
x-transition:leave-end="transition-leave-end" class="modal-container max-w-sm" {{-- Adicionei 'max-w-sm'
para um modal de alerta menor --}}>
<!-- 3. O NOVO CONTEÚDO (Confirmação) -->
<!-- Ícone de Alerta -->
<div class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
<svg class="h-6 w-6 text-red-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
<div
class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
<svg class="h-6 w-6 text-red-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
</svg>
</div>
@ -47,12 +40,12 @@ class="modal-container max-w-sm" {{-- Adicionei 'max-w-sm' para um modal de aler
<h3 class="modal-title" id="modal-title">
Confirmar Exclusão
</h3>
<!-- Descrição -->
<div class="mt-2">
<p class="text-sm text-gray-500">
Você tem certeza que deseja excluir este cliente?
Todos os seus dados serão removidos permanentemente.
Você tem certeza que deseja excluir este cliente?
Todos os seus dados serão removidos permanentemente.
Esta ação não pode ser desfeita.
</p>
</div>
@ -60,24 +53,17 @@ class="modal-container max-w-sm" {{-- Adicionei 'max-w-sm' para um modal de aler
<!-- Botões (usando a estrutura do 'create-user') -->
<div class="form-footer mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
<!--
O botão "Sim, Excluir" deve vir primeiro no HTML
para o 'flex-row-reverse' funcionar.
-->
<button type="button"
{{--
Aqui, ele dispara o evento 'confirm-delete'
(que seu Livewire pode ouvir) e fecha o modal.
--}}
@click="$dispatch('confirm-delete'); showQuestion = false"
class="btn-submit bg-red-600 hover:bg-red-700 focus:ring-red-500 w-full sm:w-auto">
<button type="button" @click="$dispatch('confirm-delete', [clientId]); showQuestion = false"
class="btn-submit bg-red-600 hover:bg-red-700 focus:ring-red-500 w-full sm:w-auto">
Sim, Excluir
</button>
<button type="button"
@click="showQuestion = false"
class="btn-cancel mt-3 sm:mt-0 w-full sm:w-auto">
<button type="button" @click="showQuestion = false" class="btn-cancel mt-3 sm:mt-0 w-full sm:w-auto">
Cancelar
</button>
</div>