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:
2025-11-07 18:22:57 +03:00
parent ec0557c8cf
commit d37a5df482
11 changed files with 576 additions and 59 deletions

View File

@@ -66,6 +66,7 @@ TENANT_APPS = [
# Приложения с бизнес-логикой (изолированные для каждого магазина)
'simple_history', # История изменений для каждого тенанта
'nested_admin',
'django_filters', # Фильтрация данных
'customers', # Клиенты магазина
'shops', # Точки магазина/самовывоза
'products', # Товары и категории

136
myproject/orders/filters.py Normal file
View File

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

View File

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

View File

@@ -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 = '';
});
});
});
});

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -1,13 +1,16 @@
asgiref==3.9.0
Django==5.0.10
django-environ==0.12.0
django-filter==24.3
django-nested-admin==4.1.5
django-phonenumber-field==8.3.0
django-simple-history==3.10.1
django-tenants==3.7.0
phonenumbers==9.0.17
pillow==11.0.0
psycopg2-binary>=2.9.6
psycopg2-binary==2.9.11
python-monkey-business==1.1.0
sqlparse==0.5.3
typing_extensions==4.15.0
tzdata==2025.2
Unidecode==1.4.0

11
requirements.txt Normal file
View File

@@ -0,0 +1,11 @@
Django==5.0.10
django-tenants==3.7.0
django-filter==24.3
django-simple-history==3.10.1
django-nested-admin==4.1.5
django-phonenumber-field==8.3.0
django-environ==0.12.0
psycopg2-binary==2.9.11
Pillow==11.0.0
phonenumbers==9.0.17
Unidecode==1.4.0