chore: rudimentary form builder

src/EditFormView.ts

@@ -1,10 +1,10 @@
 import ModalFormPlugin from "main";
 import { ItemView, Setting, ViewStateResult, WorkspaceLeaf } from "obsidian";
-import { FormDefinition } from "./FormModal";
+import { FieldType, FormDefinition, AllFieldTypes } from "./FormModal";
 import { ModalFormError } from "./utils/Error";
 
 export const EDIT_FORM_VIEW = "modal-form-edit-form-view";
-const FieldTypeReadable = {
+const FieldTypeReadable: Record<AllFieldTypes, string> = {
 	"text": "Text",
 	"number": "Number",
 	"date": "Date",
@@ -14,7 +14,7 @@ const FieldTypeReadable = {
 	"note": "Note",
 	"slider": "Slider",
 	"select": "Select"
-};
+} as const;
 
 
 /**
@@ -40,26 +40,48 @@ export class EditFormView extends ItemView {
 	async onOpen() {
 		const container = this.containerEl.children[1];
 		container.empty();
-		container.createEl("h4", { text: "Example view" });
+		container.createEl("h4", { text: "Edit form" });
 		const controls = container.createDiv();
 		const fieldsRoot = container.createDiv();
 		new Setting(controls).addButton(element => {
 			element.setButtonText('Add field').onClick(async () => {
 				this.formState.fields.push({ name: '', description: '', input: { type: 'text' } })
+				await this.app.workspace.requestSaveLayout();
 				this.renderFields(fieldsRoot)
-				this.app.workspace.requestSaveLayout();
 			})
 		})
 		this.renderFields(fieldsRoot);
 	}
 
 	renderFields(root: HTMLElement) {
 		root.empty();
-		root.createEl("h4", { text: "Form title" });
+		root.createEl("h4", { text: "Fields" });
+		const rows = root.createDiv();
+		rows.setCssStyles({ display: 'flex', flexDirection: 'column', gap: '10px' });
 		this.formState.fields.forEach(field => {
-			new Setting(root).addDropdown(element => {
-				element.addOptions(FieldTypeReadable)
-			})
+			const row = rows.createDiv()
+			row.setCssStyles({ display: 'flex', flexDirection: 'row', gap: '8px' })
+			new Setting(row)
+				.addText(text => {
+					text.setPlaceholder('Field name').setValue(field.name).onChange(value => {
+						field.name = value;
+						this.app.workspace.requestSaveLayout();
+					})
+				})
+				.addText(element => {
+					element.setPlaceholder('Field description').setValue(field.description).onChange(value => {
+						field.description = value;
+						this.app.workspace.requestSaveLayout();
+					})
+				})
+				.addDropdown(element => {
+					element.addOptions(FieldTypeReadable)
+					element.setValue(field.input.type)
+					element.onChange((value) => {
+						field.input.type = value as AllFieldTypes;
+						this.app.workspace.requestSaveLayout();
+					})
+				})
 		})
 	}
 

src/FormModal.ts

@@ -3,7 +3,7 @@ import FormResult, { ModalFormData } from "./FormResult";
 import { exhaustiveGuard } from "./safety";
 import { FileSuggest } from "./suggestFile";
 import { get_tfiles_from_folder } from "./utils/files";
-type FieldType =
+export type FieldType =
 	| "text"
 	| "number"
 	| "date"
@@ -21,6 +21,8 @@ type inputType =
 		source: "fixed";
 		options: { value: string; label: string }[];
 	};
+
+export type AllFieldTypes = FieldType | "note" | "slider" | "select";
 /**
  * FormDefinition is a type that defines the structure of a form.
  * @param title - The title of the form which will appear as H1 heading in the form modal.