feat(form): ✨ enhance form functionality and API integration

* Refactor key handling to use uniqueKeyField * Add reset functionality to clear dirty state after save * Introduce new API call specifications for REST and resolve * Implement predefined wrappers for dialogs and popovers * Update todo list to reflect completed tasks
2026-01-14 21:51:39 +02:00
parent e6507f44af
commit cd2f6db880
11 changed files with 462 additions and 74 deletions
--- a/src/Former/FormerWrappers.tsx
+++ b/src/Former/FormerWrappers.tsx
@@ -0,0 +1,114 @@
+import {
+  Drawer,
+  Modal,
+  Popover,
+  type DrawerProps,
+  type ModalProps,
+  type PopoverProps,
+} from '@mantine/core';
+import type { FormerProps } from './Former.types';
+import { Former } from './Former';
+
+export const FormerDialog = (props: DrawerProps & { former: FormerProps }) => {
+  const { former, children, opened, onClose, ...rest } = props;
+  return (
+    <Former
+      {...former}
+      opened={opened}
+      onClose={onClose}
+      wrapper={(children, opened, onClose, _onOpen, getState) => {
+        const values = getState('values');
+        const request = getState('request');
+        const uniqueKeyField = getState('uniqueKeyField') ?? 'id';
+        return (
+          <Drawer
+            h={'100%'}
+            title={
+              request === 'delete'
+                ? `Delete Record - ${values?.[uniqueKeyField]}`
+                : request === 'insert'
+                  ? 'New Record'
+                  : `Edit Record - ${values?.[uniqueKeyField]}`
+            }
+            closeOnClickOutside={false}
+            {...rest}
+            onClose={() => onClose?.()}
+            opened={opened ?? false}
+          >
+            {children}
+          </Drawer>
+        );
+      }}
+    >
+      {children}
+    </Former>
+  );
+};
+
+export const FormerModel = (props: ModalProps & { former: FormerProps }) => {
+  const { former, children, opened, onClose, ...rest } = props;
+  return (
+    <Former
+      {...former}
+      opened={opened}
+      onClose={onClose}
+      wrapper={(children, opened, onClose, _onOpen, getState) => {
+        const values = getState('values');
+        const request = getState('request');
+        const uniqueKeyField = getState('uniqueKeyField') ?? 'id';
+        return (
+          <Modal
+            h={'100%'}
+            title={
+              request === 'delete'
+                ? `Delete Record - ${values?.[uniqueKeyField]}`
+                : request === 'insert'
+                  ? 'New Record'
+                  : `Edit Record - ${values?.[uniqueKeyField]}`
+            }
+            closeOnClickOutside={false}
+            {...rest}
+            onClose={() => onClose?.()}
+            opened={opened ?? false}
+          >
+            {children}
+          </Modal>
+        );
+      }}
+    >
+      {children}
+    </Former>
+  );
+};
+
+export const FormerPopover = (
+  props: PopoverProps & { former: FormerProps; target: React.ReactNode }
+) => {
+  const { former, children, opened, onClose, target, ...rest } = props;
+  return (
+    <Former
+      {...former}
+      opened={opened}
+      onClose={onClose}
+      wrapper={(children, opened, onClose, _onOpen, _getState) => {
+        return (
+          <Popover
+            withArrow
+            closeOnClickOutside={false}
+            width={250}
+            trapFocus
+            middlewares={{ inline: true }}
+            {...rest}
+            onClose={() => onClose?.()}
+            opened={opened ?? false}
+          >
+            <Popover.Target>{target}</Popover.Target>
+            <Popover.Dropdown>{children}</Popover.Dropdown>
+          </Popover>
+        );
+      }}
+    >
+      {children}
+    </Former>
+  );
+};