Add refresh on dialog client and add options on example (#448)

premieroctet · Sep 30, 2024 · 89b38df · 89b38df
1 parent 017a2e0
commit 89b38df
Show file tree

Hide file tree

Showing 8 changed files with 143 additions and 9 deletions.
diff --git a/.changeset/seven-ties-mate.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,