user view

package.json

@@ -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",

src/pages/playlist/content.jsx

@@ -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);

src/pages/users/index.jsx

@@ -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} />
         </>
     );
 };

src/pages/users/user-view-modal.jsx

@@ -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;

src/pages/users/user-view.jsx

@@ -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;

src/pages/users/users-table.jsx

@@ -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 (

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"