usite-sas-bic/sirpremiumv2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

notificaciones pulida

Browse Source
This commit is contained in:
Felipe
2023-10-23 11:55:43 -05:00
parent 1d3fac965d
commit 42604a658c
2 changed files with 54 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/Http/Livewire/Bell.php
+25 -3
View File
@@ -2,15 +2,37 @@
namespace App\Http\Livewire;
use App\Models\Notificacion;
use Illuminate\Support\Facades\Auth;
use Livewire\Component;
class Bell extends Component
{
public $noti = 8;
public $notificaciones = false;
public $numNoti = 0;
public $menuNotificaciones = false;
public function render()
{
return view('livewire.bell');
$consulta = Notificacion::where('estado', true)
->where(function ($query) {
$query->where('todos', true)
->orWhere('destinatario_id', Auth::user()->id);
})->orderBy('created_at', 'desc')
->get();
$this->numNoti = count($consulta);
return view('livewire.bell', [
'consulta' => $consulta
]);
}
public function deleteNotificacion($id)
{
$notificacion = Notificacion::find($id);
if ($notificacion) {
$notificacion->update(['estado' => false]);
}
}
}
resources/views/livewire/bell.blade.php
+29 -13
View File
@@ -1,20 +1,36 @@
<div class="flex justify-center items-center" x-data="{ notificaciones: @entangle('notificaciones') }">
<div class="flex justify-center items-center" x-data="{ menuNotificaciones: @entangle('menuNotificaciones') }">
<div class="fill-[{{ App\Models\Configuracione::Orderby('id', 'desc')->first()->color_boton }}] relative cursor-pointer"
@click="notificaciones=!notificaciones">
<span
class="absolute top-0 left-0 bg-red-500 rounded-full w-5 h-5 flex justify-center items-center text-xs text-white">
{{ $noti > 9 ? '9+' : $noti }}
</span>
wire:click="$refresh" @click="menuNotificaciones=!menuNotificaciones">
@if ($numNoti != 0)
<span class="absolute top-0 left-0 bg-red-500 rounded-full w-5 h-5 flex justify-center items-center text-xs text-white">
{{ $numNoti > 9 ? '9+' : $numNoti }}
</span>
@endif
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" class="w-10">
<path
d="M200-200q-17 0-28.5-11.5T160-240q0-17 11.5-28.5T200-280h40v-280q0-83 50-147.5T420-792v-28q0-25 17.5-42.5T480-880q25 0 42.5 17.5T540-820v28q80 20 130 84.5T720-560v280h40q17 0 28.5 11.5T800-240q0 17-11.5 28.5T760-200H200Zm280-300Zm0 420q-33 0-56.5-23.5T400-160h160q0 33-23.5 56.5T480-80ZM320-280h320v-280q0-66-47-113t-113-47q-66 0-113 47t-47 113v280Z" />
<path d="M200-200q-17 0-28.5-11.5T160-240q0-17 11.5-28.5T200-280h40v-280q0-83 50-147.5T420-792v-28q0-25 17.5-42.5T480-880q25 0 42.5 17.5T540-820v28q80 20 130 84.5T720-560v280h40q17 0 28.5 11.5T800-240q0 17-11.5 28.5T760-200H200Zm280-300Zm0 420q-33 0-56.5-23.5T400-160h160q0 33-23.5 56.5T480-80ZM320-280h320v-280q0-66-47-113t-113-47q-66 0-113 47t-47 113v280Z" />
</svg>
</div>
<div x-cloak x-show="notificaciones" @click.outside="notificaciones = false" class="absolute top-14 right-32 rounded-lg border border-[{{ App\Models\Configuracione::Orderby('id', 'desc')->first()->color_boton }}] bg-white w-96 h-96 z-50">
<div>
hola hola
hola
</div>
<div x-cloak x-show="menuNotificaciones" @click.outside="menuNotificaciones = false" class="absolute top-14 right-32 rounded-lg border overflow-y-auto border-[{{ App\Models\Configuracione::Orderby('id', 'desc')->first()->color_boton }}] bg-white w-96 h-96 z-50">
<ul class="p-4">
@foreach ($consulta as $item)
<li class="px-2 py-1 mb-2 border border-gray-300 rounded-lg relative" wire:loading.class="opacity-50 cursor-wait">
<h4 class="font-bold text-base text-[{{ App\Models\Configuracione::Orderby('id', 'desc')->first()->color_boton }}]">
{{ $item->titulo }}
</h4>
<p class="text-sm">
{{ $item->descripcion }}
</p>
@if (!$item->todos)
<span class="text-red-500 font-semibold absolute top-0 right-2 cursor-pointer select-none" wire:click="deleteNotificacion({{ $item->id }})" wire:loading.remove>
x
</span>
<span class="text-gray-400 font-semibold absolute top-0 right-2 cursor-wait select-none" wire:loading>
x
</span>
@endif
</li>
@endforeach
</ul>
</div>
</div>