@visns-studio/visns-components 4.5.12 → 4.6.0

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 = () => {
@@ -262,6 +265,8 @@ function Field({
                 'copytoclipboard',
                 'date',
                 'datetime',
+                'dropdown',
+                'dropdown-ajax',
                 'dynamicdata',
                 'file',
                 'gallery',
@@ -532,18 +537,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 +871,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 (
@@ -1329,6 +1367,8 @@ function Field({
                 'copytoclipboard',
                 'date',
                 'datetime',
+                'dropdown',
+                'dropdown-ajax',
                 'dynamicdata',
                 'file',
                 'gallery',
@@ -1441,6 +1481,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 +1523,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/GenericDetail.jsx

@@ -655,7 +655,11 @@ function GenericDetail({
                                 <GenericDynamic
                                     data={data}
                                     fetchData={handleReload}
-                                    label={data.task_template.label}
+                                    label={
+                                        data.task_template
+                                            ? data.task_template.label
+                                            : ''
+                                    }
                                     multiple={false}
                                     originalData={data}
                                     primaryKey={activeTabConfig.setting.key}

package/components/crm/generic/styles/GenericDetail.module.css

@@ -207,9 +207,9 @@
 .crmtitle {
     border: none;
     min-height: auto;
-    padding: 5px 20px;
+    padding: 10px 20px;
     margin: 0;
-    background: var(--primary-color);
+    background: var(--tertiary-color);
     border-radius: var(--br);
     border: 1px solid rgba(var(--item-color-rgb), 1.15);
     position: relative;
@@ -217,26 +217,22 @@
     align-items: center;
 
     h1 {
-        color: var(--background-color);
         font-weight: 700;
-        font-size: 1.15em;
+        font-size: 1.45em;
         margin: 0;
         padding: 0.65rem 0;
-        display: flex;
-        align-items: center;
-        gap: 0.25rem;
 
         a {
             text-decoration: none;
             color: var(--secondary-color);
+            font-weight: 300;
         }
 
         svg {
-            color: rgba(var(--tertiary-color-rgb), 0.5);
+            color: rgba(var(--primary-color-rgb), 0.5);
             position: relative;
-            top: 0;
-            margin: 0 0.5rem;
-            max-width: 15px;
+            top: 2px;
+            margin: 0 0.25rem;
         }
     }
 }

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

@@ -11,10 +11,10 @@
         "akar-icons": "^1.9.31",
         "array-move": "^4.0.0",
         "awesome-debounce-promise": "^2.1.0",
-        "axios": "^1.7.2",
+        "axios": "^1.7.3",
         "dayjs": "^1.11.12",
         "file-saver": "^2.0.5",
-        "framer-motion": "^11.3.19",
+        "framer-motion": "^11.3.21",
         "html-react-parser": "^5.1.12",
         "lodash": "^4.17.21",
         "lodash.debounce": "^4.0.8",
@@ -41,7 +41,7 @@
         "react-to-print": "^2.15.1",
         "react-toastify": "^10.0.5",
         "react-toggle": "^4.1.3",
-        "react-tooltip": "^5.27.1",
+        "react-tooltip": "^5.28.0",
         "react-window": "^1.8.10",
         "reactjs-popup": "^2.0.6",
         "truncate": "^3.0.0",
@@ -58,7 +58,7 @@
         "react-dom": "^17.0.1"
     },
     "name": "@visns-studio/visns-components",
-    "version": "4.5.12",
+    "version": "4.6.0",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "index.js",
     "scripts": {