@engagebay/engagebay-form-module 1.0.3 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@engagebay/engagebay-form-module",
-    "version": "1.0.3",
+    "version": "1.0.6",
     "description": "Provide base form components to reacho",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1"

package/src/form/FormFieldUtils.ts

@@ -28,6 +28,7 @@ import TimeField from "./formfields/TimeField";
 import Typeahead from "./formfields/Typeahead";
 import TypeaheadMultiSelect from "./formfields/TypeaheadMultiSelect";
 import UrlField from "./formfields/UrlField";
+import Typeahead2 from "./formfields/Typeahead2";
 import {
     FieldOptionsSchema,
     FormFieldComponentPropSchema,
@@ -136,6 +137,9 @@ const formFieldComponents: FormComponentSchema = {
     [FormFieldType[FormFieldType.TYPEAHEAD]]: {
         component: Typeahead,
     },
+    [FormFieldType[FormFieldType.TYPEAHEAD_2]]: {
+        component: Typeahead2,
+    },
     [FormFieldType[FormFieldType.TYPEAHEAD_MULTI_SELECT]]: {
         component: TypeaheadMultiSelect,
     },

package/src/form/formfields/DatePickerField.tsx

@@ -35,14 +35,28 @@ const DatePicker: React.FC<FormFieldComponentPropSchema> = (
   let hookProps = formContext.register(props.fieldConfig.name, registerOptions);
 
   function getInput() {
+    const rawStart =
+      initialDate?.startDate ||
+      props.fieldConfig.defaultValue ||
+      "";
+    const rawEnd =
+      initialDate?.endDate ||
+      props.fieldConfig.defaultValue ||
+      "";
+    const toDate = (v: string | Date | null | undefined): Date | null => {
+      if (v == null || v === "") return null;
+      return moment(v).isValid() ? moment(v).toDate() : null;
+    };
+    const value = {
+      startDate: toDate(rawStart),
+      endDate: toDate(rawEnd),
+    };
+    // Calendar opens on selected date's month/year (must be a Date instance)
+    const startFrom = value.startDate instanceof Date ? value.startDate : new Date();
     return (
       <Datepicker
-        value={
-          initialDate || {
-            startDate: props.fieldConfig.defaultValue,
-            endDate: props.fieldConfig.defaultValue,
-          }
-        }
+        value={value}
+        startFrom={startFrom}
         {...hookProps}
         placeholder={
           props.fieldConfig.placeholder
@@ -53,13 +67,7 @@ const DatePicker: React.FC<FormFieldComponentPropSchema> = (
         popoverDirection="down"
         useRange={false}
         inputName={props.fieldConfig.name}
-        key={
-          props.fieldConfig.name +
-          "_" +
-          initialDate.startDate +
-          "_" +
-          initialDate.endDate
-        }
+        key={props.fieldConfig.name + "_" + rawStart + "_" + rawEnd}
         containerClassName={"relative"}
         minDate={props.fieldConfig.minDate}
         maxDate={props.fieldConfig.maxDate}

package/src/form/formfields/NumberField.tsx

@@ -1,61 +1,66 @@
-import React, {useContext} from "react";
-import {RegisterOptions} from "react-hook-form";
-import {FormContext} from "../context/FormContext";
-import {FormFieldComponentPropSchema} from "../schema/FormFieldSchema";
-import {handleChange, registerFormField} from "../util";
+import React, { useContext } from "react";
+import { RegisterOptions } from "react-hook-form";
+import { FormContext } from "../context/FormContext";
+import { FormFieldComponentPropSchema } from "../schema/FormFieldSchema";
+import { handleChange, registerFormField } from "../util";
 import RenderFormField from "../util/RenderFormField";
 
 const NumberField: React.FC<FormFieldComponentPropSchema> = (
-    props: FormFieldComponentPropSchema
+  props: FormFieldComponentPropSchema,
 ) => {
-    const formContext = useContext(FormContext);
+  const formContext = useContext(FormContext);
 
-    let registerOptions: RegisterOptions = registerFormField(props.fieldConfig);
+  let registerOptions: RegisterOptions = registerFormField(props.fieldConfig);
 
-    let hookProps = formContext.register(props.fieldConfig.name, registerOptions);
-
-    function getInput() {
-        return (
-            <input
-                type="number"
-                {...hookProps}
-                placeholder={props.fieldConfig?.placeholder}
-                readOnly={props.fieldConfig?.readOnly}
-                disabled={props.fieldConfig?.disabled}
-                autoComplete={props.fieldConfig?.autoComplete}
-                min={props.fieldConfig?.min}
-                max={props.fieldConfig?.max}
-                step={props.fieldConfig.decimalAllowed ? 0.01 : 1}
-                defaultValue={props.fieldConfig.defaultValue as string}
-                className={`form-input ${
-                    props.fieldConfig.customClassNames?.fieldClassName || "flex-1 !w-60"
-                }`}
-                onKeyDown={(e) => {
-                    props.fieldConfig.onKeyDown && props.fieldConfig.onKeyDown(e);
-                }}
-                onChange={(e) => {
-                    let value = e.target.value;
-                    let numericValue = parseFloat(value);
-                    if (props.fieldConfig.max !== undefined && numericValue > props.fieldConfig.max) {
-                        numericValue = props.fieldConfig.max;
-                    }
-                    if (props.fieldConfig.min !== undefined && numericValue < props.fieldConfig.min) {
-                        numericValue = props.fieldConfig.min;
-                    }
-                    value = numericValue.toString();
-                    handleChange(
-                        value,
-                        formContext,
-                        props.fieldConfig,
-                        props.onChange
-                    );
-                }}
-            />
-        );
-    }
+  let hookProps = formContext.register(props.fieldConfig.name, registerOptions);
 
+  function getInput() {
     return (
-        <RenderFormField fieldConfig={props.fieldConfig} getInput={getInput}/>
+      <input
+        type="number"
+        {...hookProps}
+        placeholder={props.fieldConfig?.placeholder}
+        readOnly={props.fieldConfig?.readOnly}
+        disabled={props.fieldConfig?.disabled}
+        autoComplete={props.fieldConfig?.autoComplete}
+        min={props.fieldConfig?.min}
+        max={props.fieldConfig?.max}
+        step={props.fieldConfig.decimalAllowed ? 0.01 : 1}
+        defaultValue={props.fieldConfig.defaultValue as string}
+        className={`form-input ${
+          props.fieldConfig.customClassNames?.fieldClassName || "flex-1 !w-60"
+        }`}
+        onKeyDown={(e) => {
+          props.fieldConfig.onKeyDown && props.fieldConfig.onKeyDown(e);
+        }}
+        onChange={(e) => {
+          let value = e.target.value;
+          let numericValue = parseFloat(value);
+          if (
+            props.fieldConfig.max !== undefined &&
+            numericValue > props.fieldConfig.max
+          ) {
+            numericValue = props.fieldConfig.max;
+          }
+          if (
+            props.fieldConfig.min !== undefined &&
+            numericValue < props.fieldConfig.min
+          ) {
+            numericValue = props.fieldConfig.min;
+          }
+          handleChange(
+            numericValue,
+            formContext,
+            props.fieldConfig,
+            props.onChange,
+          );
+        }}
+      />
     );
+  }
+
+  return (
+    <RenderFormField fieldConfig={props.fieldConfig} getInput={getInput} />
+  );
 };
 export default NumberField;

package/src/form/formfields/Typeahead2.tsx

@@ -0,0 +1,284 @@
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+
+import { Listbox, ListboxButton } from "@headlessui/react";
+import { RegisterOptions } from "react-hook-form";
+
+import { FormContext } from "../context/FormContext";
+import { getListOption, getListOptions } from "../FormFieldUtils";
+import {
+  FieldOptionsSchema,
+  FormFieldComponentPropSchema,
+  FormFieldType,
+} from "../schema/FormFieldSchema";
+import { handleChange, registerFormField } from "../util";
+import RenderFormField from "../util/RenderFormField";
+import RenderListOptions, {
+  renderListBoxValue,
+} from "../util/RenderListOptions";
+import axios from "axios";
+import { getAxiosInstance } from "../../api";
+
+const Typeahead2: React.FC<FormFieldComponentPropSchema> = (
+  props: FormFieldComponentPropSchema,
+) => {
+  const dynamicSelectRef = useRef<HTMLUListElement>(null);
+  const abortControllerRef = useRef<AbortController | null>(null);
+  const formContext = useContext(FormContext);
+  let registerOptions: RegisterOptions = registerFormField(props.fieldConfig);
+  let hookProps = formContext.register(props.fieldConfig.name, registerOptions);
+  const [listOptions, setListOptions] = useState<FieldOptionsSchema[]>([]);
+  const [selectedValues, setSelectedValues] = useState<FieldOptionsSchema[]>(
+    [],
+  );
+  const [loading, setLoading] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (
+      !formContext.getValues(props.fieldConfig.name) &&
+      props.fieldConfig.defaultValue
+    ) {
+      formContext.setValue(
+        props.fieldConfig.name,
+        props.fieldConfig.defaultValue,
+      );
+    }
+    let values: any | any[] | undefined =
+      formContext.getValues(props.fieldConfig.name) ||
+      props.fieldConfig.defaultValue;
+
+    if (values && selectedValues.length < 1) {
+      if (props.fieldConfig.fetchSavedDataUrl) {
+        fetchValue(values);
+      } else {
+        setSelectedValues(
+          Array.isArray(values)
+            ? values.map((val: any) => ({ label: val, value: val }))
+            : [values],
+        );
+      }
+    }
+  }, []);
+
+
+
+  const fetchData = useMemo(() => {
+    let timeoutId: ReturnType<typeof setTimeout>;
+
+    return (_query: string | undefined) => {
+      // Clear the previous timer
+      if (timeoutId) clearTimeout(timeoutId);
+
+      // Set a new timer
+      timeoutId = setTimeout(async () => {
+        // 1. Cancel the previous request if it's still pending
+        if (abortControllerRef.current) {
+          abortControllerRef.current.abort();
+        }
+
+        // 2. Create a new controller for the current request
+        const controller = new AbortController();
+        abortControllerRef.current = controller;
+        const minLength = props.fieldConfig?.allowedMinQueryLength ?? 3;
+
+        if (!_query || _query.length < minLength) {
+          setListOptions([]);
+          setLoading(false);
+          return;
+        }
+        setLoading(true);
+        try {
+          if (!props.fieldConfig.fetchUrl) return;
+
+          let url = props.fieldConfig.fetchUrl;
+
+          url = url.includes("?") ? url + "&q=" + _query : url + "?q=" + _query;
+
+          const axiosInstance = getAxiosInstance(
+            formContext.axiosInstance,
+            props.fieldConfig,
+          );
+          const response = await axiosInstance.get(url);
+
+          if (controller === abortControllerRef.current) {
+            if (response?.data) {
+              const data: FieldOptionsSchema[] = getListOptions(
+                response?.data,
+                props.fieldConfig.optionsConfig,
+              );
+              setListOptions([...data]);
+
+              if (props.fieldConfig.fetchCallback) {
+                props.fieldConfig.fetchCallback(response);
+              }
+            }
+          }
+        } catch (err) {
+          console.error("Fetch error:", err);
+        } finally {
+          // Only stop loading if this was the "active" request
+          if (controller === abortControllerRef.current) {
+            setLoading(false);
+          }
+        }
+      }, 250);
+    };
+  }, []);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      abortControllerRef.current?.abort();
+    };
+  }, []);
+
+  const fetchValue = async (value: string | any | any[]) => {
+    try {
+      if (
+        props.fieldConfig.ignoreFetchValue ||
+        !props.fieldConfig.fetchSavedDataUrl
+      ) {
+        return;
+      }
+
+      let url = props.fieldConfig.fetchSavedDataUrl;
+
+      // url = url.includes("?")
+      //   ? url + "&values=" + value
+      //   : url + "?values=" + value;
+
+      let response = await (props.fieldConfig.disableHeaderInFetch
+        ? axios.post(url, Array.isArray(value) ? value : [value])
+        : formContext.axiosInstance?.post(
+          url,
+          Array.isArray(value) ? value : [value],
+        ));
+      if (response?.data) {
+        const data: FieldOptionsSchema[] = getListOptions(
+          response?.data,
+          props.fieldConfig.optionsConfig,
+        );
+        let values: any[] = formContext.getValues(props.fieldConfig.name) || [];
+        setSelectedValues(
+          [
+            ...data,
+            props.fieldConfig.dropdownFieldConfig?.isSuggestionBox &&
+              values &&
+              Array.isArray(values)
+              ? values
+                .filter(
+                  (value) =>
+                    data.some((d) => d.value !== value) || data.length == 0,
+                )
+                .map((val) => ({ label: val, value: val }))
+              : [],
+          ].flat(),
+        );
+      }
+    } catch (err) { }
+  };
+
+  const updateListOptions = (data: any) => {
+    const resData: FieldOptionsSchema = getListOption(
+      data,
+      props.fieldConfig.optionsConfig,
+    );
+    setListOptions([]);
+    setSelectedValues((prev) =>
+      props.fieldConfig.isMultiple ? [...prev, resData] : [resData],
+    );
+    let result = formContext.getValues(props.fieldConfig.name) || [];
+    result = !props.fieldConfig.isMultiple
+      ? resData.value
+      : result.includes(resData.value)
+        ? [...result.filter((v: string) => v != resData.value), resData.value]
+        : [...result, resData.value];
+    formContext.setValue(props.fieldConfig.name, result);
+  };
+
+  const getInput = () => {
+    return (
+      <Listbox
+        as={"div"}
+        {...hookProps}
+        value={
+          props.fieldConfig.isMultiple
+            ? formContext.getValues(props.fieldConfig.name)
+              ? formContext.getValues(props.fieldConfig.name)
+              : []
+            : formContext.getValues(props.fieldConfig.name)
+        }
+        name={props.fieldConfig.name}
+        defaultValue={props.fieldConfig.defaultValue}
+        key={props.fieldConfig.name}
+        className={"relative form-listbox flex-1 overflow-hidden"}
+        onChange={(selectedOptions) => {
+          let currentValue = formContext.getValues(props.fieldConfig.name);
+          const newValue =
+            currentValue === selectedOptions ? null : selectedOptions;
+
+          if (props.fieldConfig.isMultiple) {
+            currentValue = listOptions.filter((op) =>
+              selectedOptions.includes(op.value),
+            );
+            setSelectedValues((prev) => [...prev, ...currentValue]);
+          } else {
+            const selected = listOptions.find((o) => o.value == newValue);
+            selected && setSelectedValues([selected]);
+          }
+          setListOptions([]);
+          handleChange(
+            newValue,
+            formContext,
+            props.fieldConfig,
+            props.onChange,
+          );
+        }}
+        multiple={props.fieldConfig.isMultiple}
+      >
+        <ListboxButton
+          className={
+            props.fieldConfig.customClassNames?.fieldClassName
+              ? "form-listbox-select " +
+              props.fieldConfig.customClassNames?.fieldClassName
+              : "form-listbox-select"
+          }
+        >
+          {renderListBoxValue(
+            formContext,
+            props.fieldConfig,
+            [...selectedValues, ...listOptions],
+            props.onChange,
+          )}
+        </ListboxButton>
+        <RenderListOptions
+          formContext={formContext}
+          onChange={props.onChange}
+          formField={FormFieldType.TYPEAHEAD_2}
+          ref={dynamicSelectRef}
+          fieldConfig={props.fieldConfig}
+          listOptions={listOptions}
+          setListOptions={setListOptions}
+          loading={loading}
+          setLoading={setLoading}
+          createCallback={(data) => updateListOptions(data)}
+          queryCallback={(query) => fetchData(query)}
+        />
+      </Listbox>
+    );
+  };
+  if (props.fieldConfig.hideWhenNoResults && listOptions.length == 0) {
+    return <></>;
+  }
+
+  return (
+    <RenderFormField fieldConfig={props.fieldConfig} getInput={getInput} />
+  );
+};
+export default Typeahead2;

package/src/form/schema/FormFieldSchema.ts

@@ -37,6 +37,7 @@ export enum FormFieldType {
     DYNAMIC_MULTI_SELECT = "DYNAMIC_MULTI_SELECT",
 
     TYPEAHEAD = "TYPEAHEAD",
+    TYPEAHEAD_2 = "TYPEAHEAD_2",
     TYPEAHEAD_MULTI_SELECT = "TYPEAHEAD_MULTI_SELECT",
     PHONE_NUMBER_INPUT = "PHONE_NUMBER_INPUT",
     SWITCH = "SWITCH",
@@ -105,6 +106,7 @@ export type FormFieldSchema = {
     max?: number;
     min?: number;
     rows?: number;
+    allowedMinQueryLength?: number;
     defaultValue?: string | string[] | {} | boolean;
     options?: FieldOptionsSchema[];
     minDate?: Date | null | undefined;
@@ -127,9 +129,11 @@ export type FormFieldSchema = {
     decimalAllowed?: boolean;
     errorMessage?: string;
     submitOnChange?: boolean;
+    isMultiple?: boolean; 
     formFieldPattern?: FormFieldPatternsImpl[];
     fetchUrl?: string;
     postUrl?: string;
+    fetchSavedDataUrl?: string;
     fileAccept?: string;
     icon?: ReactNode;
     outputFormat?: OutputFormatType;

package/src/form/util/RenderListOptions.tsx

@@ -11,6 +11,7 @@ import { handleChange } from ".";
 import { LoaderWithText } from "../../util/LoaderWithText";
 import SVGIcon from "../../util/svg/SVGIcon";
 import { FormContextType } from "../context/FormContext";
+import Tippy from "@tippyjs/react";
 import {
   FieldOptionsSchema,
   FormFieldSchema,
@@ -132,7 +133,9 @@ const RenderListOptions = forwardRef<HTMLUListElement, RenderListOptionsProps>(
     }, [filteredList]);
 
     useEffect(() => {
-      handleQueryCallback();
+      if (formField == FormFieldType.TYPEAHEAD_2)
+        queryCallback && queryCallback(query);
+      else handleQueryCallback();
     }, [query]);
 
     let enableCreateFlag =
@@ -142,6 +145,7 @@ const RenderListOptions = forwardRef<HTMLUListElement, RenderListOptionsProps>(
 
     let validTypeaheadFields = [
       FormFieldType.TYPEAHEAD,
+      FormFieldType.TYPEAHEAD_2,
       FormFieldType.TYPEAHEAD_MULTI_SELECT,
     ];
     let isTypeahead: boolean = validTypeaheadFields.indexOf(formField) > -1;
@@ -216,7 +220,9 @@ const RenderListOptions = forwardRef<HTMLUListElement, RenderListOptionsProps>(
     };
 
     const renderList = useMemo(() => {
-      if (filteredList.length === 0 && (!enableCreateFlag || query === ""))
+      if (filteredList.length === 0 && (!enableCreateFlag || query === "")) {
+        if (formField == FormFieldType.TYPEAHEAD_2 && query === "")
+          return <></>;
         return (
           <div className="form-listbox-option text-center">
             <span className="empty-content text-gray-600 font-normal">
@@ -224,6 +230,7 @@ const RenderListOptions = forwardRef<HTMLUListElement, RenderListOptionsProps>(
             </span>
           </div>
         );
+      }
 
       return (
         <>