gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-20 07:08:55 +02:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

feat(views/table): basic drag support

Browse Source
This commit is contained in:
Elian Doran 2025-06-27 19:53:40 +03:00
parent 9dcd79bd94
commit 80d5536503
No known key found for this signature in database
2 changed files with 47 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
apps/client/src/widgets/view_widgets/table_view/data.ts
View File

@ -1,11 +1,14 @@
import { GridOptions } from "ag-grid-community"; import { GridOptions } from "ag-grid-community";
import FNote from "../../../entities/fnote.js"; import FNote from "../../../entities/fnote.js";
import type { LabelType } from "../../../services/promoted_attribute_definition_parser.js"; import type { LabelType } from "../../../services/promoted_attribute_definition_parser.js";
import froca from "../../../services/froca.js";
export type TableData = { export type TableData = {
noteId: string; noteId: string;
title: string; title: string;
labels: Record<string, boolean | string | null>; labels: Record<string, boolean | string | null>;
branchId: string;
position: number;
}; };
export interface PromotedAttributeInformation { export interface PromotedAttributeInformation {
@ -16,9 +19,9 @@ export interface PromotedAttributeInformation {
type GridLabelType = 'text' | 'number' | 'boolean' | 'date' | 'dateString' | 'object'; 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 columnDefs = buildColumnDefinitions(info);
const rowData = buildRowDefinitions(notes, info); const rowData = buildRowDefinitions(parentNote, notes, info);
return { return {
rowData, rowData,
@ -34,7 +37,11 @@ export function buildColumnDefinitions(info: PromotedAttributeInformation[]) {
}, },
{ {
field: "title", 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"] = []; 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"] = {}; const labels: typeof definitions[0]["labels"] = {};
for (const { name, type } of infos) { for (const { name, type } of infos) {
if (type === "boolean") { if (type === "boolean") {
@ -82,7 +90,9 @@ export function buildRowDefinitions(notes: FNote[], infos: PromotedAttributeInfo
definitions.push({ definitions.push({
noteId: note.noteId, noteId: note.noteId,
title: note.title, title: note.title,
labels labels,
position: branch.notePosition,
branchId: branch.branchId
}); });
} }

32
apps/client/src/widgets/view_widgets/table_view/index.ts
View File

@ -7,6 +7,7 @@ import applyHeaderCustomization from "./header-customization.js";
import server from "../../../services/server.js"; import server from "../../../services/server.js";
import type { GridApi, GridState } from "ag-grid-community"; import type { GridApi, GridState } from "ag-grid-community";
import SpacedUpdate from "../../../services/spaced_update.js"; import SpacedUpdate from "../../../services/spaced_update.js";
import branches from "../../../services/branches.js";
const TPL = /*html*/` const TPL = /*html*/`
<div class="table-view"> <div class="table-view">
@ -79,8 +80,9 @@ export default class TableView extends ViewMode<StateInfo> {
const initialState = viewStorage?.gridState; const initialState = viewStorage?.gridState;
this.api = createGrid(el, { this.api = createGrid(el, {
...buildData(info, notes), ...buildData(parentNote, info, notes),
...setupEditing(), ...setupEditing(),
...setupDragging(),
initialState, initialState,
async onGridReady(event) { async onGridReady(event) {
applyHeaderCustomization(el, event.api); 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);
}
}
};
}