feat: Реализована календарная лента из 9 дней для фильтрации заказов

Основные изменения:

**Компонент date_range_filter.html:**
- Заменены простые кнопки на горизонтальную ленту из 9 дней
- Добавлены стрелки навигации влево/вправо
- Скрытые поля дат для работы с django-filter

**Стили date_filter.css:**
- Дизайн календарной ленты с карточками дней
- Выделение сегодняшнего дня синим цветом
- Выделение выбранной даты зеленым цветом
- Hover-эффекты и анимации
- Адаптивность для мобильных устройств
- Стили для стрелок навигации

**Логика date_filter.js:**
- Класс DateCarousel для управления лентой
- Генерация 9 дней (±4 от центральной даты)
- Определение "Вчера/Сегодня/Завтра" для центральных 3 кнопок
- Отображение числа (01-31) и дня недели (ПН-ВС)
- Навигация стрелками (сдвиг на 1 день)
- Клик по дню устанавливает дату в оба поля фильтра
- Визуальная индикация выбранной даты

**Формат каждой кнопки:**
┌─────────┐
│ Сегодня │  ← Текст (если вчера/сегодня/завтра)
│   07    │  ← Число месяца
│   ЧТ    │  ← День недели
└─────────┘

**Поведение:**
- По умолчанию: сегодня в центре (5-я кнопка)
- Сегодняшний день выделен синим
- Клик по дню фильтрует заказы за эту конкретную дату
- Стрелки сдвигают весь диапазон на 1 день вперед/назад

🤖 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:33:48 +03:00
parent 48021da856
commit 1f0821efbe
3 changed files with 355 additions and 187 deletions

View File

@@ -1,5 +1,5 @@
{% comment %}
Переиспользуемый компонент для фильтрации по диапазону дат
Переиспользуемый компонент для фильтрации по диапазону дат с календарной лентой
Параметры:
- field_after: поле фильтра "от" (например, filter.form.delivery_date_after)
@@ -19,39 +19,33 @@
{{ 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 class="d-none">
{{ field_after }}
{{ field_before }}
</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>
<!-- Календарная лента с 9 днями -->
<div class="date-carousel">
<button type="button" class="carousel-nav-btn carousel-prev"
data-min-input="{{ field_after.id_for_label }}"
data-max-input="{{ field_before.id_for_label }}"
title="Предыдущий день">
<i class="bi bi-chevron-left"></i>
</button>
<div class="date-carousel-container"
id="dateCarousel_{{ field_after.id_for_label }}"
data-min-input="{{ field_after.id_for_label }}"
data-max-input="{{ field_before.id_for_label }}">
<!-- Дни генерируются через JavaScript -->
</div>
<button type="button" class="carousel-nav-btn carousel-next"
data-min-input="{{ field_after.id_for_label }}"
data-max-input="{{ field_before.id_for_label }}"
title="Следующий день">
<i class="bi bi-chevron-right"></i>
</button>
</div>
</div>