@engagebay/engagebay-form-module 1.0.0-beta.0

package/src/form/formfields/ComboSelect.tsx

@@ -0,0 +1,278 @@
+// import {Combobox, Transition} from '@headlessui/react';
+// import {CheckIcon, ChevronDownIcon} from '@heroicons/react/20/solid';
+// import React, {Fragment, useContext, useEffect, useState} from 'react';
+// import {RegisterOptions} from 'react-hook-form';
+// import {reachoAPI} from '../../../../api';
+// import {getListOptions} from '../FormFieldUtils';
+// import {FormContext} from '../context/FormContext';
+// import {
+//     FieldAlignType,
+//     FieldOptionsSchema,
+//     FormFieldComponentPropSchema,
+//     FormFieldPatternsImpl
+// } from '../schema/FormFieldSchema';
+// import ErrorContextHandler from './ErrorContextHandler';
+// import {PlusIcon} from '@heroicons/react/16/solid';
+// import {usePopper} from 'react-popper';
+// import {CancelTokenSource} from 'axios';
+
+import React from "react";
+import { FormFieldComponentPropSchema } from "../schema/FormFieldSchema";
+
+const ComboSelect: React.FC<FormFieldComponentPropSchema> = (
+  props: FormFieldComponentPropSchema
+) => {
+  // const formContext = useContext(FormContext);
+
+  // const [selectedOption, setSelectedOption] = useState<string>(formContext.getValues(props.fieldConfig.name) ? formContext.getValues(props.fieldConfig.name) : '');
+  // const [listOptions, setListOptions] = useState<FieldOptionsSchema[]>([]);
+  // const [loading, setLoading] = useState<boolean>(false);
+  // const [query, setQuery] = useState<string>('');
+  // const [cancelToken, setCancelToken] = useState<CancelTokenSource | undefined>(undefined);
+
+  // let [referenceElement, setReferenceElement] = useState<any>();
+  // let [popperElement, setPopperElement] = useState<any>();
+  // let {styles, attributes} = usePopper(referenceElement, popperElement, {
+  //     placement: 'auto-start',
+  // });
+
+  // if (props.fieldConfig.fetchUrl) {
+  //     useEffect(() => {
+  //         fetchData();
+  //     }, []);
+  // } else if (props.fieldConfig.options && props.fieldConfig.options?.length > 0) {
+  //     setListOptions(props.fieldConfig.options);
+  // }
+
+  // const fetchData = async () => {
+  //     try {
+  //         if (!props.fieldConfig.fetchUrl) return;
+
+  //         let response = await reachoAPI.get(props.fieldConfig.fetchUrl);
+  //         if (response.data) {
+  //             const data: FieldOptionsSchema[] = getListOptions(response.data, props.fieldConfig.optionsConfig);
+  //             setListOptions([...data]);
+  //         }
+  //     } catch (err) {
+  //     } finally {
+  //         setLoading(false);
+  //     }
+  // };
+
+  // const createItem = async () => {
+  //     setLoading(true);
+  //     try {
+  //         if (!props.fieldConfig.postUrl) {
+  //             const data: FieldOptionsSchema = {
+  //                 label: query,
+  //                 value: query,
+  //             };
+  //             setListOptions([...listOptions, data]);
+  //             handleSelect(query);
+  //             return;
+  //         }
+  //         // const data = {
+  //         //     value: query,
+  //         // };
+
+  //         // let url: string = props.fieldConfig.postUrl;
+
+  //         // let response = await reachoAPI.post(url, data);
+  //         // if (response.data) {
+  //         //     const newItem: FieldOptionsSchema = props.fieldConfig.optionsConfig
+  //         //         ? {
+  //         //               label: response.data[props.fieldConfig.optionsConfig.label],
+  //         //               value: response.data[props.fieldConfig.optionsConfig.value],
+  //         //           }
+  //         //         : {
+  //         //               value: response.data.id,
+  //         //               label: response.data.value,
+  //         //           };
+
+  //         //     setListOptions([...listOptions, newItem]);
+
+  //         //     handleSelect(newItem.value);
+  //         // }
+  //     } catch (e: any) {
+  //         console.error('Error in Creating the object ', e);
+  //     } finally {
+  //         setQuery('');
+  //         setLoading(false);
+  //     }
+  // };
+
+  // const getSelectedOption = () => {
+  //     let value: string | undefined = formContext.getValues(props.fieldConfig.name) + '';
+  //     if (value == '' || value === undefined) {
+  //         value = props.fieldConfig.defaultValue ? props.fieldConfig.defaultValue : undefined;
+  //     }
+  //     return listOptions.find((option) => option.value == value)?.label as string;
+  // };
+  // const handleSelect = (option: string) => {
+  //     formContext.setValue(props.fieldConfig.name, option, {
+  //         shouldValidate: true,
+  //         shouldDirty: formContext.getFieldState(props.fieldConfig.name).isDirty,
+  //         shouldTouch: formContext.getFieldState(props.fieldConfig.name).isTouched,
+  //     });
+
+  //     if (props.onChange) props.onChange(option);
+  // };
+
+  // let registerOptions: RegisterOptions = {required: props.fieldConfig.required ? FormFieldPatternsImpl.REQUIRED.getMessage() : false};
+  // if (props.fieldConfig?.formFieldPattern) {
+  //     registerOptions.pattern = props.fieldConfig?.formFieldPattern[0].getPattern();
+  // }
+  // formContext.register(props.fieldConfig.name, registerOptions);
+
+  // const filteredPeople = query && query != '' ? listOptions.filter((item) => item.label.toLowerCase().replace(/\s+/g, '').includes(query.toLowerCase().replace(/\s+/g, ''))) : listOptions;
+
+  // function getInput() {
+  //     return (
+  //         <Combobox
+  //             value={formContext.getValues(props.fieldConfig.name) == '' ? undefined : formContext.getValues(props.fieldConfig.name)}
+  //             name={props.fieldConfig.name}
+  //             defaultValue={props.fieldConfig.defaultValue}
+  //         >
+  //             <div className="relative form-combobox flex-1" ref={setReferenceElement}>
+  //                 <Combobox.Button
+  //                     className={props.fieldConfig.customClassName ? 'form-combobox-select ' + props.fieldConfig.customClassName : 'form-combobox-select w-full justify-between'}>
+  //                     <Combobox.Input className="form-input" displayValue={() => getSelectedOption()}
+  //                                     onChange={(event) => setQuery(event.target.value)}/>
+  //                     <ChevronDownIcon className="h-5 w-5 text-gray-400 form-combobox-svg" aria-hidden="true"/>
+  //                 </Combobox.Button>
+  //                 <Transition as={Fragment} leave="transition ease-in duration-100" leaveFrom="opacity-100"
+  //                             leaveTo="opacity-0" afterLeave={() => setQuery('')}>
+  //                     <Combobox.Options ref={setPopperElement} style={styles.popper} {...attributes.popper}
+  //                                       className="form-combobox-options">
+  //                         {filteredPeople.length === 0 && query !== ''
+  //                             ? props.fieldConfig.enableCreateOption && (
+  //                             <Combobox.Option
+  //                                 key={'create_new'}
+  //                                 className={({active}) => `form-combobox-option ${active ? 'bg-[#f6f6f6] text-primary' : 'text-gray-900'}`}
+  //                                 value={'create'}
+  //                                 onClick={() => createItem()}
+  //                             >
+  //                                 {({selected}) => (
+  //                                     <>
+  //                                         <div className="flex items-center justify-between">
+  //                                             <span>{query}</span>
+  //                                             <span className="text-success flex items-center gap-x-1">
+  //                                                       <PlusIcon className="h-3 w-3"/>
+  //                                                       Create & select
+  //                                                   </span>
+  //                                         </div>
+  //                                     </>
+  //                                 )}
+  //                             </Combobox.Option>
+  //                         )
+  //                             : filteredPeople.length == 0 ? <Combobox.Option
+  //                                     key={"no-list-options"}
+  //                                     disabled={true}
+  //                                     className={({active}) => `form-combobox-option ${active ? 'bg-[#f6f6f6] text-primary' : 'text-gray-900'}`}
+  //                                     value={null}
+  //                                 >
+  //                                     {({selected, active}) => (
+  //                                         <>
+  //                                             <span
+  //                                                 className={`block truncate ${selected ? 'font-medium' : 'font-normal'}`}>No Data </span>
+  //                                         </>
+  //                                     )}
+  //                                 </Combobox.Option>
+  //                                 : filteredPeople.map((option) => (
+  //                                     <Combobox.Option
+  //                                         key={option.value}
+  //                                         onClick={() => handleSelect(option.value)}
+  //                                         disabled={option.isDisabled}
+  //                                         className={({active}) => `form-combobox-option ${active ? 'bg-[#f6f6f6] text-primary' : 'text-gray-900'}`}
+  //                                         value={option.value}
+  //                                     >
+  //                                         {({selected, active}) => (
+  //                                             <>
+  //                                             <span
+  //                                                 className={`block truncate ${selected ? 'font-medium' : 'font-normal'}`}>{option.label}</span>
+  //                                                 {selected ? (
+  //                                                     <span className="icon">
+  //                                                       <CheckIcon className="h-5 w-5" aria-hidden="true"/>
+  //                                                   </span>
+  //                                                 ) : null}
+  //                                                 <p className="form-listbox-helptext">{option.helpText}</p>
+  //                                             </>
+  //                                         )}
+  //                                     </Combobox.Option>
+  //                                 ))}
+  //                     </Combobox.Options>
+  //                 </Transition>
+  //             </div>
+  //         </Combobox>
+  //     );
+  // }
+
+  // function formTypeHorizontal() {
+  //     return (
+  //         <div className="form-group flex sm:flex-row flex-col">
+  //             {props.fieldConfig.label ? (
+  //                 <label htmlFor="email" className="form-label sm:w-1/4 sm:ltr:mr-2 rtl:ml-2">
+  //                     {props.fieldConfig.label}
+  //                 </label>
+  //             ) : (
+  //                 <></>
+  //             )}
+  //             <div className="flex-1">
+  //                 {getInput()}
+
+  //                 <ErrorContextHandler fieldConfig={props.fieldConfig}/>
+
+  //                 {props.fieldConfig && props.fieldConfig.helpText ? (
+  //                     <p className="mt-2 text-sm text-gray-500" id="email-description">
+  //                         {props.fieldConfig.helpText}
+  //                     </p>
+  //                 ) : (
+  //                     <></>
+  //                 )}
+  //             </div>
+  //         </div>
+  //     );
+  // }
+
+  // function formTypeVertical() {
+  //     return (
+  //         <div className="form-group">
+  //             {props.fieldConfig.label ? (
+  //                 <label htmlFor="email" className="form-label">
+  //                     {props.fieldConfig.label}
+  //                 </label>
+  //             ) : (
+  //                 <></>
+  //             )}
+
+  //             <div className="flex-1">
+  //                 {getInput()}
+
+  //                 <ErrorContextHandler fieldConfig={props.fieldConfig}/>
+
+  //                 {props.fieldConfig && props.fieldConfig.helpText ? (
+  //                     <p className="mt-2 text-sm text-gray-500" id="email-description">
+  //                         {props.fieldConfig.helpText}
+  //                     </p>
+  //                 ) : (
+  //                     <></>
+  //                 )}
+  //             </div>
+  //         </div>
+  //     );
+  // }
+
+  // return (
+  //     <>
+  //         {props.fieldConfig && props.fieldConfig.disableDefaultWrapper ? (
+  //             <>{getInput()}</>
+  //         ) : (
+  //             <>{props.fieldConfig.align === FieldAlignType.HORIZONTAL ? <>{formTypeHorizontal()}</> : <>{formTypeVertical()}</>}</>
+  //         )}
+  //     </>
+  // );
+
+  return <></>;
+};
+
+export default ComboSelect;

package/src/form/formfields/DatePickerField.tsx

@@ -0,0 +1,89 @@
+import { RegisterOptions } from "react-hook-form";
+import React, { useContext, useEffect, useRef, useState } from "react";
+import Datepicker from "react-tailwindcss-datepicker";
+import { FormContext } from "../context/FormContext";
+import { FormFieldComponentPropSchema } from "../schema/FormFieldSchema";
+import RenderFormField from "../util/RenderFormField";
+import { handleChange, registerFormField } from "../util";
+import moment from "moment";
+
+const DatePicker: React.FC<FormFieldComponentPropSchema> = (
+    props: FormFieldComponentPropSchema
+) => {
+    const formContext = useContext(FormContext);
+    const initialDate = formContext.getValues(props.fieldConfig.name)
+        ? {
+              startDate: formContext.getValues(props.fieldConfig.name),
+              endDate: formContext.getValues(props.fieldConfig.name),
+          }
+        : { startDate: "", endDate: "" };
+
+    useEffect(() => {
+        if (
+            props.fieldConfig.defaultValue &&
+            !formContext.getValues(props.fieldConfig.name)
+        ) {
+            formContext.setValue(
+                props.fieldConfig.name,
+                props.fieldConfig.defaultValue
+            );
+        }
+    }, [props.fieldConfig.forceUpdate]);
+
+    let registerOptions: RegisterOptions = registerFormField(props.fieldConfig);
+
+    let hookProps = formContext.register(
+        props.fieldConfig.name,
+        registerOptions
+    );
+
+    function getInput() {
+        return (
+            <Datepicker
+                value={
+                    initialDate || {
+                        startDate: props.fieldConfig.defaultValue,
+                        endDate: props.fieldConfig.defaultValue,
+                    }
+                }
+                {...hookProps}
+                placeholder={
+                    props.fieldConfig.placeholder
+                        ? props.fieldConfig.placeholder
+                        : "YYYY-MM-DD"
+                }
+                asSingle={true}
+                popoverDirection="down"
+                useRange={false}
+                inputName={props.fieldConfig.name}
+                key={props.fieldConfig.name}
+                containerClassName={"relative"}
+                minDate={props.fieldConfig.minDate}
+                maxDate={props.fieldConfig.maxDate}
+                inputClassName={
+                    props.fieldConfig.customClassNames?.fieldClassName
+                        ? "form-input " +
+                          props.fieldConfig.customClassNames.fieldClassName
+                        : "form-input flex-1"
+                }
+                onChange={(dates) => {
+                    let date = null;
+                    if (dates?.startDate != null)
+                        date = moment(dates?.startDate).format("YYYY-MM-DD");
+
+                    handleChange(
+                        date,
+                        formContext,
+                        props.fieldConfig,
+                        props.onChange
+                    );
+                }}
+            />
+        );
+    }
+    return (
+        <RenderFormField fieldConfig={props.fieldConfig} getInput={getInput} />
+    );
+};
+
+export default DatePicker;

package/src/form/formfields/DateRangePickerField.tsx

@@ -0,0 +1,104 @@
+import { RegisterOptions } from "react-hook-form";
+import { useContext, useEffect, useState } from "react";
+import Datepicker, { DateValueType } from "react-tailwindcss-datepicker";
+import { FormContext } from "../context/FormContext";
+import { FormFieldComponentPropSchema } from "../schema/FormFieldSchema";
+import React from "react";
+import RenderFormField from "../util/RenderFormField";
+import { handleChange, registerFormField } from "../util";
+import moment from "moment";
+
+/**
+ *
+ * reference: https://react-tailwindcss-datepicker.vercel.app/
+ *
+ * @param props FormFieldComponentPropSchema
+ * @returns
+ */
+
+const DateRangePicker: React.FC<FormFieldComponentPropSchema> = (
+    props: FormFieldComponentPropSchema
+) => {
+    const formContext = useContext(FormContext);
+
+    let registerOptions: RegisterOptions = registerFormField(props.fieldConfig);
+
+    let hookProps = formContext.register(
+        props.fieldConfig.name,
+        registerOptions
+    );
+
+    const [date, setDate] = useState<DateValueType>(
+        formContext.getValues(props.fieldConfig.name)
+            ? {
+                  startDate: formContext.getValues(props.fieldConfig.name),
+                  endDate: formContext.getValues(props.fieldConfig.name),
+              }
+            : { startDate: "", endDate: "" }
+    );
+    useEffect(() => {
+        if (
+            props.fieldConfig.defaultValue &&
+            !formContext.getValues(props.fieldConfig.name)
+        ) {
+            const date = {
+                start: props.fieldConfig.defaultValue,
+                end: props.fieldConfig.defaultValue,
+            };
+            formContext.setValue(props.fieldConfig.name, date);
+        }
+    }, []);
+
+    function getInput() {
+        return (
+            <Datepicker
+                {...hookProps}
+                placeholder={
+                    props.fieldConfig.placeholder
+                        ? props.fieldConfig.placeholder
+                        : "YYYY-MM-DD to YYYY-MM-DD"
+                }
+                inputName={props.fieldConfig.name}
+                key={props.fieldConfig.name}
+                value={date}
+                separator={"to"}
+                showFooter={true}
+                popoverDirection="down"
+                readOnly={props.fieldConfig.readOnly}
+                showShortcuts={true}
+                containerClassName={"relative"}
+                minDate={props.fieldConfig.minDate}
+                maxDate={props.fieldConfig.maxDate}
+                inputClassName={
+                    props.fieldConfig.customClassNames?.fieldClassName
+                        ? "form-input " +
+                          props.fieldConfig.customClassNames.fieldClassName
+                        : "form-input flex-1"
+                }
+                onChange={(dates) => {
+                    let dateObject = null;
+                    if (dates?.startDate && dates?.endDate) {
+                        dateObject = {
+                            start: moment(dates?.startDate).format(
+                                "YYYY-MM-DD"
+                            ),
+                            end: moment(dates?.endDate).format("YYYY-MM-DD"),
+                        };
+                    }
+                    setDate(dates);
+                    handleChange(
+                        dateObject,
+                        formContext,
+                        props.fieldConfig,
+                        props.onChange
+                    );
+                }}
+            />
+        );
+    }
+    return (
+        <RenderFormField fieldConfig={props.fieldConfig} getInput={getInput} />
+    );
+};
+
+export default DateRangePicker;

package/src/form/formfields/DynamicMultiSelect.tsx

@@ -0,0 +1,189 @@
+import React, {useContext, useEffect, useRef, useState} from "react";
+import {
+    FieldOptionsSchema,
+    FormFieldComponentPropSchema,
+    FormFieldType,
+    StoreStateSchema,
+} from "../schema/FormFieldSchema";
+import {RegisterOptions} from "react-hook-form";
+import {Listbox, ListboxButton} from "@headlessui/react";
+
+import {FormContext} from "../context/FormContext";
+import {getListOptions} from "../FormFieldUtils";
+import axios from "axios";
+import useDymanicReducer from "../hooks/useDynamicReducer";
+import {useDispatch} from "react-redux";
+import RenderFormField from "../util/RenderFormField";
+import {handleChange, registerFormField} from "../util";
+import RenderListOptions, {renderListBoxValue,} from "../util/RenderListOptions";
+import {reachoAPI} from "../../api";
+
+const DynamicMultiSelect: React.FC<FormFieldComponentPropSchema> = (
+    props: FormFieldComponentPropSchema
+) => {
+    const dynamicSelectRef = useRef<HTMLUListElement>(null);
+
+    const formContext = useContext(FormContext);
+
+    const [listOptions, setListOptions] = useState<FieldOptionsSchema[]>([]);
+    const [loading, setLoading] = useState<boolean>(false);
+
+    useEffect(() => {
+        const {fieldConfig} = props;
+
+        // Initialize dropdownFieldConfig with defaults if not already set
+        fieldConfig.dropdownFieldConfig = {
+            showCreateOption:
+                fieldConfig.dropdownFieldConfig?.showCreateOption ?? false,
+            showDeleteOption:
+                fieldConfig.dropdownFieldConfig?.showDeleteOption ?? true,
+            showSearchBox:
+                fieldConfig.dropdownFieldConfig?.showSearchBox ?? true,
+            showSelectedCount:
+                fieldConfig.dropdownFieldConfig?.showSelectedCount ?? true,
+        };
+
+        if (
+            !formContext.getValues(props.fieldConfig.name) &&
+            props.fieldConfig.defaultValue
+        ) {
+            formContext.setValue(
+                props.fieldConfig.name,
+                props.fieldConfig.defaultValue
+            );
+        }
+    }, []);
+
+    if (props.fieldConfig.store) {
+        const {state: state} = useDymanicReducer<StoreStateSchema<any>>({
+            reducerConfig: props.fieldConfig.store,
+        });
+
+        const dispatch = useDispatch();
+
+        useEffect(() => {
+            if (
+                props.fieldConfig.store?.initialFetchReducerAction &&
+                (!state || !state.data)
+            ) {
+                dispatch(props.fieldConfig.store.initialFetchReducerAction(""));
+            } else {
+                if (state && state.data && Array.isArray(state.data)) {
+                    const list: FieldOptionsSchema[] = getListOptions(
+                        state.data,
+                        props.fieldConfig.optionsConfig
+                    );
+                    setListOptions([...list]);
+                    setLoading(false);
+                }
+            }
+        }, []);
+
+        useEffect(() => {
+            if (state && state.data && Array.isArray(state.data)) {
+                const list = getListOptions(
+                    state.data,
+                    props.fieldConfig.optionsConfig
+                );
+                setListOptions([...list]);
+                setLoading(false);
+            }
+        }, [state]);
+    } else if (props.fieldConfig.fetchUrl) {
+        useEffect(() => {
+            fetchData();
+        }, []);
+    }
+    if (props.fieldConfig.options && props.fieldConfig.options.length > 0) {
+        let options = props.fieldConfig.options;
+        setListOptions(prevState => [...options, ...prevState]);
+    }
+    const fetchData = async () => {
+        if (!props.fieldConfig.fetchUrl) return;
+
+        let response = await (props.fieldConfig.disableHeaderInFetch
+            ? axios.get(props.fieldConfig.fetchUrl)
+            : reachoAPI.get(props.fieldConfig.fetchUrl));
+        if (response.data) {
+            const data: FieldOptionsSchema[] = getListOptions(
+                response.data,
+                props.fieldConfig.optionsConfig
+            );
+            setListOptions([...data]);
+            if (props.fieldConfig.fetchCallback) {
+                props.fieldConfig.fetchCallback(response);
+            }
+        } else {
+            console.error(response.statusText);
+            setLoading(false);
+        }
+    };
+
+    let registerOptions: RegisterOptions = registerFormField(
+        props.fieldConfig,
+        true
+    );
+
+    let hookProps = formContext.register(
+        props.fieldConfig.name,
+        registerOptions
+    );
+
+    function getInput() {
+        return (
+            <Listbox
+                multiple
+                as={"div"}
+                value={formContext.getValues(props.fieldConfig.name) ?? []}
+                {...hookProps}
+                onChange={(selectedOptions) =>
+                    handleChange(
+                        selectedOptions,
+                        formContext,
+                        props.fieldConfig,
+                        props.onChange
+                    )
+                }
+                defaultValue={props.fieldConfig.defaultValue}
+                name={props.fieldConfig.name}
+                disabled={props.fieldConfig.disabled}
+                className={`relative form-listbox flex-1`}>
+                <ListboxButton
+                    className={
+                        props.fieldConfig.customClassNames?.fieldClassName
+                            ? "form-listbox-select " +
+                            props.fieldConfig.customClassNames.fieldClassName
+                            : "form-listbox-select"
+                    }>
+                    {renderListBoxValue(
+                            formContext,
+                            props.fieldConfig,
+                            listOptions,
+                            props.onChange
+                        )
+                    }
+                </ListboxButton>
+                <RenderListOptions
+                    formContext={formContext}
+                    onChange={props.onChange}
+                    formField={FormFieldType.DYNAMIC_MULTI_SELECT}
+                    ref={dynamicSelectRef}
+                    fieldConfig={props.fieldConfig}
+                    listOptions={listOptions}
+                    setListOptions={setListOptions}
+                    loading={loading}
+                    setLoading={setLoading}
+                />
+            </Listbox>
+        );
+    }
+    if(props.fieldConfig.hideWhenNoResults && listOptions.length==0 )
+    {
+        return <></>
+    }
+
+    return (
+        <RenderFormField fieldConfig={props.fieldConfig} getInput={getInput}/>
+    );
+};
+export default DynamicMultiSelect;