From e376cd0cab476413e321cd4ad620948ec0bcd780 Mon Sep 17 00:00:00 2001 From: Danielo Rodriguez Date: Thu, 30 May 2024 11:06:40 +0200 Subject: [PATCH] feat: open TemplateBuilder in a modal --- src/API.ts | 31 ++++++++++++----- src/main.ts | 38 ++++++++++++--------- src/views/TemplateBuilderView.ts | 29 ++++++++++++++++ src/views/components/TemplateBuilder.svelte | 8 ++--- styles.css | 7 ++++ 5 files changed, 84 insertions(+), 29 deletions(-) create mode 100644 src/views/TemplateBuilderView.ts diff --git a/src/API.ts b/src/API.ts index f7991539..b10b9eee 100644 --- a/src/API.ts +++ b/src/API.ts @@ -1,16 +1,17 @@ import { App, parseFrontMatterAliases } from "obsidian"; +import * as std from "@std"; +import { E, flow } from "@std"; +import { FormModal } from "./FormModal"; +import FormResult from "./core/FormResult"; import { type FormDefinition, type FormOptions } from "./core/formDefinition"; import { MigrationError } from "./core/formDefinitionSchema"; -import FormResult from "./core/FormResult"; import { exampleModalDefinition } from "./exampleModalDefinition"; import ModalFormPlugin from "./main"; -import { ModalFormError } from "./utils/ModalFormError"; -import { FormModal } from "./FormModal"; import { log_error, log_notice } from "./utils/Log"; -import * as std from "@std"; +import { ModalFormError } from "./utils/ModalFormError"; import { enrich_tfile, resolve_tfile } from "./utils/files"; -import { E, flow } from "@std"; +import { makeModel } from "./views/components/TemplateBuilder"; type pickOption = { pick: string[] }; type omitOption = { omit: string[] }; @@ -105,12 +106,16 @@ export class API { /** * Opens a named form, limiting/filtering the fields included * @param {string} name - The name of the form to open - * @param {limitOptions} limitOpts - The options to apply when filtering fields + * @param {limitOptions} limitOpts - The options to apply when filtering fields * @param {FormOptions} formOpts - Form options to use when opening the form once filtered * @returns {Promise} - A promise that resolves with the form result * @throws {ModalFormError} - Throws an error if the form definition is not found */ - public limitedForm(name: string, limitOpts: limitOptions, formOpts?: FormOptions): Promise { + public limitedForm( + name: string, + limitOpts: limitOptions, + formOpts?: FormOptions, + ): Promise { const formDefinition = this.getFormByName(name); let newFormDefinition: FormDefinition; if (formDefinition) { @@ -123,7 +128,9 @@ export class API { } else if (isPickOption(limitOpts)) { newFormDefinition = { ...formDefinition, - fields: formDefinition.fields.filter((field) => limitOpts.pick.includes(field.name)), + fields: formDefinition.fields.filter((field) => + limitOpts.pick.includes(field.name), + ), }; } else { throw new ModalFormError( @@ -155,4 +162,12 @@ export class API { return this.openModalForm(formReference, options); } } + + public openInTemplateBuilder(name: string) { + const form = this.getFormByName(name); + if (form) { + const model = makeModel(form); + this.plugin.openTemplateBuilder(model); + } + } } diff --git a/src/main.ts b/src/main.ts index 111c8196..2de158ee 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,32 +1,34 @@ +import { A, E, O, pipe } from "@std"; import { Platform, Plugin, WorkspaceLeaf } from "obsidian"; +import { API } from "src/API"; +import { ModalFormSettingTab } from "src/ModalFormSettingTab"; import FormResult from "src/core/FormResult"; +import { FormWithTemplate, type FormDefinition } from "src/core/formDefinition"; +import { + getDefaultSettings, + parseSettings, + type ModalFormSettings, + type OpenPosition, +} from "src/core/settings"; import { exampleModalDefinition } from "src/exampleModalDefinition"; -import { ModalFormSettingTab } from "src/ModalFormSettingTab"; -import { API } from "src/API"; +import { ModalFormError } from "src/utils/ModalFormError"; import { EDIT_FORM_VIEW, EditFormView } from "src/views/EditFormView"; import { MANAGE_FORMS_VIEW, ManageFormsView } from "src/views/ManageFormsView"; -import { ModalFormError } from "src/utils/ModalFormError"; -import { FormWithTemplate, type FormDefinition } from "src/core/formDefinition"; import { + InvalidData, + MigrationError, formNeedsMigration, migrateToLatest, - MigrationError, - InvalidData, } from "./core/formDefinitionSchema"; -import { - parseSettings, - type ModalFormSettings, - type OpenPosition, - getDefaultSettings, -} from "src/core/settings"; -import { log_error, log_notice } from "./utils/Log"; -import { settingsStore } from "./store/store"; -import { O, pipe, E, A } from "@std"; import { executeTemplate } from "./core/template/templateParser"; +import { settingsStore } from "./store/store"; +import { FormPickerModal } from "./suggesters/FormPickerModal"; import { NewNoteModal } from "./suggesters/NewNoteModal"; +import { log_error, log_notice } from "./utils/Log"; import { file_exists } from "./utils/files"; -import { FormPickerModal } from "./suggesters/FormPickerModal"; import { FormImportModal } from "./views/FormImportView"; +import { TemplateBuilderModal } from "./views/TemplateBuilderView"; +import { TemplateBuilderModel } from "./views/components/TemplateBuilder"; type ViewType = typeof EDIT_FORM_VIEW | typeof MANAGE_FORMS_VIEW; @@ -104,6 +106,10 @@ export default class ModalFormPlugin extends Plugin { importModal.open(); } + openTemplateBuilder(model: TemplateBuilderModel) { + new TemplateBuilderModal(this.app, model).open(); + } + closeEditForm() { this.app.workspace.detachLeavesOfType(EDIT_FORM_VIEW); } diff --git a/src/views/TemplateBuilderView.ts b/src/views/TemplateBuilderView.ts new file mode 100644 index 00000000..dbbaffbe --- /dev/null +++ b/src/views/TemplateBuilderView.ts @@ -0,0 +1,29 @@ +import { App, Modal } from "obsidian"; +import { TemplateBuilderModel } from "./components/TemplateBuilder"; +import TemplateBuilder from "./components/TemplateBuilder.svelte"; +/** + * This class is just the minimum glue code to bind our core logic + * with the svelte UI and obsidian API modal. + */ +export class TemplateBuilderModal extends Modal { + _component!: TemplateBuilder; + + constructor( + app: App, + private deps: TemplateBuilderModel, + ) { + super(app); + } + + onClose() { + this._component.$destroy(); + } + + onOpen() { + const { contentEl } = this; + this._component = new TemplateBuilder({ + target: contentEl, + props: { model: this.deps }, + }); + } +} diff --git a/src/views/components/TemplateBuilder.svelte b/src/views/components/TemplateBuilder.svelte index 16e053e9..92731551 100644 --- a/src/views/components/TemplateBuilder.svelte +++ b/src/views/components/TemplateBuilder.svelte @@ -1,14 +1,12 @@ -
+

Fields to include in frontmatter

{#each $fields as field} diff --git a/styles.css b/styles.css index ab2ca737..f827a9d3 100644 --- a/styles.css +++ b/styles.css @@ -96,3 +96,10 @@ If your plugin does not need CSS, delete this file. padding: 4px 0; align-items: center; } + +.flex { + display: flex; +} +.gap-2 { + gap: 2rem; +}