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

fix warning

Browse Source
This commit is contained in:
grimhilt 2023-08-14 12:22:21 +02:00
parent cc4c23ad19
commit 30dc2b5f31
3 changed files with 69 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,7 +8,7 @@ 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 GrantAccess, { Perm, checkPerm } from '../../tools/grant-access'; import { 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';
@ -21,10 +21,11 @@ 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) => {
@ -141,67 +142,77 @@ const Content = ({ form, playlistId, playlist }) => {
}); });
}; };
const fields = form.values.files.map((_, index) => ( const fields = form.values.files.map((_, index) =>
<Draggable key={index} index={index} draggableId={index.toString()}> canEdit ? (
{(provided) => ( <Draggable key={index} index={index} draggableId={index.toString()}>
<Group ref={provided.innerRef} mt="xs" {...provided.draggableProps} position="center"> {(provided) => (
<Paper p="xs" radius="sm" shadow="sm" withBorder spacing="xs" style={{ width: '90%' }}> <Group ref={provided.innerRef} mt="xs" {...provided.draggableProps} position="center">
<Flex direction="row" align="center" gap="lg" justify="flex-end"> <Paper p="xs" radius="sm" shadow="sm" withBorder spacing="xs" style={{ width: '90%' }}>
<Text>{form.getInputProps(`files.${index}.name`).value}</Text> <Flex direction="row" align="center" gap="lg" justify="flex-end">
<Image width={150} src={'/api/file/' + form.getInputProps(`files.${index}.id`).value} /> <Text>{form.getInputProps(`files.${index}.name`).value}</Text>
{ canEdit ? <Image width={150} src={'/api/file/' + form.getInputProps(`files.${index}.id`).value} />
<NumberInput <NumberInput
required required
hideControls hideControls
description="Seconds to display" description="Seconds to display"
value={form.getInputProps(`files.${index}.seconds`).value} value={form.getInputProps(`files.${index}.seconds`).value}
onChange={(secs) => handleChangeSeconds(secs, index)} onChange={(secs) => handleChangeSeconds(secs, index)}
error={form.getInputProps(`files.${index}.seconds`).errors && 'This field is required'} error={
/> form.getInputProps(`files.${index}.seconds`).errors && 'This field is required'
: <Text>Display time: {parseTime(form.getInputProps(`files.${index}.seconds`).value)}</Text> }
} />
{canEdit ? ( <Text>
Display time: {parseTime(form.getInputProps(`files.${index}.seconds`).value)}
</Text>
<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>
<></> </Paper>
)}
</Flex>
</Paper>
{canEdit ? (
<Center {...provided.dragHandleProps}> <Center {...provided.dragHandleProps}>
<IconGripVertical size="1.2rem" /> <IconGripVertical size="1.2rem" />
</Center> </Center>
) : ( </Group>
<></> )}
)} </Draggable>
</Group> ) : (
)} <Group key={index} mt="xs" position="center">
</Draggable> <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>
<Image width={150} src={'/api/file/' + form.getInputProps(`files.${index}.id`).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}>
<DragDropContext {canEdit ? (
onDragEnd={({ destination, source }) => { <DragDropContext
form.reorderListItem('files', { from: source.index, to: destination.index }); onDragEnd={({ destination, source }) => {
changePositionValue(source.index, destination.index).then((success) => { form.reorderListItem('files', { from: source.index, to: destination.index });
if (!success) { changePositionValue(source.index, destination.index).then((success) => {
form.reorderListItem('files', { from: destination.index, to: source.index }); if (!success) {
} form.reorderListItem('files', { from: destination.index, to: source.index });
}); }
}} });
> }}
<StrictModeDroppable droppableId="dnd-list" direction="vertical"> >
{(provided) => ( <StrictModeDroppable droppableId="dnd-list" direction="vertical">
<div {...provided.droppableProps} ref={provided.innerRef}> {(provided) => (
{fields} <div {...provided.droppableProps} ref={provided.innerRef}>
{provided.placeholder} {fields}
</div> {provided.placeholder}
)} </div>
</StrictModeDroppable> )}
</DragDropContext> </StrictModeDroppable>
</DragDropContext>
) : (
fields
)}
{canEdit ? ( {canEdit ? (
<> <>

10
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 ModalUpdate from '../playlists/update'; import ModalUpdatePlaylist 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';
@ -50,10 +50,6 @@ 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);
@ -119,11 +115,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>
<ModalUpdate <ModalUpdatePlaylist
opened={showUpdate} opened={showUpdate}
handler={toggleUpdate} handler={toggleUpdate}
item={playlist} item={playlist}
updatePlaylist={(playlist) => updatePlaylist(playlist)} updatePlaylist={(playlist) => setPlaylist(playlist)}
/> />
</> </>
); );

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

@ -63,7 +63,7 @@ const Playlists = () => {
<PlaylistTable <PlaylistTable
data={playlists} data={playlists}
updateItem={setItem} // todo updateItem={setItem} // todo
// eslint-disable-next-line eqeqeq // eslint-disable-next-line
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}