gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-20 15:19:01 +02:00
Code Issues Actions 19 Packages Projects Releases Wiki Activity

refactor(views/table): move col editing to own component

Browse Source
This commit is contained in:
Elian Doran 2025-07-15 14:53:18 +03:00
parent df2cede075
commit 5a7a0d32d1
No known key found for this signature in database
2 changed files with 89 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
apps/client/src/widgets/view_widgets/table_view/col_editing.ts Normal file
View File

@ -0,0 +1,80 @@
import { Tabulator } from "tabulator-tables";
import AttributeDetailWidget from "../../attribute_widgets/attribute_detail";
import { Attribute } from "../../../services/attribute_parser";
import Component from "../../../components/component";
import { CommandListenerData, EventData } from "../../../components/app_context";
import attributes from "../../../services/attributes";
import FNote from "../../../entities/fnote";
export default class TableColumnEditing extends Component {
private attributeDetailWidget: AttributeDetailWidget;
private newAttributePosition?: number;
private api: Tabulator;
private newAttribute?: Attribute;
private parentNote: FNote;
constructor($parent: JQuery<HTMLElement>, parentNote: FNote, api: Tabulator) {
super();
const parentComponent = glob.getComponentByEl($parent[0]);
this.attributeDetailWidget = new AttributeDetailWidget()
.contentSized()
.setParent(parentComponent);
$parent.append(this.attributeDetailWidget.render());
this.api = api;
this.parentNote = parentNote;
}
addNewTableColumnEvent({ referenceColumn, direction }: EventData<"addNewTableColumn">) {
const attr: Attribute = {
type: "label",
name: "label:myLabel",
value: "promoted,single,text"
};
if (referenceColumn && this.api) {
this.newAttributePosition = this.api.getColumns().indexOf(referenceColumn);
if (direction === "after") {
this.newAttributePosition++;
}
} else {
this.newAttributePosition = undefined;
}
this.attributeDetailWidget!.showAttributeDetail({
attribute: attr,
allAttributes: [ attr ],
isOwned: true,
x: 0,
y: 75,
focus: "name"
});
}
async reloadAttributesEvent() {
console.log("Reload attributes");
}
async updateAttributeListEvent({ attributes }: CommandListenerData<"updateAttributeList">) {
this.newAttribute = attributes[0];
}
async saveAttributesEvent() {
if (!this.newAttribute) {
return;
}
const { name, value } = this.newAttribute;
attributes.addLabel(this.parentNote.noteId, name, value, true);
}
getNewAttributePosition() {
return this.newAttributePosition;
}
resetNewAttributePosition() {
this.newAttributePosition = 0;
}
}

67
apps/client/src/widgets/view_widgets/table_view/index.ts
View File

@ -4,17 +4,16 @@ import attributes, { setAttribute, setLabel } from "../../../services/attributes
import server from "../../../services/server.js";
import SpacedUpdate from "../../../services/spaced_update.js";
import type { CommandListenerData, EventData } from "../../../components/app_context.js";
import type { Attribute } from "../../../services/attribute_parser.js";
import note_create, { CreateNoteOpts } from "../../../services/note_create.js";
import {Tabulator, SortModule, FormatModule, InteractionModule, EditModule, ResizeColumnsModule, FrozenColumnsModule, PersistenceModule, MoveColumnsModule, MoveRowsModule, ColumnDefinition, DataTreeModule, Options, RowComponent, ColumnComponent} from 'tabulator-tables';
import "tabulator-tables/dist/css/tabulator.css";
import "../../../../src/stylesheets/table.css";
import { canReorderRows, configureReorderingRows } from "./dragging.js";
import buildFooter from "./footer.js";
import getAttributeDefinitionInformation, { buildRowDefinitions, TableData } from "./rows.js";
import getAttributeDefinitionInformation, { buildRowDefinitions } from "./rows.js";
import { AttributeDefinitionInformation, buildColumnDefinitions } from "./columns.js";
import { setupContextMenu } from "./context_menu.js";
import AttributeDetailWidget from "../../attribute_widgets/attribute_detail.js";
import TableColumnEditing from "./col_editing.js";
const TPL = /*html*/`
<div class="table-view">
@ -104,10 +103,8 @@ export default class TableView extends ViewMode<StateInfo> {
private $container: JQuery<HTMLElement>;
private spacedUpdate: SpacedUpdate;
private api?: Tabulator;
private newAttribute?: Attribute;
private newAttributePosition?: number;
private persistentData: StateInfo["tableData"];
private attributeDetailWidget: AttributeDetailWidget;
private colEditing?: TableColumnEditing;
constructor(args: ViewModeArgs) {
super(args, "table");
@ -117,11 +114,6 @@ export default class TableView extends ViewMode<StateInfo> {
this.spacedUpdate = new SpacedUpdate(() => this.onSave(), 5_000);
this.persistentData = {};
args.$parent.append(this.$root);
this.attributeDetailWidget = new AttributeDetailWidget()
.contentSized()
.setParent(glob.getComponentByEl(args.$parent[0]));
args.$parent.append(this.attributeDetailWidget.render());
}
async renderList() {
@ -175,6 +167,10 @@ export default class TableView extends ViewMode<StateInfo> {
}
this.api = new Tabulator(el, opts);
this.colEditing = new TableColumnEditing(this.args.$parent, this.args.parentNote, this.api);
this.child(this.colEditing);
if (movableRows) {
configureReorderingRows(this.api);
}
@ -216,51 +212,6 @@ export default class TableView extends ViewMode<StateInfo> {
});
}
async reloadAttributesCommand() {
console.log("Reload attributes");
}
async updateAttributeListCommand({ attributes }: CommandListenerData<"updateAttributeList">) {
this.newAttribute = attributes[0];
}
async saveAttributesCommand() {
if (!this.newAttribute) {
return;
}
const { name, value } = this.newAttribute;
attributes.addLabel(this.parentNote.noteId, name, value, true);
console.log("Save attributes", this.newAttribute);
}
addNewTableColumnEvent({ referenceColumn, direction }: EventData<"addNewTableColumn">) {
const attr: Attribute = {
type: "label",
name: "label:myLabel",
value: "promoted,single,text"
};
if (referenceColumn && this.api) {
this.newAttributePosition = this.api.getColumns().indexOf(referenceColumn);
if (direction === "after") {
this.newAttributePosition++;
}
} else {
this.newAttributePosition = undefined;
}
this.attributeDetailWidget!.showAttributeDetail({
attribute: attr,
allAttributes: [ attr ],
isOwned: true,
x: 0,
y: 75,
focus: "name"
});
}
addNewRowCommand({ customOpts, parentNotePath: customNotePath }: CommandListenerData<"addNewRow">) {
const parentNotePath = customNotePath ?? this.args.parentNotePath;
if (parentNotePath) {
@ -312,9 +263,9 @@ export default class TableView extends ViewMode<StateInfo> {
}
const info = getAttributeDefinitionInformation(this.parentNote);
const columnDefs = buildColumnDefinitions(info, !!this.api.options.movableRows, this.persistentData?.columns, this.newAttributePosition);
const columnDefs = buildColumnDefinitions(info, !!this.api.options.movableRows, this.persistentData?.columns, this.colEditing?.getNewAttributePosition());
this.api.setColumns(columnDefs);
this.newAttributePosition = undefined;
this.colEditing?.resetNewAttributePosition();
}
async #manageRowsUpdate() {