@iotready/nextjs-components-library 1.0.0-preview31 → 1.0.0-preview33

package/components/groups/GroupUpdate.d.ts

@@ -1,5 +1,5 @@
 import { AssetType, TrackleDeviceType, UserType } from '../../types';
-declare const GroupUpdate: ({ groupInfo, usersGroup, usersList, devicesList, handleAddUserToGroup, handleRemoveUserFromGroup, handleUpdateGroup, handleDeleteGroup, container, containerProps, afterUpdateCallback, afterRemoveCallback, confirmMui }: {
+declare const GroupUpdate: ({ labelEntity, groupInfo, usersGroup, usersList, devicesList, handleAddUserToGroup, handleRemoveUserFromGroup, handleUpdateGroup, handleDeleteGroup, container, containerProps, afterUpdateCallback, afterRemoveCallback, confirmMui }: {
     userInfo: UserType;
     groupInfo: any;
     usersGroup: any[];
@@ -16,5 +16,6 @@ declare const GroupUpdate: ({ groupInfo, usersGroup, usersList, devicesList, han
     afterUpdateCallback?: (groupInfo: any) => Promise<void>;
     afterRemoveCallback?: () => Promise<void>;
     confirmMui?: (options?: any) => Promise<void>;
+    labelEntity: string;
 }) => import("react/jsx-runtime").JSX.Element;
 export default GroupUpdate;

package/components/groups/GroupUpdate.js

@@ -8,7 +8,7 @@ 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 = ({ groupInfo, usersGroup, usersList, devicesList, handleAddUserToGroup, handleRemoveUserFromGroup, handleUpdateGroup, handleDeleteGroup, container = 'Box', containerProps = {}, afterUpdateCallback, afterRemoveCallback, confirmMui }) => {
+const GroupUpdate = ({ labelEntity, 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);
@@ -97,7 +97,7 @@ const GroupUpdate = ({ groupInfo, usersGroup, usersList, devicesList, handleAddU
                                     _jsx(Table, { size: "small", children: _jsx(TableBody, { children: usersGroup.map((ug) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Typography, { variant: "body1", children: ug.user.fullName }) }), _jsx(TableCell, { align: 'right', children: _jsx(LoadingButton, { size: "small", color: "error", loading: loadingRemoveUserButton, onClick: () => removeUserFromCurrentGroup(ug.user.userId), children: _jsx(CloseIcon, { sx: { m: 0, p: 0 }, fontSize: "small" }) }) })] }, ug.id))) }) })
                                     : _jsx(Box, { component: 'div', sx: { mt: 2 }, children: "No members found" }) }), _jsxs(Box, { component: "div", sx: { mt: 4, display: 'flex', alignItems: 'center' }, children: [_jsx(Autocomplete, { fullWidth: true, disablePortal: true, options: usersList || [], value: selectedUser, size: 'small', onChange: (event, newValue) => {
                                             setSelectedUser(newValue);
-                                        }, renderInput: (params) => _jsx(TextField, { ...params, label: "Select user" }) }), _jsxs(LoadingButton, { variant: "contained", color: "success", loading: loadingAddUserButton, sx: { ml: 2 }, disabled: !selectedUser, onClick: () => addUserToCurrentGroup(), children: [_jsx(AddIcon, { sx: { mr: 1 } }), " Add"] })] }), _jsxs(Box, { component: "div", sx: { mt: 4 }, children: [_jsx(Typography, { variant: 'body1', sx: { fontWeight: 'bold' }, children: "Delete group" }), _jsx(Alert, { severity: "error", sx: { mt: 2 }, action: _jsxs(LoadingButton, { variant: "contained", disabled: devicesList.length > 0, color: "error", loading: loadingDeleteGroupButton, onClick: () => deleteGroup(), size: 'small', children: [_jsx(DeleteIcon, { fontSize: "small", sx: { mr: 1 } }), " Delete"] }), children: devicesList.length === 0 ? 'This action cannot be undone' : 'You must manually remove devices from group before deletion' })] })] }) })] }));
+                                        }, renderInput: (params) => _jsx(TextField, { ...params, label: "Select user" }) }), _jsxs(LoadingButton, { variant: "contained", color: "success", loading: loadingAddUserButton, sx: { ml: 2 }, disabled: !selectedUser, onClick: () => addUserToCurrentGroup(), children: [_jsx(AddIcon, { sx: { mr: 1 } }), " Add"] })] }), _jsxs(Box, { component: "div", sx: { mt: 4 }, children: [_jsxs(Typography, { variant: 'body1', sx: { fontWeight: 'bold' }, children: ["Delete ", labelEntity.toLocaleLowerCase()] }), _jsx(Alert, { severity: "error", sx: { mt: 2 }, action: _jsxs(LoadingButton, { variant: "contained", disabled: devicesList.length > 0, color: "error", loading: loadingDeleteGroupButton, onClick: () => deleteGroup(), size: 'small', children: [_jsx(DeleteIcon, { fontSize: "small", sx: { mr: 1 } }), " Delete"] }), children: devicesList.length === 0 ? `This action cannot be undone` : `You must manually remove devices from ${labelEntity.toLocaleLowerCase()} before deletion` })] })] }) })] }));
     };
     return (container === "Card" ? (_jsx(Card, { ...containerProps, children: _jsx(CardContent, { children: renderGroupUpdate() }) })) : (_jsx(Box, { ...containerProps, children: renderGroupUpdate() })));
 };

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, customToolbar, groupsLabelAll, addDevicesLabel, groupUpdateRoles }: {
+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, addDevicesLabel, noDevicesLabel, groupUpdateRoles, isOrg, currentOrg, userGroupsRole }: {
     userInfo: UserType;
     handleGetUsersList: ({ page, pageSize }: {
         page: number;
@@ -22,6 +22,7 @@ declare const GroupsDevices: ({ userInfo, handleGetUsersList, handleAddUserToGro
     handleUpdateDevice: (id: string, body: any, user: UserType) => Promise<void>;
     group: string;
     columnsArray: any[];
+    userGroupsRole?: string[];
     containerDataGrid?: "Card" | "Box";
     props?: any;
     propsDatagrid?: any;
@@ -37,6 +38,9 @@ declare const GroupsDevices: ({ userInfo, handleGetUsersList, handleAddUserToGro
     customToolbar?: string[];
     groupsLabelAll?: string;
     addDevicesLabel?: string;
+    noDevicesLabel?: string;
     groupUpdateRoles?: string[];
+    isOrg?: boolean;
+    currentOrg?: 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,13 +15,13 @@ 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, customToolbar, groupsLabelAll, addDevicesLabel, groupUpdateRoles }) => {
+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, userGroupsRole = ['support'] }) => {
     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([]);
@@ -37,6 +37,7 @@ const GroupsDevices = ({ userInfo, handleGetUsersList, handleAddUserToGroup, han
     const [groupUpdateVisible, setGroupUpdateVisible] = useState(false);
     const [valueTab, setValueTab] = useState('1');
     const clickedIdRef = useRef(null);
+    const labelEntity = isOrg ? "Organization" : "Group";
     const handleChangeTab = (event, newValue) => {
         setValueTab(newValue);
     };
@@ -63,7 +64,10 @@ const GroupsDevices = ({ userInfo, handleGetUsersList, handleAddUserToGroup, han
                 page++;
             }
             const userGroupsUserIds = usersGroup && usersGroup.map((ug) => ug.user.userId) || [];
-            setUsersList(usersData.filter((user) => user.role === 'support' && !userGroupsUserIds.includes(user.uid)).map((user) => {
+            setUsersList(usersData
+                .filter((user) => userGroupsRole.includes(user.role) &&
+                !userGroupsUserIds.includes(user.uid))
+                .map((user) => {
                 const userName = user.name ? user.name.replace("/", " ") : "";
                 return { label: `${userName} (${user.email})`, id: user.uid };
             }));
@@ -73,9 +77,16 @@ 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 && handleGetPositions) {
                 const positions = await handleGetPositions(devices);
@@ -116,7 +127,7 @@ const GroupsDevices = ({ userInfo, handleGetUsersList, handleAddUserToGroup, han
         getUsersList();
     }, [usersGroup]);
     useEffect(() => {
-        if (currentGroup && !checkboxSelection) {
+        if (currentGroup && !checkboxSelection && groups !== null) {
             setSelectedGroup(currentGroup);
             setGroupInfo(groups && groups.find((g) => g.id === currentGroup));
             if (currentGroup !== 'all') {
@@ -124,7 +135,7 @@ const GroupsDevices = ({ userInfo, handleGetUsersList, handleAddUserToGroup, han
             }
             fetchDevices(currentGroup, currentGroup);
         }
-    }, [currentGroup]);
+    }, [currentGroup, groups]);
     useEffect(() => {
         if (forceGetDevices !== 0) {
             fetchDevices(currentGroup, currentGroup);
@@ -143,6 +154,7 @@ const GroupsDevices = ({ userInfo, handleGetUsersList, handleAddUserToGroup, han
             setCurrentGroup(id);
             setGroupInfo({ ...newGroup, id });
             setSelectedGroup(id);
+            getUsersGroup(id);
             setDevicesToAdd([]), setEditGroup(!editGroup);
             setCheckboxSelection(!checkboxSelection);
             fetchDevices(id, id);
@@ -266,8 +278,8 @@ const GroupsDevices = ({ userInfo, handleGetUsersList, handleAddUserToGroup, han
                 ? 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 } }), addDevicesLabel || 'Add devices'] }))] }))
-                        : "No devices" })),
+                        ? (_jsxs(_Fragment, { children: [_jsxs(Box, { children: [noDevicesLabel || 'No devices', " in ", labelEntity.toLocaleLowerCase()] }), editGroup && (_jsxs(Button, { onClick: addDevicesToCurrentGroup, variant: "outlined", color: "primary", size: "small", sx: { mt: 2 }, children: [_jsx(PlaylistAddIcon, { fontSize: "small", sx: { mr: 1 } }), addDevicesLabel || 'Add devices'] }))] }))
+                        : noDevicesLabel || 'No devices' })),
                 noResultsOverlay: () => (_jsx(Stack, { height: "100%", alignItems: "center", justifyContent: "center", children: "Filter returns no result" })),
                 toolbar: customToolbar && customToolbar.length ? CustomToolbar : GridToolbar,
             }, slotProps: {
@@ -286,27 +298,27 @@ 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', 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' || (groupUpdateRoles && groupUpdateRoles.includes(userInfo.role)) &&
+    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 ? _jsxs(Typography, { variant: 'subtitle1', children: [_jsxs(Box, { component: 'span', sx: { display: { xs: 'none' } }, children: ["Edit ", labelEntity.toLocaleLowerCase()] }), " ", _jsx("b", { children: groupInfo?.name })] }) : '', groups && !checkboxSelection && !isOrg && !(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: 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: "Create\u00A0" }), " ", labelEntity.toLocaleLowerCase()] }) : '', 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: "\u00A0Back to group" })] }), _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: "\u00A0Back to group" })] }) :
-                                                _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 || '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: ["\u00A0Back to ", labelEntity.toLocaleLowerCase()] })] }), _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" }), _jsxs(Box, { component: 'span', sx: { display: { xs: 'none', sm: 'inline' } }, children: ["\u00A0Back to ", labelEntity.toLocaleLowerCase()] })] }) :
+                                                _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 || 'Add devices'] }), _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: ["\u00A0Manage ", labelEntity.toLocaleLowerCase()] })] })] })
+                                                : _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 ", labelEntity.toLocaleLowerCase()] })
+                                        : '', 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: "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" }), " ", labelEntity.toLocaleLowerCase()] }) }) : ''] })] }), _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 })] }) }));
+                        }, children: [_jsx(CardHeader, { title: "new" + labelEntity, action: _jsx(IconButton, { onClick: handleCloseAdd, children: _jsx(CloseIcon, {}) }) }), _jsx(CardContent, { children: _jsxs("form", { onSubmit: handleSubmit, children: [_jsx(TextField, { fullWidth: true, label: labelEntity + " 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, labelEntity: labelEntity })] }) }));
 };
 export default GroupsDevices;

package/components/users/UsersDataGrid.d.ts

@@ -17,7 +17,7 @@ declare const UsersDataGrid: ({ handleGetUsersList, pageSize, container, contain
     }>;
     pageSize: number;
     container?: "Card" | "Box";
-    containerProps?: object | undefined;
+    containerProps?: any;
     props?: object | undefined;
     loadingComponent?: React.ReactNode;
     theme: Theme;

package/components/users/UsersDataGrid.js

@@ -8,7 +8,7 @@ const UsersDataGrid = ({ handleGetUsersList, pageSize, container = 'Box', contai
     const [usersList, setUsersList] = useState(undefined);
     const [userCount, setUserCount] = useState(undefined);
     const filterType = {
-        email: 'Email',
+        email: 'Email Address',
         name: 'Full name',
         role: 'Role'
     };
@@ -85,9 +85,9 @@ const UsersDataGrid = ({ handleGetUsersList, pageSize, container = 'Box', contai
                     showQuickFilter: false,
                 },
             }, rowCount: userCount, loading: isLoading, pageSizeOptions: [], paginationModel: paginationModel, paginationMode: "server", onPaginationModelChange: setPaginationModel, ...props }) }));
-    const renderFilter = () => (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', justifyContent: 'flex-end', mb: 2 }, children: [_jsxs(FormControl, { children: [_jsx(InputLabel, { shrink: true, id: "filter-by-select-label", children: "Filter by" }), _jsx(Select, { value: selectedFilterType || '', onChange: (e) => setSelectedFilterType(e.target.value), labelId: "filter-by-select-label", label: "Filter by", size: "small", sx: { mr: 2 }, children: Object.entries(filterType).map(([key, label]) => (_jsx(MenuItem, { value: key, children: label }, key))) })] }), _jsx(TextField, { value: selectedFilterValue || "", onChange: (e) => handleFilterModelChange(e.target.value), placeholder: "Search...", size: "small", InputProps: {
+    const renderFilter = () => (_jsxs(Box, { sx: { position: "absolute", top: 10, right: 10, zIndex: 1 }, children: [_jsxs(FormControl, { children: [_jsx(InputLabel, { shrink: true, id: "filter-by-select-label", children: "Filter by" }), _jsx(Select, { value: selectedFilterType || '', onChange: (e) => setSelectedFilterType(e.target.value), labelId: "filter-by-select-label", label: "Filter by", size: "small", sx: { mr: 2 }, children: Object.entries(filterType).map(([key, label]) => (_jsx(MenuItem, { value: key, children: label }, key))) })] }), _jsx(TextField, { value: selectedFilterValue || "", onChange: (e) => handleFilterModelChange(e.target.value), placeholder: "Search...", size: "small", InputProps: {
                     endAdornment: selectedFilterValue ? (_jsx(IconButton, { size: "small", onClick: () => handleFilterModelChange(""), children: _jsx(ClearIcon, { fontSize: "small" }) })) : null,
                 } })] }));
-    return _jsx(ThemeProvider, { theme: theme, children: container === "Card" ? (_jsxs(_Fragment, { children: [renderFilter(), _jsx(Card, { ...containerProps, children: renderUsersList() })] })) : (_jsxs(_Fragment, { children: [renderFilter(), _jsx(Box, { ...containerProps, children: renderUsersList() })] })) });
+    return _jsx(ThemeProvider, { theme: theme, children: container === "Card" ? (_jsx(_Fragment, { children: _jsxs(Card, { ...containerProps, sx: { position: 'relative', ...(containerProps?.sx) }, children: [renderFilter(), renderUsersList()] }) })) : (_jsxs(_Fragment, { children: [renderFilter(), _jsxs(Box, { ...containerProps, sx: { position: 'relative', ...(containerProps?.sx) }, children: [renderFilter(), renderUsersList()] })] })) });
 };
 export default UsersDataGrid;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iotready/nextjs-components-library",
-  "version": "1.0.0-preview31",
+  "version": "1.0.0-preview33",
   "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, assetID?: string) => Promise<{
+export declare const getGroups: (db: Firestore, productID: number, userID?: string, parentID?: string, assetID?: string) => Promise<{
     id: string;
 }[]>;
 export declare const getGroupById: (db: Firestore, id: string) => Promise<{
@@ -16,3 +16,6 @@ export declare const getGroupsUser: (db: Firestore, userID: string) => Promise<{
 }[]>;
 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>;
+export declare const getUserOrganizations: (db: Firestore, productID: number, userID?: string, assetID?: string) => Promise<{
+    id: string;
+}[]>;

package/server-actions/groups.js

@@ -1,7 +1,15 @@
 "use server";
 // 1. GET GROUPS
-export const getGroups = async (db, productID, userID, assetID) => {
+export const getGroups = async (db, productID, userID, parentID, assetID) => {
     let groupsRef = db.collection("groups").where("productID", "==", productID);
+    if (parentID) {
+        if (parentID === "all") {
+            groupsRef = groupsRef.where("parent_id", "!=", null);
+        }
+        else {
+            groupsRef = groupsRef.where("parent_id", "==", parentID);
+        }
+    }
     if (assetID) {
         groupsRef = groupsRef.where("assets", "array-contains", assetID);
     }
@@ -106,3 +114,56 @@ export const removeUserGroup = async (db, groupID, userID) => {
         return doc.id;
     }
 };
+// 9. GET ORGANIZATIONS
+export const getUserOrganizations = 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
+            .collection("userGroups")
+            .where("user.userId", "==", userID)
+            .get();
+        const userGroupIds = userGroupsSnapshot.docs.map((doc) => doc.data().groupId);
+        let parentIds = [];
+        if (userGroupIds.length > 0) {
+            const chunks = [];
+            for (let i = 0; i < userGroupIds.length; i += 10) {
+                chunks.push(userGroupIds.slice(i, i + 10));
+            }
+            for (const chunk of chunks) {
+                const groupsSnapshot = await db
+                    .collection("groups")
+                    .where("__name__", "in", chunk)
+                    .get();
+                const ids = groupsSnapshot.docs
+                    .map((doc) => doc.data().parent_id)
+                    .filter((id) => id !== null && id !== undefined);
+                parentIds.push(...ids);
+            }
+            // Rimuove duplicati
+            groupIds = Array.from(new Set(parentIds));
+        }
+        else {
+            groupIds = [];
+        }
+    }
+    const groupsSnapshot = await groupsRef.get();
+    const organizations = groupsSnapshot.docs
+        .filter((doc) => {
+        const data = doc.data();
+        const parentId = data.parent_id;
+        return (parentId === null || parentId === undefined) &&
+            (!groupIds || groupIds.includes(doc.id));
+    })
+        .map((doc) => ({
+        id: doc.id,
+        ...doc.data()
+    }));
+    return organizations;
+};

package/server-actions/trackle.d.ts

@@ -37,5 +37,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: TrackleDeviceType[]): Promise<TrackleDeviceType[]>;
-export declare function removeDevicesFromGroup(trackleConfig: TrackleConfig, productId: number, uid: string, group: string, devicesToPatch: TrackleDeviceType[]): Promise<TrackleDeviceType[]>;
+export declare function addDevicesToGroup(trackleConfig: TrackleConfig, productId: number, group: string, devicesToPatch: TrackleDeviceType[], uid?: string): Promise<TrackleDeviceType[]>;
+export declare function removeDevicesFromGroup(trackleConfig: TrackleConfig, productId: number, group: string, devicesToPatch: TrackleDeviceType[], uid?: string): Promise<TrackleDeviceType[]>;

package/server-actions/trackle.js

@@ -121,7 +121,7 @@ export async function put(trackleConfig, id, endpoint, value, productId, uid) {
         .setTimeout(trackleConfig.apiTimeout)
         .json();
 }
-export async function addDevicesToGroup(trackleConfig, productId, uid, group, devicesToPatch) {
+export async function addDevicesToGroup(trackleConfig, productId, group, devicesToPatch, uid) {
     const devicesPatched = [];
     for (const device of devicesToPatch) {
         const newGroups = device.state?.groups && device.state?.groups instanceof Array
@@ -129,19 +129,19 @@ export async function addDevicesToGroup(trackleConfig, productId, uid, group, de
             : [];
         if (!newGroups.includes(group)) {
             newGroups.push(group);
-            await wretchApi(trackleConfig, uid)
-                .url(`/products/${productId}/devices/${device.id}/groups`)
-                .put({
-                value: newGroups
-            })
+            const api = uid ? wretchApi(trackleConfig, uid) : wretchApi(trackleConfig);
+            await api
+                .put({ value: newGroups }, uid
+                ? `/devices/${device.id}/groups`
+                : `/products/${productId}/devices/${device.id}/groups`)
                 .setTimeout(trackleConfig.apiTimeout)
-                .res();
+                .json();
             devicesPatched.push(device);
         }
     }
     return devicesPatched;
 }
-export async function removeDevicesFromGroup(trackleConfig, productId, uid, group, devicesToPatch) {
+export async function removeDevicesFromGroup(trackleConfig, productId, group, devicesToPatch, uid) {
     const devicesPatched = [];
     for (const device of devicesToPatch) {
         let newGroups = device.state?.groups && device.state?.groups instanceof Array
@@ -149,11 +149,11 @@ export async function removeDevicesFromGroup(trackleConfig, productId, uid, grou
             : [];
         if (newGroups.includes(group)) {
             newGroups = newGroups.filter((newGroup) => newGroup !== group);
-            await wretchApi(trackleConfig, uid)
-                .url(`/products/${productId}/devices/${device.id}/groups`)
-                .put({
-                value: newGroups
-            })
+            const api = uid ? wretchApi(trackleConfig, uid) : wretchApi(trackleConfig);
+            await api
+                .put({ value: newGroups }, uid
+                ? `/devices/${device.id}/groups`
+                : `/products/${productId}/devices/${device.id}/groups`)
                 .setTimeout(trackleConfig.apiTimeout)
                 .res();
             devicesPatched.push(device);