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

Compare commits

base: grimhilt:8a11b54421bce6aaa11349e361e6e5b6b4cbe9c0
Branches Tags
grimhilt:master
..
compare: grimhilt:cc4c23ad192e98785efeb2152b10fe8a80251e1c
Branches Tags
grimhilt:master

No commits in common. "8a11b54421bce6aaa11349e361e6e5b6b4cbe9c0" and "cc4c23ad192e98785efeb2152b10fe8a80251e1c" have entirely different histories.
8a11b54421 ... cc4c23ad19

27 changed files with 130 additions and 335 deletions
Show Stats Expand all files Collapse all files

2
package.json
View File

@ -1,5 +1,5 @@
{ {
"name": "Artemio", "name": "signage",
"version": "1.1.0", "version": "1.1.0",
"private": true, "private": true,
"dependencies": { "dependencies": {

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

4
public/index.html
View File

@ -5,11 +5,11 @@
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta name="description" content="Artemio" /> <meta name="description" content="Signage" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<meta name="darkreader" content="disable" /> <meta name="darkreader" content="disable" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>Artemio</title> <title>Signage</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>

BIN
public/logo192.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.7 KiB

BIN
public/logo512.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.0 KiB

4
public/manifest.json
View File

@ -1,6 +1,6 @@
{ {
"short_name": "artemio", "short_name": "signage",
"name": "artemio", "name": "signage",
"icons": [ "icons": [
{ {
"src": "favicon.ico", "src": "favicon.ico",

3
public/robots.txt
View File

@ -1,3 +0,0 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:

BIN
src/assets/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 69 KiB

25
src/components/ModalEditor.jsx
View File

@ -1,25 +0,0 @@
import { Modal, Text } from '@mantine/core';
const ModalEditor = ({ title, opened, handlerClose }) => {
return (
<Modal.Root opened={opened} onClose={handlerClose}>
<Modal.Overlay />
<Modal.Content>
<Modal.Header>
<Modal.Title>
<Text fw={700} fz="lg">
{title}
</Text>
</Modal.Title>
<Modal.CloseButton />
</Modal.Header>
<Modal.Body>
{content}
</Modal.Body>
</Modal.Content>
</Modal.Root>
);
};
export default ModalEditor;

2
src/components/header.jsx
View File

@ -70,7 +70,7 @@ const HeaderSearch = () => {
<Group> <Group>
<Avatar src={Logo} size={30} /> <Avatar src={Logo} size={30} />
<UnstyledButton onClick={() => navigate('/')} className={classes.link}> <UnstyledButton onClick={() => navigate('/')} className={classes.link}>
<Title order={1}>Artemio</Title> <Title order={1}>Signage</Title>
</UnstyledButton> </UnstyledButton>
</Group> </Group>

24
src/components/media-player.jsx
View File

@ -1,24 +0,0 @@
import { Image } from '@mantine/core';
import { isImage } from '../tools/fileUtil';
const MediaPlayer = ({ file, fileId, shouldContain }) => {
return isImage(file.type) ? (
<Image
src={'/api/files/' + (fileId ?? file.id)}
alt={file?.name ?? ''}
width={shouldContain ? undefined : 150}
fit={shouldContain ? 'contain' : 'cover'}
radius="md"
withPlaceholder
/>
) : (
<>
<video controls width={150}>
<source src={'/api/files/' + (fileId ?? file.id)} type={file.type} />
Sorry, your browser doesn't support videos.
</video>
</>
);
};
export default MediaPlayer;

12
src/components/select-item.jsx
View File

@ -1,6 +1,5 @@
import { Card, Grid, Text, Button, Center } from '@mantine/core'; import { Card, Grid, Text, Image, Button, Center } from '@mantine/core';
import { useState } from 'react'; import { useState } from 'react';
import MediaPlayer from './media-player';
const SelectorItem = ({ file, clickHandler }) => { const SelectorItem = ({ file, clickHandler }) => {
const [selected, setSelected] = useState(false); const [selected, setSelected] = useState(false);
@ -13,7 +12,14 @@ const SelectorItem = ({ file, clickHandler }) => {
<Grid.Col span={1} key={file.id}> <Grid.Col span={1} key={file.id}>
<Card shadow="sm"> <Card shadow="sm">
<Card.Section> <Card.Section>
<MediaPlayer file={file} /> <Image
src={"/api/file/"+file.id}
alt={file.name}
height={100}
fit="cover"
radius="md"
withPlaceholder
/>
</Card.Section> </Card.Section>
<Center> <Center>
<Text order={4} mt="md"> <Text order={4} mt="md">

2
src/pages/auth.jsx
View File

@ -62,7 +62,7 @@ const Authentication = ({ redirect }) => {
align="center" align="center"
sx={(theme) => ({ fontFamily: `Greycliff CF, ${theme.fontFamily}`, fontWeight: 900 })} sx={(theme) => ({ fontFamily: `Greycliff CF, ${theme.fontFamily}`, fontWeight: 900 })}
> >
Connect to Artemio Connect to signage
</Title> </Title>
<Paper withBorder shadow="md" p={30} mt={30} radius="md"> <Paper withBorder shadow="md" p={30} mt={30} radius="md">

7
src/pages/files/add.jsx
View File

@ -25,11 +25,8 @@ const ModalAddFile = ({ opened, handler, addFiles }) => {
const handleSubmit = () => { const handleSubmit = () => {
setIsLoading(true); setIsLoading(true);
const formData = new FormData(); const formData = new FormData();
files.forEach((file) => formData.append('file', file));
files.forEach((file) => formData.append(`${file.name}`, file, file.name)); API.files.upload(formData)
API.files
.upload(formData)
.then((res) => { .then((res) => {
if (res.status === 200) { if (res.status === 200) {
validate(res.data); validate(res.data);

7
src/pages/files/file-view.jsx
View File

@ -1,5 +1,4 @@
import { Card, Text, Image, Button, Group, Center } from '@mantine/core'; import { Card, Text, Image, Button, Group } from '@mantine/core';
import MediaPlayer from '../../components/media-player';
const FileView = ({ file, onSelect, onDelete, ...props }) => { const FileView = ({ file, onSelect, onDelete, ...props }) => {
// const deleteHandler = async () => { // const deleteHandler = async () => {
@ -14,9 +13,7 @@ const FileView = ({ file, onSelect, onDelete, ...props }) => {
return ( return (
<Card shadow="sm" padding="md" withBorder> <Card shadow="sm" padding="md" withBorder>
<Card.Section> <Card.Section>
<Center> <Image src={'/api/file/' + file?.id ?? ''} alt={file?.name ?? ''} withPlaceholder fit="contain" />
<MediaPlayer file={file} shouldContain={true} />
</Center>
</Card.Section> </Card.Section>
<Text>{file?.name ?? 'File Name'}</Text> <Text>{file?.name ?? 'File Name'}</Text>
<Group position="center" grow> <Group position="center" grow>

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

@ -8,14 +8,9 @@ import { useEffect, useState } from 'react';
import ModalFileSelector from '../files/file-selector'; import ModalFileSelector from '../files/file-selector';
import API from '../../services/api'; import API from '../../services/api';
import setNotification from '../errors/error-notification'; import setNotification from '../errors/error-notification';
import { Perm, checkPerm } from '../../tools/grant-access'; import GrantAccess, { Perm, checkPerm } from '../../tools/grant-access';
import { useAuth } from '../../tools/auth-provider'; import { useAuth } from '../../tools/auth-provider';
import { parseTime } from '../../tools/timeUtil'; import { parseTime } from '../../tools/timeUtil';
import MediaPlayer from '../../components/media-player';
import { isVideo } from '../../tools/fileUtil';
const DEFAULT_FILE_TIME = 2;
const INCREMENT_POSITION = 100;
const Content = ({ form, playlistId, playlist }) => { const Content = ({ form, playlistId, playlist }) => {
const [fileSelector, setFileSelector] = useState(false); const [fileSelector, setFileSelector] = useState(false);
@ -26,32 +21,32 @@ const Content = ({ form, playlistId, playlist }) => {
useEffect(() => { useEffect(() => {
if (!user || !playlist) return; if (!user || !playlist) return;
const canEditTmp = checkPerm(Perm.EDIT_PLAYLIST, user, playlist); const canEditTmp = checkPerm(Perm.EDIT_PLAYLIST, user, playlist);
if (canEditTmp !== canEdit) { if (canEditTmp != canEdit) {
setCanEdit(canEditTmp); setCanEdit(canEditTmp);
} }
return () => {}; return () => {};
// eslint-disable-next-line
}, [playlist, user]); }, [playlist, user]);
const handleAddFiles = (files) => { const handleAddFiles = (files) => {
let formFiles = form.values.files; let formFiles = form.values.files;
let max_position = formFiles[formFiles.length - 1]?.position ?? 0; let max_position = formFiles[formFiles.length - 1]?.position ?? 0;
files.forEach((file) => { files.forEach((file) => {
max_position += INCREMENT_POSITION; max_position++;
file.position = max_position; file.position = max_position;
file.seconds = DEFAULT_FILE_TIME; file.seconds = 10;
const index = form.values.files.length;
form.insertListItem('files', file);
API.playlists API.playlists
.addFile(playlistId, { position: file.position, file_id: file.id, seconds: file.seconds }) .addFile(playlistId, { position: file.position, file_id: file.id, seconds: file.seconds })
.then((res) => { .then((res) => {
if (res.status !== 200) { if (res.status !== 200) {
setNotification(true, `Error when adding file (${res.status})`); setNotification(true, `Error when adding file (${res.status})`);
} else {
file.pfid = res.data.pfid;
form.insertListItem('files', file);
} }
}) })
.catch((err) => { .catch((err) => {
// form.removeListItem('files', index); console.log('here');
form.removeListItem('files', index);
setNotification(true, err); setNotification(true, err);
}); });
}); });
@ -59,15 +54,13 @@ const Content = ({ form, playlistId, playlist }) => {
const changePositionValue = (from, to) => { const changePositionValue = (from, to) => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
if (from == to)
resolve(true);
const formFiles = form.values.files; const formFiles = form.values.files;
let below_position = to === 0 ? 0 : formFiles[to - 1].position; let below_position = to === 0 ? 0 : formFiles[to].position;
let above_position = formFiles[to].position; let above_position = formFiles[to].position;
if (to > from) { if (to > from) {
if (to === formFiles.length - 1) { if (to === formFiles.length - 1) {
// last element so nothing above // last element so nothing above
above_position = formFiles[to].position + INCREMENT_POSITION; above_position = formFiles.length + 1;
} else { } else {
// not last to taking element above // not last to taking element above
above_position = formFiles[to + 1].position; above_position = formFiles[to + 1].position;
@ -77,10 +70,9 @@ const Content = ({ form, playlistId, playlist }) => {
// sending modification to server // sending modification to server
API.playlists API.playlists
.changeOrder(playlistId, { pfid: formFiles[from].pfid, position: newPosition }) .changeOrder(playlistId, { file_id: formFiles[from].id, position: newPosition })
.then((res) => { .then((res) => {
if (res.status === 200) { if (res.status === 200) {
formFiles[from].position = newPosition;
resolve(true); resolve(true);
} else { } else {
setNotification(true, `Error when changing order (${res.status})`); setNotification(true, `Error when changing order (${res.status})`);
@ -117,9 +109,9 @@ const Content = ({ form, playlistId, playlist }) => {
}; };
const changeSeconds = (seconds, index) => { const changeSeconds = (seconds, index) => {
const filePfid = form.values.files[index].pfid; const fileId = form.values.files[index].id;
API.playlists API.playlists
.changeSeconds(playlistId, { pfid: filePfid, seconds: seconds }) .changeSeconds(playlistId, { file_id: fileId, seconds: seconds })
.then((res) => { .then((res) => {
if (res.status === 200) { if (res.status === 200) {
setOriginSecs(); setOriginSecs();
@ -136,9 +128,7 @@ const Content = ({ form, playlistId, playlist }) => {
const handleDelete = (index) => { const handleDelete = (index) => {
API.playlists API.playlists
.removeFile(playlistId, { .removeFile(playlistId, { file_id: form.values.files[index].pfid })
pfid: form.values.files[index].pfid,
})
.then((res) => { .then((res) => {
if (res.status === 200) { if (res.status === 200) {
form.removeListItem('files', index); form.removeListItem('files', index);
@ -151,60 +141,48 @@ const Content = ({ form, playlistId, playlist }) => {
}); });
}; };
const fields = form.values.files.map((_, index) => const fields = form.values.files.map((_, index) => (
canEdit ? (
<Draggable key={index} index={index} draggableId={index.toString()}> <Draggable key={index} index={index} draggableId={index.toString()}>
{(provided) => ( {(provided) => (
<Group ref={provided.innerRef} mt="xs" {...provided.draggableProps} position="center"> <Group ref={provided.innerRef} mt="xs" {...provided.draggableProps} position="center">
<Paper p="xs" radius="sm" shadow="sm" withBorder spacing="xs" style={{ width: '90%' }}> <Paper p="xs" radius="sm" shadow="sm" withBorder spacing="xs" style={{ width: '90%' }}>
<Flex direction="row" align="center" gap="lg" justify="flex-end"> <Flex direction="row" align="center" gap="lg" justify="flex-end">
<Text>{form.getInputProps(`files.${index}.name`).value}</Text> <Text>{form.getInputProps(`files.${index}.name`).value}</Text>
<MediaPlayer file={form.getInputProps(`files.${index}`).value} /> <Image width={150} src={'/api/file/' + form.getInputProps(`files.${index}.id`).value} />
{ canEdit ?
<NumberInput <NumberInput
required required
{...(isVideo(form.getInputProps(`files.${index}.type`).value)
? {
disabled: true,
value: 0,
description: 'Default to video duration',
}
: {
value: form.getInputProps(`files.${index}.seconds`).value,
onChange: (secs) => handleChangeSeconds(secs, index),
})}
hideControls hideControls
label="Seconds to display" description="Seconds to display"
error={ value={form.getInputProps(`files.${index}.seconds`).value}
form.getInputProps(`files.${index}.seconds`).errors && 'This field is required' onChange={(secs) => handleChangeSeconds(secs, index)}
} error={form.getInputProps(`files.${index}.seconds`).errors && 'This field is required'}
/> />
: <Text>Display time: {parseTime(form.getInputProps(`files.${index}.seconds`).value)}</Text>
}
{canEdit ? (
<ActionIcon color="red" variant="light" size="lg" onClick={() => handleDelete(index)}> <ActionIcon color="red" variant="light" size="lg" onClick={() => handleDelete(index)}>
<IconTrash size="1rem" /> <IconTrash size="1rem" />
</ActionIcon> </ActionIcon>
) : (
<></>
)}
</Flex> </Flex>
</Paper> </Paper>
{canEdit ? (
<Center {...provided.dragHandleProps}> <Center {...provided.dragHandleProps}>
<IconGripVertical size="1.2rem" /> <IconGripVertical size="1.2rem" />
</Center> </Center>
) : (
<></>
)}
</Group> </Group>
)} )}
</Draggable> </Draggable>
) : ( ));
<Group key={index} mt="xs" position="center">
<Paper p="xs" radius="sm" shadow="sm" withBorder spacing="xs" style={{ width: '90%' }}>
<Flex direction="row" align="center" gap="lg" justify="flex-end">
<Text>{form.getInputProps(`files.${index}.name`).value}</Text>
<MediaPlayer file={form.getInputProps(`files.${index}`).value} />
<Text>Display time: {parseTime(form.getInputProps(`files.${index}.seconds`).value)}</Text>
</Flex>
</Paper>
</Group>
)
);
return ( return (
<Box mx="auto" maw={1200}> <Box mx="auto" maw={1200}>
{canEdit ? (
<DragDropContext <DragDropContext
onDragEnd={({ destination, source }) => { onDragEnd={({ destination, source }) => {
form.reorderListItem('files', { from: source.index, to: destination.index }); form.reorderListItem('files', { from: source.index, to: destination.index });
@ -224,9 +202,6 @@ const Content = ({ form, playlistId, playlist }) => {
)} )}
</StrictModeDroppable> </StrictModeDroppable>
</DragDropContext> </DragDropContext>
) : (
fields
)}
{canEdit ? ( {canEdit ? (
<> <>

12
src/pages/playlist/index.jsx
View File

@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
import API from '../../services/api'; import API from '../../services/api';
import { parseTime } from '../../tools/timeUtil'; import { parseTime } from '../../tools/timeUtil';
import setNotification from '../errors/error-notification'; import setNotification from '../errors/error-notification';
import ModalUpdatePlaylist from '../playlists/update'; import ModalUpdate from '../playlists/update';
import { useForm } from '@mantine/form'; import { useForm } from '@mantine/form';
import Content from './content'; import Content from './content';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
@ -22,7 +22,7 @@ const Playlist = (item) => {
const toggleActivate = () => { const toggleActivate = () => {
setIsLoading(true); setIsLoading(true);
(isActive ? API.playlists.disactivate : API.playlists.activate)(id) (isActive ? API.disactivate : API.activate)(id)
.then((res) => { .then((res) => {
if (res.status === 200) { if (res.status === 200) {
setIsActive(!isActive); setIsActive(!isActive);
@ -50,6 +50,10 @@ const Playlist = (item) => {
setDuration(duration); setDuration(duration);
}, [form.values]); }, [form.values]);
const updatePlaylist = (playlist) => {
setPlaylist(playlist);
};
useEffect(() => { useEffect(() => {
if (JSON.stringify(item) !== '{}') { if (JSON.stringify(item) !== '{}') {
setPlaylist(item); setPlaylist(item);
@ -115,11 +119,11 @@ const Playlist = (item) => {
<Paper p="xs" radius="sm" shadow="sm" withBorder my="md"> <Paper p="xs" radius="sm" shadow="sm" withBorder my="md">
<Content form={form} playlistId={id} playlist={playlist} /> <Content form={form} playlistId={id} playlist={playlist} />
</Paper> </Paper>
<ModalUpdatePlaylist <ModalUpdate
opened={showUpdate} opened={showUpdate}
handler={toggleUpdate} handler={toggleUpdate}
item={playlist} item={playlist}
updatePlaylist={(playlist) => setPlaylist(playlist)} updatePlaylist={(playlist) => updatePlaylist(playlist)}
/> />
</> </>
); );

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

@ -3,7 +3,7 @@ import PlaylistViewEditor from './playlist-view-editor';
import API from '../../services/api'; import API from '../../services/api';
const ModalCreatePlaylist = ({ opened, handler, addPlaylist }) => { const ModalCreatePlaylist = ({ opened, handler, addPlaylist }) => {
const validate = (item) => { const validated = (item) => {
if (item) { if (item) {
addPlaylist(item); addPlaylist(item);
} }
@ -26,7 +26,7 @@ const ModalCreatePlaylist = ({ opened, handler, addPlaylist }) => {
<PlaylistViewEditor <PlaylistViewEditor
buttonText="Create" buttonText="Create"
APICall={API.playlists.create} APICall={API.playlists.create}
handler={(item) => validate(item)} handler={(item) => validated(item)}
/> />
</Modal.Body> </Modal.Body>
</Modal.Content> </Modal.Content>

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

@ -8,7 +8,7 @@ import { Button } from '@mantine/core';
import GrantAccess, { Perm } from '../../tools/grant-access'; import GrantAccess, { Perm } from '../../tools/grant-access';
const Playlists = () => { const Playlists = () => {
const [showCreate, setShowCreate] = useState(false); const [showCreate, setShowCreate] = useState(true);
const [showUpdate, setShowUpdate] = useState(false); const [showUpdate, setShowUpdate] = useState(false);
const [, setItem] = useState({}); const [, setItem] = useState({});
const [page, setPage] = useState(0); const [page, setPage] = useState(0);
@ -63,7 +63,7 @@ const Playlists = () => {
<PlaylistTable <PlaylistTable
data={playlists} data={playlists}
updateItem={setItem} // todo updateItem={setItem} // todo
// eslint-disable-next-line // eslint-disable-next-line eqeqeq
onDelete={(id) => setPlaylist(playlists.filter((item) => item._id != id))} onDelete={(id) => setPlaylist(playlists.filter((item) => item._id != id))}
updateHandler={toggleModalUpdate} updateHandler={toggleModalUpdate}
loadMore={loadMore} loadMore={loadMore}

16
src/pages/playlists/playlist-view-editor.jsx
View File

@ -2,7 +2,7 @@ import { Button, TextInput, Group, Stack } from '@mantine/core';
import { useForm, isNotEmpty } from '@mantine/form'; import { useForm, isNotEmpty } from '@mantine/form';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import setNotification from '../errors/error-notification'; import setNotification from '../errors/error-notification';
import RoleSelector from '../roles/role-selector'; import RoleSelector from './role-selector';
const PlaylistViewEditor = ({ item, handler, buttonText, APICall }) => { const PlaylistViewEditor = ({ item, handler, buttonText, APICall }) => {
const handleClose = (playlist) => { const handleClose = (playlist) => {
@ -11,8 +11,8 @@ const PlaylistViewEditor = ({ item, handler, buttonText, APICall }) => {
}; };
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [rolesView, setRolesView] = useState(item?.view?.map((role) => role.id.toString()) ?? []); const [rolesView, setRolesView] = useState(item?.view.map((role) => role.id.toString()) ?? []);
const [rolesEdit, setRolesEdit] = useState(item?.edit?.map((role) => role.id.toString()) ?? []); const [rolesEdit, setRolesEdit] = useState(item?.edit.map((role) => role.id.toString()) ?? []);
useEffect(() => { useEffect(() => {
if (item) { if (item) {
@ -37,10 +37,10 @@ const PlaylistViewEditor = ({ item, handler, buttonText, APICall }) => {
try { try {
setIsLoading(true); setIsLoading(true);
if (item) { if (item) {
const view = rolesView.map((roleId) => parseInt(roleId)); await APICall(item?.id, { name: form.values.name });
const edit = rolesEdit.map((roleId) => parseInt(roleId)); // todo permissions update
const res = await APICall(item?.id, { name: form.values.name, view: view, edit: edit }); item.name = form.values.name;
handleClose(res.data); handleClose(item);
} else { } else {
const view = rolesView.map((roleId) => parseInt(roleId)); const view = rolesView.map((roleId) => parseInt(roleId));
const edit = rolesEdit.map((roleId) => parseInt(roleId)); const edit = rolesEdit.map((roleId) => parseInt(roleId));
@ -72,7 +72,7 @@ const PlaylistViewEditor = ({ item, handler, buttonText, APICall }) => {
/> />
</Stack> </Stack>
<Group position="right" mt="md"> <Group position="right" mt="md">
<Button variant="light" color="red" onClick={() => handleClose()}> <Button variant="light" color="red" onClick={handleClose}>
Cancel Cancel
</Button> </Button>
<Button type="submit" variant="light" color="green" loading={isLoading}> <Button type="submit" variant="light" color="green" loading={isLoading}>

32
src/pages/roles/role-selector.jsx → src/pages/playlists/role-selector.jsx
View File

@ -2,19 +2,10 @@ import { MultiSelect } from '@mantine/core';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import setNotification from '../errors/error-notification'; import setNotification from '../errors/error-notification';
import API from '../../services/api'; import API from '../../services/api';
import { Perm, checkPerm } from '../../tools/grant-access';
import { useAuth } from '../../tools/auth-provider';
import ModalCreateRole from './create';
const RoleSelector = ({ defaultRoles, label, value, setValue }) => { const RoleSelector = ({ defaultRoles, label, value, setValue }) => {
const [data, setData] = useState([]); const [data, setData] = useState([]);
const [search, setSearch] = useState(); const [search, setSearch] = useState();
const [showCreateRole, setShowCreateRole] = useState(false);
const toggleCreateRole = () => setShowCreateRole(!showCreateRole);
const [query, setQuery] = useState('');
const { user } = useAuth();
const canCreateRole = checkPerm(Perm.CREATE_ROLE, user);
const addRoles = (roles) => { const addRoles = (roles) => {
if (!roles) return; if (!roles) return;
@ -49,8 +40,14 @@ const RoleSelector = ({ defaultRoles, label, value, setValue }) => {
// eslint-disable-next-line // eslint-disable-next-line
}, [defaultRoles]); }, [defaultRoles]);
// creatable
// getCreateLabel={(query) => `+ Create ${query}`}
// onCreate={(query) => {
// const item = { value: query, label: query };
// setData((current) => [...current, item]);
// return item;
// }}
return ( return (
<>
<MultiSelect <MultiSelect
label={label} label={label}
data={data} data={data}
@ -60,22 +57,7 @@ const RoleSelector = ({ defaultRoles, label, value, setValue }) => {
value={value} value={value}
onChange={setValue} onChange={setValue}
maxDropdownHeight={160} maxDropdownHeight={160}
creatable={canCreateRole}
getCreateLabel={(query) => `+ Create ${query}`}
onCreate={(query) => {
setQuery(query);
setShowCreateRole(true);
}}
/> />
{canCreateRole && (
<ModalCreateRole
opened={showCreateRole}
item={{ name: query }}
addRole={(role) => addRoles([role])}
handler={toggleCreateRole}
/>
)}
</>
); );
}; };

6
src/pages/playlists/update.jsx
View File

@ -3,10 +3,8 @@ import API from '../../services/api';
import PlaylistViewEditor from './playlist-view-editor'; import PlaylistViewEditor from './playlist-view-editor';
const ModalUpdatePlaylist = ({ item, opened, handler, updatePlaylist }) => { const ModalUpdatePlaylist = ({ item, opened, handler, updatePlaylist }) => {
const validate = (playlist) => { const validated = (playlist) => {
if (playlist) {
updatePlaylist(playlist); updatePlaylist(playlist);
}
handler(); handler();
}; };
@ -27,7 +25,7 @@ const ModalUpdatePlaylist = ({ item, opened, handler, updatePlaylist }) => {
item={item} item={item}
buttonText="Update" buttonText="Update"
APICall={API.playlists.update} APICall={API.playlists.update}
handler={(playlist) => validate(playlist)} handler={(playlist) => validated(playlist)}
/> />
</Modal.Body> </Modal.Body>
</Modal.Content> </Modal.Content>

38
src/pages/roles/create.jsx
View File

@ -1,38 +0,0 @@
import { Modal, Text } from '@mantine/core';
import API from '../../services/api';
import RoleViewEditor from './role-view-editor';
const ModalCreateRole = ({ opened, handler, addRole, item }) => {
const validate = (role) => {
if (role) {
addRole(role);
}
handler();
};
return (
<Modal.Root opened={opened} onClose={handler}>
<Modal.Overlay />
<Modal.Content>
<Modal.Header>
<Modal.Title>
<Text fw={700} fz="lg">
Create Role
</Text>
</Modal.Title>
<Modal.CloseButton />
</Modal.Header>
<Modal.Body>
<RoleViewEditor
buttonText="Create"
item={item}
APICall={API.roles.create}
handler={(role) => validate(role)}
/>
</Modal.Body>
</Modal.Content>
</Modal.Root>
);
};
export default ModalCreateRole;

64
src/pages/roles/role-view-editor.jsx
View File

@ -1,64 +0,0 @@
import { Button, TextInput, Group, Stack } from '@mantine/core';
import { useForm, isNotEmpty } from '@mantine/form';
import { useEffect, useState } from 'react';
import setNotification from '../errors/error-notification';
const RoleViewEditor = ({ item, handler, buttonText, APICall }) => {
const handleClose = (role) => {
form.reset();
handler(role);
};
const [isLoading, setIsLoading] = useState(false);
const form = useForm({
initialValues: {
name: item?.name ?? '',
},
validate: {
name: isNotEmpty('Name is required'),
},
});
useEffect(() => {
form.setFieldValue('name', item?.name);
return () => {};
}, [item]);
const handleSubmit = async (event) => {
event.preventDefault();
if (form.validate().hasErrors) return;
try {
setIsLoading(true);
if (item?.id) {
const res = await APICall(item?.id, { name: form.values.name });
handleClose(res.data);
} else {
const res = await APICall({ name: form.values.name });
handleClose(res.data);
}
setIsLoading(false);
} catch (err) {
setIsLoading(false);
setNotification(true, err);
}
};
return (
<form onSubmit={handleSubmit}>
<TextInput label="Name" placeholder="Name" withAsterisk {...form.getInputProps('name')} mb="sm" />
todo parent id
users
<Group position="right" mt="md">
<Button variant="light" color="red" onClick={() => handler()}>
Cancel
</Button>
<Button type="submit" variant="light" color="green" loading={isLoading}>
{buttonText}
</Button>
</Group>
</form>
);
};
export default RoleViewEditor;

4
src/services/api.js
View File

@ -64,10 +64,10 @@ const API = {
}, },
files: { files: {
upload(data) { upload(data) {
return caller().post('/files', data); return caller().post('/file', data);
}, },
list() { list() {
return caller().get('/files'); return caller().get('/file');
}, },
}, },
profile() { profile() {

2
src/setupProxy.js
View File

@ -4,7 +4,7 @@ module.exports = function(app) {
app.use( app.use(
'/api', '/api',
createProxyMiddleware({ createProxyMiddleware({
target: 'http://127.0.0.1:5500', target: 'http://192.168.2.183:5500',
changeOrigin: true, changeOrigin: true,
}) })
); );

10
src/tools/fileUtil.js
View File

@ -1,10 +0,0 @@
export const isImage = (type) => {
if (!type) return false;
return type.split('/')[0] === 'image';
};
export const isVideo = (type) => {
if (!type) return false;
return type.split('/')[0] === 'video';
};