From cac23bb10aeb74b31b060f261948226cff854d63 Mon Sep 17 00:00:00 2001
From: Danielo Rodriguez <rdanielo@gmail.com>
Date: Thu, 9 May 2024 23:57:22 +0200
Subject: [PATCH] feat(input): dataview input can be fully async

---
 src/FormModal.ts                              | 10 +-
 src/views/components/MultiSelect.svelte       | 94 ++++++++++---------
 src/views/components/MultiSelectModel.ts      |  8 +-
 .../components/inputBuilderDataview.svelte    | 12 ++-
 4 files changed, 67 insertions(+), 57 deletions(-)

diff --git a/src/FormModal.ts b/src/FormModal.ts
index de8a34f0..ef6c3b57 100644
--- a/src/FormModal.ts
+++ b/src/FormModal.ts
@@ -191,10 +191,12 @@ export class FormModal extends Modal {
                                 values: fieldStore.value as Writable<string[]>,
                                 setting: fieldBase,
                                 errors: fieldStore.errors,
-                                model: MultiSelectTags(
-                                    fieldInput,
-                                    this.app,
-                                    fieldStore.value as Writable<string[]>,
+                                model: Promise.resolve(
+                                    MultiSelectTags(
+                                        fieldInput,
+                                        this.app,
+                                        fieldStore.value as Writable<string[]>,
+                                    ),
                                 ),
                             },
                         }),
diff --git a/src/views/components/MultiSelect.svelte b/src/views/components/MultiSelect.svelte
index a5a12ac5..d66ab691 100644
--- a/src/views/components/MultiSelect.svelte
+++ b/src/views/components/MultiSelect.svelte
@@ -1,11 +1,9 @@
 <script lang="ts">
-    import type { App, Setting } from "obsidian";
-    import { StringSuggest } from "../../suggesters/StringSuggest";
-    import { A, pipe } from "@std";
+    import type { Setting } from "obsidian";
     import { Readable, Writable } from "svelte/store";
     import { MultiSelectModel } from "./MultiSelectModel";
 
-    export let model: MultiSelectModel;
+    export let model: Promise<MultiSelectModel>;
     export let errors: Readable<string[]>;
     export let values: Writable<string[]>;
     // We take the setting to make it consistent with the other input components
@@ -14,52 +12,56 @@
     setting.settingEl.setCssStyles({
         alignItems: "baseline",
     });
-
-    const { createInput, removeValue } = model;
 </script>
 
 <div class="multi-select-root">
-    <input
-        use:createInput
-        type="text"
-        class="form-control"
-        placeholder="Select"
-        class:invalid={$errors.length > 0}
-    />
-    {#each $errors as error}
-        <span class="invalid">{error}</span>
-    {/each}
-    <div class="badges">
-        {#each $values as value}
-            <div class="badge">
-                <span>{value}</span>
-                <button on:click={() => removeValue(value)}>
-                    <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="24"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        class="svg-icon lucide-x"
-                        ><line x1="18" y1="6" x2="6" y2="18" /><line
-                            x1="6"
-                            y1="6"
-                            x2="18"
-                            y2="18"
-                        /></svg
-                    ></button
-                >
-            </div>
-        {:else}
-            <div class="badge hidden">
-                <span>Nothing selected</span>
-            </div>
+    {#await model then model}
+        {@const { createInput, removeValue } = model}
+        <input
+            use:createInput
+            type="text"
+            class="form-control"
+            placeholder="Select"
+            class:invalid={$errors.length > 0}
+        />
+        {#each $errors as error}
+            <span class="invalid">{error}</span>
         {/each}
-    </div>
+        <div class="badges">
+            {#each $values as value}
+                <div class="badge">
+                    <span>{value}</span>
+                    <button on:click={() => removeValue(value)}>
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="24"
+                            height="24"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            class="svg-icon lucide-x"
+                            ><line x1="18" y1="6" x2="6" y2="18" /><line
+                                x1="6"
+                                y1="6"
+                                x2="18"
+                                y2="18"
+                            /></svg
+                        ></button
+                    >
+                </div>
+            {:else}
+                <div class="badge hidden">
+                    <span>Nothing selected</span>
+                </div>
+            {/each}
+        </div>
+    {:catch error}
+        Failure obtaining the options to display
+        <span>{error.message}</span>
+    {/await}
 </div>
 
 <style>
diff --git a/src/views/components/MultiSelectModel.ts b/src/views/components/MultiSelectModel.ts
index adf89ab9..bdb72b38 100644
--- a/src/views/components/MultiSelectModel.ts
+++ b/src/views/components/MultiSelectModel.ts
@@ -1,7 +1,7 @@
 import { A, pipe } from "@std";
 import { absurd } from "fp-ts/function";
 import { App } from "obsidian";
-import { multiselect, inputTag } from "src/core/InputDefinitionSchema";
+import { inputTag, multiselect } from "src/core/InputDefinitionSchema";
 import { executeSandboxedDvQuery, sandboxedDvQuery } from "src/suggesters/SafeDataviewQuery";
 import { StringSuggest } from "src/suggesters/StringSuggest";
 import { FileSuggest } from "src/suggesters/suggestFile";
@@ -12,11 +12,11 @@ export interface MultiSelectModel {
     removeValue(value: string): void;
 }
 
-export function MultiSelectModel(
+export async function MultiSelectModel(
     fieldInput: multiselect,
     app: App,
     values: Writable<string[]>,
-): MultiSelectModel {
+): Promise<MultiSelectModel> {
     const source = fieldInput.source;
     const removeValue = (value: string) =>
         values.update((xs) =>
@@ -31,7 +31,7 @@ export function MultiSelectModel(
             const remainingOptions = new Set(
                 source === "fixed"
                     ? fieldInput.multi_select_options
-                    : executeSandboxedDvQuery(sandboxedDvQuery(fieldInput.query), app),
+                    : await executeSandboxedDvQuery(sandboxedDvQuery(fieldInput.query), app)(),
             );
             return {
                 createInput(element: HTMLInputElement) {
diff --git a/src/views/components/inputBuilderDataview.svelte b/src/views/components/inputBuilderDataview.svelte
index 84940e7e..376af37a 100644
--- a/src/views/components/inputBuilderDataview.svelte
+++ b/src/views/components/inputBuilderDataview.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-    import { executeSandboxedDvQuery, sandboxedDvQuery } from "src/suggesters/SafeDataviewQuery";
-    import FormRow from "./FormRow.svelte";
     import { pipe } from "@std";
     import { App } from "obsidian";
+    import { executeSandboxedDvQuery, sandboxedDvQuery } from "src/suggesters/SafeDataviewQuery";
     import Code from "./Code.svelte";
+    import FormRow from "./FormRow.svelte";
 
     export let index: number;
     export let value: string = "";
@@ -46,7 +46,13 @@
     {#if error}
         <div class="modal-form-error-message">{error}</div>
     {/if}
-    <Code allowWrap>{preview}</Code>
+    {#await preview()}
+        --
+    {:then previewResult}
+        <Code allowWrap>{previewResult}</Code>
+    {:catch error}
+        <div class="modal-form-error-message">{error}</div>
+    {/await}
 </FormRow>
 
 <style>