feat: Добавить новые компоненты и улучшения UX/UI, включая Breadcrumbs с динамическими фильтрами, ToastContainer для уведомлений и CommandPalette для глобального поиска. Обновить TableSkeleton с анимацией и добавить новые skeleton компоненты для карточек, списков и форм. Обновить документацию по новым компонентам и улучшениям.

2025-10-02 18:02:22 +07:00
parent 495063a510
commit 339144fb11
12 changed files with 1950 additions and 24 deletions
@@ -0,0 +1,120 @@
+import { IconTrash, IconEdit, IconDownload, IconX, IconChecks } from '@tabler/icons-react'
+
+/**
+ * Панель массовых действий для таблиц
+ * Показывается когда выбраны элементы
+ */
+function BulkActionsBar({ 
+  selectedCount = 0,
+  totalCount = 0,
+  onSelectAll = () => {},
+  onDeselectAll = () => {},
+  onDelete = null,
+  onEdit = null,
+  onExport = null,
+  customActions = [], // [{icon: Icon, label, onClick, variant}]
+  className = ''
+}) {
+  if (selectedCount === 0) return null
+
+  const allSelected = selectedCount === totalCount
+
+  return (
+    <div className={`card mb-3 ${className}`} style={{ 
+      position: 'sticky', 
+      top: '10px', 
+      zIndex: 10,
+      boxShadow: '0 0.5rem 1rem rgba(0,0,0,.15)'
+    }}>
+      <div className="card-body py-2 px-3">
+        <div className="d-flex align-items-center justify-content-between">
+          {/* Левая часть: информация о выборе */}
+          <div className="d-flex align-items-center gap-3">
+            <div className="d-flex align-items-center">
+              <IconChecks size={20} className="text-blue me-2" />
+              <span className="fw-bold">
+                Выбрано: <span className="text-blue">{selectedCount}</span>
+              </span>
+            </div>
+
+            {/* Кнопка выбрать все / снять выбор */}
+            {!allSelected && totalCount > selectedCount && (
+              <button
+                className="btn btn-sm btn-outline-primary"
+                onClick={onSelectAll}
+              >
+                Выбрать все ({totalCount})
+              </button>
+            )}
+
+            <button
+              className="btn btn-sm btn-ghost-secondary"
+              onClick={onDeselectAll}
+            >
+              <IconX size={16} className="me-1" />
+              Снять выбор
+            </button>
+          </div>
+
+          {/* Правая часть: действия */}
+          <div className="d-flex align-items-center gap-2">
+            {/* Экспорт */}
+            {onExport && (
+              <button
+                className="btn btn-sm btn-outline-primary"
+                onClick={onExport}
+                title="Экспортировать выбранное"
+              >
+                <IconDownload size={16} className="me-1" />
+                Экспорт
+              </button>
+            )}
+
+            {/* Редактирование */}
+            {onEdit && (
+              <button
+                className="btn btn-sm btn-outline-primary"
+                onClick={onEdit}
+                title="Редактировать выбранное"
+              >
+                <IconEdit size={16} className="me-1" />
+                Изменить
+              </button>
+            )}
+
+            {/* Пользовательские действия */}
+            {customActions.map((action, idx) => {
+              const Icon = action.icon
+              return (
+                <button
+                  key={idx}
+                  className={`btn btn-sm ${action.variant || 'btn-outline-primary'}`}
+                  onClick={action.onClick}
+                  title={action.title}
+                >
+                  {Icon && <Icon size={16} className="me-1" />}
+                  {action.label}
+                </button>
+              )
+            })}
+
+            {/* Удаление */}
+            {onDelete && (
+              <button
+                className="btn btn-sm btn-outline-danger"
+                onClick={onDelete}
+                title="Удалить выбранное"
+              >
+                <IconTrash size={16} className="me-1" />
+                Удалить ({selectedCount})
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default BulkActionsBar
+