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

package/src/components/crm/Field.jsx

@@ -82,6 +82,7 @@ function Field({
     useEffect(() => {
         const fetchOptions = () => {
             let filter = {};
+
             if (settings.where?.length > 0) {
                 filter = {
                     where: settings.where,
@@ -207,6 +208,12 @@ 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,
@@ -253,65 +260,70 @@ function Field({
     }, [settings.options, settings, counter]);
 
     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 {
+        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)
+            ) {
                 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>;
+            } else if (['section'].includes(settings.type)) {
+                return (
+                    <div className={styles.gridtxt__header}>
+                        <span>{settings.label}</span>
+                    </div>
+                );
+            } 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>
-            );
         }
     };
 
@@ -368,23 +380,26 @@ function Field({
                 );
             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}
-                    />
+                    <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>
                 );
             case 'checkbox':
                 return (
@@ -673,7 +688,6 @@ function Field({
                                 className={inputClass[settings.id]}
                                 onChange={onChange}
                             />
-                            {console.info(inputValue)}
                             {inputValue && inputValue.length > 0 && (
                                 <ul className="file-list">
                                     {inputValue.map((file, index) => (
@@ -807,6 +821,13 @@ 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"
@@ -814,11 +835,7 @@ function Field({
                         className={inputClass[settings.id]}
                         placeholder=" "
                         onChange={onChange}
-                        value={
-                            inputValue && inputValue !== 'null'
-                                ? inputValue
-                                : ''
-                        }
+                        value={formattedDate || ''}
                         autoComplete="off"
                     />
                 );
@@ -970,6 +987,7 @@ function Field({
                                     ? settings.options
                                     : options
                             }
+                            isCreatable={settings.isCreatable || false}
                             dataOptions={dataOptions}
                             style={style}
                         />
@@ -1172,77 +1190,6 @@ 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 (
                     <>
@@ -1724,6 +1671,7 @@ function Field({
                 'signature',
                 'table_radio',
                 'table_text',
+                'textarea',
                 'time',
                 'toggle',
             ].includes(settings.type)
@@ -1767,6 +1715,78 @@ 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
@@ -1868,7 +1888,13 @@ function Field({
 
     return (
         <div className={formItemClass} style={formItemStyle}>
-            <label className={styles.fi__label}>
+            <label
+                className={
+                    ['richeditor', 'textarea'].includes(settings.type)
+                        ? ''
+                        : 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
-            Object.keys(inputValue).forEach((key) => {
-                if (formData.hasOwnProperty(key)) {
+            // Update any matching form data properties except for the second item
+            Object.keys(inputValue).forEach((key, index) => {
+                if (index !== 1 && formData.hasOwnProperty(key)) {
                     updateFormData({ [key]: inputValue[key] });
                 }
             });
@@ -287,6 +287,7 @@ 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':
@@ -584,41 +585,39 @@ 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) {
-                            if (
-                                formData[item.id] === null ||
-                                formData[item.id] === ''
-                            ) {
+                            // Check if formData[item.id] is null, undefined, or an empty string
+                            if (!formData[item.id]) {
+                                // Check for required_check dependency
                                 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] = '';
+                                _inputClass[item.id] = ''; // Clear error class if valid
                             }
                         } else if (
-                            item.hasOwnProperty('required_rely') &&
                             item.required_rely &&
                             formData[item.required_rely] &&
-                            (formData[item.id] === null ||
-                                formData[item.id] === '')
+                            !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] = '';
+                            _inputClass[item.id] = ''; // Clear error class if not required
                         }
                     });
 
@@ -671,7 +670,14 @@ function Form({
 
                     if (!_.isEmpty(formData)) {
                         Object.keys(formData).forEach((item) => {
-                            if (formData[item] instanceof File) {
+                            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))
+                            ) {
                                 fileUpload = true;
                                 fileKey = item;
 
@@ -865,7 +871,9 @@ function Form({
                             _formData[id] =
                                 newValue instanceof Date
                                     ? newValue
-                                    : moment(newValue).toDate();
+                                    : newValue !== undefined
+                                    ? moment(newValue).toDate()
+                                    : '';
                         } else {
                             _formData[id] = newValue;
                         }
@@ -882,23 +890,25 @@ function Form({
                     method,
                     payload = {};
 
-                const getDataId = () => {
-                    for (const item of ajaxSetting.where) {
-                        if (
-                            item.hasOwnProperty('urlParam') &&
-                            item.urlParam === 'dataId'
-                        ) {
-                            return item.value;
+                if (ajaxSetting?.where) {
+                    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 = getDataId();
+                    let dataId = paramValue || getDataId();
 
                     urlSuffix = '/json/get';
                     method = 'POST';
@@ -1367,15 +1377,18 @@ function Form({
         );
     } else {
         return (
-            <div className="modalwrap top--modal">
-                <div className="modal">
-                    <div className="modal__header">
+            <div className={styles.modalwrap}>
+                <div className={styles.modal}>
+                    <div className={styles.modal__header}>
                         <h1>{formSettings[formType]?.title}</h1>
-                        <button className="modal__close" onClick={closeModal}>
-                            <CircleX strokeWidth={1} size={24} />
+                        <button
+                            className={styles.modal__close}
+                            onClick={closeModal}
+                        >
+                            <CircleX strokeWidth={2} size={24} />
                         </button>
                     </div>
-                    <div className="modal__content">
+                    <div className={styles.modal__content}>
                         <div className={styles.formcontainer}>
                             <form className={styles.modalForm}>
                                 {formSettings?.fields?.map((item, index) => {