@visns-studio/visns-components 5.12.7 → 5.12.9

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.9",
     "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,311 @@
+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) {
+        // No categories available - show a simple dropzone without categorization
+        console.log('CategorizedDropZone: No categories, showing all files', {
+            dataKey,
+            files: entityData[dataKey] || [],
+            entityData
+        });
+        
+        return (
+            <div className={styles.categorizedDropZone}>
+                <div className={styles.noCategoryContent}>
+                    <DropZone
+                        fetchData={fetchData || (() => {
+                            console.log('Files updated (no categories)');
+                        })}
+                        files={entityData[dataKey] || []}
+                        settings={{
+                            url: url,
+                            method: method,
+                            type: 'gallery',
+                            data: {
+                                file_relationship: file_relationship,
+                                file_description: '',
+                            },
+                            model: entityData?.constructor?.name || 'Design',
+                            folder: folder,
+                            filetype: filetype,
+                            deleteUrl: deleteUrl
+                        }}
+                    />
+                </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/DropZone.jsx

@@ -7,7 +7,7 @@ import { arrayMoveImmutable } from 'array-move';
 import Popup from 'reactjs-popup';
 import imageCompression from 'browser-image-compression';
 
-import { confirmDialog } from '../utils/ConfirmDialog';
+import { confirmDialog } from './utils/ConfirmDialog';
 import CustomFetch from './Fetch';
 import Gallery from './Gallery';
 import styles from './styles/DropZone.module.css';
@@ -189,14 +189,18 @@ function VisnsDropZone({ fetchData, files, settings }) {
 
     useEffect(() => {
         if (data?.length > 0) {
+            // Only send the ID field for each file for sorting
+            const sortData = data.map(file => ({ id: file.id }));
+            
             CustomFetch(
                 '/ajax/files/sort_update',
                 'POST',
                 {
-                    list: data,
+                    list: sortData,
                 },
                 function (result) {
                     if (result.error === '') {
+                        console.log('Sort order updated successfully');
                     } else {
                         toast.error(String(result.error));
                     }

package/src/components/Form.jsx

@@ -11,7 +11,7 @@ import _ from 'lodash';
 import ReactDataGrid from '@visns-studio/visns-datagrid-enterprise';
 import { X } from 'lucide-react';
 import imageCompression from 'browser-image-compression';
-import { confirmDialog } from '../utils/ConfirmDialog';
+import { confirmDialog } from './utils/ConfirmDialog';
 
 import '@visns-studio/visns-datagrid-enterprise/index.css';
 

package/src/components/generic/CmsSort.jsx

@@ -15,14 +15,18 @@ const ChildSort = ({ item, url }) => {
 
     useEffect(() => {
         if (data.length > 0) {
+            // Only send the ID field for each item for sorting
+            const sortData = data.map(item => ({ id: item.id }));
+            
             CustomFetch(
                 url + '/sort_update',
                 'POST',
                 {
-                    list: data,
+                    list: sortData,
                 },
                 function (result) {
                     if (result.error === '') {
+                        console.log('Sort order updated successfully');
                     } else {
                         toast.error(String(result.error));
                     }
@@ -60,14 +64,18 @@ const CmsSort = ({ setting, category = false }) => {
     useEffect(() => {
         if (category === false) {
             if (data.length > 0) {
+                // Only send the ID field for each item for sorting
+                const sortData = data.map(item => ({ id: item.id }));
+                
                 CustomFetch(
                     url + '/sort_update',
                     'POST',
                     {
-                        list: data,
+                        list: sortData,
                     },
                     function (result) {
                         if (result.error === '') {
+                            console.log('Sort order updated successfully');
                         } else {
                             toast.error(String(result.error));
                         }

package/src/components/generic/ConfirmationDialog.jsx

@@ -87,10 +87,23 @@ export const showConfirmDialog = ({
     // Show SweetAlert2 dialog
     return Swal.fire(swalOptions).then((result) => {
         if (result.isConfirmed) {
-            onConfirm();
-        } else if (result.dismiss === Swal.DismissReason.cancel) {
-            onCancel();
+            try {
+                onConfirm();
+            } catch (error) {
+                console.error('Error executing onConfirm callback:', error);
+            }
+        } else if (result.dismiss === Swal.DismissReason.cancel || result.isDenied) {
+            try {
+                onCancel();
+            } catch (error) {
+                console.error('Error executing onCancel callback:', error);
+            }
         }
+        
+        return result;
+    }).catch((error) => {
+        console.error('SweetAlert2 error:', error);
+        return error;
     });
 };
 

package/src/components/generic/GenericDashboard.jsx

@@ -9,7 +9,7 @@ import dayjs from 'dayjs';
 import parse from 'html-react-parser';
 import { createSwapy } from 'swapy';
 import { X, Minus, Plus, Star, Trash2 } from 'lucide-react';
-import { confirmDialog } from '../../utils/ConfirmDialog';
+import { confirmDialog } from '../utils/ConfirmDialog';
 
 import CustomFetch from '../Fetch';
 import MultiSelect from '../MultiSelect';

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/GenericDynamic.jsx

@@ -4,7 +4,7 @@ import { toast } from 'react-toastify';
 import { saveAs } from 'file-saver';
 import parse from 'html-react-parser';
 import { Delete, Download as DownloadIcon } from 'lucide-react';
-import { confirmDialog } from '../../utils/ConfirmDialog';
+import { confirmDialog } from '../utils/ConfirmDialog';
 
 import CustomFetch from '../Fetch';
 import Download from '../Download';

package/src/components/generic/GenericEditableTable.jsx

@@ -4,7 +4,7 @@ import debounce from 'lodash.debounce';
 import { toast } from 'react-toastify';
 import { Trash2, ArrowUp, ArrowDown, Copy, Droplets } from 'lucide-react';
 import { Compact } from '@uiw/react-color';
-import { confirmDialog } from '../../utils/ConfirmDialog';
+import { confirmDialog } from '../utils/ConfirmDialog';
 
 import CustomFetch from '../Fetch';
 import MultiSelect from '../MultiSelect';

package/src/components/generic/GenericFormBuilder.jsx

@@ -34,7 +34,7 @@ import {
     Edit as Pencil,
     GripVertical as ChevronVertical,
 } from 'lucide-react';
-import { confirmDialog } from '../../utils/ConfirmDialog';
+import { confirmDialog } from '../utils/ConfirmDialog';
 
 import 'react-toggle/style.css';
 import 'react-datepicker/dist/react-datepicker.css';

package/src/components/generic/GenericSort.jsx

@@ -26,11 +26,14 @@ const ChildSort = ({ item, url }) => {
 
     useEffect(() => {
         if (data.length > 0) {
+            // Only send the ID field for each item for sorting
+            const sortData = data.map(item => ({ id: item.id }));
+            
             CustomFetch(
                 `${url}/sort_update`,
                 'POST',
                 {
-                    list: data,
+                    list: sortData,
                 },
                 function (result) {
                     if (result.error === '') {
@@ -108,6 +111,8 @@ const GenericSort = ({ category = false, layout = 'full' }) => {
                 payload.id = paramValue;
             } else {
                 fetchUrl = fetchUrl + '/sort_update';
+                // For the standard sort_update endpoint, only send IDs
+                payload.list = sortData.map(item => ({ id: item.id }));
             }
 
             if (category === false) {
@@ -116,6 +121,8 @@ const GenericSort = ({ category = false, layout = 'full' }) => {
 
                     if (res.data.error !== '') {
                         toast.error(String(res.data.error));
+                    } else {
+                        toast.success('Sort updated successfully');
                     }
                 }
             }

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