@deix/rossini-identity-management 1.1.2 → 2.0.0

package/lib/components/users/Users.js

@@ -1,103 +0,0 @@
-'use client';
-import React, { useEffect, useState } from 'react';
-import PersonAddIcon from '@mui/icons-material/PersonAdd';
-import { Box, Button, Grid, IconButton, Link } from '@mui/material';
-import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
-import { useAPI, useLocale } from '@deix/rossini-core';
-import { useQueryClient } from '@tanstack/react-query';
-import { SearchField } from '../../components';
-import CreateUserDialog from './CreateUserDialog';
-import UsersTable from './UsersTable';
-import usersTranslations from '../../lang/users';
-import { useDeleteUser, useUsers } from '../../utils/hooks/users';
-import UserTabs from './UsersTabs';
-import { APIClientProvider } from '../../utils/hooks/useAPIClient';
-const Users = ({ apiUrl, additionalTabs = [], onUserCreate, onUserUpdate, onUserDelete, editUsername, filteredGroup, emailAsUsername = false, hideGroupsSelection = false, }) => {
-    const locale = useLocale();
-    const apiClient = useAPI(apiUrl);
-    const queryClient = useQueryClient();
-    const { data: users } = useUsers(apiClient, filteredGroup);
-    const { mutate: deleteUser } = useDeleteUser(queryClient, apiClient);
-    const [searchString, setSearchString] = useState('');
-    const [filteredUsers, setFilteredUsers] = useState();
-    const [selectedUser, setSelectedUser] = useState();
-    const [openCreateUserDialog, setOpenCreateUserDialog] = useState(false);
-    // Update the filtered users using the search string
-    useEffect(() => {
-        if (users && searchString === '') {
-            setFilteredUsers(users);
-        }
-        else if (users && searchString !== '') {
-            setFilteredUsers(users.filter((user) => user.username?.toLowerCase().includes(searchString.toLowerCase()) ||
-                user.firstName
-                    ?.toLowerCase()
-                    .includes(searchString.toLowerCase()) ||
-                user.lastName
-                    ?.toLocaleLowerCase()
-                    .includes(searchString.toLowerCase())));
-        }
-    }, [searchString, users, setFilteredUsers]);
-    // If the user change updated the selected user to reflect the chages
-    useEffect(() => {
-        if (selectedUser) {
-            const updatedSelectedUser = users?.find((user) => user.id === selectedUser.id);
-            if (updatedSelectedUser) {
-                setSelectedUser(updatedSelectedUser);
-            }
-            else {
-                // deselect the user if it doesn't exist anymore
-                setSelectedUser(undefined);
-            }
-        }
-    }, [users, selectedUser, setSelectedUser]);
-    const handleDelete = (user) => {
-        deleteUser(user.id);
-        if (typeof onUserDelete === 'function') {
-            onUserDelete(user);
-        }
-        setSelectedUser(undefined);
-    };
-    return (React.createElement(APIClientProvider, { baseURL: apiUrl },
-        React.createElement(Box, { sx: {
-                flexGrow: 1,
-                maxWidth: '100%',
-                overflowX: 'hidden',
-                paddingTop: 3,
-                paddingLeft: 3,
-                paddingRight: 3,
-            } },
-            !selectedUser && (React.createElement(React.Fragment, null,
-                React.createElement(Grid, { container: true, spacing: 2, sx: { marginBottom: 2 } },
-                    React.createElement(Grid, { item: true },
-                        React.createElement(SearchField, { placeholder: usersTranslations.search[locale], onSearch: (value) => setSearchString(value) })),
-                    React.createElement(Grid, { item: true },
-                        React.createElement(Button, { variant: 'contained', startIcon: React.createElement(PersonAddIcon, null), onClick: () => {
-                                setOpenCreateUserDialog(true);
-                                setSelectedUser(undefined);
-                            } }, usersTranslations.new[locale]))),
-                React.createElement(UsersTable, { users: filteredUsers, selectedUser: selectedUser, setSelectedUser: (user) => {
-                        setSelectedUser(user);
-                    }, onDelete: handleDelete, emailAsUsername: emailAsUsername }))),
-            selectedUser && (React.createElement(Box, { sx: {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'flex-start',
-                    width: '100%',
-                } },
-                React.createElement(Box, { sx: {
-                        display: 'flex',
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                    } },
-                    React.createElement(IconButton, { "aria-label": 'delete', color: 'primary', onClick: () => setSelectedUser(undefined), sx: { mr: 2 } },
-                        React.createElement(ArrowBackIcon, null)),
-                    React.createElement(Link, { underline: 'none', href: '#', onClick: () => setSelectedUser(undefined) }, usersTranslations.title[locale]),
-                    React.createElement(KeyboardArrowRightIcon, null),
-                    selectedUser.username),
-                React.createElement(UserTabs, { user: selectedUser, additionalTabs: additionalTabs, onUserUpdate: onUserUpdate, editUsername: editUsername, emailAsUsername: emailAsUsername, hideGroupsSelection: hideGroupsSelection }))),
-            React.createElement(CreateUserDialog, { open: openCreateUserDialog, onClose: () => {
-                    setOpenCreateUserDialog(false);
-                }, onUserCreate: onUserCreate, filteredGroup: filteredGroup, emailAsUsername: true }))));
-};
-export default Users;

package/lib/components/users/UsersTable.js

@@ -1,64 +0,0 @@
-import React from 'react';
-import { isStringTranslation, useLocale } from '@deix/rossini-core';
-import CheckIcon from '@mui/icons-material/Check';
-import CloseIcon from '@mui/icons-material/Close';
-import DeleteIcon from '@mui/icons-material/Delete';
-import { IconButton, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, useTheme, } from '@mui/material';
-import { useState } from 'react';
-import DeleteConfirmationDialog from '../DeleteConfirmationDialog';
-const usersTableColumns = [
-    {
-        id: 'firstName',
-        label: { en: 'First Name', it: 'Nome' },
-    },
-    {
-        id: 'lastName',
-        label: { en: 'Last Name', it: 'Cognome' },
-    },
-    {
-        id: 'username',
-        label: { en: 'Username', it: 'Username' },
-    },
-    { id: 'email', label: 'Email' },
-    {
-        id: 'enabled',
-        label: { en: 'Enabled', it: 'Utente Abilitato' },
-    },
-];
-const UsersTable = ({ users = [], selectedUser, setSelectedUser, onDelete, emailAsUsername = false, }) => {
-    const locale = useLocale();
-    const muiTheme = useTheme();
-    const [openConfirmationDialog, setOpenConfirmationDialog] = useState(false);
-    const [deleteUser, setDeleteUser] = useState();
-    return (React.createElement(React.Fragment, null,
-        React.createElement(TableContainer, null,
-            React.createElement(Table, { size: 'small' },
-                React.createElement(TableHead, null,
-                    React.createElement(TableRow, null,
-                        usersTableColumns
-                            .filter((c) => c.id !== 'username' || !emailAsUsername)
-                            .map((col) => (React.createElement(TableCell, { key: col.id, align: col.align || 'inherit' }, isStringTranslation(col.label)
-                            ? col.label[locale]
-                            : col.label))),
-                        React.createElement(TableCell, { padding: 'none' }, ''))),
-                React.createElement(TableBody, null, users.map((user, rowIdx) => (React.createElement(TableRow, { key: rowIdx, onClick: () => setSelectedUser(user), sx: {
-                        cursor: 'pointer',
-                        background: selectedUser && user.id === selectedUser.id
-                            ? muiTheme.palette.primary.light
-                            : undefined,
-                    } },
-                    React.createElement(TableCell, null, user.firstName),
-                    React.createElement(TableCell, null, user.lastName),
-                    !emailAsUsername && React.createElement(TableCell, null, user.username),
-                    React.createElement(TableCell, null, user.email),
-                    React.createElement(TableCell, null, user.enabled ? React.createElement(CheckIcon, null) : React.createElement(CloseIcon, null)),
-                    React.createElement(TableCell, { padding: 'none', align: 'right' },
-                        React.createElement(IconButton, { size: 'small', onClick: (evt) => {
-                                evt.stopPropagation();
-                                setOpenConfirmationDialog(true);
-                                setDeleteUser(user);
-                            } },
-                            React.createElement(DeleteIcon, null))))))))),
-        React.createElement(DeleteConfirmationDialog, { open: openConfirmationDialog, onClose: () => setOpenConfirmationDialog(false), onConfirm: () => (deleteUser ? onDelete(deleteUser) : {}) })));
-};
-export default UsersTable;

package/lib/components/users/UsersTabs.js

@@ -1,32 +0,0 @@
-'use client';
-import React, { useState } from 'react';
-import { Box, Tab, Tabs } from '@mui/material';
-import { useLocale } from '@deix/rossini-core';
-import usersTranslations from '../../lang/users';
-import UserDetails from './UserDetails';
-import UserGroups from './UserGroups';
-import UserCredentials from './UserCredentials';
-const UserTabs = ({ user, additionalTabs = [], onUserUpdate, editUsername, emailAsUsername = false, hideGroupsSelection = false, }) => {
-    const locale = useLocale();
-    const [selectedTab, setSelectedTab] = useState('DETAILS');
-    return (React.createElement(Box, { sx: {
-            flexGrow: 1,
-            maxWidth: '100%',
-            overflowX: 'hidden',
-            alignSelf: 'stretch',
-        } },
-        React.createElement(Box, { sx: { borderBottom: 1, borderColor: 'divider' } },
-            React.createElement(Tabs, { value: selectedTab, onChange: (_evt, newValue) => {
-                    setSelectedTab(newValue);
-                }, "aria-label": 'basic tabs example' },
-                React.createElement(Tab, { label: usersTranslations.details[locale], value: 'DETAILS' }),
-                !hideGroupsSelection && (React.createElement(Tab, { label: usersTranslations.userGroups[locale], value: 'USER_GROUPS' })),
-                React.createElement(Tab, { label: usersTranslations.credentials[locale], value: 'CREDENTIALS' }),
-                additionalTabs.map((tab, index) => (React.createElement(Tab, { key: `tab${index}`, label: tab.title[locale], value: `ADDITIONAL_TAB_${index}` }))))),
-        React.createElement(Box, { sx: { p: 1 } },
-            selectedTab === 'DETAILS' && (React.createElement(UserDetails, { user: user, onUserUpdate: onUserUpdate, editUsername: editUsername, emailAsUsername: emailAsUsername })),
-            selectedTab === 'USER_GROUPS' && !hideGroupsSelection && (React.createElement(UserGroups, { user: user })),
-            selectedTab === 'CREDENTIALS' && React.createElement(UserCredentials, { user: user }),
-            additionalTabs.map((tab, index) => selectedTab === `ADDITIONAL_TAB_${index}` && (React.createElement(tab.component, { key: `tab${index}`, user: user }))))));
-};
-export default UserTabs;