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

View File

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