From 18669e3122256770abfce52688af78292ccecea4 Mon Sep 17 00:00:00 2001
From: Danielo Rodriguez <rdanielo@gmail.com>
Date: Wed, 13 Sep 2023 18:37:55 +0200
Subject: [PATCH] chore: complete the dataview feature

---
 README.md                                     |  2 +-
 src/core/formDefinition.ts                    | 16 ++++++++--
 src/views/EditFormView.ts                     | 11 -------
 src/views/FormBuilder.svelte                  |  8 ++++-
 .../components/inputBuilderDataview.svelte    | 32 +++++++++++++++++++
 styles.css                                    |  8 +++++
 6 files changed, 62 insertions(+), 15 deletions(-)
 create mode 100644 src/views/components/inputBuilderDataview.svelte

diff --git a/README.md b/README.md
index 078d6da2..de43bd6e 100644
--- a/README.md
+++ b/README.md
@@ -25,7 +25,7 @@ https://github.com/danielo515/obsidian-modal-form/assets/2270425/542974aa-c58b-4
   - toggle (true/false)
   - free text
   - text with autocompletion for note names (from a folder or root)
-  - text with autocompletion from a dataview query
+  - text with autocompletion from a dataview query (requires dataview plugin)
   - select from a list 
     - list of fixed values 
     - list of notes from a folder
diff --git a/src/core/formDefinition.ts b/src/core/formDefinition.ts
index d81bed7f..0237f13b 100644
--- a/src/core/formDefinition.ts
+++ b/src/core/formDefinition.ts
@@ -30,6 +30,18 @@ type inputType =
 	| inputDataviewSource
 	| inputSelectFixed;
 
+export const FieldTypeReadable: Record<AllFieldTypes, string> = {
+	"text": "Text",
+	"number": "Number",
+	"date": "Date",
+	"time": "Time",
+	"datetime": "DateTime",
+	"toggle": "Toggle",
+	"note": "Note",
+	"slider": "Slider",
+	"select": "Select",
+	"dataview": "Dataview",
+} as const;
 
 function isObject(input: unknown): input is Record<string, unknown> {
 	return typeof input === "object" && input !== null;
@@ -69,7 +81,7 @@ export function isInputSelectFixed(input: unknown): input is inputSelectFixed {
 	})
 }
 
-export type AllFieldTypes = FieldType | "note" | "slider" | "select";
+export type AllFieldTypes = inputType['type']
 export type FieldDefinition = {
 	name: string;
 	label?: string;
@@ -96,7 +108,7 @@ export type FormDefinition = {
 // It has all the possible values, and then you need to narrow it down
 // to the actual type.
 export type EditableInput = {
-	type: FieldType | "select" | "slider" | "note";
+	type: AllFieldTypes;
 	source?: "notes" | "fixed";
 	folder?: string;
 	min?: number;
diff --git a/src/views/EditFormView.ts b/src/views/EditFormView.ts
index 4bd93476..f03971ab 100644
--- a/src/views/EditFormView.ts
+++ b/src/views/EditFormView.ts
@@ -4,17 +4,6 @@ import type { FormDefinition, AllFieldTypes } from "../core/formDefinition";
 import FormEditor from './FormBuilder.svelte'
 
 export const EDIT_FORM_VIEW = "modal-form-edit-form-view";
-export const FieldTypeReadable: Record<AllFieldTypes, string> = {
-	"text": "Text",
-	"number": "Number",
-	"date": "Date",
-	"time": "Time",
-	"datetime": "DateTime",
-	"toggle": "Toggle",
-	"note": "Note",
-	"slider": "Slider",
-	"select": "Select"
-} as const;
 
 function parseState(maybeState: unknown): maybeState is FormDefinition {
 	if (maybeState === null) {
diff --git a/src/views/FormBuilder.svelte b/src/views/FormBuilder.svelte
index 19bdd672..93d56486 100644
--- a/src/views/FormBuilder.svelte
+++ b/src/views/FormBuilder.svelte
@@ -6,11 +6,12 @@
 		type FormDefinition,
 		isValidFormDefinition,
 		isInputNoteFromFolder,
+		FieldTypeReadable,
 	} from "src/core/formDefinition";
 	import { FolderSuggest } from "src/suggesters/suggestFolder";
-	import { FieldTypeReadable } from "src/views/EditFormView";
 	import { setIcon, Setting, App } from "obsidian";
 	import FormRow from "./components/FormRow.svelte";
+	import InputBuilderDataview from "./components/inputBuilderDataview.svelte";
 
 	export let definition: EditableFormDefinition = {
 		title: "",
@@ -307,6 +308,11 @@
 							>
 								<label>Source Folder</label>
 							</div>
+						{:else if field.input.type === "dataview"}
+							<InputBuilderDataview
+								{index}
+								bind:value={field.input.query}
+							/>
 						{/if}
 					</div>
 					<div class="flex gap1">
diff --git a/src/views/components/inputBuilderDataview.svelte b/src/views/components/inputBuilderDataview.svelte
new file mode 100644
index 00000000..1bfbbd9a
--- /dev/null
+++ b/src/views/components/inputBuilderDataview.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import FormRow from "./FormRow.svelte";
+
+	export let index: number;
+	export let value: string;
+	$: id = `dataview_${index}`;
+</script>
+
+<FormRow label="Dataview Query" {id}>
+	<span class="modal-form-hint">
+		This is a <a
+			href="https://blacksmithgu.github.io/obsidian-dataview/api/intro/"
+			>Dataview</a
+		>
+		query that will be used to populate the input suggestions. You should provide
+		a query that returns a list of strings, for example:
+		<pre class="language-js"><code
+				>dv.pages('#tag').map(p => p.file.name)</code
+			></pre>
+	</span>
+	<textarea
+		{id}
+		bind:value
+		name="dataview_query"
+		class="form-control"
+		rows="3"
+		placeholder="dv.pages('#tag').map(p => p.file.name)"
+	/>
+</FormRow>
+
+<style>
+</style>
diff --git a/styles.css b/styles.css
index 283aa9ea..8910b40d 100644
--- a/styles.css
+++ b/styles.css
@@ -30,3 +30,11 @@ If your plugin does not need CSS, delete this file.
 .modal-form-primary {
 	color: var(--text-accent);
 }
+
+.modal-form-hint {
+	color: var(--text-muted);
+}
+/* .modal-form-hint code {
+	color: var(--text-normal);
+	background-color: var(--background-secondary);
+} */