From 7933523d7c14988cc2519ef75818ab9bfc40a069 Mon Sep 17 00:00:00 2001
From: Carlos Tello <carlos.tello@istea.com.ar>
Date: Thu, 3 Sep 2026 20:36:20 -0300
Subject: [PATCH] feat: vista previa y modificacion de clases en salas
 virtuales y busqueda por codigo de materia

---
 app/routes/classrooms.py           |  17 ++-
 app/routes/schedule.py             |   4 +-
 app/templates/classrooms/list.html | 195 ++++++++++++++++++++++++++---
 3 files changed, 196 insertions(+), 20 deletions(-)

diff --git a/app/routes/classrooms.py b/app/routes/classrooms.py
index b2eaa70..fc2d75e 100644
--- a/app/routes/classrooms.py
+++ b/app/routes/classrooms.py
@@ -279,7 +279,8 @@ def list_classrooms():
                 'day_count': day_cnt,
                 'week_count': week_cnt,
                 'month_count': month_cnt,
-                'total_count': len(res_list)
+                'total_count': len(res_list),
+                'reservations': sorted(res_list, key=lambda x: x.start_time)
             })
 
         virtual_rooms.sort(key=lambda x: (x['subject_name'], x['commission_code']))
@@ -315,6 +316,20 @@ def list_classrooms():
         return render_template('classrooms/list.html', classrooms=None, title='Classrooms')
 
 
+@classrooms_bp.route('/virtual-room/<int:commission_id>/update-link', methods=['POST'])
+@login_required
+def update_virtual_link(commission_id):
+    """Actualizar enlace de videollamada para una comisión virtual"""
+    from app.models.subject import Commission
+    from flask_babel import gettext as _
+    comm = Commission.query.get_or_404(commission_id)
+    new_link = request.form.get('virtual_link', '').strip() or None
+    comm.virtual_link = new_link
+    db.session.commit()
+    flash(_('Enlace de videollamada para %(code)s actualizado correctamente.', code=comm.get_full_code()), 'success')
+    return redirect(request.referrer or url_for('classrooms.list_classrooms', view_mode='virtual'))
+
+
 @classrooms_bp.route('/<int:id>')
 @login_required
 def view_classroom(id):
diff --git a/app/routes/schedule.py b/app/routes/schedule.py
index f623d5f..da5e954 100644
--- a/app/routes/schedule.py
+++ b/app/routes/schedule.py
@@ -654,8 +654,10 @@ def list_reservations():
             or_(
                 Subject.name.ilike(f'%{search}%'),
                 Subject.code.ilike(f'%{search}%'),
+                Commission.code.ilike(f'%{search}%'),
                 Classroom.code.ilike(f'%{search}%'),
-                Reservation.purpose.ilike(f'%{search}%')
+                Reservation.purpose.ilike(f'%{search}%'),
+                Reservation.shift.ilike(f'%{search}%')
             )
         )
         
diff --git a/app/templates/classrooms/list.html b/app/templates/classrooms/list.html
index bb26330..f218d13 100644
--- a/app/templates/classrooms/list.html
+++ b/app/templates/classrooms/list.html
@@ -619,48 +619,207 @@
                         <div class="row g-1 text-center">
                             <!-- Hoy -->
                             <div class="col-4">
-                                <a href="{{ url_for('schedule.list_reservations', classroom_id=virtual_classroom_id, search=room.commission_code, date_from=date_filters.today, date_to=date_filters.today) }}" 
-                                   class="d-block p-1 text-decoration-none border metric-pill {% if room.day_count > 0 %}metric-low{% else %}metric-zero{% endif %}"
-                                   title="{% trans %}Ver clases de hoy para esta comisión{% endtrans %}">
+                                <div class="p-1 border metric-pill {% if room.day_count > 0 %}metric-low{% else %}metric-zero{% endif %}" 
+                                     data-bs-toggle="modal" data-bs-target="#modalPreviewVirtual{{ room.commission_id }}" 
+                                     role="button" title="{% trans %}Ver vista previa de clases de hoy{% endtrans %}">
                                     <div class="metric-label">{% trans %}Hoy{% endtrans %}</div>
                                     <div class="metric-val">{{ room.day_count }} cl.</div>
-                                </a>
+                                </div>
                             </div>
                             <!-- Semana -->
                             <div class="col-4">
-                                <a href="{{ url_for('schedule.list_reservations', classroom_id=virtual_classroom_id, search=room.commission_code, date_from=date_filters.week_start, date_to=date_filters.week_end) }}" 
-                                   class="d-block p-1 text-decoration-none border metric-pill {% if room.week_count > 0 %}metric-medium{% else %}metric-zero{% endif %}"
-                                   title="{% trans %}Ver clases de la semana para esta comisión{% endtrans %}">
+                                <div class="p-1 border metric-pill {% if room.week_count > 0 %}metric-medium{% else %}metric-zero{% endif %}" 
+                                     data-bs-toggle="modal" data-bs-target="#modalPreviewVirtual{{ room.commission_id }}" 
+                                     role="button" title="{% trans %}Ver vista previa de clases de la semana{% endtrans %}">
                                     <div class="metric-label">{% trans %}Semana{% endtrans %}</div>
                                     <div class="metric-val">{{ room.week_count }} cl.</div>
-                                </a>
+                                </div>
                             </div>
                             <!-- Mes -->
                             <div class="col-4">
-                                <a href="{{ url_for('schedule.list_reservations', classroom_id=virtual_classroom_id, search=room.commission_code, date_from=date_filters.month_start, date_to=date_filters.month_end) }}" 
-                                   class="d-block p-1 text-decoration-none border metric-pill {% if room.month_count > 0 %}metric-high{% else %}metric-zero{% endif %}"
-                                   title="{% trans %}Ver clases del mes para esta comisión{% endtrans %}">
+                                <div class="p-1 border metric-pill {% if room.month_count > 0 %}metric-high{% else %}metric-zero{% endif %}" 
+                                     data-bs-toggle="modal" data-bs-target="#modalPreviewVirtual{{ room.commission_id }}" 
+                                     role="button" title="{% trans %}Ver vista previa de clases del mes{% endtrans %}">
                                     <div class="metric-label">{% trans %}Mes{% endtrans %}</div>
                                     <div class="metric-val">{{ room.month_count }} cl.</div>
-                                </a>
+                                </div>
                             </div>
                         </div>
                     </div>
                 </div>
 
                 <!-- Footer con Botones -->
-                <div class="pt-2 border-top d-flex justify-content-between align-items-center">
-                    <a href="{{ url_for('schedule.list_reservations', classroom_id=virtual_classroom_id, search=room.commission_code) }}" 
-                       class="btn btn-sm btn-outline-primary py-0 px-2" style="font-size: 0.75rem;">
-                        <i class="bi bi-calendar-check me-1"></i>{% trans %}Ver Reservas{% endtrans %}
-                    </a>
+                <div class="pt-2 border-top d-flex justify-content-between align-items-center gap-1">
+                    <button type="button" class="btn btn-sm btn-primary py-1 px-2 d-flex align-items-center" 
+                            data-bs-toggle="modal" data-bs-target="#modalPreviewVirtual{{ room.commission_id }}" 
+                            style="font-size: 0.75rem;" title="{% trans %}Vista previa y modificar sesiones{% endtrans %}">
+                        <i class="bi bi-eye me-1"></i>{% trans %}Vista Previa{% endtrans %}
+                        <span class="badge bg-white text-primary ms-1" style="font-size: 0.65rem;">{{ room.total_count }}</span>
+                    </button>
                     <a href="{{ url_for('schedule.add_reservation') }}?commission_id={{ room.commission_id }}&is_virtual=1" 
-                       class="btn btn-sm btn-outline-success py-0 px-2" style="font-size: 0.75rem;" title="{% trans %}Programar clase en esta sala virtual{% endtrans %}">
+                       class="btn btn-sm btn-outline-success py-1 px-2" style="font-size: 0.75rem;" title="{% trans %}Programar clase en esta sala virtual{% endtrans %}">
                         <i class="bi bi-plus-lg me-1"></i>{% trans %}Programar{% endtrans %}
                     </a>
                 </div>
             </div>
         </div>
+
+        <!-- Modal Vista Previa y Modificación de la Sala Virtual -->
+        <div class="modal fade text-start" id="modalPreviewVirtual{{ room.commission_id }}" tabindex="-1" aria-hidden="true">
+            <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <div>
+                            <h5 class="modal-title h6 fw-bold mb-1">
+                                <i class="bi bi-laptop text-primary me-2"></i>{{ room.subject_name }}
+                            </h5>
+                            <div class="d-flex flex-wrap gap-1">
+                                <span class="badge bg-primary-subtle text-primary border" style="font-size: 0.7rem;">
+                                    <i class="bi bi-diagram-3 me-1"></i>Comisión {{ room.commission_code }}
+                                </span>
+                                {% if room.subject_code %}
+                                <span class="badge bg-secondary-subtle text-secondary border font-monospace" style="font-size: 0.7rem;">
+                                    {{ room.subject_code }}
+                                </span>
+                                {% endif %}
+                                <span class="badge bg-info-subtle text-info border" style="font-size: 0.7rem;">
+                                    <i class="bi bi-infinity me-1"></i>{% trans %}A Demanda · Capacidad Ilimitada{% endtrans %}
+                                </span>
+                                <span class="badge bg-light text-dark border" style="font-size: 0.7rem;">
+                                    {{ room.shift }}
+                                </span>
+                            </div>
+                        </div>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    </div>
+
+                    <div class="modal-body">
+                        <!-- 1. Enlace de Videollamada de la Comisión (Edición directa) -->
+                        <div class="card bg-body-tertiary border mb-3">
+                            <div class="card-body p-3">
+                                <div class="d-flex justify-content-between align-items-center mb-2">
+                                    <span class="fw-semibold small text-body">
+                                        <i class="bi bi-camera-video text-primary me-1"></i>{% trans %}Enlace de Videollamada (Zoom / Meet / Teams / Moodle){% endtrans %}
+                                    </span>
+                                    {% if room.virtual_link %}
+                                    <a href="{{ room.virtual_link }}" target="_blank" class="btn btn-sm btn-success py-0 px-2" style="font-size: 0.75rem;">
+                                        <i class="bi bi-box-arrow-up-right me-1"></i>{% trans %}Abrir Reunión{% endtrans %}
+                                    </a>
+                                    {% endif %}
+                                </div>
+                                <form method="POST" action="{{ url_for('classrooms.update_virtual_link', commission_id=room.commission_id) }}">
+                                    <div class="input-group input-group-sm">
+                                        <span class="input-group-text bg-body border"><i class="bi bi-link-45deg"></i></span>
+                                        <input type="url" name="virtual_link" class="form-control" 
+                                               placeholder="{% trans %}Ingresar URL de Zoom, Google Meet, Teams, etc.{% endtrans %}" 
+                                               value="{{ room.virtual_link or '' }}">
+                                        <button type="submit" class="btn btn-primary">
+                                            <i class="bi bi-save me-1"></i>{% trans %}Guardar Enlace{% endtrans %}
+                                        </button>
+                                    </div>
+                                    <small class="text-muted d-block mt-1" style="font-size: 0.7rem;">
+                                        {% trans %}Este enlace se aplicará a todas las clases y cursadas virtuales de esta comisión.{% endtrans %}
+                                    </small>
+                                </form>
+                            </div>
+                        </div>
+
+                        <!-- 2. Tabla de Clases / Sesiones Programadas -->
+                        <div class="d-flex justify-content-between align-items-center mb-2">
+                            <h6 class="fw-bold mb-0 text-body small">
+                                <i class="bi bi-calendar3 me-1 text-primary"></i>{% trans %}Sesiones Programadas en el Campus Virtual{% endtrans %} ({{ room.reservations|length }})
+                            </h6>
+                            <a href="{{ url_for('schedule.add_reservation') }}?commission_id={{ room.commission_id }}&is_virtual=1" class="btn btn-sm btn-outline-success py-0 px-2" style="font-size: 0.72rem;">
+                                <i class="bi bi-plus-lg me-1"></i>{% trans %}Nueva Clase{% endtrans %}
+                            </a>
+                        </div>
+
+                        {% if room.reservations %}
+                        <div class="table-responsive border rounded mb-2">
+                            <table class="table table-sm table-hover align-middle mb-0 small" style="font-size: 0.78rem;">
+                                <thead class="table-light">
+                                    <tr>
+                                        <th>#ID</th>
+                                        <th>{% trans %}Fecha y Horario{% endtrans %}</th>
+                                        <th>{% trans %}Turno / Propósito{% endtrans %}</th>
+                                        <th>{% trans %}Docente{% endtrans %}</th>
+                                        <th>{% trans %}Videollamada{% endtrans %}</th>
+                                        <th>{% trans %}Estado{% endtrans %}</th>
+                                        <th class="text-end">{% trans %}Acciones{% endtrans %}</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    {% for r in room.reservations %}
+                                    <tr>
+                                        <td class="text-muted">#{{ r.id }}</td>
+                                        <td>
+                                            <span class="fw-bold text-body">{{ r.start_time.strftime('%d/%m/%Y') }}</span>
+                                            <span class="text-muted d-block font-monospace" style="font-size: 0.72rem;">
+                                                {{ r.start_time.strftime('%H:%M') }} - {{ r.end_time.strftime('%H:%M') }} hs
+                                            </span>
+                                        </td>
+                                        <td>
+                                            <span class="badge bg-light text-dark border">{{ r.shift or 'Tarde' }}</span>
+                                            <small class="text-muted d-block text-truncate" style="max-width: 130px;">{{ r.purpose or 'Clase regular' }}</small>
+                                        </td>
+                                        <td>
+                                            <small class="text-body">{{ r.user.name if r.user else 'Docente Asignado' }}</small>
+                                        </td>
+                                        <td>
+                                            {% if r.effective_virtual_link %}
+                                            <a href="{{ r.effective_virtual_link }}" target="_blank" class="badge bg-success-subtle text-success border border-success-subtle text-decoration-none" title="{{ r.effective_virtual_link }}">
+                                                <i class="bi bi-camera-video me-1"></i>{% trans %}Link Activo{% endtrans %}
+                                            </a>
+                                            {% else %}
+                                            <span class="text-muted small">{% trans %}Hereda comisión{% endtrans %}</span>
+                                            {% endif %}
+                                        </td>
+                                        <td>
+                                            <span class="badge bg-success-subtle text-success border border-success-subtle" style="font-size: 0.68rem;">
+                                                {{ r.status }}
+                                            </span>
+                                        </td>
+                                        <td class="text-end">
+                                            <div class="btn-group btn-group-sm">
+                                                <a href="{{ url_for('schedule.edit_reservation', id=r.id) }}" 
+                                                   class="btn btn-sm btn-primary py-0 px-2" style="font-size: 0.72rem;" 
+                                                   title="{% trans %}Modificar Fecha, Horario, Aula o Detalles{% endtrans %}">
+                                                    <i class="bi bi-pencil me-1"></i>{% trans %}Modificar{% endtrans %}
+                                                </a>
+                                                <a href="{{ url_for('schedule.view_reservation', id=r.id) }}" 
+                                                   class="btn btn-sm btn-outline-secondary py-0 px-2" style="font-size: 0.72rem;" 
+                                                   title="{% trans %}Ver Ficha Completa{% endtrans %}">
+                                                    <i class="bi bi-eye"></i>
+                                                </a>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                    {% endfor %}
+                                </tbody>
+                            </table>
+                        </div>
+                        {% else %}
+                        <div class="alert alert-info py-2 small mb-2">
+                            <i class="bi bi-info-circle me-1"></i>{% trans %}No hay clases programadas para esta sala virtual en el período actual.{% endtrans %}
+                        </div>
+                        {% endif %}
+                    </div>
+
+                    <div class="modal-footer d-flex justify-content-between">
+                        <a href="{{ url_for('schedule.list_reservations', classroom_id=virtual_classroom_id, search=room.subject_code or room.subject_name) }}" 
+                           class="btn btn-sm btn-outline-secondary">
+                            <i class="bi bi-list-check me-1"></i>{% trans %}Ver en Listado de Reservas (Filtrado){% endtrans %}
+                        </a>
+                        <div class="d-flex gap-2">
+                            <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">{% trans %}Cerrar{% endtrans %}</button>
+                            <a href="{{ url_for('schedule.add_reservation') }}?commission_id={{ room.commission_id }}&is_virtual=1" class="btn btn-sm btn-success">
+                                <i class="bi bi-plus-lg me-1"></i>{% trans %}Programar Nueva Clase{% endtrans %}
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
     {% endfor %}
 </div>