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>

myproject/orders/filters.py

@@ -0,0 +1,136 @@
+# -*- coding: utf-8 -*-
+"""
+Фильтры для заказов с использованием django-filter
+"""
+
+import django_filters
+from django import forms
+from django.db.models import Q
+from .models import Order
+
+
+class OrderFilter(django_filters.FilterSet):
+    """
+    Фильтр для списка заказов
+    Поддерживает фильтрацию по:
+    - Поиску (номер, клиент, телефон, email)
+    - Дате доставки (диапазон)
+    - Дате создания (диапазон)
+    - Статусу заказа
+    - Типу доставки
+    - Статусу оплаты
+    """
+
+    # Поиск по нескольким полям
+    search = django_filters.CharFilter(
+        method='filter_search',
+        label='Поиск',
+        widget=forms.TextInput(attrs={
+            'class': 'form-control',
+            'placeholder': 'Номер заказа, клиент, телефон...'
+        })
+    )
+
+    # Фильтр по диапазону дат доставки
+    delivery_date_after = django_filters.DateFilter(
+        field_name='delivery_date',
+        lookup_expr='gte',
+        label='Дата доставки от',
+        widget=forms.DateInput(attrs={
+            'class': 'form-control date-input',
+            'type': 'date'
+        })
+    )
+
+    delivery_date_before = django_filters.DateFilter(
+        field_name='delivery_date',
+        lookup_expr='lte',
+        label='Дата доставки до',
+        widget=forms.DateInput(attrs={
+            'class': 'form-control date-input',
+            'type': 'date'
+        })
+    )
+
+    # Фильтр по диапазону дат создания
+    created_at_after = django_filters.DateFilter(
+        field_name='created_at',
+        lookup_expr='gte',
+        label='Дата создания от',
+        widget=forms.DateInput(attrs={
+            'class': 'form-control date-input',
+            'type': 'date'
+        })
+    )
+
+    created_at_before = django_filters.DateFilter(
+        field_name='created_at',
+        lookup_expr='lte',
+        label='Дата создания до',
+        widget=forms.DateInput(attrs={
+            'class': 'form-control date-input',
+            'type': 'date'
+        })
+    )
+
+    # Фильтр по статусу
+    status = django_filters.ChoiceFilter(
+        choices=Order.STATUS_CHOICES,
+        empty_label='Все статусы',
+        label='Статус',
+        widget=forms.Select(attrs={'class': 'form-select'})
+    )
+
+    # Фильтр по типу доставки
+    delivery_type = django_filters.ChoiceFilter(
+        method='filter_delivery_type',
+        choices=[
+            ('delivery', 'Доставка'),
+            ('pickup', 'Самовывоз')
+        ],
+        empty_label='Все типы',
+        label='Тип',
+        widget=forms.Select(attrs={'class': 'form-select'})
+    )
+
+    # Фильтр по статусу оплаты
+    payment_status = django_filters.ChoiceFilter(
+        choices=Order.PAYMENT_STATUS_CHOICES,
+        empty_label='Все статусы оплаты',
+        label='Оплата',
+        widget=forms.Select(attrs={'class': 'form-select'})
+    )
+
+    class Meta:
+        model = Order
+        fields = ['search', 'status', 'delivery_type', 'payment_status',
+                  'delivery_date_after', 'delivery_date_before',
+                  'created_at_after', 'created_at_before']
+
+    def filter_search(self, queryset, name, value):
+        """
+        Кастомный метод для поиска по нескольким полям:
+        - Номер заказа
+        - Имя клиента
+        - Телефон клиента
+        - Email клиента
+        """
+        if not value:
+            return queryset
+
+        return queryset.filter(
+            Q(order_number__icontains=value) |
+            Q(customer__name__icontains=value) |
+            Q(customer__phone__icontains=value) |
+            Q(customer__email__icontains=value)
+        )
+
+    def filter_delivery_type(self, queryset, name, value):
+        """
+        Кастомный фильтр для типа доставки
+        """
+        if value == 'delivery':
+            return queryset.filter(is_delivery=True)
+        elif value == 'pickup':
+            return queryset.filter(is_delivery=False)
+        return queryset

myproject/orders/static/orders/css/date_filter.css

@@ -0,0 +1,112 @@
+/**
+ * Стили для календарного фильтра по датам
+ * Используется в компоненте date_range_filter.html
+ */
+
+.date-range-filter {
+    padding: 1rem;
+    background: #f8f9fa;
+    border-radius: 8px;
+    border: 1px solid #dee2e6;
+}
+
+.date-range-filter .form-label {
+    font-weight: 500;
+    color: #495057;
+    margin-bottom: 0.75rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.date-range-filter .form-label i {
+    color: #0d6efd;
+}
+
+.date-range-filter .date-input {
+    cursor: pointer;
+    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+.date-range-filter .date-input:focus {
+    border-color: #0d6efd;
+    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
+}
+
+.date-range-filter .text-muted.small {
+    font-size: 0.75rem;
+    margin-bottom: 0.25rem;
+}
+
+/* Быстрые кнопки фильтров */
+.quick-filters {
+    margin-top: 0.75rem;
+}
+
+.quick-filters .btn-group {
+    display: flex;
+    gap: 0.25rem;
+}
+
+.quick-date-btn {
+    font-size: 0.75rem;
+    padding: 0.375rem 0.5rem;
+    border-radius: 4px !important;
+    transition: all 0.2s ease;
+    flex: 1;
+    white-space: nowrap;
+}
+
+.quick-date-btn:hover {
+    background-color: #0d6efd;
+    color: white;
+    border-color: #0d6efd;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.quick-date-btn:active {
+    transform: translateY(0);
+    box-shadow: none;
+}
+
+.quick-date-btn.active {
+    background-color: #0d6efd;
+    color: white;
+    border-color: #0d6efd;
+}
+
+/* Адаптивность для мобильных устройств */
+@media (max-width: 576px) {
+    .date-range-filter {
+        padding: 0.75rem;
+    }
+
+    .quick-filters .btn-group {
+        flex-wrap: wrap;
+    }
+
+    .quick-date-btn {
+        flex: 1 1 calc(33.333% - 0.25rem);
+        min-width: 0;
+        font-size: 0.7rem;
+        padding: 0.35rem 0.4rem;
+    }
+}
+
+/* Анимация для визуальной обратной связи */
+@keyframes pulse {
+    0% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.05);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+
+.quick-date-btn.clicked {
+    animation: pulse 0.3s ease;
+}

myproject/orders/static/orders/js/date_filter.js

@@ -0,0 +1,131 @@
+/**
+ * Календарный фильтр для выбора диапазона дат
+ * Поддерживает быстрые фильтры (сегодня, завтра, неделя)
+ *
+ * Использование:
+ * Подключить этот файл в шаблоне после компонента date_range_filter.html
+ */
+
+document.addEventListener('DOMContentLoaded', function() {
+    console.log('Date filter initialized');
+
+    const quickDateButtons = document.querySelectorAll('.quick-date-btn');
+
+    quickDateButtons.forEach(button => {
+        button.addEventListener('click', function(e) {
+            e.preventDefault();
+
+            const period = this.getAttribute('data-period');
+            const minInputId = this.getAttribute('data-min-input');
+            const maxInputId = this.getAttribute('data-max-input');
+
+            const minInput = document.getElementById(minInputId);
+            const maxInput = document.getElementById(maxInputId);
+
+            if (!minInput || !maxInput) {
+                console.error('Date inputs not found:', minInputId, maxInputId);
+                return;
+            }
+
+            const dates = getDateRange(period);
+
+            minInput.value = dates.min;
+            maxInput.value = dates.max;
+
+            // Визуальная обратная связь
+            this.classList.add('clicked');
+            setTimeout(() => this.classList.remove('clicked'), 300);
+
+            console.log(`Set date range: ${dates.min} - ${dates.max}`);
+        });
+    });
+
+    /**
+     * Вычисляет диапазон дат для выбранного периода
+     * @param {string} period - период (today, tomorrow, week)
+     * @returns {Object} объект с min и max датами в формате YYYY-MM-DD
+     */
+    function getDateRange(period) {
+        const today = new Date();
+        const tomorrow = new Date(today);
+        tomorrow.setDate(tomorrow.getDate() + 1);
+
+        let minDate, maxDate;
+
+        switch(period) {
+            case 'today':
+                minDate = maxDate = formatDate(today);
+                break;
+            case 'tomorrow':
+                minDate = maxDate = formatDate(tomorrow);
+                break;
+            case 'week':
+                minDate = formatDate(today);
+                const weekEnd = new Date(today);
+                weekEnd.setDate(weekEnd.getDate() + 6);
+                maxDate = formatDate(weekEnd);
+                break;
+            case 'month':
+                minDate = formatDate(today);
+                const monthEnd = new Date(today);
+                monthEnd.setMonth(monthEnd.getMonth() + 1);
+                maxDate = formatDate(monthEnd);
+                break;
+            default:
+                minDate = maxDate = '';
+        }
+
+        return { min: minDate, max: maxDate };
+    }
+
+    /**
+     * Форматирует дату в формат YYYY-MM-DD для input[type="date"]
+     * @param {Date} date - объект даты
+     * @returns {string} дата в формате YYYY-MM-DD
+     */
+    function formatDate(date) {
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const day = String(date.getDate()).padStart(2, '0');
+        return `${year}-${month}-${day}`;
+    }
+
+    /**
+     * Валидация диапазона дат (начало <= конец)
+     */
+    const dateInputs = document.querySelectorAll('.date-input');
+    dateInputs.forEach(input => {
+        input.addEventListener('change', function() {
+            const container = this.closest('.date-range-filter');
+            if (!container) return;
+
+            const minInput = container.querySelector('.date-input[id$="_after"]');
+            const maxInput = container.querySelector('.date-input[id$="_before"]');
+
+            if (!minInput || !maxInput) return;
+
+            if (minInput.value && maxInput.value) {
+                const minDate = new Date(minInput.value);
+                const maxDate = new Date(maxInput.value);
+
+                if (minDate > maxDate) {
+                    alert('Дата начала не может быть позже даты окончания');
+                    this.value = '';
+                }
+            }
+        });
+    });
+
+    /**
+     * Сброс дат при клике на кнопку "Сбросить" формы
+     */
+    const resetButtons = document.querySelectorAll('a[href*="order-list"]:not([href*="?"])');
+    resetButtons.forEach(button => {
+        button.addEventListener('click', function() {
+            // Очищаем все date inputs
+            dateInputs.forEach(input => {
+                input.value = '';
+            });
+        });
+    });
+});

myproject/orders/templates/orders/components/date_range_filter.html

@@ -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>

myproject/orders/templates/orders/order_list.html

@@ -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 %}

myproject/orders/templatetags/__init__.py

@@ -0,0 +1 @@
+# Инициализация пакета templatetags

myproject/orders/templatetags/filter_tags.py

@@ -0,0 +1,53 @@
+# -*- coding: utf-8 -*-
+"""
+Кастомные templatetags для работы с фильтрами django-filter
+"""
+
+from django import template
+from django.utils.http import urlencode
+
+register = template.Library()
+
+
+@register.simple_tag(takes_context=True)
+def param_replace(context, **kwargs):
+    """
+    Заменяет или добавляет GET-параметры, сохраняя существующие
+
+    Использование в шаблоне:
+    {% load filter_tags %}
+    <a href="?{% param_replace page=2 %}">Страница 2</a>
+
+    Это сохранит все текущие фильтры и заменит только параметр page
+    """
+    query = context['request'].GET.copy()
+
+    for key, value in kwargs.items():
+        if value is not None:
+            query[key] = value
+        elif key in query:
+            query.pop(key)
+
+    return query.urlencode()
+
+
+@register.simple_tag(takes_context=True)
+def get_filter_url(context, **kwargs):
+    """
+    Генерирует полный URL с параметрами фильтров
+
+    Использование:
+    {% get_filter_url status='confirmed' page=1 %}
+    """
+    return '?' + param_replace(context, **kwargs)
+
+
+@register.filter
+def get_verbose_name(instance, field_name):
+    """
+    Получить verbose_name поля модели
+
+    Использование:
+    {{ order|get_verbose_name:'status' }}
+    """
+    return instance._meta.get_field(field_name).verbose_name

myproject/orders/views.py

@@ -2,50 +2,35 @@
 from django.shortcuts import render, redirect, get_object_or_404
 from django.contrib import messages
 from django.core.paginator import Paginator
-from django.db.models import Q
 from .models import Order, OrderItem
 from .forms import OrderForm, OrderItemFormSet
+from .filters import OrderFilter
 
 
 def order_list(request):
-    """Список всех заказов с фильтрацией и поиском"""
-    orders = Order.objects.select_related('customer', 'delivery_address', 'pickup_shop').all()
+    """
+    Список всех заказов с фильтрацией и поиском
+    Использует django-filter для фильтрации данных
+    """
+    # Базовый queryset с оптимизацией запросов
+    orders = Order.objects.select_related(
+        'customer', 'delivery_address', 'pickup_shop'
+    ).all()
 
-    # Поиск
-    search_query = request.GET.get('search', '')
-    if search_query:
-        orders = orders.filter(
-            Q(order_number__icontains=search_query) |
-            Q(customer__name__icontains=search_query) |
-            Q(customer__phone__icontains=search_query) |
-            Q(customer__email__icontains=search_query)
-        )
-
-    # Фильтр по статусу
-    status_filter = request.GET.get('status', '')
-    if status_filter:
-        orders = orders.filter(status=status_filter)
-
-    # Фильтр по типу доставки
-    delivery_filter = request.GET.get('delivery_type', '')
-    if delivery_filter == 'delivery':
-        orders = orders.filter(is_delivery=True)
-    elif delivery_filter == 'pickup':
-        orders = orders.filter(is_delivery=False)
+    # Применяем фильтры через django-filter
+    order_filter = OrderFilter(request.GET, queryset=orders)
 
     # Сортировка
-    orders = orders.order_by('-created_at')
+    filtered_orders = order_filter.qs.order_by('-created_at')
 
     # Пагинация
-    paginator = Paginator(orders, 25)
+    paginator = Paginator(filtered_orders, 25)
     page_number = request.GET.get('page')
     page_obj = paginator.get_page(page_number)
 
     context = {
+        'filter': order_filter,
         'page_obj': page_obj,
-        'search_query': search_query,
-        'status_filter': status_filter,
-        'delivery_filter': delivery_filter,
         'status_choices': Order.STATUS_CHOICES,
     }