gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-03 04:59:04 +01:00
Code Issues Actions 38 Packages Projects Releases Wiki Activity

chore(react/collections/table): bring back adding new rows

Browse Source
This commit is contained in:
Elian Doran 2025-09-07 20:38:16 +03:00
parent 0526445d3c
commit 57046d714b
No known key found for this signature in database
5 changed files with 66 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/client/src/widgets/collections/NoteList.tsx
View File

@ -19,7 +19,7 @@ interface NoteListProps<T extends object> {
export default function NoteList<T extends object>({ note: providedNote, highlightedTokens, displayOnlyCollections }: NoteListProps<T>) {
const widgetRef = useRef<HTMLDivElement>(null);
const { note: contextNote, noteContext } = useNoteContext();
const { note: contextNote, noteContext, notePath } = useNoteContext();
const note = providedNote ?? contextNote;
const viewType = useNoteViewType(note);
const noteIds = useNoteIds(note, viewType);
@ -56,9 +56,9 @@ export default function NoteList<T extends object>({ note: providedNote, highlig
// Preload the configuration.
let props: ViewModeProps<any> | undefined | null = null;
const viewModeConfig = useViewModeConfig(note, viewType);
if (note && viewModeConfig) {
if (note && notePath && viewModeConfig) {
props = {
note, noteIds,
note, noteIds, notePath,
highlightedTokens,
viewConfig: viewModeConfig[0],
saveConfig: viewModeConfig[1]
@ -66,7 +66,7 @@ export default function NoteList<T extends object>({ note: providedNote, highlig
}
return (
<div ref={widgetRef} className={`note-list-widget ${isFullHeight ? "full-height" : ""}`}>
<div ref={widgetRef} className={`note-list-widget component ${isFullHeight ? "full-height" : ""}`}>
{props && isEnabled && (
<div className="note-list-widget-content">
{getComponentByViewType(viewType, props)}

1
apps/client/src/widgets/collections/interface.ts
View File

@ -7,6 +7,7 @@ export type ViewTypeOptions = typeof allViewTypes[number];
export interface ViewModeProps<T extends object> {
note: FNote;
notePath: string;
/**
* We're using noteIds so that it's not necessary to load all notes at once when paging.
*/

57
apps/client/src/widgets/collections/table/editing.ts Normal file
View File

@ -0,0 +1,57 @@
import { 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";
export default function useTableEditing(api: RefObject<Tabulator>, parentNotePath: string) {
useLegacyImperativeHandlers({
addNewRowCommand({ customOpts, parentNotePath: customNotePath }: CommandListenerData<"addNewRow">) {
const notePath = customNotePath ?? parentNotePath;
if (notePath) {
const opts: CreateNoteOpts = {
activate: false,
...customOpts
}
note_create.createNote(notePath, opts).then(({ branch }) => {
if (branch) {
setTimeout(() => {
if (!api.current) return;
focusOnBranch(api.current, branch?.branchId);
}, 100);
}
})
}
}
});
}
function focusOnBranch(api: Tabulator, branchId: string) {
const row = findRowDataById(api.getRows(), branchId);
if (!row) return;
// Expand the parent tree if any.
if (api.options.dataTree) {
const parent = row.getTreeParent();
if (parent) {
parent.treeExpand();
}
}
row.getCell("title").edit();
}
function findRowDataById(rows: RowComponent[], branchId: string): RowComponent | null {
for (let row of rows) {
const item = row.getIndex() as string;
if (item === branchId) {
return row;
}
let found = findRowDataById(row.getTreeChildren(), branchId);
if (found) return found;
}
return null;
}

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

@ -12,6 +12,7 @@ import FNote from "../../../entities/fnote";
import { t } from "../../../services/i18n";
import Button from "../../react/Button";
import "./index.css";
import useTableEditing from "./editing";
interface TableConfig {
tableData?: {
@ -19,7 +20,7 @@ interface TableConfig {
};
}
export default function TableView({ note, viewConfig, saveConfig }: ViewModeProps<TableConfig>) {
export default function TableView({ note, noteIds, notePath, viewConfig, saveConfig }: ViewModeProps<TableConfig>) {
const [ maxDepth ] = useNoteLabelInt(note, "maxNestingDepth") ?? -1;
const [ columnDefs, setColumnDefs ] = useState<ColumnDefinition[]>();
const [ rowData, setRowData ] = useState<TableData[]>();
@ -43,10 +44,11 @@ export default function TableView({ note, viewConfig, saveConfig }: ViewModeProp
setMovableRows(movableRows);
setHasChildren(hasChildren);
});
}, [ note ]);
}, [ note, noteIds ]);
const contextMenuEvents = useContextMenu(note, parentComponent, tabulatorRef);
const persistenceProps = usePersistence(viewConfig, saveConfig);
useTableEditing(tabulatorRef, notePath);
const dataTreeProps = useMemo<Options>(() => {
if (!hasChildren) return {};
return {
@ -59,7 +61,6 @@ export default function TableView({ note, viewConfig, saveConfig }: ViewModeProp
dataTreeCollapseElement: `<button class="tree-collapse"><span class="bx bx-chevron-down"></span></button>`
}
}, [ hasChildren ]);
console.log("Render with viewconfig", viewConfig);
return (
<div className="table-view">

50
apps/client/src/widgets/view_widgets/table_view/row_editing.ts
View File

@ -42,56 +42,6 @@ export default class TableRowEditing extends Component {
});
}
addNewRowCommand({ customOpts, parentNotePath: customNotePath }: CommandListenerData<"addNewRow">) {
const parentNotePath = customNotePath ?? this.parentNotePath;
if (parentNotePath) {
const opts: CreateNoteOpts = {
activate: false,
...customOpts
}
note_create.createNote(parentNotePath, opts).then(({ branch }) => {
if (branch) {
setTimeout(() => {
this.focusOnBranch(branch?.branchId);
});
}
})
}
}
focusOnBranch(branchId: string) {
if (!this.api) {
return;
}
const row = findRowDataById(this.api.getRows(), branchId);
if (!row) {
return;
}
// Expand the parent tree if any.
if (this.api.options.dataTree) {
const parent = row.getTreeParent();
if (parent) {
parent.treeExpand();
}
}
row.getCell("title").edit();
}
}
function findRowDataById(rows: RowComponent[], branchId: string): RowComponent | null {
for (let row of rows) {
const item = row.getIndex() as string;
if (item === branchId) {
return row;
}
let found = findRowDataById(row.getTreeChildren(), branchId);
if (found) return found;
}
return null;
}