🐛 Fix issues with change position modal

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

@@ -3,6 +3,7 @@ import { closeModal, ContextModalProps } from '@mantine/modals';
 import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';
 import { AppType } from '../../../../types/app';
+import { useGridstackStore, useWrapperColumnCount } from '../../Wrappers/gridstack/store';
 import { ChangePositionModal } from './ChangePositionModal';
 
 type ChangeAppPositionModalInnerProps = {
@@ -16,6 +17,9 @@ export const ChangeAppPositionModal = ({
 }: ContextModalProps<ChangeAppPositionModalInnerProps>) => {
   const { name: configName } = useConfigContext();
   const updateConfig = useConfigStore((x) => x.updateConfig);
+  const shapeSize = useGridstackStore((x) => x.currentShapeSize);
+
+  if (!shapeSize) return null;
 
   const handleSubmit = (x: number, y: number, width: number, height: number) => {
     if (!configName) {
@@ -28,7 +32,13 @@ export const ChangeAppPositionModal = ({
         ...previousConfig,
         apps: [
           ...previousConfig.apps.filter((x) => x.id !== innerProps.app.id),
-          { ...innerProps.app, shape: { location: { x, y }, size: { width, height } } },
+          {
+            ...innerProps.app,
+            shape: {
+              ...innerProps.app.shape,
+              [shapeSize]: { location: { x, y }, size: { width, height } },
+            },
+          },
         ],
       }),
       true
@@ -49,28 +59,35 @@ export const ChangeAppPositionModal = ({
       onCancel={handleCancel}
       widthData={widthData}
       heightData={heightData}
-      initialX={innerProps.app.shape.location.x}
-      initialY={innerProps.app.shape.location.y}
-      initialWidth={innerProps.app.shape.size.width}
-      initialHeight={innerProps.app.shape.size.height}
+      initialX={innerProps.app.shape[shapeSize]?.location.x}
+      initialY={innerProps.app.shape[shapeSize]?.location.y}
+      initialWidth={innerProps.app.shape[shapeSize]?.size.width}
+      initialHeight={innerProps.app.shape[shapeSize]?.size.height}
     />
   );
 };
 
-const useHeightData = (): SelectItem[] =>
-  Array.from(Array(11).keys()).map((n) => {
-    const index = n + 1;
-    return {
-      value: index.toString(),
-      label: `${64 * index}px`,
-    };
-  });
+const useHeightData = (): SelectItem[] => {
+  const mainAreaWidth = useGridstackStore((x) => x.mainAreaWidth);
+  const wrapperColumnCount = useWrapperColumnCount();
 
-const useWidthData = (): SelectItem[] =>
-  Array.from(Array(11).keys()).map((n) => {
+  return Array.from(Array(11).keys()).map((n) => {
     const index = n + 1;
     return {
       value: index.toString(),
-      label: `${64 * index}px`,
+      label: `${Math.floor(index * (mainAreaWidth! / wrapperColumnCount!))}px`,
     };
   });
+};
+
+const useWidthData = (): SelectItem[] => {
+  const wrapperColumnCount = useWrapperColumnCount();
+  return Array.from(Array(wrapperColumnCount!).keys()).map((n) => {
+    const index = n + 1;
+    return {
+      value: index.toString(),
+      // eslint-disable-next-line no-mixed-operators
+      label: `${((100 / wrapperColumnCount!) * index).toFixed(2)}%`,
+    };
+  });
+};