Merge pull request #365 from danielo515/fix/import-forms

Fix/import-forms

src/core/template/templateParser.ts

@@ -43,7 +43,6 @@ const open = S.fold([S.string("{{"), S.spaces]);
 const close = P.expected(S.fold([S.spaces, S.string("}}")]), 'closing variable tag: "}}"');
 const identifier = S.many1(C.alphanum);
 const transformation = pipe(
-    // dam prettier
     S.fold([S.spaces, S.string("|"), S.spaces]),
     P.apSecond(identifier),
     P.map((x) => {

src/store/SettngsStore.ts

@@ -1,31 +1,39 @@
-import { A, pipe } from '@std';
-import { FormDefinition, duplicateForm } from 'src/core/formDefinition';
-import { MigrationError } from 'src/core/formDefinitionSchema';
-import { ModalFormSettings, getDefaultSettings } from 'src/core/settings';
-import { writable, derived } from 'svelte/store';
+import { A, pipe } from "@std";
+import { FormDefinition, duplicateForm } from "src/core/formDefinition";
+import { MigrationError } from "src/core/formDefinitionSchema";
+import { ModalFormSettings, getDefaultSettings } from "src/core/settings";
+import { derived, writable } from "svelte/store";
 
 const settings = writable({ ...getDefaultSettings() });
-export const formsStore = derived(settings, ($settings) => pipe(
-    $settings.formDefinitions,
-    A.filter((form): form is FormDefinition => !(form instanceof MigrationError))));
-const { subscribe, update, set } = settings
+export const formsStore = derived(settings, ($settings) =>
+    pipe(
+        $settings.formDefinitions,
+        A.filter((form): form is FormDefinition => !(form instanceof MigrationError)),
+    ),
+);
+const { subscribe, update, set } = settings;
 
 export const invalidFormsStore = derived(settings, ($settings) => {
     return pipe(
         $settings.formDefinitions,
-        A.filter((form): form is MigrationError => form instanceof MigrationError));
-})
+        A.filter((form): form is MigrationError => form instanceof MigrationError),
+    );
+});
 
 export const settingsStore = {
     subscribe,
     set,
     updateForm(name: string, form: FormDefinition) {
+        let edited = false;
         update((s): ModalFormSettings => {
             const forms = s.formDefinitions.map((f) => {
-                if (f.name === name) return form;
+                if (f.name === name) {
+                    edited = true;
+                    return form;
+                }
                 return f;
             });
-            return { ...s, formDefinitions: forms };
+            return { ...s, formDefinitions: edited ? forms : [...s.formDefinitions, form] };
         });
     },
     addNewForm(form: FormDefinition) {
@@ -42,7 +50,7 @@ export const settingsStore = {
     },
     duplicateForm(formName: string) {
         update((s): ModalFormSettings => {
-            return { ...s, formDefinitions: duplicateForm(formName, s.formDefinitions) }
+            return { ...s, formDefinitions: duplicateForm(formName, s.formDefinitions) };
         });
-    }
-}
+    },
+};

src/views/EditFormView.ts

@@ -3,19 +3,19 @@ import { settingsStore } from "src/store/SettngsStore";
 import { log_notice } from "src/utils/Log";
 import type { EditableFormDefinition, FormDefinition } from "../core/formDefinition";
 import ModalFormPlugin from "../main";
-import FormEditor from './FormBuilder.svelte';
+import FormEditor from "./FormBuilder.svelte";
 
 export const EDIT_FORM_VIEW = "modal-form-edit-form-view";
 
 function parseState(maybeState: unknown): maybeState is EditableFormDefinition {
     if (maybeState === null) {
-        return false
+        return false;
     }
-    if (typeof maybeState !== 'object') {
-        return false
+    if (typeof maybeState !== "object") {
+        return false;
     }
-    if ('title' in maybeState && 'name' in maybeState && 'fields' in maybeState) {
-        return true
+    if ("title" in maybeState && "name" in maybeState && "fields" in maybeState) {
+        return true;
     }
     return false;
 }
@@ -26,12 +26,15 @@ function parseState(maybeState: unknown): maybeState is EditableFormDefinition {
  * Simple, right?
  */
 export class EditFormView extends ItemView {
-    formState: EditableFormDefinition = { title: '', name: '', version: '1', fields: [] };
+    formState: EditableFormDefinition = { title: "", name: "", version: "1", fields: [] };
     originalFormName?: string;
     formEditor!: FormEditor;
-    constructor(readonly leaf: WorkspaceLeaf, readonly plugin: ModalFormPlugin) {
+    constructor(
+        readonly leaf: WorkspaceLeaf,
+        readonly plugin: ModalFormPlugin,
+    ) {
         super(leaf);
-        this.icon = 'note-glyph'
+        this.icon = "note-glyph";
     }
 
     getViewType() {
@@ -43,55 +46,54 @@ export class EditFormView extends ItemView {
     }
 
     async onOpen() {
-        this.containerEl.empty()
+        this.containerEl.empty();
         this.formEditor = new FormEditor({
             target: this.containerEl,
             props: {
                 definition: this.formState,
                 app: this.app,
                 onChange: () => {
-                    console.log('Save form state', this.formState)
-                    this.app.workspace.requestSaveLayout()
+                    console.log("Save form state", this.formState);
+                    this.app.workspace.requestSaveLayout();
                 },
                 onSubmit: (formDefinition: FormDefinition) => {
-                    console.log('Submitting form', { formDefinition });
-                    if (this.originalFormName && this.originalFormName !== '') {
-                        settingsStore.updateForm(this.originalFormName, formDefinition)
+                    if (this.originalFormName && this.originalFormName !== "") {
+                        console.log("Updating form", { formDefinition });
+                        settingsStore.updateForm(this.originalFormName, formDefinition);
                     } else {
-                        settingsStore.addNewForm(formDefinition)
+                        console.log("Adding new form", { formDefinition });
+                        settingsStore.addNewForm(formDefinition);
                     }
-                    this.plugin.closeEditForm()
+                    this.plugin.closeEditForm();
                 },
                 onCancel: () => {
-                    this.plugin.closeEditForm()
+                    this.plugin.closeEditForm();
                 },
                 onPreview: async (formDefinition: FormDefinition) => {
-                    const result = await this.plugin.api.openForm(formDefinition)
-                    const result_str = JSON.stringify(result, null, 2)
-                    log_notice('Form result', result_str)
-                    console.log(result_str)
+                    const result = await this.plugin.api.openForm(formDefinition);
+                    const result_str = JSON.stringify(result, null, 2);
+                    log_notice("Form result", result_str);
+                    console.log(result_str);
                 },
-            }
+            },
         });
     }
 
     async onClose() {
-        console.log('onClose of edit form called')
+        console.log("onClose of edit form called");
         this.formEditor.$destroy();
     }
 
     async setState(state: unknown, result: ViewStateResult): Promise<void> {
-        console.log('setState of edit form called', state)
+        console.log("setState of edit form called", state);
         if (parseState(state)) {
             this.formState = state;
             this.originalFormName = state.name;
-            this.formEditor.$set({ definition: this.formState })
+            this.formEditor.$set({ definition: this.formState });
         }
         return super.setState(state, result);
     }
     getState() {
         return this.formState;
     }
 }
-
-

src/views/FormImport.ts

@@ -1,9 +1,9 @@
-import * as J from "fp-ts/Json";
 import { O, type Option, ensureError, pipe } from "@std";
 import * as E from "fp-ts/Either";
+import * as J from "fp-ts/Json";
+import { FormDefinition } from "src/core/formDefinition";
 import { InvalidData, MigrationError, migrateToLatest } from "src/core/formDefinitionSchema";
 import { Readable, writable } from "svelte/store";
-import { FormDefinition } from "src/core/formDefinition";
 
 type State = E.Either<string[], Option<FormDefinition>>;
 type UiState = {
@@ -44,7 +44,7 @@ function matchState<T>(state: State, matchers: Matchers<T>): T {
 
 function noop() {}
 
-export function makeFormInputModel({ createForm }: FormImportDeps): FormImportModel {
+export function makeFormImportModel({ createForm }: FormImportDeps): FormImportModel {
     const state = writable<State>(E.of(O.none));
     const setErrors = (errors: string[]) => state.set(E.left(errors));
     const resetState = () => state.set(E.of(O.none));

src/views/FormImportView.ts

@@ -1,6 +1,6 @@
 import { App, Modal } from "obsidian";
+import { FormImportDeps, makeFormImportModel } from "./FormImport";
 import FormImport from "./FormImport.svelte";
-import { FormImportDeps, makeFormInputModel } from "./FormImport";
 /**
  * This class is just the minimum glue code to bind our core logic
  * with the  svelte UI and obsidian API modal.
@@ -23,7 +23,7 @@ export class FormImportModal extends Modal {
         const { contentEl } = this;
         this._component = new FormImport({
             target: contentEl,
-            props: { model: makeFormInputModel(this.deps) },
+            props: { model: makeFormImportModel(this.deps) },
         });
     }
 }