fix(ui): подтверждать перемещение правил Filters

This commit is contained in:
Denozordec committed 2026-09-30 11:35:36 +07:00
1 parent c4011cfaff
commit 7554f1804b
6 files changed
+138 -24

No files matched your search

+20 -7
View File
@@ -145,9 +145,11 @@ function FilterGatewayCell({
}
function FilterRowActions({
disabled,
onEdit,
onDelete,
}: {
disabled: boolean
onEdit: () => void
onDelete: () => void
}) {
@@ -158,6 +160,7 @@ function FilterRowActions({
variant="ghost"
className="size-7 p-0 text-muted-foreground hover:text-foreground"
onClick={onEdit}
disabled={disabled}
aria-label="Редактировать правило"
>
<PencilIcon className="size-3.5" />
@@ -167,6 +170,7 @@ function FilterRowActions({
variant="ghost"
className="size-7 p-0 text-muted-foreground hover:text-destructive"
onClick={onDelete}
disabled={disabled}
aria-label="Удалить правило"
>
<TrashIcon className="size-3.5" />
@@ -177,6 +181,8 @@ function FilterRowActions({
interface FiltersDataGridProps {
rules: FilterRule[]
orderedRules?: FilterRule[]
mutationsLocked?: boolean
tunnelsList: GreTunnel[]
serversList: Server[]
communityNameMap: Record<string, string>
@@ -190,6 +196,8 @@ interface FiltersDataGridProps {
function FiltersDataGrid({
rules,
orderedRules = rules,
mutationsLocked = false,
tunnelsList,
serversList,
communityNameMap,
@@ -206,14 +214,15 @@ function FiltersDataGrid({
id: "priority",
header: () => <span className="text-xs font-medium text-muted-foreground">#</span>,
enableSorting: false,
cell: ({ row, table }) => {
const isLast = row.index === table.getRowModel().rows.length - 1
cell: ({ row }) => {
const index = orderedRules.findIndex(r => r.id === row.original.id)
const isLast = index === orderedRules.length - 1
return (
<div className="flex items-center justify-center text-[11px] font-mono text-muted-foreground/40">
{isLast ? (
<StarIcon className="size-3 text-amber-400 fill-amber-400" aria-label="Наивысший приоритет" />
) : (
<span>{row.index + 1}</span>
<span>{index + 1}</span>
)}
</div>
)
@@ -225,15 +234,16 @@ function FiltersDataGrid({
id: "reorder",
header: () => <span className="sr-only">Порядок</span>,
enableSorting: false,
cell: ({ row, table }) => {
const isLast = row.index === table.getRowModel().rows.length - 1
cell: ({ row }) => {
const index = orderedRules.findIndex(r => r.id === row.original.id)
const isLast = index === orderedRules.length - 1
return (
<div className="flex flex-col gap-px opacity-0 transition-opacity group-hover/row:opacity-100 focus-within:opacity-100">
<button
type="button"
onClick={() => onMoveUp(row.original.id)}
aria-label={`Поднять правило ${row.original.community}`}
disabled={row.index === 0}
disabled={mutationsLocked || index <= 0}
className="text-muted-foreground/50 hover:text-foreground disabled:opacity-20"
>
<ChevronUpIcon className="size-3" />
@@ -242,7 +252,7 @@ function FiltersDataGrid({
type="button"
onClick={() => onMoveDown(row.original.id)}
aria-label={`Опустить правило ${row.original.community}`}
disabled={isLast}
disabled={mutationsLocked || index < 0 || isLast}
className="text-muted-foreground/50 hover:text-foreground disabled:opacity-20"
>
<ChevronDownIcon className="size-3" />
@@ -320,6 +330,7 @@ function FiltersDataGrid({
enableSorting: false,
cell: ({ row }) => (
<FilterRowActions
disabled={mutationsLocked}
onEdit={() => onEdit(row.original)}
onDelete={() => onDelete(row.original.id)}
/>
@@ -330,6 +341,8 @@ function FiltersDataGrid({
],
[
communityNameMap,
orderedRules,
mutationsLocked,
enableSorting,
onDelete,
onEdit,