@visns-studio/visns-components 5.11.2 → 5.11.3

package/src/components/crm/ClientAssociationManager.jsx

@@ -0,0 +1,362 @@
+import React, { useState, useEffect } from 'react';
+import { toast } from 'react-toastify';
+import CustomFetch from './Fetch';
+import MultiSelect from './MultiSelect';
+import styles from './styles/ClientAssociationManager.module.scss';
+
+const ClientAssociationManager = ({ 
+    endpoints, 
+    config, 
+    dataId,
+    onUpdate = () => {} 
+}) => {
+    const [associations, setAssociations] = useState([]);
+    const [availableOptions, setAvailableOptions] = useState([]);
+    const [loading, setLoading] = useState(true);
+    
+    // Dynamic state based on config
+    const [newAssociation, setNewAssociation] = useState(() => {
+        const initialState = {};
+        
+        // Set up dynamic fields based on config
+        if (config.fields) {
+            config.fields.forEach(field => {
+                initialState[field.id] = field.defaultValue || (field.type === 'boolean' ? false : 
+                                       field.type === 'select' ? (field.options?.[0]?.value || '') : 
+                                       field.type === 'multi-select' ? [] : '');
+            });
+        }
+        
+        return initialState;
+    });
+
+    // Replace placeholders in endpoint URLs and data
+    const processTemplate = (template, data = {}) => {
+        let processed = template;
+        
+        // Replace {dataId} with current dataId
+        processed = processed.replace(/\{dataId\}/g, dataId);
+        
+        // Replace any other placeholders from provided data
+        Object.keys(data).forEach(key => {
+            const placeholder = new RegExp(`\\{${key}\\}`, 'g');
+            processed = processed.replace(placeholder, data[key]);
+        });
+        
+        return processed;
+    };
+
+    // Load existing associations
+    const loadAssociations = async () => {
+        if (!endpoints.list) return;
+        
+        try {
+            setLoading(true);
+            const url = processTemplate(endpoints.list);
+            const method = endpoints.listMethod || 'GET';
+            const response = await CustomFetch(url, method, endpoints.listParams || {});
+            
+            const dataPath = config.dataPath || 'data';
+            const associationsData = dataPath.split('.').reduce((obj, key) => obj?.[key], response);
+            
+            // Ensure associationsData is always an array
+            const validAssociations = Array.isArray(associationsData) ? associationsData : [];
+            setAssociations(validAssociations);
+        } catch (error) {
+            toast.error(config.messages?.loadError || 'Failed to load associations');
+            console.error('Error loading associations:', error);
+            setAssociations([]); // Set empty array on error
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    // Load available options for dropdown/select fields
+    const loadAvailableOptions = async () => {
+        if (!config.optionsEndpoint) return;
+        
+        try {
+            const url = processTemplate(config.optionsEndpoint.url);
+            const method = config.optionsEndpoint.method || 'POST';
+            const params = config.optionsEndpoint.params || {};
+            
+            const response = await CustomFetch(url, method, params);
+            const dataPath = config.optionsEndpoint.dataPath || 'data.data';
+            const optionsData = dataPath.split('.').reduce((obj, key) => obj?.[key], response) || [];
+            
+            setAvailableOptions(optionsData);
+        } catch (error) {
+            console.error('Failed to load options:', error);
+        }
+    };
+
+    // Generic action handler
+    const handleAction = async (actionKey, data = {}) => {
+        const endpoint = endpoints[actionKey];
+        if (!endpoint) return;
+
+        try {
+            const url = processTemplate(endpoint.url || endpoint, data);
+            const method = endpoint.method || 'POST';
+            const params = { ...endpoint.params, ...data };
+
+            await CustomFetch(url, method, params);
+
+            const successMessage = config.messages?.[`${actionKey}Success`] || 
+                                 endpoint.successMessage || 
+                                 'Action completed successfully';
+            toast.success(successMessage);
+
+            // Reset form if it's an associate action
+            if (actionKey === 'associate') {
+                const resetState = {};
+                if (config.fields) {
+                    config.fields.forEach(field => {
+                        resetState[field.id] = field.defaultValue || (field.type === 'boolean' ? false : 
+                                               field.type === 'select' ? (field.options?.[0]?.value || '') : 
+                                               field.type === 'multi-select' ? [] : '');
+                    });
+                }
+                setNewAssociation(resetState);
+            }
+
+            loadAssociations();
+            onUpdate();
+        } catch (error) {
+            const errorMessage = config.messages?.[`${actionKey}Error`] || 
+                                endpoint.errorMessage || 
+                                'Action failed';
+            toast.error(errorMessage);
+            console.error(error);
+        }
+    };
+
+    // Associate handler
+    const handleAssociate = async () => {
+        // Validate required fields
+        const requiredField = config.fields?.find(field => field.required);
+        const primaryField = config.fields?.find(field => field.isPrimary);
+        
+        if (requiredField && !newAssociation[requiredField.id]) {
+            toast.error(`Please select a ${requiredField.label || requiredField.id}`);
+            return;
+        }
+
+        // Prepare data for submission
+        const submitData = { ...newAssociation };
+        
+        // Handle complex field values (like objects from MultiSelect)
+        Object.keys(submitData).forEach(key => {
+            const value = submitData[key];
+            if (value && typeof value === 'object' && value.value !== undefined) {
+                submitData[key] = value.value;
+            }
+        });
+
+        await handleAction('associate', submitData);
+    };
+
+    // Remove association handler
+    const handleDissociate = async (itemId) => {
+        const deleteField = config.deleteField || 'id';
+        await handleAction('dissociate', { [deleteField]: itemId });
+    };
+
+    // Set primary handler
+    const handleSetPrimary = async (itemId) => {
+        if (!endpoints.setPrimary) return;
+        
+        const primaryField = config.fields?.find(field => field.isPrimary);
+        const idField = primaryField?.targetField || 'id';
+        
+        await handleAction('setPrimary', { [idField]: itemId });
+    };
+
+    useEffect(() => {
+        if (dataId) {
+            loadAssociations();
+            loadAvailableOptions();
+        }
+    }, [dataId]);
+
+    if (loading) {
+        return <div className={styles.loading}>{config.messages?.loading || 'Loading associations...'}</div>;
+    }
+
+    return (
+        <div className={styles.container}>
+            <div className={styles.header}>
+                <h3>{config.title || 'Associations'}</h3>
+                <p>{config.description || 'Manage associations'}</p>
+            </div>
+
+            {/* Existing Associations */}
+            <div className={styles.existingAssociations}>
+                <h4>{config.labels?.currentAssociations || 'Current Associations'}</h4>
+                {associations.length === 0 ? (
+                    <div className={styles.noAssociations}>
+                        {config.messages?.noAssociations || 'No associations found.'}
+                    </div>
+                ) : (
+                    <div className={styles.associationsList}>
+                        {associations.map((association) => {
+                            const nameField = config.displayFields?.name || 'name';
+                            const primaryField = config.displayFields?.primary || 'is_primary';
+                            const relationshipField = config.displayFields?.relationship || 'relationship_type';
+                            const notesField = config.displayFields?.notes || 'notes';
+                            const dateField = config.displayFields?.date || 'associated_at';
+                            
+                            return (
+                                <div 
+                                    key={association.id} 
+                                    className={`${styles.associationItem} ${association[primaryField] ? styles.primary : ''}`}
+                                >
+                                    <div className={styles.associationInfo}>
+                                        <div className={styles.companyName}>
+                                            {association[nameField]}
+                                            {association[primaryField] && (
+                                                <span className={styles.primaryBadge}>{config.labels?.primaryBadge || 'Primary'}</span>
+                                            )}
+                                        </div>
+                                        <div className={styles.relationshipInfo}>
+                                            <span className={styles.relationshipType}>
+                                                {association[relationshipField]}
+                                            </span>
+                                            {association[notesField] && (
+                                                <span className={styles.notes}>
+                                                    - {association[notesField]}
+                                                </span>
+                                            )}
+                                        </div>
+                                        <div className={styles.associatedAt}>
+                                            {config.labels?.associatedAt || 'Associated'}: {new Date(association[dateField]).toLocaleDateString()}
+                                        </div>
+                                    </div>
+                                    <div className={styles.associationActions}>
+                                        {!association[primaryField] && endpoints.setPrimary && (
+                                            <button
+                                                type="button"
+                                                className={styles.setPrimaryBtn}
+                                                onClick={() => handleSetPrimary(association.id)}
+                                            >
+                                                {config.labels?.setPrimary || 'Set Primary'}
+                                            </button>
+                                        )}
+                                        <button
+                                            type="button"
+                                            className={styles.removeBtn}
+                                            onClick={() => handleDissociate(association.id)}
+                                        >
+                                            {config.labels?.remove || 'Remove'}
+                                        </button>
+                                    </div>
+                                </div>
+                            );
+                        })}
+                    </div>
+                )}
+            </div>
+
+            {/* Add New Association */}
+            <div className={styles.newAssociation}>
+                <h4>{config.labels?.addNew || 'Add New Association'}</h4>
+                <div className={styles.associationForm}>
+                    {config.fields && config.fields.map((field, index) => {
+                        const fieldValue = newAssociation[field.id] || '';
+                        
+                        return (
+                            <div key={field.id} className={styles.formRow}>
+                                <div className={styles.formField}>
+                                    <label>
+                                        {field.label}{field.required && ' *'}
+                                    </label>
+                                    
+                                    {field.type === 'multi-select' && (
+                                        <MultiSelect
+                                            settings={{ id: field.id }}
+                                            multi={field.multi || false}
+                                            onChange={(value) => setNewAssociation(prev => ({ ...prev, [field.id]: value }))}
+                                            inputValue={fieldValue}
+                                            options={availableOptions}
+                                            placeholder={field.placeholder || `Select ${field.label}...`}
+                                        />
+                                    )}
+                                    
+                                    {field.type === 'select' && (
+                                        <select
+                                            value={fieldValue}
+                                            onChange={(e) => setNewAssociation(prev => ({ 
+                                                ...prev, 
+                                                [field.id]: e.target.value 
+                                            }))}
+                                            className={styles.selectField}
+                                        >
+                                            {field.options && field.options.map(option => (
+                                                <option key={option.value || option} value={option.value || option}>
+                                                    {option.label || option}
+                                                </option>
+                                            ))}
+                                        </select>
+                                    )}
+                                    
+                                    {field.type === 'boolean' && (
+                                        <label>
+                                            <input
+                                                type="checkbox"
+                                                checked={fieldValue}
+                                                onChange={(e) => setNewAssociation(prev => ({ 
+                                                    ...prev, 
+                                                    [field.id]: e.target.checked 
+                                                }))}
+                                            />
+                                            {field.checkboxLabel || field.label}
+                                        </label>
+                                    )}
+                                    
+                                    {field.type === 'textarea' && (
+                                        <textarea
+                                            value={fieldValue}
+                                            onChange={(e) => setNewAssociation(prev => ({ 
+                                                ...prev, 
+                                                [field.id]: e.target.value 
+                                            }))}
+                                            placeholder={field.placeholder || ''}
+                                            className={styles.textareaField}
+                                            rows={field.rows || 3}
+                                        />
+                                    )}
+                                    
+                                    {field.type === 'text' && (
+                                        <input
+                                            type="text"
+                                            value={fieldValue}
+                                            onChange={(e) => setNewAssociation(prev => ({ 
+                                                ...prev, 
+                                                [field.id]: e.target.value 
+                                            }))}
+                                            placeholder={field.placeholder || ''}
+                                            className={styles.textField}
+                                        />
+                                    )}
+                                </div>
+                            </div>
+                        );
+                    })}
+
+                    <div className={styles.formActions}>
+                        <button
+                            type="button"
+                            className={styles.associateBtn}
+                            onClick={handleAssociate}
+                            disabled={!newAssociation[config.fields?.find(f => f.required)?.id || 'id']}
+                        >
+                            {config.labels?.addButton || 'Add Association'}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ClientAssociationManager;