diff --git a/src/pages/playlist/content.jsx b/src/pages/playlist/content.jsx index 412a1c6..abdc81e 100644 --- a/src/pages/playlist/content.jsx +++ b/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) => { diff --git a/src/pages/playlists/create.jsx b/src/pages/playlists/create.jsx index 1ea8ef2..7919b7b 100644 --- a/src/pages/playlists/create.jsx +++ b/src/pages/playlists/create.jsx @@ -7,7 +7,6 @@ const ModalCreatePlaylist = ({ opened, handler, addPlaylist }) => { if (item) { addPlaylist(item); } - console.log("call handler") handler(); }; diff --git a/src/pages/playlists/index.jsx b/src/pages/playlists/index.jsx index 2ca78ec..3bc1cdf 100644 --- a/src/pages/playlists/index.jsx +++ b/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) { diff --git a/src/pages/users/index.jsx b/src/pages/users/index.jsx index 22da0b0..3096d71 100644 --- a/src/pages/users/index.jsx +++ b/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 = () => { { + console.log(item); + setItemToUpdate(item); + toggleModalUpdate(); + }} onDelete={(id) => setUsers(users.filter((item) => item.id != id))} updateHandler={toggleModalUpdate} /> - addUser(user)} APICall={API.createUser} /> + updateUser(item)} + handlerClose={toggleModalCreate} + APICall={API.createUser} + name="Create" + /> + addUser(item)} + handlerClose={toggleModalUpdate} + APICall={API.updateUser} + item={itemToUpdate} + name="Update" + /> ); }; diff --git a/src/pages/users/create.jsx b/src/pages/users/user-editor.jsx similarity index 64% rename from src/pages/users/create.jsx rename to src/pages/users/user-editor.jsx index d4b81dd..118c84c 100644 --- a/src/pages/users/create.jsx +++ b/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) => { - if (item) { - addUser(item); + const handleFinish = (e) => { + console.log(e) + if (e) { + handler(e); } - handler(); + handlerClose(); }; const form = useForm({ initialValues: { - login: '', - password: '', - create_user: false, - create_role: false, - create_playlist: false, + login: item?.login ?? '', + password: item?.password ?? '', + create_user: checkPerm(Perm.CREATE_USER, item), + create_role: checkPerm(Perm.CREATE_ROLE, item), + 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 ( - + - Create User + {name} User @@ -90,29 +104,32 @@ const ModalCreateUser = ({ opened, handler, addUser, APICall, item }) => { form.setFieldValue('create_user', e.target.checked)} /> form.setFieldValue('create_role', e.target.checked)} /> form.setFieldValue('create_playlist', e.target.checked)} /> - @@ -122,4 +139,4 @@ const ModalCreateUser = ({ opened, handler, addUser, APICall, item }) => { ); }; -export default ModalCreateUser; +export default ModalUserEditor; diff --git a/src/pages/users/users-table.jsx b/src/pages/users/users-table.jsx index 2955d9f..c633503 100644 --- a/src/pages/users/users-table.jsx +++ b/src/pages/users/users-table.jsx @@ -7,9 +7,13 @@ const UserTable = (props) => { {user.login} - - - + + + diff --git a/src/tools/grant-access.jsx b/src/tools/grant-access.jsx index 8f2ca61..c735d1c 100644 --- a/src/tools/grant-access.jsx +++ b/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;