feat: Modal de visualização de usuários cadastrados no sistema.
feat: Modal de visualização de usuários cadastrados no sistema.
This commit is contained in:
lukidev
GitHub
commit
1db9de9831
|
|
@ -1,6 +1,6 @@
|
|||
<?php
|
||||
|
||||
namespace App\Livewire\Admin;
|
||||
namespace App\Livewire\Admin\Client;
|
||||
|
||||
use App\Models\Client;
|
||||
use App\Services\ClientService;
|
||||
|
|
@ -43,6 +43,6 @@ public function save(ClientService $clientService)
|
|||
|
||||
public function render()
|
||||
{
|
||||
return view('livewire.admin.add-client');
|
||||
return view('livewire.admin.clients.add-client');
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<?php
|
||||
|
||||
namespace App\Livewire\Admin;
|
||||
namespace App\Livewire\Admin\Client;
|
||||
|
||||
use Livewire\Component;
|
||||
use Livewire\Attributes\On;
|
||||
|
|
@ -18,7 +18,7 @@ public function deleteClient($payload)
|
|||
$deletedClient->delete();
|
||||
}
|
||||
|
||||
$this->dispatch('clientDeleted');
|
||||
$this->dispatch('client-deleted');
|
||||
// (Opcional) Envia uma notificação de sucesso
|
||||
$this->dispatch('notify', message: 'Cliente excluído com sucesso!');
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<?php
|
||||
|
||||
namespace App\Livewire\Admin;
|
||||
namespace App\Livewire\Admin\Client;
|
||||
|
||||
use App\Livewire\Forms\ClientForm;
|
||||
use App\Models\Client;
|
||||
|
|
@ -48,6 +48,6 @@ public function edit(ClientService $clientService)
|
|||
}
|
||||
public function render()
|
||||
{
|
||||
return view('livewire.admin.edit-client');
|
||||
return view('livewire.admin.clients.edit-client');
|
||||
}
|
||||
}
|
||||
|
|
@ -2,10 +2,19 @@
|
|||
|
||||
namespace App\Livewire\Admin;
|
||||
|
||||
use App\Models\User;
|
||||
use App\Services\UserService;
|
||||
use Livewire\Component;
|
||||
|
||||
class ShowUsers extends Component
|
||||
{
|
||||
public $users = [];
|
||||
|
||||
public function mount(UserService $userService)
|
||||
{
|
||||
$this->users = $userService->showUsers();
|
||||
}
|
||||
public function show(UserService $userService) {}
|
||||
public function render()
|
||||
{
|
||||
return view('livewire.admin.show-users');
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<?php
|
||||
|
||||
namespace App\Livewire\Admin;
|
||||
namespace App\Livewire\Admin\User;
|
||||
|
||||
use App\Services\UserService;
|
||||
use Illuminate\Support\Facades\Auth;
|
||||
|
|
@ -54,6 +54,6 @@ public function createUser(UserService $userService)
|
|||
|
||||
public function render()
|
||||
{
|
||||
return view('livewire.admin.create-user');
|
||||
return view('livewire.admin.users.create-user');
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<?php
|
||||
|
||||
namespace App\Livewire\Admin\User\EditUser;
|
||||
|
||||
use Livewire\Component;
|
||||
|
||||
class EditUser extends Component
|
||||
{
|
||||
public function render()
|
||||
{
|
||||
return view('livewire.admin.users.edit-user.php');
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<?php
|
||||
|
||||
namespace App\Livewire\Admin;
|
||||
namespace App\Livewire;
|
||||
|
||||
use App\Models\Client;
|
||||
use Livewire\Component;
|
||||
|
|
@ -9,10 +9,9 @@
|
|||
class ShowClient extends Component
|
||||
{
|
||||
|
||||
#[On('clientDeleted')]
|
||||
#[On('client-deleted')]
|
||||
#[On('client-updated')]
|
||||
#[On('client-added')]
|
||||
public function refreshClientList() {}
|
||||
|
||||
public function render()
|
||||
{
|
||||
$clients = Client::all();
|
||||
|
|
@ -13,4 +13,10 @@ public function createUser(array $user)
|
|||
{
|
||||
return User::create($user);
|
||||
}
|
||||
|
||||
public function showUsers()
|
||||
{
|
||||
$users = User::all();
|
||||
return $users;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
@import './user-form-modal.css';
|
||||
@import './header.css';
|
||||
@import './client-cards.css';
|
||||
@import './user-view-modal.css';
|
||||
|
||||
@theme {
|
||||
--font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,71 @@
|
|||
@layer components {
|
||||
|
||||
|
||||
/* Adicione estas classes à camada @layer components do seu CSS */
|
||||
|
||||
/* --- Estrutura da Lista de Usuários --- */
|
||||
.user-list-content {
|
||||
/* Padding e limite de altura com scroll */
|
||||
@apply p-4 max-h-[500px] overflow-y-auto;
|
||||
}
|
||||
|
||||
.user-grid {
|
||||
@apply grid gap-4;
|
||||
}
|
||||
|
||||
.user-card-item {
|
||||
/* Estilo básico de cada item na lista */
|
||||
@apply flex justify-between items-center bg-gray-50 p-3 rounded-lg border border-gray-200 transition-shadow duration-150;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.user-card-item:hover {
|
||||
@apply shadow-md border-blue-300;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
@apply flex flex-col;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
@apply font-semibold text-gray-900;
|
||||
}
|
||||
|
||||
.user-email {
|
||||
@apply text-sm text-gray-500;
|
||||
}
|
||||
|
||||
.user-details {
|
||||
/* Garante que os itens fiquem alinhados e espaçados */
|
||||
@apply flex items-center space-x-3;
|
||||
}
|
||||
|
||||
.user-actions-group {
|
||||
/* Define o grupo de botões de ação */
|
||||
@apply flex space-x-2 ml-4;
|
||||
/* Espaçamento à esquerda para separar dos detalhes */
|
||||
}
|
||||
|
||||
.action-button {
|
||||
/* Estilo base para os ícones clicáveis */
|
||||
@apply p-1 rounded-full transition-colors duration-150;
|
||||
/* Cores já definidas inline: text-blue-600, text-red-600 */
|
||||
}
|
||||
|
||||
.action-button:hover {
|
||||
@apply bg-gray-200;
|
||||
}
|
||||
|
||||
.user-permission {
|
||||
/* Estilo para a tag de permissão */
|
||||
@apply text-xs font-medium px-2 py-0.5 rounded-full bg-blue-100 text-blue-800;
|
||||
}
|
||||
|
||||
.user-status {
|
||||
@apply text-xs text-green-600;
|
||||
}
|
||||
|
||||
/* *IMPORTANTE*: Se o modal ficar muito estreito, adicione w-full max-w-2xl à classe .modal-container
|
||||
ou crie uma classe específica para este modal.
|
||||
*/
|
||||
}
|
||||
|
|
@ -2,11 +2,11 @@
|
|||
<title> @yield('title', 'Nexus - Dashboard') </title>
|
||||
|
||||
@section('content')
|
||||
<livewire:admin.create-user />
|
||||
<livewire:admin.add-client />
|
||||
<livewire:admin.user.create-user />
|
||||
<livewire:admin.client.add-client />
|
||||
<livewire:admin.show-users />
|
||||
<livewire:admin.delete-client />
|
||||
<livewire:admin.client.delete-client />
|
||||
<x-are-you-sure />
|
||||
<livewire:admin.show-client />
|
||||
<livewire:admin.edit-client />
|
||||
<livewire:show-client />
|
||||
<livewire:admin.client.edit-client />
|
||||
@endsection
|
||||
|
|
@ -69,6 +69,7 @@
|
|||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="profile-items">
|
||||
<a @click="$dispatch('open-add-client')" class="profile-link">
|
||||
Adicionar clientes
|
||||
|
|
|
|||
|
|
@ -15,19 +15,12 @@ class="w-32 h-32 rounded-full object-cover">
|
|||
</svg>
|
||||
</button>
|
||||
|
||||
|
||||
<ul x-show="open" class="client-options-list" x-transition>
|
||||
|
||||
<li><a href="#" class="client-option-item">Ver Detalhes</a></li>
|
||||
<li><a href="#" class="client-option-item" x-on:click.prevent="$dispatch('view-client', { id: '{{ $client->id }}' })">Ver Detalhes</a></li>
|
||||
<li><a href=" #" class="client-option-item" x-on:click.prevent="$dispatch('update-client', { id: '{{ $client->id }}' })">Editar Cliente</a></li>
|
||||
<li>
|
||||
<a href="#" class="client-option-item text-red-600"
|
||||
x-on:click.prevent="$dispatch('sure', { id: '{{ $client->id }}' })">
|
||||
Excluir Cliente
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li><a href="#" class="client-option-item text-red-600" x-on:click.prevent="$dispatch('sure', { id: '{{ $client->id }}' })"> Excluir Cliente</a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="client-card-name">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,60 @@
|
|||
<div x-data="{showUsers: false}" x-on:show-users.window="showUsers = true">
|
||||
|
||||
<div x-data="{ showUsers: @entangle('showUsers') }" x-cloak
|
||||
x-on:show-users.window="showUsers = true"
|
||||
x-on:close-users-modal.window="showUsers = false"
|
||||
class="relative z-50"
|
||||
>
|
||||
<div x-show="showUsers" class="modal-overlay" x-transition:enter.duration.300ms x-transition:leave.duration.300ms>
|
||||
<div x-on:click.outside="showUsers = false" x-show="showUsers"
|
||||
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 w-full max-w-2xl"
|
||||
>
|
||||
<h3 class="modal-title">Usuários Cadastrados no Nexus</h3>
|
||||
|
||||
<div class="user-list-content">
|
||||
<div class="user-grid">
|
||||
@forelse ($users as $user)
|
||||
<div class="user-card-item">
|
||||
<div class="user-info">
|
||||
<span class="user-name">{{ $user->name }}</span>
|
||||
<span class="user-email">{{ $user->email }}</span>
|
||||
</div>
|
||||
<div class="user-details">
|
||||
{{-- <span class="user-permission">{{ ucfirst($user->permissions) }}</span> --}}
|
||||
<span class="user-status">Ativo</span>
|
||||
|
||||
<div class="user-actions-group">
|
||||
|
||||
<button @click="$dispatch('open-edit-user', { id: '{{ $user->id }}' }); showUsers = false"
|
||||
class="action-button text-blue-600 hover:text-blue-800 cursor-pointer"
|
||||
title="Editar Usuário">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button @click="$dispatch('confirm-delete-user', { id: '{{ $user->id }}' }); showUsers = false"
|
||||
class="action-button text-red-600 hover:text-red-800 cursor-pointer"
|
||||
title="Excluir Usuário">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.86 11.2a2 2 0 01-2 1.8H7.86a2 2 0 01-2-1.8L4.01 7h14.98zM9 5h6" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<p class="text-gray-500 col-span-full p-4">Nenhum usuário cadastrado.</p>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-footer">
|
||||
<button type="button" @click="showUsers = false" class="btn-cancel">
|
||||
Fechar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'View Users')
|
||||
|
||||
@section('content')
|
||||
<h1>View Users</h1>
|
||||
{{ dd($users) }}
|
||||
@endsection
|
||||
Loading…
Reference in New Issue