user view
This commit is contained in:
grimhilt
parent
18f487832e
commit
5ffccd656d
@ -9,6 +9,7 @@
|
||||
"@mantine/ds": "^6.0.8",
|
||||
"@mantine/form": "^6.0.6",
|
||||
"@mantine/hooks": "^6.0.6",
|
||||
"@mantine/modals": "^6.0.18",
|
||||
"@mantine/notifications": "^6.0.8",
|
||||
"@tabler/icons-react": "^2.16.0",
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
|
||||
@ -111,7 +111,7 @@ const Content = ({ form, playlistId }) => {
|
||||
};
|
||||
|
||||
const handleDelete = (index) => {
|
||||
API.playlistRemoveFile(playlistId, { file_id: form.values.files[index].id })
|
||||
API.playlistRemoveFile(playlistId, { file_id: form.values.files[index].pfid })
|
||||
.then((res) => {
|
||||
if (res.status === 200) {
|
||||
form.removeListItem('files', index);
|
||||
|
||||
@ -2,21 +2,24 @@ import { useEffect, useState } from 'react';
|
||||
import NavbarSignage from '../../components/navbar';
|
||||
import API from '../../services/api';
|
||||
import setNotification from '../errors/error-notification';
|
||||
import ModalUserEditor from './user-editor';
|
||||
import ModalUserEditor from './user-editor-modal';
|
||||
import { Button } from '@mantine/core';
|
||||
import GrantAccess, { Perm } from '../../tools/grant-access';
|
||||
import UserTable from './users-table';
|
||||
import ModalUserView from './user-view-modal';
|
||||
|
||||
const Users = () => {
|
||||
const [showCreate, setShowCreate] = useState(false);
|
||||
const [showUpdate, setShowUpdate] = useState(false);
|
||||
const [itemToUpdate, setItemToUpdate] = useState();
|
||||
const [showView, setShowView] = useState(false);
|
||||
const [itemToUse, setItemToUse] = useState();
|
||||
|
||||
const toggleModalCreate = () => setShowCreate(!showCreate);
|
||||
const toggleModalUpdate = () => setShowUpdate(!showUpdate);
|
||||
const toggleModalView = () => setShowView(!showView);
|
||||
const [users, setUsers] = useState([]);
|
||||
const [roles, setRoles] = useState([]);
|
||||
const [deleteLoading, setDeleteLoading] = useState(false);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
API.listUsers()
|
||||
@ -69,9 +72,13 @@ const Users = () => {
|
||||
<UserTable
|
||||
data={users}
|
||||
updateItem={(item) => {
|
||||
setItemToUpdate(item);
|
||||
setItemToUse(item);
|
||||
toggleModalUpdate();
|
||||
}}
|
||||
viewUser={(item) => {
|
||||
setItemToUse(item);
|
||||
toggleModalView();
|
||||
}}
|
||||
deleteUser={(id) => setUsers(users.filter((item) => item.id != id))}
|
||||
updateHandler={toggleModalUpdate}
|
||||
/>
|
||||
@ -87,9 +94,10 @@ const Users = () => {
|
||||
handler={(item) => updateUser(item)}
|
||||
handlerClose={toggleModalUpdate}
|
||||
APICall={API.updateUser}
|
||||
item={itemToUpdate}
|
||||
item={itemToUse}
|
||||
name="Update"
|
||||
/>
|
||||
<ModalUserView opened={showView} user={itemToUse} handler={toggleModalView} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
52
src/pages/users/user-view-modal.jsx
Normal file
52
src/pages/users/user-view-modal.jsx
Normal file
@ -0,0 +1,52 @@
|
||||
import { Button, Group, Modal, Text } from '@mantine/core';
|
||||
import UserView from './user-view';
|
||||
import ModalUserEditor from './user-editor-modal';
|
||||
import { useEffect, useState } from 'react';
|
||||
import API from '../../services/api';
|
||||
|
||||
const ModalUserView = ({ opened, handler, ...props }) => {
|
||||
const [showEdit, setShowEdit] = useState(false);
|
||||
const toggleModalEdit = () => setShowEdit(!showEdit);
|
||||
const [user, setUser] = useState(props.user);
|
||||
|
||||
useEffect(() => {
|
||||
setUser(props.user);
|
||||
return () => {};
|
||||
}, [props.user]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal.Root opened={opened} onClose={handler}>
|
||||
<Modal.Overlay />
|
||||
<Modal.Content>
|
||||
<Modal.Header>
|
||||
<Modal.Title>
|
||||
<Text fw={700} fz="lg">
|
||||
User view
|
||||
</Text>
|
||||
</Modal.Title>
|
||||
<Modal.CloseButton />
|
||||
</Modal.Header>
|
||||
<Modal.Body>
|
||||
<UserView user={user} />
|
||||
<Group position="right" mt="md">
|
||||
<Button variant="light" color="blue" onClick={toggleModalEdit}>
|
||||
Edit
|
||||
</Button>
|
||||
</Group>
|
||||
</Modal.Body>
|
||||
</Modal.Content>
|
||||
</Modal.Root>
|
||||
<ModalUserEditor
|
||||
opened={showEdit}
|
||||
handler={(item) => setUser(item)}
|
||||
handlerClose={toggleModalEdit}
|
||||
APICall={API.updateUser}
|
||||
item={user}
|
||||
name="Update"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ModalUserView;
|
||||
21
src/pages/users/user-view.jsx
Normal file
21
src/pages/users/user-view.jsx
Normal file
@ -0,0 +1,21 @@
|
||||
import { Paper, Stack, Checkbox, Text } from '@mantine/core';
|
||||
import { Perm, checkPerm } from '../../tools/grant-access';
|
||||
|
||||
const UserView = ({ user }) => {
|
||||
return (
|
||||
<Stack spacing="sm">
|
||||
<Paper>
|
||||
<Text>{user?.login}</Text>
|
||||
</Paper>
|
||||
<Paper withBorder shadow="xs" p="md">
|
||||
<Stack spacing="sm">
|
||||
<Checkbox label="Create user" checked={!checkPerm(Perm.CREATE_USER, user)} />
|
||||
<Checkbox label="Create role" checked={!checkPerm(Perm.CREATE_ROLE, user)} />
|
||||
<Checkbox label="Create playlist" checked={!checkPerm(Perm.CREATE_PLAYLIST, user)}/>
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserView;
|
||||
@ -36,7 +36,7 @@ const Line = ({ user, ...props }) => {
|
||||
<td>{user.login}</td>
|
||||
<td>
|
||||
<Group position="right">
|
||||
<Button onClick={() => 1} color="green">
|
||||
<Button onClick={() => props.viewUser(user)} color="green">
|
||||
View
|
||||
</Button>
|
||||
<Button onClick={() => props.updateItem(user)}>Update</Button>
|
||||
@ -51,7 +51,13 @@ const Line = ({ user, ...props }) => {
|
||||
|
||||
const UserTable = (props) => {
|
||||
const rows = props.data.map((user) => (
|
||||
<Line key={user.id} user={user} deleteUser={props.deleteUser} updateItem={props.updateItem} />
|
||||
<Line
|
||||
key={user.id}
|
||||
user={user}
|
||||
deleteUser={props.deleteUser}
|
||||
updateItem={props.updateItem}
|
||||
viewUser={props.viewUser}
|
||||
/>
|
||||
));
|
||||
|
||||
return (
|
||||
|
||||
12
yarn.lock
12
yarn.lock
@ -1789,6 +1789,13 @@
|
||||
resolved "https://registry.yarnpkg.com/@mantine/hooks/-/hooks-6.0.17.tgz#dc942c87e6dcfa14a70e4e4a162c22eeb4ff3724"
|
||||
integrity sha512-7vf2w1NlzKlUynSuyI2DAIKoEOYKYC8k+tlSsk3BRdbzhbJAiWxcYzJy5seg5dFW1WIpKAZ0wiVdHXf/WRlRgg==
|
||||
|
||||
"@mantine/modals@^6.0.18":
|
||||
version "6.0.18"
|
||||
resolved "https://registry.yarnpkg.com/@mantine/modals/-/modals-6.0.18.tgz#1f52f3215c3b7b04e828acb5606f91fd2c558dde"
|
||||
integrity sha512-iwO5NEVt3CXcofy8NEOHGYgFjuVb/yxVqNAGaLHM7b9FfHXfS/Mu+YijCHjk6/IHp2BgAGbKJx7PnKCQfz9Esw==
|
||||
dependencies:
|
||||
"@mantine/utils" "6.0.18"
|
||||
|
||||
"@mantine/notifications@^6.0.8":
|
||||
version "6.0.17"
|
||||
resolved "https://registry.yarnpkg.com/@mantine/notifications/-/notifications-6.0.17.tgz#719b89583b9350baa6502e8428e10c8491e553f9"
|
||||
@ -1810,6 +1817,11 @@
|
||||
resolved "https://registry.yarnpkg.com/@mantine/utils/-/utils-6.0.17.tgz#7d4a6c7686a3ee19a0ac248ef14780f00730837b"
|
||||
integrity sha512-U6SWV/asYE6NhiHx4ltmVZdQR3HwGVqJxVulhOylMcV1tX/P1LMQUCbGV2Oe4O9jbX4/YW5B/CBb4BbEhENQFQ==
|
||||
|
||||
"@mantine/utils@6.0.18":
|
||||
version "6.0.18"
|
||||
resolved "https://registry.yarnpkg.com/@mantine/utils/-/utils-6.0.18.tgz#da9ac8b13364277ad1a41b1ad5681fceebc89871"
|
||||
integrity sha512-xvTnAUUHsdpsBm7OrcBueGEPdBwDm7wzUBsHweqSZMjT/HQOf4w4iirefNrFhMD2wNVetNL42kEngEBe6t63/w==
|
||||
|
||||
"@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1":
|
||||
version "5.1.1-v1"
|
||||
resolved "https://registry.yarnpkg.com/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz#dbf733a965ca47b1973177dc0bb6c889edcfb129"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user