From 80d553650360fa14d2abbfd9c25874811c6325f4 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Fri, 27 Jun 2025 19:53:40 +0300
Subject: [PATCH] feat(views/table): basic drag support

---
 .../widgets/view_widgets/table_view/data.ts   | 22 +++++++++----
 .../widgets/view_widgets/table_view/index.ts  | 32 ++++++++++++++++++-
 2 files changed, 47 insertions(+), 7 deletions(-)

diff --git a/apps/client/src/widgets/view_widgets/table_view/data.ts b/apps/client/src/widgets/view_widgets/table_view/data.ts
index 17257ba8b..1ac64e364 100644
--- a/apps/client/src/widgets/view_widgets/table_view/data.ts
+++ b/apps/client/src/widgets/view_widgets/table_view/data.ts
@@ -1,11 +1,14 @@
 import { GridOptions } from "ag-grid-community";
 import FNote from "../../../entities/fnote.js";
 import type { LabelType } from "../../../services/promoted_attribute_definition_parser.js";
+import froca from "../../../services/froca.js";
 
 export type TableData = {
     noteId: string;
     title: string;
     labels: Record<string, boolean | string | null>;
+    branchId: string;
+    position: number;
 };
 
 export interface PromotedAttributeInformation {
@@ -16,9 +19,9 @@ export interface PromotedAttributeInformation {
 
 type GridLabelType = 'text' | 'number' | 'boolean' | 'date' | 'dateString' | 'object';
 
-export function buildData(info: PromotedAttributeInformation[], notes: FNote[]) {
+export function buildData(parentNote: FNote, info: PromotedAttributeInformation[], notes: FNote[]) {
     const columnDefs = buildColumnDefinitions(info);
-    const rowData = buildRowDefinitions(notes, info);
+    const rowData = buildRowDefinitions(parentNote, notes, info);
 
     return {
         rowData,
@@ -34,7 +37,11 @@ export function buildColumnDefinitions(info: PromotedAttributeInformation[]) {
         },
         {
             field: "title",
-            editable: true
+            editable: true,
+            rowDrag: true,
+        },
+        {
+            field: "position"
         }
     ];
 
@@ -68,9 +75,10 @@ function mapDataType(labelType: LabelType | undefined): GridLabelType {
     }
 }
 
-export function buildRowDefinitions(notes: FNote[], infos: PromotedAttributeInformation[]) {
+export function buildRowDefinitions(parentNote: FNote, notes: FNote[], infos: PromotedAttributeInformation[]) {
     const definitions: GridOptions<TableData>["rowData"] = [];
-    for (const note of notes) {
+    for (const branch of parentNote.getChildBranches()) {
+        const note = branch.getNoteFromCache();
         const labels: typeof definitions[0]["labels"] = {};
         for (const { name, type } of infos) {
             if (type === "boolean") {
@@ -82,7 +90,9 @@ export function buildRowDefinitions(notes: FNote[], infos: PromotedAttributeInfo
         definitions.push({
             noteId: note.noteId,
             title: note.title,
-            labels
+            labels,
+            position: branch.notePosition,
+            branchId: branch.branchId
         });
     }
 
diff --git a/apps/client/src/widgets/view_widgets/table_view/index.ts b/apps/client/src/widgets/view_widgets/table_view/index.ts
index 720929e73..83bddbf99 100644
--- a/apps/client/src/widgets/view_widgets/table_view/index.ts
+++ b/apps/client/src/widgets/view_widgets/table_view/index.ts
@@ -7,6 +7,7 @@ import applyHeaderCustomization from "./header-customization.js";
 import server from "../../../services/server.js";
 import type { GridApi, GridState } from "ag-grid-community";
 import SpacedUpdate from "../../../services/spaced_update.js";
+import branches from "../../../services/branches.js";
 
 const TPL = /*html*/`
 <div class="table-view">
@@ -79,8 +80,9 @@ export default class TableView extends ViewMode<StateInfo> {
         const initialState = viewStorage?.gridState;
 
         this.api = createGrid(el, {
-            ...buildData(info, notes),
+            ...buildData(parentNote, info, notes),
             ...setupEditing(),
+            ...setupDragging(),
             initialState,
             async onGridReady(event) {
                 applyHeaderCustomization(el, event.api);
@@ -127,3 +129,31 @@ function setupEditing(): GridOptions<TableData> {
         }
     }
 }
+
+function setupDragging() {
+    return {
+        onRowDragEnd(e) {
+            const fromIndex = e.node.rowIndex;
+            const toIndex = e.overNode?.rowIndex;
+            console.log(fromIndex, toIndex);
+            if (fromIndex === null || toIndex === null || toIndex === undefined || fromIndex === toIndex) {
+                return;
+            }
+
+            const isBelow = (toIndex > fromIndex);
+            const fromBranchId = e.node.data?.branchId;
+            const toBranchId = e.overNode?.data?.branchId;
+            if (fromBranchId === undefined || toBranchId === undefined) {
+                return;
+            }
+
+            if (isBelow) {
+                console.log("Move below", fromIndex, toIndex);
+                branches.moveAfterBranch([ fromBranchId ], toBranchId);
+            } else {
+                console.log("Move above", fromIndex, toIndex);
+                branches.moveBeforeBranch([ fromBranchId ], toBranchId);
+            }
+        }
+    };
+}