feat: настраиваемая колонка отображения в дереве справочника

- Добавлено поле data_tables.tree_display_column_index. - Backend /api/directories/:id/rows/tree возвращает displayColumnIndex и формирует label для row-узлов на основе выбранной колонки. - В редакторе справочника добавлен селектор «Колонка для отображения в дереве». - DirectoryRowTree, DirectoryColumnTree, DirectoryTreeSelect, DirectoryTreeMultiSelect используют настроенную колонку. - TableFieldSelect / TableFieldMultiSelect используют treeDisplayColumnIndex справочника как fallback, если в поле формы не задан displayColumn. - Миграция 0057 + запись в _journal.json.
2026-07-12 23:07:34 +03:00
parent 4e2a622265
commit 09861fc966
10 changed files with 76 additions and 57 deletions
--- a/client/src/components/TableFieldMultiSelect.tsx
+++ b/client/src/components/TableFieldMultiSelect.tsx
@@ -35,6 +35,7 @@ export default function TableFieldMultiSelect({
      rows: DataTableRow[];
      columns: Array<{ name: string }>;
      treeColumnIndex: number | null;
+      treeDisplayColumnIndex: number | null;
    };
  }>({
    queryKey: ['/api/directories', tableId],
@@ -69,7 +70,7 @@ export default function TableFieldMultiSelect({

  let displayColumnIndex = table?.columns?.findIndex((c) => c.name === displayColumn);
  if (displayColumnIndex === undefined || displayColumnIndex < 0) {
-    displayColumnIndex = 0;
+    displayColumnIndex = table?.treeDisplayColumnIndex ?? 0;
  }

  const selectedValues = useMemo(() => {
@@ -166,7 +167,6 @@ export default function TableFieldMultiSelect({
          {hasTree ? (
            <DirectoryTreeMultiSelect
              nodes={nodes}
-              displayColumnIndex={displayColumnIndex!}
              selected={selectedSet}
              onToggle={toggle}
              searchTerm={searchTerm}
--- a/client/src/components/TableFieldSelect.tsx
+++ b/client/src/components/TableFieldSelect.tsx
@@ -33,6 +33,7 @@ export default function TableFieldSelect({
      rows: DataTableRow[];
      columns: Array<{ name: string }>;
      treeColumnIndex: number | null;
+      treeDisplayColumnIndex: number | null;
    };
  }>({
    queryKey: ['/api/directories', tableId],
@@ -67,7 +68,7 @@ export default function TableFieldSelect({

  let displayColumnIndex = table?.columns?.findIndex((c) => c.name === displayColumn);
  if (displayColumnIndex === undefined || displayColumnIndex < 0) {
-    displayColumnIndex = 0;
+    displayColumnIndex = table?.treeDisplayColumnIndex ?? 0;
  }

  const sortedRows = useMemo(() => {
@@ -151,7 +152,6 @@ export default function TableFieldSelect({
          {hasTree ? (
            <DirectoryTreeSelect
              nodes={nodes}
-              displayColumnIndex={displayColumnIndex!}
              value={value}
              onChange={handleSelect}
              searchTerm={searchTerm}
--- a/client/src/components/directories/DirectoryRowTree.tsx
+++ b/client/src/components/directories/DirectoryRowTree.tsx
@@ -107,7 +107,8 @@ function getVisibleItems(tree: DirectoryRowTreeItem[], expanded: Set<number>): D

 function filterTree(
  tree: DirectoryRowTreeItem[],
-  query: string
+  query: string,
+  labelColumnIndex = 0
 ): { tree: DirectoryRowTreeItem[]; expanded: Set<number> } {
  if (!query.trim()) return { tree, expanded: new Set<number>() };
  const q = query.toLowerCase();
@@ -115,7 +116,7 @@ function filterTree(
  function walk(nodes: DirectoryRowTreeItem[]): DirectoryRowTreeItem[] {
    const visible: DirectoryRowTreeItem[] = [];
    for (const node of nodes) {
-      const label = String(node.values[0] ?? '').toLowerCase();
+      const label = getRowLabel(node, labelColumnIndex).toLowerCase();
      const children = walk(node.children);
      const childMatch = children.length > 0;
      if (label.includes(q) || childMatch) {
@@ -298,7 +299,7 @@ export function DirectoryRowTree({
  searchQuery,
 }: DirectoryRowTreeProps & { searchQuery?: string }) {
  const tree = useMemo(() => buildTree(rows), [rows]);
-  const filtered = useMemo(() => filterTree(tree, searchQuery || ''), [tree, searchQuery]);
+  const filtered = useMemo(() => filterTree(tree, searchQuery || '', labelColumnIndex), [tree, searchQuery, labelColumnIndex]);
  const effectiveExpanded = useMemo(
    () => (searchQuery?.trim() ? filtered.expanded : expanded),
    [searchQuery, filtered.expanded, expanded]
--- a/client/src/components/directories/DirectoryTreeMultiSelect.tsx
+++ b/client/src/components/directories/DirectoryTreeMultiSelect.tsx
@@ -6,7 +6,7 @@ import type { DataTableRow } from '@shared/schema';

 export type DirectoryTreeNode =
  | { type: 'group'; id: string; label: string; level: number; children: DirectoryTreeNode[] }
-  | { type: 'row'; id: number; level: number; row: DataTableRow };
+  | { type: 'row'; id: number; label: string; level: number; row: DataTableRow };

 function assignLevels(nodes: DirectoryTreeNode[], level = 0): DirectoryTreeNode[] {
  return nodes.map((node) => {
@@ -19,7 +19,6 @@ function assignLevels(nodes: DirectoryTreeNode[], level = 0): DirectoryTreeNode[

 interface DirectoryTreeMultiSelectProps {
  nodes: DirectoryTreeNode[];
-  displayColumnIndex: number;
  selected: Set<string>;
  onToggle: (rowId: string) => void;
  searchTerm?: string;
@@ -27,8 +26,7 @@ interface DirectoryTreeMultiSelectProps {

 function filterNodes(
  nodes: DirectoryTreeNode[],
-  query: string,
-  displayColumnIndex: number
+  query: string
 ): { nodes: DirectoryTreeNode[]; expanded: Set<string> } {
  if (!query.trim()) return { nodes, expanded: new Set<string>() };
  const q = query.toLowerCase();
@@ -38,7 +36,7 @@ function filterNodes(
    const visible: DirectoryTreeNode[] = [];
    for (const node of items) {
      if (node.type === 'row') {
-        const label = String(node.row.values[displayColumnIndex] ?? node.row.values[0] ?? '').toLowerCase();
+        const label = node.label.toLowerCase();
        if (label.includes(q)) visible.push(node);
      } else {
        const children = walk(node.children);
@@ -56,21 +54,14 @@ function filterNodes(
  return { nodes: walk(nodes), expanded };
 }

-function getRowLabel(row: DataTableRow, displayColumnIndex: number): string {
-  const values = Array.isArray(row.values) ? row.values : [];
-  return String(values[displayColumnIndex] ?? values[0] ?? '') || '(без названия)';
-}
-
 function TreeNode({
  node,
-  displayColumnIndex,
  selected,
  onToggle,
  expanded,
  onToggleExpand,
 }: {
  node: DirectoryTreeNode;
-  displayColumnIndex: number;
  selected: Set<string>;
  onToggle: (rowId: string) => void;
  expanded: Set<string>;
@@ -87,7 +78,7 @@ function TreeNode({
        <Checkbox checked={selected.has(rowId)} />
        <FileText className="w-4 h-4 shrink-0 text-muted-foreground" />
        <span className={cn('flex-1 truncate', selected.has(rowId) && 'font-medium')}>
-          {getRowLabel(node.row, displayColumnIndex)}
+          {node.label}
        </span>
      </div>
    );
@@ -117,7 +108,6 @@ function TreeNode({
            <TreeNode
              key={child.type === 'group' ? child.id : child.id}
              node={child}
-              displayColumnIndex={displayColumnIndex}
              selected={selected}
              onToggle={onToggle}
              expanded={expanded}
@@ -132,15 +122,14 @@ function TreeNode({

 export function DirectoryTreeMultiSelect({
  nodes,
-  displayColumnIndex,
  selected,
  onToggle,
  searchTerm = '',
 }: DirectoryTreeMultiSelectProps) {
  const nodesWithLevels = useMemo(() => assignLevels(nodes), [nodes]);
  const filtered = useMemo(
-    () => filterNodes(nodesWithLevels, searchTerm, displayColumnIndex),
-    [nodesWithLevels, searchTerm, displayColumnIndex]
+    () => filterNodes(nodesWithLevels, searchTerm),
+    [nodesWithLevels, searchTerm]
  );
  const [manualExpanded, setManualExpanded] = useState<Set<string>>(new Set());

@@ -168,7 +157,6 @@ export function DirectoryTreeMultiSelect({
        <TreeNode
          key={node.type === 'group' ? node.id : node.id}
          node={node}
-          displayColumnIndex={displayColumnIndex}
          selected={selected}
          onToggle={onToggle}
          expanded={effectiveExpanded}
--- a/client/src/components/directories/DirectoryTreeSelect.tsx
+++ b/client/src/components/directories/DirectoryTreeSelect.tsx
@@ -5,7 +5,7 @@ import type { DataTableRow } from '@shared/schema';

 export type DirectoryTreeNode =
  | { type: 'group'; id: string; label: string; level: number; children: DirectoryTreeNode[] }
-  | { type: 'row'; id: number; level: number; row: DataTableRow };
+  | { type: 'row'; id: number; label: string; level: number; row: DataTableRow };

 function assignLevels(nodes: DirectoryTreeNode[], level = 0): DirectoryTreeNode[] {
  return nodes.map((node) => {
@@ -18,7 +18,6 @@ function assignLevels(nodes: DirectoryTreeNode[], level = 0): DirectoryTreeNode[

 interface DirectoryTreeSelectProps {
  nodes: DirectoryTreeNode[];
-  displayColumnIndex: number;
  value?: string | number | null;
  onChange: (rowId: string) => void;
  searchTerm?: string;
@@ -26,8 +25,7 @@ interface DirectoryTreeSelectProps {

 function filterNodes(
  nodes: DirectoryTreeNode[],
-  query: string,
-  displayColumnIndex: number
+  query: string
 ): { nodes: DirectoryTreeNode[]; expanded: Set<string> } {
  if (!query.trim()) return { nodes, expanded: new Set<string>() };
  const q = query.toLowerCase();
@@ -37,7 +35,7 @@ function filterNodes(
    const visible: DirectoryTreeNode[] = [];
    for (const node of items) {
      if (node.type === 'row') {
-        const label = String(node.row.values[displayColumnIndex] ?? node.row.values[0] ?? '').toLowerCase();
+        const label = node.label.toLowerCase();
        if (label.includes(q)) visible.push(node);
      } else {
        const children = walk(node.children);
@@ -55,21 +53,14 @@ function filterNodes(
  return { nodes: walk(nodes), expanded };
 }

-function getRowLabel(row: DataTableRow, displayColumnIndex: number): string {
-  const values = Array.isArray(row.values) ? row.values : [];
-  return String(values[displayColumnIndex] ?? values[0] ?? '') || '(без названия)';
-}
-
 function TreeNode({
  node,
-  displayColumnIndex,
  value,
  onChange,
  expanded,
  onToggle,
 }: {
  node: DirectoryTreeNode;
-  displayColumnIndex: number;
  value?: string | number | null;
  onChange: (rowId: string) => void;
  expanded: Set<string>;
@@ -89,7 +80,7 @@ function TreeNode({
        onClick={() => onChange(rowId)}
      >
        <FileText className="w-4 h-4 shrink-0 text-muted-foreground" />
-        <span className="flex-1 truncate">{getRowLabel(node.row, displayColumnIndex)}</span>
+        <span className="flex-1 truncate">{node.label}</span>
      </button>
    );
  }
@@ -116,7 +107,6 @@ function TreeNode({
            <TreeNode
              key={child.type === 'group' ? child.id : child.id}
              node={child}
-              displayColumnIndex={displayColumnIndex}
              value={value}
              onChange={onChange}
              expanded={expanded}
@@ -131,15 +121,14 @@ function TreeNode({

 export function DirectoryTreeSelect({
  nodes,
-  displayColumnIndex,
  value,
  onChange,
  searchTerm = '',
 }: DirectoryTreeSelectProps) {
  const nodesWithLevels = useMemo(() => assignLevels(nodes), [nodes]);
  const filtered = useMemo(
-    () => filterNodes(nodesWithLevels, searchTerm, displayColumnIndex),
-    [nodesWithLevels, searchTerm, displayColumnIndex]
+    () => filterNodes(nodesWithLevels, searchTerm),
+    [nodesWithLevels, searchTerm]
  );
  const [manualExpanded, setManualExpanded] = useState<Set<string>>(new Set());

@@ -176,7 +165,6 @@ export function DirectoryTreeSelect({
        <TreeNode
          key={node.type === 'group' ? node.id : node.id}
          node={node}
-          displayColumnIndex={displayColumnIndex}
          value={value}
          onChange={onChange}
          expanded={effectiveExpanded}