gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-01-07 23:24:25 +01:00
Code Issues Actions 15 Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
apps/client/src/widgets/collections/table/editing.ts
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 { CommandListenerData } from "../../../components/app_context";
import note_create, { CreateNoteOpts } from "../../../services/note_create"; import note_create, { CreateNoteOpts } from "../../../services/note_create";
import { useLegacyImperativeHandlers } from "../../react/hooks"; import { useLegacyImperativeHandlers } from "../../react/hooks";
import { RefObject } from "preact"; 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({ useLegacyImperativeHandlers({
addNewRowCommand({ customOpts, parentNotePath: customNotePath }: CommandListenerData<"addNewRow">) { addNewRowCommand({ customOpts, parentNotePath: customNotePath }: CommandListenerData<"addNewRow">) {
const notePath = customNotePath ?? parentNotePath; 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) { function focusOnBranch(api: Tabulator, branchId: string) {

8
apps/client/src/widgets/collections/table/index.tsx
View File

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

47
apps/client/src/widgets/view_widgets/table_view/row_editing.ts
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);
}
}
}
});
}
}