feat(views/table): set up relation editor

This commit is contained in:
Elian Doran 2025-07-04 14:50:07 +03:00
parent 8614d39ef4
commit a2e197facd
No known key found for this signature in database
2 changed files with 14 additions and 7 deletions

View File

@ -2,6 +2,7 @@ import FNote from "../../../entities/fnote.js";
import type { LabelType } from "../../../services/promoted_attribute_definition_parser.js";
import type { ColumnDefinition } from "tabulator-tables";
import link from "../../../services/link.js";
import RelationEditor from "./relation_editor.js";
export type TableData = {
iconClass: string;
@ -12,13 +13,15 @@ export type TableData = {
position: number;
};
type ColumnType = LabelType | "relation";
export interface PromotedAttributeInformation {
name: string;
title?: string;
type?: LabelType | "relation";
type?: ColumnType;
}
const labelTypeMappings: Record<LabelType, Partial<ColumnDefinition>> = {
const labelTypeMappings: Record<ColumnType, Partial<ColumnDefinition>> = {
text: {
editor: "input"
},
@ -41,6 +44,9 @@ const labelTypeMappings: Record<LabelType, Partial<ColumnDefinition>> = {
url: {
formatter: "link",
editor: "input"
},
relation: {
editor: RelationEditor
}
};

View File

@ -1,4 +1,5 @@
import { CellComponent } from "tabulator-tables";
import note_autocomplete from "../../../services/note_autocomplete";
export default function RelationEditor(cell: CellComponent, onRendered, success, cancel, editorParams){
//cell - the cell component for the editable cell
@ -8,9 +9,9 @@ export default function RelationEditor(cell: CellComponent, onRendered, success,
//editorParams - params object passed into the editorParams column definition property
//create and style editor
var editor = document.createElement("input");
editor.setAttribute("type", "date");
const editor = document.createElement("input");
const $editor = $(editor);
editor.classList.add("form-control");
//create and style input
editor.style.padding = "3px";
@ -22,13 +23,13 @@ export default function RelationEditor(cell: CellComponent, onRendered, success,
//set focus on the select box when the editor is selected
onRendered(function(){
note_autocomplete.initNoteAutocomplete($editor);
editor.focus();
editor.style.css = "100%";
});
//when the value has been set, trigger the cell to update
function successFunc(){
success("Hi");
success($editor.getSelectedNoteId());
}
editor.addEventListener("change", successFunc);