@visns-studio/visns-components 5.11.5 → 5.11.7

package/src/components/proposal/ProposalTemplateSectionManager.jsx

@@ -0,0 +1,473 @@
+import React, { useState, useEffect } from 'react';
+import { Plus, Move, Eye, EyeOff, Trash2 } from 'lucide-react';
+import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
+import { arrayMoveImmutable } from 'array-move';
+import SectionEditor from './SectionEditor';
+import SectionTypeSelector from './SectionTypeSelector';
+import { toast } from 'react-toastify';
+import { buildUrl, defaultProposalApiEndpoints } from '../../utils/urlBuilder';
+import './ProposalTemplateSectionManager.css';
+
+const DragHandle = SortableHandle(() => (
+    <div className="drag-handle">
+        <Move size={16} />
+    </div>
+));
+
+const SortableSection = SortableElement(({ section, onEdit, onDelete, onToggleVisibility }) => (
+    <div className="section-item">
+        <div className="section-header">
+            <div className="section-info">
+                <DragHandle />
+                <div className="flex-1">
+                    <div className="flex items-center space-x-2">
+                        <h4 className="section-title">{section.title}</h4>
+                        <span className="section-type-badge">
+                            {section.section_type?.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase())}
+                        </span>
+                        {section.is_dynamic && (
+                            <span className="section-dynamic-badge">
+                                Dynamic
+                            </span>
+                        )}
+                    </div>
+                    <p className="section-meta">
+                        Order: {section.sort_order} | Variables: {section.variables?.length || 0}
+                    </p>
+                </div>
+            </div>
+            
+            <div className="section-actions">
+                <button
+                    onClick={() => onToggleVisibility(section.id)}
+                    className="section-action-btn"
+                    title={section.is_enabled ? "Hide section" : "Show section"}
+                >
+                    {section.is_enabled ? <Eye size={16} /> : <EyeOff size={16} />}
+                </button>
+                
+                
+                <button
+                    onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        onEdit(section);
+                    }}
+                    className="section-action-btn edit"
+                >
+                    Edit
+                </button>
+                
+                <button
+                    onClick={() => onDelete(section.id)}
+                    className="section-action-btn delete"
+                    title="Delete section"
+                >
+                    <Trash2 size={16} />
+                </button>
+            </div>
+        </div>
+        
+        <div className="section-content">
+            <div className="section-content-preview">
+                {section.content && section.content.trim() ? (
+                    <div 
+                        dangerouslySetInnerHTML={{ 
+                            __html: section.content.substring(0, 200) + (section.content.length > 200 ? '...' : '') 
+                        }} 
+                    />
+                ) : (
+                    <p className="section-no-content">
+                        No content added yet
+                    </p>
+                )}
+            </div>
+        </div>
+    </div>
+));
+
+const SortableSectionList = SortableContainer(({ sections, onEdit, onDelete, onToggleVisibility }) => (
+    <div>
+        {sections.map((section, index) => (
+            <SortableSection
+                key={`section-${section.id || index}`}
+                index={index}
+                section={section}
+                onEdit={onEdit}
+                onDelete={onDelete}
+                onToggleVisibility={onToggleVisibility}
+            />
+        ))}
+    </div>
+));
+
+const ProposalTemplateSectionManager = ({ 
+    templateId, 
+    templateData, 
+    value = [], 
+    onChange,
+    apiEndpoints = defaultProposalApiEndpoints
+}) => {
+    const [sections, setSections] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [editingSection, setEditingSection] = useState(null);
+    const [showSectionTypeSelector, setShowSectionTypeSelector] = useState(false);
+    const [availableVariables, setAvailableVariables] = useState([]);
+
+    // Helper function to replace template variables in URLs with templateId included
+    const buildUrlWithTemplate = (urlTemplate, params = {}) => {
+        return buildUrl(urlTemplate, { templateId, ...params });
+    };
+
+    useEffect(() => {
+        if (templateData && templateData.sections) {
+            setSections(templateData.sections);
+            setIsLoading(false);
+        } else if (templateId) {
+            loadSections();
+        }
+        loadAvailableVariables();
+    }, [templateId, templateData]);
+
+    const loadSections = async () => {
+        try {
+            setIsLoading(true);
+            const response = await fetch(buildUrlWithTemplate(apiEndpoints.templateData));
+            const data = await response.json();
+            setSections(data.sections || []);
+        } catch (error) {
+            console.error('Error loading sections:', error);
+            toast.error('Failed to load template sections');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const loadAvailableVariables = async () => {
+        try {
+            const response = await fetch(apiEndpoints.availableVariables);
+            const data = await response.json();
+            setAvailableVariables(data.variables || []);
+        } catch (error) {
+            console.error('Error loading variables:', error);
+        }
+    };
+
+    const handleSortEnd = async ({ oldIndex, newIndex }) => {
+        if (oldIndex === newIndex) return;
+
+        const newSections = arrayMoveImmutable(sections, oldIndex, newIndex);
+        
+        // Update sort_order for all sections
+        const updatedSections = newSections.map((section, index) => ({
+            ...section,
+            sort_order: index + 1
+        }));
+
+        setSections(updatedSections);
+
+        try {
+            // Update sort orders on the backend
+            await fetch(buildUrlWithTemplate(apiEndpoints.sectionsReorder), {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
+                },
+                body: JSON.stringify({
+                    sections: updatedSections.map(s => ({ id: s.id, sort_order: s.sort_order }))
+                })
+            });
+            
+            await loadSections(); // Refetch fresh data from server
+            toast.success('Section order updated');
+        } catch (error) {
+            console.error('Error updating section order:', error);
+            toast.error('Failed to update section order');
+            // Revert on error
+            loadSections();
+        }
+    };
+
+    const handleAddSection = async (sectionType) => {
+        try {
+            const response = await fetch(buildUrlWithTemplate(apiEndpoints.sectionsCreate), {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
+                },
+                body: JSON.stringify({
+                    section_type: sectionType,
+                    title: sectionType.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase()),
+                    content: '',
+                    sort_order: sections.length + 1,
+                    is_enabled: true,
+                    is_dynamic: true
+                })
+            });
+
+            if (response.ok) {
+                await loadSections(); // Refetch fresh data from server
+                setShowSectionTypeSelector(false);
+                toast.success('New section added');
+            } else {
+                throw new Error('Failed to create section');
+            }
+        } catch (error) {
+            console.error('Error adding section:', error);
+            toast.error('Failed to add new section');
+        }
+    };
+
+    const handleEditSection = (section) => {
+        setEditingSection(section);
+    };
+
+    const handleSaveSection = async (sectionData) => {
+        try {
+            // Helper function to deeply clean objects and remove circular references
+            const cleanObject = (obj, maxDepth = 3, currentDepth = 0) => {
+                if (currentDepth >= maxDepth || obj === null || typeof obj !== 'object') {
+                    return obj;
+                }
+                
+                if (Array.isArray(obj)) {
+                    return obj.map(item => cleanObject(item, maxDepth, currentDepth + 1));
+                }
+                
+                const cleaned = {};
+                for (const [key, value] of Object.entries(obj)) {
+                    // Skip functions, DOM elements, and potential circular references
+                    if (typeof value === 'function' || 
+                        value instanceof Element || 
+                        value instanceof HTMLElement ||
+                        key.startsWith('_') ||
+                        key === 'target' ||
+                        key === 'currentTarget') {
+                        continue;
+                    }
+                    
+                    try {
+                        cleaned[key] = cleanObject(value, maxDepth, currentDepth + 1);
+                    } catch (e) {
+                        // Skip properties that cause issues
+                        console.warn(`Skipping property ${key} due to error:`, e.message);
+                    }
+                }
+                return cleaned;
+            };
+
+            // Helper function to clean content specifically
+            const cleanContent = (content) => {
+                if (content === null || content === undefined) {
+                    return '';
+                }
+                
+                if (typeof content === 'string') {
+                    return content;
+                }
+                
+                // If content is an object, try to extract string value
+                if (typeof content === 'object') {
+                    console.log('Content is object with keys:', Object.keys(content));
+                    // Check for common TinyMCE/editor object patterns
+                    if (content.value && typeof content.value === 'string') {
+                        return content.value;
+                    }
+                    if (content.content && typeof content.content === 'string') {
+                        return content.content;
+                    }
+                    if (content.text && typeof content.text === 'string') {
+                        return content.text;
+                    }
+                    if (content.innerHTML && typeof content.innerHTML === 'string') {
+                        return content.innerHTML;
+                    }
+                    // If it's an object but can't find a string property, convert to string
+                    try {
+                        // Try to convert object to string, but avoid circular references
+                        return JSON.stringify(content);
+                    } catch (e) {
+                        console.warn('Content object could not be serialized, using empty string');
+                        return '';
+                    }
+                }
+                
+                // For any other type, convert to string
+                return String(content);
+            };
+
+            // Create a clean object without circular references
+            const cleanSectionData = {
+                id: sectionData.id,
+                title: sectionData.title || '',
+                section_type: sectionData.section_type || sectionData.type,
+                content: cleanContent(sectionData.content),
+                is_enabled: Boolean(sectionData.is_enabled),
+                is_dynamic: Boolean(sectionData.is_dynamic),
+                sort_order: Number(sectionData.sort_order || sectionData.order || 0),
+                styling: cleanObject(sectionData.styling) || {},
+                variables: cleanObject(sectionData.variables) || []
+            };
+
+            // Test JSON serialization before sending
+            let jsonPayload;
+            try {
+                jsonPayload = JSON.stringify(cleanSectionData);
+            } catch (jsonError) {
+                console.error('Failed to serialize cleaned section data:', jsonError);
+                console.error('Problematic data:', cleanSectionData);
+                throw new Error('Unable to serialize section data');
+            }
+
+            const response = await fetch(buildUrlWithTemplate(apiEndpoints.sectionsUpdate, { sectionId: sectionData.id }), {
+                method: 'PUT',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
+                },
+                body: jsonPayload
+            });
+
+            if (response.ok) {
+                await loadSections(); // Refetch fresh data from server
+                setEditingSection(null);
+                toast.success('Section updated');
+            } else {
+                throw new Error('Failed to update section');
+            }
+        } catch (error) {
+            console.error('Error saving section:', error);
+            console.error('Section data keys:', Object.keys(sectionData));
+            toast.error('Failed to save section');
+        }
+    };
+
+    const handleDeleteSection = async (sectionId) => {
+        if (!confirm('Are you sure you want to delete this section?')) return;
+
+        try {
+            const response = await fetch(buildUrlWithTemplate(apiEndpoints.sectionsDelete, { sectionId }), {
+                method: 'DELETE',
+                headers: {
+                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
+                }
+            });
+
+            if (response.ok) {
+                await loadSections(); // Refetch fresh data from server
+                toast.success('Section deleted');
+            } else {
+                throw new Error('Failed to delete section');
+            }
+        } catch (error) {
+            console.error('Error deleting section:', error);
+            toast.error('Failed to delete section');
+        }
+    };
+
+    const handleToggleVisibility = async (sectionId) => {
+        const section = sections.find(s => s.id === sectionId);
+        if (!section) return;
+
+        try {
+            const response = await fetch(buildUrlWithTemplate(apiEndpoints.sectionsToggle, { sectionId }), {
+                method: 'PUT',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
+                },
+                body: JSON.stringify({
+                    ...section,
+                    is_enabled: !section.is_enabled
+                })
+            });
+
+            if (response.ok) {
+                const updatedSection = await response.json();
+                await loadSections(); // Refetch fresh data from server
+                toast.success(`Section ${updatedSection.is_enabled ? 'enabled' : 'disabled'}`);
+            } else {
+                throw new Error('Failed to toggle section visibility');
+            }
+        } catch (error) {
+            console.error('Error toggling section visibility:', error);
+            toast.error('Failed to update section visibility');
+        }
+    };
+
+
+    if (isLoading) {
+        return (
+            <div className="loading-spinner">
+                <div className="spinner"></div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="proposal-section-manager">
+            <div className="add-section-header">
+                <div>
+                    <h3 className="add-section-title">Template Sections</h3>
+                    <p className="add-section-description">
+                        Drag and drop to reorder sections. Use variables like {`{{customer_name}}`} for dynamic content.
+                    </p>
+                </div>
+                <button
+                    onClick={() => setShowSectionTypeSelector(true)}
+                    className="add-section-btn"
+                >
+                    <Plus className="w-4 h-4" />
+                    Add Section
+                </button>
+            </div>
+
+            {sections.length === 0 ? (
+                <div className="empty-state">
+                    <div className="empty-state-icon">
+                        <Plus size={48} />
+                    </div>
+                    <h3 className="empty-state-title">No sections yet</h3>
+                    <p className="empty-state-description">Get started by adding your first template section</p>
+                    <button
+                        onClick={() => setShowSectionTypeSelector(true)}
+                        className="empty-state-btn"
+                    >
+                        <Plus className="w-4 h-4 mr-2" />
+                        Add First Section
+                    </button>
+                </div>
+            ) : (
+                <SortableSectionList
+                    sections={sections}
+                    onSortEnd={handleSortEnd}
+                    onEdit={handleEditSection}
+                    onDelete={handleDeleteSection}
+                    onToggleVisibility={handleToggleVisibility}
+                    useDragHandle
+                />
+            )}
+
+            {showSectionTypeSelector && (
+                <SectionTypeSelector
+                    onSelect={handleAddSection}
+                    onCancel={() => setShowSectionTypeSelector(false)}
+                />
+            )}
+
+            {editingSection && (
+                <SectionEditor
+                    section={editingSection}
+                    availableVariables={availableVariables}
+                    onSave={handleSaveSection}
+                    onCancel={() => setEditingSection(null)}
+                />
+            )}
+            
+        </div>
+    );
+};
+
+export default ProposalTemplateSectionManager;