From 32bc0d2c397708bc582c6a514a050c8dfa9396c9 Mon Sep 17 00:00:00 2001
From: Andrey Smakotin <slamfromm@gmail.com>
Date: Mon, 26 Jan 2026 21:00:57 +0300
Subject: [PATCH] feat(ui): add collapsible section for inventory information
 with toggle animation

- 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.
---
 .../inventory/inventory/inventory_detail.html | 106 +++++++++++-------
 1 file changed, 65 insertions(+), 41 deletions(-)

diff --git a/myproject/inventory/templates/inventory/inventory/inventory_detail.html b/myproject/inventory/templates/inventory/inventory/inventory_detail.html
index ab3232d..99826a3 100644
--- a/myproject/inventory/templates/inventory/inventory/inventory_detail.html
+++ b/myproject/inventory/templates/inventory/inventory/inventory_detail.html
@@ -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">