From 89b38df0cd59ec86d52aa83d7364cdb1a58c2a02 Mon Sep 17 00:00:00 2001
From: Regourd Colin <cregourd@premieroctet.com>
Date: Mon, 30 Sep 2024 16:57:42 +0200
Subject: [PATCH] Add refresh on dialog client and add options on example
 (#448)

---
 .changeset/seven-ties-mate.md                 |  5 ++
 apps/example/actions/addTag.ts                | 19 ++++++
 .../components/PostAddTagDialogContent.tsx    | 65 +++++++++++++++++++
 .../components/UserDetailsDialogContent.tsx   | 44 ++++++++++---
 apps/example/messages/en.json                 |  4 ++
 apps/example/messages/fr.json                 |  4 ++
 apps/example/options.tsx                      |  8 +++
 .../src/context/ClientActionDialogContext.tsx |  3 +
 8 files changed, 143 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/seven-ties-mate.md
 create mode 100644 apps/example/actions/addTag.ts
 create mode 100644 apps/example/components/PostAddTagDialogContent.tsx

diff --git a/.changeset/seven-ties-mate.md b/.changeset/seven-ties-mate.md
new file mode 100644
index 00000000..e5371787
--- /dev/null
+++ b/.changeset/seven-ties-mate.md
@@ -0,0 +1,5 @@
+---
+"@premieroctet/next-admin": patch
+---
+
+add refresh on dialog action
diff --git a/apps/example/actions/addTag.ts b/apps/example/actions/addTag.ts
new file mode 100644
index 00000000..aecbd9ed
--- /dev/null
+++ b/apps/example/actions/addTag.ts
@@ -0,0 +1,19 @@
+"use server";
+import { prisma } from "./../prisma";
+
+const addTag = async (tag: string, selectedIds?: number[]) => {
+  await prisma.post.updateMany({
+    where: {
+      id: {
+        in: selectedIds,
+      },
+    },
+    data: {
+      tags: {
+        push: tag,
+      },
+    },
+  });
+};
+
+export default addTag;
diff --git a/apps/example/components/PostAddTagDialogContent.tsx b/apps/example/components/PostAddTagDialogContent.tsx
new file mode 100644
index 00000000..eee7ed7a
--- /dev/null
+++ b/apps/example/components/PostAddTagDialogContent.tsx
@@ -0,0 +1,65 @@
+"use client";
+import { ClientActionDialogContentProps } from "@premieroctet/next-admin";
+import { BaseInput, Button } from "@premieroctet/next-admin/components";
+import { useState } from "react";
+import addTag from "../actions/addTag";
+
+type Props = ClientActionDialogContentProps<"User">;
+
+const AddTagDialog = ({ data, onClose }: Props) => {
+  const [tag, setTag] = useState("");
+  const [isPending, setIsPending] = useState(false);
+
+  const handleSubmit = () => {
+    setIsPending(true);
+    addTag(
+      tag,
+      data?.map((d) => d.id)
+    )
+      .then(() => {
+        onClose?.({
+          type: "success",
+          message: "Tag added successfully",
+        });
+
+      })
+      .catch((e) => {
+        console.error(e);
+        onClose?.({
+          type: "error",
+          message: "An error occured",
+        });
+      })
+      .finally(() => {
+        setIsPending(false);
+      });
+  };
+
+  return (
+    <div className="flex flex-col gap-4">
+      <form className="flex flex-col gap-4">
+        <div className="text-nextadmin-content-subtle dark:text-dark-nextadmin-content-subtle text-lg font-semibold">
+          Add a new tag
+        </div>
+        <BaseInput
+          type="text"
+          placeholder="Tag name"
+          className="col-span-4 row-start-3 md:col-span-2"
+          value={tag}
+          onChange={(e) => setTag(e.target.value)}
+        />
+      </form>
+
+      <div className="flex justify-between">
+        <Button variant="primary" onClick={() => onClose?.()}>
+          Close
+        </Button>
+        <Button variant="default" loading={isPending} onClick={handleSubmit}>
+          Add Tag
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default AddTagDialog;
diff --git a/apps/example/components/UserDetailsDialogContent.tsx b/apps/example/components/UserDetailsDialogContent.tsx
index 0ada4732..6bdd1d00 100644
--- a/apps/example/components/UserDetailsDialogContent.tsx
+++ b/apps/example/components/UserDetailsDialogContent.tsx
@@ -9,17 +9,43 @@ const UserDetailsDialog = ({ data, onClose }: Props) => {
     <div className="flex flex-col gap-8">
       {data?.map((user) => (
         <div className="flex flex-col gap-2" key={user.id}>
-          <h2 className="text-nextadmin-content-default dark:text-dark-nextadmin-content-default text-2xl font-semibold">
-            {user.email as string}
-          </h2>
-          <p className="text-nextadmin-content-subtle dark:text-dark-nextadmin-content-subtle">
-            {user.name as string}
-          </p>
-          <p className="text-nextadmin-content-subtle dark:text-dark-nextadmin-content-subtle">
-            {user.role as string}
-          </p>
+          <div className="flex flex-col gap-2">
+            <div className="text-nextadmin-content-subtle dark:text-dark-nextadmin-content-subtle text-lg font-semibold">
+              User Information
+            </div>
+            <div className="text-nextadmin-content-subtle/50 dark:text-dark-nextadmin-content-subtle/50 text-sm font-medium">
+              Details about the current user.
+            </div>
+          </div>
+          <div className="grid gap-4 py-4">
+            <div className="grid grid-cols-4 items-center gap-4">
+              <span className="text-nextadmin-content-subtle dark:text-dark-nextadmin-content-subtle font-medium">
+                Name:
+              </span>
+              <span className="text-nextadmin-content-subtle dark:text-dark-nextadmin-content-subtle col-span-3 font-medium">
+                {user.name as string}
+              </span>
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <span className="text-nextadmin-content-subtle dark:text-dark-nextadmin-content-subtle font-medium">
+                Email:
+              </span>
+              <span className="text-nextadmin-content-subtle dark:text-dark-nextadmin-content-subtle col-span-3">
+                {user.email as string}
+              </span>
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <span className="text-nextadmin-content-subtle dark:text-dark-nextadmin-content-subtle font-medium">
+                Role:
+              </span>
+              <span className="text-nextadmin-content-subtle dark:text-dark-nextadmin-content-subtle col-span-3">
+                {user.role as string}
+              </span>
+            </div>
+          </div>
         </div>
       ))}
+
       <div className="flex">
         <Button variant="default" onClick={() => onClose?.()}>
           Close
diff --git a/apps/example/messages/en.json b/apps/example/messages/en.json
index b0f1330e..e90d8815 100644
--- a/apps/example/messages/en.json
+++ b/apps/example/messages/en.json
@@ -5,6 +5,10 @@
         "publish": {
           "title": "Publish post",
           "success": "Post published successfully"
+        },
+        "add-tag": {
+          "title": "Add tag",
+          "success": "Tag added successfully"
         }
       },
       "user": {
diff --git a/apps/example/messages/fr.json b/apps/example/messages/fr.json
index 356f949a..b6016534 100644
--- a/apps/example/messages/fr.json
+++ b/apps/example/messages/fr.json
@@ -122,6 +122,10 @@
         "publish": {
           "title": "Publier",
           "success": "Article publié avec succès"
+        },
+        "add-tag": {
+          "title": "Ajouter un tag",
+          "success": "Tag ajouté avec succès"
         }
       },
       "user": {
diff --git a/apps/example/options.tsx b/apps/example/options.tsx
index 7f933858..db180c47 100644
--- a/apps/example/options.tsx
+++ b/apps/example/options.tsx
@@ -1,4 +1,5 @@
 import UserDetailsDialog from "@/components/UserDetailsDialogContent";
+import AddTagDialog from "@/components/PostAddTagDialogContent";
 import { NextAdminOptions } from "@premieroctet/next-admin";
 import DatePicker from "./components/DatePicker";
 import PasswordInput from "./components/PasswordInput";
@@ -222,6 +223,13 @@ export const options: NextAdminOptions = {
           successMessage: "actions.post.publish.success",
           errorMessage: "actions.post.publish.error",
         },
+        {
+          type: "dialog",
+          icon: "TagIcon",
+          id: "add-tag",
+          title: "actions.post.add-tag.title",
+          component: <AddTagDialog />,
+        },
       ],
       list: {
         exports: [
diff --git a/packages/next-admin/src/context/ClientActionDialogContext.tsx b/packages/next-admin/src/context/ClientActionDialogContext.tsx
index ca07c2a7..8a8ed220 100644
--- a/packages/next-admin/src/context/ClientActionDialogContext.tsx
+++ b/packages/next-admin/src/context/ClientActionDialogContext.tsx
@@ -7,6 +7,7 @@ import {
   useState,
 } from "react";
 import ClientActionDialog from "../components/ClientActionDialog";
+import { useRouterInternal } from "../hooks/useRouterInternal";
 import { ClientAction, MessageData, ModelName } from "../types";
 import { useMessage } from "./MessageContext";
 
@@ -30,9 +31,11 @@ const ClientActionDialogProvider = ({ children }: PropsWithChildren) => {
     useState<ClientActionDialogParams<any> | null>(null);
 
   const { showMessage } = useMessage();
+  const { router } = useRouterInternal();
 
   const onClose = (message?: MessageData) => {
     setIsOpen(false);
+    router.refresh();
     if (message) {
       showMessage({
         type: message.type,