From 4456786f4b68e8ff908a90b2e65d46972b83b127 Mon Sep 17 00:00:00 2001 From: Kacper Kula Date: Fri, 14 Mar 2025 17:27:27 +0000 Subject: [PATCH] feat: added ability to change default renderer and specify default pagination size --- CHANGELOG.md | 4 ++ package.json | 2 +- src/codeblockHandler/CodeblockProcessor.ts | 2 +- src/main.ts | 2 +- src/renderer/GridRenderer.ts | 9 +++-- src/renderer/rendererRegistry.ts | 2 - src/settings/SQLSealSettingsTab.ts | 46 +++++++++++++++++++++- src/view/CSVView.ts | 2 +- 8 files changed, 59 insertions(+), 10 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6fa6123..52cf6b3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ +# 0.28.2 (2025-03-14) +- Added ability to define default view (Grid, HTML or Markdown) +- Added ability to configure default page size for the GRID view + # 0.28.1 (2025-03-14) - Adding syntax highlighting for javascript (to be used with GRAPH view) diff --git a/package.json b/package.json index 819209b..371c3c4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "sqlseal", - "version": "0.28.1", + "version": "0.28.2", "description": "A plugin for Obsidian that allows you to run SQL queries on your notes.", "main": "main.js", "scripts": { diff --git a/src/codeblockHandler/CodeblockProcessor.ts b/src/codeblockHandler/CodeblockProcessor.ts index 9de0544..5bf3132 100644 --- a/src/codeblockHandler/CodeblockProcessor.ts +++ b/src/codeblockHandler/CodeblockProcessor.ts @@ -42,7 +42,7 @@ export class CodeblockProcessor extends MarkdownRenderChild { explain: false }, query: '', - renderer: { options: '', type: 'GRID' }, + renderer: { options: '', type: this.plugin.settings.defaultView.toUpperCase() }, tables: [] } diff --git a/src/main.ts b/src/main.ts index 86e3379..b5dc64f 100644 --- a/src/main.ts +++ b/src/main.ts @@ -53,7 +53,7 @@ export default class SqlSealPlugin extends Plugin { // REGISTERING VIEWS this.rendererRegistry.register('sql-seal-internal-table', new TableRenderer(this.app, this.cellParserRegistar)) - this.rendererRegistry.register('sql-seal-internal-grid', new GridRenderer(this.app, this.cellParserRegistar)) + this.rendererRegistry.register('sql-seal-internal-grid', new GridRenderer(this.app, this, this.cellParserRegistar)) this.rendererRegistry.register('sql-seal-internal-markdown', new MarkdownRenderer(this.app)) this.rendererRegistry.register('sql-seal-internal-list', new ListRenderer(this.app, this.cellParserRegistar)) this.rendererRegistry.register('sql-seal-internal-template', new TemplateRenderer(this.app, this.cellParserRegistar)) diff --git a/src/renderer/GridRenderer.ts b/src/renderer/GridRenderer.ts index a3000f7..a5c4f47 100644 --- a/src/renderer/GridRenderer.ts +++ b/src/renderer/GridRenderer.ts @@ -5,6 +5,7 @@ import { RendererConfig } from "./rendererRegistry"; import { parse } from 'json5' import { CellParser } from "../cellParser"; import { ViewDefinition } from "../grammar/parser"; +import SqlSealPlugin from "../main"; const getCurrentTheme = () => { return document.body.classList.contains('theme-dark') ? 'dark' : 'light'; @@ -28,6 +29,7 @@ class GridRendererCommunicator { constructor( private el: HTMLElement, private config: Partial, + private plugin: SqlSealPlugin | null, private app: App, private cellParser: CellParser ) { @@ -84,7 +86,8 @@ class GridRendererCommunicator { columnDefs: [], domLayout: 'autoHeight', enableCellTextSelection: true, - ensureDomOrder: true + paginationPageSize: this.plugin? this.plugin.settings.gridItemsPerPage : undefined, + // ensureDomOrder: true }, this.config) this.gridApi = createGrid( grid, @@ -115,7 +118,7 @@ class GridRendererCommunicator { } export class GridRenderer implements RendererConfig { - constructor(private app: App, private readonly cellParser: CellParser) { } + constructor(private app: App, private readonly plugin: SqlSealPlugin | null, private readonly cellParser: CellParser) { } get viewDefinition(): ViewDefinition { return { name: this.rendererKey, @@ -138,7 +141,7 @@ export class GridRenderer implements RendererConfig { render(config: Partial, el: HTMLElement) { - const communicator = new GridRendererCommunicator(el, config, this.app, this.cellParser) + const communicator = new GridRendererCommunicator(el, config, this.plugin, this.app, this.cellParser) return { render: (data: any) => { // FIXME: we need to update that. diff --git a/src/renderer/rendererRegistry.ts b/src/renderer/rendererRegistry.ts index b2294b9..2512e70 100644 --- a/src/renderer/rendererRegistry.ts +++ b/src/renderer/rendererRegistry.ts @@ -27,8 +27,6 @@ export class RendererRegistry { _extraFlags: Array = [] constructor() { } - private default = 'grid' - register(uniqueName: string, config: RendererConfig) { if (this.renderers.has(uniqueName)) { throw new Error(`Renderer already registered for ${uniqueName}`) diff --git a/src/settings/SQLSealSettingsTab.ts b/src/settings/SQLSealSettingsTab.ts index aa33fa0..4e6a3dd 100644 --- a/src/settings/SQLSealSettingsTab.ts +++ b/src/settings/SQLSealSettingsTab.ts @@ -6,6 +6,8 @@ export interface SQLSealSettings { enableJSONViewer: boolean; enableDynamicUpdates: boolean; enableSyntaxHighlighting: boolean; + defaultView: 'grid' | 'markdown' | 'html'; + gridItemsPerPage: number } export const DEFAULT_SETTINGS: SQLSealSettings = { @@ -13,7 +15,9 @@ export const DEFAULT_SETTINGS: SQLSealSettings = { enableEditing: true, enableJSONViewer: true, enableDynamicUpdates: true, - enableSyntaxHighlighting: true + enableSyntaxHighlighting: true, + defaultView: 'grid', + gridItemsPerPage: 20 }; @@ -107,6 +111,46 @@ export class SQLSealSettingsTab extends PluginSettingTab { this.callChanges() })); + + containerEl.createEl('h3', { text: 'Views' }); + new Setting(containerEl) + .setName('Default View') + .setDesc('This view will be used by default when you don\'t provide any view definition in your query') + .addDropdown(dropdown => dropdown + .addOption('grid', 'Grid') + .addOption('html', 'HTML Table') + .addOption('markdown', 'Markdown Table') + .setValue(this.settings.defaultView) + .onChange(async (value) => { + console.log(value) + this.settings.defaultView = value as 'grid' | 'html' | 'markdown'; + if (!value) { + this.settings.defaultView = DEFAULT_SETTINGS.defaultView + } + await this.plugin.saveData(this.settings); + this.display(); + this.callChanges() + })); + containerEl.createEl('h4', { text: 'Grid View' }); + new Setting(containerEl) + .setName('Items per page ') + .setDesc('How many items should display for each page of the Grid view') + .addDropdown(dropdown => dropdown + .addOption('20', '20') + .addOption('50', '50') + .addOption('100', '100') + .setValue(this.settings.gridItemsPerPage + '') + .onChange(async (value) => { + this.settings.gridItemsPerPage = parseInt(value, 10); + if (!value) { + this.settings.gridItemsPerPage = DEFAULT_SETTINGS.gridItemsPerPage + } + await this.plugin.saveData(this.settings); + this.display(); + this.callChanges() + })); + + } private callChanges() { diff --git a/src/view/CSVView.ts b/src/view/CSVView.ts index e70e76e..5256cf3 100644 --- a/src/view/CSVView.ts +++ b/src/view/CSVView.ts @@ -201,7 +201,7 @@ export class CSVView extends TextFileView { }) - const grid = new GridRenderer(this.app, this.cellParser) + const grid = new GridRenderer(this.app, null, this.cellParser) const csvView = this; const api = grid.render({ defaultColDef: {