Files
livegraphs-django/dashboard_project/templates/dashboard/search_results.html
Kaj Kowalski 482bea1ba5 Enhance AJAX navigation and pagination across dashboard templates
- Implemented AJAX-based navigation for links and forms to improve user experience.
- Added loading indicators during AJAX requests to enhance feedback.
- Refactored data tables and search results to load content dynamically via AJAX.
- Created partial templates for data tables and search results to streamline rendering.
- Updated pagination links to work with AJAX, maintaining browser history.
- Added JavaScript files for handling AJAX navigation and pagination.
- Improved session detail view with conditional rendering for action buttons.
- Updated Docker Compose file for consistency in version formatting.
- Created a TODO list for future enhancements and features.
2025-05-17 02:31:16 +02:00

86 lines
2.8 KiB
HTML

<!-- templates/dashboard/search_results.html -->
{% extends 'base.html' %}
{% block title %}Search Results | Chat Analytics{% endblock %}
{% block content %}
<div
class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom"
>
<h1 class="h2">Search Results</h1>
<div class="btn-toolbar mb-2 mb-md-0">
<a href="{% url 'dashboard' %}" class="btn btn-sm btn-outline-secondary ajax-nav-link">
<i class="fas fa-arrow-left"></i> Back to Dashboard
</a>
</div>
</div>
<div class="row mb-4">
<div class="col-12">
<div class="card">
<div class="card-header">
<h5 class="card-title mb-0">Search Chat Sessions</h5>
</div>
<div class="card-body">
<form method="get" action="{% url 'search_chat_sessions' %}" class="search-form">
<div class="input-group">
<input
type="text"
name="q"
class="form-control"
placeholder="Search sessions..."
value="{{ query }}"
aria-label="Search sessions"
/>
{% if data_source %}
<input type="hidden" name="data_source_id" value="{{ data_source.id }}" />
{% endif %}
<button class="btn btn-outline-primary" type="submit">
<i class="fas fa-search"></i> Search
</button>
</div>
<div class="mt-2 text-muted">
<small
>Search by session ID, country, language, sentiment, category, or message
content.</small
>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h5 class="card-title mb-0">
Results {% if query %}for "{{ query }}"{% endif %}
{% if data_source %}in {{ data_source.name }}{% endif %}
({{ page_obj.paginator.count }})
</h5>
</div>
<div class="card-body">
<!-- Loading spinner shown during AJAX requests -->
<div id="ajax-loading-spinner" class="text-center py-4 d-none">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<p class="mt-2">Loading data...</p>
</div>
<!-- Search results container that will be updated via AJAX -->
<div id="ajax-content-container">
{% include "dashboard/partials/search_results_table.html" %}
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block extra_js %}
<!-- No need for extra JavaScript here, using common ajax-pagination.js -->
{% endblock %}