@visns-studio/visns-components 5.8.2 → 5.8.4

package/package.json

@@ -4,10 +4,10 @@
         "@fontsource/barlow": "^5.2.5",
         "@inovua/reactdatagrid-community": "^5.10.2",
         "@inovua/reactdatagrid-enterprise": "^5.10.2",
-        "@nivo/bar": "^0.88.0",
-        "@nivo/core": "^0.88.0",
-        "@nivo/line": "^0.88.0",
-        "@nivo/pie": "^0.88.0",
+        "@nivo/bar": "^0.95.0",
+        "@nivo/core": "^0.95.0",
+        "@nivo/line": "^0.95.0",
+        "@nivo/pie": "^0.95.0",
         "@tinymce/tinymce-react": "^6.1.0",
         "@visns-studio/visns-datagrid-community": "^1.0.14",
         "@visns-studio/visns-datagrid-enterprise": "^1.0.14",
@@ -18,14 +18,14 @@
         "awesome-debounce-promise": "^2.1.0",
         "browser-image-compression": "^2.0.2",
         "dayjs": "^1.11.13",
-        "fabric": "^6.6.4",
+        "fabric": "^6.6.5",
         "file-saver": "^2.0.5",
-        "framer-motion": "^12.9.7",
-        "html-react-parser": "^5.2.3",
+        "framer-motion": "^12.11.0",
+        "html-react-parser": "^5.2.5",
         "lodash": "^4.17.21",
         "lodash.debounce": "^4.0.8",
         "moment": "^2.30.1",
-        "motion": "^12.9.7",
+        "motion": "^12.11.0",
         "numeral": "^2.0.6",
         "pluralize": "^8.0.0",
         "qrcode.react": "^4.2.0",
@@ -60,12 +60,12 @@
         "validator": "^13.15.0",
         "vite": "^6.3.5",
         "yarn": "^1.22.22",
-        "yet-another-react-lightbox": "^3.23.0"
+        "yet-another-react-lightbox": "^3.23.1"
     },
     "devDependencies": {
         "@babel/core": "^7.27.1",
         "@babel/plugin-transform-runtime": "^7.27.1",
-        "@babel/preset-env": "^7.27.1",
+        "@babel/preset-env": "^7.27.2",
         "@babel/preset-react": "^7.27.1",
         "babel-loader": "^10.0.0",
         "copy-webpack-plugin": "^13.0.0",
@@ -74,7 +74,7 @@
         "mini-css-extract-plugin": "^2.9.2",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "sass": "^1.87.0",
+        "sass": "^1.88.0",
         "sass-loader": "^16.0.5"
     },
     "peerDependencies": {
@@ -82,7 +82,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.8.2",
+    "version": "5.8.4",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/crm/TableFilter.jsx

@@ -8,12 +8,13 @@ function TableFilter({
     settings,
     type,
     onFilterChange,
+    tabs,
 }) {
     const [visibleChildren, setVisibleChildren] = useState({});
     const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
     const isFirstRender = useRef(true);
 
-    // Initialize visible children for all parent categories
+    // Initialize visible children for all parent categories and set checkbox function availability
     useEffect(() => {
         if (isFirstRender.current && filters.length > 0) {
             const initialVisibleState = {};
@@ -21,26 +22,96 @@ function TableFilter({
             // Find the first parent with isParent=true and set only it to visible
             let foundFirstParent = false;
 
-            for (const filter of filters) {
+            // Initialize filters with checkbox function availability
+            const updatedFilters = filters.map((filter) => {
+                // Find the tab configuration for this filter
+                const tabConfig = tabs?.find((tab) => tab.id === filter.id);
+
+                // Check if the tab has the checkboxUpdate and checkboxDelete functions
+                const hasCheckboxUpdate =
+                    tabConfig?.functions?.checkboxUpdate !== undefined;
+                const hasCheckboxDelete =
+                    tabConfig?.functions?.checkboxDelete !== undefined;
+
+                // Add checkbox function availability to the filter
+                const updatedFilter = {
+                    ...filter,
+                    hasCheckboxUpdate,
+                    hasCheckboxDelete,
+                };
+
+                // If this filter has children, also add the checkbox function info to each child
                 if (
-                    filter.isParent &&
-                    filter.children &&
-                    filter.children.length > 0
+                    updatedFilter.isParent &&
+                    updatedFilter.children &&
+                    updatedFilter.children.length > 0
                 ) {
-                    // Only show the first parent's children by default
-                    // and ensure all others are explicitly set to false
+                    updatedFilter.children = updatedFilter.children.map(
+                        (child, index) => {
+                            // Find the tab configuration for this child
+                            const childTabConfig = tabs?.find(
+                                (tab) => tab.id === child.id
+                            );
+
+                            // Check if the tab has the checkboxUpdate and checkboxDelete functions
+                            const childHasCheckboxUpdate =
+                                childTabConfig?.functions?.checkboxUpdate !==
+                                undefined;
+                            const childHasCheckboxDelete =
+                                childTabConfig?.functions?.checkboxDelete !==
+                                undefined;
+
+                            // If this is the first child and the parent is active but no child is active,
+                            // this child will be automatically selected
+                            const isFirstChild = index === 0;
+                            const isParentActive = updatedFilter.show === true;
+                            const noChildActive = !updatedFilter.children.some(
+                                (c) => c.show === true
+                            );
+
+                            // If this is the first child and will be auto-selected, use its function availability
+                            if (
+                                isFirstChild &&
+                                isParentActive &&
+                                noChildActive
+                            ) {
+                                // Update the parent's function availability based on the first child
+                                updatedFilter.hasCheckboxUpdate =
+                                    childHasCheckboxUpdate;
+                                updatedFilter.hasCheckboxDelete =
+                                    childHasCheckboxDelete;
+                            }
+
+                            return {
+                                ...child,
+                                hasCheckboxUpdate: childHasCheckboxUpdate,
+                                hasCheckboxDelete: childHasCheckboxDelete,
+                            };
+                        }
+                    );
+
+                    // Track which parent should be expanded by default
                     initialVisibleState[filter.id] = !foundFirstParent;
 
                     if (!foundFirstParent) {
                         foundFirstParent = true;
                     }
                 }
+
+                return updatedFilter;
+            });
+
+            // Update the filters with the checkbox function availability
+            if (onFilterChange) {
+                onFilterChange(updatedFilters, null);
+            } else if (setFilters) {
+                setFilters(updatedFilters);
             }
 
             setVisibleChildren(initialVisibleState);
             isFirstRender.current = false;
         }
-    }, [filters]);
+    }, [filters, tabs, onFilterChange, setFilters]);
 
     // Toggle visibility of children when clicking on a parent
     // Only one parent can be open at a time
@@ -74,11 +145,41 @@ function TableFilter({
         // If clicking on a parent category, toggle its children visibility
         if (filtertype === 'parent') {
             const clickedFilter = filters.find((f) => f.id === id);
-            if (clickedFilter && clickedFilter.isParent) {
+            if (
+                clickedFilter &&
+                clickedFilter.isParent &&
+                clickedFilter.children &&
+                clickedFilter.children.length > 0
+            ) {
                 toggleChildren(id);
 
-                // Don't activate the parent as a filter, but keep processing to update settings
-                // This allows the parent to expand/collapse while still triggering content updates
+                // When clicking on a parent, we need to explicitly select the first child
+                // This ensures the correct tab is activated and the correct buttons are shown
+                const firstChildId = clickedFilter.children[0].id;
+                const firstChildValue =
+                    clickedFilter.children[0].hasOwnProperty('value')
+                        ? clickedFilter.children[0].value
+                        : '';
+
+                // Create a synthetic event for the first child
+                const childEvent = {
+                    preventDefault: () => {},
+                    target: {
+                        dataset: {
+                            id: firstChildId,
+                            parent: id,
+                            filtertype: 'children',
+                            url: clickedFilter.children[0].url || '',
+                            value: firstChildValue,
+                        },
+                    },
+                };
+
+                // Process the synthetic child event
+                filterTable(childEvent);
+
+                // Return early to prevent further processing of the parent click
+                return;
             }
         }
 
@@ -97,23 +198,25 @@ function TableFilter({
 
             // For parent filters
             if (filter.isParent) {
-                // If this is the clicked parent, expand/collapse it
+                // If this is the clicked parent, expand/collapse it and activate the first child
                 if (filter.id === id && filtertype === 'parent') {
-                    // Update children - don't change their active state
+                    // Update children - activate the first child
                     const updatedChildren = filter.children
-                        ? filter.children.map((child) => ({
+                        ? filter.children.map((child, index) => ({
                               ...child,
-                              // Preserve existing active state
-                              class: child.class,
-                              show: child.show,
+                              // Set the first child as active
+                              class: index === 0 ? 'subactivechildren' : '',
+                              show: index === 0, // Only the first child is shown
+                              active: index === 0, // Only the first child is active
                           }))
                         : [];
 
                     return {
                         ...filter,
-                        // Don't change parent's active state when just expanding/collapsing
-                        class: filter.class,
-                        show: filter.show,
+                        // Set the parent as active
+                        class: 'subactive',
+                        show: true,
+                        active: true,
                         children: updatedChildren,
                     };
                 }
@@ -201,7 +304,63 @@ function TableFilter({
         };
 
         // Calculate the updated filters
-        const updatedFilters = filters.map(updateFilter);
+        const updatedFilters = filters.map((filter) => {
+            const updatedFilter = updateFilter(filter);
+
+            // If this filter has children, process each child
+            if (updatedFilter.children && updatedFilter.children.length > 0) {
+                updatedFilter.children = updatedFilter.children.map(
+                    (child, index) => {
+                        // Find the tab configuration for this child
+                        const tabConfig = tabs?.find(
+                            (tab) => tab.id === child.id
+                        );
+
+                        // Check if the tab has the checkboxUpdate and checkboxDelete functions
+                        const hasCheckboxUpdate =
+                            tabConfig?.functions?.checkboxUpdate !== undefined;
+                        const hasCheckboxDelete =
+                            tabConfig?.functions?.checkboxDelete !== undefined;
+
+                        // If this is the first child and the parent is active but no child is active,
+                        // this child will be automatically selected
+                        const isFirstChild = index === 0;
+                        const isParentActive = updatedFilter.show === true;
+                        const noChildActive = !updatedFilter.children.some(
+                            (c) => c.show === true
+                        );
+
+                        // If this is the first child and will be auto-selected, use its function availability
+                        if (isFirstChild && isParentActive && noChildActive) {
+                            // Update the parent's function availability based on the first child
+                            updatedFilter.hasCheckboxUpdate = hasCheckboxUpdate;
+                            updatedFilter.hasCheckboxDelete = hasCheckboxDelete;
+                        }
+
+                        return {
+                            ...child,
+                            hasCheckboxUpdate,
+                            hasCheckboxDelete,
+                        };
+                    }
+                );
+            }
+
+            // Find the tab configuration for this filter
+            const tabConfig = tabs?.find((tab) => tab.id === updatedFilter.id);
+
+            // Check if the tab has the checkboxUpdate and checkboxDelete functions
+            const hasCheckboxUpdate =
+                tabConfig?.functions?.checkboxUpdate !== undefined;
+            const hasCheckboxDelete =
+                tabConfig?.functions?.checkboxDelete !== undefined;
+
+            return {
+                ...updatedFilter,
+                hasCheckboxUpdate,
+                hasCheckboxDelete,
+            };
+        });
 
         // Only navigate to URL if it's provided and not a parent toggle action
         if (
@@ -252,8 +411,10 @@ function TableFilter({
                           )
                         : [];
 
-                    // Add the new filter
-                    _where.push({ id: filterId, value: filterValue });
+                    // Add the new filter only if both filterId and filterValue have values
+                    if (filterId && filterValue !== '') {
+                        _where.push({ id: filterId, value: filterValue });
+                    }
 
                     updatedSettings = {
                         ...updatedSettings,
@@ -271,19 +432,27 @@ function TableFilter({
                     // Remove any existing filters that might conflict
                     w = w.filter((item) => item.id !== filterId);
 
-                    // Add the new filter
-                    w.push({ id: filterId, value: filterValue });
+                    // Add the new filter only if both filterId and filterValue have values
+                    if (filterId && filterValue !== '') {
+                        w.push({ id: filterId, value: filterValue });
+                    }
 
                     updatedSettings = { ...updatedSettings, where: w };
                 } else {
                     // If neither ajaxSetting.where nor where exists, create a new ajaxSetting
-                    updatedSettings = {
-                        ...settings,
-                        ajaxSetting: {
-                            ...(settings.ajaxSetting || {}),
-                            where: [{ id: filterId, value: filterValue }],
-                        },
-                    };
+                    // Only apply the filter if both filterId and filterValue have values
+                    if (filterId && filterValue !== '') {
+                        updatedSettings = {
+                            ...settings,
+                            ajaxSetting: {
+                                ...(settings.ajaxSetting || {}),
+                                where: [{ id: filterId, value: filterValue }],
+                            },
+                        };
+                    } else {
+                        // If either filterId or filterValue is empty, just copy the existing settings
+                        updatedSettings = { ...settings };
+                    }
                 }
             }
         }

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

@@ -623,6 +623,7 @@ function GenericIndex({
                                         settings={config}
                                         type={layout}
                                         onFilterChange={handleFilterChange}
+                                        tabs={setting.tabs}
                                     />
                                 </div>
                                 <div className={styles.tabcontent__main}>
@@ -646,6 +647,7 @@ function GenericIndex({
                                     settings={config}
                                     type={layout}
                                     onFilterChange={handleFilterChange}
+                                    tabs={setting.tabs}
                                 />
                             </div>
                             <div className={styles.grid__subcontent}>
@@ -692,6 +694,54 @@ function GenericIndex({
         }
     }, []);
 
+    // Add an effect to update the config when the active tab changes
+    useEffect(() => {
+        // Find the active filter and its child
+        const activeFilter = subnav?.find((filter) => {
+            if (filter.isParent) {
+                return (
+                    filter.children &&
+                    filter.children.some((child) => child.show)
+                );
+            }
+            return filter.show === true;
+        });
+
+        if (
+            activeFilter?.isParent &&
+            activeFilter.children &&
+            activeFilter.children.length > 0
+        ) {
+            // Find the active child
+            const activeChild = activeFilter.children.find(
+                (child) => child.show
+            );
+
+            // If no child is active but the parent is, activate the first child
+            if (!activeChild && activeFilter.show) {
+                const firstChild = activeFilter.children[0];
+                const firstChildId = firstChild.id;
+
+                // Find the tab config for the first child
+                const firstChildTabConfig = setting.tabs?.find(
+                    (tab) => tab.id === firstChildId
+                );
+
+                if (firstChildTabConfig) {
+                    // Update the config with the first child's tab config
+                    setConfig((prevConfig) => ({
+                        ...prevConfig,
+                        id: firstChildTabConfig.id,
+                        functions:
+                            firstChildTabConfig.functions ||
+                            prevConfig.functions ||
+                            {},
+                    }));
+                }
+            }
+        }
+    }, [subnav, setting.tabs, setConfig]);
+
     return (
         <>
             <div className={styles.grid}>
@@ -728,40 +778,142 @@ function GenericIndex({
             <Outlet />
 
             <div className={styles.polActions}>
-                {/* Render Update button if checkboxUpdate function is configured in any location */}
-                {getFunctionConfig('checkboxUpdate') && (
-                    <button
-                        className={styles.btn}
-                        onClick={handleCheckboxUpdate}
-                    >
-                        {getFunctionConfig('checkboxUpdate').label || 'Update'}
-                    </button>
-                )}
+                {/* Find active filter to check if buttons should be shown */}
+                {(() => {
+                    // Find the active item and its configuration
+                    const activeItemInfo = (() => {
+                        // First check if there's an active filter
+                        const activeFilter = subnav?.find((filter) => {
+                            if (filter.isParent) {
+                                return (
+                                    filter.children &&
+                                    filter.children.some((child) => child.show)
+                                );
+                            }
+                            return filter.show === true;
+                        });
 
-                {/* Render Delete button if checkboxDelete function is configured in any location */}
-                {getFunctionConfig('checkboxDelete') && (
-                    <button
-                        className={styles.btn}
-                        onClick={handleCheckboxDelete}
-                    >
-                        {getFunctionConfig('checkboxDelete').label || 'Delete'}
-                    </button>
-                )}
-
-                {/* Render Custom Action button if customAction function is configured in any location */}
-                {getFunctionConfig('customAction') && (
-                    <button className={styles.btn} onClick={handleCustomAction}>
-                        {getFunctionConfig('customAction').label ||
-                            'Custom Action'}
-                        aa
-                    </button>
-                )}
+                        if (!activeFilter) {
+                            return { activeTabId: undefined };
+                        }
 
-                {setting.export?.label && (
-                    <button className={styles.btn} onClick={handleExport}>
-                        {setting.export.label}
-                    </button>
-                )}
+                        // If the active filter is a parent
+                        if (
+                            activeFilter.isParent &&
+                            activeFilter.children &&
+                            activeFilter.children.length > 0
+                        ) {
+                            // Find the active child
+                            const activeChild = activeFilter.children.find(
+                                (child) => child.show
+                            );
+
+                            // If there's an active child, use its ID
+                            if (activeChild) {
+                                const childTabConfig = setting.tabs?.find(
+                                    (tab) => tab.id === activeChild.id
+                                );
+                                return {
+                                    activeTabId: activeChild.id,
+                                    activeTabConfig: childTabConfig,
+                                };
+                            }
+
+                            // If no child is active but the parent is, use the first child's ID
+                            // This handles the case when clicking on a parent automatically selects the first child
+                            const firstChild = activeFilter.children[0];
+                            const firstChildTabConfig = setting.tabs?.find(
+                                (tab) => tab.id === firstChild.id
+                            );
+
+                            // Log for debugging
+                            console.log(
+                                'No active child found, using first child:',
+                                firstChild.id
+                            );
+                            console.log(
+                                'First child tab config:',
+                                firstChildTabConfig
+                            );
+
+                            return {
+                                activeTabId: firstChild.id,
+                                activeTabConfig: firstChildTabConfig,
+                            };
+                        }
+
+                        // For non-parent filters
+                        const tabConfig = setting.tabs?.find(
+                            (tab) => tab.id === activeFilter.id
+                        );
+                        return {
+                            activeTabId: activeFilter.id,
+                            activeTabConfig: tabConfig,
+                        };
+                    })();
+
+                    const { activeTabId, activeTabConfig } = activeItemInfo;
+
+                    // Check if the active tab has the checkboxUpdate function
+                    const hasCheckboxUpdate =
+                        activeTabConfig?.functions?.checkboxUpdate !==
+                        undefined;
+
+                    // Check if the active tab has the checkboxDelete function
+                    const hasCheckboxDelete =
+                        activeTabConfig?.functions?.checkboxDelete !==
+                        undefined;
+
+                    return (
+                        <>
+                            {/* Render Update button if checkboxUpdate function is configured and the active tab allows it */}
+                            {getFunctionConfig('checkboxUpdate') &&
+                                (activeTabId === undefined ||
+                                    hasCheckboxUpdate) && (
+                                    <button
+                                        className={styles.btn}
+                                        onClick={handleCheckboxUpdate}
+                                    >
+                                        {getFunctionConfig('checkboxUpdate')
+                                            .label || 'Update'}
+                                    </button>
+                                )}
+
+                            {/* Render Delete button if checkboxDelete function is configured and the active tab allows it */}
+                            {getFunctionConfig('checkboxDelete') &&
+                                (activeTabId === undefined ||
+                                    hasCheckboxDelete) && (
+                                    <button
+                                        className={styles.btn}
+                                        onClick={handleCheckboxDelete}
+                                    >
+                                        {getFunctionConfig('checkboxDelete')
+                                            .label || 'Delete'}
+                                    </button>
+                                )}
+
+                            {/* Render Custom Action button if customAction function is configured in any location */}
+                            {getFunctionConfig('customAction') && (
+                                <button
+                                    className={styles.btn}
+                                    onClick={handleCustomAction}
+                                >
+                                    {getFunctionConfig('customAction').label ||
+                                        'Custom Action'}
+                                </button>
+                            )}
+
+                            {setting.export?.label && (
+                                <button
+                                    className={styles.btn}
+                                    onClick={handleExport}
+                                >
+                                    {setting.export.label}
+                                </button>
+                            )}
+                        </>
+                    );
+                })()}
             </div>
         </>
     );