Squashed new RBAC

panel/ui/TableControls.tsx

@@ -0,0 +1,58 @@
+import { JSX, Show } from 'solid-js'
+import styles from '../styles/Table.module.css'
+
+export interface TableControlsProps {
+  onRefresh?: () => void
+  isLoading?: boolean
+  children?: JSX.Element
+  actions?: JSX.Element
+  searchValue?: string
+  onSearchChange?: (value: string) => void
+  onSearch?: () => void
+  searchPlaceholder?: string
+}
+
+/**
+ * Компонент для унифицированного управления таблицами
+ * Содержит элементы управления сортировкой, фильтрацией и действиями
+ */
+const TableControls = (props: TableControlsProps) => {
+  return (
+    <div class={styles.tableControls}>
+      <div class={styles.controlsContainer}>
+        {/* Поиск и действия в одной строке */}
+        <Show when={props.onSearchChange}>
+          <div class={styles.searchContainer}>
+            <input
+              type="text"
+              placeholder={props.searchPlaceholder}
+              value={props.searchValue || ''}
+              onInput={(e) => props.onSearchChange?.(e.currentTarget.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' && props.onSearch) {
+                  props.onSearch()
+                }
+              }}
+              class={styles.searchInput}
+            />
+            <Show when={props.onSearch}>
+              <button class={styles.searchButton} onClick={props.onSearch}>
+                Поиск
+              </button>
+            </Show>
+          </div>
+        </Show>
+
+        {/* Действия справа от поиска */}
+        <Show when={props.actions}>
+          <div class={styles.controlsRight}>{props.actions}</div>
+        </Show>
+
+        {/* Дополнительные элементы управления */}
+        {props.children}
+      </div>
+    </div>
+  )
+}
+
+export default TableControls