chore: form action can have fields

bleu · Jul 23, 2024 · d683e0c · d683e0c
1 parent 38e3011
commit d683e0c
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 4 deletions.
diff --git a/src/components/DataTable/DynamicActionComponent.tsx b/src/components/DataTable/DynamicActionComponent.tsx
@@ -16,7 +16,9 @@ import {
   AlertDialogTrigger,
 } from "#/components/ui/AlertDialog";
 import { Button } from "#/components/ui/Button";
-import { Form } from "#/components/ui/Form";
+import { Dialog, DialogContent, DialogTrigger } from "../ui/Dialog";
+import { Form } from "../ui/Form";
+import { buildForm } from "../FormBuilder/buildForm";
 
 export const DynamicActionComponent = ({ action, row }) => {
   const renderActionButton = () => {
@@ -54,6 +56,7 @@ export const DynamicActionComponent = ({ action, row }) => {
 
 interface ActionFormProps {
   action: {
+    form?: any;
     method: string;
     name: string;
     trigger_confirmation: boolean;
@@ -76,6 +79,50 @@ export const ActionForm: React.FC<ActionFormProps> = ({
   const [isDialogOpen, setIsDialogOpen] = React.useState(false);
   const [isSubmitting, setIsSubmitting] = React.useState(false);
 
+  if (action?.form?.fields) {
+    return (
+      <Dialog>
+        <DialogTrigger asChild>
+          {children || (
+            <Button variant="ghost" className="w-full">
+              {action.name}
+            </Button>
+          )}
+        </DialogTrigger>
+        <DialogContent className="max-h-[100%] max-w-lg overflow-auto">
+          <div className="px-2 flex flex-col">
+            <span className="text-xl font-semibold text-foreground mb-2">
+              {action.name}
+            </span>
+            <span className="text-sm text-muted-foreground">
+              <Trans>Fill in the fields to confirm the action</Trans>
+            </span>
+          </div>
+          <Form
+            onSubmit={() => setIsSubmitting(true)}
+            action={action.url_path.replace("RESOURCE_ID", row.original.id)}
+            method="post"
+            {...form}
+          >
+            <div className="p-2">
+              {action.method === "delete" && (
+                <input type="hidden" name="_method" value="delete" />
+              )}
+              <div className="flex flex-wrap gap-4">
+                {buildForm(action?.form?.fields, form)}
+              </div>
+              <div className="flex justify-start mt-4">
+                <SubmitButton type="submit" isSubmitting={isSubmitting}>
+                  <Trans>Confirm</Trans>
+                </SubmitButton>
+              </div>
+            </div>
+          </Form>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
   return (
     <>
       {action?.trigger_confirmation && (

diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
@@ -12,10 +12,11 @@
   "Search": "Search...",
   "View": "View",
   "Toggle columns": "Toggle columns",
+  "Fill in the fields to confirm the action": "Fill in the fields to confirm the action",
+  "Confirm": "Confirm",
   "Are you sure?": "Are you sure?",
   "This action cannot be undone": "This action cannot be undone.",
   "Cancel": "Cancel",
-  "Confirm": "Confirm",
   "Open": "Open",
   "Something went wrong!": "Something went wrong!",
   "Pick a date": "Pick a date",

diff --git a/src/locales/pt-BR/translation.json b/src/locales/pt-BR/translation.json
@@ -12,10 +12,11 @@
   "Search": "Pesquise por palavra chave...",
   "View": "Visualizar",
   "Toggle columns": "Alternar colunas",
+  "Fill in the fields to confirm the action": "Preencha os campos para confirmar a ação",
+  "Confirm": "Confirmar",
   "Are you sure?": "Você tem certeza?",
-  "This action cannot be undone.": "Esta ação não pode ser desfeita.",
+  "This action cannot be undone": "Esta ação não pode ser desfeita.",
   "Cancel": "Cancelar",
-  "Confirm": "Confirmar",
   "Open": "Abrir",
   "Something went wrong!": "Algo deu errado!",
   "Pick a date": "Escolha uma data",

diff --git a/src/locales/pt-BR/translation_old.json b/src/locales/pt-BR/translation_old.json
@@ -0,0 +1,3 @@
+{
+  "This action cannot be undone.": "Esta ação não pode ser desfeita."
+}