Proyecto Final - Parte 5

Introducción

En esta Parte V, nos centraremos en mejorar la funcionalidad de búsqueda de Contactos. Implementaremos un campo de búsqueda en la vista contact/index.html, que permitirá a los usuarios filtrar los contactos por nombre o apellido. Además, añadiremos algunos detalles visuales y mejoras en la interfaz de usuario.

Desarrollo

1. Añadir Funcionalidad de Búsqueda en la Vista index

Para implementar la búsqueda, necesitaremos actualizar la vista index en contact/views.py para recibir el parámetro de búsqueda (q) y filtrar los contactos en base a ese parámetro.

1.1 Modificar la Vista index en contact/views.py

En la vista index, actualizaremos la lógica para permitir la búsqueda de contactos por nombre o apellido:

from django.shortcuts import render, get_object_or_404, redirect
from django.db.models import Q 
from django.http import HttpResponse
from .forms import ContactForm
from .models import Contact

def index(request):
    query = request.GET.get('search', '')  # Obtener el parámetro de búsqueda
    if query:
        contacts = Contact.objects.filter(
            Q(name__icontains=query) | Q(last_name__icontains=query)
        )  # Filtrar por nombre o apellido
    else:
        contacts = Contact.objects.all()  # Mostrar todos los contactos si no hay búsqueda
    context = {
        'contacts': contacts,
    }
    return render(request, 'contact/index.html', context)

Explicación:

• Obtenemos el parámetro search de la solicitud GET. Si está presente, usamos el operador Q para realizar una búsqueda case-insensitive (sin distinguir mayúsculas de minúsculas) en los campos name y last_name.
• Si no hay parámetro de búsqueda, simplemente mostramos todos los contactos.

2. Actualizar la Plantilla index.html de Contactos

Ahora, vamos a añadir el formulario de búsqueda en la plantilla contact/index.html. Esto permitirá a los usuarios ingresar un término de búsqueda y filtrarlo dinámicamente.

2.1 Añadir el Campo de Búsqueda en contact/index.html

Añade el siguiente formulario de búsqueda al principio de la lista de contactos en contact/index.html:

{% extends 'layout/base.html' %}

{% block title %}Contactos{% endblock %}

{% block content %}
    <h1>Lista de Contactos</h1>

    <!-- Formulario de búsqueda -->
    <form method="GET" action="{% url 'contact_index' %}">
        <input type="text" name="search" value="{{ request.GET.search }}">
        <button type="submit">Buscar</button>
    </form>

    <ul class="list">
        {% for contact in contacts %}
            <li>
                <span class="contact-name">{{ contact.name }} {{ contact.last_name }}</span>
                <a href="{% url 'contact_detail' contact.id %}" class="btn-detail">Ver</a>
                <a href="{% url 'contact_edit' contact.id %}" class="btn-edit">Editar</a>
                <a href="{% url 'contact_delete' contact.id %}" class="btn-delete">Eliminar</a>
            </li>
        {% endfor %}
    </ul>

    <!-- Botón "Ver Todos" para limpiar la búsqueda -->
    {% if request.GET.search %}
        <div class="aux_btn">
            <a href="{% url 'contact_index' %}">Ver todos</a>
        </div>
    {% endif %}
{% endblock %}

4. Mejoras en la Interfaz de Usuario

En esta parte, hemos mejorado la interfaz de usuario con un formulario de búsqueda funcional, una mejora en el filtrado de contactos y una mejor visualización. La búsqueda de contactos por nombre o apellido ahora es sencilla y eficiente.

5. Verificación y Resumen

En esta Parte V, hemos añadido la funcionalidad de búsqueda de contactos, mejorando la vista de la lista de contactos. Los usuarios ahora pueden buscar contactos por nombre o apellido, y también hemos proporcionado la opción de limpiar la búsqueda y ver todos los contactos nuevamente.