@visns-studio/visns-components 5.0.1-8.1 → 5.0.1

package/src/components/crm/Field.jsx

@@ -82,7 +82,6 @@ function Field({
     useEffect(() => {
         const fetchOptions = () => {
             let filter = {};
-
             if (settings.where?.length > 0) {
                 filter = {
                     where: settings.where,
@@ -208,12 +207,6 @@ function Field({
                         filter.orderBy = s.orderBy;
                     }
 
-                    if (a.where) {
-                        forEach(a.where, (w) => {
-                            filter.where.push(w);
-                        });
-                    }
-
                     CustomFetch(s.child.url, 'POST', filter, function (result) {
                         childDropdownCallback({
                             id: s.child.id,
@@ -260,70 +253,65 @@ function Field({
     }, [settings.options, settings, counter]);
 
     const renderLabel = () => {
-        if (settings.label && settings.label !== '') {
-            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',
-                    'signature',
-                    'table_radio',
-                    'table_text',
-                    'time',
-                ].includes(settings.type)
-            ) {
+        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 className={`${styles.fi__span} ${styles.prefocus}`}>
-                        {settings.label} {settings.required ? '*' : ''}
+                    <span>
+                        {settings.description
+                            ? parse(settings.description)
+                            : ''}
                     </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>;
-            } else if (['section'].includes(settings.type)) {
+            } else {
                 return (
-                    <div className={styles.gridtxt__header}>
-                        <span>{settings.label}</span>
-                    </div>
+                    <span className={`${styles.fi__span} ${styles.prefocus}`}>
+                        {settings.label} {settings.required ? '*' : ''}
+                    </span>
                 );
-            } else if (['richeditor', 'textarea'].includes(settings.type)) {
-                return settings.label;
             }
+        } else if (['plaintextheading'].includes(settings.type)) {
+            return <h2>{settings.label ? settings.label : ''}</h2>;
+        } else if (['section'].includes(settings.type)) {
+            return (
+                <div className={styles.gridtxt__header}>
+                    <span>{settings.label}</span>
+                </div>
+            );
         }
     };
 
@@ -380,26 +368,23 @@ function Field({
                 );
             case 'async-dropdown-ajax':
                 return (
-                    <div className={styles.dropdownContainer}>
-                        <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}
-                            isCreatable={settings.isCreatable || false}
-                        />
-                    </div>
+                    <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 (
@@ -688,6 +673,7 @@ function Field({
                                 className={inputClass[settings.id]}
                                 onChange={onChange}
                             />
+                            {console.info(inputValue)}
                             {inputValue && inputValue.length > 0 && (
                                 <ul className="file-list">
                                     {inputValue.map((file, index) => (
@@ -821,13 +807,6 @@ function Field({
 
                 return htmlContainer;
             case 'html5_date':
-                // Convert inputValue to 'YYYY-MM-DD' if necessary
-                const formattedDate =
-                    inputValue &&
-                    moment(inputValue, moment.ISO_8601, true).isValid()
-                        ? moment(inputValue).format('YYYY-MM-DD')
-                        : inputValue; // Use as-is if it's already in the correct format or invalid
-
                 return (
                     <input
                         type="date"
@@ -835,7 +814,11 @@ function Field({
                         className={inputClass[settings.id]}
                         placeholder=" "
                         onChange={onChange}
-                        value={formattedDate || ''}
+                        value={
+                            inputValue && inputValue !== 'null'
+                                ? inputValue
+                                : ''
+                        }
                         autoComplete="off"
                     />
                 );
@@ -987,7 +970,6 @@ function Field({
                                     ? settings.options
                                     : options
                             }
-                            isCreatable={settings.isCreatable || false}
                             dataOptions={dataOptions}
                             style={style}
                         />
@@ -1190,6 +1172,77 @@ function Field({
                         ))}
                     </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:
+                                'insertTextDropdown | 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 }',
+                            setup: (editor) => {
+                                // Check if insertText exists and is an array of objects
+                                if (
+                                    settings.insertText &&
+                                    Array.isArray(settings.insertText) &&
+                                    settings.insertText.length > 0
+                                ) {
+                                    editor.ui.registry.addMenuButton(
+                                        'insertTextDropdown',
+                                        {
+                                            text: 'Insert Text',
+                                            fetch: (callback) => {
+                                                const items =
+                                                    settings.insertText.map(
+                                                        (textObj) => ({
+                                                            type: 'menuitem',
+                                                            text: textObj.text,
+                                                            onAction: () =>
+                                                                editor.insertContent(
+                                                                    textObj.content
+                                                                ),
+                                                        })
+                                                    );
+                                                callback(items);
+                                            },
+                                        }
+                                    );
+                                }
+                            },
+                        }}
+                    />
+                );
             case 'signature':
                 return (
                     <>
@@ -1671,7 +1724,6 @@ function Field({
                 'signature',
                 'table_radio',
                 'table_text',
-                'textarea',
                 'time',
                 'toggle',
             ].includes(settings.type)
@@ -1715,78 +1767,6 @@ function Field({
                         shouldCloseOnSelect={true}
                     />
                 );
-            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',
-                                'hr',
-                            ],
-                            toolbar:
-                                'insertTextDropdown | undo redo | blocks | ' +
-                                'bold italic forecolor | alignleft aligncenter ' +
-                                'alignright alignjustify | bullist numlist outdent indent | ' +
-                                'hr | removeformat | table | code',
-                            content_style:
-                                'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
-                            setup: (editor) => {
-                                // Check if insertText exists and is an array of objects
-                                if (
-                                    settings.insertText &&
-                                    Array.isArray(settings.insertText) &&
-                                    settings.insertText.length > 0
-                                ) {
-                                    editor.ui.registry.addMenuButton(
-                                        'insertTextDropdown',
-                                        {
-                                            text: 'Insert Text',
-                                            fetch: (callback) => {
-                                                const items =
-                                                    settings.insertText.map(
-                                                        (textObj) => ({
-                                                            type: 'menuitem',
-                                                            text: textObj.text,
-                                                            onAction: () =>
-                                                                editor.insertContent(
-                                                                    textObj.content
-                                                                ),
-                                                        })
-                                                    );
-                                                callback(items);
-                                            },
-                                        }
-                                    );
-                                }
-                            },
-                        }}
-                    />
-                );
             case 'time':
                 return (
                     <DatePicker
@@ -1888,13 +1868,7 @@ function Field({
 
     return (
         <div className={formItemClass} style={formItemStyle}>
-            <label
-                className={
-                    ['richeditor', 'textarea'].includes(settings.type)
-                        ? ''
-                        : styles.fi__label
-                }
-            >
+            <label className={styles.fi__label}>
                 {renderLabel()}
                 {renderInput()}
                 {renderFieldLabel()}

package/src/components/crm/Form.jsx

@@ -215,9 +215,9 @@ function Form({
         const handleSelectOption = () => {
             updateFormData({ [id]: inputValue });
 
-            // Update any matching form data properties except for the second item
-            Object.keys(inputValue).forEach((key, index) => {
-                if (index !== 1 && formData.hasOwnProperty(key)) {
+            // Update any matching form data properties
+            Object.keys(inputValue).forEach((key) => {
+                if (formData.hasOwnProperty(key)) {
                     updateFormData({ [key]: inputValue[key] });
                 }
             });
@@ -287,7 +287,6 @@ function Form({
         // Switch cases to handle different actions
         switch (action.action) {
             case 'select-option':
-            case 'create-option': // New case to handle create-option
                 handleSelectOption();
                 break;
             case 'clear':
@@ -585,39 +584,41 @@ function Form({
 
                 if (['create', 'update'].includes(formType)) {
                     fields.forEach((item) => {
-                        // Skip createOnly fields if formType is 'update'
                         if (formType === 'update' && item.createOnly) {
                             return;
                         }
 
-                        // Check if the item is required
                         if (item.required) {
-                            // Check if formData[item.id] is null, undefined, or an empty string
-                            if (!formData[item.id]) {
-                                // Check for required_check dependency
+                            if (
+                                formData[item.id] === null ||
+                                formData[item.id] === ''
+                            ) {
                                 if (
+                                    item.hasOwnProperty('required_check') &&
                                     item.required_check &&
                                     !formData[item.required_check]
                                 ) {
                                     validation += `${item.label} is a required field.<br/>`;
                                     _inputClass[item.id] = styles.inputError;
                                 } else {
+                                    console.info('b', formData, item.id);
                                     validation += `${item.label} is a required field.<br/>`;
                                     _inputClass[item.id] = styles.inputError;
                                 }
                             } else {
-                                _inputClass[item.id] = ''; // Clear error class if valid
+                                _inputClass[item.id] = '';
                             }
                         } else if (
+                            item.hasOwnProperty('required_rely') &&
                             item.required_rely &&
                             formData[item.required_rely] &&
-                            !formData[item.id]
+                            (formData[item.id] === null ||
+                                formData[item.id] === '')
                         ) {
-                            // Check if the dependent required field is empty when it should be filled
                             validation += `${item.label} is a required field.<br/>`;
                             _inputClass[item.id] = styles.inputError;
                         } else {
-                            _inputClass[item.id] = ''; // Clear error class if not required
+                            _inputClass[item.id] = '';
                         }
                     });
 
@@ -670,14 +671,7 @@ function Form({
 
                     if (!_.isEmpty(formData)) {
                         Object.keys(formData).forEach((item) => {
-                            const value = formData[item];
-
-                            // Check if it's a single File or an array of File objects
-                            if (
-                                value instanceof File ||
-                                (Array.isArray(value) &&
-                                    value.every((file) => file instanceof File))
-                            ) {
+                            if (formData[item] instanceof File) {
                                 fileUpload = true;
                                 fileKey = item;
 
@@ -871,9 +865,7 @@ function Form({
                             _formData[id] =
                                 newValue instanceof Date
                                     ? newValue
-                                    : newValue !== undefined
-                                    ? moment(newValue).toDate()
-                                    : '';
+                                    : moment(newValue).toDate();
                         } else {
                             _formData[id] = newValue;
                         }
@@ -890,25 +882,23 @@ function Form({
                     method,
                     payload = {};
 
-                if (ajaxSetting?.where) {
-                    const getDataId = () => {
-                        for (const item of ajaxSetting.where) {
-                            if (
-                                item.hasOwnProperty('urlParam') &&
-                                item.urlParam === 'dataId'
-                            ) {
-                                return item.value;
-                            }
+                const getDataId = () => {
+                    for (const item of ajaxSetting.where) {
+                        if (
+                            item.hasOwnProperty('urlParam') &&
+                            item.urlParam === 'dataId'
+                        ) {
+                            return item.value;
                         }
-                        return 0;
-                    };
-                }
+                    }
+                    return 0;
+                };
 
                 if (
                     formSettings.hasOwnProperty('json') &&
                     formSettings.json === true
                 ) {
-                    let dataId = paramValue || getDataId();
+                    let dataId = getDataId();
 
                     urlSuffix = '/json/get';
                     method = 'POST';
@@ -1381,10 +1371,7 @@ function Form({
                 <div className={styles.modal}>
                     <div className={styles.modal__header}>
                         <h1>{formSettings[formType]?.title}</h1>
-                        <button
-                            className={styles.modal__close}
-                            onClick={closeModal}
-                        >
+                        <button className={styles.modal__close} onClick={closeModal}>
                             <CircleX strokeWidth={2} size={24} />
                         </button>
                     </div>