David
8386679181
- Added contextual help to various forms including companies, people, departments, sites, assignments, and access accounts. - Introduced EntityHelp component to provide descriptions, examples, and guidance for each entity type. - Updated forms to include help sections before submit buttons, enhancing user understanding of each field's purpose. - Implemented help translations in Spanish and English for consistency across the application. - Created a new ContextHelp component for displaying help information in a structured format. - Added automated tests to ensure help content is correctly rendered in both languages. - Documented the new contextual help feature in ayuda-contextual.md for user reference.
67 lines
1.6 KiB
TypeScript
67 lines
1.6 KiB
TypeScript
import { type ReactNode, createContext, useContext } from "react";
|
|
|
|
import { Button } from "./button";
|
|
import {
|
|
Dialog,
|
|
DialogClose,
|
|
DialogContent,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "./dialog";
|
|
|
|
const FormCancelContext = createContext<string | undefined>(undefined);
|
|
|
|
export function FormDialog({
|
|
open,
|
|
onOpenChange,
|
|
title,
|
|
cancelLabel,
|
|
children,
|
|
wide = false,
|
|
formActions = false,
|
|
}: {
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
title: string;
|
|
cancelLabel: string;
|
|
children: ReactNode;
|
|
wide?: boolean;
|
|
formActions?: boolean;
|
|
}) {
|
|
return (
|
|
<Dialog onOpenChange={onOpenChange} open={open}>
|
|
<DialogContent
|
|
className={`max-h-[calc(100dvh-2rem)] overflow-y-auto ${wide ? "sm:max-w-3xl" : "sm:max-w-xl"}`}
|
|
showCloseButton={false}
|
|
>
|
|
<DialogHeader>
|
|
<DialogTitle>{title}</DialogTitle>
|
|
</DialogHeader>
|
|
<FormCancelContext.Provider value={formActions ? cancelLabel : undefined}>
|
|
{children}
|
|
</FormCancelContext.Provider>
|
|
{!formActions && (
|
|
<DialogFooter>
|
|
<DialogClose render={<Button type="button" variant="outline" />}>
|
|
{cancelLabel}
|
|
</DialogClose>
|
|
</DialogFooter>
|
|
)}
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
export function FormActions({ children }: { children: ReactNode }) {
|
|
const cancelLabel = useContext(FormCancelContext);
|
|
return (
|
|
<DialogFooter className="border-t pt-4">
|
|
{children}
|
|
{cancelLabel && (
|
|
<DialogClose render={<Button type="button" variant="outline" />}>{cancelLabel}</DialogClose>
|
|
)}
|
|
</DialogFooter>
|
|
);
|
|
}
|