refactor: Переработан макет страницы списка заказов - кнопка создания перенесена в боковую панель

Изменена структура страницы /orders/:
- Создана двухколоночная компоновка (фильтры слева, таблица справа)
- Кнопка "Создать заказ" перенесена из верхней части под фильтры в левую панель
- Фильтры преобразованы в вертикальный макет для лучшей организации

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-07 16:08:08 +03:00
parent 2bf2afb56f
commit a1dfb6a257

View File

@@ -0,0 +1,203 @@
{% extends 'base.html' %}
{% block title %}Заказы{% endblock %}
{% block content %}
<div class="container-fluid">
<div class="row mb-4">
<div class="col">
<h1>Заказы</h1>
</div>
</div>
<div class="row">
<!-- Левая колонка: Фильтры и кнопка -->
<div class="col-md-3 mb-4">
<!-- Фильтры и поиск -->
<div class="card mb-3">
<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="Номер заказа, клиент, телефон...">
</div>
<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>
</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>
</div>
<button type="submit" class="btn btn-primary w-100">
<i class="bi bi-search"></i> Найти
</button>
</form>
</div>
</div>
<!-- Кнопка создания заказа -->
<a href="{% url 'orders:order-create' %}" class="btn btn-success w-100">
<i class="bi bi-plus-circle"></i> Создать заказ
</a>
</div>
<!-- Правая колонка: Таблица заказов -->
<div class="col-md-9">
<!-- Таблица заказов -->
<div class="card">
<div class="card-body">
{% if page_obj %}
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>Номер</th>
<th>Клиент</th>
<th>Дата доставки</th>
<th>Тип</th>
<th>Статус</th>
<th>Сумма</th>
<th>Оплата</th>
<th>Создан</th>
<th>Действия</th>
</tr>
</thead>
<tbody>
{% for order in page_obj %}
<tr>
<td>
<a href="{% url 'orders:order-detail' order.pk %}" class="text-decoration-none">
<strong>{{ order.order_number }}</strong>
</a>
</td>
<td>{{ order.customer.name }}</td>
<td>
{% if order.delivery_date %}
{{ order.delivery_date|date:"d.m.Y" }}
{% if order.delivery_time_start %}
<br><small class="text-muted">{{ order.delivery_time_window }}</small>
{% endif %}
{% else %}
<span class="text-muted">Не указано</span>
{% endif %}
</td>
<td>
{% if order.is_delivery %}
<span class="badge bg-info">Доставка</span>
{% else %}
<span class="badge bg-secondary">Самовывоз</span>
{% endif %}
</td>
<td>
{% if order.status == 'new' %}
<span class="badge bg-primary">Новый</span>
{% elif order.status == 'confirmed' %}
<span class="badge bg-success">Подтвержден</span>
{% elif order.status == 'in_assembly' %}
<span class="badge bg-warning">В сборке</span>
{% elif order.status == 'in_delivery' %}
<span class="badge bg-info">В доставке</span>
{% elif order.status == 'delivered' %}
<span class="badge bg-success">Доставлен</span>
{% elif order.status == 'cancelled' %}
<span class="badge bg-danger">Отменен</span>
{% endif %}
</td>
<td><strong>{{ order.total_amount }} руб.</strong></td>
<td>
{% if order.payment_status == 'paid' %}
<span class="badge bg-success">Оплачен</span>
{% elif order.payment_status == 'partial' %}
<span class="badge bg-warning">Частично</span>
{% else %}
<span class="badge bg-danger">Не оплачен</span>
{% endif %}
</td>
<td>{{ order.created_at|date:"d.m.Y H:i" }}</td>
<td>
<a href="{% url 'orders:order-detail' order.pk %}"
class="btn btn-sm btn-outline-primary"
title="Просмотр">
<i class="bi bi-eye"></i>
</a>
<a href="{% url 'orders:order-update' order.pk %}"
class="btn btn-sm btn-outline-secondary"
title="Редактировать">
<i class="bi bi-pencil"></i>
</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<!-- Пагинация -->
{% if page_obj.has_other_pages %}
<nav aria-label="Навигация по страницам">
<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>
</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>
</li>
{% endif %}
<li class="page-item active">
<span class="page-link">
Страница {{ page_obj.number }} из {{ page_obj.paginator.num_pages }}
</span>
</li>
{% 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>
</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>
</li>
{% endif %}
</ul>
</nav>
{% endif %}
{% else %}
<div class="alert alert-info">
<i class="bi bi-info-circle"></i> Заказы не найдены.
<a href="{% url 'orders:order-create' %}">Создать первый заказ</a>
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
{% endblock %}