PalmyraEditForm#

interface IPalmyraEditFormInput extends IPalmyraViewFormInput,
                                        IFormSaveEventHandler {
  mode?:                 'edit' | 'save';     // default 'edit' → PUT; 'save' → upsert
  refreshOnSaveResponse?: boolean;
  onValidChange?:         (isValid: boolean) => void;
  children?:              any;
}

interface IPalmyraViewFormInput extends IuseFormOptions<StoreOptions>,
                                        IFormQueryEventHandler {
  id:              string;
  idKey?:          string;             // defaults to the store's id property
  fields?:         string[];           // projection — fetch only these
  onQueryData?:    (data: any) => void;
  onQueryFailure?: (error: any) => void;
}

interface ISaveForm extends IForm {
  saveData(data?: any): Promise<any>;   // PUT or POST?action=save depending on mode
  refresh(): void;                      // re-fetch the record
}

import { useRef } from 'react';
import { PalmyraEditForm, FieldGroupContainer, type ISaveForm } from '@palmyralabs/rt-forms';
import { TextField, TextArea } from '@palmyralabs/rt-forms-mantine';
import { Button, Group } from '@mantine/core';

export function EditManufacturerForm({ id, onRefresh }: { id: string; onRefresh: () => void }) {
  const formRef = useRef<ISaveForm>(null);

  return (
    <>
      <PalmyraEditForm
        formRef={formRef}
        endPoint="/mstManufacturer/{id}"
        id={id}
        mode="edit"
        onSaveSuccess={onRefresh}
      >
        <FieldGroupContainer columns={2}>
          <TextField attribute="name"          label="Name" required />
          <TextField attribute="contactMobile" label="Mobile" />
          <TextField attribute="contactEmail"  label="Email" validRule="email" />
          <TextArea  attribute="address"       label="Address" colspan={2} />
        </FieldGroupContainer>
      </PalmyraEditForm>
      <Group>
        <Button variant="default" onClick={() => formRef.current?.refresh()}>Reload</Button>
        <Button onClick={() => formRef.current?.saveData()}>Save</Button>
      </Group>
    </>
  );
}