@iotready/nextjs-components-library 1.0.0-preview25 → 1.0.0-preview26

package/components/groups/GroupsDevices.d.ts

@@ -1,6 +1,6 @@
 import { Theme } from "@emotion/react";
 import { UserType, AssetType, DevicePositionType, TrackleDeviceType } from "../../types";
-declare const GroupsDevices: ({ userInfo, handleGetUsersList, handleAddUserToGroup, handleRemoveUserFromGroup, handleGetGroups, handleGetUsersGroup, handleGetDevices, handleUpdateDevice, handleGetPositions, handleAddDevicesToGroup, handleRemoveDevicesFromGroup, handleCreateGroup, handleDeleteGroup, handleUpdateGroup, group, columnsArray, containerDataGrid, props, propsDatagrid, loadingComponent, containerProps, enableMaps, mapsHeight, mapsClickCallback, theme, confirmMui, propsHeaderGroups, forceGetDevices, groupsLabelAll }: {
+declare const GroupsDevices: ({ userInfo, handleGetUsersList, handleAddUserToGroup, handleRemoveUserFromGroup, handleGetGroups, handleGetUsersGroup, handleGetDevices, handleUpdateDevice, handleGetPositions, handleAddDevicesToGroup, handleRemoveDevicesFromGroup, handleCreateGroup, handleDeleteGroup, handleUpdateGroup, group, columnsArray, containerDataGrid, props, propsDatagrid, loadingComponent, containerProps, enableMaps, mapsHeight, mapsClickCallback, theme, confirmMui, propsHeaderGroups, forceGetDevices, customToolbar, groupsLabelAll }: {
     userInfo: UserType;
     handleGetUsersList: ({ page, pageSize }: {
         page: number;
@@ -33,7 +33,8 @@ declare const GroupsDevices: ({ userInfo, handleGetUsersList, handleAddUserToGro
     mapsClickCallback?: (position: DevicePositionType) => void;
     theme: Theme;
     confirmMui?: (options?: any) => Promise<void>;
-    forceGetDevices: number;
+    forceGetDevices?: number;
+    customToolbar?: string[];
     groupsLabelAll?: string;
 }) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode> | Promise<import("react").AwaitedReactNode> | null;
 export default GroupsDevices;

package/components/groups/GroupsDevices.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box, CircularProgress, Autocomplete, TextField, Input, IconButton, Button, Card, CardContent, CardHeader, Modal, Typography, Stack, Tab } from "@mui/material";
-import { cloneElement, isValidElement, useEffect, useMemo, useState } from "react";
+import { cloneElement, isValidElement, useEffect, useMemo, useRef, useState } from "react";
 import AddIcon from '@mui/icons-material/Add';
 import PlaylistAddIcon from '@mui/icons-material/PlaylistAdd';
 import EditIcon from '@mui/icons-material/Edit';
@@ -10,12 +10,12 @@ import ReadMoreIcon from '@mui/icons-material/ReadMore';
 import PlaylistRemoveIcon from '@mui/icons-material/PlaylistRemove';
 import CloseIcon from '@mui/icons-material/Close';
 import { LoadingButton, TabContext, TabList, TabPanel } from "@mui/lab";
-import { DataGrid, GridToolbar } from "@mui/x-data-grid";
+import { DataGrid, GridToolbar, GridToolbarExport, GridToolbarQuickFilter } from "@mui/x-data-grid";
 import GroupUpdate from "./GroupUpdate";
 import BackIcon from '@mui/icons-material/ArrowBack';
 import dynamic from "next/dynamic";
 import { ThemeProvider } from '@mui/material/styles';
-const GroupsDevices = ({ userInfo, handleGetUsersList, handleAddUserToGroup, handleRemoveUserFromGroup, handleGetGroups, handleGetUsersGroup, handleGetDevices, handleUpdateDevice, handleGetPositions, handleAddDevicesToGroup, handleRemoveDevicesFromGroup, handleCreateGroup, handleDeleteGroup, handleUpdateGroup, group = 'all', columnsArray = [], containerDataGrid = 'Card', props = {}, propsDatagrid = {}, loadingComponent = _jsx(CircularProgress, {}), containerProps = {}, enableMaps = true, mapsHeight = '400px', mapsClickCallback = () => { }, theme, confirmMui, propsHeaderGroups, forceGetDevices, groupsLabelAll }) => {
+const GroupsDevices = ({ userInfo, handleGetUsersList, handleAddUserToGroup, handleRemoveUserFromGroup, handleGetGroups, handleGetUsersGroup, handleGetDevices, handleUpdateDevice, handleGetPositions, handleAddDevicesToGroup, handleRemoveDevicesFromGroup, handleCreateGroup, handleDeleteGroup, handleUpdateGroup, group = 'all', columnsArray = [], containerDataGrid = 'Card', props = {}, propsDatagrid = {}, loadingComponent = _jsx(CircularProgress, {}), containerProps = {}, enableMaps = true, mapsHeight = '400px', mapsClickCallback = () => { }, theme, confirmMui, propsHeaderGroups, forceGetDevices, customToolbar, groupsLabelAll }) => {
     const [devices, setDevices] = useState([]);
     const [positions, setPositions] = useState([]);
     const [loadingDevices, setLoadingDevices] = useState(false);
@@ -24,6 +24,7 @@ const GroupsDevices = ({ userInfo, handleGetUsersList, handleAddUserToGroup, han
     const [editGroup, setEditGroup] = useState(false);
     const [checkboxSelection, setCheckboxSelection] = useState(false);
     const [devicesToAdd, setDevicesToAdd] = useState([]);
+    const [deviceSelectedObjs, setDeviceSelectedObjs] = useState([]);
     const [currentGroup, setCurrentGroup] = useState(group);
     const [selectedGroup, setSelectedGroup] = useState(group);
     const [groups, setGroups] = useState(null);
@@ -35,6 +36,7 @@ const GroupsDevices = ({ userInfo, handleGetUsersList, handleAddUserToGroup, han
     const [description, setDescription] = useState('');
     const [groupUpdateVisible, setGroupUpdateVisible] = useState(false);
     const [valueTab, setValueTab] = useState('1');
+    const clickedIdRef = useRef(null);
     const handleChangeTab = (event, newValue) => {
         setValueTab(newValue);
     };
@@ -178,8 +180,7 @@ const GroupsDevices = ({ userInfo, handleGetUsersList, handleAddUserToGroup, han
     const addToSelectedGroup = async () => {
         setLoadingGroups(true);
         try {
-            const devicesToPatch = devices.filter((row) => devicesToAdd.includes(row.id));
-            await handleAddDevicesToGroup(userInfo, selectedGroup, devicesToPatch);
+            await handleAddDevicesToGroup(userInfo, selectedGroup, deviceSelectedObjs);
             setLoadingGroups(false);
             setCurrentGroup(selectedGroup);
             setDevicesToAdd([...[]]);
@@ -195,8 +196,7 @@ const GroupsDevices = ({ userInfo, handleGetUsersList, handleAddUserToGroup, han
     const removeFromCurrentGroup = async () => {
         setLoadingGroups(true);
         try {
-            const devicesToRemove = devices.filter((row) => devicesToAdd.includes(row.id));
-            await handleRemoveDevicesFromGroup(userInfo, selectedGroup, devicesToRemove);
+            await handleRemoveDevicesFromGroup(userInfo, selectedGroup, deviceSelectedObjs);
             setLoadingGroups(false);
             setDevicesToAdd([]);
             fetchDevices(currentGroup, selectedGroup);
@@ -216,14 +216,62 @@ const GroupsDevices = ({ userInfo, handleGetUsersList, handleAddUserToGroup, han
         setCheckboxSelection(!checkboxSelection);
     };
     const renderMaps = (_jsx(Map, { positions: positions, mapsClickCallback: mapsClickCallback, height: mapsHeight }));
-    const renderDataGrid = (_jsx("div", { style: { display: 'flex', flexDirection: 'column', minHeight: 323 }, children: _jsx(DataGrid, { checkboxSelection: checkboxSelection, onRowSelectionModelChange: (ids) => {
-                if (checkboxSelection) {
-                    setDevicesToAdd(ids);
-                }
-            }, rowSelectionModel: devicesToAdd, disableDensitySelector: true, disableColumnSelector: true, disableRowSelectionOnClick: true, loading: loadingDevices, rows: devices, columns: checkboxSelection ? columnsArray.filter(col => col.field !== 'id') : columnsArray, slots: {
-                noRowsOverlay: () => (_jsx(Stack, { height: "100%", alignItems: "center", justifyContent: "center", children: currentGroup !== 'all' ? _jsxs(_Fragment, { children: [_jsx(Box, { children: "No devices in group" }), editGroup ? _jsxs(Button, { onClick: () => addDevicesToCurrentGroup(), variant: "outlined", color: "primary", size: "small", sx: { mt: 2 }, children: [_jsx(PlaylistAddIcon, { fontSize: "small", sx: { mr: 1 } }), " Add devices"] }) : ''] }) : "No devices" })),
+    useEffect(() => {
+        if (devicesToAdd.length <= 0) {
+            setDeviceSelectedObjs([]);
+        }
+    }, [devicesToAdd]);
+    const CustomToolbar = () => (_jsxs("div", { style: { display: 'flex', padding: '8px', justifyContent: 'space-between', paddingTop: '2px' }, children: [_jsxs("div", { style: { display: 'flex', gap: 8, marginRight: '20px' }, children: [customToolbar && customToolbar.includes('filters') ?
+                        _jsx(GridToolbarExport, { sx: { mr: 2 } })
+                        : '', customToolbar && customToolbar.includes('export') ?
+                        _jsx(GridToolbarExport, {})
+                        : ''] }), customToolbar && customToolbar.includes('quickfilter') && _jsx(GridToolbarQuickFilter, {})] }));
+    const renderDataGrid = (_jsx("div", { style: { display: 'flex', flexDirection: 'column', minHeight: 323 }, children: _jsx(DataGrid, { checkboxSelection: checkboxSelection, 
+            // Se siamo in modalità aggiunta, includi gli ID già nel gruppo
+            rowSelectionModel: (checkboxSelection && currentGroup === 'all')
+                ? [
+                    ...devices
+                        .filter(d => d.groups?.includes(selectedGroup))
+                        .map(d => d.id.toString()),
+                    ...devicesToAdd,
+                ]
+                : devicesToAdd, 
+            // Se siamo in modalità aggiunta, disabilita la selezione per i già nel gruppo
+            isRowSelectable: params => {
+                return (checkboxSelection && currentGroup === 'all')
+                    ? !params.row.groups?.includes(selectedGroup)
+                    : true;
+            }, onCellClick: (params) => {
+                clickedIdRef.current = params.id.toString(); // aggiornamento immediato
+            }, onRowSelectionModelChange: (ids) => {
+                if (!checkboxSelection || !clickedIdRef.current)
+                    return;
+                const clickedId = clickedIdRef.current;
+                clickedIdRef.current = null; // resetta subito dopo l’uso
+                setDevicesToAdd(prevIds => {
+                    const updated = prevIds.includes(clickedId)
+                        ? prevIds.filter(id => id !== clickedId)
+                        : [...prevIds, clickedId];
+                    return updated;
+                });
+                setDeviceSelectedObjs(prevObjs => {
+                    const isDeselecting = prevObjs.some(d => d.id.toString() === clickedId);
+                    if (isDeselecting) {
+                        return prevObjs.filter(d => d.id.toString() !== clickedId);
+                    }
+                    else {
+                        const device = devices.find(d => d.id.toString() === clickedId);
+                        return device ? [...prevObjs, device] : prevObjs;
+                    }
+                });
+            }, disableDensitySelector: true, disableColumnSelector: true, disableRowSelectionOnClick: true, loading: loadingDevices, rows: devices, columns: checkboxSelection
+                ? columnsArray.filter(col => col.field !== 'id')
+                : columnsArray, slots: {
+                noRowsOverlay: () => (_jsx(Stack, { height: "100%", alignItems: "center", justifyContent: "center", children: currentGroup !== 'all'
+                        ? (_jsxs(_Fragment, { children: [_jsx(Box, { children: "No devices in group" }), editGroup && (_jsxs(Button, { onClick: addDevicesToCurrentGroup, variant: "outlined", color: "primary", size: "small", sx: { mt: 2 }, children: [_jsx(PlaylistAddIcon, { fontSize: "small", sx: { mr: 1 } }), "Add devices"] }))] }))
+                        : "No devices" })),
                 noResultsOverlay: () => (_jsx(Stack, { height: "100%", alignItems: "center", justifyContent: "center", children: "Filter returns no result" })),
-                toolbar: GridToolbar,
+                toolbar: customToolbar && customToolbar.length ? CustomToolbar : GridToolbar,
             }, slotProps: {
                 toolbar: {
                     showQuickFilter: true,
@@ -234,7 +282,7 @@ const GroupsDevices = ({ userInfo, handleGetUsersList, handleAddUserToGroup, han
                 sorting: {
                     sortModel: [{ field: 'online', sort: 'desc' }],
                 },
-                pagination: { paginationModel: { pageSize: 100 } }
+                pagination: { paginationModel: { pageSize: 100 } },
             }, ...propsDatagrid }) }));
     const renderTabContext = (_jsxs(TabContext, { value: valueTab, children: [_jsx(Box, { sx: { borderBottom: 1, borderColor: 'divider' }, children: _jsxs(TabList, { onChange: handleChangeTab, sx: { minHeight: 20 }, children: [_jsx(Tab, { label: "List", value: "1", sx: { minHeight: 20 } }), _jsx(Tab, { label: "Map", value: "2", sx: { minHeight: 20 } })] }) }), _jsx(TabPanel, { value: "1", sx: { p: 0 }, children: renderDataGrid }), _jsx(TabPanel, { value: "2", sx: { p: 0 }, children: renderMaps })] }));
     const renderDatagridAndMaps = (enableMaps ?

package/components/settings/DynamicMenu.d.ts

@@ -1,5 +1,6 @@
 import { SvgIconProps } from "@mui/material/SvgIcon";
 import { Theme } from "@emotion/react";
+import React from "react";
 interface MenuItem {
     name: string;
     description: string;

package/components/settings/DynamicMenu.js

@@ -4,6 +4,7 @@ import { createElement, useState } from "react";
 import { Box, Card, CardContent, List, ListItemButton, ListItemText, styled, ThemeProvider } from "@mui/material";
 import Grid from "@mui/material/Grid2";
 import NavigateNextIcon from "@mui/icons-material/NavigateNext";
+import React from "react";
 const ListItemButtonSettings = styled(ListItemButton)(({ theme, selected }) => ({
     backgroundColor: theme.palette.primary.main,
     color: theme.palette.primary.contrastText,
@@ -37,6 +38,6 @@ const DynamicMenu = ({ menuItems, selectedIndex = null, theme }) => {
     const handleMenuClick = (index) => {
         setSelected(index); // Assicurati di non chiamarlo nel rendering
     };
-    return (_jsx(ThemeProvider, { theme: theme, children: _jsx(Grid, { container: true, spacing: 2, sx: { width: '100%' }, children: _jsx(Grid, { size: { xs: 12, lg: 9 }, children: _jsx(Card, { sx: { borderRadius: 2 }, children: _jsx(CardContent, { sx: { p: 0, "&:last-child": { p: 0 } }, children: _jsxs(Grid, { container: true, spacing: 2, children: [_jsx(Grid, { size: { xs: 12, sm: 4 }, sx: { display: { xs: selected !== null ? 'none' : 'block', sm: 'block' } }, children: _jsx(List, { sx: { p: 0, height: "100%", backgroundColor: "primary.main" }, children: menuItems.map((item, index) => (_jsxs(ListItemButtonSettings, { selected: selected === index, onClick: () => handleMenuClick(index), children: [item.icon && _jsx(Box, { sx: { mr: 2 }, children: item.icon }), _jsx(ListItemText, { primary: _jsx("b", { children: item.name }), secondary: item.description }), _jsx(NavigateNextIcon, { sx: { display: { xs: "block", sm: "none" } } })] }, index))) }) }), _jsx(Grid, { size: { xs: 12, sm: 8, md: 6 }, sx: { display: { xs: selected === null ? 'none' : 'block', sm: 'block' } }, children: _jsx(Box, { component: "div", sx: { p: { xs: 2 }, py: { sm: 3 } }, children: selected !== null ? createElement(menuItems[selected].page, { handleBack: () => { setSelected(null); } }) : "" }) })] }) }) }) }) }) }));
+    return (_jsx(ThemeProvider, { theme: theme, children: _jsx(Grid, { container: true, spacing: 2, sx: { width: '100%' }, children: _jsx(Grid, { size: { xs: 12, lg: 9 }, children: _jsx(Card, { sx: { borderRadius: 2 }, children: _jsx(CardContent, { sx: { p: 0, "&:last-child": { p: 0 } }, children: _jsxs(Grid, { container: true, spacing: 2, children: [_jsx(Grid, { size: { xs: 12, sm: 4 }, sx: { display: { xs: selected !== null ? 'none' : 'block', sm: 'block' } }, children: _jsx(List, { sx: { p: 0, height: "100%", backgroundColor: "primary.main" }, children: menuItems.map((item, index) => (_jsxs(ListItemButtonSettings, { selected: selected === index, onClick: () => handleMenuClick(index), children: [item.icon && _jsx(Box, { sx: { mr: 2 }, children: React.isValidElement(item.icon) ? item.icon : null }), _jsx(ListItemText, { primary: _jsx("b", { children: item.name }), secondary: item.description }), _jsx(NavigateNextIcon, { sx: { display: { xs: "block", sm: "none" } } })] }, index))) }) }), _jsx(Grid, { size: { xs: 12, sm: 8, md: 6 }, sx: { display: { xs: selected === null ? 'none' : 'block', sm: 'block' } }, children: _jsx(Box, { component: "div", sx: { p: { xs: 2 }, py: { sm: 3 } }, children: selected !== null ? createElement(menuItems[selected].page, { handleBack: () => { setSelected(null); } }) : "" }) })] }) }) }) }) }) }));
 };
 export default DynamicMenu;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iotready/nextjs-components-library",
-  "version": "1.0.0-preview25",
+  "version": "1.0.0-preview26",
   "main": "index.js",
   "scripts": {
     "build": "rm -rf dist && tsc --project tsconfig.build.json && cp package.json dist/",