WIP: manage forms as svelte component

.prettierrc

@@ -0,0 +1,5 @@
+{
+    "plugins": [
+        "prettier-plugin-svelte"
+    ]
+}

package.json

@@ -26,6 +26,8 @@
         "esbuild-svelte": "^0.8.0",
         "jest": "^29.7.0",
         "obsidian": "^1.4.11",
+        "prettier": "^3.0.3",
+        "prettier-plugin-svelte": "^3.0.3",
         "svelte": "^4.2.0",
         "svelte-check": "^3.5.2",
         "svelte-preprocess": "^5.0.4",

src/std/index.ts

@@ -1,6 +1,6 @@
 import { pipe as p } from "fp-ts/function";
 import { partitionMap } from "fp-ts/Array";
-import { isLeft, isRight, tryCatchK, map, getOrElse } from "fp-ts/Either";
+import { isLeft, isRight, tryCatchK, map, getOrElse, right, left } from "fp-ts/Either";
 import { ValiError, parse as parseV } from "valibot";
 
 export const pipe = p
@@ -11,6 +11,8 @@ export const A = {
 export const E = {
     isLeft,
     isRight,
+    left,
+    right,
     tryCatchK,
     getOrElse,
     map

src/views/ManageForms.svelte

@@ -0,0 +1,135 @@
+<script lang="ts">
+    import { FormDefinition, MigrationError } from "src/core/formDefinition";
+
+    export let createNewForm: () => void;
+    export let deleteForm: (formName: string) => void;
+    export let duplicateForm: (form: FormDefinition) => void;
+    export let editForm: (formName: string) => void;
+
+    export let forms: FormDefinition[];
+    export let invalidForms: MigrationError[] = [];
+    function handleDeleteForm(formName: string) {
+        const confirmed = confirm(`Are you sure you want to delete ${formName}?`);
+        if (confirmed) { console.log(`Deleting ${formName}`); }
+    }
+    function handleEditForm(formName: string) {
+        console.log(`Editing ${formName}`);
+        editForm(formName);
+    }
+    function handleDuplicateForm(form: FormDefinition) {
+        console.log(`Duplicating ${form.name}`);
+        duplicateForm(form);
+    }
+    function handleCopyForm(form: FormDefinition) {
+        console.log(`Copying ${form.name}`);
+    }
+</script>
+
+<h3>Manage forms</h3>
+
+<button class="form-add-button" on:click={() => createNewForm()}>
+    Add new form
+</button>
+
+<div id="form-rows">
+    {#each forms as form}
+        <div class="form-row">
+            <h4>{form.name}</h4>
+            <div class="form-row-buttons">
+                <button
+                    class="form-row-button form-row-delete"
+                    on:click={() => handleDeleteForm(form.name)}
+                >
+                    <i class="fa fa-trash"></i>
+                    <span>Delete</span>
+                </button>
+                <button
+                    class="form-row-button form-row-edit"
+                    on:click={() => handleEditForm(form.name)}
+                >
+                    <i class="fa fa-edit"></i>
+                    <span>Edit</span>
+                </button>
+                <button
+                    class="form-row-button form-row-duplicate"
+                    on:click={() => handleDuplicateForm(form)}
+                >
+                    <i class="fa fa-copy"></i>
+                    <span>Duplicate</span>
+                </button>
+                <button
+                    class="form-row-button form-row-copy"
+                    on:click={() => handleCopyForm(form)}
+                >
+                    <i class="fa fa-clipboard"></i>
+                    <span>Copy</span>
+                </button>
+            </div>
+        </div>
+    {/each}
+</div>
+
+<style>
+    .form-row {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+    }
+
+    .form-row-buttons {
+        display: flex;
+        gap: 8px;
+    }
+
+    .form-row-button {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        padding: 4px 8px;
+        border-radius: 4px;
+        font-size: 14px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: background-color 0.2s ease-in-out;
+    }
+
+    .form-row-button:hover {
+        background-color: var(--background-modifier-hover);
+    }
+
+    .form-row-delete {
+        color: var(--text-danger);
+        background-color: var(--background-danger);
+    }
+
+    .form-row-delete:hover {
+        background-color: var(--background-danger-hover);
+    }
+
+    .form-row-edit {
+        color: var(--text-accent);
+        background-color: var(--background-accent);
+    }
+
+    .form-row-edit:hover {
+        background-color: var(--background-accent-hover);
+    }
+
+    .form-row-duplicate {
+        color: var(--text-primary);
+        background-color: var(--background-primary);
+    }
+
+    .form-row-duplicate:hover {
+        background-color: var(--background-primary-hover);
+    }
+
+    .form-row-copy {
+        color: var(--text-accent);
+        background-color: var(--background-accent);
+    }
+
+    .form-row-copy:hover {
+        background-color: var(--background-accent-hover);
+    }
+</style>

src/views/ManageFormsView.ts

@@ -1,6 +1,9 @@
-import { MigrationError } from "src/core/formDefinition";
+import { FormDefinition, MigrationError } from "src/core/formDefinition";
+import ManageForms from './ManageForms.svelte'
 import ModalFormPlugin from "../main";
+import * as A from 'fp-ts/Array'
 import { ItemView, Notice, Setting, WorkspaceLeaf } from "obsidian";
+import { E, pipe } from "@std";
 
 export const MANAGE_FORMS_VIEW = "modal-form-manage-forms-view";
 
@@ -9,6 +12,7 @@ export const MANAGE_FORMS_VIEW = "modal-form-manage-forms-view";
  * Manage existing forms and create new ones
  */
 export class ManageFormsView extends ItemView {
+    component!: ManageForms;
     constructor(readonly leaf: WorkspaceLeaf, readonly plugin: ModalFormPlugin) {
         super(leaf);
         this.icon = "documents";
@@ -26,9 +30,40 @@ export class ManageFormsView extends ItemView {
         // console.log('On open manage forms');
         const container = this.containerEl.children[1] || this.containerEl.createDiv();
         container.empty();
-        container.createEl("h3", { text: "Manage forms" });
-        this.renderControls(container.createDiv());
-        await this.renderForms(container.createDiv());
+
+        const settings = await this.plugin.getSettings();
+        const allForms = settings.formDefinitions;
+        const { left: invalidForms, right: forms } = pipe(
+            allForms,
+            A.partitionMap((form) => {
+                if (form instanceof MigrationError) {
+                    return E.left(form);
+                } else {
+                    return E.right(form);
+                }
+            }));
+        this.component = new ManageForms({
+            target: container,
+            props: {
+                forms,
+                invalidForms,
+                createNewForm: () => {
+                    this.plugin.createNewForm();
+                },
+                editForm: (formName: string) => {
+                    this.plugin.editForm(formName);
+                },
+                deleteForm: (formName: string) => {
+                    this.plugin.deleteForm(formName);
+                },
+                duplicateForm: (form: FormDefinition) => {
+                    this.plugin.duplicateForm(form);
+                }
+            }
+        })
+        // container.createEl("h3", { text: "Manage forms" });
+        // this.renderControls(container.createDiv());
+        // await this.renderForms(container.createDiv());
     }
 
     renderControls(root: HTMLElement) {
@@ -94,6 +129,7 @@ export class ManageFormsView extends ItemView {
     }
 
     async onClose() {
+        this.component.$destroy();
     }
 
 }