mantine

src/components/DndList.tsx

@@ -0,0 +1,98 @@
+import React from 'react'
+import { createStyles, Text } from '@mantine/core';
+import { useListState } from '@mantine/hooks';
+import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
+
+const useStyles = createStyles((theme) => ({
+    item: {
+      ...theme.fn.focusStyles(),
+      display: 'flex',
+      alignItems: 'center',
+      borderRadius: theme.radius.md,
+      border: `1px solid ${
+        theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[2]
+      }`,
+      padding: `${theme.spacing.sm}px ${theme.spacing.xl}px`,
+      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.white,
+      marginBottom: theme.spacing.sm,
+    },
+  
+    itemDragging: {
+      boxShadow: theme.shadows.sm,
+    },
+  
+    symbol: {
+      fontSize: 30,
+      fontWeight: 700,
+      width: 60,
+    },
+  }));
+  
+export interface DndListProps {
+    data: {
+
+      id: string;
+      name: string;
+      ordernum: number;
+  
+      // position: number;
+      // mass: number;
+      // symbol: string;
+      // name: string;
+    }[];
+  }
+  
+  export interface IProps
+  {
+    dragEndHandler: (p: any) => void;
+    dataprops: DndListProps;
+  }
+
+  export function DndList({dragEndHandler, dataprops}: IProps) 
+  {
+    const {data} = dataprops;
+    const { classes, cx } = useStyles();
+    const [state, handlers] = useListState(data);
+  
+    const items = state.map((item, index) => (
+      <Draggable key={item.id} index={index} draggableId={item.id}>
+        {(provided, snapshot) => (
+          <div
+            className={cx(classes.item, { [classes.itemDragging]: snapshot.isDragging })}
+            {...provided.draggableProps}
+            {...provided.dragHandleProps}
+            ref={provided.innerRef}
+          >
+            <div>
+              <Text>{item.name}</Text>
+            </div>
+          </div>
+        )}
+      </Draggable>
+    ));
+    console.log(state);
+
+    return (
+      <DragDropContext
+        onDragEnd=
+        {
+          ({ destination, source }) =>
+            {
+              handlers.reorder({ from: source.index, to: destination?.index || 0 });
+              console.log(state);
+              dragEndHandler(state);
+            }
+        }
+      >
+        <Droppable droppableId="dnd-list" direction="vertical">
+          {(provided) => (
+            <div {...provided.droppableProps} ref={provided.innerRef}>
+              {items}
+              {provided.placeholder}
+            </div>
+          )}
+        </Droppable>
+      </DragDropContext>
+    );
+  }
+  

src/components/Qr.tsx

@@ -2,11 +2,15 @@ import React, { ChangeEvent, MouseEventHandler, useState } from 'react'
 import { Link } from 'react-router-dom';
 import { DogT } from '../context/UserContext';
 import {getDog, updateQR} from '../services/PhpApi';
-import toast, { Toaster } from 'react-hot-toast';
 import Checkbox from './Checkbox';
 import Img from './Img';
 import './Qr.css';
 import useSWR from 'swr';
+import { MantineProvider } from '@mantine/core';
+import { NotificationsProvider, showNotification } from '@mantine/notifications';
+import {DndList, DndListProps} from './DndList';
+
+
 
 type ListItemT = 
 {
@@ -45,7 +49,18 @@ export default function Qr()
         {id: '2', name:'Email', ordernum: 3}
     ]; 
 
+    const dndListInit: DndListProps = 
+    {
+        data:
+        [
+            {id: '0', name:'Name', ordernum: 1},
+            {id: '1', name:'Telefon', ordernum: 2},
+            {id: '2', name:'Email', ordernum: 3}
+        ]
+    }; 
+
     const itemList = React.useRef<ListItemT[]>(itemListInit); 
+    const dndList = React.useRef<DndListProps>(dndListInit); 
  
     if (error) return (<div>failed to load</div>);
     if (isLoading) return (<div>loading...</div>);
@@ -191,12 +206,19 @@ export default function Qr()
         {
             if(resQR.success)
             {
-                toast.success('Daten gesichert!');
+                showNotification(
+                {
+                    message: 'Daten gesichert!'
+                });
                 mutate();
             }
             else if(!resQR.success && resQR.message)
             {
-                toast.error(resQR.message);
+                showNotification(
+                {
+                    message: resQR.message
+                    
+                });
             }
         })
         .catch((err) => console.error(err));
@@ -265,6 +287,17 @@ export default function Qr()
         setDogRender(dog);
     }
 
+    function callBackDragEnd(state: {
+        id: string;
+        name: string;
+        ordernum: number;
+    }[])
+    {
+        console.log('callBackDragEnd');
+        console.log(state);
+    }
+
+
     console.log('dogRender');
     console.log(dogRender);
 
@@ -283,9 +316,15 @@ export default function Qr()
 
     console.log(dog);
 
+
+
+    dndList.current = { data: [...itemList.current] };
+    console.log(dndList);
+
     return (
-        <div>
-            <Toaster toastOptions={{ position: "top-center" }} />
+<MantineProvider withNormalizeCSS withGlobalStyles>
+      <NotificationsProvider position="top-center" >       
+      <div>
             <h1>Qr-Code Druck</h1>
             <Link to={"/profil"}>Zurück zum Profil</Link>
             <div className='qrSettings____'>
@@ -347,6 +386,7 @@ export default function Qr()
                         ))}
                         </div>
                     </div>
+                    <DndList dragEndHandler={callBackDragEnd} dataprops={dndList.current} />
                 </div>
                 <div className='column'>
                     <button id="saveButton" className='saveButton' onClick={saveHandler} >Werte sichern</button>
@@ -362,5 +402,7 @@ export default function Qr()
                 {oneQrBlock()}
             </div>
         </div> 
+      </NotificationsProvider>
+    </MantineProvider>
      );
 }