chore(react/collections/table): bring editing cells

This commit is contained in:
Elian Doran 2025-09-07 21:07:55 +03:00
parent 57046d714b
commit 7ba24968d8
No known key found for this signature in database
3 changed files with 40 additions and 51 deletions

View File

@ -1,10 +1,14 @@
import { RowComponent, Tabulator } from "tabulator-tables";
import { EventCallBackMethods, RowComponent, Tabulator } from "tabulator-tables";
import { CommandListenerData } from "../../../components/app_context";
import note_create, { CreateNoteOpts } from "../../../services/note_create";
import { useLegacyImperativeHandlers } from "../../react/hooks";
import { RefObject } from "preact";
import { setAttribute, setLabel } from "../../../services/attributes";
import froca from "../../../services/froca";
import server from "../../../services/server";
export default function useTableEditing(api: RefObject<Tabulator>, parentNotePath: string) {
export default function useTableEditing(api: RefObject<Tabulator>, parentNotePath: string): Partial<EventCallBackMethods> {
// Adding new rows
useLegacyImperativeHandlers({
addNewRowCommand({ customOpts, parentNotePath: customNotePath }: CommandListenerData<"addNewRow">) {
const notePath = customNotePath ?? parentNotePath;
@ -25,6 +29,34 @@ export default function useTableEditing(api: RefObject<Tabulator>, parentNotePat
}
});
// Editing existing rows.
return {
cellEdited: async (cell) => {
const noteId = cell.getRow().getData().noteId;
const field = cell.getField();
let newValue = cell.getValue();
if (field === "title") {
server.put(`notes/${noteId}/title`, { title: newValue });
return;
}
if (field.includes(".")) {
const [ type, name ] = field.split(".", 2);
if (type === "labels") {
if (typeof newValue === "boolean") {
newValue = newValue ? "true" : "false";
}
setLabel(noteId, name, newValue);
} else if (type === "relations") {
const note = await froca.getNote(noteId);
if (note) {
setAttribute(note, "relation", name, newValue);
}
}
}
}
};
}
function focusOnBranch(api: Tabulator, branchId: string) {

View File

@ -48,7 +48,7 @@ export default function TableView({ note, noteIds, notePath, viewConfig, saveCon
const contextMenuEvents = useContextMenu(note, parentComponent, tabulatorRef);
const persistenceProps = usePersistence(viewConfig, saveConfig);
useTableEditing(tabulatorRef, notePath);
const editingEvents = useTableEditing(tabulatorRef, notePath);
const dataTreeProps = useMemo<Options>(() => {
if (!hasChildren) return {};
return {
@ -73,12 +73,16 @@ export default function TableView({ note, noteIds, notePath, viewConfig, saveCon
data={rowData}
modules={[ SortModule, FormatModule, InteractionModule, EditModule, ResizeColumnsModule, FrozenColumnsModule, PersistenceModule, MoveColumnsModule, MoveRowsModule, DataTreeModule ]}
footerElement={<TableFooter note={note} />}
events={contextMenuEvents}
events={{
...contextMenuEvents,
...editingEvents
}}
persistence {...persistenceProps}
layout="fitDataFill"
index="branchId"
movableColumns
movableRows={movableRows}
{...dataTreeProps}
/>
<TableFooter note={note} />

View File

@ -1,47 +0,0 @@
import { RowComponent, Tabulator } from "tabulator-tables";
import Component from "../../../components/component.js";
import { setAttribute, setLabel } from "../../../services/attributes.js";
import server from "../../../services/server.js";
import froca from "../../../services/froca.js";
import note_create, { CreateNoteOpts } from "../../../services/note_create.js";
import { CommandListenerData } from "../../../components/app_context.js";
export default class TableRowEditing extends Component {
private parentNotePath: string;
private api: Tabulator;
constructor(api: Tabulator, parentNotePath: string) {
super();
this.api = api;
this.parentNotePath = parentNotePath;
api.on("cellEdited", async (cell) => {
const noteId = cell.getRow().getData().noteId;
const field = cell.getField();
let newValue = cell.getValue();
if (field === "title") {
server.put(`notes/${noteId}/title`, { title: newValue });
return;
}
if (field.includes(".")) {
const [ type, name ] = field.split(".", 2);
if (type === "labels") {
if (typeof newValue === "boolean") {
newValue = newValue ? "true" : "false";
}
setLabel(noteId, name, newValue);
} else if (type === "relations") {
const note = await froca.getNote(noteId);
if (note) {
setAttribute(note, "relation", name, newValue);
}
}
}
});
}
}