fix design + add file + change order

src/pages/playlist/content.jsx

@@ -1,4 +1,4 @@
-import { Box } from '@mantine/core';
+import { Box, Image, Flex } from '@mantine/core';
 import { DragDropContext, Draggable } from 'react-beautiful-dnd';
 import { IconGripVertical } from '@tabler/icons-react';
 import { StrictModeDroppable } from './StrictModeDroppable';
@@ -6,64 +6,93 @@ import { ActionIcon, Button, Center, Grid, Group, NumberInput, Paper, Text } fro
 import { IconTrash } from '@tabler/icons-react';
 import { useState } from 'react';
 import ModalFileSelector from '../files/file-selector';
+import API from '../../services/api';
+import setNotification from '../errors/error-notification';
 
-const Content = ({ form }) => {
+const Content = ({ form, playlistId }) => {
     console.log(form.values);
 
     const [fileSelector, setFileSelector] = useState(true);
     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) => {
+            max_position++;
+
+            file.position = max_position;
             file.seconds = 10;
             form.insertListItem('files', file);
+            API.addFileToPlaylist(playlistId, { position: file.position, file_id: file.id, seconds: file.seconds })
+                .then((res) => {
+                    if (res.status !== 200) {
+                        setNotification(true, `Error when adding file (${res.status})`);
+                    }
+                })
+                .catch((err) => {
+                    setNotification(true, err.message);
+                });
         });
     };
 
-    const handleDelete = (fileId) => {
+    const changePositionValue = (from, to) => {
-        console.log(form.values);
+        const formFiles = form.values.files;
-        const index = form.values.files.findIndex((file) => file.id === fileId);
+        let below_position = to === 0 ? 0 : formFiles[to].position;
-        console.log(index, fileId);
+        let above_position = formFiles[to].position;
-        if (index) {
+        if (to > from) {
-            form.removeListItem('files', index);
+            if (to === formFiles.length - 1) {
+                // last element so nothing above
+                above_position = formFiles.length + 1;
+            } else {
+                // not last to taking element above
+                above_position = formFiles[to + 1].position;
+            }
         }
+        let newPosition = (below_position + above_position) / 2
+        form.values.files[from].position = newPosition;
+
+        // sending modification to server
+        API.playlistChangeOrder(playlistId, {file_id: formFiles[from].id, position: newPosition})
+            .then((res) => {
+                if (res.status !== 200) {
+                    setNotification(true, `Error when changing order (${res.status})`);
+                }
+            })
+            .catch((err) => {
+                setNotification(true, err.message);
+            });
     };
 
-    const fields = form.values.files.map((el, index) => (
+    const handleDelete = (index) => {
+        form.removeListItem('files', index);
+    };
+
+    const fields = form.values.files.map((_, index) => (
         <Draggable key={index} index={index} draggableId={index.toString()}>
             {(provided) => (
-                <Center>
+                <Group ref={provided.innerRef} mt="xs" {...provided.draggableProps} position="center">
-                    <Group ref={provided.innerRef} mt="xs" {...provided.draggableProps}>
+                    <Center {...provided.dragHandleProps}>
-                        <Center {...provided.dragHandleProps}>
+                        <IconGripVertical size="1.2rem" />
-                            <IconGripVertical size="1.2rem" />
+                    </Center>
-                        </Center>
+                    <Paper p="xs" radius="sm" shadow="sm" withBorder spacing="xs" style={{ width: '90%' }}>
-                        <Paper p="xs" radius="sm" shadow="sm" withBorder spacing="xs">
+                        <Flex direction="row" align="center" gap="lg" justify="flex-end">
-                            <Grid columns={10}>
+                            <Image height={100} src={'/api/file/' + form.getInputProps(`files.${index}.id`).value} />
-                                <Grid.Col span={4}>
+                            <Text>{form.getInputProps(`files.${index}.name`).value}</Text>
-                                    <Text>{form.getInputProps(`files.${index}.name`).value}</Text>
+                            <NumberInput
-                                </Grid.Col>
+                                required
-                                <Grid.Col span={4}>
+                                hideControls
-                                    <NumberInput
+                                description="Seconds to display"
-                                        required
+                                {...form.getInputProps(`files.${index}.seconds`)}
-                                        hideControls
+                            />
-                                        description="Seconds to display"
+                            <ActionIcon color="red" variant="light" size="lg" onClick={() => handleDelete(index)}>
-                                        {...form.getInputProps(`files.${index}.seconds`)}
+                                <IconTrash size="1rem" />
-                                    />
+                            </ActionIcon>
-                                </Grid.Col>
+                        </Flex>
-                                <Grid.Col span={2}>
+                    </Paper>
-                                    <ActionIcon
+                </Group>
-                                        color="red"
-                                        variant="light"
-                                        size="lg"
-                                        onClick={() => handleDelete(el.id)}
-                                    >
-                                        <IconTrash size="1rem" />
-                                    </ActionIcon>
-                                </Grid.Col>
-                            </Grid>
-                        </Paper>
-                    </Group>
-                </Center>
             )}
         </Draggable>
     ));
@@ -71,9 +100,10 @@ const Content = ({ form }) => {
     return (
         <Box mx="auto">
             <DragDropContext
-                onDragEnd={({ destination, source }) =>
+                onDragEnd={({ destination, source }) => {
-                    form.reorderListItem('files', { from: source.index, to: destination.index })
+                    changePositionValue(source.index, destination.index);
-                }
+                    form.reorderListItem('files', { from: source.index, to: destination.index });
+                }}
             >
                 <StrictModeDroppable droppableId="dnd-list" direction="vertical">
                     {(provided) => (