фильтр малых остатков

api/static/js/index.js

@@ -775,6 +775,9 @@ function renderToolboxTab(tabData) {
 
     // Создаем навигацию по складам
 
+    // Сортируем список складов по названию
+    tabData.sort((a, b) => a.title.localeCompare(b.title, 'ru'));
+
     const toolboxNav = `
         <div class="d-flex flex-wrap gap-2" id="toolboxNav">
             ${tabData.map((toolbox, index) => `
@@ -862,9 +865,45 @@ async function loadToolboxContent(toolboxId) {
         if (resp.status === 'ok') {
             const toolboxData = resp.data;
             const toolboxInfo = currentToolboxData.find(t => t.id === toolboxId);
+            const toolboxOwn = toolboxInfo.owner_id === userData.id ? 'Мой склад' : toolboxInfo.owner_id ? 'Склад сотрудника' : 'Общий склад';
+
+            function handleEditBtn() {
+                if (accessData.manage_toolboxes) {
+                    contentContainer.querySelector('#editToolbox').addEventListener('click', () => {
+                        addToolbox(toolboxInfo);
+                    });
+                } else {
+                    contentContainer.querySelector('#editToolbox').remove();
+                }
+            }
+
+            function handleFillBtn() {
+                if (accessData.tools_registration && !toolboxInfo.owner_id) {
+                    contentContainer.querySelector('#fillToolbox').addEventListener('click', () => {
+                        fillToolbox(toolboxInfo);
+                    });
+                } else {
+                    contentContainer.querySelector('#fillToolbox').remove();
+                }
+            }
 
             if (toolboxData.length === 0) {
                 contentContainer.innerHTML = `
+                    <div class="card-header bg-info border-bottom">
+                        <div class="d-flex justify-content-between align-items-center">
+                            <div>
+                                <h5 class="mb-1">${toolboxInfo?.title || 'Склад'}</h5>
+                                <p class="text-muted mb-0 small">${toolboxInfo?.description || 'Описание отсутствует'}</p>
+                            </div>
+                            <button class="btn btn-sm btn-outline-danger" id="editToolbox">
+                                <i class="bi bi-pencil-square"></i> Редактировать
+                            </button>
+                            <button class="btn btn-sm btn-success" id="fillToolbox">
+                                <i class="bi bi-cart-plus-fill me-1"></i>Пополнить
+                            </button>
+                            <span class="badge bg-secondary">${toolboxOwn}</span>
+                        </div>
+                    </div>
                     <div class="card-body d-flex flex-column justify-content-center align-items-center">
                         <i class="bi bi-box display-1 text-muted mb-3"></i>
                         <h4 class="text-muted mb-2">Склад пуст</h4>
@@ -885,18 +924,20 @@ async function loadToolboxContent(toolboxId) {
                 } else {
                     document.getElementById('deleteToolbox').remove();
                 }
+                handleEditBtn();
+                handleFillBtn()
                 return;
             }
 
             // Находим информацию о выбранном складе
-
-            const toolboxOwn = toolboxInfo.owner_id === userData.id ? 'Мой склад' : toolboxInfo.owner_id ? 'Склад сотрудника' : 'Общий склад';
             const quantityMonitoring = toolboxInfo.monitoring && accessData.view_all_toolboxes;
 
             // Обрабатываем данные в единый список
             const processedData = processToolboxData(toolboxData, toolboxId, quantityMonitoring);
             const totalQuantity = processedData.reduce((sum, item) => sum + item.totalQuantity, 0);
             const totalCost = formatPrice(processedData.reduce((sum, item) => sum + item.totalCost, 0));
+            const notEnough = processedData.reduce((sum, item) => sum + (item.indicator?.text !== 'Достаточно' ? 1 : 0), 0);
+            // console.log(processedData);
 
             // Отображаем содержимое склада
             contentContainer.innerHTML = `
@@ -909,6 +950,9 @@ async function loadToolboxContent(toolboxId) {
                     <button class="btn btn-sm btn-outline-danger" id="editToolbox">
                         <i class="bi bi-pencil-square"></i> Редактировать
                     </button>
+                    <button class="btn btn-sm btn-success" id="fillToolbox">
+                        <i class="bi bi-cart-plus-fill me-1"></i>Пополнить
+                    </button>
                     <span class="badge bg-secondary">${toolboxOwn}</span>
                 </div>
             </div>
@@ -924,6 +968,18 @@ async function loadToolboxContent(toolboxId) {
                                 </button>
                             </div>
                         </div>
+                        ${notEnough > 0 && quantityMonitoring ? `
+                        <div class="d-flex align-items-center">
+                            <button class="btn btn-sm btn-warning position-relative" id="notEnoughBtn">
+                                <i class="bi bi-exclamation-triangle me-1"></i>
+                                <span class="badge rounded-pill bg-danger position-absolute top-0 start-100 translate-middle">
+                                    ${notEnough}
+                                    <span class="visually-hidden">unread messages</span>
+                                </span>
+                                Осталось мало
+                            </button>
+                        </div>
+                        ` : ''}
                         <div class="d-flex align-items-center justify-content-between ">
                             <span>
                                 Количество позиций: <span class="fw-bold me-2">${processedData.length}</span>
@@ -964,14 +1020,8 @@ async function loadToolboxContent(toolboxId) {
             </div>
             `;
 
-            if (accessData.manage_toolboxes) {
+            handleEditBtn();
-                contentContainer.querySelector('#editToolbox').addEventListener('click', () => {
+            handleFillBtn()
-                    addToolbox(toolboxInfo);
-                });
-            } else {
-                contentContainer.querySelector('#editToolbox').remove();
-            }
-
 
             // Инициализация таблицы с данными
             await initializeToolboxTable(processedData, toolboxOwn, quantityMonitoring);
@@ -997,6 +1047,11 @@ async function loadToolboxContent(toolboxId) {
     }
 }
 
+function fillToolbox(toolboxInfo) {
+    console.log(toolboxInfo);
+    showInfo('Функционал еще в разработке', 'warning');
+}
+
 async function deleteToolbox(toolboxId) {
     // Находим информацию о складе
     const toolboxInfo = currentToolboxData.find(t => t.id === toolboxId);
@@ -1476,17 +1531,22 @@ async function initializeToolboxTable(data, toolboxOwn, quantityMonitoring) {
             const searchLower = searchText.toLowerCase();
             filteredData = data.filter(item =>
                 item.title.toLowerCase().includes(searchLower) ||
-                item.category.toLowerCase().includes(searchLower) ||
+                item.toolkitData.description.toLowerCase().includes(searchLower)
-                item.placement.toLowerCase().includes(searchLower) ||
-                item.totalQuantity.toString().includes(searchLower) ||
-                item.totalCost.toString().includes(searchLower) ||
-                (item.indicator?.text && item.indicator.text.toLowerCase().includes(searchLower))
             );
         }
         currentPage = 1;
         sortData(currentSort.field, currentSort.direction);
         await initializePagination();
     }
+    async function filterIndicator() {
+        const searchLower = 'мало';
+        filteredData = data.filter(item =>
+            (item.indicator?.text && item.indicator.text.toLowerCase().includes(searchLower))
+        );
+        currentPage = 1;
+        sortData(currentSort.field, currentSort.direction);
+        await initializePagination();
+    }
 
     // Инициализация сортировки по заголовкам
     document.querySelectorAll('#toolboxItemsTable th[data-sort]').forEach(th => {
@@ -1522,9 +1582,26 @@ async function initializeToolboxTable(data, toolboxOwn, quantityMonitoring) {
     // Инициализация кнопки сброса фильтра
     document.getElementById('resetFilter').addEventListener('click', async () => {
         searchInput.value = '';
+        searchInput.placeholder = 'Поиск по всем полям...';
         await filterData('');
     });
 
+    // Инициализация кнопки "мало"
+    try {
+        document.getElementById('notEnoughBtn').addEventListener('click', async () => {
+            const showAll = 'Сбросить фильтр -->';
+            if (searchInput.placeholder === showAll) {
+                searchInput.placeholder = 'Поиск по всем полям...';
+                searchInput.value = '';
+                await filterData('');
+                return;
+            }
+            searchInput.value = '';
+            searchInput.placeholder = showAll;
+            await filterIndicator();
+        });
+    } catch (_) { }
+
     // Начальная инициализация
     sortData(currentSort.field, currentSort.direction);
     await initializePagination();
@@ -1727,12 +1804,12 @@ async function showOperationModal(operation, selectedItem) {
                 </div>
                 <div class="modal-body">
                     <p><strong>${selectedItem.title}</strong> (доступно: ${selectedItem.totalQuantity} шт.)</p>
-                    <div class="mb-3 d-flex flex-column flex-md-row align-items-md-center justify-content-left gap-2">
+                    <div class="d-flex flex-column flex-md-row align-items-center gap-2">
-                        <label for="operationQuantity" class="form-label">Количество: ${operation === 'writeoff' || operation === 'get' ? `(макс: ${selectedItem.totalQuantity})` : ''}</label>
+                        <label for="operationQuantity" class="form-label mb-0">Количество: (макс: ${selectedItem.totalQuantity})</label>
                         <input type="number" class="form-control" id="operationQuantity" style="max-width: 100px"
                                min="1" ${(operation === 'writeoff' || operation === 'get') ? `max="${selectedItem.totalQuantity}"` : ''} value="1">
                     </div>
-                    <div class="mb-3">
+                    <div class="my-3">
                         <label for="operationComment" class="form-label">Обоснование:</label>
                         <textarea class="form-control" id="operationComment" rows="2"></textarea>
                     </div>