feat: añadir sistema de valoraciones con formulario, vistas y templates

tienda/forms.py

@@ -369,4 +369,43 @@ class ResetPasswordPhase2Form(forms.Form):
         password = cleaned_data.get("password")
         verify_password = cleaned_data.get("verify_password")
         if password and verify_password and password != verify_password:
-            raise ValidationError("Las contraseñas no coinciden.")
+            raise ValidationError("Las contraseñas no coinciden.")
+
+
+class ReviewForm(forms.Form):
+    rating = forms.IntegerField(
+        label="Puntuación",
+        required=True,
+        min_value=1,
+        max_value=5,
+        widget=forms.HiddenInput()
+    )
+    title = forms.CharField(
+        label="Título",
+        max_length=200,
+        required=True,
+        widget=forms.TextInput(attrs={
+            'class': 'form-control',
+            'placeholder': 'Título de tu valoración'
+        })
+    )
+    content = forms.CharField(
+        label="Descripción",
+        max_length=2000,
+        required=True,
+        widget=forms.Textarea(attrs={
+            'class': 'form-control',
+            'rows': 5,
+            'placeholder': 'Comparte tu experiencia con este producto...'
+        })
+    )
+    images = forms.ImageField(
+        label="Imágenes (opcional)",
+        required=False,
+        validators=[validate_image_file],
+        widget=forms.ClearableFileInput(attrs={
+            'class': 'form-control',
+            'accept': 'image/*',
+            'multiple': True
+        })
+    )

tienda/templates/tienda/add_review.html

@@ -0,0 +1,112 @@
+{% extends "tienda/base.html" %}
+
+{% block content %}
+<div class="container py-4">
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item"><a href="{% url 'index' %}">Inicio</a></li>
+            <li class="breadcrumb-item"><a href="{% url 'producto' product.id %}">{{ product.name }}</a></li>
+            <li class="breadcrumb-item active" aria-current="page">Valorar Producto</li>
+        </ol>
+    </nav>
+
+    <div class="row justify-content-center">
+        <div class="col-md-8">
+            <div class="card shadow-sm">
+                <div class="card-body">
+                    <h4 class="card-title mb-4">
+                        {% if existing_review %}Actualizar{% else %}Añadir{% endif %} valoración: {{ product.name }}
+                    </h4>
+
+                    <form method="post" enctype="multipart/form-data">
+                        {% csrf_token %}
+
+                        <div class="mb-4">
+                            <label class="form-label">Puntuación</label>
+                            <div class="star-rating d-flex gap-2" id="star-rating">
+                                {% for i in "12345" %}
+                                <i class="bi bi-star fs-2 {% if form.initial.rating|default:0 >= i|add:0 %}text-warning{% else %}text-secondary{% endif %}" data-value="{{ i }}" style="cursor: pointer;"></i>
+                                {% endfor %}
+                            </div>
+                            <input type="hidden" name="rating" id="rating-input" value="{{ form.initial.rating|default:1 }}">
+                            {% if form.rating.errors %}
+                            <div class="text-danger small">{{ form.rating.errors }}</div>
+                            {% endif %}
+                        </div>
+
+                        <div class="mb-3">
+                            <label for="title" class="form-label">Título</label>
+                            {{ form.title }}
+                            {% if form.title.errors %}
+                            <div class="text-danger small">{{ form.title.errors }}</div>
+                            {% endif %}
+                        </div>
+
+                        <div class="mb-3">
+                            <label for="content" class="form-label">Descripción</label>
+                            {{ form.content }}
+                            {% if form.content.errors %}
+                            <div class="text-danger small">{{ form.content.errors }}</div>
+                            {% endif %}
+                        </div>
+
+                        <div class="mb-3">
+                            <label for="images" class="form-label">Imágenes (opcional)</label>
+                            {{ form.images }}
+                            <div class="form-text">Puedes subir hasta 5 imágenes</div>
+                        </div>
+
+                        <div class="d-grid gap-2">
+                            <button type="submit" class="btn btn-primary">
+                                {% if existing_review %}Actualizar{% else %}Enviar{% endif %} valoración
+                            </button>
+                            <a href="{% url 'producto' product.id %}" class="btn btn-outline-secondary">Cancelar</a>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const stars = document.querySelectorAll('#star-rating i');
+    const ratingInput = document.getElementById('rating-input');
+
+    function updateStars(value) {
+        stars.forEach((star, index) => {
+            if (index < value) {
+                star.classList.remove('text-secondary');
+                star.classList.add('text-warning');
+            } else {
+                star.classList.remove('text-warning');
+                star.classList.add('text-secondary');
+            }
+        });
+        ratingInput.value = value;
+    }
+
+    stars.forEach(star => {
+        star.addEventListener('click', function() {
+            const value = parseInt(this.dataset.value);
+            updateStars(value);
+        });
+
+        star.addEventListener('mouseenter', function() {
+            const value = parseInt(this.dataset.value);
+            stars.forEach((s, index) => {
+                if (index < value) {
+                    s.classList.remove('text-secondary');
+                    s.classList.add('text-warning');
+                }
+            });
+        });
+
+        star.addEventListener('mouseleave', function() {
+            updateStars(parseInt(ratingInput.value));
+        });
+    });
+});
+</script>
+{% endblock %}

tienda/templates/tienda/producto.html

@@ -62,4 +62,83 @@
         {{ product.description }}
     </div>
 </div>
+
+<div class="row mt-4">
+    <div class="col-md-12">
+        <h4 class="mb-3">Valoraciones</h4>
+        <div id="reviews-summary" class="mb-4">
+            <div class="d-flex align-items-center gap-3">
+                <div class="fs-4" id="average-rating">0.0</div>
+                <div>
+                    <div id="stars-display"></div>
+                    <small class="text-muted" id="reviews-count">0 valoraciones</small>
+                </div>
+                {% if can_review %}
+                <a href="{% url 'add_review' product.id %}" class="btn btn-sm btn-outline-primary ms-auto">Valorar este producto</a>
+                {% elif user.is_authenticated %}
+                <span class="text-muted ms-auto">Ya has valorado este producto</span>
+                {% else %}
+                <a href="{% url 'login' %}?next={% url 'producto' product.id %}" class="btn btn-sm btn-outline-primary ms-auto">Inicia sesión para valorar</a>
+                {% endif %}
+            </div>
+        </div>
+        <div id="reviews-list"></div>
+    </div>
+</div>
+
+<script>
+async function loadReviews() {
+    try {
+        const response = await fetch("{% url 'product_reviews' product.id %}");
+        const data = await response.json();
+        
+        document.getElementById('average-rating').textContent = data.average_rating;
+        document.getElementById('reviews-count').textContent = data.reviews_count + ' valoraciones';
+        
+        let starsHtml = '';
+        for (let i = 1; i <= 5; i++) {
+            starsHtml += `<span class="${i <= Math.round(data.average_rating) ? 'text-warning' : 'text-secondary'}">★</span>`;
+        }
+        document.getElementById('stars-display').innerHTML = starsHtml;
+        
+        const reviewsList = document.getElementById('reviews-list');
+        if (data.reviews.length === 0) {
+            reviewsList.innerHTML = '<p class="text-muted">Aún no hay valoraciones para este producto.</p>';
+        } else {
+            let reviewsHtml = '';
+            data.reviews.forEach(review => {
+                let imagesHtml = '';
+                if (review.images && review.images.length > 0) {
+                    imagesHtml = '<div class="mt-2">';
+                    review.images.forEach(img => {
+                        imagesHtml += `<img src="${img.image}" class="img-thumbnail me-1" style="max-width: 80px; max-height: 80px;" alt="">`;
+                    });
+                    imagesHtml += '</div>';
+                }
+                reviewsHtml += `
+                    <div class="card mb-3">
+                        <div class="card-body">
+                            <div class="d-flex justify-content-between align-items-start">
+                                <div>
+                                    <strong>${review.user}</strong>
+                                    <span class="text-warning ms-1">${'★'.repeat(review.rating)}</span>
+                                </div>
+                                <small class="text-muted">${new Date(review.created_at).toLocaleDateString('es-ES')}</small>
+                            </div>
+                            <h6 class="mt-2">${review.title}</h6>
+                            <p class="mb-1">${review.content}</p>
+                            ${imagesHtml}
+                        </div>
+                    </div>
+                `;
+            });
+            reviewsList.innerHTML = reviewsHtml;
+        }
+    } catch (error) {
+        console.error('Error loading reviews:', error);
+    }
+}
+
+loadReviews();
+</script>
 {% endblock %}

tienda/urls.py

@@ -68,5 +68,7 @@ urlpatterns = [
     path("sobre-nosotros", views.sobre_nosotros, name="sobre_nosotros"),
     path("ayuda", views.ayuda, name="ayuda"),
     path("reset-password", views.reset_password, name="reset_password"),
-    path("reset-password-phase2/<str:code>", views.reset_password_phase2, name="reset_password_phase2")
+    path("reset-password-phase2/<str:code>", views.reset_password_phase2, name="reset_password_phase2"),
+    path("producto/<int:product_id>/valorar/", views.add_review, name="add_review"),
+    path("api/producto/<int:product_id>/valoraciones/", views.product_reviews, name="product_reviews"),
 ]

tienda/views.py

@@ -6,8 +6,8 @@ from django.contrib.auth.decorators import login_required
 from django.contrib import messages
 
 from tienda.utilities import send_email
-from .models import User, Product, Category, Cart, CartItem, Image, Order, OrderItem, OrderMessage, ShippingAddress, StockReservation, StockReservationItem, VerificationCode, SavedPaymentMethod
+from .models import User, Product, Category, Cart, CartItem, Image, Order, OrderItem, OrderMessage, ShippingAddress, StockReservation, StockReservationItem, VerificationCode, SavedPaymentMethod, Review
-from .forms import ProductForm, SecondaryImageForm, UserLoginForm, UserRegisterForm, ProductEditForm, EditProfileForm, ChangePasswordForm, ShippingAddressForm, ResetPasswordForm, ResetPasswordPhase2Form
+from .forms import ProductForm, SecondaryImageForm, UserLoginForm, UserRegisterForm, ProductEditForm, EditProfileForm, ChangePasswordForm, ShippingAddressForm, ResetPasswordForm, ResetPasswordPhase2Form, ReviewForm
 from . import tasks
 from .vars import (
     PAGE_SIZE,
@@ -400,7 +400,11 @@ def producto(request: HttpRequest, id: int):
         # Cachear el producto por 5 minutos (300 segundos)
         cache.set(cache_key, product, 300)
     
-    return render(request, "tienda/producto.html", {"product": product})
+    can_review = False
+    if request.user.is_authenticated:
+        can_review = product.has_user_purchased(request.user) and not Review.objects.filter(product=product, user=request.user).exists()
+    
+    return render(request, "tienda/producto.html", {"product": product, "can_review": can_review})
 
 def categoria(request: HttpRequest, id: int):
     page = 1
@@ -2324,3 +2328,88 @@ def reset_password_phase2(request: HttpRequest, code: str):
             return render(request, "tienda/reset_password_phase2.html", {"form": form, "code": code})
     else:
         raise Http404()
+
+
+@login_required
+def add_review(request: HttpRequest, product_id: int):
+    product = get_object_or_404(Product, id=product_id)
+
+    if not product.has_user_purchased(request.user):
+        messages.error(request, "Solo puedes valorar productos que hayas comprado.")
+        return redirect(reverse("product_detail", args=[product_id]))
+
+    existing_review = Review.objects.filter(product=product, user=request.user).first()
+
+    if request.method == "POST":
+        form = ReviewForm(request.POST, request.FILES)
+        if form.is_valid():
+            rating = form.cleaned_data["rating"]
+            title = form.cleaned_data["title"]
+            content = form.cleaned_data["content"]
+
+            if existing_review:
+                existing_review.rating = rating
+                existing_review.title = title
+                existing_review.content = content
+                existing_review.save()
+                existing_review.images.clear()
+                review = existing_review
+                messages.success(request, "¡Tu valoración ha sido actualizada!")
+            else:
+                review = Review.objects.create(
+                    product=product,
+                    user=request.user,
+                    rating=rating,
+                    title=title,
+                    content=content
+                )
+                messages.success(request, "¡Gracias por tu valoración!")
+
+            uploaded_files = request.FILES.getlist("images")
+            for uploaded_file in uploaded_files:
+                image = Image.objects.create(
+                    name=f"Review {product.name} - {request.user.username}",
+                    image=uploaded_file
+                )
+                review.images.add(image)
+
+            return redirect(reverse("product_detail", args=[product_id]))
+    else:
+        initial_data = {}
+        if existing_review:
+            initial_data = {
+                "rating": existing_review.rating,
+                "title": existing_review.title,
+                "content": existing_review.content
+            }
+        form = ReviewForm(initial=initial_data)
+
+    return render(request, "tienda/add_review.html", {
+        "product": product,
+        "form": form,
+        "existing_review": existing_review
+    })
+
+
+def product_reviews(request: HttpRequest, product_id: int):
+    product = get_object_or_404(Product, id=product_id)
+    reviews = product.reviews.select_related("user").prefetch_related("images").all()
+
+    return JsonResponse({
+        "reviews": [
+            {
+                "id": r.id,
+                "user": r.user.username,
+                "rating": r.rating,
+                "title": r.title,
+                "content": r.content,
+                "images": [img.to_dict() for img in r.images.all()],
+                "created_at": r.created_at.isoformat(),
+                "is_owner": request.user.is_authenticated and r.user.id == request.user.id
+            }
+            for r in reviews
+        ],
+        "average_rating": product.get_average_rating(),
+        "reviews_count": product.get_reviews_count(),
+        "can_review": request.user.is_authenticated and product.has_user_purchased(request.user) and not Review.objects.filter(product=product, user=request.user).exists()
+    })