front update

src/pages/playlist/content.jsx

@@ -10,14 +10,11 @@ import API from '../../services/api';
 import setNotification from '../errors/error-notification';
 
 const Content = ({ form, playlistId }) => {
-    console.log(form.values);
 
     const [fileSelector, setFileSelector] = useState(false);
     const toggleFileSelector = () => setFileSelector(!fileSelector);
 
     const handleAddFiles = (files) => {
-        console.log('handle add file');
-        console.log(files);
         let formFiles = form.values.files;
         let max_position = formFiles[formFiles.length - 1]?.position ?? 0;
         files.forEach((file) => {

src/pages/playlists/create.jsx

@@ -7,7 +7,6 @@ const ModalCreatePlaylist = ({ opened, handler, addPlaylist }) => {
         if (item) {
             addPlaylist(item);
         }
-        console.log("call handler")
         handler();
     };
 

src/pages/playlists/index.jsx

@@ -20,10 +20,6 @@ const Playlists = () => {
     const [playlists, setPlaylist] = useState([]);
 
     useEffect(() => {
-        console.log('profile');
-        API.profile()
-            .then((res) => console.log(res))
-            .catch((err) => console.log(err));
         API.listPlaylists(limit, page)
             .then((res) => {
                 if (res.status === 200) {

src/pages/users/index.jsx

@@ -2,18 +2,18 @@ import { useEffect, useState } from 'react';
 import NavbarSignage from '../../components/navbar';
 import API from '../../services/api';
 import setNotification from '../errors/error-notification';
-import ModalCreateUser from './create';
+import ModalUserEditor from './user-editor';
 import { Button } from '@mantine/core';
 import GrantAccess, { Perm } from '../../tools/grant-access';
 import UserTable from './users-table';
 
 const Users = () => {
-    const [showCreate, setShowCreate] = useState(true);
+    const [showCreate, setShowCreate] = useState(false);
     const [showUpdate, setShowUpdate] = useState(false);
+    const [itemToUpdate, setItemToUpdate] = useState();
 
     const toggleModalCreate = () => setShowCreate(!showCreate);
     const toggleModalUpdate = () => setShowUpdate(!showUpdate);
-
     const [users, setUsers] = useState([]);
     const [roles, setRoles] = useState([]);
 
@@ -49,6 +49,10 @@ const Users = () => {
         setUsers((prev) => [...prev, user]);
     };
 
+    const updateUser = (user) => {
+        // setUsers((prev) => [...prev, user]);
+    };
+
     const navbar = {
         title: 'Users',
         search: search,
@@ -63,11 +67,29 @@ const Users = () => {
             <NavbarSignage data={navbar} />
             <UserTable
                 data={users}
-                // updateItem={setItem} // todo
+                updateItem={(item) => {
+                    console.log(item);
+                    setItemToUpdate(item);
+                    toggleModalUpdate();
+                }}
                 onDelete={(id) => setUsers(users.filter((item) => item.id != id))}
                 updateHandler={toggleModalUpdate}
             />
-            <ModalCreateUser opened={showCreate} handler={toggleModalCreate} addUser={(user) => addUser(user)} APICall={API.createUser} />
+            <ModalUserEditor
+                opened={showCreate}
+                handler={(item) => updateUser(item)}
+                handlerClose={toggleModalCreate}
+                APICall={API.createUser}
+                name="Create"
+            />
+            <ModalUserEditor
+                opened={showUpdate}
+                handler={(item) => addUser(item)}
+                handlerClose={toggleModalUpdate}
+                APICall={API.updateUser}
+                item={itemToUpdate}
+                name="Update"
+            />
         </>
     );
 };

src/pages/users/user-editor.jsx

@@ -4,24 +4,26 @@ import { useState } from 'react';
 import { Perm, checkPerm } from '../../tools/grant-access';
 import { useAuth } from '../../tools/auth-provider';
 import setNotification from '../errors/error-notification';
+import { useEffect } from 'react';
 
-const ModalCreateUser = ({ opened, handler, addUser, APICall, item }) => {
+const ModalUserEditor = ({ opened, handlerClose, handler, APICall, name, item }) => {
     const [isLoading, setIsLoading] = useState(false);
     const { user } = useAuth();
-    const handleClose = (item) => {
+    const handleFinish = (e) => {
-        if (item) {
+        console.log(e)
-            addUser(item);
+        if (e) {
+            handler(e);
         }
-        handler();
+        handlerClose();
     };
 
     const form = useForm({
         initialValues: {
-            login: '',
+            login: item?.login ?? '',
-            password: '',
+            password: item?.password ?? '',
-            create_user: false,
+            create_user: checkPerm(Perm.CREATE_USER, item),
-            create_role: false,
+            create_role: checkPerm(Perm.CREATE_ROLE, item),
-            create_playlist: false,
+            create_playlist: checkPerm(Perm.CREATE_PLAYLIST, item),
         },
         validate: {
             login: isNotEmpty('Login is required'),
@@ -29,6 +31,18 @@ const ModalCreateUser = ({ opened, handler, addUser, APICall, item }) => {
         },
     });
 
+    useEffect(() => {
+        if (item) {
+            form.setFieldValue('login', item?.login ?? '');
+            form.setFieldValue('password', item?.password ?? '');
+            form.setFieldValue('create_user', checkPerm(Perm.CREATE_USER, item));
+            form.setFieldValue('create_role', checkPerm(Perm.CREATE_ROLE, item));
+            form.setFieldValue('create_playlist', checkPerm(Perm.CREATE_PLAYLIST, item));
+        }
+        return () => {};
+        // eslint-disable-next-line
+    }, [item]);
+
     const handleSubmit = async (event) => {
         event.preventDefault();
         if (form.validate().hasErrors) return;
@@ -37,7 +51,7 @@ const ModalCreateUser = ({ opened, handler, addUser, APICall, item }) => {
             if (item) {
                 // await APICall(item?.id, { name: form.values.name });
                 // item.name = form.values.name;
-                handleClose(item);
+                handleFinish(item);
             } else {
                 let data = { login: form.values.login, password: form.values.password };
                 data.permissions = 0;
@@ -45,7 +59,7 @@ const ModalCreateUser = ({ opened, handler, addUser, APICall, item }) => {
                 if (form.values.create_role) data.permissions += 2;
                 if (form.values.create_playlist) data.permissions += 4;
                 const res = await APICall(data);
-                handleClose(res.data);
+                handleFinish(res.data);
             }
             setIsLoading(false);
         } catch (err) {
@@ -57,13 +71,13 @@ const ModalCreateUser = ({ opened, handler, addUser, APICall, item }) => {
     // todo parent role
 
     return (
-        <Modal.Root opened={opened} onClose={handler}>
+        <Modal.Root opened={opened} onClose={handlerClose}>
             <Modal.Overlay />
             <Modal.Content>
                 <Modal.Header>
                     <Modal.Title>
                         <Text fw={700} fz="lg">
-                            Create User
+                            {name} User
                         </Text>
                     </Modal.Title>
                     <Modal.CloseButton />
@@ -90,29 +104,32 @@ const ModalCreateUser = ({ opened, handler, addUser, APICall, item }) => {
                                 <Stack spacing="sm">
                                     <Switch
                                         label="Create user"
-                                        disabled={checkPerm(Perm.CREATE_USER, user)}
+                                        disabled={!checkPerm(Perm.CREATE_USER, user)}
-                                        {...form.getInputProps('create_user')}
+                                        checked={form.getInputProps('create_user').value}
+                                        onChange={(e) => form.setFieldValue('create_user', e.target.checked)}
                                     />
                                     <Switch
                                         label="Create role"
-                                        disabled={checkPerm(Perm.CREATE_ROLE, user)}
+                                        disabled={!checkPerm(Perm.CREATE_ROLE, user)}
-                                        {...form.getInputProps('create_role')}
+                                        checked={form.getInputProps('create_role').value}
+                                        onChange={(e) => form.setFieldValue('create_role', e.target.checked)}
                                     />
                                     <Switch
                                         label="Create playlist"
-                                        disabled={checkPerm(Perm.CREATE_PLAYLIST, user)}
+                                        disabled={!checkPerm(Perm.CREATE_PLAYLIST, user)}
-                                        {...form.getInputProps('create_playlist')}
+                                        checked={form.getInputProps('create_playlist').value}
+                                        onChange={(e) => form.setFieldValue('create_playlist', e.target.checked)}
                                     />
                                 </Stack>
                             </Paper>
                         </Stack>
 
                         <Group position="right" mt="md">
-                            <Button variant="light" color="red" onClick={handler}>
+                            <Button variant="light" color="red" onClick={handlerClose}>
                                 Cancel
                             </Button>
                             <Button type="submit" variant="light" color="green" loading={isLoading}>
-                                Create
+                                {name}
                             </Button>
                         </Group>
                     </form>
@@ -122,4 +139,4 @@ const ModalCreateUser = ({ opened, handler, addUser, APICall, item }) => {
     );
 };
 
-export default ModalCreateUser;
+export default ModalUserEditor;

src/pages/users/users-table.jsx

@@ -7,9 +7,13 @@ const UserTable = (props) => {
             <td>{user.login}</td>
             <td>
                 <Group>
-                    <Button onClick={() => 1} color="green">View</Button>
+                    <Button onClick={() => 1} color="green">
-                    <Button onClick={() => 1}>Update</Button>
+                        View
-                    <Button onClick={() => 1} color="red">Delete</Button>
+                    </Button>
+                    <Button onClick={() => props.updateItem(user)}>Update</Button>
+                    <Button onClick={() => 1} color="red">
+                        Delete
+                    </Button>
                 </Group>
             </td>
         </tr>

src/tools/grant-access.jsx

@@ -12,18 +12,20 @@ export const Perm = {
 };
 
 const checkBit = (dec, perm) => {
+    if (!dec || !perm) return false;
     const binStr = (dec >>> 0).toString(2);
     const len = binStr.length;
-    return binStr[len - perm - 1];
+    return binStr[len - perm] === '1';
 };
 
 export const checkPerm = (perm, user, item = {}) => {
+    if (!perm || !user) return false;
     switch (perm) {
         case Perm.CREATE_ROLE:
             return user.roles.length >= 1 && checkBit(user.roles[0].permissions, Perm.CREATE_ROLE);
         case Perm.CREATE_PLAYLIST:
             return user.roles.length >= 1 && checkBit(user.roles[0].permissions, Perm.CREATE_PLAYLIST);
-        case Perm.CREATE_ROLE:
+        case Perm.CREATE_USER:
             return user.roles.length >= 1 && checkBit(user.roles[0].permissions, Perm.CREATE_USER);
         case Perm.OWN_PLAYLIST:
             return item?.owner_id === user.id;