Squashed new RBAC

panel/ui/SortableHeader.tsx

@@ -0,0 +1,61 @@
+import { Component, JSX, Show } from 'solid-js'
+import { SortField, useTableSort } from '../context/sort'
+import { useI18n } from '../intl/i18n'
+import styles from '../styles/Table.module.css'
+
+/**
+ * Свойства компонента SortableHeader
+ */
+interface SortableHeaderProps {
+  field: SortField
+  children: JSX.Element
+  allowedFields?: SortField[]
+  class?: string
+}
+
+/**
+ * Компонент сортируемого заголовка таблицы
+ * Отображает заголовок с возможностью сортировки при клике
+ */
+const SortableHeader: Component<SortableHeaderProps> = (props) => {
+  const { handleSort, getSortIcon, sortState, isFieldAllowed } = useTableSort()
+  const { tr } = useI18n()
+
+  const isActive = () => sortState().field === props.field
+  const isAllowed = () => isFieldAllowed(props.field, props.allowedFields)
+
+  const handleClick = () => {
+    if (isAllowed()) {
+      handleSort(props.field, props.allowedFields)
+    }
+  }
+
+  return (
+    <th
+      class={`${styles.sortableHeader} ${props.class || ''} ${!isAllowed() ? styles.disabledHeader : ''}`}
+      data-active={isActive()}
+      onClick={handleClick}
+      onKeyDown={(e) => {
+        if ((e.key === 'Enter' || e.key === ' ') && isAllowed()) {
+          e.preventDefault()
+          handleClick()
+        }
+      }}
+      tabindex={isAllowed() ? 0 : -1}
+      data-sort={isActive() ? (sortState().direction === 'asc' ? 'ascending' : 'descending') : 'none'}
+      style={{
+        cursor: isAllowed() ? 'pointer' : 'not-allowed',
+        opacity: isAllowed() ? 1 : 0.6
+      }}
+    >
+      <span class={styles.headerContent}>
+        {typeof props.children === 'string' ? tr(props.children as string) : props.children}
+        <Show when={isAllowed()}>
+          <span class={styles.sortIcon}>{getSortIcon(props.field)}</span>
+        </Show>
+      </span>
+    </th>
+  )
+}
+
+export default SortableHeader