@visns-studio/visns-components 5.12.7 → 5.12.8

package/package.json

@@ -87,7 +87,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.12.7",
+    "version": "5.12.8",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/CategorizedDropZone.jsx

@@ -0,0 +1,286 @@
+import React, { useState, useEffect } from 'react';
+import DropZone from './DropZone';
+import CustomFetch from './Fetch';
+import styles from './styles/CategorizedDropZone.module.scss';
+
+const CategorizedDropZone = ({
+    filetype = 'image',
+    folder = 'uploads',
+    dataKey = 'files',
+    file_relationship = 'files',
+    url = '/ajax/files',
+    method = 'POST',
+    deleteUrl = '/ajax/files/delete',
+    categories = [],
+    categoriesUrl = null,
+    categoriesWhere = [],
+    entityData = {},
+    routeParams = {},
+    fetchData = null
+}) => {
+    const [activeCategory, setActiveCategory] = useState(null);
+    const [categorizedFiles, setCategorizedFiles] = useState({});
+    const [dynamicCategories, setDynamicCategories] = useState([]);
+    const [loadingCategories, setLoadingCategories] = useState(false);
+
+    // Get final categories (dynamic or static)
+    const finalCategories = dynamicCategories.length > 0 ? dynamicCategories : categories;
+
+    // Fetch categories from API if categoriesUrl is provided
+    useEffect(() => {
+        if (categoriesUrl) {
+            setLoadingCategories(true);
+            
+            const requestData = {};
+            if (categoriesWhere && categoriesWhere.length > 0) {
+                requestData.where = categoriesWhere;
+            }
+
+            CustomFetch(categoriesUrl, 'POST', requestData)
+                .then(response => {
+                    if (response.data && !response.data.error) {
+                        const categoriesData = Array.isArray(response.data.data) ? response.data.data : 
+                                              Array.isArray(response.data) ? response.data : [];
+                        
+                        // Transform API data to match expected format
+                        const transformedCategories = categoriesData.map(cat => ({
+                            id: cat.slug || cat.id,
+                            label: cat.name || cat.label,
+                            description: cat.description || ''
+                        }));
+                        
+                        setDynamicCategories(transformedCategories);
+                        
+                        // Set first category as active if none selected
+                        if (!activeCategory && transformedCategories.length > 0) {
+                            setActiveCategory(transformedCategories[0].id);
+                        }
+                    }
+                })
+                .catch(error => {
+                    console.error('Failed to load categories:', error);
+                })
+                .finally(() => {
+                    setLoadingCategories(false);
+                });
+        } else if (categories.length > 0 && !activeCategory) {
+            // Set first static category as active
+            setActiveCategory(categories[0].id);
+        }
+    }, [categoriesUrl, categoriesWhere, categories, activeCategory]);
+
+    useEffect(() => {
+        console.log('CategorizedDropZone: Initializing files', {
+            finalCategories,
+            entityData: entityData[dataKey],
+            dataKey
+        });
+        
+        // Initialize categorized files structure
+        const initialCategorizedFiles = {};
+        finalCategories.forEach(category => {
+            initialCategorizedFiles[category.id] = [];
+        });
+        
+        // If there are existing files, categorize them based on file_description
+        if (entityData[dataKey] && Array.isArray(entityData[dataKey])) {
+            console.log('CategorizedDropZone: Processing files', entityData[dataKey]);
+            
+            entityData[dataKey].forEach(file => {
+                console.log('CategorizedDropZone: Processing file', {
+                    file_name: file.file_name,
+                    file_description: file.file_description,
+                    id: file.id
+                });
+                
+                const category = getCategoryFromDescription(file.file_description);
+                console.log('CategorizedDropZone: Category extracted', category);
+                
+                if (category && initialCategorizedFiles[category]) {
+                    initialCategorizedFiles[category].push(file);
+                    console.log(`CategorizedDropZone: Added file ${file.file_name} to category ${category}`);
+                } else {
+                    console.log(`CategorizedDropZone: No category match for file ${file.file_name}`, {
+                        extractedCategory: category,
+                        availableCategories: Object.keys(initialCategorizedFiles)
+                    });
+                }
+            });
+        }
+        
+        console.log('CategorizedDropZone: Final categorized files', initialCategorizedFiles);
+        setCategorizedFiles(initialCategorizedFiles);
+    }, [entityData, dataKey, finalCategories]);
+
+    const getCategoryFromDescription = (description) => {
+        if (!description) return null;
+        
+        // Check if the description contains a category identifier (handles both slugs and numeric IDs)
+        const categoryMatch = description.match(/^category:([^-\s]+)/i);
+        if (categoryMatch) {
+            const extractedId = categoryMatch[1];
+            
+            // First, try to find by exact ID match
+            const exactMatch = finalCategories.find(cat => cat.id === extractedId);
+            if (exactMatch) return extractedId;
+            
+            // If no exact match, try to find by numeric ID if extracted ID is numeric
+            if (/^\d+$/.test(extractedId)) {
+                const numericMatch = finalCategories.find(cat => cat.id == extractedId);
+                if (numericMatch) return numericMatch.id;
+            }
+            
+            // Log for debugging
+            console.log('Category extraction debug:', {
+                description,
+                extractedId,
+                availableCategories: finalCategories.map(c => ({ id: c.id, label: c.label }))
+            });
+        }
+        
+        // Fallback: check if description matches any category label
+        const matchedCategory = finalCategories.find(cat => 
+            description.toLowerCase().includes(cat.label.toLowerCase())
+        );
+        return matchedCategory?.id || null;
+    };
+
+    const handleCategoryChange = (categoryId) => {
+        setActiveCategory(categoryId);
+    };
+
+    const getCurrentCategoryFiles = () => {
+        return categorizedFiles[activeCategory] || [];
+    };
+
+    const handleFileUpload = (files) => {
+        // Add category prefix to file descriptions
+        const activeCategoryData = finalCategories.find(cat => cat.id === activeCategory);
+        const categoryPrefix = `category:${activeCategory}`;
+        
+        // Update the files with category information
+        const updatedFiles = files.map(file => ({
+            ...file,
+            file_description: file.file_description ? 
+                `${categoryPrefix} - ${file.file_description}` : 
+                `${categoryPrefix} - ${activeCategoryData?.description || activeCategoryData?.label}`
+        }));
+        
+        // Update the categorized files state
+        setCategorizedFiles(prev => ({
+            ...prev,
+            [activeCategory]: [...(prev[activeCategory] || []), ...updatedFiles]
+        }));
+    };
+
+    const handleFileDelete = (fileId) => {
+        // Remove file from the appropriate category
+        setCategorizedFiles(prev => {
+            const updated = { ...prev };
+            Object.keys(updated).forEach(categoryId => {
+                updated[categoryId] = updated[categoryId].filter(file => file.id !== fileId);
+            });
+            return updated;
+        });
+    };
+
+    const handleFileUpdate = (updatedFile) => {
+        // Update file in the appropriate category
+        const newCategory = getCategoryFromDescription(updatedFile.file_description);
+        
+        setCategorizedFiles(prev => {
+            const updated = { ...prev };
+            
+            // Remove from old category
+            Object.keys(updated).forEach(categoryId => {
+                updated[categoryId] = updated[categoryId].filter(file => file.id !== updatedFile.id);
+            });
+            
+            // Add to new category
+            if (newCategory && updated[newCategory]) {
+                updated[newCategory].push(updatedFile);
+            }
+            
+            return updated;
+        });
+    };
+
+    // Prepare entity data for the current category
+    const currentCategoryEntityData = {
+        ...entityData,
+        [dataKey]: getCurrentCategoryFiles()
+    };
+
+    if (loadingCategories) {
+        return (
+            <div className={styles.categorizedDropZone}>
+                <div className={styles.loadingState}>
+                    Loading categories...
+                </div>
+            </div>
+        );
+    }
+
+    if (finalCategories.length === 0) {
+        return (
+            <div className={styles.categorizedDropZone}>
+                <div className={styles.emptyState}>
+                    No categories available. Please configure site photo categories in settings.
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className={styles.categorizedDropZone}>
+            <div className={styles.categoryTabs}>
+                {finalCategories.map(category => (
+                    <button
+                        key={category.id}
+                        className={`${styles.categoryTab} ${activeCategory === category.id ? styles.active : ''}`}
+                        onClick={() => handleCategoryChange(category.id)}
+                    >
+                        {category.label}
+                        {categorizedFiles[category.id] && categorizedFiles[category.id].length > 0 && (
+                            <span className={styles.fileCount}>
+                                ({categorizedFiles[category.id].length})
+                            </span>
+                        )}
+                    </button>
+                ))}
+            </div>
+            
+            <div className={styles.categoryContent}>
+                {activeCategory && (
+                    <div className={styles.categoryPanel}>
+                        {finalCategories.find(cat => cat.id === activeCategory)?.description && (
+                            <p className={styles.categoryDescription}>
+                                {finalCategories.find(cat => cat.id === activeCategory)?.description}
+                            </p>
+                        )}
+                        
+                        <DropZone
+                            fetchData={fetchData || (() => {
+                                // Default fetch function - refresh current category files
+                                console.log('Files updated for category:', activeCategory);
+                            })}
+                            files={getCurrentCategoryFiles()}
+                            settings={{
+                                url: url,
+                                method: method,
+                                type: 'gallery',
+                                data: {
+                                    file_relationship: file_relationship,
+                                    file_description: `category:${activeCategory} - ${finalCategories.find(cat => cat.id === activeCategory)?.label || activeCategory}`,
+                                },
+                                model: entityData?.constructor?.name || 'Design'
+                            }}
+                        />
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default CategorizedDropZone;

package/src/components/generic/GenericDetail.jsx

@@ -80,6 +80,7 @@ import QrCode from '../QrCode';
 import StagePopupModal from './StagePopupModal';
 import Table from '../DataGrid';
 import TableFilter from '../TableFilter';
+import CategorizedDropZone from '../CategorizedDropZone';
 
 // Proposal components
 import ProposalTemplateSectionManager from '../proposal/ProposalTemplateSectionManager';
@@ -2748,6 +2749,30 @@ function GenericDetail({
                             } else {
                                 return null;
                             }
+                        case 'categorized_dropzone':
+                            // Replace URL parameters like {dataId} with actual values
+                            const replaceUrlParams = (url) => {
+                                if (!url) return url;
+                                return url.replace(/{dataId}/g, routeParams[urlParam] || '');
+                            };
+                            
+                            return (
+                                <CategorizedDropZone
+                                    filetype={activeTabConfig.filetype}
+                                    folder={activeTabConfig.folder}
+                                    dataKey={activeTabConfig.key}
+                                    file_relationship={activeTabConfig.file_relationship}
+                                    url={replaceUrlParams(activeTabConfig.url)}
+                                    method={activeTabConfig.method}
+                                    deleteUrl={replaceUrlParams(activeTabConfig.deleteUrl)}
+                                    categories={activeTabConfig.categories || []}
+                                    categoriesUrl={activeTabConfig.categoriesUrl}
+                                    categoriesWhere={activeTabConfig.categoriesWhere}
+                                    entityData={data}
+                                    routeParams={routeParams}
+                                    fetchData={handleReload}
+                                />
+                            );
                         case 'scheduling':
                             return (
                                 <GenericEditableTable

package/src/components/generic/StagePopupModal.jsx

@@ -56,7 +56,20 @@ const StagePopupModal = ({
                         url = url.replace(`{${key}}`, routeParams[key]);
                     });
 
-                    const response = await CustomFetch(url, 'POST');
+                    // Prepare request data with where and fields parameters
+                    const requestData = {};
+                    
+                    // Add where parameter if available
+                    if (field.where) {
+                        requestData.where = field.where;
+                    }
+                    
+                    // Add fields parameter if available
+                    if (field.fields) {
+                        requestData.fields = field.fields;
+                    }
+
+                    const response = await CustomFetch(url, 'POST', requestData);
                     
                     if (response.data && !response.data.error) {
                         // Handle both nested (response.data.data) and direct (response.data) array formats

package/src/components/styles/CategorizedDropZone.module.scss

@@ -0,0 +1,217 @@
+// CategorizedDropZone.module.scss
+.categorizedDropZone {
+    width: 100%;
+    margin-bottom: 20px;
+}
+
+.categoryTabs {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    margin-bottom: 24px;
+    padding: 6px;
+    background-color: #f8f9fa;
+    border-radius: 8px;
+    border: 1px solid #e9ecef;
+}
+
+.categoryTab {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 16px;
+    background-color: #ffffff;
+    border: 1px solid #dee2e6;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 500;
+    color: #6c757d;
+    transition: all 0.2s ease;
+    white-space: nowrap;
+    outline: none;
+
+    &:hover {
+        color: #495057;
+        background-color: #f8f9fa;
+        border-color: #adb5bd;
+    }
+
+    &.active {
+        color: #ffffff;
+        background-color: #3498db;
+        border-color: #3498db;
+        
+        .fileCount {
+            background-color: rgba(255, 255, 255, 0.2);
+            color: white;
+            border-color: rgba(255, 255, 255, 0.3);
+        }
+    }
+
+    &:focus {
+        outline: 2px solid #3498db;
+        outline-offset: 2px;
+    }
+}
+
+.fileCount {
+    background-color: #e9ecef;
+    color: #495057;
+    padding: 3px 7px;
+    border-radius: 10px;
+    font-size: 11px;
+    font-weight: 600;
+    min-width: 20px;
+    text-align: center;
+    border: 1px solid #ced4da;
+    transition: all 0.2s ease;
+    line-height: 1;
+}
+
+.categoryContent {
+    min-height: 300px;
+}
+
+.categoryPanel {
+    width: 100%;
+}
+
+.categoryTitle {
+    font-size: 20px;
+    font-weight: 600;
+    color: #2c3e50;
+    margin: 0 20px 8px 20px;
+    padding-bottom: 8px;
+    border-bottom: 2px solid #3498db;
+    display: block;
+    width: calc(100% - 40px);
+}
+
+.categoryDescription {
+    font-size: 14px;
+    color: #6c757d;
+    margin: 0 0 24px 0;
+    padding: 0 20px;
+    font-style: italic;
+}
+
+.loadingState,
+.emptyState {
+    text-align: center;
+    padding: 40px 20px;
+    color: #666;
+    font-size: 16px;
+}
+
+.loadingState {
+    background-color: #f8f9fa;
+    border-radius: 8px;
+    border: 1px dashed #ddd;
+}
+
+.emptyState {
+    background-color: #fff3cd;
+    border: 1px solid #ffeaa7;
+    border-radius: 8px;
+    color: #856404;
+}
+
+// Responsive design
+@media (max-width: 768px) {
+    .categoryTabs {
+        gap: 3px;
+        padding: 4px;
+        margin-bottom: 20px;
+    }
+    
+    .categoryTab {
+        flex: 1;
+        justify-content: center;
+        padding: 8px 12px;
+        font-size: 13px;
+        min-width: 0; // Allow tabs to shrink
+    }
+    
+    .fileCount {
+        font-size: 10px;
+        padding: 2px 5px;
+        min-width: 16px;
+    }
+    
+    .categoryTitle {
+        font-size: 18px;
+    }
+    
+    .categoryDescription {
+        font-size: 13px;
+        margin-bottom: 20px;
+    }
+}
+
+// Very small screens
+@media (max-width: 480px) {
+    .categoryTabs {
+        flex-direction: column;
+        gap: 2px;
+    }
+    
+    .categoryTab {
+        width: 100%;
+        padding: 12px 16px;
+        font-size: 14px;
+    }
+}
+
+// Dark theme support
+@media (prefers-color-scheme: dark) {
+    .categoryTabs {
+        background-color: #343a40;
+        border-color: #495057;
+    }
+    
+    .categoryTab {
+        background-color: #495057;
+        border-color: #6c757d;
+        color: #adb5bd;
+        
+        &:hover {
+            background-color: #6c757d;
+            border-color: #adb5bd;
+            color: #f8f9fa;
+        }
+        
+        &.active {
+            background-color: #3498db;
+            border-color: #3498db;
+            color: #ffffff;
+        }
+    }
+    
+    .fileCount {
+        background-color: #6c757d;
+        color: #f8f9fa;
+        border-color: #adb5bd;
+    }
+    
+    .categoryTitle {
+        color: #f8f9fa;
+        border-bottom-color: #3498db;
+    }
+    
+    .categoryDescription {
+        color: #adb5bd;
+    }
+    
+    .loadingState {
+        background-color: #343a40;
+        border-color: #495057;
+        color: #adb5bd;
+    }
+    
+    .emptyState {
+        background-color: #856404;
+        border-color: #ffc107;
+        color: #fff3cd;
+    }
+}

package/src/components/styles/DropZone.module.css

@@ -237,7 +237,7 @@
 /* Modal styles */
 .modalwrap {
     width: 100%;
-    max-width: 500px;
+    max-width: 800px;
 }
 
 .modal {

package/src/index.js

@@ -1,6 +1,7 @@
 /** CMS Components */
 import DataGrid from './components/DataGrid';
 import DropZone from './components/DropZone';
+import CategorizedDropZone from './components/CategorizedDropZone';
 import SortableList from './components/sorting/List';
 
 /** CRM Components */
@@ -100,6 +101,7 @@ export {
     DatePickerPortal,
     Download,
     DropZone,
+    CategorizedDropZone,
     Field,
     Form,
     GalleryModal,