@deix/rossini-identity-management 0.1.1 → 0.2.0

package/lib/components/users/UserGroups.jsx

@@ -1,78 +0,0 @@
-import React from 'react';
-import { Box, Button, IconButton, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, } from '@mui/material';
-import AddIcon from '@mui/icons-material/Add';
-import DeleteIcon from '@mui/icons-material/Delete';
-import { isStringTranslation, useLocale } from '@deix/rossini-core';
-import { useAddUserToGroup, useRemoveUserFromGroup, useUserGroups, } from '../../utils/hooks/users';
-import { useState } from 'react';
-import DeleteConfirmationDialog from '../DeleteConfirmationDialog';
-import { useQueryClient } from '@tanstack/react-query';
-import usersTranslations from '../../lang/users';
-import AddItemDialog from '../AddItemDialog';
-import { useGroups } from '../../utils/hooks/groups';
-import { useAPIClient } from '../../utils/hooks/useAPIClient';
-const userGroupsTableColumns = [
-    {
-        id: 'name',
-        label: { en: 'Group', it: 'Gruppo' },
-    },
-];
-const UserGroups = ({ user }) => {
-    const locale = useLocale();
-    const apiClient = useAPIClient();
-    const queryClient = useQueryClient();
-    const { data: groups } = useGroups(apiClient);
-    const { data: userGroups } = useUserGroups(user?.id, apiClient);
-    const { mutate: addUserToGroup } = useAddUserToGroup(queryClient, apiClient);
-    const { mutate: removeUserFromGroup } = useRemoveUserFromGroup(queryClient, apiClient);
-    const [openAddGroupDialog, setOpenAddGroupDialog] = useState(false);
-    const [openConfirmationDialog, setOpenConfirmationDialog] = useState(false);
-    const [deleteId, setDeleteId] = useState();
-    return (<>
-      {userGroups && userGroups.length > 0 && (<Box maxWidth='sm'>
-          <TableContainer>
-            <Table size='small'>
-              <TableHead>
-                <TableRow>
-                  {userGroupsTableColumns.map((col) => (<TableCell key={col.id} align={col.align || 'inherit'}>
-                      {isStringTranslation(col.label)
-                    ? col.label[locale]
-                    : col.label}
-                    </TableCell>))}
-                  <TableCell padding='none'>{''}</TableCell>
-                </TableRow>
-              </TableHead>
-              <TableBody>
-                {userGroups?.map((group, rowIdx) => (<TableRow key={rowIdx}>
-                    <TableCell>{group.name}</TableCell>
-                    <TableCell padding='none' align='right'>
-                      <IconButton size='small' onClick={(evt) => {
-                    evt.stopPropagation();
-                    setOpenConfirmationDialog(true);
-                    setDeleteId(group.id);
-                }}>
-                        <DeleteIcon />
-                      </IconButton>
-                    </TableCell>
-                  </TableRow>))}
-              </TableBody>
-            </Table>
-          </TableContainer>
-        </Box>)}
-      <Button variant='outlined' startIcon={<AddIcon />} onClick={() => setOpenAddGroupDialog(true)} sx={{ marginTop: 2 }}>
-        {usersTranslations.addGroup[locale]}
-      </Button>
-      <AddItemDialog open={openAddGroupDialog} onClose={() => setOpenAddGroupDialog(false)} onConfirm={(value) => {
-            if (value) {
-                addUserToGroup({ userId: user.id, groupId: value?.value });
-            }
-        }} title={usersTranslations.addGroup} options={groups?.map((group) => ({
-            value: group.id,
-            label: group.name,
-        }))}/>
-      <DeleteConfirmationDialog open={openConfirmationDialog} onClose={() => setOpenConfirmationDialog(false)} onConfirm={() => deleteId
-            ? removeUserFromGroup({ userId: user.id, groupId: deleteId })
-            : {}}/>
-    </>);
-};
-export default UserGroups;

package/lib/components/users/Users.jsx

@@ -1,99 +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 = [] }) => {
-    const locale = useLocale();
-    const apiClient = useAPI(apiUrl);
-    const queryClient = useQueryClient();
-    const { data: users } = useUsers(apiClient);
-    const { mutate: deleteUser } = useDeleteUser(queryClient, apiClient);
-    const [searchString, setSearchString] = useState('');
-    const [filteredUsers, setFilteredUsers] = useState();
-    const [selectedUser, setSelectedUser] = useState();
-    const [openCreateUserDialog, setOpenCreateUserDialog] = useState(false);
-    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]);
-    const handleDelete = (id) => {
-        deleteUser(id);
-        setSelectedUser(undefined);
-    };
-    return (<APIClientProvider baseURL={apiUrl}>
-      <Box sx={{
-            flexGrow: 1,
-            maxWidth: '100%',
-            overflowX: 'hidden',
-            paddingTop: 3,
-            paddingLeft: 3,
-            paddingRight: 3,
-        }}>
-        {!selectedUser && (<>
-            <Grid container spacing={2} sx={{ marginBottom: 2 }}>
-              <Grid item>
-                <SearchField placeholder={usersTranslations.search[locale]} onSearch={(value) => setSearchString(value)}/>
-              </Grid>
-              <Grid item>
-                <Button variant='contained' startIcon={<PersonAddIcon />} onClick={() => {
-                setOpenCreateUserDialog(true);
-                setSelectedUser(undefined);
-            }}>
-                  {usersTranslations.new[locale]}
-                </Button>
-              </Grid>
-            </Grid>
-            <UsersTable users={filteredUsers} selectedUser={selectedUser} setSelectedUser={(user) => {
-                setSelectedUser(user);
-            }} onDelete={handleDelete}/>
-          </>)}
-        {selectedUser && (<Box sx={{
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'flex-start',
-                width: '100%',
-            }}>
-            <Box sx={{
-                display: 'flex',
-                flexDirection: 'row',
-                alignItems: 'center',
-            }}>
-              <IconButton aria-label='delete' color='primary' onClick={() => setSelectedUser(undefined)} sx={{ mr: 2 }}>
-                <ArrowBackIcon />
-              </IconButton>
-              <Link underline='none' href='#' onClick={() => setSelectedUser(undefined)}>
-                {usersTranslations.title[locale]}
-              </Link>
-              <KeyboardArrowRightIcon />
-              {selectedUser.username}
-            </Box>
-            <UserTabs user={selectedUser} additionalTabs={additionalTabs}/>
-          </Box>)}
-        <CreateUserDialog open={openCreateUserDialog} onClose={() => {
-            setOpenCreateUserDialog(false);
-        }}/>
-      </Box>
-    </APIClientProvider>);
-};
-export default Users;

package/lib/components/users/UsersTable.jsx

@@ -1,76 +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, }) => {
-    const locale = useLocale();
-    const muiTheme = useTheme();
-    const [openConfirmationDialog, setOpenConfirmationDialog] = useState(false);
-    const [deleteId, setDeleteId] = useState();
-    return (<>
-      <TableContainer>
-        <Table size='small'>
-          <TableHead>
-            <TableRow>
-              {usersTableColumns.map((col) => (<TableCell key={col.id} align={col.align || 'inherit'}>
-                  {isStringTranslation(col.label)
-                ? col.label[locale]
-                : col.label}
-                </TableCell>))}
-              <TableCell padding='none'>{''}</TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {users.map((user, rowIdx) => (<TableRow key={rowIdx} onClick={() => setSelectedUser(user)} sx={{
-                cursor: 'pointer',
-                background: selectedUser && user.id === selectedUser.id
-                    ? muiTheme.palette.primary.light
-                    : undefined,
-            }}>
-                <TableCell>{user.firstName}</TableCell>
-                <TableCell>{user.lastName}</TableCell>
-                <TableCell>{user.username}</TableCell>
-                <TableCell>{user.email}</TableCell>
-                <TableCell>
-                  {user.enabled ? <CheckIcon /> : <CloseIcon />}
-                </TableCell>
-                <TableCell padding='none' align='right'>
-                  <IconButton size='small' onClick={(evt) => {
-                evt.stopPropagation();
-                setOpenConfirmationDialog(true);
-                setDeleteId(user.id);
-            }}>
-                    <DeleteIcon />
-                  </IconButton>
-                </TableCell>
-              </TableRow>))}
-          </TableBody>
-        </Table>
-      </TableContainer>
-      <DeleteConfirmationDialog open={openConfirmationDialog} onClose={() => setOpenConfirmationDialog(false)} onConfirm={() => (deleteId ? onDelete(deleteId) : {})}/>
-    </>);
-};
-export default UsersTable;

package/lib/components/users/UsersTabs.jsx

@@ -1,36 +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 = [] }) => {
-    const locale = useLocale();
-    const [selectedTab, setSelectedTab] = useState('DETAILS');
-    return (<Box sx={{
-            flexGrow: 1,
-            maxWidth: '100%',
-            overflowX: 'hidden',
-            alignSelf: 'stretch',
-        }}>
-      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
-        <Tabs value={selectedTab} onChange={(_evt, newValue) => {
-            setSelectedTab(newValue);
-        }} aria-label='basic tabs example'>
-          <Tab label={usersTranslations.details[locale]} value='DETAILS'/>
-          <Tab label={usersTranslations.userGroups[locale]} value='USER_GROUPS'/>
-          <Tab label={usersTranslations.credentials[locale]} value='CREDENTIALS'/>
-          {additionalTabs.map((tab, index) => (<Tab key={`tab${index}`} label={tab.title[locale]} value={`ADDITIONAL_TAB_${index}`}/>))}
-        </Tabs>
-      </Box>
-      <Box sx={{ p: 1 }}>
-        {selectedTab === 'DETAILS' && <UserDetails user={user}/>}
-        {selectedTab === 'USER_GROUPS' && <UserGroups user={user}/>}
-        {selectedTab === 'CREDENTIALS' && <UserCredentials user={user}/>}
-        {additionalTabs.map((tab, index) => selectedTab === `ADDITIONAL_TAB_${index}` && (<tab.component key={`tab${index}`} user={user}/>))}
-      </Box>
-    </Box>);
-};
-export default UserTabs;