@visns-studio/visns-components 4.7.0 → 4.7.2

package/components/crm/Field.jsx

@@ -1,1557 +0,0 @@
-import '../styles/global.css';
-
-import React, { useEffect, useRef, useState } from 'react';
-import DatePicker from 'react-datepicker';
-import _ from 'lodash';
-import Toggle from 'react-toggle';
-import moment from 'moment';
-import parse from 'html-react-parser';
-import Popup from 'reactjs-popup';
-import { BlockPicker } from 'react-color';
-import { CopyToClipboard } from 'react-copy-to-clipboard';
-import { NumericFormat, PatternFormat } from 'react-number-format';
-import { Editor } from '@tinymce/tinymce-react';
-import { CirclePlus, CloudDownload, Copy, TrashCan } from 'akar-icons';
-import { toast } from 'react-toastify';
-import styles from './styles/Field.module.css';
-
-import CustomFetch from './Fetch';
-import Form from './Form';
-import MultiSelect from './MultiSelect';
-import Select from './Select';
-import VisnsAsyncSelect from './AsyncSelect';
-import VisnsAutocomplete from './Autocomplete';
-import VisnsDropZone from '../cms/DropZone';
-
-import 'react-toggle/style.css';
-import 'react-datepicker/dist/react-datepicker.css';
-
-function Field({
-    api,
-    autocompleteCallback,
-    childDropdownCallback,
-    fetchData,
-    formData,
-    inputValue,
-    inputClass,
-    mapbox,
-    onChange,
-    onChangeCheckbox,
-    onChangeColour,
-    onChangeDate,
-    onChangeNumberFormat,
-    onChangeSelect,
-    onChangeSignature,
-    onChangeRicheditor,
-    onChangeTableRadio,
-    onChangeAddTableTextRow,
-    onChangeTableText,
-    onChangeToggle,
-    onFileDownload,
-    setFormData,
-    settings,
-    style,
-    userProfile = null,
-}) {
-    const editorRef = useRef(null);
-    const fileImageInputRef = useRef(null);
-    const [colorPickerShow, setColorPickerShow] = useState(false);
-    const [counter, setCounter] = useState(0);
-    const [dataOptions, setDataOptions] = useState([]);
-    const [formItemStyle, setFormItemStyle] = useState({});
-    const [formItemClass, setFormItemClass] = useState('');
-    const [options, setOptions] = useState([]);
-
-    const cover = {
-        position: 'fixed',
-        top: '0px',
-        right: '0px',
-        bottom: '0px',
-        left: '0px',
-    };
-    const popover = {
-        position: 'absolute',
-        zIndex: '2',
-        left: '20px',
-        marginTop: '6px',
-    };
-
-    useEffect(() => {
-        const fetchOptions = () => {
-            let filter = {};
-            if (settings.where?.length > 0) {
-                filter = {
-                    where: settings.where,
-                };
-            }
-
-            if (settings.fields?.length > 0) {
-                filter.fields = settings.fields;
-            }
-
-            if (
-                settings.order &&
-                settings.order.sortBy &&
-                settings.order.sort
-            ) {
-                filter.sortBy = settings.order.sortBy;
-                filter.sort = settings.order.sort;
-            }
-
-            CustomFetch(settings.url, 'POST', filter, function (result) {
-                setOptions(result.data);
-
-                let dataArray = [];
-
-                result.data.forEach((a) => {
-                    let _tempObject = a;
-
-                    if (!_.isEmpty(_tempObject)) {
-                        let modifiedObject = {};
-
-                        Object.keys(_tempObject).forEach(function (c) {
-                            if (c !== 'id' && c !== 'label') {
-                                modifiedObject['data-' + c] = _tempObject[c];
-                            }
-                        });
-
-                        dataArray.push(modifiedObject);
-                    }
-                });
-
-                if (dataArray.length > 0) {
-                    setDataOptions(dataArray);
-                }
-            });
-        };
-
-        switch (settings.type) {
-            case 'hidden':
-                setFormItemStyle({
-                    display: 'none',
-                });
-                break;
-            case 'dropdown-ajax':
-            case 'multi-dropdown-ajax':
-            case 'radio-ajax':
-                fetchOptions();
-                break;
-            default:
-                break;
-        }
-
-        switch (settings.size) {
-            case 'full':
-                setFormItemClass(`${styles.formItem} ${styles.fwItem}`);
-                break;
-            case 'quarter':
-                setFormItemClass(`${styles.formItem} ${styles.qtrItem}`);
-                break;
-            default:
-                setFormItemClass(`${styles.formItem}`);
-                break;
-        }
-    }, [settings, counter]);
-
-    useEffect(() => {
-        const fetchChildDropdownData = () => {
-            let filter = {};
-
-            if (settings.child && inputValue) {
-                let _inputValue = inputValue.value
-                    ? inputValue.value
-                    : inputValue;
-
-                if (_inputValue > 0) {
-                    if (Array.isArray(settings.child)) {
-                        settings.child.forEach((a) => {
-                            filter = {
-                                where: [
-                                    {
-                                        id: settings.id,
-                                        value: _inputValue,
-                                    },
-                                ],
-                            };
-
-                            if (a.fields) {
-                                filter.fields = a.fields;
-                            }
-
-                            if (a.orderBy) {
-                                filter.orderBy = a.orderBy;
-                            }
-
-                            CustomFetch(
-                                a.url,
-                                'POST',
-                                filter,
-                                function (result) {
-                                    childDropdownCallback({
-                                        id: a.id,
-                                        data: result.data,
-                                    });
-                                }
-                            );
-                        });
-                    } else {
-                        filter = {
-                            where: [
-                                {
-                                    id: settings.id,
-                                    value: _inputValue,
-                                },
-                            ],
-                        };
-
-                        if (settings.fields) {
-                            filter.fields = settings.fields;
-                        }
-
-                        if (settings.orderBy) {
-                            filter.orderBy = settings.orderBy;
-                        }
-
-                        CustomFetch(
-                            settings.child.url,
-                            'POST',
-                            filter,
-                            function (result) {
-                                childDropdownCallback({
-                                    id: settings.child.id,
-                                    data: result.data,
-                                });
-                            }
-                        );
-                    }
-                }
-            }
-        };
-
-        fetchChildDropdownData();
-    }, [inputValue, settings, counter]);
-
-    useEffect(() => {
-        const processOptions = () => {
-            if (settings.options?.length > 0) {
-                let dataArray = [];
-
-                settings.options.forEach((a) => {
-                    let _tempObject = a;
-
-                    if (!_.isEmpty(_tempObject)) {
-                        let modifiedObject = {};
-
-                        Object.keys(_tempObject).forEach(function (c) {
-                            if (c !== 'id' && c !== 'label') {
-                                modifiedObject['data-' + c] = _tempObject[c];
-                            }
-                        });
-
-                        dataArray.push(modifiedObject);
-                    }
-                });
-
-                if (dataArray.length > 0) {
-                    setDataOptions(dataArray);
-                }
-            }
-        };
-
-        processOptions();
-    }, [settings.options, settings]);
-
-    const renderLabel = () => {
-        if (
-            [
-                'address',
-                'async-dropdown-ajax',
-                'checkbox',
-                'colour',
-                'copytoclipboard',
-                'date',
-                'datetime',
-                'dropdown',
-                'dropdown-ajax',
-                'dynamicdata',
-                'file',
-                'gallery',
-                'image',
-                'multi-dropdown',
-                'multi-dropdown-ajax',
-                'plaindate',
-                'plaindatetime',
-                'plainrelation',
-                'plainrelationarray',
-                'radio',
-                'radio-ajax',
-                'richeditor',
-                'signature',
-                'table_radio',
-                'table_text',
-                'time',
-            ].includes(settings.type)
-        ) {
-            return (
-                <span className={`${styles.fi__span} ${styles.prefocus}`}>
-                    {settings.label} {settings.required ? '*' : ''}
-                </span>
-            );
-        } else if (['plaintext'].includes(settings.type)) {
-            if (settings.description) {
-                return (
-                    <span>
-                        {settings.description
-                            ? parse(settings.description)
-                            : ''}
-                    </span>
-                );
-            } else {
-                return (
-                    <span className={`${styles.fi__span} ${styles.prefocus}`}>
-                        {settings.label} {settings.required ? '*' : ''}
-                    </span>
-                );
-            }
-        } else if (['plaintextheading'].includes(settings.type)) {
-            return <h2>{settings.label ? settings.label : ''}</h2>;
-        }
-    };
-
-    const renderRelationText = (value) => {
-        let text = '';
-
-        const processKeys = (obj) => {
-            let tmpValue = obj;
-            settings.keys.forEach((key) => {
-                tmpValue = tmpValue[key];
-            });
-            return tmpValue;
-        };
-
-        if (Array.isArray(value) && value[0] && settings.keys) {
-            text = processKeys(value[0]);
-        } else if (typeof value === 'object' && value !== null) {
-            text = processKeys(value);
-        }
-
-        return text;
-    };
-
-    const renderRelationArrayText = (value) => {
-        let text = '';
-
-        if (value && settings.nameFrom) {
-            value.forEach((a, b) => {
-                if (b > 0) {
-                    text += ', ';
-                }
-
-                text += a[settings.nameFrom];
-            });
-        }
-
-        return text;
-    };
-
-    const renderInput = () => {
-        switch (settings.type) {
-            case 'address':
-                return (
-                    <VisnsAutocomplete
-                        api="pk.eyJ1IjoidmlzbnMtc3R1ZGlvIiwiYSI6ImNrbGlraW5vZDBhMDYycHBsdmk5b3ljbGQifQ.ZGUBk0PWac5GahUeVHdTpg"
-                        country="AU"
-                        field={settings.id}
-                        inputValue={inputValue}
-                        mapbox={mapbox}
-                        onSelect={autocompleteCallback}
-                        setFormData={setFormData}
-                        style={style}
-                    />
-                );
-            case 'async-dropdown-ajax':
-                return (
-                    <VisnsAsyncSelect
-                        settings={settings}
-                        className={inputClass[settings.id]}
-                        multi={
-                            settings.hasOwnProperty('multi')
-                                ? settings.multi
-                                : false
-                        }
-                        onChange={onChangeSelect}
-                        inputValue={
-                            inputValue === null || inputValue === undefined
-                                ? ''
-                                : inputValue
-                        }
-                        options={options}
-                        dataOptions={dataOptions}
-                    />
-                );
-            case 'checkbox':
-                return settings.options?.length > 0 ? (
-                    <div
-                        className="fi__optionscontainer"
-                        style={{ paddingTop: '10px' }}
-                    >
-                        {settings.options.map((option, index) => (
-                            <div
-                                key={`${settings.id}-checkbox-option-${index}`}
-                                className="fi__checkboxcontainer"
-                            >
-                                <input
-                                    name={settings.id}
-                                    data-name={settings.id}
-                                    type="checkbox"
-                                    className="fi__customcheckbox"
-                                    value={option.label}
-                                    checked={inputValue[index]}
-                                    onChange={onChangeCheckbox}
-                                />
-                                <label className="fi__checkboxlabel">
-                                    {option.label}
-                                </label>{' '}
-                            </div>
-                        ))}
-                    </div>
-                ) : null;
-            case 'colour':
-                return (
-                    <div className="cpicker">
-                        <div
-                            className="cpicker__box"
-                            style={
-                                inputValue && inputValue !== 'null'
-                                    ? { background: inputValue }
-                                    : {}
-                            }
-                        ></div>
-                        <div className="cpicker__btn">
-                            <button
-                                onClick={(e) => {
-                                    e.preventDefault();
-
-                                    setColorPickerShow(
-                                        colorPickerShow === true ? false : true
-                                    );
-                                }}
-                            >
-                                Pick Color
-                            </button>
-                            {colorPickerShow === true ? (
-                                <div style={popover}>
-                                    <div
-                                        style={cover}
-                                        onClick={() => {
-                                            setColorPickerShow(false);
-                                        }}
-                                    />
-
-                                    <BlockPicker
-                                        color={
-                                            inputValue && inputValue !== 'null'
-                                                ? inputValue
-                                                : ''
-                                        }
-                                        onChangeComplete={(color, event) => {
-                                            onChangeColour(
-                                                event,
-                                                color,
-                                                settings.id
-                                            );
-                                        }}
-                                    />
-                                </div>
-                            ) : null}
-                        </div>
-                    </div>
-                );
-            case 'copytoclipboard':
-                return (
-                    <>
-                        <input
-                            type={settings.type}
-                            data-name={settings.id}
-                            className={inputClass[settings.id]}
-                            value={
-                                inputValue && inputValue !== 'null'
-                                    ? inputValue
-                                    : ''
-                            }
-                            readOnly
-                        />
-                        <CopyToClipboard
-                            text={
-                                inputValue && inputValue !== 'null'
-                                    ? inputValue
-                                    : ''
-                            }
-                            onCopy={() => console.info('copied')}
-                        >
-                            <Copy
-                                data-tooltip-id="system-tooltip"
-                                data-tooltip-content="Copy to Clipboard"
-                                strokeWidth={2}
-                                size={24}
-                            />
-                        </CopyToClipboard>
-                    </>
-                );
-            case 'currency':
-                return (
-                    <NumericFormat
-                        data-name={settings.id}
-                        className={inputClass[settings.id]}
-                        onValueChange={(values) => {
-                            onChangeNumberFormat(values, settings.id);
-                        }}
-                        thousandSeparator={true}
-                        prefix={'$'}
-                        value={
-                            inputValue && inputValue !== 'null'
-                                ? inputValue
-                                : ''
-                        }
-                    />
-                );
-            case 'decimal':
-            case 'number':
-                return (
-                    <NumericFormat
-                        data-name={settings.id}
-                        className={inputClass[settings.id]}
-                        onValueChange={(values) => {
-                            onChangeNumberFormat(values, settings.id);
-                        }}
-                        thousandSeparator={
-                            settings.hasOwnProperty('thousandSeperator')
-                                ? settings.thousandSeperator
-                                : true
-                        }
-                        decimalSeparator={
-                            settings.type === 'decimal' ? '.' : '.'
-                        }
-                        decimalScale={settings.type === 'decimal' ? 2 : 2}
-                        value={
-                            inputValue && inputValue !== 'null'
-                                ? inputValue
-                                : ''
-                        }
-                    />
-                );
-            case 'dropdown':
-            case 'dropdown-ajax':
-                return (
-                    <div className={styles.dropdownContainer}>
-                        <Select
-                            settings={settings}
-                            className={
-                                settings.create ? styles.selectFullWidth : ''
-                            }
-                            onChange={onChange}
-                            inputValue={inputValue === null ? '' : inputValue}
-                            options={
-                                settings.type === 'dropdown'
-                                    ? settings.options
-                                    : options
-                            }
-                            dataOptions={dataOptions}
-                        />
-
-                        {settings.create && (
-                            <button
-                                className={styles.buttonRight}
-                                onClick={(e) => {
-                                    e.preventDefault();
-
-                                    handleAddEntry(settings.create);
-                                }}
-                            >
-                                <CirclePlus strokeWidth={2} size={16} />
-                            </button>
-                        )}
-                    </div>
-                );
-            case 'dynamicdata':
-                return (
-                    <div
-                        className="fi__div"
-                        style={
-                            settings.height
-                                ? {
-                                      height: settings.height,
-                                      paddingTop: '10px',
-                                      marginLeft: '13px',
-                                  }
-                                : {
-                                      paddingTop: '10px',
-                                      marginLeft: '13px',
-                                  }
-                        }
-                    >
-                        {inputValue && inputValue !== 'null' ? inputValue : ''}
-                    </div>
-                );
-            case 'file':
-                if (
-                    settings.hasOwnProperty('multiple') &&
-                    settings.multiple === true
-                ) {
-                    return (
-                        <>
-                            <input
-                                type="file"
-                                multiple
-                                data-name={settings.id}
-                                className={inputClass[settings.id]}
-                                onChange={onChange}
-                            />
-                            {inputValue && inputValue.length > 0 && (
-                                <ul className="file-list">
-                                    {inputValue.map((file, index) => (
-                                        <li
-                                            key={`file-${settings.id}-${index}`}
-                                        >
-                                            {file.name}
-                                            <button
-                                                className="trash-button"
-                                                onClick={(e) => {
-                                                    e.preventDefault();
-                                                    e.stopPropagation();
-
-                                                    const updatedFiles =
-                                                        inputValue.filter(
-                                                            (_, fileIndex) =>
-                                                                fileIndex !==
-                                                                index
-                                                        );
-
-                                                    setFormData(
-                                                        (prevFormData) => ({
-                                                            ...prevFormData,
-                                                            [settings.id]:
-                                                                updatedFiles,
-                                                        })
-                                                    );
-                                                }}
-                                            >
-                                                <TrashCan
-                                                    data-tooltip-id="system-tooltip"
-                                                    data-tooltip-content="Remove File"
-                                                    strokeWidth={2}
-                                                    size={24}
-                                                />
-                                            </button>
-                                        </li>
-                                    ))}
-                                </ul>
-                            )}
-                        </>
-                    );
-                } else {
-                    return (
-                        <div
-                            style={{
-                                display: 'inline-flex',
-                                alignItems: 'center',
-                            }}
-                        >
-                            <label
-                                htmlFor={settings.id}
-                                style={{
-                                    padding: '6px 12px',
-                                    border: '1px solid #ccc',
-                                    display: 'inline-block',
-                                    backgroundColor: '#f8f8f8',
-                                    cursor: 'pointer',
-                                }}
-                            >
-                                {inputValue?.filename
-                                    ? 'Replace File...'
-                                    : 'Choose file...'}
-                            </label>
-                            <input
-                                id={settings.id}
-                                data-name={settings.id}
-                                name={settings.id}
-                                type="file"
-                                className={inputClass[settings.id]}
-                                onChange={onChange}
-                                style={{ display: 'none' }}
-                            />
-                            <span style={{ marginLeft: '10px' }}>
-                                {inputValue
-                                    ? inputValue.filename
-                                        ? inputValue.filename
-                                        : inputValue.name
-                                        ? inputValue.name
-                                        : ''
-                                    : ''}
-                            </span>
-                            {inputValue &&
-                                inputValue.key &&
-                                inputValue.uuid && (
-                                    <div
-                                        style={{
-                                            marginLeft: '10px',
-                                            cursor: 'pointer',
-                                        }}
-                                        data-tooltip-id="system-tooltip"
-                                        data-tooltip-content={
-                                            inputValue.filename
-                                        }
-                                        onClick={(e) => {
-                                            e.preventDefault();
-                                            onFileDownload(inputValue);
-                                        }}
-                                    >
-                                        <CloudDownload size={24} />
-                                    </div>
-                                )}
-                        </div>
-                    );
-                }
-            case 'gallery':
-                let htmlContainer = '';
-
-                if (formData[settings.key] && formData[settings.key] > 0) {
-                    const dropzoneUrl = `${settings.url}/${
-                        formData[settings.key]
-                    }`;
-
-                    htmlContainer = (
-                        <VisnsDropZone
-                            fetchData={fetchData}
-                            files={formData[settings.id]}
-                            settings={{
-                                url: dropzoneUrl,
-                                method: settings.method,
-                                type: 'gallery',
-                                data: settings.data,
-                            }}
-                        />
-                    );
-                }
-
-                return htmlContainer;
-            case 'html5_date':
-                return (
-                    <input
-                        type="date"
-                        data-name={settings.id}
-                        className={inputClass[settings.id]}
-                        placeholder=" "
-                        onChange={onChange}
-                        value={
-                            inputValue && inputValue !== 'null'
-                                ? inputValue
-                                : ''
-                        }
-                        autoComplete="off"
-                    />
-                );
-            case 'html5_datetime':
-                return (
-                    <input
-                        type="datetime-local"
-                        data-name={settings.id}
-                        className={inputClass[settings.id]}
-                        placeholder=" "
-                        onChange={onChange}
-                        value={
-                            inputValue && inputValue !== 'null'
-                                ? inputValue
-                                : ''
-                        }
-                        autoComplete="off"
-                    />
-                );
-            case 'html5_time':
-                return (
-                    <input
-                        type="time"
-                        data-name={settings.id}
-                        className={inputClass[settings.id]}
-                        placeholder=" "
-                        onChange={onChange}
-                        value={
-                            inputValue && inputValue !== 'null'
-                                ? inputValue
-                                : ''
-                        }
-                        autoComplete="off"
-                    />
-                );
-            case 'image':
-                return (
-                    <div
-                        style={{
-                            position: 'relative',
-                            display: 'inline-flex',
-                            alignItems: 'center',
-                            cursor: 'pointer',
-                        }}
-                    >
-                        <input
-                            type="file"
-                            data-name={settings.id}
-                            className={inputClass[settings.id]}
-                            onChange={onChange}
-                            ref={fileImageInputRef}
-                            style={{
-                                position: 'absolute',
-                                left: 0,
-                                top: 0,
-                                width: '100%',
-                                height: '100%',
-                                opacity: 0,
-                                cursor: 'pointer',
-                            }}
-                        />
-                        {inputValue.imageSrc ? (
-                            <img
-                                src={inputValue.imageSrc}
-                                alt="Uploaded"
-                                style={{
-                                    marginLeft: '10px',
-                                    maxHeight: '100px',
-                                }}
-                            />
-                        ) : (
-                            <img
-                                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWCAYAAAA8AXHiAAAJ3UlEQVR4nO3b60/aXhwG8KflJijIJQgTt8y5mLkxl73w//8HzBbdXLLFqJsg3rjKnUJ/L0wJpYUC9ovbL8/nlRbac077tOf0tCiHh4c6iFymPncF6P+JwSIRDBaJYLBIBINFIhgsEsFgkQgGi0QwWCSCwSIRDBaJYLBIBINFIhgsEsFgkQgGi0QwWCSCwSIRDBaJYLBIBINFIhgsEsFgkQgGi0QwWCSCwSIRDBaJYLBIBINFIhgsEsFgkQgGi0QwWCSCwSIRDBaJYLBIBINFIhgsEsFgkQgGi0QwWCSCwSIRDBaJYLBIBINFIhgsEsFgkQgGi0QwWCSCwSIRDBaJYLBIBINFIhgsEvEfmhiBahNiQpEAAAAASUVORK5CYII="
-                                alt="Placeholder"
-                            />
-                        )}
-                    </div>
-                );
-            case 'json':
-                return (
-                    <input
-                        type={settings.type}
-                        data-name={settings.id}
-                        data-parent={settings.parent}
-                        className={inputClass[settings.id]}
-                        placeholder=" "
-                        onChange={onChange}
-                        value={
-                            inputValue && inputValue !== 'null'
-                                ? inputValue
-                                : ''
-                        }
-                        autoComplete="off"
-                    />
-                );
-            case 'line-break':
-                return (
-                    <div className="formbreak">
-                        <span>
-                            {settings.label}{' '}
-                            {settings.required === true ? '*' : ''}
-                        </span>
-                    </div>
-                );
-            case 'mobile':
-            case 'phone':
-                return (
-                    <PatternFormat
-                        className={inputClass[settings.id]}
-                        onValueChange={(values) => {
-                            onChangeNumberFormat(values, settings.id);
-                        }}
-                        format={
-                            settings.type === 'phone'
-                                ? '## #### ####'
-                                : '#### ### ###'
-                        }
-                        allowEmptyFormatting
-                        mask="_"
-                        value={
-                            inputValue && inputValue !== 'null'
-                                ? inputValue
-                                : ''
-                        }
-                    />
-                );
-            case 'multi-dropdown':
-            case 'multi-dropdown-ajax':
-                return (
-                    <div className={styles.dropdownContainer}>
-                        <MultiSelect
-                            settings={settings}
-                            className={
-                                settings.create ? styles.selectFullWidth : ''
-                            }
-                            multi={
-                                settings.hasOwnProperty('multi')
-                                    ? settings.multi
-                                    : false
-                            }
-                            onChange={onChangeSelect}
-                            inputValue={
-                                inputValue === null || inputValue === undefined
-                                    ? ''
-                                    : inputValue
-                            }
-                            options={
-                                settings.type === 'multi-dropdown'
-                                    ? settings.options
-                                    : options
-                            }
-                            dataOptions={dataOptions}
-                            style={style}
-                        />
-                        {settings.create && (
-                            <button
-                                className={styles.buttonRight}
-                                onClick={(e) => {
-                                    e.preventDefault();
-
-                                    handleAddEntry(settings.create);
-                                }}
-                            >
-                                <CirclePlus strokeWidth={2} size={16} />
-                            </button>
-                        )}
-                    </div>
-                );
-            case 'percentage':
-                return (
-                    <NumericFormat
-                        data-name={settings.id}
-                        className={inputClass[settings.id]}
-                        onValueChange={(values) => {
-                            onChangeNumberFormat(values, settings.id);
-                        }}
-                        thousandSeparator={true}
-                        suffix={'%'}
-                        value={
-                            inputValue && inputValue !== 'null'
-                                ? inputValue
-                                : ''
-                        }
-                    />
-                );
-            case 'plaintext':
-                return (
-                    <div
-                        className="fi__div"
-                        style={
-                            settings.height
-                                ? {
-                                      height: settings.height,
-                                      paddingTop: '10px',
-                                      marginLeft: '13px',
-                                  }
-                                : {
-                                      paddingTop: '10px',
-                                      marginLeft: '13px',
-                                  }
-                        }
-                    >
-                        {inputValue && inputValue !== 'null' ? inputValue : ''}
-                    </div>
-                );
-            case 'plaintextheading':
-                return (
-                    <div
-                        className="fi__div"
-                        style={
-                            settings.height
-                                ? {
-                                      height: settings.height,
-                                  }
-                                : {}
-                        }
-                    >
-                        {inputValue && inputValue !== 'null'
-                            ? `<h2>${inputValue}</h2>`
-                            : ''}
-                    </div>
-                );
-            case 'plainrelation':
-                return (
-                    <div
-                        className="fi__div"
-                        style={
-                            settings.height
-                                ? {
-                                      height: settings.height,
-                                  }
-                                : {}
-                        }
-                    >
-                        {renderRelationText(inputValue)}
-                    </div>
-                );
-            case 'plainrelationarray':
-                return (
-                    <div
-                        className="fi__div"
-                        style={
-                            settings.height
-                                ? {
-                                      height: settings.height,
-                                  }
-                                : {}
-                        }
-                    >
-                        {renderRelationArrayText(inputValue)}
-                    </div>
-                );
-            case 'plaindate':
-                return (
-                    <div
-                        className="fi__div"
-                        style={
-                            settings.height
-                                ? {
-                                      height: settings.height,
-                                  }
-                                : {}
-                        }
-                    >
-                        {inputValue && inputValue !== 'null'
-                            ? moment(inputValue).format('DD-MM-YYYY')
-                            : ''}
-                    </div>
-                );
-            case 'plaindatetime':
-                return (
-                    <div
-                        className="fi__div"
-                        style={
-                            settings.height ? { height: settings.height } : {}
-                        }
-                    >
-                        {inputValue && inputValue !== 'null'
-                            ? moment(inputValue).format('DD-MM-YYYY hh:mm A')
-                            : ''}
-                    </div>
-                );
-            case 'radio':
-                return settings.options?.length > 0 ? (
-                    <div className="fi__optionscontainer">
-                        {settings.options.map((option, index) => (
-                            <div
-                                key={`${settings.id}-checkbox-option-${index}`}
-                                className="fi__checkboxcontainer"
-                            >
-                                <input
-                                    name={settings.id}
-                                    data-name={settings.id}
-                                    type="radio"
-                                    className="fi__customcheckbox"
-                                    value={option.id}
-                                    checked={
-                                        parseInt(inputValue) ===
-                                        parseInt(option.id)
-                                    }
-                                    onChange={onChange}
-                                />
-                                <label className="fi__checkboxlabel">
-                                    {option.label}
-                                </label>{' '}
-                            </div>
-                        ))}
-                    </div>
-                ) : null;
-            case 'radio-ajax':
-                return options?.length > 0 ? (
-                    <div className="fi__optionscontainer">
-                        {options.map((option, index) => (
-                            <div
-                                key={`${settings.id}-checkbox-option-${index}`}
-                                className="fi__checkboxcontainer"
-                            >
-                                <input
-                                    name={settings.id}
-                                    data-name={settings.id}
-                                    type="radio"
-                                    className="fi__customcheckbox"
-                                    value={option.id}
-                                    checked={
-                                        parseInt(inputValue) ===
-                                        parseInt(option.id)
-                                    }
-                                    onChange={onChange}
-                                />
-                                <label className="fi__checkboxlabel">
-                                    {option.label}
-                                </label>{' '}
-                            </div>
-                        ))}
-                    </div>
-                ) : null;
-            case 'richeditor':
-                return (
-                    <Editor
-                        tinymceScriptSrc="https://d16lktya8ojp5z.cloudfront.net/generic/packages/tinymce_v701/tinymce.min.js"
-                        licenseKey="gpl"
-                        onEditorChange={(value, e) => {
-                            onChangeRicheditor(e, value, settings.id);
-                        }}
-                        onInit={(evt, editor) => (editorRef.current = editor)}
-                        value={inputValue || ''}
-                        init={{
-                            branding: false,
-                            height: settings.height ? settings.height : 500,
-                            menubar: false,
-                            plugins: [
-                                'advlist',
-                                'autolink',
-                                'lists',
-                                'link',
-                                'image',
-                                'charmap',
-                                'preview',
-                                'anchor',
-                                'searchreplace',
-                                'visualblocks',
-                                'code',
-                                'fullscreen',
-                                'insertdatetime',
-                                'media',
-                                'table',
-                                'code',
-                            ],
-                            toolbar:
-                                'undo redo | blocks | ' +
-                                'bold italic forecolor | alignleft aligncenter ' +
-                                'alignright alignjustify | bullist numlist outdent indent | ' +
-                                'removeformat | table',
-                            content_style:
-                                'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
-                        }}
-                    />
-                );
-            case 'signature':
-                return (
-                    <>
-                        {inputValue.signature ? (
-                            <div className={styles.signaturePlaceholder}>
-                                <img
-                                    src={inputValue.signature}
-                                    alt="Signature"
-                                    className={styles.signatureImage}
-                                />
-                                <p>
-                                    <strong>Name:</strong>{' '}
-                                    {inputValue.name ? inputValue.name : null}
-                                </p>
-                                <p>
-                                    <strong>Date:</strong>{' '}
-                                    {inputValue.date
-                                        ? moment(inputValue.date).format(
-                                              'DD-MM-YYYY'
-                                          )
-                                        : null}
-                                </p>
-                            </div>
-                        ) : (
-                            <button
-                                type="button"
-                                className={styles.signButton}
-                                onClick={(e) => {
-                                    e.preventDefault();
-
-                                    if (settings.role) {
-                                        if (
-                                            userProfile?.roles[0]?.name ===
-                                            settings.role
-                                        ) {
-                                            onChangeSignature(settings.id);
-                                        } else {
-                                            toast.error(
-                                                `A user with the role of ${settings.role} is required to sign this document`
-                                            );
-                                        }
-                                    } else {
-                                        onChangeSignature(settings.id);
-                                    }
-                                }}
-                            >
-                                Click to Sign
-                            </button>
-                        )}
-                    </>
-                );
-            case 'table_radio':
-                let tableRadioColumns = [];
-                let tableRadioRows = [];
-
-                for (const key in formData) {
-                    if (formData[key].id === settings.id) {
-                        if (formData[key].hasOwnProperty('options')) {
-                            tableRadioColumns = formData[key].options;
-                            tableRadioRows = formData[key].rows;
-                            break; // Assuming there's only one match needed, break out of the loop
-                        }
-                    }
-                }
-
-                return (
-                    <table className={styles.contentTable}>
-                        <thead>
-                            <tr>
-                                <th></th>
-                                {tableRadioColumns.map((column) => (
-                                    <th
-                                        key={`${settings.id}-${column.id}`}
-                                        style={{
-                                            width: '250px',
-                                            whiteSpace: 'nowrap',
-                                        }}
-                                    >
-                                        {column.label}
-                                    </th>
-                                ))}
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {tableRadioRows.map((row) => (
-                                <tr
-                                    key={`table-radio-row-${settings.id}-${row.id}`}
-                                >
-                                    <td
-                                        style={{
-                                            whiteSpace: 'nowrap',
-                                        }}
-                                    >
-                                        {row.label}
-                                    </td>
-                                    {tableRadioColumns.map((column) => (
-                                        <td
-                                            key={`table-radio-cell-${settings.id}-${row.id}-${column.id}`}
-                                        >
-                                            <input
-                                                type="checkbox"
-                                                name={row.id}
-                                                data-row-id={row.id}
-                                                data-column-id={column.id}
-                                                data-id={settings.id}
-                                                onChange={onChangeTableRadio}
-                                                checked={
-                                                    row.value?.[column.id] ===
-                                                    true
-                                                }
-                                            />
-                                        </td>
-                                    ))}
-                                </tr>
-                            ))}
-                        </tbody>
-                    </table>
-                );
-            case 'table_text':
-                let tableTextColumns = [];
-                let tableTextValues = [];
-
-                for (const key in formData) {
-                    if (formData[key].id === settings.id) {
-                        if (formData[key].hasOwnProperty('options')) {
-                            tableTextColumns = formData[key].options;
-                            tableTextValues = formData[key].value;
-                            break; // Assuming there's only one match needed, break out of the loop
-                        }
-                    }
-                }
-                return (
-                    <table className={styles.contentTable}>
-                        <thead>
-                            <tr>
-                                {tableTextColumns.map((column, columnKey) => (
-                                    <th
-                                        key={`${settings.id}-${column.id}-${columnKey}`}
-                                    >
-                                        {column.label}
-                                    </th>
-                                ))}
-                                <th style={{ textAlign: 'center' }}>
-                                    <CirclePlus
-                                        onClick={() => {
-                                            onChangeAddTableTextRow(
-                                                settings.id
-                                            );
-                                        }}
-                                        size={24}
-                                        data-id={settings.id}
-                                    />
-                                </th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {tableTextValues?.length > 0 &&
-                                tableTextValues?.map((row, rowKey) => (
-                                    <tr
-                                        key={`${settings.id}-${row.id}-${rowKey}-row`}
-                                    >
-                                        {row?.map((cell, cellKey) => (
-                                            <td
-                                                key={`${settings.id}}-${cellKey}-input`}
-                                            >
-                                                {tableTextColumns[cellKey]
-                                                    .type === 'checkbox' ? (
-                                                    <input
-                                                        type={'checkbox'}
-                                                        checked={cell || false}
-                                                        data-id={settings.id}
-                                                        onChange={(e) =>
-                                                            onChangeTableText(
-                                                                e,
-                                                                rowKey,
-                                                                cellKey
-                                                            )
-                                                        }
-                                                    />
-                                                ) : (
-                                                    <input
-                                                        type={'text'}
-                                                        value={cell || ''}
-                                                        data-id={settings.id}
-                                                        onChange={(e) =>
-                                                            onChangeTableText(
-                                                                e,
-                                                                rowKey,
-                                                                cellKey
-                                                            )
-                                                        }
-                                                    />
-                                                )}
-                                            </td>
-                                        ))}
-                                    </tr>
-                                ))}
-                        </tbody>
-                    </table>
-                );
-            case 'textarea':
-                return (
-                    <textarea
-                        data-name={settings.id}
-                        className={inputClass[settings.id]}
-                        onChange={onChange}
-                        value={
-                            inputValue && inputValue !== 'null'
-                                ? inputValue
-                                : ''
-                        }
-                        style={{ height: '200px' }}
-                    ></textarea>
-                );
-            case 'text':
-            case 'password':
-                return (
-                    <input
-                        type={settings.type}
-                        data-name={settings.id}
-                        className={inputClass[settings.id]}
-                        placeholder=" "
-                        onChange={onChange}
-                        value={
-                            inputValue && inputValue !== 'null'
-                                ? inputValue
-                                : ''
-                        }
-                        readOnly={settings.readOnly ? settings.readOnly : false}
-                        autoComplete="off"
-                    />
-                );
-            default:
-                return '';
-        }
-    };
-
-    const renderFieldLabel = () => {
-        if (
-            ![
-                'address',
-                'async-dropdown-ajax',
-                'checkbox',
-                'colour',
-                'copytoclipboard',
-                'date',
-                'datetime',
-                'dropdown',
-                'dropdown-ajax',
-                'dynamicdata',
-                'file',
-                'gallery',
-                'image',
-                'line-break',
-                'multi-dropdown',
-                'multi-dropdown-ajax',
-                'plaindate',
-                'plaindatetime',
-                'plainrelation',
-                'plainrelationarray',
-                'plaintext',
-                'plaintextheading',
-                'radio',
-                'radio-ajax',
-                'richeditor',
-                'signature',
-                'table_radio',
-                'table_text',
-                'time',
-                'toggle',
-            ].includes(settings.type)
-        ) {
-            return (
-                <span className={styles.fi__span}>
-                    {settings.label} {settings.required ? '*' : ''}
-                </span>
-            );
-        }
-    };
-
-    const renderAdditionalContainer = () => {
-        switch (settings.type) {
-            case 'date':
-            case 'datetime':
-                return (
-                    <DatePicker
-                        dateFormat={
-                            settings.format
-                                ? settings.format
-                                : settings.type === 'datetime'
-                                ? 'dd-MM-yyyy hh:mm aa'
-                                : 'dd-MM-yyyy'
-                        }
-                        isClearable
-                        className={inputClass[settings.id]}
-                        selected={inputValue || ''}
-                        showMonthDropdown
-                        showYearDropdown
-                        scrollableYearDropdown
-                        onChange={(date) => onChangeDate(date, settings.id)}
-                        showTimeSelect={settings.type === 'datetime'}
-                        showTimeSelectOnly={settings.type === 'time'}
-                        timeIntervals={
-                            settings.type === 'time' ? 15 : undefined
-                        }
-                        timeCaption={
-                            settings.type === 'time' ? 'Time' : undefined
-                        }
-                        shouldCloseOnSelect={true}
-                    />
-                );
-            case 'time':
-                return (
-                    <DatePicker
-                        dateFormat="hh:mm aa"
-                        isClearable
-                        className={inputClass[settings.id]}
-                        selected={inputValue || ''}
-                        showMonthDropdown
-                        showYearDropdown
-                        scrollableYearDropdown
-                        onChange={(date) => onChangeDate(date, settings.id)}
-                        showTimeSelect={true}
-                        showTimeSelectOnly={true}
-                        timeIntervals={15}
-                        timeCaption={'Time'}
-                        shouldCloseOnSelect={true}
-                    />
-                );
-            case 'toggle':
-                return (
-                    <div>
-                        <Toggle
-                            name={settings.id}
-                            data-name={settings.id}
-                            data-show={
-                                settings.show
-                                    ? JSON.stringify(settings.show)
-                                    : ''
-                            }
-                            checked={
-                                inputValue !== undefined
-                                    ? inputValue === ''
-                                        ? false
-                                        : inputValue === 'on'
-                                        ? false
-                                        : inputValue
-                                    : false
-                            }
-                            onChange={onChangeToggle}
-                        />
-                        <span className={styles.fi__toggletxt}>
-                            {settings.label} {settings.required ? '*' : ''}
-                        </span>
-                    </div>
-                );
-            default:
-                return '';
-        }
-    };
-
-    /** Child Form */
-    const [childForm, setChildForm] = useState({});
-    const [childFormShow, setChildFormShow] = useState(false);
-
-    const childFormClose = () => {
-        setChildFormShow(false);
-        setChildForm({});
-    };
-
-    const childFormOpen = () => {
-        setChildFormShow(true);
-    };
-
-    const handleAddEntry = (form) => {
-        if (form) {
-            let f = form;
-
-            form.fields.forEach((item, itemKey) => {
-                if (item.hasOwnProperty('dataId') && formData[item.dataId]) {
-                    f.fields[itemKey].value = formData[item.dataId].value
-                        ? formData[item.dataId].value
-                        : formData[item.dataId];
-                }
-            });
-
-            setChildForm(f);
-            childFormOpen();
-        }
-    };
-
-    const handleReload = () => {
-        setCounter(counter + 1);
-    };
-
-    return (
-        <div className={formItemClass} style={formItemStyle}>
-            <label className={styles.fi__label}>
-                {renderLabel()}
-                {renderInput()}
-                {renderFieldLabel()}
-            </label>
-            {renderAdditionalContainer()}
-            <Popup
-                open={childFormShow}
-                onClose={childFormClose}
-                closeOnDocumentClick={false}
-            >
-                <Form
-                    ajaxSetting={childForm.ajaxSetting}
-                    api={api}
-                    closeModal={childFormClose}
-                    columnId={0}
-                    fetchTable={handleReload}
-                    formSettings={childForm}
-                    formType={'create'}
-                    gridRef={null}
-                    mapbox={null}
-                    modalOpen={childFormOpen}
-                    paramValue={null}
-                    style={style}
-                    updateForm={setChildForm}
-                />
-            </Popup>
-        </div>
-    );
-}
-
-export default Field;