⬆️ Mantine 5.3

package.json

@@ -32,16 +32,16 @@
     "@dnd-kit/utilities": "^3.2.0",
     "@emotion/react": "^11.10.5",
     "@emotion/server": "^11.10.0",
-    "@mantine/carousel": "^5.9.2",
-    "@mantine/core": "^5.9.2",
-    "@mantine/dates": "^5.9.2",
-    "@mantine/dropzone": "^5.9.2",
-    "@mantine/form": "^5.9.2",
-    "@mantine/hooks": "^5.9.2",
-    "@mantine/modals": "^5.9.2",
-    "@mantine/next": "^5.9.2",
-    "@mantine/notifications": "^5.9.2",
-    "@mantine/prism": "^5.9.2",
+    "@mantine/carousel": "^5.9.3",
+    "@mantine/core": "^5.9.3",
+    "@mantine/dates": "^5.9.3",
+    "@mantine/dropzone": "^5.9.3",
+    "@mantine/form": "^5.9.3",
+    "@mantine/hooks": "^5.9.3",
+    "@mantine/modals": "^5.9.3",
+    "@mantine/next": "^5.9.3",
+    "@mantine/notifications": "^5.9.3",
+    "@mantine/prism": "^5.9.3",
     "@nivo/core": "^0.79.0",
     "@nivo/line": "^0.79.1",
     "@tabler/icons": "^1.106.0",

src/components/Dashboard/Modals/ChangePosition/ChangePositionModal.tsx

@@ -1,6 +1,9 @@
-import { Grid, NumberInput } from '@mantine/core';
+import { Button, Flex, Grid, NumberInput } from '@mantine/core';
 import { useForm } from '@mantine/form';
-import { ContextModalProps } from '@mantine/modals';
+import { closeModal, ContextModalProps } from '@mantine/modals';
+import { useConfigContext } from '../../../../config/provider';
+import { useConfigStore } from '../../../../config/store';
+import { ServiceType } from '../../../../types/service';
 import { TileBaseType } from '../../../../types/tile';
 
 export const ChangePositionModal = ({
@@ -8,24 +11,82 @@ export const ChangePositionModal = ({
   id,
   innerProps,
 }: ContextModalProps<{ type: 'service' | 'type'; tile: TileBaseType }>) => {
+  const updateConfig = useConfigStore((x) => x.updateConfig);
+  const { name: configName } = useConfigContext();
+
   const form = useForm({
     initialValues: {
-      area: innerProps.tile.area,
-      shape: innerProps.tile.shape,
+      tile: innerProps.tile,
     },
+    validateInputOnChange: true,
+    validateInputOnBlur: true,
   });
 
+  const onSubmit = () => {
+    if (!configName) {
+      return;
+    }
+
+    const tileAsService = form.values.tile as ServiceType;
+
+    updateConfig(configName, (previous) => ({
+      ...previous,
+      services: [...previous.services.filter((x) => x.id === tileAsService.id), tileAsService],
+    }));
+  };
+
   return (
-    <>
+    <form onSubmit={form.onSubmit(onSubmit)}>
       <Grid>
         <Grid.Col xs={12} md={6}>
-          <NumberInput label="X Position" {...form.getInputProps('area.tile.shape.location.x')} />
+          <NumberInput
+            max={99}
+            min={0}
+            label="X Position"
+            description="0 or higher"
+            {...form.getInputProps('tile.shape.location.x')}
+          />
         </Grid.Col>
 
         <Grid.Col xs={12} md={6}>
-          <NumberInput label="Y Position" {...form.getInputProps('area.tile.shape.location.y')} />
+          <NumberInput
+            max={99}
+            min={0}
+            label="Y Position"
+            description="0 or higher"
+            {...form.getInputProps('tile.shape.location.y')}
+          />
         </Grid.Col>
       </Grid>
-    </>
+
+      <Grid>
+        <Grid.Col xs={12} md={6}>
+          <NumberInput
+            max={24}
+            min={1}
+            label="Width"
+            description="Between 1 and 24"
+            {...form.getInputProps('tile.shape.size.width')}
+          />
+        </Grid.Col>
+
+        <Grid.Col xs={12} md={6}>
+          <NumberInput
+            max={24}
+            min={1}
+            label="Height"
+            description="Between 1 and 24"
+            {...form.getInputProps('tile.shape.size.height')}
+          />
+        </Grid.Col>
+      </Grid>
+
+      <Flex justify="end" gap="sm" mt="md">
+        <Button onClick={() => closeModal(id)} variant="light" color="gray">
+          Cancel
+        </Button>
+        <Button type="submit">Change Position</Button>
+      </Flex>
+    </form>
   );
 };

src/components/layout/header/Header.tsx

@@ -1,4 +1,7 @@
-import { Box, createStyles, Group, Header as MantineHeader } from '@mantine/core';
+import { ActionIcon, Box, createStyles, Group, Header as MantineHeader } from '@mantine/core';
+import { openContextModal } from '@mantine/modals';
+import { IconCode } from '@tabler/icons';
+import { useConfigContext } from '../../../config/provider';
 import { Logo } from '../Logo';
 import { useCardStyles } from '../useCardStyles';
 import { AddElementAction } from './Actions/AddElementAction/AddElementAction';
@@ -12,6 +15,8 @@ export function Header(props: any) {
   const { classes } = useStyles();
   const { classes: cardClasses } = useCardStyles();
 
+  const { config } = useConfigContext();
+
   return (
     <MantineHeader height={HeaderHeight} className={cardClasses.card}>
       <Group p="xs" noWrap grow>
@@ -22,6 +27,25 @@ export function Header(props: any) {
           <Search />
           <AddElementAction />
           <ToolsMenu />
+
+          <ActionIcon
+            onClick={() => {
+              openContextModal({
+                modal: 'changeTilePosition',
+                title: 'Change tile position',
+                innerProps: {
+                  tile: config?.services[0],
+                },
+              });
+            }}
+            variant="default"
+            radius="md"
+            size="xl"
+            color="blue"
+          >
+            <IconCode />
+          </ActionIcon>
+
           <SettingsMenu />
         </Group>
       </Group>