@visns-studio/visns-components 5.10.11 → 5.11.1

package/README.md

@@ -93,6 +93,91 @@ const App = () => {
 export default App;
 ```
 
+## New Modular Architecture (v5.10.11+)
+
+### GenericIndex Component Refactoring
+
+Starting from version 5.10.11, the GenericIndex component has been refactored for better maintainability and reusability:
+
+**Before**: Single monolithic component (2,281 lines)
+**After**: Modular architecture with separated concerns
+
+#### New Components
+
+The refactoring introduced two new standalone components that can be used independently:
+
+**GenericGrid** - Standalone grid component with full data management capabilities:
+
+```jsx
+import { GenericGrid } from 'visns-components';
+
+<GenericGrid 
+  config={{
+    settings: { 
+      fetch: { 
+        url: '/api/data',
+        method: 'POST',
+        params: { filter: 'active' }
+      }
+    },
+    columns: [
+      { name: 'id', header: 'ID', type: 'number' },
+      { name: 'name', header: 'Name', type: 'text' },
+      { name: 'date', header: 'Date', type: 'date' }
+    ]
+  }}
+  userProfile={userProfile}
+  onDataChange={(data) => console.log('Data updated:', data)}
+  onRowClick={(row) => console.log('Row clicked:', row)}
+/>
+```
+
+**GenericReportForm** - Standalone export form component:
+
+```jsx
+import { GenericReportForm } from 'visns-components';
+
+<GenericReportForm 
+  config={{
+    form: {
+      title: 'Export Data',
+      description: 'Select your export criteria below',
+      filters: [
+        { id: 'startDate', type: 'date', label: 'Start Date', required: true },
+        { id: 'endDate', type: 'date', label: 'End Date', required: true },
+        { id: 'format', type: 'dropdown', label: 'Format', options: [
+          { value: 'csv', label: 'CSV' },
+          { value: 'xlsx', label: 'Excel' }
+        ]}
+      ],
+      url: '/api/export',
+      method: 'POST',
+      filename: 'export.csv'
+    }
+  }}
+  userProfile={userProfile}
+  onExport={(formData) => customExportHandler(formData)}
+  onFormChange={(formData) => console.log('Form changed:', formData)}
+/>
+```
+
+#### Benefits of the Refactoring
+
+- **Reduced complexity**: GenericIndex reduced from 2,281 to 1,031 lines (55% reduction)
+- **Enhanced reusability**: Grid and form components can be used independently
+- **Better maintainability**: Focused components are easier to debug and modify
+- **Improved testing**: Components can be unit tested separately
+- **Backward compatibility**: All existing GenericIndex usage remains unchanged
+
+#### Shared Utilities
+
+The refactoring also introduced shared utility functions:
+
+- **`shared/formatters.js`**: Cell content formatting and styling utilities
+- **`shared/gridUtils.js`**: Data operations (sorting, filtering, transformations)
+
+These utilities are available for use in custom components and provide consistent functionality across the library.
+
 ## Component Documentation
 
 ### Authentication Components

package/package.json

@@ -24,17 +24,17 @@
         "dayjs": "^1.11.13",
         "fabric": "^6.7.0",
         "file-saver": "^2.0.5",
-        "framer-motion": "^12.17.0",
+        "framer-motion": "^12.18.1",
         "html-react-parser": "^5.2.5",
         "lodash": "^4.17.21",
         "lodash.debounce": "^4.0.8",
         "moment": "^2.30.1",
-        "motion": "^12.17.0",
+        "motion": "^12.18.1",
         "numeral": "^2.0.6",
         "pluralize": "^8.0.0",
         "qrcode.react": "^4.2.0",
         "quill-image-uploader": "^1.3.0",
-        "react-big-calendar": "^1.19.2",
+        "react-big-calendar": "^1.19.3",
         "react-color": "^2.19.3",
         "react-copy-to-clipboard": "^5.1.0",
         "react-datepicker": "^8.4.0",
@@ -53,7 +53,7 @@
         "react-to-print": "^3.1.0",
         "react-toastify": "^11.0.5",
         "react-toggle": "^4.1.3",
-        "react-tooltip": "^5.29.0",
+        "react-tooltip": "^5.29.1",
         "react-window": "^1.8.11",
         "reactjs-popup": "^2.0.6",
         "style-loader": "^4.0.0",
@@ -65,7 +65,7 @@
         "validator": "^13.15.15",
         "vite": "^6.3.5",
         "yarn": "^1.22.22",
-        "yet-another-react-lightbox": "^3.23.2"
+        "yet-another-react-lightbox": "^3.23.3"
     },
     "devDependencies": {
         "@babel/core": "^7.27.4",
@@ -87,7 +87,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.10.11",
+    "version": "5.11.1",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

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

@@ -0,0 +1,380 @@
+import React, { useState, useEffect } from 'react';
+import Swal from 'sweetalert2';
+import './styles/SweetAlert.module.css';
+import './styles/ContactSelectorModal.css';
+import CustomFetch from '../Fetch';
+
+/**
+ * A utility function that shows a contact selector modal using SweetAlert2
+ * Used after date selection to add/select contacts for a survey field
+ *
+ * @param {Object} options - Configuration options
+ * @param {string} options.title - The title of the dialog (default: 'Select Contacts')
+ * @param {string} options.message - The message to display in the dialog
+ * @param {string} options.confirmLabel - Label for the confirm button (default: 'Save')
+ * @param {string} options.cancelLabel - Label for the cancel button (default: 'Cancel')
+ * @param {Function} options.onConfirm - Function to call when confirmed with selected contacts
+ * @param {Function} options.onCancel - Function to call when cancelled
+ * @param {Array} options.existingContacts - Array of existing contacts for this field
+ * @param {Object} options.contactConfig - Contact selection configuration
+ * @param {Object} options.data - Optional data object to pass context
+ * @returns {Promise} - A promise that resolves when the dialog is closed
+ */
+export const showContactSelectorModal = ({
+    title = 'Select Contacts',
+    message = 'Add contacts for this survey:',
+    confirmLabel = 'Save',
+    cancelLabel = 'Cancel',
+    onConfirm = () => {},
+    onCancel = () => {},
+    existingContacts = [],
+    contactConfig = {},
+    data = null,
+    rowContext = null,
+}) => {
+    const {
+        contactsUrl = '/ajax/contacts/dropdown',
+        urlParams = {},
+        allowManualEntry = true,
+        fields = ['name', 'email'],
+        multiple = true,
+        maxContacts = 10
+    } = contactConfig;
+
+    // State management for the modal
+    let modalState = {
+        contacts: [...existingContacts],
+        availableContacts: [],
+        isAddingManual: false,
+        newContact: {}
+    };
+
+    // Initialize new contact object
+    fields.forEach(field => {
+        modalState.newContact[field] = '';
+    });
+
+    // Process URL parameters with row context substitution
+    const processUrlParams = (params, rowData) => {
+        if (!params || typeof params !== 'object') return {};
+        
+        console.log('Processing URL params:', {
+            params,
+            rowData,
+            rowDataKeys: rowData ? Object.keys(rowData) : 'no rowData'
+        });
+        
+        const processedParams = {};
+        
+        for (const [key, value] of Object.entries(params)) {
+            if (Array.isArray(value)) {
+                // Handle arrays (like 'where' parameter)
+                processedParams[key] = value.map(item => {
+                    if (typeof item === 'object' && item !== null) {
+                        const processedItem = {};
+                        for (const [itemKey, itemValue] of Object.entries(item)) {
+                            if (typeof itemValue === 'string' && itemValue.startsWith('{row.') && itemValue.endsWith('}')) {
+                                // Extract field name from {row.fieldName}
+                                const fieldName = itemValue.slice(5, -1);
+                                const actualValue = rowData?.[fieldName];
+                                console.log(`Replacing ${itemValue} with field ${fieldName}:`, actualValue);
+                                processedItem[itemKey] = actualValue !== undefined ? actualValue : itemValue;
+                            } else {
+                                processedItem[itemKey] = itemValue;
+                            }
+                        }
+                        return processedItem;
+                    }
+                    return item;
+                });
+            } else if (typeof value === 'string' && value.startsWith('{row.') && value.endsWith('}')) {
+                // Handle simple string substitution
+                const fieldName = value.slice(5, -1);
+                const actualValue = rowData?.[fieldName];
+                console.log(`Replacing ${value} with field ${fieldName}:`, actualValue);
+                processedParams[key] = actualValue !== undefined ? actualValue : value;
+            } else {
+                processedParams[key] = value;
+            }
+        }
+        
+        console.log('Processed params result:', processedParams);
+        return processedParams;
+    };
+
+    // Fetch available contacts from API
+    const fetchContacts = async () => {
+        try {
+            // Process URL parameters with row context
+            const requestParams = processUrlParams(urlParams, rowContext);
+            
+            console.log('Fetching contacts with params:', {
+                url: contactsUrl,
+                originalParams: urlParams,
+                processedParams: requestParams,
+                rowContext: rowContext
+            });
+            
+            const response = await CustomFetch(contactsUrl, 'POST', requestParams);
+            if (response.data && response.data.data) {
+                modalState.availableContacts = response.data.data.map(contact => ({
+                    value: contact.id || contact.value,
+                    label: contact.name || contact.label || contact.title,
+                    ...contact
+                }));
+                
+                console.log(`Fetched ${modalState.availableContacts.length} contacts`);
+            }
+        } catch (error) {
+            console.warn('Failed to fetch contacts:', error);
+            modalState.availableContacts = [];
+        }
+    };
+
+    // Generate HTML for the modal
+    const generateModalHTML = () => {
+        const contactsHtml = modalState.contacts.map((contact, index) => `
+            <div class="contact-item" data-index="${index}">
+                <div class="contact-info">
+                    <strong>${contact.name || 'Unknown Contact'}</strong>
+                    ${contact.email ? `<br><small>${contact.email}</small>` : ''}
+                    <span class="contact-type">${contact.type === 'contact' ? 'Existing Contact' : 'Manual Entry'}</span>
+                </div>
+                <button type="button" class="remove-contact-btn" data-index="${index}">×</button>
+            </div>
+        `).join('');
+
+        const availableContactsOptions = modalState.availableContacts.map(contact => 
+            `<option value="${contact.value}">${contact.label}</option>`
+        ).join('');
+
+        const manualFieldsHtml = fields.map(field => `
+            <div class="form-group">
+                <div class="form-field-row">
+                    <label for="manual-${field}">${field.charAt(0).toUpperCase() + field.slice(1)}:</label>
+                    <input 
+                        type="${field === 'email' ? 'email' : 'text'}" 
+                        id="manual-${field}" 
+                        class="swal2-input"
+                        placeholder="Enter ${field}"
+                        ${field === 'email' ? 'required' : ''}
+                    >
+                </div>
+            </div>
+        `).join('');
+
+        return `
+            <div class="contact-selector-modal">
+                <div class="contact-modal-header">
+                    <p class="contact-modal-message">${message}</p>
+                    ${data ? `<small class="field-info">Field: ${data.label || data.name}</small>` : ''}
+                </div>
+
+                <div class="existing-contacts">
+                    <h4>Selected Contacts (${modalState.contacts.length})</h4>
+                    <div class="contacts-list">
+                        ${contactsHtml || '<p class="no-contacts">No contacts selected</p>'}
+                    </div>
+                </div>
+
+                <div class="add-contact-section">
+                    <h4>Add Contact</h4>
+                    
+                    ${modalState.availableContacts.length > 0 ? `
+                    <div class="existing-contact-selector">
+                        <label for="existing-contact-select">Select Existing Contact:</label>
+                        <div class="contact-select-row">
+                            <select id="existing-contact-select" class="swal2-select">
+                                <option value="">Choose a contact...</option>
+                                ${availableContactsOptions}
+                            </select>
+                            <button type="button" id="add-existing-contact" class="add-contact-btn">Add</button>
+                        </div>
+                    </div>
+                    ` : ''}
+
+                    ${allowManualEntry ? `
+                    <div class="manual-contact-section">
+                        <div class="manual-contact-toggle">
+                            <button type="button" id="toggle-manual-entry" class="toggle-manual-btn">
+                                ${modalState.isAddingManual ? 'Cancel Manual Entry' : 'Add Manual Contact'}
+                            </button>
+                        </div>
+                        
+                        <div id="manual-contact-form" class="manual-contact-form" style="display: ${modalState.isAddingManual ? 'block' : 'none'}">
+                            ${manualFieldsHtml}
+                            <button type="button" id="add-manual-contact" class="add-contact-btn">Add Manual Contact</button>
+                        </div>
+                    </div>
+                    ` : ''}
+                </div>
+
+                ${multiple && maxContacts > 1 ? `
+                <div class="contact-limits">
+                    <small>Maximum ${maxContacts} contacts allowed</small>
+                </div>
+                ` : ''}
+            </div>
+        `;
+    };
+
+    // Event handlers
+    const setupEventHandlers = () => {
+        // Remove contact handler
+        document.addEventListener('click', (e) => {
+            if (e.target.classList.contains('remove-contact-btn')) {
+                const index = parseInt(e.target.dataset.index);
+                modalState.contacts.splice(index, 1);
+                updateModalContent();
+            }
+        });
+
+        // Add existing contact handler
+        const addExistingBtn = document.getElementById('add-existing-contact');
+        if (addExistingBtn) {
+            addExistingBtn.addEventListener('click', () => {
+                const select = document.getElementById('existing-contact-select');
+                const selectedValue = select.value;
+                
+                if (selectedValue) {
+                    const selectedContact = modalState.availableContacts.find(c => c.value == selectedValue);
+                    if (selectedContact && !modalState.contacts.find(c => c.contact_id == selectedValue)) {
+                        modalState.contacts.push({
+                            type: 'contact',
+                            contact_id: selectedContact.value,
+                            name: selectedContact.label,
+                            email: selectedContact.email || ''
+                        });
+                        select.value = '';
+                        updateModalContent();
+                    }
+                }
+            });
+        }
+
+        // Toggle manual entry
+        const toggleBtn = document.getElementById('toggle-manual-entry');
+        if (toggleBtn) {
+            toggleBtn.addEventListener('click', () => {
+                modalState.isAddingManual = !modalState.isAddingManual;
+                updateModalContent();
+            });
+        }
+
+        // Add manual contact handler
+        const addManualBtn = document.getElementById('add-manual-contact');
+        if (addManualBtn) {
+            addManualBtn.addEventListener('click', () => {
+                const newContact = { type: 'manual' };
+                let isValid = true;
+
+                fields.forEach(field => {
+                    const input = document.getElementById(`manual-${field}`);
+                    const value = input ? input.value.trim() : '';
+                    
+                    if (field === 'email' && value && !isValidEmail(value)) {
+                        isValid = false;
+                        input.style.borderColor = '#dc2626';
+                        return;
+                    }
+                    
+                    if (field === 'name' && !value) {
+                        isValid = false;
+                        input.style.borderColor = '#dc2626';
+                        return;
+                    }
+                    
+                    newContact[field] = value;
+                    if (input) input.style.borderColor = '';
+                });
+
+                if (isValid && newContact.name) {
+                    modalState.contacts.push(newContact);
+                    
+                    // Clear form
+                    fields.forEach(field => {
+                        const input = document.getElementById(`manual-${field}`);
+                        if (input) input.value = '';
+                    });
+                    
+                    modalState.isAddingManual = false;
+                    updateModalContent();
+                }
+            });
+        }
+    };
+
+    // Update modal content
+    const updateModalContent = () => {
+        const container = document.querySelector('.contact-selector-modal');
+        if (container) {
+            container.innerHTML = generateModalHTML().match(/<div class="contact-selector-modal">([\s\S]*)<\/div>/)[1];
+            setupEventHandlers();
+        }
+    };
+
+    // Email validation helper
+    const isValidEmail = (email) => {
+        return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+    };
+
+    // Validation function
+    const validateContacts = () => {
+        if (!multiple && modalState.contacts.length > 1) {
+            Swal.showValidationMessage('Only one contact is allowed for this field');
+            return false;
+        }
+        
+        if (modalState.contacts.length > maxContacts) {
+            Swal.showValidationMessage(`Maximum ${maxContacts} contacts allowed`);
+            return false;
+        }
+        
+        return true;
+    };
+
+    // Initialize and show modal
+    const showModal = async () => {
+        await fetchContacts();
+
+        const swalOptions = {
+            title: title,
+            html: generateModalHTML(),
+            showCancelButton: true,
+            confirmButtonText: confirmLabel,
+            cancelButtonText: cancelLabel,
+            confirmButtonColor: 'var(--primary-color, #4f46e5)',
+            cancelButtonColor: '#6b7280',
+            allowOutsideClick: false,
+            allowEscapeKey: true,
+            width: '600px',
+            padding: '1.25rem',
+            customClass: {
+                popup: 'contact-selector-dialog',
+                htmlContainer: 'contact-selector-content'
+            },
+            preConfirm: () => {
+                if (!validateContacts()) {
+                    return false;
+                }
+                return modalState.contacts;
+            },
+            didOpen: () => {
+                setupEventHandlers();
+            }
+        };
+
+        return Swal.fire(swalOptions).then((result) => {
+            if (result.isConfirmed && result.value) {
+                console.log('Contacts selected:', result.value);
+                onConfirm(result.value);
+            } else if (result.dismiss === Swal.DismissReason.cancel) {
+                onCancel();
+            }
+        });
+    };
+
+    return showModal();
+};
+
+export default showContactSelectorModal;