From 15beb7bb8a8d410b7f835aaf1274b9a380c31261 Mon Sep 17 00:00:00 2001 From: Peter Hoppe Date: Wed, 15 Feb 2023 00:22:41 +0100 Subject: [PATCH] mantine --- src/components/DndList.tsx | 23 +++--- src/components/Qr.tsx | 140 ++++++++++++------------------------- 2 files changed, 57 insertions(+), 106 deletions(-) diff --git a/src/components/DndList.tsx b/src/components/DndList.tsx index fcc8041..05560cd 100644 --- a/src/components/DndList.tsx +++ b/src/components/DndList.tsx @@ -12,7 +12,7 @@ const useStyles = createStyles((theme) => ({ border: `1px solid ${ theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[2] }`, - padding: `${theme.spacing.sm}px ${theme.spacing.xl}px`, + padding: `${theme.spacing.xs}px ${theme.spacing.xl}px`, backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.white, marginBottom: theme.spacing.sm, }, @@ -38,18 +38,19 @@ export interface DndListProps { dataprops: DndListProps; } - export type TData = + export type TDataItem = { + id: string; + name: string; + ordernum: number; - id: string; - name: string; - ordernum: number; - - // position: number; - // mass: number; - // symbol: string; - // name: string; - }[] + // position: number; + // mass: number; + // symbol: string; + // name: string; + } + + export type TData = TDataItem[]; const reorder = ({current, from, to }: {current: TData; from: number; to: number }) => { diff --git a/src/components/Qr.tsx b/src/components/Qr.tsx index 7ab216b..b9deb96 100644 --- a/src/components/Qr.tsx +++ b/src/components/Qr.tsx @@ -6,19 +6,11 @@ import Checkbox from './Checkbox'; import Img from './Img'; import './Qr.css'; import useSWR from 'swr'; -import { MantineProvider } from '@mantine/core'; +import { MantineProvider, NumberInput } from '@mantine/core'; import { NotificationsProvider, showNotification } from '@mantine/notifications'; -import {DndList, DndListProps} from './DndList'; +import {DndList, DndListProps, TDataItem} from './DndList'; - -type ListItemT = -{ - id: string; - name: string; - ordernum: number; -} - export default function Qr() { const { data, error, isLoading, mutate } = useSWR( ['Qr', 'SESS'], getDog); @@ -40,15 +32,6 @@ export default function Qr() picture: '' }); //save reference for dragItem and dragOverItem - const dragItem = React.useRef(null); - const dragOverItem = React.useRef(null); - const itemListInit: ListItemT[] = - [ - {id: '0', name:'Name', ordernum: 1}, - {id: '1', name:'Telefon', ordernum: 2}, - {id: '2', name:'Email', ordernum: 3} - ]; - const dndListInit: DndListProps = { data: @@ -59,7 +42,6 @@ export default function Qr() ] }; - const itemList = React.useRef(itemListInit); const dndList = React.useRef(dndListInit); if (error) return (
failed to load
); @@ -124,54 +106,6 @@ export default function Qr() return ordernum; } - - //const handle drag sorting - function handleSort() - { - //duplicate items - let _itemList = [...itemList.current]; - - //remove and save the dragged item content - const draggedItemContent = _itemList.splice(dragItem.current, 1)[0]; - - //switch the position - _itemList.splice(dragOverItem.current, 0, draggedItemContent); - - //reset the position ref - dragItem.current = null; - dragOverItem.current = null; - - //update the actual array - itemList.current = _itemList; - - // set new itemorder - let newItemOrder = 0; - let digit = 100; - -// name 1 -// telefon 2 -// email 3 - -// email -// name -// telefon - -// email is first 1 -> 3 -// name is second 2 -> 1 -// telefon third 3 -> 2 - -// name telefon email -// 2 3 1 ordernum - - _itemList.map((item, index) => - { - digit = 10**(3-item.ordernum); - newItemOrder += (index+1) * digit; - }); - - dog.qr_item_sequence = newItemOrder; - setDogRender(dog); - } function oneQrBlock() { @@ -258,23 +192,29 @@ export default function Qr() */ function OrderItemList(order: number) { - let _itemList: ListItemT[] = []; + let _itemList: TDataItem[] = []; let oNum = getItemOrderNumber_(order, 100); - _itemList[oNum-1] = itemListInit[0]; + _itemList[oNum-1] = dndListInit.data[0]; oNum = getItemOrderNumber_(order, 10); - _itemList[oNum-1] = itemListInit[1]; + _itemList[oNum-1] = dndListInit.data[1]; oNum = getItemOrderNumber_(order, 1); - _itemList[oNum-1] = itemListInit[2]; + _itemList[oNum-1] = dndListInit.data[2]; - itemList.current = _itemList; + dndList.current.data = _itemList; } - const onChangeWidth = (e: ChangeEvent ) => + const onChangeWidth = (val: number) => { - dog.qr_width_cm = parseInt(e.target.value)/10 ? parseInt(e.target.value)/10 : 0; + dog.qr_width_cm = val/10; setDogRender(dog); } + // const onChangeWidth = (e: ChangeEvent ) => + // { + // dog.qr_width_cm = parseInt(e.target.value)/10 ? parseInt(e.target.value)/10 : 0; + // setDogRender(dog); + // } + const onChangeHeight = (e: ChangeEvent ) => { dog.qr_height_cm = parseInt(e.target.value)/10 ? parseInt(e.target.value)/10 : 0; @@ -295,6 +235,33 @@ export default function Qr() { console.log('callBackDragEnd'); console.log(state); + // set new itemorder + let newItemOrder = 0; + let digit = 100; + +// name 1 +// telefon 2 +// email 3 + +// email +// name +// telefon + +// email is first 1 -> 3 +// name is second 2 -> 1 +// telefon third 3 -> 2 + +// name telefon email +// 2 3 1 ordernum + + state.map((item, index) => + { + digit = 10**(3-item.ordernum); + newItemOrder += (index+1) * digit; + }); + + dog.qr_item_sequence = newItemOrder; + setDogRender(dog); } @@ -315,10 +282,6 @@ export default function Qr() OrderItemList(dog.qr_item_sequence); console.log(dog); - - - - dndList.current = { data: [...itemList.current] }; console.log(dndList); return ( @@ -332,8 +295,8 @@ export default function Qr()
Anhänger
- Reihenfolge
Ändern durch Drag'n Drop
- {itemList.current.map((item, index) => ( -
{dragItem.current = index; }} - onDragEnter={(e) => {dragOverItem.current = index; }} - onDragEnd={handleSort} - onDragOver={(e) => {e.preventDefault(); }} - > -
  • {item.name}
    • -
    - ))} +
    -