@iotready/nextjs-components-library 1.0.0-preview4 → 1.0.0-preview41

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, useCallback, 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,60 +10,51 @@ 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, GridToolbarFilterButton, 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 }) => {
-    const [devices, setDevices] = useState(null);
+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 = 0, customToolbar, groupsLabelAll, addDevicesLabel, noDevicesLabel, groupUpdateRoles, isOrg = false, currentOrg, t, dataGridLocaleText }) => {
+    const [devices, setDevices] = useState([]);
     const [positions, setPositions] = useState([]);
     const [loadingDevices, setLoadingDevices] = useState(false);
     const [loadingGroups, setLoadingGroups] = useState(false);
     const [loadingAdd, setLoadingAdd] = useState(false);
-    const [editGroup, setEditGroup] = useState(false);
+    const [editGroup, setEditGroup] = useState(isOrg ? true : 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);
     const [usersList, setUsersList] = useState([]);
-    const [usersGroup, setUsersGroup] = useState([]);
+    const [usersGroup, setUsersGroup] = useState(null);
     const [groupInfo, setGroupInfo] = useState(null);
     const [openAdd, setOpenAdd] = useState(false);
     const [groupName, setGroupName] = useState('');
     const [description, setDescription] = useState('');
     const [groupUpdateVisible, setGroupUpdateVisible] = useState(false);
     const [valueTab, setValueTab] = useState('1');
+    const clickedIdRef = useRef(null);
+    const labelEntity = isOrg ? t('library.groupsDevices.organization') : t('library.groupsDevices.group');
+    const labelEntityLower = labelEntity.toLowerCase();
     const handleChangeTab = (event, newValue) => {
         setValueTab(newValue);
     };
-    const Map = useMemo(() => dynamic(() => import("./Map"), {
+    const MapComponent = useMemo(() => dynamic(() => import("./Map"), {
         loading: () => isValidElement(loadingComponent) ? cloneElement(loadingComponent, { height: mapsHeight }) : null,
         ssr: false
     }), []);
     const getUsersList = async () => {
         try {
-            let page = 1;
-            const pageSize = 100;
-            let usersData = [];
-            let moreData = true;
-            while (moreData) {
-                const usersList = await handleGetUsersList({
-                    page,
-                    pageSize,
-                });
-                if (usersList.users && usersList.users.length > 0) {
-                    usersData = [...usersData, ...usersList.users];
-                }
-                // Se il numero di utenti restituiti è minore di pageSize, non ci sono più pagine da caricare
-                moreData = usersList.users.length === pageSize;
-                page++;
-            }
-            const userGroupsUserIds = usersGroup.map((ug) => ug.user.userId);
-            setUsersList(usersData.filter((user) => user.role === 'support' && !userGroupsUserIds.includes(user.uid)).map((user) => {
-                const userName = user.name ? user.name.replace("/", " ") : "";
-                return { label: `${userName} (${user.email})`, id: user.uid };
+            const usersData = await handleGetUsersList();
+            const userGroupsUserIds = usersGroup && usersGroup.map((ug) => ug.user.userId) || [];
+            setUsersList(usersData
+                .filter((user) => !userGroupsUserIds.includes(user.uid))
+                .map((user) => {
+                const userName = user.profile.name ? user.profile.name.replace("/", " ") : "";
+                return { label: `${userName} (${user.profile.email})`, id: user.uid };
             }));
         }
         catch (err) {
@@ -71,11 +62,18 @@ const GroupsDevices = ({ userInfo, handleGetUsersList, handleAddUserToGroup, han
         }
     };
     const fetchDevices = async (group, selected) => {
+        let groupToUse = group;
+        if (currentOrg === 'all' && group === 'all' && selected !== 'all') {
+            groupToUse = groupInfo.parent_id;
+        }
+        else if (currentOrg != undefined && group === 'all') {
+            groupToUse = currentOrg;
+        }
         try {
             setLoadingDevices(true);
-            const devices = await handleGetDevices(userInfo, group, selected);
+            const devices = await handleGetDevices(userInfo, groupToUse, selected);
             setDevices(devices);
-            if (enableMaps) {
+            if (enableMaps && handleGetPositions) {
                 const positions = await handleGetPositions(devices);
                 setPositions(positions);
             }
@@ -89,7 +87,7 @@ const GroupsDevices = ({ userInfo, handleGetUsersList, handleAddUserToGroup, han
     };
     const getGroups = async () => {
         try {
-            const responseData = await handleGetGroups(1008, userInfo);
+            const responseData = await handleGetGroups(userInfo);
             setGroups(responseData);
         }
         catch (err) {
@@ -111,18 +109,26 @@ const GroupsDevices = ({ userInfo, handleGetUsersList, handleAddUserToGroup, han
         }
     }, [userInfo]);
     useEffect(() => {
-        if (usersGroup) {
-            getUsersList();
-        }
+        getUsersList();
     }, [usersGroup]);
     useEffect(() => {
-        if (currentGroup && !checkboxSelection) {
+        if (currentGroup && !checkboxSelection && groups !== null) {
             setSelectedGroup(currentGroup);
             setGroupInfo(groups && groups.find((g) => g.id === currentGroup));
-            getUsersGroup(currentGroup);
+            if (currentGroup !== 'all') {
+                getUsersGroup(currentGroup);
+            }
             fetchDevices(currentGroup, currentGroup);
+            if (isOrg) {
+                setCheckboxSelection(true);
+            }
         }
-    }, [currentGroup]);
+    }, [currentGroup, groups]);
+    useEffect(() => {
+        if (forceGetDevices !== 0) {
+            fetchDevices(currentGroup, currentGroup);
+        }
+    }, [forceGetDevices]);
     const handleSubmit = async (e) => {
         e.preventDefault();
         setLoadingAdd(true);
@@ -130,13 +136,13 @@ const GroupsDevices = ({ userInfo, handleGetUsersList, handleAddUserToGroup, han
             const newGroup = {
                 name: groupName,
                 description,
-                productID: 1008, // Assuming this is the correct productID
             };
             const id = await handleCreateGroup(newGroup);
             await getGroups();
             setCurrentGroup(id);
             setGroupInfo({ ...newGroup, id });
             setSelectedGroup(id);
+            getUsersGroup(id);
             setDevicesToAdd([]), setEditGroup(!editGroup);
             setCheckboxSelection(!checkboxSelection);
             fetchDevices(id, id);
@@ -172,28 +178,11 @@ const GroupsDevices = ({ userInfo, handleGetUsersList, handleAddUserToGroup, han
     const addToSelectedGroup = async () => {
         setLoadingGroups(true);
         try {
-            const selectedData = devices.filter((row) => devicesToAdd.includes(row.id));
-            const devicesToPatch = selectedData?.map((device) => ({ id: device.id, groups: device.state.groups, managers: device.managers }));
-            const devicesPatched = await handleAddDevicesToGroup(userInfo, selectedGroup, devicesToPatch);
-            if (devicesPatched && devicesPatched.length > 0) {
-                // get all members of the group
-                const userIdsToAdd = usersGroup.map((ug) => ug.user.userId);
-                if (userIdsToAdd.length > 0) {
-                    for (const device of devicesToPatch) {
-                        // add members to devices managers
-                        await handleUpdateDevice(device.id, {
-                            managers: [
-                                ...device.managers,
-                                ...userIdsToAdd
-                            ]
-                        }, userInfo);
-                    }
-                }
-                setLoadingGroups(false);
-                setCurrentGroup(selectedGroup);
-                setDevicesToAdd([...[]]);
-                fetchDevices(selectedGroup, selectedGroup);
-            }
+            await handleAddDevicesToGroup(userInfo, selectedGroup, deviceSelectedObjs);
+            setLoadingGroups(false);
+            setCurrentGroup(selectedGroup);
+            setDevicesToAdd([...[]]);
+            fetchDevices(selectedGroup, selectedGroup);
         }
         catch (err) {
             console.error(err);
@@ -205,32 +194,10 @@ const GroupsDevices = ({ userInfo, handleGetUsersList, handleAddUserToGroup, han
     const removeFromCurrentGroup = async () => {
         setLoadingGroups(true);
         try {
-            const devicesToRemove = devices.filter((row) => devicesToAdd.includes(row.id));
-            const devicesToPatch = devicesToRemove?.map((device) => ({ id: device.id, groups: device.state.groups, managers: device.managers }));
-            const devicesPatched = await handleRemoveDevicesFromGroup(userInfo, selectedGroup, devicesToPatch);
-            if (devicesPatched && devicesPatched.length > 0) {
-                for (const device of devicesToPatch) {
-                    if (device.managers.length > 0) {
-                        let managersToKeep = device.managers || [];
-                        for (const manager of device.managers) {
-                            // should check if device is present in other groups the user is member of
-                            const groupsData = await handleGetGroups(1008, { role: 'support', uid: manager });
-                            const userGroupIds = groupsData.map((group) => group.id);
-                            const found = device.groups && device.groups.some((gID) => userGroupIds.includes(gID));
-                            if (!found) {
-                                // @ts-ignore
-                                managersToKeep = managersToKeep.filter(man => man !== manager);
-                            }
-                        }
-                        await handleUpdateDevice(device.id, {
-                            managers: managersToKeep
-                        }, userInfo);
-                    }
-                }
-                setLoadingGroups(false);
-                setDevicesToAdd([]);
-                fetchDevices(currentGroup, selectedGroup);
-            }
+            await handleRemoveDevicesFromGroup(userInfo, selectedGroup, deviceSelectedObjs);
+            setLoadingGroups(false);
+            setDevicesToAdd([]);
+            fetchDevices(currentGroup, selectedGroup);
         }
         catch (err) {
             console.error(err);
@@ -246,15 +213,101 @@ const GroupsDevices = ({ userInfo, handleGetUsersList, handleAddUserToGroup, han
         setEditGroup(!editGroup);
         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);
+    const renderMaps = (_jsx(MapComponent, { positions: positions, mapsClickCallback: mapsClickCallback, height: mapsHeight, t: t }));
+    useEffect(() => {
+        if (devicesToAdd.length <= 0) {
+            setDeviceSelectedObjs([]);
+        }
+    }, [devicesToAdd]);
+    const CustomToolbar = useCallback((props) => (_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(GridToolbarFilterButton, {})
+                        : '', 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, localeText: dataGridLocaleText, 
+            // 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)
+                    return;
+                // Se abbiamo un clickedIdRef, gestiamo il click individuale
+                if (clickedIdRef.current) {
+                    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;
+                        }
+                    });
                 }
-            }, 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" })),
-                noResultsOverlay: () => (_jsx(Stack, { height: "100%", alignItems: "center", justifyContent: "center", children: "Filter returns no result" })),
-                toolbar: GridToolbar,
+                else {
+                    // Gestione del "check all" - confronta con il modello di selezione attuale
+                    const currentSelection = (checkboxSelection && currentGroup === 'all')
+                        ? [
+                            ...devices
+                                .filter(d => d.groups?.includes(selectedGroup))
+                                .map(d => d.id.toString()),
+                            ...devicesToAdd,
+                        ]
+                        : devicesToAdd;
+                    // Se la selezione è diversa, aggiorna devicesToAdd
+                    if (JSON.stringify(ids.sort()) !== JSON.stringify(currentSelection.sort())) {
+                        // Filtra solo i dispositivi che non sono già nel gruppo
+                        const selectableDevices = devices
+                            .filter(d => !d.groups?.includes(selectedGroup))
+                            .map(d => d.id.toString());
+                        // Calcola i nuovi dispositivi da aggiungere
+                        const newDevicesToAdd = ids.filter(id => selectableDevices.includes(id) && !devicesToAdd.includes(id));
+                        // Calcola i dispositivi da rimuovere dalla selezione
+                        const devicesToRemove = devicesToAdd.filter(id => !ids.includes(id));
+                        // Aggiorna devicesToAdd
+                        setDevicesToAdd(prevIds => {
+                            return prevIds
+                                .filter(id => !devicesToRemove.includes(id))
+                                .concat(newDevicesToAdd);
+                        });
+                        // Aggiorna deviceSelectedObjs
+                        setDeviceSelectedObjs(prevObjs => {
+                            return prevObjs
+                                .filter(d => !devicesToRemove.includes(d.id.toString()))
+                                .concat(devices.filter(d => newDevicesToAdd.includes(d.id.toString()) &&
+                                !prevObjs.some(obj => obj.id.toString() === d.id.toString())));
+                        });
+                    }
+                }
+            }, 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: noDevicesLabel || t('library.groupsDevices.noDevicesInGroup', { entity: labelEntityLower }) }), editGroup && (_jsxs(Button, { onClick: addDevicesToCurrentGroup, variant: "outlined", color: "primary", size: "small", sx: { mt: 2 }, children: [_jsx(PlaylistAddIcon, { fontSize: "small", sx: { mr: 1 } }), addDevicesLabel || t('library.groupsDevices.addDevices')] }))] }))
+                        : noDevicesLabel || t('library.groupsDevices.noDevices') })),
+                noResultsOverlay: () => (_jsx(Stack, { height: "100%", alignItems: "center", justifyContent: "center", children: t('library.groupsDevices.filterReturnsNoResult') })),
+                toolbar: customToolbar && customToolbar.length ? CustomToolbar : GridToolbar,
             }, slotProps: {
                 toolbar: {
                     showQuickFilter: true,
@@ -262,38 +315,40 @@ const GroupsDevices = ({ userInfo, handleGetUsersList, handleAddUserToGroup, han
                     printOptions: { disableToolbarButton: true },
                 },
             }, initialState: {
-                sorting: {
-                    sortModel: [{ field: 'online', sort: 'desc' }],
-                },
+                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 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: t('library.groupsDevices.list'), value: "1", sx: { minHeight: 20 } }), _jsx(Tab, { label: t('library.groupsDevices.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 ?
         containerDataGrid === 'Card' ?
             _jsx(Card, { ...containerProps, children: renderTabContext }) : _jsx(Box, { ...containerProps, children: renderTabContext }) : containerDataGrid === 'Card' ?
         _jsx(Card, { ...containerProps, children: renderDataGrid }) : _jsx(Box, { ...containerProps, children: renderDataGrid }));
     if (!userInfo || !groups || !devices)
         return loadingComponent;
-    return (_jsx(ThemeProvider, { theme: theme, children: _jsxs(Box, { ...props, children: [_jsxs(Box, { component: "div", sx: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1, backgroundColor: editGroup ? 'secondary.light' : '', borderRadius: 3, px: editGroup ? 2 : 0, py: 1, height: 50 }, children: [editGroup ? _jsxs(Typography, { variant: 'subtitle1', children: [_jsx(Box, { component: 'span', sx: { display: { xs: 'none' } }, children: "Edit group" }), " ", _jsx("b", { children: groupInfo?.name })] }) : '', groups && !checkboxSelection && !(editGroup && currentGroup === 'all') ?
-                            _jsx(Autocomplete, { disablePortal: true, onChange: handleChangeGroupSelect, value: groupInfo?.name || 'All devices', disableClearable: currentGroup === 'all', isOptionEqualToValue: (o, v) => o.label === v, options: [{ label: 'All devices', id: 'all' }, ...groups.map((grp) => ({ label: grp.name, id: grp.id }))], sx: { width: { xs: 200, sm: 300 }, textAlign: 'left' }, size: 'small', renderInput: (params) => _jsx(TextField, { ...params, label: "Group" }) })
-                            : '', userInfo.role === 'admin' &&
-                            _jsxs(Box, { children: [checkboxSelection ?
+    return (_jsx(ThemeProvider, { theme: theme, children: _jsxs(Box, { ...props, children: [_jsxs(Box, { component: "div", sx: { display: 'flex', alignItems: 'center', mb: 1, backgroundColor: editGroup && !isOrg ? 'secondary.light' : '', borderRadius: 3, px: editGroup ? 2 : 0, py: 1, height: 50, ...propsHeaderGroups }, children: [editGroup ? _jsx(Typography, { variant: isOrg ? 'h6' : 'subtitle1', children: _jsxs("b", { children: [labelEntity, " \"", groupInfo?.name, "\""] }) }) : '', groups && !checkboxSelection && !isOrg && !(editGroup && currentGroup === 'all') ?
+                            _jsx(Autocomplete, { disablePortal: true, onChange: handleChangeGroupSelect, value: groupInfo?.name || groupsLabelAll || t('library.groupsDevices.allDevices'), disableClearable: currentGroup === 'all', isOptionEqualToValue: (o, v) => o.label === v, options: [{ label: groupsLabelAll || t('library.groupsDevices.allDevices'), id: 'all' }, ...groups.map((grp) => ({ label: grp.name, id: grp.id }))], sx: { width: { xs: 200, sm: 300 }, textAlign: 'left' }, size: 'small', renderInput: (params) => _jsx(TextField, { ...params, label: labelEntity }) })
+                            : '', (userInfo.role === 'admin' || (groupUpdateRoles && groupUpdateRoles.includes(userInfo.role))) &&
+                            _jsxs(Box, { sx: { ml: 2 }, children: [checkboxSelection ?
                                         _jsx(Input, { value: selectedGroup, type: 'hidden', size: 'small' })
-                                        : '', selectedGroup === 'all' ? _jsxs(Button, { variant: "contained", color: "primary", onClick: () => { handleOpenAdd(); }, children: [_jsx(AddIcon, { sx: { mr: 1 } }), _jsx(Box, { component: 'span', sx: { display: { xs: 'none', sm: 'inline' } }, children: "Create\u00A0" }), " group"] }) : '', editGroup ?
+                                        : '', selectedGroup === 'all' && (currentOrg !== 'all') ? _jsxs(Button, { variant: "contained", color: "primary", onClick: () => { handleOpenAdd(); }, children: [_jsx(AddIcon, { sx: { mr: 1 } }), _jsx(Box, { component: 'span', sx: { display: { xs: 'none', sm: 'inline' } }, children: t('library.groupsDevices.createGroup', { entity: labelEntityLower }) })] }) : '', editGroup ?
                                         currentGroup === 'all' ?
-                                            checkboxSelection ? _jsxs(_Fragment, { children: [_jsxs(Button, { onClick: () => { setGroupUpdateVisible(false); setDevicesToAdd([]); setCurrentGroup(selectedGroup); setCheckboxSelection(true); fetchDevices(selectedGroup, selectedGroup); }, variant: "text", color: "inherit", size: "small", children: [_jsx(BackIcon, { fontSize: "small" }), _jsx(Box, { component: 'span', sx: { display: { xs: 'none', sm: 'inline' } }, children: "\u00A0Group devices" })] }), _jsxs(LoadingButton, { loading: loadingGroups, onClick: () => addToSelectedGroup(), variant: 'contained', size: "small", disabled: devicesToAdd.length === 0 || selectedGroup === 'all' || loadingGroups, sx: { ml: 2 }, children: [_jsx(ReadMoreIcon, { sx: { mr: 1 } }), " Add to group"] })] }) : ''
-                                            : devicesToAdd.length === 0 ? groupUpdateVisible ? _jsxs(Button, { onClick: () => setGroupUpdateVisible(false), sx: { ml: 2 }, variant: "text", color: "inherit", size: "small", children: [_jsx(BackIcon, { fontSize: "small" }), _jsx(Box, { component: 'span', sx: { display: { xs: 'none', sm: 'inline' } }, children: "\u00A0Group devices" })] }) :
-                                                _jsxs(_Fragment, { children: [_jsxs(Button, { onClick: () => addDevicesToCurrentGroup(), sx: { ml: 2 }, variant: "outlined", color: "primary", size: "small", children: [_jsx(PlaylistAddIcon, { fontSize: "small", sx: { mr: 1 } }), " Add devices"] }), _jsxs(Button, { onClick: () => setGroupUpdateVisible(true), sx: { ml: 2 }, variant: "outlined", color: "success", size: "small", children: [_jsx(SettingsIcon, { fontSize: "small" }), _jsx(Box, { component: 'span', sx: { display: { xs: 'none', sm: 'inline' } }, children: "\u00A0Manage group" })] })] })
-                                                : _jsxs(LoadingButton, { loading: loadingGroups, onClick: async () => { setLoadingGroups(true); await removeFromCurrentGroup(); }, variant: "contained", color: "error", size: "small", disabled: loadingGroups, sx: { ml: 2 }, children: [_jsx(PlaylistRemoveIcon, { fontSize: "small", sx: { mr: 1 } }), " Remove from group"] })
-                                        : '', selectedGroup !== 'all' ?
+                                            checkboxSelection ? _jsxs(_Fragment, { children: [_jsxs(Button, { onClick: () => { setGroupUpdateVisible(false); setDevicesToAdd([]); setCurrentGroup(selectedGroup); setCheckboxSelection(true); fetchDevices(selectedGroup, selectedGroup); }, variant: "text", color: "inherit", size: "small", children: [_jsx(BackIcon, { fontSize: "small" }), _jsxs(Box, { component: 'span', sx: { display: { xs: 'none', sm: 'inline' } }, children: ["\u00A0", t('library.groupsDevices.backToGroup', { entity: labelEntityLower })] })] }), _jsxs(LoadingButton, { loading: loadingGroups, onClick: () => addToSelectedGroup(), variant: 'contained', size: "small", disabled: devicesToAdd.length === 0 || selectedGroup === 'all' || loadingGroups, sx: { ml: 2 }, children: [_jsx(ReadMoreIcon, { sx: { mr: 1 } }), " ", t('library.groupsDevices.addToGroup')] })] }) : ''
+                                            : devicesToAdd.length === 0 ? groupUpdateVisible ? _jsxs(Button, { onClick: () => setGroupUpdateVisible(false), sx: { ml: 2 }, variant: "text", color: "inherit", size: "small", children: [_jsx(BackIcon, { fontSize: "small" }), _jsxs(Box, { component: 'span', sx: { display: { xs: 'none', sm: 'inline' } }, children: ["\u00A0", t('library.groupsDevices.backToGroup', { entity: labelEntityLower })] })] }) :
+                                                _jsxs(_Fragment, { children: [_jsxs(Button, { onClick: () => addDevicesToCurrentGroup(), sx: { ml: 2 }, variant: "outlined", color: "primary", size: "small", children: [_jsx(PlaylistAddIcon, { fontSize: "small", sx: { mr: 1 } }), " ", addDevicesLabel || t('library.groupsDevices.addDevices')] }), _jsxs(Button, { onClick: () => setGroupUpdateVisible(true), sx: { ml: 2 }, variant: "outlined", color: "success", size: "small", children: [_jsx(SettingsIcon, { fontSize: "small" }), _jsxs(Box, { component: 'span', sx: { display: { xs: 'none', sm: 'inline' } }, children: ["\u00A0", t('library.groupsDevices.manageGroup', { entity: labelEntityLower })] })] })] })
+                                                : _jsxs(LoadingButton, { loading: loadingGroups, onClick: async () => { setLoadingGroups(true); await removeFromCurrentGroup(); }, variant: "contained", color: "error", size: "small", disabled: loadingGroups, sx: { ml: 2 }, children: [_jsx(PlaylistRemoveIcon, { fontSize: "small", sx: { mr: 1 } }), " ", t('library.groupsDevices.removeFromGroup', { entity: labelEntityLower })] })
+                                        : '', selectedGroup !== 'all' && !isOrg ?
                                         _jsx(_Fragment, { children: editGroup ?
-                                                _jsxs(Button, { variant: "text", color: "inherit", onClick: () => closeEditGroup(), sx: { ml: 2 }, children: [_jsx(CloseIcon, { fontSize: "small" }), _jsx(Box, { component: 'span', sx: { display: { xs: 'none', sm: 'inline' } }, children: "\u00A0Close edit" })] })
-                                                : _jsxs(Button, { variant: "contained", color: "secondary", onClick: () => { setDevicesToAdd([]); setEditGroup(!editGroup); setCheckboxSelection(!checkboxSelection); }, children: [_jsx(EditIcon, { sx: { mr: 1 } }), _jsx(Box, { component: 'span', sx: { display: { xs: 'none', sm: 'inline' } }, children: "Edit\u00A0" }), " group"] }) }) : ''] })] }), _jsx(Modal, { open: openAdd, onClose: handleCloseAdd, children: _jsxs(Card, { sx: {
+                                                _jsxs(Button, { variant: "text", color: "inherit", onClick: () => closeEditGroup(), sx: { ml: 2 }, children: [_jsx(CloseIcon, { fontSize: "small" }), _jsxs(Box, { component: 'span', sx: { display: { xs: 'none', sm: 'inline' } }, children: ["\u00A0", t('library.groupsDevices.closeEdit')] })] })
+                                                : _jsxs(Button, { variant: "contained", color: "secondary", onClick: () => { setDevicesToAdd([]); setEditGroup(!editGroup); setCheckboxSelection(!checkboxSelection); }, children: [_jsx(EditIcon, { sx: { mr: 1 } }), _jsx(Box, { component: 'span', sx: { display: { xs: 'none', sm: 'inline' } }, children: t('library.groupsDevices.editGroup', { entity: labelEntityLower }) })] }) }) : ''] })] }), _jsx(Modal, { open: openAdd, onClose: handleCloseAdd, children: _jsxs(Card, { sx: {
                             position: 'absolute',
                             top: '50%',
                             left: '50%',
                             transform: 'translate(-50%, -50%)',
                             width: 400,
                             borderRadius: 4
-                        }, children: [_jsx(CardHeader, { title: "New Group", action: _jsx(IconButton, { onClick: handleCloseAdd, children: _jsx(CloseIcon, {}) }) }), _jsx(CardContent, { children: _jsxs("form", { onSubmit: handleSubmit, children: [_jsx(TextField, { fullWidth: true, label: "Group Name", value: groupName, onChange: (e) => setGroupName(e.target.value), required: true }), _jsx(TextField, { fullWidth: true, label: "Description", value: description, onChange: (e) => setDescription(e.target.value), margin: "normal", multiline: true, rows: 4 }), _jsxs(Box, { mt: 2, display: "flex", justifyContent: "space-between", children: [_jsx(Button, { variant: "contained", color: "info", onClick: handleCloseAdd, children: "Cancel" }), _jsx(LoadingButton, { loading: loadingAdd, variant: "contained", color: "primary", type: "submit", children: "Create" })] })] }) })] }) }), !groupUpdateVisible && renderDatagridAndMaps, groupInfo && editGroup && groupUpdateVisible && _jsx(GroupUpdate, { confirmMui: confirmMui, userInfo: userInfo, usersGroup: usersGroup, usersList: usersList, handleGetGroups: handleGetGroups, handleUpdateDevice: handleUpdateDevice, handleAddUserToGroup: handleAddUserToGroup, handleRemoveUserFromGroup: handleRemoveUserFromGroup, groupInfo: groupInfo, afterUpdateCallback: async (groupInfo) => { setGroupInfo(groupInfo); await getGroups(); await getUsersGroup(groupInfo.id); }, afterRemoveCallback: async () => { closeEditGroup(); await getGroups(); setCurrentGroup('all'); }, container: 'Card', handleDeleteGroup: handleDeleteGroup, handleUpdateGroup: handleUpdateGroup, devicesList: devices.map((device) => ({ id: device.id, state: device.state, managers: device.managers })) })] }) }));
+                        }, children: [_jsx(CardHeader, { title: t('library.groupsDevices.newGroup', { entity: labelEntity }), action: _jsx(IconButton, { onClick: handleCloseAdd, children: _jsx(CloseIcon, {}) }) }), _jsx(CardContent, { children: _jsxs("form", { onSubmit: handleSubmit, children: [_jsx(TextField, { fullWidth: true, label: t('library.groupsDevices.groupName', { entity: labelEntity }), value: groupName, onChange: (e) => setGroupName(e.target.value), required: true }), _jsx(TextField, { fullWidth: true, label: t('library.groupsDevices.description'), value: description, onChange: (e) => setDescription(e.target.value), margin: "normal", multiline: true, rows: 4 }), _jsxs(Box, { mt: 2, display: "flex", justifyContent: "space-between", children: [_jsx(Button, { variant: "contained", color: "info", onClick: handleCloseAdd, children: t('library.groupsDevices.cancel') }), _jsx(LoadingButton, { loading: loadingAdd, variant: "contained", color: "primary", type: "submit", children: t('library.groupsDevices.create') })] })] }) })] }) }), !groupUpdateVisible && renderDatagridAndMaps, groupInfo && editGroup && groupUpdateVisible && _jsx(GroupUpdate, { userInfo: userInfo, confirmMui: confirmMui, usersGroup: usersGroup, usersList: usersList, handleGetGroups: handleGetGroups, handleUpdateDevice: handleUpdateDevice, handleAddUserToGroup: handleAddUserToGroup, handleRemoveUserFromGroup: handleRemoveUserFromGroup, groupInfo: groupInfo, afterUpdateCallback: async (groupInfo) => { setGroupInfo(groupInfo); await getGroups(); await getUsersGroup(groupInfo.id); }, afterRemoveCallback: async () => { if (!isOrg) {
+                        closeEditGroup();
+                        setCurrentGroup('all');
+                        await getGroups();
+                    } }, container: 'Card', handleDeleteGroup: handleDeleteGroup, handleUpdateGroup: handleUpdateGroup, devicesList: devices, labelEntity: labelEntity, isOrg: isOrg, t: t })] }) }));
 };
 export default GroupsDevices;

package/components/groups/Map.d.ts

@@ -1,14 +1,10 @@
 import 'leaflet/dist/leaflet.css';
 import "leaflet-defaulticon-compatibility";
 import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css";
-export type Position = {
-    deviceID: string;
-    name: string;
-    lat: number;
-    lng: number;
-};
-export default function Map({ positions, height, mapsClickCallback }: {
-    positions: Position[];
+import { DevicePositionType } from "../../types/device";
+export default function Map({ positions, height, mapsClickCallback, t }: {
+    positions: DevicePositionType[];
     height: string;
-    mapsClickCallback: (position: Position) => void;
+    mapsClickCallback: (position: DevicePositionType) => void;
+    t: (key: string, params?: any) => string;
 }): import("react/jsx-runtime").JSX.Element;

package/components/groups/Map.js

@@ -6,12 +6,12 @@ import 'leaflet/dist/leaflet.css';
 import "leaflet-defaulticon-compatibility";
 import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css";
 import { Box, Link } from "@mui/material";
-export default function Map({ positions, height, mapsClickCallback = () => { } }) {
+export default function Map({ positions, height, mapsClickCallback = () => { }, t }) {
     return positions.filter(pos => pos.lat !== null)?.length ? _jsxs(MapContainer, { bounds: L.latLngBounds(positions.filter(pos => pos.lat !== null)), zoom: 13, scrollWheelZoom: false, style: { width: '100%', height }, children: [_jsx(TileLayer, { attribution: '\u00A9 <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors', url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" }), _jsx(MarkerClusterGroup, { chunkedLoading: true, children: positions.filter(pos => pos.lat !== null).map((position) => (_jsx(Marker, { position: [position.lat, position.lng], children: _jsx(Popup, { children: _jsxs(Link, { href: "#", onClick: () => mapsClickCallback(position), children: [_jsx("b", { children: position.name }), _jsx("br", {}), position.deviceID] }) }) }, position.deviceID))) })] }) : _jsx(Box, { sx: {
             display: 'flex',
             flexDirection: 'column',
             alignItems: 'center',
             justifyContent: 'center',
             height,
-        }, children: _jsx("small", { children: "No positions for devices" }) });
+        }, children: _jsx("small", { children: t('library.map.noPositionsForDevices') }) });
 }

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/components/users/UserUpdate.d.ts

@@ -1,11 +1,12 @@
 import { UserType } from '../../types/user';
 import { Theme } from '@emotion/react';
-declare const UserUpdate: ({ userInfo, handleUpdateUser, container, containerProps, roles, theme }: {
+declare const UserUpdate: ({ userInfo, handleUpdateUser, container, containerProps, roles, theme, t }: {
     userInfo: UserType;
     handleUpdateUser: (userId: string, userInfo: Partial<UserType>) => Promise<void>;
     container?: "Card" | "Box";
     containerProps?: object | undefined;
     roles?: string[];
     theme: Theme;
+    t: (key: string, params?: any) => string;
 }) => import("react/jsx-runtime").JSX.Element;
 export default UserUpdate;

package/components/users/UserUpdate.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Box, Card, CardContent, FormControl, InputLabel, MenuItem, Select, ThemeProvider } from '@mui/material';
 import { LoadingButton } from '@mui/lab';
-const UserUpdate = ({ userInfo, handleUpdateUser, container = 'Box', containerProps = {}, roles = ['customer', 'support', 'admin'], theme }) => {
+const UserUpdate = ({ userInfo, handleUpdateUser, container = 'Box', containerProps = {}, roles = ['customer', 'support', 'admin'], theme, t }) => {
     const [userRole, setUserRole] = useState(userInfo.role || roles[0]);
     const [loadingButton, setLoadingButton] = useState(false);
     const handleChangeRole = (event) => {
@@ -19,7 +19,7 @@ const UserUpdate = ({ userInfo, handleUpdateUser, container = 'Box', containerPr
         setLoadingButton(false);
     };
     const renderUserUpdate = () => {
-        return (_jsxs(Box, { component: "div", sx: { mt: 2, mb: 0 }, children: [_jsxs(FormControl, { children: [_jsx(InputLabel, { id: "select-role-label", children: "Role" }), _jsx(Select, { labelId: "select-role-label", id: "select-role", value: userRole || '', label: "Role", onChange: handleChangeRole, children: roles.map((role) => (_jsx(MenuItem, { value: role, children: role.charAt(0).toUpperCase() + role.slice(1) }, role))) })] }), _jsx(Box, { component: "div", sx: { mt: 2, mb: 0 }, children: _jsx(LoadingButton, { variant: "contained", color: "primary", loading: loadingButton, onClick: () => handleUpdate(), children: "Update" }) })] }));
+        return (_jsxs(Box, { component: "div", sx: { mt: 2, mb: 0 }, children: [_jsxs(FormControl, { children: [_jsx(InputLabel, { id: "select-role-label", children: t('library.userUpdate.role') }), _jsx(Select, { labelId: "select-role-label", id: "select-role", value: userRole || '', label: t('library.userUpdate.role'), onChange: handleChangeRole, children: roles.map((role) => (_jsx(MenuItem, { value: role, children: role.charAt(0).toUpperCase() + role.slice(1) }, role))) })] }), _jsx(Box, { component: "div", sx: { mt: 2, mb: 0 }, children: _jsx(LoadingButton, { variant: "contained", color: "primary", loading: loadingButton, onClick: () => handleUpdate(), children: t('library.userUpdate.update') }) })] }));
     };
     return _jsx(ThemeProvider, { theme: theme, children: container === "Card" ? (_jsx(Card, { ...containerProps, children: _jsx(CardContent, { sx: { py: 0 }, children: renderUserUpdate() }) })) : (_jsx(Box, { ...containerProps, children: renderUserUpdate() })) });
 };

package/components/users/UsersDataGrid.d.ts

@@ -1,7 +1,8 @@
+import { GridSortModel } from '@mui/x-data-grid';
 import { UserType } from '../../types/user';
 import { Theme } from '@emotion/react';
-declare const UsersDataGrid: ({ handleGetUsersList, pageSize, container, containerProps, props, loadingComponent, theme }: {
-    handleGetUsersList: ({ page, pageSize, filter }: {
+declare const UsersDataGrid: ({ handleGetUsersList, pageSize, container, containerProps, props, loadingComponent, theme, columns, filterTypes, t, dataGridLocaleText }: {
+    handleGetUsersList: ({ page, pageSize, filter, sortModel }: {
         page: number;
         pageSize: number;
         filter?: {
@@ -9,15 +10,22 @@ declare const UsersDataGrid: ({ handleGetUsersList, pageSize, container, contain
             operator?: string;
             value: string;
         };
+        sortModel: GridSortModel;
     }) => Promise<{
         users: UserType[];
         rowCount: number;
     }>;
     pageSize: number;
     container?: "Card" | "Box";
-    containerProps?: object | undefined;
+    containerProps?: any;
     props?: object | undefined;
     loadingComponent?: React.ReactNode;
     theme: Theme;
+    columns: any[];
+    filterTypes?: {
+        [key: string]: string;
+    };
+    t: (key: string, params?: any) => string;
+    dataGridLocaleText?: Record<string, string>;
 }) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode> | Promise<import("react").AwaitedReactNode> | null;
 export default UsersDataGrid;