user view

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 (