From 10df38e7a72e0393b331744b2351a590d2f105c4 Mon Sep 17 00:00:00 2001 From: percyfikri Date: Fri, 4 Oct 2024 10:59:22 +0700 Subject: [PATCH] Update : Create Assessment Request --- .../modals/FormModal.tsx | 38 ++++++++++--------- .../queries/assessmentRequestQueries.ts | 4 +- .../src/shadcn/components/ui/button.tsx | 13 ++++++- 3 files changed, 33 insertions(+), 22 deletions(-) diff --git a/apps/frontend/src/modules/assessmentRequestManagement/modals/FormModal.tsx b/apps/frontend/src/modules/assessmentRequestManagement/modals/FormModal.tsx index 9a896d0..bb2442e 100644 --- a/apps/frontend/src/modules/assessmentRequestManagement/modals/FormModal.tsx +++ b/apps/frontend/src/modules/assessmentRequestManagement/modals/FormModal.tsx @@ -1,7 +1,7 @@ import stringToColorHex from "@/utils/stringToColorHex"; import { Avatar, - Button, + // Button, Center, Flex, Modal, @@ -9,7 +9,7 @@ import { Stack, Text } from "@mantine/core"; -// import { Button } from "@/shadcn/components/ui/button"; +import { Button } from "@/shadcn/components/ui/button"; import { useForm } from "@mantine/form"; import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; import { getRouteApi } from "@tanstack/react-router"; @@ -34,14 +34,9 @@ export default function UserFormModal() { const searchParams = routeApi.useSearch(); - const dataId = searchParams.detail || searchParams.edit; + const isModalOpen = Boolean(searchParams.create); - const isModalOpen = Boolean(dataId || searchParams.create); - - const detailId = searchParams.detail; - const editId = searchParams.edit; - - const formType = detailId ? "detail" : editId ? "edit" : "create"; + const formType = "create"; /** * CHANGE FOLLOWING: @@ -77,7 +72,6 @@ export default function UserFormModal() { }); form.setErrors({}); - // eslint-disable-next-line react-hooks/exhaustive-deps }, [userQuery.data]); const mutation = useMutation({ @@ -88,6 +82,18 @@ export default function UserFormModal() { return await createAssessmentRequest(options.data); } }, + onSuccess: () => { + // Ini akan memaksa react-query untuk mengambil data terbaru + queryClient.invalidateQueries({ queryKey: ["assessmentRequest"] }); + + notifications.show({ + message: "Permohonan Asesmen berhasil dibuat!", + color: "green", + }); + + // Menutup modal + navigate({ search: {} }); + }, onError: (error: unknown) => { console.log(error); @@ -106,7 +112,6 @@ export default function UserFormModal() { }); const handleSubmit = async (values: typeof form.values) => { - if (formType === "detail") return; if (formType === "create") { try { @@ -116,10 +121,6 @@ export default function UserFormModal() { respondentsId: values.respondentsId, }, }); - notifications.show({ - message: "Permohonan Asesmen berhasil dibuat!", - color: "green", - }); } catch (error) { console.error(error); } @@ -141,9 +142,10 @@ export default function UserFormModal() { Apakah anda yakin ingin membuat Permohonan Asesmen Baru? + {/* Fields to display data will be sent */} {createInputComponents({ disableAll: mutation.isPending, - readonlyAll: formType === "detail", + readonlyAll: formType === "create", inputs: [ { type: "text", @@ -172,15 +174,15 @@ export default function UserFormModal() { diff --git a/apps/frontend/src/modules/assessmentRequestManagement/queries/assessmentRequestQueries.ts b/apps/frontend/src/modules/assessmentRequestManagement/queries/assessmentRequestQueries.ts index 95f6923..1be2a03 100644 --- a/apps/frontend/src/modules/assessmentRequestManagement/queries/assessmentRequestQueries.ts +++ b/apps/frontend/src/modules/assessmentRequestManagement/queries/assessmentRequestQueries.ts @@ -4,7 +4,7 @@ import { queryOptions } from "@tanstack/react-query"; export const assessmentRequestQueryOptions = (page: number, limit: number, q?: string) => queryOptions({ - queryKey: ["assesmentRequest", { page, limit, q }], + queryKey: ["assessmentRequest", { page, limit, q }], queryFn: () => fetchRPC( client.assessmentRequest.$get({ @@ -19,7 +19,7 @@ export const assessmentRequestQueryOptions = (page: number, limit: number, q?: s export const createAssessmentRequest = async ({ respondentsId }: { respondentsId: string }) => { const response = await client.assessmentRequest.$post({ - json: { respondentId: respondentsId }, // pastikan key-nya sesuai dengan backend API Anda + json: { respondentId: respondentsId }, }); if (!response.ok) { diff --git a/apps/frontend/src/shadcn/components/ui/button.tsx b/apps/frontend/src/shadcn/components/ui/button.tsx index 0ba4277..33ba732 100644 --- a/apps/frontend/src/shadcn/components/ui/button.tsx +++ b/apps/frontend/src/shadcn/components/ui/button.tsx @@ -1,6 +1,7 @@ import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" +import { TbLoader2 } from "react-icons/tb" import { cn } from "@/lib/utils" @@ -37,17 +38,25 @@ export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean + isLoading?: boolean } const Button = React.forwardRef( - ({ className, variant, size, asChild = false, ...props }, ref) => { + ({ className, variant, size, asChild = false, isLoading, children, ...props }, ref) => { const Comp = asChild ? Slot : "button" return ( + > + {isLoading ? ( + // Tampilkan spinner saat loading + ) : ( + children + )} + ) } )