@deix/rossini-identity-management 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/app/[locale]/groups/{page.js → page.jsx} +1 -1
- package/lib/app/[locale]/{layout.js → layout.jsx} +4 -3
- package/lib/app/[locale]/users/{page.js → page.jsx} +1 -1
- package/lib/app/{layout.js → layout.jsx} +7 -3
- package/lib/components/AddItemDialog.jsx +50 -0
- package/lib/components/DeleteConfirmationDialog.jsx +44 -0
- package/lib/components/SearchField.jsx +18 -0
- package/lib/components/groups/CreateGroupDialog.d.ts.map +1 -1
- package/lib/components/groups/{CreateGroupDialog.js → CreateGroupDialog.jsx} +9 -8
- package/lib/components/groups/GroupDetails.d.ts.map +1 -1
- package/lib/components/groups/{GroupDetails.js → GroupDetails.jsx} +5 -6
- package/lib/components/groups/GroupForm.jsx +46 -0
- package/lib/components/groups/GroupTabs.d.ts.map +1 -1
- package/lib/components/groups/GroupTabs.jsx +33 -0
- package/lib/components/groups/GroupUsers.d.ts.map +1 -1
- package/lib/components/groups/GroupUsers.jsx +88 -0
- package/lib/components/groups/Groups.d.ts.map +1 -1
- package/lib/components/groups/{Groups.js → Groups.jsx} +45 -30
- package/lib/components/groups/GroupsTable.jsx +55 -0
- package/lib/components/users/CreateUserDialog.d.ts.map +1 -1
- package/lib/components/users/{CreateUserDialog.js → CreateUserDialog.jsx} +9 -8
- package/lib/components/users/UserCredentials.d.ts.map +1 -1
- package/lib/components/users/{UserCredentials.js → UserCredentials.jsx} +8 -6
- package/lib/components/users/UserDetails.d.ts.map +1 -1
- package/lib/components/users/{UserDetails.js → UserDetails.jsx} +5 -6
- package/lib/components/users/UserForm.jsx +75 -0
- package/lib/components/users/UserGroups.d.ts.map +1 -1
- package/lib/components/users/UserGroups.jsx +78 -0
- package/lib/components/users/Users.d.ts.map +1 -1
- package/lib/components/users/{Users.js → Users.jsx} +45 -30
- package/lib/components/users/UsersTable.jsx +76 -0
- package/lib/components/users/UsersTabs.d.ts.map +1 -1
- package/lib/components/users/UsersTabs.jsx +36 -0
- package/lib/config/{index.js → index.jsx} +3 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/lib/utils/hooks/useAPIClient.d.ts +10 -0
- package/lib/utils/hooks/useAPIClient.d.ts.map +1 -0
- package/lib/utils/hooks/useAPIClient.jsx +18 -0
- package/package.json +1 -1
- package/lib/components/AddItemDialog.js +0 -45
- package/lib/components/DeleteConfirmationDialog.js +0 -35
- package/lib/components/SearchField.js +0 -16
- package/lib/components/groups/GroupForm.js +0 -38
- package/lib/components/groups/GroupTabs.js +0 -29
- package/lib/components/groups/GroupUsers.js +0 -74
- package/lib/components/groups/GroupsTable.js +0 -43
- package/lib/components/users/UserForm.js +0 -62
- package/lib/components/users/UserGroups.js +0 -64
- package/lib/components/users/UsersTable.js +0 -62
- package/lib/components/users/UsersTabs.js +0 -32
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { AxiosInstance } from 'axios';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
interface APIClientProviderProps {
|
|
4
|
+
baseURL: string;
|
|
5
|
+
children: React.ReactNode;
|
|
6
|
+
}
|
|
7
|
+
export declare const APIClientProvider: ({ baseURL, children, }: APIClientProviderProps) => React.JSX.Element;
|
|
8
|
+
export declare const useAPIClient: () => AxiosInstance;
|
|
9
|
+
export {};
|
|
10
|
+
//# sourceMappingURL=useAPIClient.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useAPIClient.d.ts","sourceRoot":"","sources":["../../../src/utils/hooks/useAPIClient.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAoC,MAAM,OAAO,CAAC;AAUzD,UAAU,sBAAsB;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,iBAAiB,2BAG3B,sBAAsB,sBAaxB,CAAC;AAEF,eAAO,MAAM,YAAY,qBAA+B,CAAC"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import axios from 'axios';
|
|
2
|
+
import React, { createContext, useContext } from 'react';
|
|
3
|
+
const APIContext = createContext(axios.create({
|
|
4
|
+
headers: {
|
|
5
|
+
Accept: 'application/json',
|
|
6
|
+
},
|
|
7
|
+
}));
|
|
8
|
+
export const APIClientProvider = ({ baseURL, children, }) => {
|
|
9
|
+
return (<APIContext.Provider value={axios.create({
|
|
10
|
+
baseURL,
|
|
11
|
+
headers: {
|
|
12
|
+
Accept: 'application/json',
|
|
13
|
+
},
|
|
14
|
+
})}>
|
|
15
|
+
{children}
|
|
16
|
+
</APIContext.Provider>);
|
|
17
|
+
};
|
|
18
|
+
export const useAPIClient = () => useContext(APIContext);
|
package/package.json
CHANGED
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { Autocomplete, Button, Dialog, DialogActions, DialogContent, DialogTitle, TextField, } from '@mui/material';
|
|
3
|
-
import { useLocale } from '@deix/rossini-core';
|
|
4
|
-
import { useEffect, useState } from 'react';
|
|
5
|
-
const translations = {
|
|
6
|
-
ok: {
|
|
7
|
-
en: 'Add',
|
|
8
|
-
it: 'Aggiungi',
|
|
9
|
-
},
|
|
10
|
-
cancel: {
|
|
11
|
-
en: 'Cancel',
|
|
12
|
-
it: 'Annulla',
|
|
13
|
-
},
|
|
14
|
-
search: {
|
|
15
|
-
en: 'Search...',
|
|
16
|
-
it: 'Cerca...',
|
|
17
|
-
},
|
|
18
|
-
};
|
|
19
|
-
const AddItemDialog = ({ title, options, open, onClose, onConfirm, }) => {
|
|
20
|
-
const locale = useLocale();
|
|
21
|
-
const [value, setValue] = useState(null);
|
|
22
|
-
// Reset the value when the dialog is closed
|
|
23
|
-
useEffect(() => {
|
|
24
|
-
if (!open) {
|
|
25
|
-
setValue(null);
|
|
26
|
-
}
|
|
27
|
-
}, [open]);
|
|
28
|
-
return (React.createElement(Dialog, { open: open, fullWidth: true, maxWidth: 'sm', onClose: onClose },
|
|
29
|
-
React.createElement(DialogTitle, null, title[locale]),
|
|
30
|
-
React.createElement(DialogContent, null,
|
|
31
|
-
React.createElement(Autocomplete
|
|
32
|
-
// multiple
|
|
33
|
-
, {
|
|
34
|
-
// multiple
|
|
35
|
-
options: options ?? [], getOptionLabel: (option) => option.label, getOptionKey: (option) => option.value, isOptionEqualToValue: (option, value) => option.value === value.value, renderInput: (params) => (React.createElement(TextField, { ...params, label: translations.search[locale], placeholder: '' })), onChange: (event, newValue) => {
|
|
36
|
-
setValue(newValue);
|
|
37
|
-
}, value: value })),
|
|
38
|
-
React.createElement(DialogActions, null,
|
|
39
|
-
React.createElement(Button, { size: 'small', variant: 'outlined', onClick: onClose }, translations.cancel[locale]),
|
|
40
|
-
React.createElement(Button, { variant: 'contained', onClick: () => {
|
|
41
|
-
onConfirm(value);
|
|
42
|
-
onClose();
|
|
43
|
-
} }, translations.ok[locale]))));
|
|
44
|
-
};
|
|
45
|
-
export default AddItemDialog;
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography, } from '@mui/material';
|
|
3
|
-
import { useLocale } from '@deix/rossini-core';
|
|
4
|
-
const translations = {
|
|
5
|
-
title: {
|
|
6
|
-
en: 'Delete item?',
|
|
7
|
-
it: 'Cancellare elemento?',
|
|
8
|
-
},
|
|
9
|
-
message: {
|
|
10
|
-
en: 'This is a permanent action',
|
|
11
|
-
it: "Questa è un'azione permanente",
|
|
12
|
-
},
|
|
13
|
-
yes: {
|
|
14
|
-
en: 'Yes',
|
|
15
|
-
it: 'Si',
|
|
16
|
-
},
|
|
17
|
-
no: {
|
|
18
|
-
en: 'No',
|
|
19
|
-
it: 'No',
|
|
20
|
-
},
|
|
21
|
-
};
|
|
22
|
-
const DeleteConfirmationDialog = ({ open, onClose, onConfirm, }) => {
|
|
23
|
-
const locale = useLocale();
|
|
24
|
-
return (React.createElement(Dialog, { open: open, fullWidth: true, maxWidth: 'sm', onClose: onClose },
|
|
25
|
-
React.createElement(DialogTitle, null, translations.title[locale]),
|
|
26
|
-
React.createElement(DialogContent, null,
|
|
27
|
-
React.createElement(Typography, { variant: 'caption' }, translations.message[locale])),
|
|
28
|
-
React.createElement(DialogActions, null,
|
|
29
|
-
React.createElement(Button, { size: 'small', variant: 'outlined', onClick: onClose }, translations.no[locale]),
|
|
30
|
-
React.createElement(Button, { size: 'small', variant: 'contained', onClick: () => {
|
|
31
|
-
onConfirm();
|
|
32
|
-
onClose();
|
|
33
|
-
} }, translations.yes[locale]))));
|
|
34
|
-
};
|
|
35
|
-
export default DeleteConfirmationDialog;
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import SearchIcon from '@mui/icons-material/Search';
|
|
3
|
-
import { IconButton, TextField, } from '@mui/material';
|
|
4
|
-
import { useState } from 'react';
|
|
5
|
-
const SearchField = ({ placeholder = 'Search...', onSearch, ...props }) => {
|
|
6
|
-
const [value, setValue] = useState('');
|
|
7
|
-
return (React.createElement(React.Fragment, null,
|
|
8
|
-
React.createElement(TextField, { size: 'small', placeholder: placeholder, value: value, onChange: (evt) => {
|
|
9
|
-
setValue(evt.target.value);
|
|
10
|
-
onSearch(evt.target.value);
|
|
11
|
-
}, ...props, InputProps: {
|
|
12
|
-
endAdornment: (React.createElement(IconButton, { size: 'small', onClick: () => onSearch(value) },
|
|
13
|
-
React.createElement(SearchIcon, null))),
|
|
14
|
-
} })));
|
|
15
|
-
};
|
|
16
|
-
export default SearchField;
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { useLocale } from '@deix/rossini-core';
|
|
3
|
-
import { Button, Grid, TextField } from '@mui/material';
|
|
4
|
-
import { Controller, useForm } from 'react-hook-form';
|
|
5
|
-
import { useEffect } from 'react';
|
|
6
|
-
import groupsTranslations from '../../lang/groups';
|
|
7
|
-
const GroupForm = ({ group, onCancel, onSave, mode }) => {
|
|
8
|
-
const locale = useLocale();
|
|
9
|
-
const { control, handleSubmit, setValue } = useForm({
|
|
10
|
-
defaultValues: {
|
|
11
|
-
id: group?.id,
|
|
12
|
-
name: group?.name,
|
|
13
|
-
},
|
|
14
|
-
});
|
|
15
|
-
useEffect(() => {
|
|
16
|
-
if (group) {
|
|
17
|
-
setValue('id', group?.id);
|
|
18
|
-
setValue('name', group?.name);
|
|
19
|
-
}
|
|
20
|
-
}, [group, setValue]);
|
|
21
|
-
const onSubmit = (data) => {
|
|
22
|
-
onSave(data);
|
|
23
|
-
};
|
|
24
|
-
return (React.createElement("form", { onSubmit: (event) => void handleSubmit(onSubmit)(event) },
|
|
25
|
-
React.createElement(Grid, { container: true, spacing: 2, sx: { mt: 2, maxWidth: 'sm' }, justifyContent: 'stretch' },
|
|
26
|
-
React.createElement(Grid, { item: true, xs: 12 },
|
|
27
|
-
React.createElement(Controller, { name: 'name', control: control, render: ({ field }) => (React.createElement(TextField, { size: 'small', fullWidth: true, label: groupsTranslations.name[locale], sx: { flexShrink: 0 }, ...field })) })),
|
|
28
|
-
React.createElement(Grid, { item: true, sx: {
|
|
29
|
-
mt: 2,
|
|
30
|
-
display: 'flex',
|
|
31
|
-
justifyContent: 'flex-end',
|
|
32
|
-
gap: 2,
|
|
33
|
-
width: '100%',
|
|
34
|
-
} },
|
|
35
|
-
mode === 'create' && (React.createElement(Button, { variant: 'outlined', onClick: onCancel }, groupsTranslations.cancel[locale])),
|
|
36
|
-
React.createElement(Button, { variant: 'contained', type: 'submit' }, groupsTranslations.save[locale])))));
|
|
37
|
-
};
|
|
38
|
-
export default GroupForm;
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
import React, { useState } from 'react';
|
|
3
|
-
import { Box, Tab, Tabs } from '@mui/material';
|
|
4
|
-
import { useLocale } from '@deix/rossini-core';
|
|
5
|
-
import GroupDetails from './GroupDetails';
|
|
6
|
-
import groupsTranslations from '../../lang/groups';
|
|
7
|
-
import GroupUsers from './GroupUsers';
|
|
8
|
-
const GroupTabs = ({ group, additionalTabs = [] }) => {
|
|
9
|
-
const locale = useLocale();
|
|
10
|
-
const [selectedTab, setSelectedTab] = useState('DETAILS');
|
|
11
|
-
return (React.createElement(Box, { sx: {
|
|
12
|
-
flexGrow: 1,
|
|
13
|
-
maxWidth: '100%',
|
|
14
|
-
overflowX: 'hidden',
|
|
15
|
-
alignSelf: 'stretch',
|
|
16
|
-
} },
|
|
17
|
-
React.createElement(Box, { sx: { borderBottom: 1, borderColor: 'divider' } },
|
|
18
|
-
React.createElement(Tabs, { value: selectedTab, onChange: (_evt, newValue) => {
|
|
19
|
-
setSelectedTab(newValue);
|
|
20
|
-
}, "aria-label": 'basic tabs example' },
|
|
21
|
-
React.createElement(Tab, { label: groupsTranslations.details[locale], value: 'DETAILS' }),
|
|
22
|
-
React.createElement(Tab, { label: groupsTranslations.users[locale], value: 'USERS' }),
|
|
23
|
-
additionalTabs.map((tab, index) => (React.createElement(Tab, { label: tab.title[locale], value: `ADDITIONAL_TAB_${index}` }))))),
|
|
24
|
-
React.createElement(Box, { sx: { p: 1 } },
|
|
25
|
-
selectedTab === 'DETAILS' && React.createElement(GroupDetails, { group: group }),
|
|
26
|
-
selectedTab === 'USERS' && React.createElement(GroupUsers, { group: group }),
|
|
27
|
-
additionalTabs.map((tab, index) => selectedTab === `ADDITIONAL_TAB_${index}` && (React.createElement(tab.component, { group: group }))))));
|
|
28
|
-
};
|
|
29
|
-
export default GroupTabs;
|
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { Box, Button, IconButton, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, } from '@mui/material';
|
|
3
|
-
import AddIcon from '@mui/icons-material/Add';
|
|
4
|
-
import DeleteIcon from '@mui/icons-material/Delete';
|
|
5
|
-
import { isStringTranslation, useAPI, useLocale } from '@deix/rossini-core';
|
|
6
|
-
import { useConfig } from '../../config';
|
|
7
|
-
import { useAddUserToGroup, useRemoveUserFromGroup, useUsers, } from '../../utils/hooks/users';
|
|
8
|
-
import { useState } from 'react';
|
|
9
|
-
import DeleteConfirmationDialog from '../DeleteConfirmationDialog';
|
|
10
|
-
import { useQueryClient } from '@tanstack/react-query';
|
|
11
|
-
import AddItemDialog from '../AddItemDialog';
|
|
12
|
-
import { useGroupUsers } from '../../utils/hooks/groups';
|
|
13
|
-
import groupsTranslations from '../../lang/groups';
|
|
14
|
-
const groupUsersTableColumns = [
|
|
15
|
-
{
|
|
16
|
-
id: 'username',
|
|
17
|
-
label: { en: 'Username', it: 'Username' },
|
|
18
|
-
},
|
|
19
|
-
{
|
|
20
|
-
id: 'firstName',
|
|
21
|
-
label: { en: 'First name', it: 'Nome' },
|
|
22
|
-
},
|
|
23
|
-
{
|
|
24
|
-
id: 'lastName',
|
|
25
|
-
label: { en: 'Last name', it: 'Cognome' },
|
|
26
|
-
},
|
|
27
|
-
];
|
|
28
|
-
const GroupUsers = ({ group }) => {
|
|
29
|
-
const locale = useLocale();
|
|
30
|
-
const config = useConfig();
|
|
31
|
-
const apiClient = useAPI(config.generalProperties.apiURL);
|
|
32
|
-
const queryClient = useQueryClient();
|
|
33
|
-
const { data: users } = useUsers(apiClient);
|
|
34
|
-
const { data: groupUsers } = useGroupUsers(group?.id, apiClient);
|
|
35
|
-
const { mutate: addUserToGroup } = useAddUserToGroup(queryClient, apiClient);
|
|
36
|
-
const { mutate: removeUserFromGroup } = useRemoveUserFromGroup(queryClient, apiClient);
|
|
37
|
-
const [openAddUserDialog, setOpenAddUserDialog] = useState(false);
|
|
38
|
-
const [openConfirmationDialog, setOpenConfirmationDialog] = useState(false);
|
|
39
|
-
const [deleteId, setDeleteId] = useState();
|
|
40
|
-
return (React.createElement(React.Fragment, null,
|
|
41
|
-
groupUsers && groupUsers.length > 0 && (React.createElement(Box, { maxWidth: 'md' },
|
|
42
|
-
React.createElement(TableContainer, null,
|
|
43
|
-
React.createElement(Table, { size: 'small' },
|
|
44
|
-
React.createElement(TableHead, null,
|
|
45
|
-
React.createElement(TableRow, null,
|
|
46
|
-
groupUsersTableColumns.map((col) => (React.createElement(TableCell, { key: col.id, align: col.align || 'inherit' }, isStringTranslation(col.label)
|
|
47
|
-
? col.label[locale]
|
|
48
|
-
: col.label))),
|
|
49
|
-
React.createElement(TableCell, { padding: 'none' }, ''))),
|
|
50
|
-
React.createElement(TableBody, null, groupUsers?.map((user, rowIdx) => (React.createElement(TableRow, { key: rowIdx },
|
|
51
|
-
React.createElement(TableCell, null, user.username),
|
|
52
|
-
React.createElement(TableCell, null, user.firstName),
|
|
53
|
-
React.createElement(TableCell, null, user.lastName),
|
|
54
|
-
React.createElement(TableCell, { padding: 'none', align: 'right' },
|
|
55
|
-
React.createElement(IconButton, { size: 'small', onClick: (evt) => {
|
|
56
|
-
evt.stopPropagation();
|
|
57
|
-
setOpenConfirmationDialog(true);
|
|
58
|
-
setDeleteId(user.id);
|
|
59
|
-
} },
|
|
60
|
-
React.createElement(DeleteIcon, null))))))))))),
|
|
61
|
-
React.createElement(Button, { variant: 'outlined', startIcon: React.createElement(AddIcon, null), onClick: () => setOpenAddUserDialog(true), sx: { marginTop: 2 } }, groupsTranslations.addUser[locale]),
|
|
62
|
-
React.createElement(AddItemDialog, { open: openAddUserDialog, onClose: () => setOpenAddUserDialog(false), onConfirm: (value) => {
|
|
63
|
-
if (value) {
|
|
64
|
-
addUserToGroup({ userId: value?.value, groupId: group.id });
|
|
65
|
-
}
|
|
66
|
-
}, title: groupsTranslations.addUser, options: users?.map((user) => ({
|
|
67
|
-
value: user.id,
|
|
68
|
-
label: user.username || '',
|
|
69
|
-
})) }),
|
|
70
|
-
React.createElement(DeleteConfirmationDialog, { open: openConfirmationDialog, onClose: () => setOpenConfirmationDialog(false), onConfirm: () => deleteId
|
|
71
|
-
? removeUserFromGroup({ userId: deleteId, groupId: group.id })
|
|
72
|
-
: {} })));
|
|
73
|
-
};
|
|
74
|
-
export default GroupUsers;
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { isStringTranslation, useLocale } from '@deix/rossini-core';
|
|
3
|
-
import DeleteIcon from '@mui/icons-material/Delete';
|
|
4
|
-
import { IconButton, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, useTheme, } from '@mui/material';
|
|
5
|
-
import { useState } from 'react';
|
|
6
|
-
import DeleteConfirmationDialog from '../DeleteConfirmationDialog';
|
|
7
|
-
const groupsTableColumns = [
|
|
8
|
-
{
|
|
9
|
-
id: 'name',
|
|
10
|
-
label: { en: 'Name', it: 'Nome' },
|
|
11
|
-
},
|
|
12
|
-
];
|
|
13
|
-
const GroupsTable = ({ groups = [], selectedGroup, setSelectedGroup, onDelete, }) => {
|
|
14
|
-
const locale = useLocale();
|
|
15
|
-
const muiTheme = useTheme();
|
|
16
|
-
const [openConfirmationDialog, setOpenConfirmationDialog] = useState(false);
|
|
17
|
-
const [deleteId, setDeleteId] = useState();
|
|
18
|
-
return (React.createElement(React.Fragment, null,
|
|
19
|
-
React.createElement(TableContainer, null,
|
|
20
|
-
React.createElement(Table, { size: 'small' },
|
|
21
|
-
React.createElement(TableHead, null,
|
|
22
|
-
React.createElement(TableRow, null,
|
|
23
|
-
groupsTableColumns.map((col) => (React.createElement(TableCell, { key: col.id, align: col.align || 'inherit' }, isStringTranslation(col.label)
|
|
24
|
-
? col.label[locale]
|
|
25
|
-
: col.label))),
|
|
26
|
-
React.createElement(TableCell, { padding: 'none' }, ''))),
|
|
27
|
-
React.createElement(TableBody, null, groups.map((group, rowIdx) => (React.createElement(TableRow, { key: rowIdx, onClick: () => setSelectedGroup(group), sx: {
|
|
28
|
-
cursor: 'pointer',
|
|
29
|
-
background: selectedGroup && group.id === selectedGroup.id
|
|
30
|
-
? muiTheme.palette.primary.light
|
|
31
|
-
: undefined,
|
|
32
|
-
} },
|
|
33
|
-
React.createElement(TableCell, null, group.name),
|
|
34
|
-
React.createElement(TableCell, { padding: 'none', align: 'right' },
|
|
35
|
-
React.createElement(IconButton, { size: 'small', onClick: (evt) => {
|
|
36
|
-
evt.stopPropagation();
|
|
37
|
-
setOpenConfirmationDialog(true);
|
|
38
|
-
setDeleteId(group.id);
|
|
39
|
-
} },
|
|
40
|
-
React.createElement(DeleteIcon, null))))))))),
|
|
41
|
-
React.createElement(DeleteConfirmationDialog, { open: openConfirmationDialog, onClose: () => setOpenConfirmationDialog(false), onConfirm: () => (deleteId ? onDelete(deleteId) : {}) })));
|
|
42
|
-
};
|
|
43
|
-
export default GroupsTable;
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { useLocale } from '@deix/rossini-core';
|
|
3
|
-
import { Button, FormControlLabel, Grid, Switch, TextField, } from '@mui/material';
|
|
4
|
-
import { Controller, useForm } from 'react-hook-form';
|
|
5
|
-
import { useEffect } from 'react';
|
|
6
|
-
import usersTranslations from '../../lang/users';
|
|
7
|
-
const UserForm = ({ user, onSave, onCancel, mode = 'create', }) => {
|
|
8
|
-
const locale = useLocale();
|
|
9
|
-
const { control, handleSubmit, setValue } = useForm({
|
|
10
|
-
defaultValues: {
|
|
11
|
-
id: user?.id || '',
|
|
12
|
-
username: user?.username || '',
|
|
13
|
-
firstName: user?.firstName || '',
|
|
14
|
-
lastName: user?.lastName || '',
|
|
15
|
-
email: user?.email || '',
|
|
16
|
-
emailVerified: user?.emailVerified || true,
|
|
17
|
-
enabled: user?.enabled || true,
|
|
18
|
-
sendEmailOnCreation: true,
|
|
19
|
-
},
|
|
20
|
-
});
|
|
21
|
-
useEffect(() => {
|
|
22
|
-
if (user) {
|
|
23
|
-
setValue('id', user?.id);
|
|
24
|
-
setValue('username', user?.username);
|
|
25
|
-
setValue('firstName', user?.firstName);
|
|
26
|
-
setValue('lastName', user?.lastName);
|
|
27
|
-
setValue('email', user?.email);
|
|
28
|
-
setValue('emailVerified', user?.emailVerified);
|
|
29
|
-
setValue('enabled', user?.enabled);
|
|
30
|
-
setValue('groups', user?.groups);
|
|
31
|
-
// The user already exists, we don't want to send an email
|
|
32
|
-
setValue('sendEmailOnCreation', false);
|
|
33
|
-
}
|
|
34
|
-
}, [user, setValue]);
|
|
35
|
-
const onSubmit = (data) => {
|
|
36
|
-
onSave(data);
|
|
37
|
-
};
|
|
38
|
-
return (React.createElement("form", { onSubmit: (event) => void handleSubmit(onSubmit)(event) },
|
|
39
|
-
React.createElement(Grid, { container: true, spacing: 2, sx: { mt: 2, maxWidth: 'sm' }, justifyContent: 'stretch' },
|
|
40
|
-
React.createElement(Grid, { item: true, xs: 12 },
|
|
41
|
-
React.createElement(Controller, { name: 'username', control: control, render: ({ field }) => (React.createElement(TextField, { size: 'small', fullWidth: true, label: usersTranslations.username[locale], disabled: mode === 'modify', sx: { flexShrink: 0 }, ...field })) })),
|
|
42
|
-
React.createElement(Grid, { item: true, xs: 12 },
|
|
43
|
-
React.createElement(Controller, { name: 'firstName', control: control, render: ({ field }) => (React.createElement(TextField, { size: 'small', fullWidth: true, label: usersTranslations.firstName[locale], sx: { flexShrink: 0 }, ...field })) })),
|
|
44
|
-
React.createElement(Grid, { item: true, xs: 12 },
|
|
45
|
-
React.createElement(Controller, { name: 'lastName', control: control, render: ({ field }) => (React.createElement(TextField, { size: 'small', fullWidth: true, label: usersTranslations.lastName[locale], sx: { flexShrink: 0 }, ...field })) })),
|
|
46
|
-
React.createElement(Grid, { item: true, xs: 12 },
|
|
47
|
-
React.createElement(Controller, { name: 'email', control: control, render: ({ field }) => (React.createElement(TextField, { size: 'small', fullWidth: true, label: usersTranslations.email[locale], sx: { flexShrink: 0 }, ...field })) })),
|
|
48
|
-
React.createElement(Grid, { item: true, xs: 12 },
|
|
49
|
-
React.createElement(Controller, { name: 'enabled', control: control, render: ({ field }) => (React.createElement(FormControlLabel, { sx: { ml: 1 }, control: React.createElement(Switch, { checked: field.value, size: 'small', ...field }), label: usersTranslations.enabled[locale] })) })),
|
|
50
|
-
mode === 'create' && (React.createElement(Grid, { item: true, xs: 12 },
|
|
51
|
-
React.createElement(Controller, { name: 'sendEmailOnCreation', control: control, render: ({ field }) => (React.createElement(FormControlLabel, { sx: { ml: 1 }, control: React.createElement(Switch, { checked: field.value, size: 'small', ...field }), label: usersTranslations.sendResetPasswordEmail[locale] })) }))),
|
|
52
|
-
React.createElement(Grid, { item: true, sx: {
|
|
53
|
-
mt: 2,
|
|
54
|
-
display: 'flex',
|
|
55
|
-
justifyContent: 'flex-end',
|
|
56
|
-
gap: 2,
|
|
57
|
-
width: '100%',
|
|
58
|
-
} },
|
|
59
|
-
mode === 'create' && (React.createElement(Button, { variant: 'outlined', onClick: onCancel }, usersTranslations.cancel[locale])),
|
|
60
|
-
React.createElement(Button, { variant: 'contained', type: 'submit' }, usersTranslations.save[locale])))));
|
|
61
|
-
};
|
|
62
|
-
export default UserForm;
|
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { Box, Button, IconButton, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, } from '@mui/material';
|
|
3
|
-
import AddIcon from '@mui/icons-material/Add';
|
|
4
|
-
import DeleteIcon from '@mui/icons-material/Delete';
|
|
5
|
-
import { isStringTranslation, useAPI, useLocale } from '@deix/rossini-core';
|
|
6
|
-
import { useConfig } from '../../config';
|
|
7
|
-
import { useAddUserToGroup, useRemoveUserFromGroup, useUserGroups, } from '../../utils/hooks/users';
|
|
8
|
-
import { useState } from 'react';
|
|
9
|
-
import DeleteConfirmationDialog from '../DeleteConfirmationDialog';
|
|
10
|
-
import { useQueryClient } from '@tanstack/react-query';
|
|
11
|
-
import usersTranslations from '../../lang/users';
|
|
12
|
-
import AddItemDialog from '../AddItemDialog';
|
|
13
|
-
import { useGroups } from '../../utils/hooks/groups';
|
|
14
|
-
const userGroupsTableColumns = [
|
|
15
|
-
{
|
|
16
|
-
id: 'name',
|
|
17
|
-
label: { en: 'Group', it: 'Gruppo' },
|
|
18
|
-
},
|
|
19
|
-
];
|
|
20
|
-
const UserGroups = ({ user }) => {
|
|
21
|
-
const locale = useLocale();
|
|
22
|
-
const config = useConfig();
|
|
23
|
-
const apiClient = useAPI(config.generalProperties.apiURL);
|
|
24
|
-
const queryClient = useQueryClient();
|
|
25
|
-
const { data: groups } = useGroups(apiClient);
|
|
26
|
-
const { data: userGroups } = useUserGroups(user?.id, apiClient);
|
|
27
|
-
const { mutate: addUserToGroup } = useAddUserToGroup(queryClient, apiClient);
|
|
28
|
-
const { mutate: removeUserFromGroup } = useRemoveUserFromGroup(queryClient, apiClient);
|
|
29
|
-
const [openAddGroupDialog, setOpenAddGroupDialog] = useState(false);
|
|
30
|
-
const [openConfirmationDialog, setOpenConfirmationDialog] = useState(false);
|
|
31
|
-
const [deleteId, setDeleteId] = useState();
|
|
32
|
-
return (React.createElement(React.Fragment, null,
|
|
33
|
-
userGroups && userGroups.length > 0 && (React.createElement(Box, { maxWidth: 'sm' },
|
|
34
|
-
React.createElement(TableContainer, null,
|
|
35
|
-
React.createElement(Table, { size: 'small' },
|
|
36
|
-
React.createElement(TableHead, null,
|
|
37
|
-
React.createElement(TableRow, null,
|
|
38
|
-
userGroupsTableColumns.map((col) => (React.createElement(TableCell, { key: col.id, align: col.align || 'inherit' }, isStringTranslation(col.label)
|
|
39
|
-
? col.label[locale]
|
|
40
|
-
: col.label))),
|
|
41
|
-
React.createElement(TableCell, { padding: 'none' }, ''))),
|
|
42
|
-
React.createElement(TableBody, null, userGroups?.map((group, rowIdx) => (React.createElement(TableRow, { key: rowIdx },
|
|
43
|
-
React.createElement(TableCell, null, group.name),
|
|
44
|
-
React.createElement(TableCell, { padding: 'none', align: 'right' },
|
|
45
|
-
React.createElement(IconButton, { size: 'small', onClick: (evt) => {
|
|
46
|
-
evt.stopPropagation();
|
|
47
|
-
setOpenConfirmationDialog(true);
|
|
48
|
-
setDeleteId(group.id);
|
|
49
|
-
} },
|
|
50
|
-
React.createElement(DeleteIcon, null))))))))))),
|
|
51
|
-
React.createElement(Button, { variant: 'outlined', startIcon: React.createElement(AddIcon, null), onClick: () => setOpenAddGroupDialog(true), sx: { marginTop: 2 } }, usersTranslations.addGroup[locale]),
|
|
52
|
-
React.createElement(AddItemDialog, { open: openAddGroupDialog, onClose: () => setOpenAddGroupDialog(false), onConfirm: (value) => {
|
|
53
|
-
if (value) {
|
|
54
|
-
addUserToGroup({ userId: user.id, groupId: value?.value });
|
|
55
|
-
}
|
|
56
|
-
}, title: usersTranslations.addGroup, options: groups?.map((group) => ({
|
|
57
|
-
value: group.id,
|
|
58
|
-
label: group.name,
|
|
59
|
-
})) }),
|
|
60
|
-
React.createElement(DeleteConfirmationDialog, { open: openConfirmationDialog, onClose: () => setOpenConfirmationDialog(false), onConfirm: () => deleteId
|
|
61
|
-
? removeUserFromGroup({ userId: user.id, groupId: deleteId })
|
|
62
|
-
: {} })));
|
|
63
|
-
};
|
|
64
|
-
export default UserGroups;
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { isStringTranslation, useLocale } from '@deix/rossini-core';
|
|
3
|
-
import CheckIcon from '@mui/icons-material/Check';
|
|
4
|
-
import CloseIcon from '@mui/icons-material/Close';
|
|
5
|
-
import DeleteIcon from '@mui/icons-material/Delete';
|
|
6
|
-
import { IconButton, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, useTheme, } from '@mui/material';
|
|
7
|
-
import { useState } from 'react';
|
|
8
|
-
import DeleteConfirmationDialog from '../DeleteConfirmationDialog';
|
|
9
|
-
const usersTableColumns = [
|
|
10
|
-
{
|
|
11
|
-
id: 'firstName',
|
|
12
|
-
label: { en: 'First Name', it: 'Nome' },
|
|
13
|
-
},
|
|
14
|
-
{
|
|
15
|
-
id: 'lastName',
|
|
16
|
-
label: { en: 'Last Name', it: 'Cognome' },
|
|
17
|
-
},
|
|
18
|
-
{
|
|
19
|
-
id: 'username',
|
|
20
|
-
label: { en: 'Username', it: 'Username' },
|
|
21
|
-
},
|
|
22
|
-
{ id: 'email', label: 'Email' },
|
|
23
|
-
{
|
|
24
|
-
id: 'enabled',
|
|
25
|
-
label: { en: 'Enabled', it: 'Utente Abilitato' },
|
|
26
|
-
},
|
|
27
|
-
];
|
|
28
|
-
const UsersTable = ({ users = [], selectedUser, setSelectedUser, onDelete, }) => {
|
|
29
|
-
const locale = useLocale();
|
|
30
|
-
const muiTheme = useTheme();
|
|
31
|
-
const [openConfirmationDialog, setOpenConfirmationDialog] = useState(false);
|
|
32
|
-
const [deleteId, setDeleteId] = useState();
|
|
33
|
-
return (React.createElement(React.Fragment, null,
|
|
34
|
-
React.createElement(TableContainer, null,
|
|
35
|
-
React.createElement(Table, { size: 'small' },
|
|
36
|
-
React.createElement(TableHead, null,
|
|
37
|
-
React.createElement(TableRow, null,
|
|
38
|
-
usersTableColumns.map((col) => (React.createElement(TableCell, { key: col.id, align: col.align || 'inherit' }, isStringTranslation(col.label)
|
|
39
|
-
? col.label[locale]
|
|
40
|
-
: col.label))),
|
|
41
|
-
React.createElement(TableCell, { padding: 'none' }, ''))),
|
|
42
|
-
React.createElement(TableBody, null, users.map((user, rowIdx) => (React.createElement(TableRow, { key: rowIdx, onClick: () => setSelectedUser(user), sx: {
|
|
43
|
-
cursor: 'pointer',
|
|
44
|
-
background: selectedUser && user.id === selectedUser.id
|
|
45
|
-
? muiTheme.palette.primary.light
|
|
46
|
-
: undefined,
|
|
47
|
-
} },
|
|
48
|
-
React.createElement(TableCell, null, user.firstName),
|
|
49
|
-
React.createElement(TableCell, null, user.lastName),
|
|
50
|
-
React.createElement(TableCell, null, user.username),
|
|
51
|
-
React.createElement(TableCell, null, user.email),
|
|
52
|
-
React.createElement(TableCell, null, user.enabled ? React.createElement(CheckIcon, null) : React.createElement(CloseIcon, null)),
|
|
53
|
-
React.createElement(TableCell, { padding: 'none', align: 'right' },
|
|
54
|
-
React.createElement(IconButton, { size: 'small', onClick: (evt) => {
|
|
55
|
-
evt.stopPropagation();
|
|
56
|
-
setOpenConfirmationDialog(true);
|
|
57
|
-
setDeleteId(user.id);
|
|
58
|
-
} },
|
|
59
|
-
React.createElement(DeleteIcon, null))))))))),
|
|
60
|
-
React.createElement(DeleteConfirmationDialog, { open: openConfirmationDialog, onClose: () => setOpenConfirmationDialog(false), onConfirm: () => (deleteId ? onDelete(deleteId) : {}) })));
|
|
61
|
-
};
|
|
62
|
-
export default UsersTable;
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
import React, { useState } from 'react';
|
|
3
|
-
import { Box, Tab, Tabs } from '@mui/material';
|
|
4
|
-
import { useLocale } from '@deix/rossini-core';
|
|
5
|
-
import usersTranslations from '../../lang/users';
|
|
6
|
-
import UserDetails from './UserDetails';
|
|
7
|
-
import UserGroups from './UserGroups';
|
|
8
|
-
import UserCredentials from './UserCredentials';
|
|
9
|
-
const UserTabs = ({ user, additionalTabs = [] }) => {
|
|
10
|
-
const locale = useLocale();
|
|
11
|
-
const [selectedTab, setSelectedTab] = useState('DETAILS');
|
|
12
|
-
return (React.createElement(Box, { sx: {
|
|
13
|
-
flexGrow: 1,
|
|
14
|
-
maxWidth: '100%',
|
|
15
|
-
overflowX: 'hidden',
|
|
16
|
-
alignSelf: 'stretch',
|
|
17
|
-
} },
|
|
18
|
-
React.createElement(Box, { sx: { borderBottom: 1, borderColor: 'divider' } },
|
|
19
|
-
React.createElement(Tabs, { value: selectedTab, onChange: (_evt, newValue) => {
|
|
20
|
-
setSelectedTab(newValue);
|
|
21
|
-
}, "aria-label": 'basic tabs example' },
|
|
22
|
-
React.createElement(Tab, { label: usersTranslations.details[locale], value: 'DETAILS' }),
|
|
23
|
-
React.createElement(Tab, { label: usersTranslations.userGroups[locale], value: 'USER_GROUPS' }),
|
|
24
|
-
React.createElement(Tab, { label: usersTranslations.credentials[locale], value: 'CREDENTIALS' }),
|
|
25
|
-
additionalTabs.map((tab, index) => (React.createElement(Tab, { label: tab.title[locale], value: `ADDITIONAL_TAB_${index}` }))))),
|
|
26
|
-
React.createElement(Box, { sx: { p: 1 } },
|
|
27
|
-
selectedTab === 'DETAILS' && React.createElement(UserDetails, { user: user }),
|
|
28
|
-
selectedTab === 'USER_GROUPS' && React.createElement(UserGroups, { user: user }),
|
|
29
|
-
selectedTab === 'CREDENTIALS' && React.createElement(UserCredentials, { user: user }),
|
|
30
|
-
additionalTabs.map((tab, index) => selectedTab === `ADDITIONAL_TAB_${index}` && (React.createElement(tab.component, { user: user }))))));
|
|
31
|
-
};
|
|
32
|
-
export default UserTabs;
|