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

package/components/charts/TrendChart.js

@@ -187,7 +187,7 @@ function getCsvData(data, measures) {
 const TrendChart = ({ deviceId, measures1, annotationsDataFn, measures2, enableDatePicker, handleGetInfluxData, handleGetDwSlotsCB, handleExportDataCB, theme, initialTimeStart, initialTimeEnd }) => {
     const [chartJsLoaded, setChartJsLoaded] = useState(false);
     // Dichiarazione di annotationsData come funzione che ritorna una Promise<any>
-    const [annotationsData, setAnnotationsData] = useState([]);
+    const [annotationsData, setAnnotationsData] = useState(null);
     const [annotationsEnabled, setAnnotationsEnabled] = useState(true);
     const [dataMeasures, setDataMeasures] = useState(null);
     const [chartPeriod, setChartPeriod] = useState('1D');
@@ -431,7 +431,7 @@ const TrendChart = ({ deviceId, measures1, annotationsDataFn, measures2, enableD
         const { paddedMin: paddedMin2, paddedMax: paddedMax2 } = getPaddedMinMax(min2, max2);
         // Handle undefined/null annotationsData
         let dynamicAnnotations = {};
-        if (Array.isArray(annotationsData) && annotationsData.length > 0 && annotationsEnabled) {
+        if (annotationsData && Array.isArray(annotationsData) && annotationsData.length > 0 && annotationsEnabled) {
             dynamicAnnotations = annotationsData.reduce((acc, [timestamp, label], index) => {
                 const yVal = paddedMin1 !== null && paddedMin1 !== undefined
                     ? paddedMin1 + 0.01 * (paddedMax1 - paddedMin1)
@@ -659,7 +659,7 @@ const TrendChart = ({ deviceId, measures1, annotationsDataFn, measures2, enableD
                                     '& .MuiToggleButton-root': {
                                         color: 'text.primary', fontSize: '0.95rem', fontWeight: 'normal', paddingTop: '6px', paddingBottom: '6px'
                                     }
-                                }, disabled: chartLoading, children: [_jsx(ToggleButton, { value: "1D", sx: { px: 1 }, children: "1d" }), _jsx(ToggleButton, { value: "1W", sx: { px: 1 }, children: "1w" }), _jsx(ToggleButton, { value: "1M", sx: { px: 1 }, children: "1M" }), _jsx(ToggleButton, { value: "3M", sx: { px: 1 }, children: "3M" }), _jsx(ToggleButton, { value: "6M", sx: { px: 1 }, children: "6M" }), _jsx(ToggleButton, { value: "1Y", sx: { px: 1 }, children: "1Y" }), _jsx(ToggleButton, { value: "ALL", sx: { px: 1 }, children: "ALL" })] }), _jsx(MuiTooltip, { placement: "top", arrow: true, title: "Connect point values", children: _jsx("span", { children: _jsx(ToggleButton, { value: "check", color: "primary", size: "small", selected: spanGapsOption, disabled: chartLoading, onChange: () => handleSpanGaps(!spanGapsOption), sx: { ml: 1 }, children: _jsx(TimelineIcon, {}) }) }) }), annotationsData !== undefined && (_jsx(MuiTooltip, { placement: "top", arrow: true, title: "Show annotations", children: _jsx("span", { children: _jsx(ToggleButton, { value: "check", color: "primary", size: "small", selected: annotationsEnabled, disabled: chartLoading, onChange: () => setAnnotationsEnabled(!annotationsEnabled), sx: { ml: 1 }, children: _jsx(EditNoteIcon, {}) }) }) }))] })] }), _jsx(Box, { component: 'div', className: "chart-container", sx: { mt: 2, height: '100%' }, children: chartJsLoaded && !chartLoading && typeof window !== 'undefined' ?
+                                }, disabled: chartLoading, children: [_jsx(ToggleButton, { value: "1D", sx: { px: 1 }, children: "1d" }), _jsx(ToggleButton, { value: "1W", sx: { px: 1 }, children: "1w" }), _jsx(ToggleButton, { value: "1M", sx: { px: 1 }, children: "1M" }), _jsx(ToggleButton, { value: "3M", sx: { px: 1 }, children: "3M" }), _jsx(ToggleButton, { value: "6M", sx: { px: 1 }, children: "6M" }), _jsx(ToggleButton, { value: "1Y", sx: { px: 1 }, children: "1Y" }), _jsx(ToggleButton, { value: "ALL", sx: { px: 1 }, children: "ALL" })] }), _jsx(MuiTooltip, { placement: "top", arrow: true, title: "Connect point values", children: _jsx("span", { children: _jsx(ToggleButton, { value: "check", color: "primary", size: "small", selected: spanGapsOption, disabled: chartLoading, onChange: () => handleSpanGaps(!spanGapsOption), sx: { ml: 1 }, children: _jsx(TimelineIcon, {}) }) }) }), annotationsData !== null && (_jsx(MuiTooltip, { placement: "top", arrow: true, title: "Show annotations", children: _jsx("span", { children: _jsx(ToggleButton, { value: "check", color: "primary", size: "small", selected: annotationsEnabled, disabled: chartLoading, onChange: () => setAnnotationsEnabled(!annotationsEnabled), sx: { ml: 1 }, children: _jsx(EditNoteIcon, {}) }) }) }))] })] }), _jsx(Box, { component: 'div', className: "chart-container", sx: { mt: 2, height: '100%' }, children: chartJsLoaded && !chartLoading && typeof window !== 'undefined' ?
                     _jsx(_Fragment, { children: dataMeasures && (dataMeasures.length > 1 || (dataMeasures.length === 1 && dataMeasures[0].data?.length)) ?
                             (_jsx(Line, { options: options, data: {
                                     // datasets: dataMeasures || [{ data: [] }]

package/components/groups/GroupUpdate.d.ts

@@ -1,14 +1,10 @@
-import { UserType } from '../../types';
-declare const GroupUpdate: ({ userInfo, groupInfo, usersGroup, usersList, devicesList, handleAddUserToGroup, handleRemoveUserFromGroup, handleGetGroups, handleUpdateGroup, handleUpdateDevice, handleDeleteGroup, container, containerProps, afterUpdateCallback, afterRemoveCallback, confirmMui }: {
+import { AssetType, TrackleDeviceType, UserType } from '../../types';
+declare const GroupUpdate: ({ groupInfo, usersGroup, usersList, devicesList, handleAddUserToGroup, handleRemoveUserFromGroup, handleUpdateGroup, handleDeleteGroup, container, containerProps, afterUpdateCallback, afterRemoveCallback, confirmMui }: {
     userInfo: UserType;
     groupInfo: any;
     usersGroup: any[];
     usersList: any[];
-    devicesList: {
-        id: string;
-        state: any;
-        managers: any[];
-    }[];
+    devicesList: AssetType[] | TrackleDeviceType[];
     handleAddUserToGroup: (groupID: string, userName: string, userID: string) => Promise<any>;
     handleRemoveUserFromGroup: (groupID: string, userID: string) => Promise<any>;
     handleUpdateDevice: (id: string, body: any, user: UserType) => Promise<any>;

package/components/groups/GroupUpdate.js

@@ -8,15 +8,13 @@ import AddIcon from '@mui/icons-material/Add';
 import CloseIcon from '@mui/icons-material/Close';
 import DeleteIcon from '@mui/icons-material/Delete';
 import { LoadingButton } from '@mui/lab';
-const GroupUpdate = ({ userInfo, groupInfo, usersGroup, usersList, devicesList, handleAddUserToGroup, handleRemoveUserFromGroup, handleGetGroups, handleUpdateGroup, handleUpdateDevice, handleDeleteGroup, container = 'Box', containerProps = {}, afterUpdateCallback, afterRemoveCallback, confirmMui }) => {
+const GroupUpdate = ({ groupInfo, usersGroup, usersList, devicesList, handleAddUserToGroup, handleRemoveUserFromGroup, handleUpdateGroup, handleDeleteGroup, container = 'Box', containerProps = {}, afterUpdateCallback, afterRemoveCallback, confirmMui }) => {
     const [group, setGroup] = useState(groupInfo);
     const [loadingUpdateButton, setLoadingUpdateButton] = useState(false);
     const [loadingRemoveUserButton, setLoadingRemoveUserButton] = useState(false);
     const [loadingAddUserButton, setLoadingAddUserButton] = useState(false);
     const [loadingDeleteGroupButton, setLoadingDeleteGroupButton] = useState(false);
     const [selectedUser, setSelectedUser] = useState(null);
-    const [error, setError] = useState(null);
-    const [success, setSuccess] = useState(null);
     function handleChange(event) {
         setGroup({ ...group, [event.target.name]: event.target.value });
     }
@@ -25,23 +23,6 @@ const GroupUpdate = ({ userInfo, groupInfo, usersGroup, usersList, devicesList,
         try {
             const response = await handleRemoveUserFromGroup(group.id, userId);
             if (response) {
-                if (devicesList.length > 0) {
-                    // should check if device is present in other groups the user is member of
-                    const groupsData = await handleGetGroups({ role: 'support', uid: userId });
-                    const userGroupIds = groupsData.map((group) => group.id);
-                    // for all devices in the group set the selectedUser as manager
-                    for (const device of devicesList) {
-                        // check device is in a group of user is member of
-                        const found = device.state.groups.some((gID) => userGroupIds.includes(gID));
-                        if (!found) {
-                            // remove user from managers
-                            const managers = device.managers && device.managers.filter(man => man !== userId) || [];
-                            await handleUpdateDevice(device.id, {
-                                managers
-                            }, userInfo);
-                        }
-                    }
-                }
                 if (afterUpdateCallback) {
                     await afterUpdateCallback(group);
                 }
@@ -60,17 +41,6 @@ const GroupUpdate = ({ userInfo, groupInfo, usersGroup, usersList, devicesList,
             try {
                 const response = await handleAddUserToGroup(group.id, selectedUser.label, selectedUser.id);
                 if (response) {
-                    if (devicesList.length > 0) {
-                        for (const device of devicesList) {
-                            // for all devices in the group set the selectedUser as manager
-                            await handleUpdateDevice(device.id, {
-                                managers: [
-                                    ...(device?.managers || []),
-                                    selectedUser.id
-                                ]
-                            }, userInfo);
-                        }
-                    }
                     if (afterUpdateCallback) {
                         await afterUpdateCallback(group);
                     }

package/components/groups/GroupsDevices.d.ts

@@ -1,7 +1,6 @@
-import { UserType } from '../../types/user';
-import { Position } from "./Map";
 import { Theme } from "@emotion/react";
-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 }: {
+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 }: {
     userInfo: UserType;
     handleGetUsersList: ({ page, pageSize }: {
         page: number;
@@ -14,24 +13,27 @@ declare const GroupsDevices: ({ userInfo, handleGetUsersList, handleAddUserToGro
     handleGetGroups: (userInfo?: UserType) => Promise<any>;
     handleGetUsersGroup: (groupID: string) => Promise<any>;
     handleCreateGroup: (group: any) => Promise<any>;
-    handleGetDevices: (user: UserType, query: string) => Promise<any>;
-    handleGetPositions: (devices: any) => Promise<any>;
-    handleAddDevicesToGroup: (user: UserType, group: string, devicesToPatch: any[]) => Promise<any>;
-    handleRemoveDevicesFromGroup: (user: UserType, group: string, devicesToPatch: any[]) => Promise<any>;
+    handleGetDevices: (user: UserType, group: string, selectedGroup: string) => Promise<AssetType[] | TrackleDeviceType[]>;
+    handleGetPositions?: (devices: any) => Promise<DevicePositionType[]>;
+    handleAddDevicesToGroup: (user: UserType, group: string, devicesToPatch: AssetType[] | TrackleDeviceType[]) => Promise<TrackleDeviceType[]>;
+    handleRemoveDevicesFromGroup: (user: UserType, group: string, devicesToPatch: AssetType[] | TrackleDeviceType[]) => Promise<TrackleDeviceType[]>;
     handleDeleteGroup: (id: string) => Promise<void>;
     handleUpdateGroup: (id: string, group: any) => Promise<void>;
-    handleUpdateDevice: (id: string, body: any, user: UserType) => Promise<any>;
+    handleUpdateDevice: (id: string, body: any, user: UserType) => Promise<void>;
     group: string;
     columnsArray: any[];
     containerDataGrid?: "Card" | "Box";
     props?: any;
     propsDatagrid?: any;
+    propsHeaderGroups?: any;
     loadingComponent?: React.ReactNode;
     containerProps?: any;
     enableMaps?: boolean;
     mapsHeight: string;
-    mapsClickCallback?: (position: Position) => void;
+    mapsClickCallback?: (position: DevicePositionType) => void;
     theme: Theme;
     confirmMui?: (options?: any) => Promise<void>;
+    forceGetDevices: number;
+    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

@@ -15,8 +15,8 @@ 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, groupsLabelAll }) => {
+    const [devices, setDevices] = useState([]);
     const [positions, setPositions] = useState([]);
     const [loadingDevices, setLoadingDevices] = useState(false);
     const [loadingGroups, setLoadingGroups] = useState(false);
@@ -73,22 +73,9 @@ const GroupsDevices = ({ userInfo, handleGetUsersList, handleAddUserToGroup, han
     const fetchDevices = async (group, selected) => {
         try {
             setLoadingDevices(true);
-            let queryParams = "last_handshake_at!=null";
-            if (group !== "all") {
-                queryParams = `last_handshake_at!=null&state.groups=/${group}/`;
-                if (userInfo.role === "admin") {
-                    queryParams += "&quarantined=false";
-                }
-            }
-            else if (selected !== "all") {
-                queryParams = `last_handshake_at!=null&state.groups!=/${selected}/`;
-                if (userInfo.role === "admin") {
-                    queryParams += "&quarantined=false";
-                }
-            }
-            const devices = await handleGetDevices(userInfo, queryParams);
+            const devices = await handleGetDevices(userInfo, group, selected);
             setDevices(devices);
-            if (enableMaps) {
+            if (enableMaps && handleGetPositions) {
                 const positions = await handleGetPositions(devices);
                 setPositions(positions);
             }
@@ -138,6 +125,11 @@ const GroupsDevices = ({ userInfo, handleGetUsersList, handleAddUserToGroup, han
             fetchDevices(currentGroup, currentGroup);
         }
     }, [currentGroup]);
+    useEffect(() => {
+        if (forceGetDevices !== 0) {
+            fetchDevices(currentGroup, currentGroup);
+        }
+    }, [forceGetDevices]);
     const handleSubmit = async (e) => {
         e.preventDefault();
         setLoadingAdd(true);
@@ -186,28 +178,12 @@ 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 && usersGroup.map((ug) => ug.user.userId) || [];
-                if (userIdsToAdd && 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);
-            }
+            const devicesToPatch = devices.filter((row) => devicesToAdd.includes(row.id));
+            await handleAddDevicesToGroup(userInfo, selectedGroup, devicesToPatch);
+            setLoadingGroups(false);
+            setCurrentGroup(selectedGroup);
+            setDevicesToAdd([...[]]);
+            fetchDevices(selectedGroup, selectedGroup);
         }
         catch (err) {
             console.error(err);
@@ -220,31 +196,10 @@ const GroupsDevices = ({ userInfo, handleGetUsersList, handleAddUserToGroup, han
         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 && 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({ role: 'support', uid: manager });
-                            const userGroupIds = groupsData && 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, devicesToRemove);
+            setLoadingGroups(false);
+            setDevicesToAdd([]);
+            fetchDevices(currentGroup, selectedGroup);
         }
         catch (err) {
             console.error(err);
@@ -279,6 +234,7 @@ const GroupsDevices = ({ userInfo, handleGetUsersList, handleAddUserToGroup, han
                 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 renderDatagridAndMaps = (enableMaps ?
@@ -287,10 +243,10 @@ const GroupsDevices = ({ userInfo, handleGetUsersList, handleAddUserToGroup, han
         _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" }) })
+    return (_jsx(ThemeProvider, { theme: theme, children: _jsxs(Box, { ...props, children: [_jsxs(Box, { component: "div", sx: { display: 'flex', alignItems: 'center', mb: 1, backgroundColor: editGroup ? 'secondary.light' : '', borderRadius: 3, px: editGroup ? 2 : 0, py: 1, height: 50, ...propsHeaderGroups }, 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 || groupsLabelAll || 'All devices', disableClearable: currentGroup === 'all', isOptionEqualToValue: (o, v) => o.label === v, options: [{ label: groupsLabelAll || '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 ?
+                            _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 ?
                                         currentGroup === 'all' ?
@@ -308,6 +264,6 @@ const GroupsDevices = ({ userInfo, handleGetUsersList, handleAddUserToGroup, han
                             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: "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 })] }) }));
 };
 export default GroupsDevices;

package/components/groups/Map.d.ts

@@ -1,14 +1,9 @@
 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;
-};
+import { DevicePositionType } from "../../types/device";
 export default function Map({ positions, height, mapsClickCallback }: {
-    positions: Position[];
+    positions: DevicePositionType[];
     height: string;
-    mapsClickCallback: (position: Position) => void;
+    mapsClickCallback: (position: DevicePositionType) => void;
 }): import("react/jsx-runtime").JSX.Element;

package/package.json

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

package/server-actions/groups.d.ts

@@ -1,5 +1,5 @@
 import { Firestore } from "firebase-admin/firestore";
-export declare const getGroups: (db: Firestore, productID: number, userID?: string) => Promise<{
+export declare const getGroups: (db: Firestore, productID: number, userID?: string, assetID?: string) => Promise<{
     id: string;
 }[]>;
 export declare const getGroupById: (db: Firestore, id: string) => Promise<{
@@ -11,5 +11,8 @@ export declare const deleteGroup: (db: Firestore, id: string) => Promise<void>;
 export declare const getUsersGroup: (db: Firestore, groupID: string) => Promise<{
     id: string;
 }[]>;
+export declare const getGroupsUser: (db: Firestore, userID: string) => Promise<{
+    id: string;
+}[]>;
 export declare const addUsersGroup: (db: Firestore, groupID: string, userName: string, userID: string) => Promise<string>;
 export declare const removeUserGroup: (db: Firestore, groupID: string, userID: string) => Promise<string | undefined>;

package/server-actions/groups.js

@@ -1,10 +1,11 @@
 "use server";
 // 1. GET GROUPS
-export const getGroups = async (db, productID, userID) => {
-    const groupsRef = db
-        .collection("groups")
-        .where("productID", "==", productID)
-        .orderBy("created", "desc");
+export const getGroups = async (db, productID, userID, assetID) => {
+    let groupsRef = db.collection("groups").where("productID", "==", productID);
+    if (assetID) {
+        groupsRef = groupsRef.where("assets", "array-contains", assetID);
+    }
+    groupsRef = groupsRef.orderBy("created", "desc");
     let groupIds = null;
     if (userID) {
         const userGroupsSnapshot = await db
@@ -67,6 +68,17 @@ export const getUsersGroup = async (db, groupID) => {
         ...doc.data()
     }));
 };
+// 6b. GET GROUPS USER
+export const getGroupsUser = async (db, userID) => {
+    const snapshot = await db
+        .collection("userGroups")
+        .where("user.userId", "==", userID)
+        .get();
+    return snapshot.docs.map((doc) => ({
+        id: doc.id,
+        ...doc.data()
+    }));
+};
 // 7. ADD USER TO GROUP
 export const addUsersGroup = async (db, groupID, userName, userID) => {
     const created = new Date().toISOString();

package/server-actions/trackle.d.ts

@@ -1,3 +1,4 @@
+import { TrackleDeviceType } from "../types";
 export type TrackleConfig = {
     orgName: string;
     apiUrl: string;
@@ -32,5 +33,5 @@ export declare function post(trackleConfig: TrackleConfig, id: string, endpoint:
 export declare function put(trackleConfig: TrackleConfig, id: string, endpoint: string, value: any, productId?: number, uid?: string): Promise<{
     return_value: number;
 }>;
-export declare function addDevicesToGroup(trackleConfig: TrackleConfig, productId: number, uid: string, group: string, devicesToPatch: any[]): Promise<string[]>;
-export declare function removeDevicesFromGroup(trackleConfig: TrackleConfig, productId: number, uid: string, group: string, devicesToPatch: any[]): Promise<string[]>;
+export declare function addDevicesToGroup(trackleConfig: TrackleConfig, productId: number, uid: string, group: string, devicesToPatch: TrackleDeviceType[]): Promise<TrackleDeviceType[]>;
+export declare function removeDevicesFromGroup(trackleConfig: TrackleConfig, productId: number, uid: string, group: string, devicesToPatch: TrackleDeviceType[]): Promise<TrackleDeviceType[]>;

package/server-actions/trackle.js

@@ -110,7 +110,9 @@ export async function put(trackleConfig, id, endpoint, value, productId, uid) {
 export async function addDevicesToGroup(trackleConfig, productId, uid, group, devicesToPatch) {
     const devicesPatched = [];
     for (const device of devicesToPatch) {
-        const newGroups = device?.groups && device?.groups instanceof Array ? device?.groups : [];
+        const newGroups = device.state?.groups && device.state?.groups instanceof Array
+            ? device.state?.groups
+            : [];
         if (!newGroups.includes(group)) {
             newGroups.push(group);
             await wretchApi(trackleConfig, uid)
@@ -120,7 +122,7 @@ export async function addDevicesToGroup(trackleConfig, productId, uid, group, de
             })
                 .setTimeout(trackleConfig.apiTimeout)
                 .res();
-            devicesPatched.push(device.id);
+            devicesPatched.push(device);
         }
     }
     return devicesPatched;
@@ -128,7 +130,9 @@ export async function addDevicesToGroup(trackleConfig, productId, uid, group, de
 export async function removeDevicesFromGroup(trackleConfig, productId, uid, group, devicesToPatch) {
     const devicesPatched = [];
     for (const device of devicesToPatch) {
-        let newGroups = device?.groups && device?.groups instanceof Array ? device?.groups : [];
+        let newGroups = device.state?.groups && device.state?.groups instanceof Array
+            ? device.state?.groups
+            : [];
         if (newGroups.includes(group)) {
             newGroups = newGroups.filter((newGroup) => newGroup !== group);
             await wretchApi(trackleConfig, uid)
@@ -138,7 +142,7 @@ export async function removeDevicesFromGroup(trackleConfig, productId, uid, grou
             })
                 .setTimeout(trackleConfig.apiTimeout)
                 .res();
-            devicesPatched.push(device.id);
+            devicesPatched.push(device);
         }
     }
     return devicesPatched;

package/types/device.d.ts

@@ -0,0 +1,19 @@
+export type AssetType = {
+    id: string;
+    device?: TrackleDeviceType;
+    [key: string]: any;
+};
+export type TrackleDeviceType = {
+    id: string;
+    state: {
+        groups: string[] | null;
+    };
+    managers: string[] | null;
+    [key: string]: any;
+};
+export type DevicePositionType = {
+    deviceID: string;
+    name: string;
+    lat: number;
+    lng: number;
+};

package/types/device.js

@@ -0,0 +1 @@
+export {};

package/types/index.d.ts

@@ -1 +1,2 @@
 export * from "./user";
+export * from "./device";

package/types/index.js

@@ -1 +1,2 @@
 export * from "./user";
+export * from "./device";