smaa/octopus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

feat(ui): add collapsible section for inventory information with toggle animation

Browse Source 
- Wrap inventory information table in Bootstrap collapse component
- Add toggle button with chevron icon indicating collapse state
- Implement JavaScript to animate chevron icon on collapse/expand
- Set inventory information to be collapsed by default for cleaner UI

This change improves the user interface by reducing clutter on the inventory detail page, allowing users to focus on the most important information first and expand additional details as needed.
This commit is contained in:
Andrey Smakotin
2026-01-26 21:00:57 +03:00
parent f140469a56
commit 32bc0d2c39
1 changed files with 65 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
myproject/inventory/templates/inventory/inventory/inventory_detail.html
View File

@@ -19,52 +19,76 @@
</div> </div>
<div class="card-body"> <div class="card-body">
<!-- Информация об инвентаризации - свернута по умолчанию -->
<div class="row mb-4"> <div class="row mb-4">
<div class="col-md-6"> <div class="col-md-6">
<h5>Информация</h5> <button class="btn btn-outline-primary btn-sm d-flex align-items-center gap-2 mb-2" type="button" data-bs-toggle="collapse" data-bs-target="#inventory-info-collapse" aria-expanded="false" aria-controls="inventory-info-collapse">
<table class="table table-borderless"> <i class="bi bi-chevron-down" id="info-collapse-icon"></i>
{% if inventory.document_number %} <span>Информация</span>
<tr> </button>
<th>Номер документа:</th> <div class="collapse" id="inventory-info-collapse">
<td><strong>{{ inventory.document_number }}</strong></td> <table class="table table-borderless">
</tr> {% if inventory.document_number %}
{% endif %} <tr>
<tr> <th>Номер документа:</th>
<th>Склад:</th> <td><strong>{{ inventory.document_number }}</strong></td>
<td><strong>{{ inventory.warehouse.name }}</strong></td> </tr>
</tr> {% endif %}
<tr> <tr>
<th>Статус:</th> <th>Склад:</th>
<td> <td><strong>{{ inventory.warehouse.name }}</strong></td>
{% if inventory.status == 'draft' %} </tr>
<span class="badge bg-secondary fs-6 px-3 py-2"> <tr>
<i class="bi bi-file-earmark"></i> Черновик <th>Статус:</th>
</span> <td>
{% elif inventory.status == 'processing' %} {% if inventory.status == 'draft' %}
<span class="badge bg-warning text-dark fs-6 px-3 py-2"> <span class="badge bg-secondary fs-6 px-3 py-2">
<i class="bi bi-hourglass-split"></i> В обработке <i class="bi bi-file-earmark"></i> Черновик
</span> </span>
{% else %} {% elif inventory.status == 'processing' %}
<span class="badge bg-success fs-6 px-3 py-2"> <span class="badge bg-warning text-dark fs-6 px-3 py-2">
<i class="bi bi-check-circle-fill"></i> Завершена <i class="bi bi-hourglass-split"></i> В обработке
</span> </span>
{% endif %} {% else %}
</td> <span class="badge bg-success fs-6 px-3 py-2">
</tr> <i class="bi bi-check-circle-fill"></i> Завершена
<tr> </span>
<th>Дата:</th> {% endif %}
<td>{{ inventory.date|date:"d.m.Y H:i" }}</td> </td>
</tr> </tr>
{% if inventory.conducted_by %} <tr>
<tr> <th>Дата:</th>
<th>Провёл:</th> <td>{{ inventory.date|date:"d.m.Y H:i" }}</td>
<td>{{ inventory.conducted_by }}</td> </tr>
</tr> {% if inventory.conducted_by %}
{% endif %} <tr>
</table> <th>Провёл:</th>
<td>{{ inventory.conducted_by }}</td>
</tr>
{% endif %}
</table>
</div>
</div> </div>
</div> </div>
<script>
// Добавляем простую анимацию для иконки при сворачивании/разворачивании
document.addEventListener('DOMContentLoaded', function() {
const collapseElement = document.getElementById('inventory-info-collapse');
const collapseIcon = document.getElementById('info-collapse-icon');
collapseElement.addEventListener('show.bs.collapse', function() {
collapseIcon.classList.remove('bi-chevron-down');
collapseIcon.classList.add('bi-chevron-up');
});
collapseElement.addEventListener('hide.bs.collapse', function() {
collapseIcon.classList.remove('bi-chevron-up');
collapseIcon.classList.add('bi-chevron-down');
});
});
</script>
{% if inventory.status == 'completed' %} {% if inventory.status == 'completed' %}
<!-- Информация о созданных документах --> <!-- Информация о созданных документах -->
<div class="alert alert-info mb-4"> <div class="alert alert-info mb-4">