@visns-studio/visns-components 5.11.9 → 5.11.10

package/package.json

@@ -16,7 +16,7 @@
         "@uiw/react-color": "^2.6.0",
         "@visns-studio/visns-datagrid-community": "^1.0.14",
         "@visns-studio/visns-datagrid-enterprise": "^1.0.14",
-        "@vitejs/plugin-react": "^4.5.2",
+        "@vitejs/plugin-react": "^4.6.0",
         "add": "^2.0.6",
         "array-move": "^4.0.0",
         "awesome-debounce-promise": "^2.1.0",
@@ -87,7 +87,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.11.9",
+    "version": "5.11.10",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/crm/Field.jsx

@@ -549,10 +549,10 @@ function Field({
                 );
             case 'async-dropdown-ajax':
                 return (
-                    <div className={styles.dropdownContainer}>
+                    <div className={`${styles.dropdownContainer} ${settings.create ? styles.hasButton : ''}`}>
                         <VisnsAsyncSelect
                             settings={settings}
-                            className={inputClass[settings.id]}
+                            className={`${inputClass[settings.id]} ${settings.create ? styles.selectFullWidth : ''}`}
                             multi={
                                 settings.hasOwnProperty('multi')
                                     ? settings.multi
@@ -568,6 +568,35 @@ function Field({
                             dataOptions={dataOptions}
                             isCreatable={settings.isCreatable || false}
                         />
+                        {settings.create && (
+                            <button
+                                className={styles.buttonRight}
+                                onClick={(e) => {
+                                    e.preventDefault();
+                                    let allow = false;
+
+                                    if (settings.create.parent_id) {
+                                        if (
+                                            formData[settings.create.parent_id]
+                                        ) {
+                                            allow = true;
+                                        }
+                                    } else {
+                                        allow = true;
+                                    }
+
+                                    if (allow) {
+                                        handleAddEntry(settings.create);
+                                    } else {
+                                        toast.warning(
+                                            'Please select a parent item first'
+                                        );
+                                    }
+                                }}
+                            >
+                                <CirclePlus strokeWidth={2} size={16} />
+                            </button>
+                        )}
                     </div>
                 );
             case 'canvas':
@@ -778,7 +807,7 @@ function Field({
             case 'dropdown':
             case 'dropdown-ajax':
                 return (
-                    <div className={styles.dropdownContainer}>
+                    <div className={`${styles.dropdownContainer} ${settings.create ? styles.hasButton : ''}`}>
                         <Select
                             settings={settings}
                             className={
@@ -1287,7 +1316,7 @@ function Field({
             case 'multi-dropdown':
             case 'multi-dropdown-ajax':
                 return (
-                    <div className={styles.dropdownContainer}>
+                    <div className={`${styles.dropdownContainer} ${settings.create ? styles.hasButton : ''}`}>
                         <MultiSelect
                             settings={settings}
                             className={
@@ -2257,8 +2286,178 @@ function Field({
         }
     };
 
-    const handleReload = () => {
+    const handleReload = (createdItem = null) => {
         setCounter(counter + 1);
+        
+        // Auto-select the newly created item if provided
+        if (createdItem && onChange) {
+            console.log('Auto-selecting created item:', createdItem);
+            
+            // Analyze existing options to understand the expected format
+            const analyzeOptionsFormat = () => {
+                let existingOptions = [];
+                
+                // Get options based on dropdown type
+                if (['dropdown', 'multi-dropdown'].includes(settings.type) && settings.options) {
+                    existingOptions = settings.options;
+                } else if (['dropdown-ajax', 'multi-dropdown-ajax', 'async-dropdown-ajax'].includes(settings.type) && options) {
+                    existingOptions = options;
+                }
+                
+                if (existingOptions.length === 0) return null;
+                
+                // Analyze the first few options to understand the label pattern
+                const sampleOption = existingOptions[0];
+                return {
+                    hasLabel: !!sampleOption.label,
+                    hasName: !!sampleOption.name,
+                    hasFirstname: !!(sampleOption.firstname || sampleOption.surname),
+                    hasTitle: !!sampleOption.title,
+                    hasDescription: !!sampleOption.description,
+                    labelPattern: sampleOption.label || sampleOption.name || 'name'
+                };
+            };
+            
+            const formatAnalysis = analyzeOptionsFormat();
+            
+            // Determine the label for the created item based on existing options format or common patterns
+            const getItemLabel = (item) => {
+                // If we have format analysis, try to match the existing pattern
+                if (formatAnalysis) {
+                    if (formatAnalysis.hasLabel && item.label) return item.label;
+                    if (formatAnalysis.hasName && item.name) return item.name;
+                    if (formatAnalysis.hasFirstname && (item.firstname || item.surname)) {
+                        return `${item.firstname || ''} ${item.surname || ''}`.trim();
+                    }
+                    if (formatAnalysis.hasTitle && item.title) return item.title;
+                    if (formatAnalysis.hasDescription && item.description) return item.description;
+                }
+                
+                // Fallback to common patterns
+                if (item.label) return item.label;
+                if (item.name) return item.name;
+                if (item.firstname || item.surname) {
+                    return `${item.firstname || ''} ${item.surname || ''}`.trim();
+                }
+                if (item.title) return item.title;
+                if (item.description) return item.description;
+                return `Item ${item.id}`;
+            };
+            
+            const itemLabel = getItemLabel(createdItem);
+            
+            // Create a properly formatted item for MultiSelect/Select components
+            // Match the format of existing options as closely as possible
+            const formattedItem = {
+                id: createdItem.id,
+                value: createdItem.id,
+                label: itemLabel,
+                ...createdItem // Preserve all original properties
+            };
+            
+            console.log('Format analysis:', formatAnalysis);
+            console.log('Formatted item for selection:', formattedItem);
+            
+            // For different dropdown types, handle the selection appropriately
+            if (['dropdown', 'dropdown-ajax'].includes(settings.type)) {
+                // For single select fields
+                if (onChangeSelect) {
+                    onChangeSelect(formattedItem, { name: settings.id });
+                }
+                // Also update form data with the ID for single selects
+                if (setFormData) {
+                    setFormData((prevState) => ({
+                        ...prevState,
+                        [settings.id]: createdItem.id
+                    }));
+                }
+            } else if (['multi-dropdown', 'multi-dropdown-ajax', 'async-dropdown-ajax'].includes(settings.type)) {
+                // For multi-select fields, we need to handle existing selections
+                if (onChangeSelect) {
+                    // Get current value to determine if it's multi-select
+                    const currentValue = inputValue || [];
+                    let newValue;
+                    
+                    if (settings.hasOwnProperty('multi') && settings.multi === false) {
+                        // Single select in multi-dropdown component
+                        newValue = formattedItem;
+                    } else {
+                        // True multi-select - add to existing selections
+                        const currentArray = Array.isArray(currentValue) ? currentValue : 
+                                           (currentValue ? [currentValue] : []);
+                        
+                        // Check if item already exists (avoid duplicates)
+                        const existsIndex = currentArray.findIndex(item => 
+                            (item.id && item.id === createdItem.id) || 
+                            (item.value && item.value === createdItem.id)
+                        );
+                        
+                        if (existsIndex === -1) {
+                            // Add new item to the array
+                            newValue = [...currentArray, formattedItem];
+                        } else {
+                            // Replace existing item
+                            newValue = [...currentArray];
+                            newValue[existsIndex] = formattedItem;
+                        }
+                    }
+                    
+                    onChangeSelect(newValue, { name: settings.id });
+                }
+                
+                // Update form data with the appropriate format
+                if (setFormData) {
+                    setFormData((prevState) => {
+                        const currentValue = prevState[settings.id] || [];
+                        const currentArray = Array.isArray(currentValue) ? currentValue : 
+                                           (currentValue ? [currentValue] : []);
+                        
+                        // Check if we're in multi mode
+                        if (settings.hasOwnProperty('multi') && settings.multi === false) {
+                            return {
+                                ...prevState,
+                                [settings.id]: formattedItem
+                            };
+                        } else {
+                            // Check for duplicates
+                            const existsIndex = currentArray.findIndex(item => 
+                                (item.id && item.id === createdItem.id) || 
+                                (item.value && item.value === createdItem.id)
+                            );
+                            
+                            let newArray;
+                            if (existsIndex === -1) {
+                                newArray = [...currentArray, formattedItem];
+                            } else {
+                                newArray = [...currentArray];
+                                newArray[existsIndex] = formattedItem;
+                            }
+                            
+                            return {
+                                ...prevState,
+                                [settings.id]: newArray
+                            };
+                        }
+                    });
+                }
+            } else {
+                // For regular input fields, use onChange
+                const syntheticEvent = {
+                    target: {
+                        dataset: { name: settings.id },
+                        value: createdItem.id
+                    }
+                };
+                onChange(syntheticEvent);
+                
+                if (setFormData) {
+                    setFormData((prevState) => ({
+                        ...prevState,
+                        [settings.id]: createdItem.id
+                    }));
+                }
+            }
+        }
     };
 
     useEffect(() => {
@@ -2294,6 +2493,8 @@ function Field({
                 open={childFormShow}
                 onClose={childFormClose}
                 closeOnDocumentClick={false}
+                overlayStyle={{ zIndex: 10001 }}
+                contentStyle={{ zIndex: 10002 }}
             >
                 <Form
                     ajaxSetting={childForm.ajaxSetting}
@@ -2309,12 +2510,15 @@ function Field({
                     paramValue={null}
                     style={style}
                     updateForm={setChildForm}
+                    userProfile={userProfile}
                 />
             </Popup>
             <Popup
                 open={canvasPopupOpen}
                 onClose={() => setCanvasPopupOpen(false)}
                 closeOnDocumentClick={false}
+                overlayStyle={{ zIndex: 10001 }}
+                contentStyle={{ zIndex: 10002 }}
             >
                 <div className={`${styles.modalwrap} ${styles['top--modal']}`}>
                     <div className={styles.modal}>

package/src/components/crm/Form.jsx

@@ -1068,7 +1068,11 @@ function Form({
                                     location.reload();
                                 }, 1000);
                             }
-                            if (fetchTable) fetchTable();
+                            if (fetchTable) {
+                                // Pass the created item data to fetchTable for auto-selection
+                                const createdItem = res.data.data || res.data;
+                                fetchTable(createdItem);
+                            }
                             if (closeModal) {
                                 closeModal();
                                 if (type === 'saveAnother') {
@@ -1107,7 +1111,10 @@ function Form({
 
                                         if (resSaveAnother.data.error === '') {
                                             toast.success(saveAnother.message);
-                                            fetchTable();
+                                            if (fetchTable) {
+                                                const createdItem = res.data.data || res.data;
+                                                fetchTable(createdItem);
+                                            }
                                         }
                                     } else {
                                         fetchData();

package/src/components/crm/MultiSelect.jsx

@@ -62,6 +62,43 @@ const CustomMultiValue = (props) => {
     );
 };
 
+// Custom MultiValueRemove component with debug logging
+const CustomMultiValueRemove = (props) => {
+    const { innerProps, data } = props;
+    
+    return (
+        <components.MultiValueRemove 
+            {...props} 
+            innerProps={{
+                ...innerProps,
+                onClick: (e) => {
+                    console.log('MultiSelect: Remove button clicked for item:', data);
+                    console.log('MultiSelect: Event details:', e);
+                    
+                    // Prevent event bubbling
+                    e.stopPropagation();
+                    e.preventDefault();
+                    
+                    // Call the original handler
+                    if (innerProps && innerProps.onClick) {
+                        console.log('MultiSelect: Calling original onClick handler');
+                        innerProps.onClick(e);
+                    } else {
+                        console.log('MultiSelect: No original onClick handler found');
+                    }
+                },
+                onMouseDown: (e) => {
+                    console.log('MultiSelect: Remove button mouse down');
+                    e.stopPropagation();
+                    if (innerProps && innerProps.onMouseDown) {
+                        innerProps.onMouseDown(e);
+                    }
+                }
+            }}
+        />
+    );
+};
+
 function MultiSelect({
     className,
     inputValue = [], // Default to an empty array
@@ -230,12 +267,22 @@ function MultiSelect({
                 SelectList,
                 Option: CustomOption,
                 MultiValue: (props) => <CustomMultiValue {...props} settings={settings} />,
+                MultiValueRemove: CustomMultiValueRemove,
             }}
             options={selectOptions}
             menuPortalTarget={document.body}
             menuPlacement={menuPlacement}
             onMenuOpen={handleMenuOpen}
             onChange={(inputValue, action) => {
+                // Debug logging for delete actions
+                if (action.action === 'remove-value') {
+                    console.log('MultiSelect: Individual item delete:', {
+                        removedValue: action.removedValue,
+                        newValue: inputValue,
+                        action: action
+                    });
+                }
+                
                 // Special handling for limit=1: keep only the most recent selection
                 if (
                     settings.limit === 1 &&
@@ -333,7 +380,7 @@ function MultiSelect({
                     flex: '1',
                     minWidth: '0',
                 }),
-                multiValueRemove: (base) => ({
+                multiValueRemove: (base, state) => ({
                     ...base,
                     padding: '0 4px',
                     display: 'flex',
@@ -341,12 +388,12 @@ function MultiSelect({
                     justifyContent: 'center',
                     margin: '0',
                     borderRadius: '0 4px 4px 0',
-                    backgroundColor: 'transparent',
-                    transition: 'background-color 0.2s ease',
-                    '&:hover': {
-                        backgroundColor: '#dc2626',
-                        color: 'white',
-                    },
+                    backgroundColor: state.isFocused ? '#dc2626' : 'transparent',
+                    color: state.isFocused ? 'white' : '#666',
+                    transition: 'all 0.2s ease',
+                    cursor: 'pointer',
+                    minWidth: '16px',
+                    minHeight: '16px',
                 }),
             }}
             value={selectValue}

package/src/components/crm/QuickAction.jsx

@@ -408,7 +408,21 @@ const QuickAction = ({ setting }) => {
                 </div>
             </div>
 
-            <Popup open={modalShow} onClose={modalClose}>
+            <Popup 
+                open={modalShow} 
+                onClose={modalClose}
+                closeOnDocumentClick={false}
+                contentStyle={{
+                    width: '80vw',
+                    maxWidth: '1200px',
+                    minWidth: '600px',
+                    padding: 0,
+                    border: 'none',
+                    borderRadius: '8px',
+                    overflow: 'hidden',
+                    maxHeight: '90vh',
+                }}
+            >
                 <Form
                     closeModal={modalClose}
                     fetchTable={() => {}}

package/src/components/crm/generic/GenericDashboard.jsx

@@ -1355,7 +1355,7 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
             )}
             <div className={styles.grid} ref={container}>
                 {renderWidgets()}
-                <Popup open={modalShow} onClose={closeModal}>
+                <Popup open={modalShow} onClose={closeModal} closeOnDocumentClick={false}>
                     <div className="modalwrap top--modal modalWide">
                         <div className="modal">
                             <div className="modal__header">

package/src/components/crm/styles/BusinessCardOcr.module.scss

@@ -20,8 +20,9 @@
     border-radius: var(--br, 8px);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
     overflow: hidden;
-    max-width: 95vw;
-    width: 800px;
+    width: 80vw;
+    max-width: 1200px;
+    min-width: 600px;
     max-height: 90vh;
     display: flex;
     flex-direction: column;

package/src/components/crm/styles/Field.module.scss

@@ -3,28 +3,118 @@
     width: 100%;
 }
 
+/* Only apply flex layout when there's a create button */
+.dropdownContainer:has(.buttonRight) {
+    display: flex;
+    align-items: stretch;
+}
+
 .selectFullWidth {
     width: 90%;
 }
 
+/* Only style the select when there's a create button */
+.dropdownContainer:has(.buttonRight) .selectFullWidth {
+    flex: 1;
+    width: auto;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+/* Ensure the select component inside container integrates seamlessly - only when button exists */
+.dropdownContainer:has(.buttonRight) .selectFullWidth > div,
+.dropdownContainer:has(.buttonRight) .selectFullWidth .visns-select__control,
+.dropdownContainer:has(.buttonRight) .selectFullWidth select {
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+    border-right: none !important;
+}
+
+.dropdownContainer:has(.buttonRight) .selectFullWidth .visns-select__control--is-focused,
+.dropdownContainer:has(.buttonRight) .selectFullWidth select:focus {
+    border-right: none !important;
+    box-shadow: none !important;
+}
+
+/* Ensure consistent height between select and button */
+.dropdownContainer:has(.buttonRight) .selectFullWidth select {
+    height: auto;
+    min-height: 3.1rem; /* Match typical input height */
+}
+
 .buttonRight {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 42px;
+    min-height: 3.1rem;
+    background: rgba(var(--primary-color-rgb), 0.08);
+    color: var(--primary-color);
+    border: 1px solid rgba(var(--primary-color-rgb), 0.25);
+    border-left: none;
+    border-top-right-radius: var(--br);
+    border-bottom-right-radius: var(--br);
+    cursor: pointer;
+    transition: all 0.2s ease;
+    outline: none;
+    padding: 0;
+    position: relative;
+}
+
+.buttonRight::before {
+    content: '';
     position: absolute;
-    right: 0;
-    top: 50%;
-    transform: translateY(-50%);
-    z-index: 1;
+    top: 20%;
+    left: 0;
+    width: 1px;
+    height: 60%;
+    background: rgba(var(--primary-color-rgb), 0.15);
+}
+
+.buttonRight:hover {
     background: var(--primary-color);
     color: var(--secondary-color);
-    padding: 1rem 0.5rem;
-    border: none;
-    border-radius: var(--br);
-    cursor: pointer;
-    transition: background 0.3s;
+    border-color: var(--primary-color);
 }
 
-.buttonRight:hover {
-    background: var(--secondary-color);
-    color: var(--primary-color);
+.buttonRight:hover::before {
+    display: none;
+}
+
+.buttonRight:focus {
+    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.2);
+}
+
+/* Fallback for browsers that don't support :has() */
+.dropdownContainer.hasButton {
+    display: flex;
+    align-items: stretch;
+}
+
+.dropdownContainer.hasButton .selectFullWidth {
+    flex: 1;
+    width: auto;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.dropdownContainer.hasButton .selectFullWidth > div,
+.dropdownContainer.hasButton .selectFullWidth .visns-select__control,
+.dropdownContainer.hasButton .selectFullWidth select {
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+    border-right: none !important;
+}
+
+.dropdownContainer.hasButton .selectFullWidth .visns-select__control--is-focused,
+.dropdownContainer.hasButton .selectFullWidth select:focus {
+    border-right: none !important;
+    box-shadow: none !important;
+}
+
+.dropdownContainer.hasButton .selectFullWidth select {
+    height: auto;
+    min-height: 3.1rem;
 }
 
 .formcontainer {

package/src/components/crm/styles/MultiSelect.module.scss

@@ -158,12 +158,33 @@
         margin: 0 !important;
         border-radius: 0 4px 4px 0 !important;
         background-color: transparent !important;
-        transition: background-color 0.2s ease !important;
+        transition: all 0.2s ease !important;
+        cursor: pointer !important;
+        pointer-events: auto !important;
+        position: relative !important;
+        z-index: 10 !important;
+        min-width: 20px !important;
+        min-height: 20px !important;
+        border: 1px solid transparent !important;
     }
 
     .visns-select__multi-value__remove:hover {
         background-color: #dc2626 !important;
         color: white !important;
+        border-color: #dc2626 !important;
+    }
+
+    .visns-select__multi-value__remove:focus {
+        background-color: #dc2626 !important;
+        color: white !important;
+        border-color: #dc2626 !important;
+        outline: none !important;
+    }
+
+    .visns-select__multi-value__remove:active {
+        background-color: #b91c1c !important;
+        color: white !important;
+        transform: scale(0.95) !important;
     }
 
     /* Fix for modals */