Alejandro Schwegler
Alejandro Schwegler
PHP
Comparte:

Marcar Notificaciones como leídas con re-dirección

Buenos días!
Estoy siguiendo el tutorial de notificaciones y a diferencia de como lo realizas vos, yo al momento de marcar como leídas las notificaciones lo hago un poco distinto.
En vez de utilizar un "button" para marcarla como leída, lo que hago es prevenir el comportamiento por defecto de la etiqueta "<a>":
 
<a href="#" onclick="event.preventDefault(); document.getElementById('marcarleido-form').submit();">
             Emergencia: {{$notificacionnoleida->data['titulo']}}
</a>

Lo que hago en vez de mostrar la información con dicha etiqueta es hacer submit al formulario que está bastante parecido al del tutorial.
 
<form id="marcarleido-form"
 action="{{ route('notificacion.marcarvisto', $notificacionnoleida->id) }}"
 method="POST"
 style="display: none;">
             @csrf {{ method_field('PATCH') }}
</form> 

Éste formulario se dirige al controlador de notificaciones y llama a la función "marcarvisto".
 
    public function marcarvisto($id){
        $noticacion = DatabaseNotification::find($id);
        $noticacion->markAsRead();
        return Redirect(route('emergencia.info', $noticacion->data['id']));
    } 

Luego de marcar como vista la notificación, retorna una re-dirección hacia el controlador de emergencias, que se encarga de retornar la vista de la emergencia registrada.
UNA VEZ TERMINADA LA EXPLICACIÓN DEL ACTUAL FUNCIONAMIENTO DE MI TRABAJO HASTA EL MOMENTO, PASO A EXPLICAR MI PROBLEMA:
Lo siguiente es mi único inconveniente, ya que las notificaciones se marcan como leídas sin problemas y consigo que se me redirija a la vista de emergencia correctamente.
Como habrán notado, para realizar el submit con la etiqueta <a> capturo el id del formulario, el cual se crea uno por cada notificación que tenga, por lo tanto al hacer click en alguna notificación sin importar cual sea (de las no leídas), siempre me va a capturar la primera, ya que todos los forms tienen el mismo id.
¿Existe alguna manera de cambiar el id de los formularios de forma dinámica por cada notificación no leída que tenga?

Muchas gracias y espero su respuesta.
Alejandro Schwegler
Alejandro Schwegler (0 xp)
Luego de despejarme un rato, ir a clases y volver a sentarme y pensar un poco mas decidí intentar colocar de id del formulario el id de la emergencia guardado en el campo data de la notificación, ésto me permite realizar la asignación dinámica que buscaba y ya tengo solucionado el problema.
Les dejo cómo quedó el código, por si alguien tiene un problema similar le pueda ayudar:
Recomendación al margen de todo ésto->El espacio para realizar una respuesta a una pregunta es sumamente pequeño y complicado de editar. Saludos!
   
                    @foreach ($notificacionesnoleidas as $notificacionnoleida)
                        
                            <li class="list-group-item">
                                <a href="#" onclick="event.preventDefault(); document.getElementById('{{$notificacionnoleida->data['id']}}').submit();">
                                    Emergencia: {{$notificacionnoleida->data['titulo']}}
                                </a>
                                <form id="{{$notificacionnoleida->data['id']}}"
                                action="{{ route('notificacion.marcarvisto', $notificacionnoleida->id) }}"
                                method="POST"
                                style="display: none;">
                                    @csrf {{ method_field('PATCH') }}
                                </form>
                            </li>
                        
                    @endforeach 
Jorge Davila
Jorge Davila (0 xp)
Lo que intentas hacer es mas facil lograrlo con vue, ya que su manejo de listas es bastante bueno. Leyendo tu pregunta no entiendo para que necesitas el id si lo unico que haces es enviar el formulario dentro del  li. Lo mas facil seria simplemente irte al elemento padre y buscar al hijo directamente, a menos que tengas planeado cambiar o agregar mas formularios a un mismo li.
Otra cosa, te recomiendo separar ese codigo de js y meterlo en una funcion ya que no solo es poco estetico e infumable al momento de revisar tu archivo sino que ademas estas repitiendo mucho codigo. Bastaria con algo como esto:
<script type="text/javascript">
  function beforeSubmit(event){
   event.preventDefault();
   let parent=event.target.parentElement;
parent.querySelector('form').submit();
}
</script>
Y en tus anchor simplemente añade dicho codigo de la siguiente manera:

<a onclick="beforeSubmit(event)">
 Submit
</a>
1
Alejandro Schwegler
Alejandro Schwegler (0 xp)
Gracias por la respuesta. Si bien es cierto que es todo un poco caótico, el código funciona... Y la asignación de ID dinámica a los formularios es necesaria porque creo un formulario por cada notificación dentro de un foreach, lo que genera que de otra manera todos los formularios tengan el mismo ID y eso es un problema. Éste es mi primer trabajo programando en web, por eso tengo pocos conocimientos y poco tiempo como para dejar todo muy lindo... Ahora lo importante es que funcione... Pero lo voy a tener en cuenta para más adelante.
1
Jorge Davila
Jorge Davila (0 xp)
Si entiendo esa parte, solo te lo comento por experiencia propia. Cuando intentes modificar eso, seria mas dificil manejarlo y en muchos trabajos "mas avanzados" te pediran ese tipo de practicas y seguir los patrones de D.R.Y y S.O.L.I.D por lo que , entre mas pronto te acostumbres a dichas practicas sera mejor para ti. Respecto al id realmente es simplemente un identificador unico en html, no es necesario a menos que tu proyecto sea muy grande y vayas a llamar dicho elemento desde algun lugar extraño pero debes pensar en que pasara si tienes un millon de notificaciones, entonces tendras un millon de ids y un millon de funciones que hacen lo mismo. Al final simplemente es una recomendacion, me alegra que te funcione, pero una vez que lo tengas funcional te recomiendo volver a el y ver como mejorar lo que ya tienes en base  a lo que has aprendido desde que comenzaste el proyecto a dicha fecha.
Alejandro Schwegler
Alejandro Schwegler (0 xp)
Estoy 100% de acuerdo con eso, estoy desarrollando éste sistema para mi trabajo final de la facultad y comenzó siendo una app móvil de Androiy, pero me lo cambiaron a web por temas de gestion del servicio... Por lo tanto me quitaron un mes entero de desarrollo y solo me dejaron poco más de dos meses. Te deje otra consulta en general si tienes unos minutos! Saludos!