feat: Добавлена фильтрация заказов с django-filter и календарный компонент
Основные изменения: - Установлен и настроен django-filter==24.3 - Создан OrderFilter с фильтрами по дате доставки, статусу, типу, оплате и поиску - Реализован переиспользуемый компонент календарного фильтра date_range_filter.html - Добавлены быстрые кнопки выбора дат (Сегодня, Завтра, Неделя) - Создан templatetag param_replace для сохранения фильтров при пагинации - Обновлен order_list view для использования django-filter - Полностью переработан шаблон order_list.html с интеграцией фильтров - Добавлены стили (date_filter.css) и логика (date_filter.js) для календаря Структура новых файлов: - orders/filters.py - FilterSet для заказов - orders/templatetags/filter_tags.py - кастомные теги для фильтров - orders/templates/orders/components/date_range_filter.html - компонент календаря - orders/static/orders/css/date_filter.css - стили - orders/static/orders/js/date_filter.js - JavaScript логика - requirements.txt - зависимости проекта Преимущества: - Чистая архитектура фильтрации - Автоматическое сохранение параметров при навигации - Переиспользуемый календарный компонент - Улучшенный UX с быстрыми фильтрами - Готовность к масштабированию на другие модели 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,57 @@
|
||||
{% comment %}
|
||||
Переиспользуемый компонент для фильтрации по диапазону дат
|
||||
|
||||
Параметры:
|
||||
- field_after: поле фильтра "от" (например, filter.form.delivery_date_after)
|
||||
- field_before: поле фильтра "до" (например, filter.form.delivery_date_before)
|
||||
- label: заголовок фильтра (например, "Дата доставки")
|
||||
- icon: иконка Bootstrap Icons (default: calendar-range)
|
||||
|
||||
Пример использования:
|
||||
{% include 'orders/components/date_range_filter.html' with field_after=filter.form.delivery_date_after field_before=filter.form.delivery_date_before label="Дата доставки" icon="truck" %}
|
||||
{% endcomment %}
|
||||
|
||||
{% load static %}
|
||||
|
||||
<div class="date-range-filter mb-3">
|
||||
<label class="form-label">
|
||||
<i class="bi bi-{{ icon|default:'calendar-range' }}"></i>
|
||||
{{ label }}
|
||||
</label>
|
||||
|
||||
<div class="row g-2">
|
||||
<div class="col-6">
|
||||
<label for="{{ field_after.id_for_label }}" class="form-label text-muted small">От</label>
|
||||
{{ field_after }}
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label for="{{ field_before.id_for_label }}" class="form-label text-muted small">До</label>
|
||||
{{ field_before }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Быстрые фильтры -->
|
||||
<div class="quick-filters mt-2">
|
||||
<small class="text-muted d-block mb-1">Быстрый выбор:</small>
|
||||
<div class="btn-group btn-group-sm w-100" role="group">
|
||||
<button type="button" class="btn btn-outline-secondary quick-date-btn"
|
||||
data-min-input="{{ field_after.id_for_label }}"
|
||||
data-max-input="{{ field_before.id_for_label }}"
|
||||
data-period="today">
|
||||
Сегодня
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-secondary quick-date-btn"
|
||||
data-min-input="{{ field_after.id_for_label }}"
|
||||
data-max-input="{{ field_before.id_for_label }}"
|
||||
data-period="tomorrow">
|
||||
Завтра
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-secondary quick-date-btn"
|
||||
data-min-input="{{ field_after.id_for_label }}"
|
||||
data-max-input="{{ field_before.id_for_label }}"
|
||||
data-period="week">
|
||||
Неделя
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,7 +1,12 @@
|
||||
{% extends 'base.html' %}
|
||||
{% load static filter_tags %}
|
||||
|
||||
{% block title %}Заказы{% endblock %}
|
||||
|
||||
{% block extra_css %}
|
||||
<link rel="stylesheet" href="{% static 'orders/css/date_filter.css' %}">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid">
|
||||
<div class="row mb-4">
|
||||
@@ -15,39 +20,57 @@
|
||||
<div class="col-md-3 mb-4">
|
||||
<!-- Фильтры и поиск -->
|
||||
<div class="card mb-3">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">
|
||||
<i class="bi bi-funnel-fill"></i> Фильтры
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form method="get">
|
||||
<!-- Поиск -->
|
||||
<div class="mb-3">
|
||||
<label for="search" class="form-label">Поиск</label>
|
||||
<input type="text"
|
||||
class="form-control"
|
||||
id="search"
|
||||
name="search"
|
||||
value="{{ search_query }}"
|
||||
placeholder="Номер заказа, клиент, телефон...">
|
||||
<label for="{{ filter.form.search.id_for_label }}" class="form-label">
|
||||
<i class="bi bi-search"></i> Поиск
|
||||
</label>
|
||||
{{ filter.form.search }}
|
||||
</div>
|
||||
|
||||
<!-- Календарный фильтр по дате доставки -->
|
||||
{% include 'orders/components/date_range_filter.html' with field_after=filter.form.delivery_date_after field_before=filter.form.delivery_date_before label="Дата доставки" icon="truck" %}
|
||||
|
||||
<!-- Статус -->
|
||||
<div class="mb-3">
|
||||
<label for="status" class="form-label">Статус</label>
|
||||
<select class="form-select" id="status" name="status">
|
||||
<option value="">Все статусы</option>
|
||||
{% for value, label in status_choices %}
|
||||
<option value="{{ value }}" {% if status_filter == value %}selected{% endif %}>
|
||||
{{ label }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<label for="{{ filter.form.status.id_for_label }}" class="form-label">
|
||||
<i class="bi bi-flag"></i> Статус
|
||||
</label>
|
||||
{{ filter.form.status }}
|
||||
</div>
|
||||
|
||||
<!-- Тип доставки -->
|
||||
<div class="mb-3">
|
||||
<label for="delivery_type" class="form-label">Тип</label>
|
||||
<select class="form-select" id="delivery_type" name="delivery_type">
|
||||
<option value="">Все типы</option>
|
||||
<option value="delivery" {% if delivery_filter == 'delivery' %}selected{% endif %}>Доставка</option>
|
||||
<option value="pickup" {% if delivery_filter == 'pickup' %}selected{% endif %}>Самовывоз</option>
|
||||
</select>
|
||||
<label for="{{ filter.form.delivery_type.id_for_label }}" class="form-label">
|
||||
<i class="bi bi-box"></i> Тип
|
||||
</label>
|
||||
{{ filter.form.delivery_type }}
|
||||
</div>
|
||||
|
||||
<!-- Статус оплаты -->
|
||||
<div class="mb-3">
|
||||
<label for="{{ filter.form.payment_status.id_for_label }}" class="form-label">
|
||||
<i class="bi bi-credit-card"></i> Оплата
|
||||
</label>
|
||||
{{ filter.form.payment_status }}
|
||||
</div>
|
||||
|
||||
<!-- Кнопки -->
|
||||
<div class="d-grid gap-2">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="bi bi-check-circle"></i> Применить
|
||||
</button>
|
||||
<a href="{% url 'orders:order-list' %}" class="btn btn-outline-secondary">
|
||||
<i class="bi bi-x-circle"></i> Сбросить
|
||||
</a>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary w-100">
|
||||
<i class="bi bi-search"></i> Найти
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -156,12 +179,12 @@
|
||||
<ul class="pagination justify-content-center">
|
||||
{% if page_obj.has_previous %}
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="?page=1{% if search_query %}&search={{ search_query }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}{% if delivery_filter %}&delivery_type={{ delivery_filter }}{% endif %}">
|
||||
<a class="page-link" href="?{% param_replace page=1 %}">
|
||||
Первая
|
||||
</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}{% if delivery_filter %}&delivery_type={{ delivery_filter }}{% endif %}">
|
||||
<a class="page-link" href="?{% param_replace page=page_obj.previous_page_number %}">
|
||||
Назад
|
||||
</a>
|
||||
</li>
|
||||
@@ -175,12 +198,12 @@
|
||||
|
||||
{% if page_obj.has_next %}
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="?page={{ page_obj.next_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}{% if delivery_filter %}&delivery_type={{ delivery_filter }}{% endif %}">
|
||||
<a class="page-link" href="?{% param_replace page=page_obj.next_page_number %}">
|
||||
Вперед
|
||||
</a>
|
||||
</li>
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if search_query %}&search={{ search_query }}{% endif %}{% if status_filter %}&status={{ status_filter }}{% endif %}{% if delivery_filter %}&delivery_type={{ delivery_filter }}{% endif %}">
|
||||
<a class="page-link" href="?{% param_replace page=page_obj.paginator.num_pages %}">
|
||||
Последняя
|
||||
</a>
|
||||
</li>
|
||||
@@ -201,3 +224,7 @@
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script src="{% static 'orders/js/date_filter.js' %}"></script>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user