From e2c7647cdf54923e9307fdd936859888a73b87ee Mon Sep 17 00:00:00 2001
From: abiyasa05 <abiyasap24@gmail.com>
Date: Fri, 29 Nov 2024 09:01:40 +0700
Subject: [PATCH] fix: update button on aspect management using shadcn

---
 .../_dashboardLayout/aspect/index.lazy.tsx    | 58 ++++++++++---------
 1 file changed, 32 insertions(+), 26 deletions(-)

diff --git a/apps/frontend/src/routes/_dashboardLayout/aspect/index.lazy.tsx b/apps/frontend/src/routes/_dashboardLayout/aspect/index.lazy.tsx
index 9add598..b9d18a2 100644
--- a/apps/frontend/src/routes/_dashboardLayout/aspect/index.lazy.tsx
+++ b/apps/frontend/src/routes/_dashboardLayout/aspect/index.lazy.tsx
@@ -8,6 +8,7 @@ import { Flex } from "@mantine/core";
 import createActionButtons from "@/utils/createActionButton";
 import { TbEye, TbPencil, TbTrash } from "react-icons/tb";
 import AspectDeleteModal from "@/modules/aspectManagement/modals/AspectDeleteModal";
+import { Button } from "@/shadcn/components/ui/button";
 
 export const Route = createLazyFileRoute("/_dashboardLayout/aspect/")({
     component: AspectPage,
@@ -18,6 +19,13 @@ type DataType = ExtractQueryDataType<typeof aspectQueryOptions>;
 const columnHelper = createColumnHelper<DataType>();
 
 export default function AspectPage() {
+    // Function to update URL query string without refreshing
+    const updateQueryString = (key: string, value: string) => {
+        const searchParams = new URLSearchParams(window.location.search);
+        searchParams.set(key, value);
+        window.history.pushState({}, "", `?${searchParams.toString()}`);
+    };
+
     return (
         <PageTemplate
             title="Manajemen Aspek"
@@ -30,7 +38,7 @@ export default function AspectPage() {
                     cell: (props) => props.row.index + 1,
                 }),
 
-                // Aspect columns
+                // Aspect Columns
                 columnHelper.display({
                     header: "Nama Aspek",
                     cell: (props) => props.row.original.name || "Tidak ada Aspek",
@@ -60,31 +68,29 @@ export default function AspectPage() {
                 columnHelper.display({
                     header: "Aksi",
                     cell: (props) => (
-                        <Flex gap="xs">
-                            {createActionButtons([
-                                {
-                                    label: "Detail",
-                                    permission: true,
-                                    action: `?detail=${props.row.original.id}`,
-                                    color: "black",
-                                    icon: <TbEye />,
-                                },
-                                {
-                                    label: "Ubah",
-                                    permission: true,
-                                    action: `?edit=${props.row.original.id}`,
-                                    color: "black",
-                                    icon: <TbPencil />,
-                                },
-                                {
-                                    label: "Hapus",
-                                    permission: true,
-                                    action: `?delete=${props.row.original.id}`,
-                                    color: "black",
-                                    icon: <TbTrash />,
-                                },
-                            ])}
-                        </Flex>
+                        <div className="flex flex-row w-fit items-center rounded gap-2">
+                            <Button
+                                variant="ghost"
+                                className="w-fit items-center hover:bg-gray-300 border"
+                                onClick={() => updateQueryString("detail", props.row.original.id)}
+                            >
+                                <TbEye className="text-black" />
+                            </Button>
+                            <Button
+                                variant="ghost"
+                                className="w-fit items-center hover:bg-gray-300 border"
+                                onClick={() => updateQueryString("edit", props.row.original.id)}
+                            >
+                                <TbPencil className="text-black" />
+                            </Button>
+                            <Button
+                                variant="ghost"
+                                className="w-fit items-center hover:bg-gray-300 border"
+                                onClick={() => updateQueryString("delete", props.row.original.id)}
+                            >
+                                <TbTrash className="text-black" />
+                            </Button>
+                        </div>
                     ),
                 }),
             ]}