feat: show result preview

danielo515 · Sep 15, 2023 · 7425df1 · 7425df1
1 parent fac67ea
commit 7425df1
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 73 deletions.
diff --git a/src/utils/Log.ts b/src/utils/Log.ts
@@ -2,18 +2,25 @@ import { Notice } from "obsidian";
 import { ModalFormError } from "./Error";
 
 export function log_update(msg: string): void {
-	const notice = new Notice("", 15000);
-	// TODO: Find better way for this
-	// @ts-ignore
-	notice.noticeEl.innerHTML = `<b>Modal form update</b>:<br/>${msg}`;
+  const notice = new Notice("", 15000);
+  // TODO: Find better way for this
+  // @ts-ignore
+  notice.noticeEl.innerHTML = `<b>Modal form update</b>:<br/>${msg}`;
+}
+
+export function log_notice(title: string, msg: string): void {
+  const notice = new Notice("", 15000);
+  // TODO: Find better way for this
+  // @ts-ignore
+  notice.noticeEl.innerHTML = `<b>${title}</b>:<br/>${msg}`;
 }
 
 export function log_error(e: Error | ModalFormError): void {
-	const notice = new Notice("", 8000);
-	if (e instanceof ModalFormError && e.console_msg) {
-		notice.noticeEl.innerHTML = `<b>Modal form Error</b>:<br/>${e.message}<br/>Check console for more information`;
-		console.error(`Modal form Error:`, e.message, "\n", e.console_msg);
-	} else {
-		notice.noticeEl.innerHTML = `<b>Modal form Error</b>:<br/>${e.message}`;
-	}
+  const notice = new Notice("", 8000);
+  if (e instanceof ModalFormError && e.console_msg) {
+    notice.noticeEl.innerHTML = `<b>Modal form Error</b>:<br/>${e.message}<br/>Check console for more information`;
+    console.error(`Modal form Error:`, e.message, "\n", e.console_msg);
+  } else {
+    notice.noticeEl.innerHTML = `<b>Modal form Error</b>:<br/>${e.message}`;
+  }
 }
diff --git a/src/views/EditFormView.ts b/src/views/EditFormView.ts
@@ -2,20 +2,21 @@ import ModalFormPlugin from "main";
 import { ItemView, type ViewStateResult, WorkspaceLeaf } from "obsidian";
 import type { FormDefinition, EditableFormDefinition } from "../core/formDefinition";
 import FormEditor from './FormBuilder.svelte'
+import { log_notice } from "src/utils/Log";
 
 export const EDIT_FORM_VIEW = "modal-form-edit-form-view";
 
 function parseState(maybeState: unknown): maybeState is EditableFormDefinition {
-	if (maybeState === null) {
-		return false
-	}
-	if (typeof maybeState !== 'object') {
-		return false
-	}
-	if ('title' in maybeState && 'name' in maybeState && 'fields' in maybeState) {
-		return true
-	}
-	return false;
+  if (maybeState === null) {
+    return false
+  }
+  if (typeof maybeState !== 'object') {
+    return false
+  }
+  if ('title' in maybeState && 'name' in maybeState && 'fields' in maybeState) {
+    return true
+  }
+  return false;
 }
 
 /**
@@ -24,63 +25,64 @@ function parseState(maybeState: unknown): maybeState is EditableFormDefinition {
  * Simple, right?
  */
 export class EditFormView extends ItemView {
-	formState: EditableFormDefinition = { title: '', name: '', fields: [] };
-	formEditor!: FormEditor;
-	constructor(readonly leaf: WorkspaceLeaf, readonly plugin: ModalFormPlugin) {
-		super(leaf);
-		this.icon = 'note-glyph'
-	}
+  formState: EditableFormDefinition = { title: '', name: '', fields: [] };
+  formEditor!: FormEditor;
+  constructor(readonly leaf: WorkspaceLeaf, readonly plugin: ModalFormPlugin) {
+    super(leaf);
+    this.icon = 'note-glyph'
+  }
 
-	getViewType() {
-		return EDIT_FORM_VIEW;
-	}
+  getViewType() {
+    return EDIT_FORM_VIEW;
+  }
 
-	getDisplayText() {
-		return "Edit form";
-	}
+  getDisplayText() {
+    return "Edit form";
+  }
 
-	async onOpen() {
-		this.containerEl.empty()
-		this.formEditor = new FormEditor({
-			target: this.containerEl,
-			props: {
-				definition: this.formState,
-				app: this.app,
-				onChange: () => {
-					console.log(this.formState)
-					this.app.workspace.requestSaveLayout()
-				},
-				onSubmit: (formDefinition: FormDefinition) => {
-					console.log({ formDefinition });
-					this.plugin.saveForm(formDefinition);
-					this.plugin.closeEditForm()
-				},
-				onCancel: () => {
-					this.plugin.closeEditForm()
-				},
-				onPreview: (formDefinition: FormDefinition) => {
-					this.plugin.api.openForm(formDefinition)
-				},
-			}
-		});
-	}
+  async onOpen() {
+    this.containerEl.empty()
+    this.formEditor = new FormEditor({
+      target: this.containerEl,
+      props: {
+        definition: this.formState,
+        app: this.app,
+        onChange: () => {
+          console.log(this.formState)
+          this.app.workspace.requestSaveLayout()
+        },
+        onSubmit: (formDefinition: FormDefinition) => {
+          console.log({ formDefinition });
+          this.plugin.saveForm(formDefinition);
+          this.plugin.closeEditForm()
+        },
+        onCancel: () => {
+          this.plugin.closeEditForm()
+        },
+        onPreview: async (formDefinition: FormDefinition) => {
+          const result = await this.plugin.api.openForm(formDefinition)
+          log_notice('Form result', JSON.stringify(result, null, 2))
+        },
+      }
+    });
+  }
 
-	async onClose() {
-		console.log('onClose of edit form called')
-		this.formEditor.$destroy();
-	}
+  async onClose() {
+    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)
-		if (parseState(state)) {
-			this.formState = state;
-			this.formEditor.$set({ definition: this.formState })
-		}
-		return super.setState(state, result);
-	}
-	getState() {
-		return this.formState;
-	}
+  async setState(state: unknown, result: ViewStateResult): Promise<void> {
+    console.log('setState of edit form called', state)
+    if (parseState(state)) {
+      this.formState = state;
+      this.formEditor.$set({ definition: this.formState })
+    }
+    return super.setState(state, result);
+  }
+  getState() {
+    return this.formState;
+  }
 }