grimhilt/artemio-client
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

front update

Browse Source
This commit is contained in:
grimhilt 2023-08-08 15:12:08 +02:00
parent 7d84ed7f9e
commit f19a6fa57c
7 changed files with 78 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/pages/playlist/content.jsx
View File

@ -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) => {

1
src/pages/playlists/create.jsx
View File

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

4
src/pages/playlists/index.jsx
View File

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

32
src/pages/users/index.jsx
View File

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

63
src/pages/users/create.jsx → src/pages/users/user-editor.jsx
View File

@ -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 (
<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)}
{...form.getInputProps('create_user')}
disabled={!checkPerm(Perm.CREATE_USER, 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)}
{...form.getInputProps('create_role')}
disabled={!checkPerm(Perm.CREATE_ROLE, user)}
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)}
{...form.getInputProps('create_playlist')}
disabled={!checkPerm(Perm.CREATE_PLAYLIST, user)}
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;

10
src/pages/users/users-table.jsx
View File

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

6
src/tools/grant-access.jsx
View File

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