Marcar notificaciones como leídas
Comprar curso

24. Marcar notificaciones como leídas

En este capítulo, aprenderás a marcar las notificaciones como leídas cuando un usuario las haya visto. Aprenderás a actualizar la base de datos para marcar las notificaciones como leídas y a mostrar una marca de verificación en la interfaz de usuario para indicar que se ha leído la notificación. También aprenderás a eliminar las notificaciones leídas para evitar la sobrecarga de la base de datos.


7 comentarios

Inicia sesión para comentar

Comentarios:

  • Efrain Gregorio Challco Mamani

    Efrain Gregorio Challco Mamani hace 9 meses

    Buenos dias Victor, seria bueno un ejemplo con AdminLTE también, por favor, gracias.

    • Victor Arana Flores hace 8 meses

      Hola Efrain, AdminLTE no tiene nada que ver con la temática del curso. Pero es solo una plantilla asi que podrás integrarlo de manera facil. Saludos.

    • Efrain Gregorio Challco Mamani hace 8 meses

      Gracias

  • Germán Quen

    Germán Quen hace 1 año

    Muchas gracias por tu respuesta, te comparto el código

     

  • Germán Quen

    Germán Quen hace 1 año

    • Victor Arana Flores hace 1 año

      Necesitaría que publiques el codigo de tu backend

  • Germán Quen

    Germán Quen hace 1 año

    Hola victor, cuando hago click en la notificacion, me redirige al enlace pero no se marca como leida sino hasta que recargo la página, a que crees se deba.

    • Victor Arana Flores hace 1 año

      Hola German, necesitaría mas informacion (como tu codigo) para ver cual puede ser el error.

  • Jose Alberto Gomez Olivares

    Jose Alberto Gomez Olivares hace 1 año

    buena noche victor, a este punto, de curso, me lanza error 404, al dar click, para leer el mensaje, me dicde que no encuentra la ruta o vista http://localhost/admin/messages/4

    • Victor Arana Flores hace 1 año

      Hola Jose. Error 404 significa ruta no encontrada. 

      Te recomendaría que verifiques tus rutas.

  • Ramon Marquez

    Ramon Marquez hace 1 año

    Hola excelente curso victor, yo tengo una duda en Auth()→user()→notification(), como es posible que laravel tenga acceso a la tabla notificaciones cuando no se ha creado la relación en los modelos  por medio de un hasMany ???

    • Victor Arana Flores hace 1 año

      El modelo User tiene implementado el trait Notifiable, que a la vez implementa dos traits más.

      Ahi encontrarás todas las relaciones y funciones que usa laravel para poder trabajar con las notificaciones

    • Ramon Marquez hace 1 año

      Excelente Victor, ya estuve visualizando los archivos y ya me quedo mas claro. 

  • Martin Pereira

    Martin Pereira hace 1 año

    Hola, yo uso bootstrap 5, y al dar click en boton (email y el badge de notificacion), me oculta no solo el badge, tambien el icono feather

    y el comportamiento del dropdown se cierra solo, no permitiendome ver las notificaciones

     

    Ayuda con alguna solucion?

     

    Saludos

     

    <button type="button" wire:click="resetNotificationCount()" class="btn btn-icon btn-transparent-dark dropdown-toggle"

    id="navbarDropdownMessages" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"

    title="Emails">

    <i data-feather="mail"></i>

    @if (auth()->user()->notification)

    <span class="badge bg-danger rounded-circle">{{ auth()->user()->notification }}</span>

    @endif

    </button>

     

    @foreach ($notifications as $notification)

    <a wire:click="read('{{ $notification->id }}')"

    class="dropdown-item dropdown-notifications-item {{ !$notification->read_at ? 'bg-warning' : '' }}"

    href="{{ $notification->data['url'] }}">

    <img class="dropdown-notifications-item-img" src="{{ asset('images/profile/profile.svg') }}"

    width="40" height="40">

    <div class="dropdown-notifications-item-content">

    <div class="dropdown-notifications-item-content-text">

    {{ $notification->data['message'] }}

    </div>

    <div class="dropdown-notifications-item-content-details">Thomas Wilcox ·

    {{ $notification->created_at->diffForHumans() }}</div>

    </div>

    </a>

    @endforeach

    • Victor Arana Flores hace 1 año

      Hola Martín, los estilos no tienen nada que ver en este caso. Te recomiendo que revises con calma la funcionalidades. O trata de publicar capturas de codigo de todos los archivos involucrados en el grupo Coders Free de Facebook, donde yo y toda la comunidad podríamos revisarlo.

    • Martin Pereira hace 1 año

      Gracais Victor, en el tema de los estilos, estoy claro, pero las funciones como wire:click=, podrian dar conflito con el js de bootstrap o jquery? 

      Saludos y gracias por el consejo de Facebook (CodersFree)

    • Victor Arana Flores hace 1 año

      Si estás usando JQuery, si es posible que tengas conflictos.

      Basicamente es por esto. Tu cuando aplicas alguna funcionalidad ya sea con Javascript o Jquery, o alguna otra librería, se lo aplicas sobre algun elemento del dom. No obstante Livewire renderiza constantemente los elementos del dom, así que si aplicaste alguna funcionalidad js sobre un boton, luegode que livewire lo renderizo, ese boton fue reemplazado con otro boton, por lo cual deja de funcionar.

      Es algo así como si agregaras una funcion js, para que al hacer click sobre un boton, agregue otro boton en el dom. Cualquier boton que estaba inicialmente en el documento lo podrías usar para agregar nuevos botones. Pero los botones nuevos que se van agregando, a su vez no puedes utilizarlo para crear nuevos botones (por más que sean botones).

      Lo recomendable por eso es si es que quieres agregar funcionalidades js, utilices Alpine. Ya que Alpine se ejecutaría nuevamente cada vez que se renderiza y por tanto no tendrías ese incoveniente.

      Igual, si necesitas implementar codigo js sin Alpine, la documentación te indica como puedes hacerlo.

      https://laravel-livewire.com/docs/2.x/inline-scripts 

       

      Te comparto el link, y espero haber podido ayudar.

    • Martin Pereira hace 1 año

      muchas gracias Victor