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 class="card-body">
<!-- Информация об инвентаризации - свернута по умолчанию -->
<div class="row mb-4">
<div class="col-md-6">
<h5>Информация</h5>
<table class="table table-borderless">
{% if inventory.document_number %}
<tr>
<th>Номер документа:</th>
<td><strong>{{ inventory.document_number }}</strong></td>
</tr>
{% endif %}
<tr>
<th>Склад:</th>
<td><strong>{{ inventory.warehouse.name }}</strong></td>
</tr>
<tr>
<th>Статус:</th>
<td>
{% if inventory.status == 'draft' %}
<span class="badge bg-secondary fs-6 px-3 py-2">
<i class="bi bi-file-earmark"></i> Черновик
</span>
{% elif inventory.status == 'processing' %}
<span class="badge bg-warning text-dark fs-6 px-3 py-2">
<i class="bi bi-hourglass-split"></i> В обработке
</span>
{% else %}
<span class="badge bg-success fs-6 px-3 py-2">
<i class="bi bi-check-circle-fill"></i> Завершена
</span>
{% endif %}
</td>
</tr>
<tr>
<th>Дата:</th>
<td>{{ inventory.date|date:"d.m.Y H:i" }}</td>
</tr>
{% if inventory.conducted_by %}
<tr>
<th>Провёл:</th>
<td>{{ inventory.conducted_by }}</td>
</tr>
{% endif %}
</table>
<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">
<i class="bi bi-chevron-down" id="info-collapse-icon"></i>
<span>Информация</span>
</button>
<div class="collapse" id="inventory-info-collapse">
<table class="table table-borderless">
{% if inventory.document_number %}
<tr>
<th>Номер документа:</th>
<td><strong>{{ inventory.document_number }}</strong></td>
</tr>
{% endif %}
<tr>
<th>Склад:</th>
<td><strong>{{ inventory.warehouse.name }}</strong></td>
</tr>
<tr>
<th>Статус:</th>
<td>
{% if inventory.status == 'draft' %}
<span class="badge bg-secondary fs-6 px-3 py-2">
<i class="bi bi-file-earmark"></i> Черновик
</span>
{% elif inventory.status == 'processing' %}
<span class="badge bg-warning text-dark fs-6 px-3 py-2">
<i class="bi bi-hourglass-split"></i> В обработке
</span>
{% else %}
<span class="badge bg-success fs-6 px-3 py-2">
<i class="bi bi-check-circle-fill"></i> Завершена
</span>
{% endif %}
</td>
</tr>
<tr>
<th>Дата:</th>
<td>{{ inventory.date|date:"d.m.Y H:i" }}</td>
</tr>
{% if inventory.conducted_by %}
<tr>
<th>Провёл:</th>
<td>{{ inventory.conducted_by }}</td>
</tr>
{% endif %}
</table>
</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' %}
<!-- Информация о созданных документах -->
<div class="alert alert-info mb-4">