@visns-studio/visns-components 4.5.11 → 4.5.13

package/components/crm/DataGrid.jsx

@@ -2561,6 +2561,7 @@ const DataGrid = forwardRef(
                     open={modalShow}
                     onClose={modalClose}
                     closeOnDocumentClick={false}
+                    nested
                 >
                     <Form
                         ajaxSetting={ajaxSetting}

package/components/crm/Field.jsx

@@ -6,6 +6,7 @@ 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';
@@ -15,6 +16,7 @@ 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';
@@ -54,6 +56,7 @@ function Field({
     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('formItem');
@@ -142,7 +145,7 @@ function Field({
         } else if (settings.size === 'quarter') {
             setFormItemClass('formItem qtrItem');
         }
-    }, [settings]);
+    }, [settings, counter]);
 
     useEffect(() => {
         const fetchChildDropdownData = () => {
@@ -220,7 +223,7 @@ function Field({
         };
 
         fetchChildDropdownData();
-    }, [inputValue, settings]);
+    }, [inputValue, settings, counter]);
 
     useEffect(() => {
         const processOptions = () => {
@@ -532,18 +535,35 @@ function Field({
             case 'dropdown':
             case 'dropdown-ajax':
                 return (
-                    <Select
-                        settings={settings}
-                        className={inputClass[settings.id]}
-                        onChange={onChange}
-                        inputValue={inputValue === null ? '' : inputValue}
-                        options={
-                            settings.type === 'dropdown'
-                                ? settings.options
-                                : options
-                        }
-                        dataOptions={dataOptions}
-                    />
+                    <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 (
@@ -849,28 +869,44 @@ function Field({
             case 'multi-dropdown':
             case 'multi-dropdown-ajax':
                 return (
-                    <MultiSelect
-                        settings={settings}
-                        className={inputClass[settings.id]}
-                        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}
-                    />
+                    <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 (
@@ -1441,6 +1477,40 @@ function Field({
         }
     };
 
+    /** 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}>
@@ -1449,6 +1519,27 @@ function Field({
                 {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>
     );
 }

package/components/crm/Form.jsx

@@ -1348,7 +1348,7 @@ function Form({
             <div className="modalwrap top--modal">
                 <div className="modal">
                     <div className="modal__header">
-                        <h1>{formSettings[formType].title}</h1>
+                        <h1>{formSettings[formType]?.title}</h1>
                         <button className="modal__close" onClick={closeModal}>
                             <CircleX strokeWidth={1} size={24} />
                         </button>
@@ -1356,7 +1356,7 @@ function Form({
                     <div className="modal__content">
                         <div className={styles.formcontainer}>
                             <form className={styles.modalForm}>
-                                {formSettings.fields.map((item, index) => {
+                                {formSettings?.fields?.map((item, index) => {
                                     if (
                                         item.hasOwnProperty('hide') &&
                                         item.hide === true

package/components/crm/MultiSelect.jsx

@@ -4,6 +4,7 @@ import Select, { createFilter } from 'react-select';
 import styles from './styles/AsyncSelect.module.css';
 
 function MultiSelect({
+    className,
     inputValue,
     multi,
     onChange,
@@ -52,7 +53,11 @@ function MultiSelect({
             onChange={(inputValue, action) => {
                 onChange(inputValue, action, settings.id);
             }}
-            className={styles.visns__ms}
+            className={
+                className
+                    ? `${styles.visns__ms} ${className}`
+                    : styles.visns__ms
+            }
             classNamePrefix="visns-select"
             styles={{
                 menu: (provided) => ({ ...provided, zIndex: 9999 }),

package/components/crm/generic/GenericDynamic.jsx

@@ -268,8 +268,6 @@ const GenericDynamic = ({
                 return prevActiveForm;
             }
 
-            console.info(prevActiveForm);
-
             // Create a new row with placeholders based on the options length
             const numOptions = prevActiveForm[formKey].options.length;
             const newRow = Array(numOptions).fill(''); // Create an array of empty strings
@@ -590,8 +588,6 @@ const GenericDynamic = ({
     }, [activeForm]);
 
     const shouldDisplayFormList = (data, type) => {
-        console.info(data[type]);
-
         if (!data[type] || !Array.isArray(data[type])) {
             return false;
         }

package/components/crm/generic/GenericIndex.jsx

@@ -31,7 +31,6 @@ function useConfig(setting, tabs, filters, setRowsSelected, tableSetting) {
     const [subnav, setSubnav] = useState(filters || []);
 
     useEffect(() => {
-        console.info(setting);
         setConfig({
             ajaxSetting: setting.ajaxSetting,
             form: setting.form,

package/components/crm/styles/Field.module.css

@@ -7,6 +7,35 @@
     box-sizing: border-box;
 }
 
+.dropdownContainer {
+    position: relative;
+    width: 100%;
+}
+
+.selectFullWidth {
+    width: 90%;
+}
+
+.buttonRight {
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 1;
+    background: var(--primary-color);
+    color: var(--secondary-color);
+    padding: 1rem 0.5rem;
+    border: none;
+    border-radius: var(--br);
+    cursor: pointer;
+    transition: background 0.3s;
+}
+
+.buttonRight:hover {
+    background: var(--secondary-color);
+    color: var(--primary-color);
+}
+
 .formItem .fi__label {
     position: relative;
     display: block;
@@ -51,6 +80,25 @@ select:not(:placeholder-shown) + .fi__span {
     top: 0;
 }
 
+.fi__button--right {
+    position: absolute;
+    right: 50px;
+    top: 20px;
+    z-index: 500;
+    background: var(--primary-color);
+    color: var(--item-color);
+    padding: 0.2rem 0.4rem;
+    border: none;
+    border-radius: var(--br);
+    cursor: pointer;
+    transition: background 0.3s;
+}
+
+.fi__button--right:hover {
+    background: var(--secondary-color);
+    color: var(--primary-color);
+}
+
 .formItem textarea,
 .formItem select,
 .formItem

package/package.json

@@ -58,7 +58,7 @@
         "react-dom": "^17.0.1"
     },
     "name": "@visns-studio/visns-components",
-    "version": "4.5.11",
+    "version": "4.5.13",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "index.js",
     "scripts": {