@stubber/form-fields 2.2.6 → 3.0.0

package/dist/form-fields/fields/field-builder-field.svelte

@@ -0,0 +1,568 @@
+<script context="module">import { writable } from "svelte/store";
+import {
+  fields,
+  validation_types
+} from "../interfaces";
+import { text_field_param_spec } from "./text-field.svelte";
+const field_params_spec_lookup = {
+  text: text_field_param_spec,
+  checkbox: checkbox_field_param_spec,
+  smart_text: smart_text_field_param_spec,
+  file: file_field_param_spec,
+  heading: heading_field_param_spec,
+  hidden: hidden_field_param_spec,
+  html: html_field_param_spec,
+  map: map_field_param_spec,
+  checkbox_autocomplete: merge({}, checkbox_field_param_spec, smart_text_field_param_spec),
+  code: code_field_param_spec,
+  currency: currency_field_param_spec,
+  dataindication: null,
+  telephone: null,
+  email: null,
+  arraybuilder: array_builder_field_param_spec,
+  contactselector: contact_selector_field_param_spec,
+  date: null,
+  datetime: null,
+  fieldbuilder: null,
+  grid: grid_field_param_spec,
+  hiddenlocation: null,
+  jsoneditor: jsoneditor_field_param_spec,
+  multicheckbox: multi_checkbox_field_param_spec,
+  multistep: null,
+  // todo: fields for multistep
+  note: null,
+  number: number_field_param_spec,
+  objectbuilder: object_builder_field_param_spec,
+  qrcodescanner: null,
+  radio: radio_field_param_spec,
+  screenrecorder: basic_files_field_param_spec,
+  screenshot: basic_files_field_param_spec,
+  voicenote: basic_files_field_param_spec,
+  signature: signature_field_param_spec,
+  scrollandreaddisplay: scroll_and_read_display_field_param_spec,
+  section: null,
+  // todo: fields for section
+  select: select_field_param_spec,
+  slider: number_field_param_spec,
+  selectresource: select_resource_field_param_spec,
+  unknown: null
+};
+</script>
+
+<script>import Form from "../Form.svelte";
+import { cloneDeep, isEmpty, isEqual, isUndefined, merge, omitBy } from "lodash-es";
+import { getContext } from "svelte";
+import Autocomplete, {} from "../Autocomplete.svelte";
+import FieldLabel from "../FieldLabel.svelte";
+import FieldMessage from "../FieldMessage.svelte";
+import { checkbox_field_param_spec } from "./checkbox-field.svelte";
+import { file_field_param_spec } from "./file-field.svelte";
+import { heading_field_param_spec } from "./heading-field.svelte";
+import { hidden_field_param_spec } from "./hidden-field.svelte";
+import { html_field_param_spec } from "./html-field.svelte";
+import { map_field_param_spec } from "./map-field.svelte";
+import { smart_text_field_param_spec } from "./smart-text-field.svelte";
+import { code_field_param_spec } from "./code-field.svelte";
+import { currency_field_param_spec } from "./currency-field.svelte";
+import { array_builder_field_param_spec } from "./array-builder-field.svelte";
+import { contact_selector_field_param_spec } from "./contact-selector-field.svelte";
+import { grid_field_param_spec } from "./grid-field.svelte";
+import { jsoneditor_field_param_spec } from "./jsoneditor-field.svelte";
+import { multi_checkbox_field_param_spec } from "./multi-checkbox-field.svelte";
+import { number_field_param_spec } from "./number-field.svelte";
+import { object_builder_field_param_spec } from "./object-builder-field.svelte";
+import { radio_field_param_spec } from "./radio-field.svelte";
+import { scroll_and_read_display_field_param_spec } from "./scroll-and-read-display-field.svelte";
+import { select_field_param_spec } from "./select-field.svelte";
+import { select_resource_field_param_spec } from "./selectresource-field.svelte";
+import { handle_editor_change_setter, handle_store_change } from "../../utils/json-editor-sync";
+import { basic_files_field_param_spec } from "../file_creation_options";
+import { signature_field_param_spec } from "./signature-field.svelte";
+import { STYLES_CONTEXT, classNames } from "../styles";
+import CollapsibleSection from "../CollapsibleSection.svelte";
+import FieldBuilderReorder from "./_field-builder-reorder.svelte";
+export let fieldStore;
+const styles = getContext(STYLES_CONTEXT);
+let value = cloneDeep($fieldStore.value) || {
+  details: {},
+  initvalue: {}
+};
+if (!value.details) {
+  value.details = {};
+}
+if (!value.initvalue) {
+  value.initvalue = {};
+}
+let default_initvalue_editor;
+let override_initvalue_editor;
+$: update_fieldStore(value);
+function update_fieldStore(new_value) {
+  const cleaned_value = omitBy(
+    cloneDeep(new_value),
+    (v) => isUndefined(v) || typeof v === "object" && isEmpty(v)
+  );
+  if (!isEqual($fieldStore, cleaned_value)) {
+    $fieldStore.value = cleaned_value;
+  }
+}
+$: update_value($fieldStore.value);
+function update_value(new_value) {
+  if (!isEqual(value, new_value)) {
+    value = {
+      details: {},
+      initvalue: {},
+      ...cloneDeep(new_value)
+    };
+    update_params_from_value(value.params);
+    update_subfields_from_value(value.fields);
+    handle_store_change(value.initvalue.default, default_initvalue_editor);
+    handle_store_change(value.initvalue.override, override_initvalue_editor);
+  }
+}
+const field_types = Object.keys(fields).map((key) => ({
+  label: key,
+  value: key
+}));
+function add_condition() {
+  if (!value.conditions) {
+    value.conditions = [];
+  }
+  value.conditions = [...value.conditions, ""];
+}
+function move_condition_up(index) {
+  if (index > 0 && value.conditions) {
+    const temp = value.conditions[index];
+    value.conditions[index] = value.conditions[index - 1];
+    value.conditions[index - 1] = temp;
+    value.conditions = [...value.conditions];
+  }
+}
+function move_condition_down(index) {
+  if (value.conditions && index < value.conditions.length - 1) {
+    const temp = value.conditions[index];
+    value.conditions[index] = value.conditions[index + 1];
+    value.conditions[index + 1] = temp;
+    value.conditions = [...value.conditions];
+  }
+}
+function remove_condition(index) {
+  if (value.conditions) {
+    value.conditions = value.conditions.filter((_, i) => i !== index);
+  }
+}
+function add_validation() {
+  if (!value.validations) {
+    value.validations = [];
+  }
+  value.validations = [...value.validations, { validationtype: "required", invalid_message: "" }];
+}
+function move_validation_up(index) {
+  if (index > 0 && value.validations) {
+    const temp = value.validations[index];
+    value.validations[index] = value.validations[index - 1];
+    value.validations[index - 1] = temp;
+    value.validations = [...value.validations];
+  }
+}
+function move_validation_down(index) {
+  if (value.validations && index < value.validations.length - 1) {
+    const temp = value.validations[index];
+    value.validations[index] = value.validations[index + 1];
+    value.validations[index + 1] = temp;
+    value.validations = [...value.validations];
+  }
+}
+function remove_validation(index) {
+  if (value.validations) {
+    value.validations = value.validations.filter((_, i) => i !== index);
+  }
+}
+function handle_validation_selected(validationtype, index) {
+  if (value.validations) {
+    let current_validation;
+    let prev_validation = value.validations[index];
+    if (validationtype === "required") {
+      current_validation = {
+        validationtype: "required",
+        invalid_message: prev_validation.invalid_message
+      };
+    } else if (validationtype === "regex") {
+      current_validation = {
+        validationtype: "regex",
+        invalid_message: prev_validation.invalid_message,
+        params: { regex: prev_validation.params?.regex ?? "" }
+      };
+    } else {
+      current_validation = {
+        validationtype: "jsonata",
+        invalid_message: prev_validation.invalid_message,
+        params: { jsonata: prev_validation.params?.jsonata ?? "" }
+      };
+    }
+    value.validations[index] = current_validation;
+  }
+}
+function handle_validation_change(event, index) {
+  handle_validation_selected(
+    event.currentTarget.value,
+    index
+  );
+}
+const params_store = writable({});
+$: update_params($params_store);
+function update_params(new_params) {
+  const cloned_new_params = cloneDeep(new_params);
+  if (!isEqual(value.params, cloned_new_params) && !isEmpty(cloned_new_params)) {
+    value.params = cloned_new_params;
+    update_fieldStore(value);
+  }
+}
+function update_params_from_value(new_value) {
+  if (!isEqual(new_value, $params_store)) {
+    params_store.set(cloneDeep(new_value) || {});
+  }
+}
+function select_field_type(newValue) {
+  value.fieldtype = newValue;
+  field_param_spec = cloneDeep(field_params_spec_lookup[value.fieldtype ?? "unknown"]);
+}
+function handle_fieldtype_select(event) {
+  select_field_type(event.detail.value);
+}
+let field_param_spec = cloneDeep(field_params_spec_lookup[value.fieldtype ?? "unknown"]);
+const subfields_store = writable({});
+$: update_subfields($subfields_store.fields);
+function update_subfields(new_subfields) {
+  const cloned_new_subfields = cloneDeep(new_subfields);
+  if (!isEqual(value.fields, cloned_new_subfields) && !isEmpty(cloned_new_subfields)) {
+    value.fields = cloned_new_subfields;
+    update_fieldStore(value);
+  }
+}
+function update_subfields_from_value(new_value) {
+  if (!isEqual(new_value, $subfields_store)) {
+    subfields_store.set({ fields: cloneDeep(new_value) || {} });
+  }
+}
+</script>
+
+<div class="field-builder-field">
+  <FieldLabel {fieldStore} />
+  <!-- fieldtype picker -->
+  <Autocomplete
+    id={$fieldStore.id}
+    options={field_types}
+    value={value.fieldtype}
+    placeholder="Select a fieldtype"
+    emptyMessage="No fieldtype found."
+    invalid={$fieldStore.validation_result?.type === "error"}
+    ariaDescribedby="message-{$fieldStore.id}"
+    on:select={handle_fieldtype_select}
+  />
+  <!-- basic props -->
+  <CollapsibleSection title="Basic Info" open>
+    <div class="field-builder-property">
+      <label class={classNames("field-builder-label", $styles.label)} for="{$fieldStore.id}-title"
+        >Title</label
+      >
+      <input
+        class={classNames("field-builder-input", $styles.input)}
+        id="{$fieldStore.id}-title"
+        placeholder="Optional custom title for the field"
+        bind:value={value.title}
+      />
+    </div>
+    <div class="field-builder-checkbox">
+      <input
+        id="{$fieldStore.id}-without-value-details"
+        class={$styles.choice}
+        type="checkbox"
+        bind:checked={value.without_value_details}
+      />
+      <label
+        class={classNames("field-builder-label", $styles.label)}
+        for="{$fieldStore.id}-without-value-details">Without Value Details</label
+      >
+    </div>
+    <div class="field-builder-checkbox">
+      <input
+        id="{$fieldStore.id}-hide-label"
+        class={$styles.choice}
+        type="checkbox"
+        bind:checked={value.hide_label}
+      />
+      <label
+        class={classNames("field-builder-label", $styles.label)}
+        for="{$fieldStore.id}-hide-label">Hide Label</label
+      >
+    </div>
+    <div class="field-builder-property">
+      <label class={classNames("field-builder-label", $styles.label)} for="{$fieldStore.id}-help"
+        >Help</label
+      >
+      <textarea
+        class={classNames("field-builder-input", "field-builder-textarea", $styles.input)}
+        id="{$fieldStore.id}-help"
+        placeholder="Optional help text for the field"
+        bind:value={value.help}
+      />
+    </div>
+  </CollapsibleSection>
+  <!-- subfields -->
+  {#if value.fieldtype === "section" || value.fieldtype === "multistep"}
+    <CollapsibleSection title="Fields" open>
+      <Form
+        form={subfields_store}
+        initial_form={{
+          spec: {
+            fields: {
+              fields: {
+                hide_label: true,
+                fieldtype: "objectbuilder",
+                help: "Fields within this section/multistep",
+                params: {
+                  value_field_spec: {
+                    fieldtype: "fieldbuilder",
+                    initvalue: {
+                      has_default: true,
+                      default: {
+                        fieldtype: "text",
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          },
+        }}
+      />
+    </CollapsibleSection>
+  {/if}
+
+  <!-- params -->
+  <CollapsibleSection title="Params">
+    {#if field_param_spec}
+      {#key value.fieldtype}
+        <Form
+          initial_form={field_param_spec}
+          form={params_store}
+          attachments={$fieldStore.attachmentsStore}
+        />
+      {/key}
+    {:else}
+      <span class="field-builder-status">No params available for this fieldtype.</span>
+    {/if}
+  </CollapsibleSection>
+  <!-- details -->
+  <CollapsibleSection title="Details">
+    <div class="field-builder-property">
+      <label class={classNames("field-builder-label", $styles.label)} for="{$fieldStore.id}-keyname"
+        >Keyname</label
+      >
+      <input
+        class={classNames("field-builder-input", $styles.input)}
+        id="{$fieldStore.id}-keyname"
+        placeholder="Custom key underwhich to store the value"
+        bind:value={value.details.keyname}
+      />
+    </div>
+    <div class="field-builder-property">
+      <label
+        class={classNames("field-builder-label", $styles.label)}
+        for="{$fieldStore.id}-datapath">Data Path</label
+      >
+      <input
+        class={classNames("field-builder-input", $styles.input)}
+        id="{$fieldStore.id}-datapath"
+        placeholder="Optional custom data path for the field"
+        bind:value={value.details.datapath}
+      />
+    </div>
+  </CollapsibleSection>
+  <!-- initial value -->
+  <CollapsibleSection title="Initial Value">
+    <div class="field-builder-property">
+      <div class="field-builder-checkbox">
+        <input
+          id="{$fieldStore.id}-has-default"
+          class={$styles.choice}
+          type="checkbox"
+          bind:checked={value.initvalue.has_default}
+        />
+        <label
+          class={classNames("field-builder-label", $styles.label)}
+          for="{$fieldStore.id}-has-default">Has Default</label
+        >
+      </div>
+      {#await import("svelte-jsoneditor") then JSONEditorModule}
+        <JSONEditorModule.JSONEditor
+          bind:this={default_initvalue_editor}
+          onChange={(content) =>
+            handle_editor_change_setter(content, (new_val) => (value.initvalue.default = new_val))}
+        />
+      {/await}
+    </div>
+    <div class="field-builder-property">
+      <div class="field-builder-checkbox">
+        <input
+          id="{$fieldStore.id}-has-override"
+          class={$styles.choice}
+          type="checkbox"
+          bind:checked={value.initvalue.has_override}
+        />
+        <label
+          class={classNames("field-builder-label", $styles.label)}
+          for="{$fieldStore.id}-has-override">Has Override</label
+        >
+      </div>
+      {#await import("svelte-jsoneditor") then JSONEditorModule}
+        <JSONEditorModule.JSONEditor
+          bind:this={override_initvalue_editor}
+          onChange={(content) =>
+            handle_editor_change_setter(content, (new_val) => (value.initvalue.override = new_val))}
+        />
+      {/await}
+    </div>
+  </CollapsibleSection>
+  <!-- conditions -->
+  <CollapsibleSection title="Conditions">
+    <button
+      type="button"
+      class={classNames("field-builder-add", $styles.button)}
+      data-variant="primary"
+      on:click={add_condition}>Add condition</button
+    >
+
+    {#if value.conditions && value.conditions.length > 0}
+      {#each value.conditions as condition, index}
+        <div class="field-builder-item">
+          <!-- up and down sort buttons -->
+          <FieldBuilderReorder
+            item="condition"
+            first={index === 0}
+            last={index === value.conditions.length - 1}
+            moveUp={() => move_condition_up(index)}
+            moveDown={() => move_condition_down(index)}
+          />
+          <input
+            class={classNames("field-builder-input", $styles.input)}
+            placeholder="JSONata condition"
+            bind:value={value.conditions[index]}
+          />
+          <button
+            type="button"
+            class={classNames("field-builder-remove", $styles.button)}
+            data-variant="destructive"
+            data-size="icon"
+            on:click={() => remove_condition(index)}
+            aria-label="Remove condition">×</button
+          >
+        </div>
+      {/each}
+    {/if}
+  </CollapsibleSection>
+  <!-- validations -->
+  <CollapsibleSection title="Validations">
+    <button
+      type="button"
+      class={classNames("field-builder-add", $styles.button)}
+      data-variant="primary"
+      on:click={add_validation}>Add validation</button
+    >
+
+    {#if value.validations && value.validations.length > 0}
+      {#each value.validations as validation, index}
+        <div class="field-builder-item">
+          <!-- up and down sort buttons -->
+          <FieldBuilderReorder
+            item="validation"
+            first={index === 0}
+            last={index === value.validations.length - 1}
+            moveUp={() => move_validation_up(index)}
+            moveDown={() => move_validation_down(index)}
+          />
+          <div class="field-builder-validation-fields">
+            <select
+              class={classNames("field-builder-input", $styles.input)}
+              aria-label="Validation type"
+              value={value.validations[index].validationtype}
+              on:change={(event) => handle_validation_change(event, index)}
+            >
+              {#each validation_types as vt}<option value={vt}>{vt}</option>{/each}
+            </select>
+            <input
+              class={classNames("field-builder-input", $styles.input)}
+              placeholder="Invalid Message"
+              bind:value={value.validations[index].invalid_message}
+            />
+            {#if value.validations[index].validationtype === "regex"}
+              <input
+                class={classNames("field-builder-input", $styles.input)}
+                placeholder="Regex Pattern"
+                bind:value={value.validations[index].params.regex}
+              />
+            {/if}
+            {#if value.validations[index].validationtype === "jsonata"}
+              <input
+                class={classNames("field-builder-input", $styles.input)}
+                placeholder="JSONata Expression"
+                bind:value={value.validations[index].params.jsonata}
+              />
+            {/if}
+          </div>
+          <button
+            type="button"
+            class={classNames("field-builder-remove", $styles.button)}
+            data-variant="destructive"
+            data-size="icon"
+            on:click={() => remove_validation(index)}
+            aria-label="Remove validation">×</button
+          >
+        </div>
+      {/each}
+    {/if}
+  </CollapsibleSection>
+  <FieldMessage {fieldStore} />
+</div>
+
+<style>
+  .field-builder-field,
+  :where(.field-builder-input),
+  :where(.field-builder-textarea),
+  .field-builder-validation-fields {
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+  }
+
+  .field-builder-field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .field-builder-property,
+  .field-builder-validation-fields {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .field-builder-checkbox,
+  .field-builder-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-width: 0;
+  }
+
+  .field-builder-item > .field-builder-input,
+  .field-builder-validation-fields {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .field-builder-remove {
+    flex: none;
+  }
+</style>