From a64b8a495cd61a0e35bb96e73573f7cac960e7c4 Mon Sep 17 00:00:00 2001 From: Danielo Rodriguez Date: Sun, 23 Jun 2024 07:32:40 +0200 Subject: [PATCH 01/21] WIP: condition schema --- src/core/findInputDefinitionSchema.ts | 6 ++--- src/core/formDefinition.test.ts | 4 ++-- src/core/formDefinition.ts | 10 ++++---- src/core/formDefinitionSchema.ts | 24 +++++++++---------- src/core/index.ts | 2 +- src/core/{ => input}/InputDefinitionSchema.ts | 2 +- src/core/input/dependentFields.ts | 17 +++++++++++++ src/core/input/index.ts | 2 ++ src/views/components/MultiSelectModel.ts | 2 +- 9 files changed, 44 insertions(+), 25 deletions(-) rename src/core/{ => input}/InputDefinitionSchema.ts (98%) create mode 100644 src/core/input/dependentFields.ts create mode 100644 src/core/input/index.ts diff --git a/src/core/findInputDefinitionSchema.ts b/src/core/findInputDefinitionSchema.ts index db8ccb68..4a114703 100644 --- a/src/core/findInputDefinitionSchema.ts +++ b/src/core/findInputDefinitionSchema.ts @@ -1,9 +1,9 @@ import { A, NonEmptyArray, ParsingFn, parse, pipe } from "@std"; import * as E from "fp-ts/Either"; -import { ValiError, BaseSchema } from "valibot"; -import { FieldMinimal, FieldMinimalSchema } from "./formDefinitionSchema"; +import { BaseSchema, ValiError } from "valibot"; import { AllFieldTypes } from "./formDefinition"; -import { InputTypeToParserMap } from "./InputDefinitionSchema"; +import { FieldMinimal, FieldMinimalSchema } from "./formDefinitionSchema"; +import { InputTypeToParserMap } from "./input/InputDefinitionSchema"; export function stringifyIssues(error: ValiError): NonEmptyArray { return error.issues.map( diff --git a/src/core/formDefinition.test.ts b/src/core/formDefinition.test.ts index 4351b33c..618820c8 100644 --- a/src/core/formDefinition.test.ts +++ b/src/core/formDefinition.test.ts @@ -1,4 +1,4 @@ -import { MultiselectSchema } from "./InputDefinitionSchema"; +import { parse } from "valibot"; import { isDataViewSource, isInputNoteFromFolder, @@ -6,7 +6,7 @@ import { isInputSlider, isSelectFromNotes, } from "./formDefinition"; -import { parse } from "valibot"; +import { MultiselectSchema } from "./input/InputDefinitionSchema"; describe("isDataViewSource", () => { it("should return true for valid inputDataviewSource objects", () => { diff --git a/src/core/formDefinition.ts b/src/core/formDefinition.ts index 22723f52..902e8450 100644 --- a/src/core/formDefinition.ts +++ b/src/core/formDefinition.ts @@ -1,13 +1,13 @@ -import { type Output, is, safeParse } from "valibot"; +import { A, O, pipe } from "@std"; +import { Simplify } from "type-fest"; +import { is, safeParse, type Output } from "valibot"; import { FieldDefinitionSchema, - FormDefinitionLatestSchema, FieldListSchema, FormDefinitionBasicSchema, + FormDefinitionLatestSchema, MigrationError, } from "./formDefinitionSchema"; -import { A, O, pipe } from "@std"; -import { Simplify } from "type-fest"; import { InputBasicSchema, InputDataviewSourceSchema, @@ -25,7 +25,7 @@ import { inputType, multiselect, selectFromNotes, -} from "./InputDefinitionSchema"; +} from "./input/InputDefinitionSchema"; export const InputTypeReadable: Record = { text: "Text", diff --git a/src/core/formDefinitionSchema.ts b/src/core/formDefinitionSchema.ts index 72c1a542..49135002 100644 --- a/src/core/formDefinitionSchema.ts +++ b/src/core/formDefinitionSchema.ts @@ -1,23 +1,23 @@ +import { parse, pipe } from "@std"; import * as E from "fp-ts/Either"; -import { pipe, parse } from "@std"; import { - object, - literal, - type Output, - is, + ValiError, array, - string, - optional, + boolean, + is, + literal, merge, - unknown, - ValiError, + object, + optional, passthrough, - boolean, + string, + unknown, + type Output, } from "valibot"; -import { FormDefinition } from "./formDefinition"; import { findFieldErrors, stringifyIssues } from "./findInputDefinitionSchema"; +import { FormDefinition } from "./formDefinition"; +import { InputTypeSchema, nonEmptyString } from "./input/InputDefinitionSchema"; import { ParsedTemplateSchema } from "./template/templateSchema"; -import { InputTypeSchema, nonEmptyString } from "./InputDefinitionSchema"; /** * Here are the core logic around the main domain of the plugin, diff --git a/src/core/index.ts b/src/core/index.ts index 18bae0a7..17c74051 100644 --- a/src/core/index.ts +++ b/src/core/index.ts @@ -1 +1 @@ -export * as input from "./InputDefinitionSchema"; +export * as input from "./input"; diff --git a/src/core/InputDefinitionSchema.ts b/src/core/input/InputDefinitionSchema.ts similarity index 98% rename from src/core/InputDefinitionSchema.ts rename to src/core/input/InputDefinitionSchema.ts index 841e26ad..5dfe0f08 100644 --- a/src/core/InputDefinitionSchema.ts +++ b/src/core/input/InputDefinitionSchema.ts @@ -16,7 +16,7 @@ import { toTrimmed, union, } from "valibot"; -import { AllFieldTypes, AllSources } from "./formDefinition"; +import { AllFieldTypes, AllSources } from "../formDefinition"; /** * Here are the definition for the input types. diff --git a/src/core/input/dependentFields.ts b/src/core/input/dependentFields.ts new file mode 100644 index 00000000..bca0b6eb --- /dev/null +++ b/src/core/input/dependentFields.ts @@ -0,0 +1,17 @@ +import * as v from "valibot"; +const isSet = v.object({ field: v.string(), type: v.literal("isSet") }); +const booleanValue = v.object({ + field: v.string(), + type: v.literal("boolean"), + value: v.boolean(), +}); +const startsWith = v.object({ + field: v.string(), + type: v.literal("startsWith"), + value: v.string(), +}); +const above = v.object({ field: v.string(), type: v.literal("above"), value: v.number() }); +const below = v.object({ field: v.string(), type: v.literal("below"), value: v.number() }); +const condition = v.union([isSet, booleanValue, startsWith, above, below]); + +export type Condition = v.Output; diff --git a/src/core/input/index.ts b/src/core/input/index.ts new file mode 100644 index 00000000..1bac8008 --- /dev/null +++ b/src/core/input/index.ts @@ -0,0 +1,2 @@ +export * from "./InputDefinitionSchema"; +export * from "./dependentFields"; diff --git a/src/views/components/MultiSelectModel.ts b/src/views/components/MultiSelectModel.ts index b0288475..89be3404 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 { inputTag, multiselect } from "src/core/InputDefinitionSchema"; +import { inputTag, multiselect } from "src/core/input/InputDefinitionSchema"; import { executeSandboxedDvQuery, sandboxedDvQuery } from "src/suggesters/SafeDataviewQuery"; import { StringSuggest } from "src/suggesters/StringSuggest"; import { FileSuggest } from "src/suggesters/suggestFile"; From be4367179b3706d5a4c83cbe9e6639cbe68105a4 Mon Sep 17 00:00:00 2001 From: Danielo Rodriguez Date: Sun, 23 Jun 2024 07:45:49 +0200 Subject: [PATCH 02/21] chore: available conditions for input --- src/core/input/InputDefinitionSchema.ts | 2 ++ src/core/input/dependentFields.ts | 34 ++++++++++++++++++++++++- src/store/formStore.ts | 2 +- tsconfig.json | 25 +++++++++++++++--- 4 files changed, 57 insertions(+), 6 deletions(-) diff --git a/src/core/input/InputDefinitionSchema.ts b/src/core/input/InputDefinitionSchema.ts index 5dfe0f08..fe80b070 100644 --- a/src/core/input/InputDefinitionSchema.ts +++ b/src/core/input/InputDefinitionSchema.ts @@ -142,6 +142,8 @@ export const InputTypeSchema = union([ DocumentBlock, ]); +export type Input = Output; + export const InputTypeToParserMap: Record> = { number: parseC(InputBasicSchema), text: parseC(InputBasicSchema), diff --git a/src/core/input/dependentFields.ts b/src/core/input/dependentFields.ts index bca0b6eb..70a611cd 100644 --- a/src/core/input/dependentFields.ts +++ b/src/core/input/dependentFields.ts @@ -1,4 +1,6 @@ +import { absurd } from "fp-ts/function"; import * as v from "valibot"; +import { FieldDefinition } from "../formDefinition"; const isSet = v.object({ field: v.string(), type: v.literal("isSet") }); const booleanValue = v.object({ field: v.string(), @@ -7,7 +9,7 @@ const booleanValue = v.object({ }); const startsWith = v.object({ field: v.string(), - type: v.literal("startsWith"), + type: v.enumType(["startsWith", "contains"]), value: v.string(), }); const above = v.object({ field: v.string(), type: v.literal("above"), value: v.number() }); @@ -15,3 +17,33 @@ const below = v.object({ field: v.string(), type: v.literal("below"), value: v.n const condition = v.union([isSet, booleanValue, startsWith, above, below]); export type Condition = v.Output; +export type ConditionType = Condition["type"]; + +export function availableConditionsForInput(input: FieldDefinition["input"]): ConditionType[] { + switch (input.type) { + case "text": + case "textarea": + case "email": + case "folder": + case "note": + case "tel": + return ["isSet", "startsWith", "contains"]; + case "slider": + case "number": + return ["isSet", "above", "below"]; + case "toggle": + return ["boolean"]; + case "date": + case "time": + case "datetime": + return ["isSet"]; + case "select": + case "multiselect": + case "tag": + case "dataview": + case "document_block": + return []; + default: + return absurd(input); + } +} diff --git a/src/store/formStore.ts b/src/store/formStore.ts index a44c790d..4af6294f 100644 --- a/src/store/formStore.ts +++ b/src/store/formStore.ts @@ -2,6 +2,7 @@ import * as R from "fp-ts/Record"; // This is the store that represents a runtime form. It is a writable store that contains the current state of the form // and the errors that are present in the form. It is used by the Form component to render the form and to update the +import { input } from "@core"; import { NonEmptyArray, flow, pipe } from "@std"; import * as A from "fp-ts/Array"; import * as E from "fp-ts/Either"; @@ -9,7 +10,6 @@ import * as O from "fp-ts/Option"; import { Option } from "fp-ts/Option"; import { fromEntries, toEntries } from "fp-ts/Record"; import { absurd } from "fp-ts/function"; -import { input } from "src/core"; import { FieldDefinition } from "src/core/formDefinition"; import { Readable, Writable, derived, get, writable } from "svelte/store"; diff --git a/tsconfig.json b/tsconfig.json index 0091189f..85d3af87 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -15,10 +15,25 @@ "verbatimModuleSyntax": false, "strict": true, "noUncheckedIndexedAccess": true, - "types": ["jest", "node", "svelte"], - "lib": ["DOM", "ES5", "ES6", "ES7"], + "types": [ + "jest", + "node", + "svelte" + ], + "lib": [ + "DOM", + "ES5", + "ES6", + "ES7" + ], + "noErrorTruncation": true, "paths": { - "@std": ["src/std"] + "@std": [ + "src/std" + ], + "@core": [ + "src/core" + ], }, "plugins": [ { @@ -79,5 +94,7 @@ } ] }, - "include": ["src/**/*"] + "include": [ + "src/**/*" + ] } From 9ee5a5ee8da865bee84ec0257e2ffa8726910dad Mon Sep 17 00:00:00 2001 From: Danielo Rodriguez Date: Sat, 29 Jun 2024 08:13:05 +0200 Subject: [PATCH 03/21] chore: namespaced input stuff --- src/views/components/InputBuilderSelect.svelte | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/views/components/InputBuilderSelect.svelte b/src/views/components/InputBuilderSelect.svelte index 7ba37b87..e6de7a4d 100644 --- a/src/views/components/InputBuilderSelect.svelte +++ b/src/views/components/InputBuilderSelect.svelte @@ -5,8 +5,8 @@ */ type option = { label: string; value: string } | string; + import { input } from "@core"; import { App, setIcon } from "obsidian"; - import { canAllowUnknownValues } from "src/core/InputDefinitionSchema"; import { AllSources } from "src/core/formDefinition"; import FormRow from "./FormRow.svelte"; import InputFolder from "./InputBuilderFolder.svelte"; @@ -23,7 +23,8 @@ export let is_multi: boolean; $: id = `builder_select_${index}`; $: options_id = `builder_select_options_btn_${index}`; - $: showAllowUnknownValuesOption = is_multi && canAllowUnknownValues("multiselect", source); + $: showAllowUnknownValuesOption = + is_multi && input.canAllowUnknownValues("multiselect", source); function moveOption(from: number, direction: "up" | "down") { const to = direction === "up" ? from - 1 : from + 1; From aef0038b0ab816ea27a2ac5907d8ff47d23bfce1 Mon Sep 17 00:00:00 2001 From: Danielo Rodriguez Date: Sat, 29 Jun 2024 08:49:35 +0200 Subject: [PATCH 04/21] chore: namespacing --- src/views/components/Form/ObsidianDropdown.svelte | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/views/components/Form/ObsidianDropdown.svelte b/src/views/components/Form/ObsidianDropdown.svelte index a27a9124..bc8f64a2 100644 --- a/src/views/components/Form/ObsidianDropdown.svelte +++ b/src/views/components/Form/ObsidianDropdown.svelte @@ -1,11 +1,11 @@
@@ -222,163 +228,173 @@

Fields

- {#if definition.fields.length > 0} - {#each definition.fields as field, index} - {@const desc_id = `desc_${index}`} - {@const delete_id = `delete_${index}`} -
-
- - -
-
- - -
+ {#each definition.fields as field, index} + {@const desc_id = `desc_${index}`} + {@const delete_id = `delete_${index}`} + {@const availableConditions = availableFieldsForCondition.filter( + (x) => x.name !== field.name, + )} +
+
+ + +
+
+ + +
- {#if ["text", "email", "tel", "number", "note", "tag", "dataview", "multiselect"].includes(field.input.type)} - - - - {/if} -
- -
+
+
+
-
+
+
+ + +
+
+ + +
+
+
+ {#if field.input.type === "select"} + + {:else if field.input.type === "multiselect"} + + {:else if field.input.type === "slider"} + {@const min_id = `min_${index}`} + {@const max_id = `max_${index}`}
- +
- - -
-
-
- {#if field.input.type === "select"} - - {:else if field.input.type === "multiselect"} - - {:else if field.input.type === "slider"} - {@const min_id = `min_${index}`} - {@const max_id = `max_${index}`} -
- - -
-
- - -
- {:else if field.input.type === "note"} - - {:else if field.input.type === "dataview"} - - {:else if field.input.type === "document_block"} - Max + - {/if} -
-
-
+ {:else if field.input.type === "note"} + - -
+ + {#if ["text", "email", "tel", "number", "note", "tag", "dataview", "multiselect"].includes(field.input.type)} + + + + {/if} + {#if availableConditions.length > 0} +
+ + + +
-
- {/each} + {/if} +
+ +
+
{:else} No fields yet - {/if} + {/each}
{/if} From d94468f5848fccebed2690db71d93f4e9a681bdb Mon Sep 17 00:00:00 2001 From: Danielo Rodriguez Date: Sat, 29 Jun 2024 10:33:47 +0200 Subject: [PATCH 08/21] WIP: conditional input component --- .../FormBuilder/ConditionInput.svelte | 49 +++++++++++++++++++ src/views/components/FormBuilder/index.ts | 1 + 2 files changed, 50 insertions(+) create mode 100644 src/views/components/FormBuilder/ConditionInput.svelte create mode 100644 src/views/components/FormBuilder/index.ts diff --git a/src/views/components/FormBuilder/ConditionInput.svelte b/src/views/components/FormBuilder/ConditionInput.svelte new file mode 100644 index 00000000..bf62d1e6 --- /dev/null +++ b/src/views/components/FormBuilder/ConditionInput.svelte @@ -0,0 +1,49 @@ + + + + + + +{#if conditions.length > 0} + + + +{/if} +{#if selectedCondition} + {#if selectedCondition === "contains" || selectedCondition === "startsWith"} + + + + {:else if selectedCondition === "above" || selectedCondition === "below"} + + + + {/if} +{/if} diff --git a/src/views/components/FormBuilder/index.ts b/src/views/components/FormBuilder/index.ts new file mode 100644 index 00000000..8d13c044 --- /dev/null +++ b/src/views/components/FormBuilder/index.ts @@ -0,0 +1 @@ +export { default as ConditionInput } from "./ConditionInput.svelte"; From ad59a6acab6b083ea67c20f8fa6e9728f9c973ef Mon Sep 17 00:00:00 2001 From: Danielo Rodriguez Date: Sat, 29 Jun 2024 10:57:20 +0200 Subject: [PATCH 09/21] chore: new field group for field meta (conditional input) --- src/views/FormBuilder.svelte | 18 ++-------------- .../components/FormBuilder/FieldMeta.svelte | 21 +++++++++++++++++++ src/views/components/FormBuilder/index.ts | 1 + 3 files changed, 24 insertions(+), 16 deletions(-) create mode 100644 src/views/components/FormBuilder/FieldMeta.svelte diff --git a/src/views/FormBuilder.svelte b/src/views/FormBuilder.svelte index 1915b588..b5035d04 100644 --- a/src/views/FormBuilder.svelte +++ b/src/views/FormBuilder.svelte @@ -12,8 +12,7 @@ import { ParsedTemplate, parsedTemplateToString } from "src/core/template/templateParser"; import { log_error } from "src/utils/Log"; import { ModalFormError } from "src/utils/ModalFormError"; - import { slide } from "svelte/transition"; - import { ConditionInput } from "./components/FormBuilder"; + import FieldMeta from "./components/FormBuilder/FieldMeta.svelte"; import FormRow from "./components/FormRow.svelte"; import InputBuilderDocumentBlock from "./components/InputBuilderDocumentBlock.svelte"; import InputFolder from "./components/InputBuilderFolder.svelte"; @@ -231,9 +230,6 @@ {#each definition.fields as field, index} {@const desc_id = `desc_${index}`} {@const delete_id = `delete_${index}`} - {@const availableConditions = availableFieldsForCondition.filter( - (x) => x.name !== field.name, - )}
{/if} - {#if availableConditions.length > 0} -
- - - - -
- {/if} +
{/if} From eeea84dbad387b40f68a8faa2a4c0a2a8beda869 Mon Sep 17 00:00:00 2001 From: Danielo Rodriguez Date: Sat, 29 Jun 2024 15:35:11 +0200 Subject: [PATCH 11/21] chore: condition processor --- src/core/input/dependentFields.ts | 64 +++++++++++++++++++++++++++++++ 1 file changed, 64 insertions(+) diff --git a/src/core/input/dependentFields.ts b/src/core/input/dependentFields.ts index 70a611cd..289fabfc 100644 --- a/src/core/input/dependentFields.ts +++ b/src/core/input/dependentFields.ts @@ -47,3 +47,67 @@ export function availableConditionsForInput(input: FieldDefinition["input"]): Co return absurd(input); } } + +function processIsSet(_condition: Extract, value: unknown) { + if (value === null || value === undefined) { + return false; + } + if (typeof value === "string") { + return value !== ""; + } + return true; +} + +function processStringCondition( + condition: Extract, + value: unknown, +) { + if (typeof value !== "string") { + return false; + } + switch (condition.type) { + case "startsWith": + return value.startsWith(condition.value); + case "contains": + return value.includes(condition.value); + default: + return absurd(condition.type); + } +} + +function processNumberCondition( + condition: Extract, + value: unknown, +) { + if (typeof value !== "number") { + return false; + } + switch (condition.type) { + case "above": + return value > condition.value; + case "below": + return value < condition.value; + default: + return absurd(condition); + } +} + +export function valueMeetsCondition(condition: Condition, value: unknown) { + if (value === null || value === undefined) { + return false; + } + switch (condition.type) { + case "isSet": + return processIsSet(condition, value); + case "startsWith": + case "contains": + return processStringCondition(condition, value); + case "above": + case "below": + return processNumberCondition(condition, value); + case "boolean": + return value === condition.value; + default: + return absurd(condition); + } +} From 8aa7797221fa013d411e00483a5132fe581bbb22 Mon Sep 17 00:00:00 2001 From: Danielo Rodriguez Date: Sat, 29 Jun 2024 17:00:48 +0200 Subject: [PATCH 12/21] WIP: move rendering of fields to a nested component to be able to use stores --- docs/blog/posts/NextRelease.md | 2 + src/FormModal.svelte | 53 +-------------- src/core/formDefinitionSchema.ts | 2 + src/core/input/dependentFields.ts | 10 +-- src/store/formStore.ts | 25 ++++++- src/views/FormBuilder.svelte | 1 - src/views/components/Form/RenderField.svelte | 68 ++++++++++++++++++++ 7 files changed, 103 insertions(+), 58 deletions(-) create mode 100644 docs/blog/posts/NextRelease.md create mode 100644 src/views/components/Form/RenderField.svelte diff --git a/docs/blog/posts/NextRelease.md b/docs/blog/posts/NextRelease.md new file mode 100644 index 00000000..10f2f7ec --- /dev/null +++ b/docs/blog/posts/NextRelease.md @@ -0,0 +1,2 @@ + +- The placeholder of the label is set by default to the name of the field. This will make it easier for people to understand that the default label value is the name of the field. diff --git a/src/FormModal.svelte b/src/FormModal.svelte index 2baf57f7..3703fe1e 100644 --- a/src/FormModal.svelte +++ b/src/FormModal.svelte @@ -2,18 +2,7 @@ import { App } from "obsidian"; import { FormDefinition } from "src/core/formDefinition"; import { makeFormEngine } from "src/store/formStore"; - import InputField from "src/views/components/Form/InputField.svelte"; - import ObsidianInputWrapper from "src/views/components/Form/ObsidianInputWrapper.svelte"; - import DocumentBlock from "./views/components/Form/DocumentBlock.svelte"; - import InputDataview from "./views/components/Form/InputDataview.svelte"; - import InputFolder from "./views/components/Form/InputFolder.svelte"; - import InputNote from "./views/components/Form/InputNote.svelte"; - import InputTag from "./views/components/Form/InputTag.svelte"; - import InputTextArea from "./views/components/Form/InputTextArea.svelte"; - import MultiSelectField from "./views/components/Form/MultiSelectField.svelte"; - import ObsidianSelect from "./views/components/Form/ObsidianSelect.svelte"; - import ObsidianToggle from "./views/components/Form/ObsidianToggle.svelte"; - import InputSlider from "./views/components/Form/inputSlider.svelte"; + import RenderField from "./views/components/Form/RenderField.svelte"; export let app: App; export let reportFormErrors: (errors: string[]) => void; export let formEngine: ReturnType; @@ -23,43 +12,5 @@ {#each fields as definition} - {@const { value, errors } = formEngine.addField(definition)} - {#if definition.input.type === "select"} - - {:else if definition.input.type === "toggle"} - - {:else if definition.input.type === "folder"} - - {:else if definition.input.type === "dataview"} - - {:else if definition.input.type === "note"} - - {:else if definition.input.type === "textarea"} - - {:else if definition.input.type === "document_block"} - - - - - {:else} - - {#if definition.input.type === "multiselect"} - - {:else if definition.input.type === "slider"} - - {:else if definition.input.type === "tag"} - - {:else} - - {/if} - - {/if} + {/each} diff --git a/src/core/formDefinitionSchema.ts b/src/core/formDefinitionSchema.ts index 49135002..147616dd 100644 --- a/src/core/formDefinitionSchema.ts +++ b/src/core/formDefinitionSchema.ts @@ -1,3 +1,4 @@ +import { input } from "@core"; import { parse, pipe } from "@std"; import * as E from "fp-ts/Either"; import { @@ -30,6 +31,7 @@ export const FieldDefinitionSchema = object({ label: optional(string()), description: string(), isRequired: optional(boolean()), + condition: optional(input.ConditionSchema), input: InputTypeSchema, }); /** diff --git a/src/core/input/dependentFields.ts b/src/core/input/dependentFields.ts index 289fabfc..98a1ac79 100644 --- a/src/core/input/dependentFields.ts +++ b/src/core/input/dependentFields.ts @@ -14,9 +14,9 @@ const startsWith = v.object({ }); const above = v.object({ field: v.string(), type: v.literal("above"), value: v.number() }); const below = v.object({ field: v.string(), type: v.literal("below"), value: v.number() }); -const condition = v.union([isSet, booleanValue, startsWith, above, below]); +export const ConditionSchema = v.union([isSet, booleanValue, startsWith, above, below]); -export type Condition = v.Output; +export type Condition = v.Output; export type ConditionType = Condition["type"]; export function availableConditionsForInput(input: FieldDefinition["input"]): ConditionType[] { @@ -61,7 +61,7 @@ function processIsSet(_condition: Extract, value: function processStringCondition( condition: Extract, value: unknown, -) { +): boolean { if (typeof value !== "string") { return false; } @@ -78,7 +78,7 @@ function processStringCondition( function processNumberCondition( condition: Extract, value: unknown, -) { +): boolean { if (typeof value !== "number") { return false; } @@ -92,7 +92,7 @@ function processNumberCondition( } } -export function valueMeetsCondition(condition: Condition, value: unknown) { +export function valueMeetsCondition(condition: Condition, value: unknown): boolean { if (value === null || value === undefined) { return false; } diff --git a/src/store/formStore.ts b/src/store/formStore.ts index 4af6294f..7a0b3a14 100644 --- a/src/store/formStore.ts +++ b/src/store/formStore.ts @@ -11,6 +11,7 @@ import { Option } from "fp-ts/Option"; import { fromEntries, toEntries } from "fp-ts/Record"; import { absurd } from "fp-ts/function"; import { FieldDefinition } from "src/core/formDefinition"; +import { valueMeetsCondition } from "src/core/input"; import { Readable, Writable, derived, get, writable } from "svelte/store"; type Rule = { tag: "required"; message: string }; //| { tag: 'minLength', length: number, message: string } | { tag: 'maxLength', length: number, message: string } | { tag: 'pattern', pattern: RegExp, message: string }; @@ -51,6 +52,7 @@ export interface FormEngine { addField(field: { name: string; label?: string; isRequired?: boolean }): { value: Writable; errors: Readable; + isVisible: Readable; }; /** * Subscribes to the form store. This method is required to conform to the svelte store interface. @@ -156,7 +158,10 @@ export function makeFormEngine({ const formStore: Writable> = writable({ fields: {}, status: "draft" }); /** Creates helper functions to modify the store immutably*/ function setFormField({ name, input }: FieldDefinition) { - /** Set the initial value of the field*/ + /** + * Initializes a field in the form store with the provided errors, rules + * and default values (read from the defaultValues object passed to the form engine) + */ function initField(errors = [], rules?: Rule) { formStore.update((form) => { return { @@ -282,8 +287,26 @@ export function makeFormEngine({ }); }, }; + const isVisible = derived(formStore, ($form) => { + if (field.isRequired) return true; + const condition = field.condition; + if (condition === undefined) return true; + return pipe( + $form.fields[condition.field], + O.fromNullable, + O.match( + () => O.of(true), + (f) => { + return f.value; + }, + ), + O.map((value) => valueMeetsCondition(condition, value)), + O.getOrElse(() => true), + ); + }); return { value: fieldValueStore, + isVisible, errors: derived(formStore, ({ fields }) => fields[field.name]?.errors ?? []), }; }, diff --git a/src/views/FormBuilder.svelte b/src/views/FormBuilder.svelte index b5035d04..5f690e97 100644 --- a/src/views/FormBuilder.svelte +++ b/src/views/FormBuilder.svelte @@ -128,7 +128,6 @@ } const handlePreview = () => { if (!isValidFormDefinition(definition)) return; - console.log("preview of", definition); onPreview(definition); }; $: availableFieldsForCondition = definition.fields.filter( diff --git a/src/views/components/Form/RenderField.svelte b/src/views/components/Form/RenderField.svelte new file mode 100644 index 00000000..bed69c05 --- /dev/null +++ b/src/views/components/Form/RenderField.svelte @@ -0,0 +1,68 @@ + + +{#if $isVisible} + {#if definition.input.type === "select"} + + {:else if definition.input.type === "toggle"} + + {:else if definition.input.type === "folder"} + + {:else if definition.input.type === "dataview"} + + {:else if definition.input.type === "note"} + + {:else if definition.input.type === "textarea"} + + {:else if definition.input.type === "document_block"} + + + + + {:else} + + {#if definition.input.type === "multiselect"} + + {:else if definition.input.type === "slider"} + + {:else if definition.input.type === "tag"} + + {:else} + + {/if} + + {/if} +{/if} From 4ab141ec537089f3e9cbd052843e3b45fec9aea6 Mon Sep 17 00:00:00 2001 From: Danielo Rodriguez Date: Sat, 29 Jun 2024 20:01:31 +0200 Subject: [PATCH 13/21] feat(runtime): conditional fields v1 --- src/core/input/dependentFields.ts | 1 + src/store/formStore.ts | 24 +++++++++---------- src/views/components/Form/RenderField.svelte | 5 +++- .../FormBuilder/ConditionInput.svelte | 3 +-- .../components/FormBuilder/FieldMeta.svelte | 6 +++-- 5 files changed, 22 insertions(+), 17 deletions(-) diff --git a/src/core/input/dependentFields.ts b/src/core/input/dependentFields.ts index 98a1ac79..e1ca7fe8 100644 --- a/src/core/input/dependentFields.ts +++ b/src/core/input/dependentFields.ts @@ -98,6 +98,7 @@ export function valueMeetsCondition(condition: Condition, value: unknown): boole } switch (condition.type) { case "isSet": + console.log({ ...condition, value }); return processIsSet(condition, value); case "startsWith": case "contains": diff --git a/src/store/formStore.ts b/src/store/formStore.ts index 7a0b3a14..ef8f624c 100644 --- a/src/store/formStore.ts +++ b/src/store/formStore.ts @@ -52,7 +52,7 @@ export interface FormEngine { addField(field: { name: string; label?: string; isRequired?: boolean }): { value: Writable; errors: Readable; - isVisible: Readable; + isVisible: Readable>; }; /** * Subscribes to the form store. This method is required to conform to the svelte store interface. @@ -287,21 +287,21 @@ export function makeFormEngine({ }); }, }; - const isVisible = derived(formStore, ($form) => { - if (field.isRequired) return true; + const isVisible = derived(formStore, ($form): E.Either => { + console.log( + "condition", + field.name, + field.condition && $form.fields[field.condition.field], + ); + if (field.isRequired) return E.of(true); const condition = field.condition; - if (condition === undefined) return true; + if (condition === undefined) return E.of(true); return pipe( $form.fields[condition.field], - O.fromNullable, - O.match( - () => O.of(true), - (f) => { - return f.value; - }, + E.fromNullable( + `Field '${condition.field}' which is a dependency of '${field.name}' does not exist`, ), - O.map((value) => valueMeetsCondition(condition, value)), - O.getOrElse(() => true), + E.map((f) => valueMeetsCondition(condition, O.toUndefined(f.value))), ); }); return { diff --git a/src/views/components/Form/RenderField.svelte b/src/views/components/Form/RenderField.svelte index bed69c05..1142c9ac 100644 --- a/src/views/components/Form/RenderField.svelte +++ b/src/views/components/Form/RenderField.svelte @@ -1,4 +1,5 @@ -{#if $isVisible} +{#if E.isLeft($isVisible)} + {$isVisible.left} +{:else if $isVisible.right} {#if definition.input.type === "select"} {:else if definition.input.type === "toggle"} diff --git a/src/views/components/FormBuilder/ConditionInput.svelte b/src/views/components/FormBuilder/ConditionInput.svelte index ec9074a3..d3b7f79b 100644 --- a/src/views/components/FormBuilder/ConditionInput.svelte +++ b/src/views/components/FormBuilder/ConditionInput.svelte @@ -17,7 +17,7 @@ : []; $: { if (selectedCondition && selectedTargetField) { - const field = selectedTargetField?.input.type; + const field = selectedTargetField?.name; switch (selectedCondition) { case "isSet": value = { @@ -46,7 +46,6 @@ } } } - $: console.log(value); diff --git a/src/views/components/FormBuilder/FieldMeta.svelte b/src/views/components/FormBuilder/FieldMeta.svelte index 1467681d..71d95882 100644 --- a/src/views/components/FormBuilder/FieldMeta.svelte +++ b/src/views/components/FormBuilder/FieldMeta.svelte @@ -7,14 +7,16 @@ export let field: EditableField; export let availableFieldsForCondition: FieldDefinition[]; export let index: number; - let isConditional = false; + let isConditional = !!field.condition || false; $: availableConditions = availableFieldsForCondition.filter((x) => x.name !== field.name); $: { - if (isConditional && !field.condition) { + if (isConditional) { field.condition = { field: "", type: "isSet", }; + } else { + field.condition = undefined; } } From 83a1060aef020133f2723f090c09603a058e010e Mon Sep 17 00:00:00 2001 From: Danielo Rodriguez Date: Sat, 29 Jun 2024 22:57:25 +0200 Subject: [PATCH 14/21] feat(runtime): show conditional errors in the form --- src/views/components/Form/RenderField.svelte | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/views/components/Form/RenderField.svelte b/src/views/components/Form/RenderField.svelte index 1142c9ac..0a8a98bd 100644 --- a/src/views/components/Form/RenderField.svelte +++ b/src/views/components/Form/RenderField.svelte @@ -5,6 +5,7 @@ import { FormEngine } from "src/store/formStore"; import InputField from "src/views/components/Form/InputField.svelte"; import ObsidianInputWrapper from "src/views/components/Form/ObsidianInputWrapper.svelte"; + import { derived } from "svelte/store"; import DocumentBlock from "./DocumentBlock.svelte"; import InputDataview from "./InputDataview.svelte"; import InputFolder from "./InputFolder.svelte"; @@ -24,11 +25,20 @@ $: value = model.value; $: errors = model.errors; $: isVisible = model.isVisible; + $: visibleError = derived(model.isVisible, ($isVisible) => + E.isLeft($isVisible) ? [$isVisible.left] : ([] as string[]), + ); $: console.log($isVisible); {#if E.isLeft($isVisible)} - {$isVisible.left} + + + {:else if $isVisible.right} {#if definition.input.type === "select"} From 2643009a4de58b87cb791bc21e40db9a3c295c3a Mon Sep 17 00:00:00 2001 From: Danielo Rodriguez Date: Sat, 29 Jun 2024 23:42:44 +0200 Subject: [PATCH 15/21] chore: expand the comparators --- src/core/input/dependentFields.ts | 39 ++++++++++++---- .../FormBuilder/ConditionInput.svelte | 46 +++++++++++++++---- 2 files changed, 68 insertions(+), 17 deletions(-) diff --git a/src/core/input/dependentFields.ts b/src/core/input/dependentFields.ts index e1ca7fe8..e37de510 100644 --- a/src/core/input/dependentFields.ts +++ b/src/core/input/dependentFields.ts @@ -9,12 +9,15 @@ const booleanValue = v.object({ }); const startsWith = v.object({ field: v.string(), - type: v.enumType(["startsWith", "contains"]), + type: v.enumType(["startsWith", "endsWith", "isExactly", "contains"]), value: v.string(), }); -const above = v.object({ field: v.string(), type: v.literal("above"), value: v.number() }); -const below = v.object({ field: v.string(), type: v.literal("below"), value: v.number() }); -export const ConditionSchema = v.union([isSet, booleanValue, startsWith, above, below]); +const above = v.object({ + field: v.string(), + type: v.enumType(["above", "aboveOrEqual", "below", "belowOrEqual", "exactly"]), + value: v.number(), +}); +export const ConditionSchema = v.union([isSet, booleanValue, startsWith, above]); export type Condition = v.Output; export type ConditionType = Condition["type"]; @@ -27,10 +30,10 @@ export function availableConditionsForInput(input: FieldDefinition["input"]): Co case "folder": case "note": case "tel": - return ["isSet", "startsWith", "contains"]; + return ["startsWith", "endsWith", "isExactly", "contains"]; case "slider": case "number": - return ["isSet", "above", "below"]; + return ["above", "aboveOrEqual", "below", "belowOrEqual", "exactly"]; case "toggle": return ["boolean"]; case "date": @@ -59,7 +62,7 @@ function processIsSet(_condition: Extract, value: } function processStringCondition( - condition: Extract, + condition: Extract, value: unknown, ): boolean { if (typeof value !== "string") { @@ -70,13 +73,20 @@ function processStringCondition( return value.startsWith(condition.value); case "contains": return value.includes(condition.value); + case "endsWith": + return value.endsWith(condition.value); + case "isExactly": + return value === condition.value; default: return absurd(condition.type); } } function processNumberCondition( - condition: Extract, + condition: Extract< + Condition, + { type: "above" | "below" | "aboveOrEqual" | "belowOrEqual" | "exactly" } + >, value: unknown, ): boolean { if (typeof value !== "number") { @@ -87,8 +97,14 @@ function processNumberCondition( return value > condition.value; case "below": return value < condition.value; + case "aboveOrEqual": + return value >= condition.value; + case "belowOrEqual": + return value <= condition.value; + case "exactly": + return value === condition.value; default: - return absurd(condition); + return absurd(condition.type); } } @@ -102,9 +118,14 @@ export function valueMeetsCondition(condition: Condition, value: unknown): boole return processIsSet(condition, value); case "startsWith": case "contains": + case "endsWith": + case "isExactly": return processStringCondition(condition, value); case "above": case "below": + case "aboveOrEqual": + case "belowOrEqual": + case "exactly": return processNumberCondition(condition, value); case "boolean": return value === condition.value; diff --git a/src/views/components/FormBuilder/ConditionInput.svelte b/src/views/components/FormBuilder/ConditionInput.svelte index d3b7f79b..9ef0c716 100644 --- a/src/views/components/FormBuilder/ConditionInput.svelte +++ b/src/views/components/FormBuilder/ConditionInput.svelte @@ -1,5 +1,6 @@