Pull Request branch dev-clone to main #1
|
|
@ -0,0 +1,97 @@
|
|||
import client from "@/honoClient";
|
||||
import { Button, Flex, Modal, Text } from "@mantine/core";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { getRouteApi, useSearch } from "@tanstack/react-router";
|
||||
import { deleteAspect } from "../queries/aspectQueries";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
import fetchRPC from "@/utils/fetchRPC";
|
||||
|
||||
const routeApi = getRouteApi("/_dashboardLayout/aspect/");
|
||||
|
||||
export default function AspectDeleteModal() {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const searchParams = useSearch({ from: "/_dashboardLayout/aspect/" }) as {
|
||||
delete: string;
|
||||
};
|
||||
|
||||
const aspectId = searchParams.delete;
|
||||
const navigate = routeApi.useNavigate();
|
||||
|
||||
const aspectQuery = useQuery({
|
||||
queryKey: ["management-aspect", aspectId],
|
||||
queryFn: async () => {
|
||||
if (!aspectId) return null;
|
||||
return await fetchRPC(
|
||||
client["management-aspect"][":id"].$get({
|
||||
param: {
|
||||
id: aspectId,
|
||||
},
|
||||
query: {},
|
||||
})
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
const mutation = useMutation({
|
||||
mutationKey: ["deleteAspectMutation"],
|
||||
mutationFn: async ({ id }: { id: string }) => {
|
||||
return await deleteAspect(id);
|
||||
},
|
||||
onError: (error: unknown) => {
|
||||
if (error instanceof Error) {
|
||||
notifications.show({
|
||||
message: error.message,
|
||||
color: "red",
|
||||
});
|
||||
}
|
||||
},
|
||||
onSuccess: () => {
|
||||
notifications.show({
|
||||
message: "Aspek berhasil dihapus.",
|
||||
color: "green",
|
||||
});
|
||||
queryClient.removeQueries({ queryKey: ["management-aspect", aspectId] });
|
||||
queryClient.invalidateQueries({ queryKey: ["management-aspect"] });
|
||||
navigate({ search: {} });
|
||||
},
|
||||
});
|
||||
|
||||
const isModalOpen = Boolean(searchParams.delete && aspectQuery.data);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
opened={isModalOpen}
|
||||
onClose={() => navigate({ search: {} })}
|
||||
title={`Konfirmasi Hapus`}
|
||||
>
|
||||
<Text size="sm">
|
||||
Apakah Anda yakin ingin menghapus aspek{" "}
|
||||
<Text span fw={700}>
|
||||
{aspectQuery.data?.name}
|
||||
</Text>
|
||||
? Tindakan ini tidak dapat diubah.
|
||||
</Text>
|
||||
|
||||
{/* Buttons */}
|
||||
<Flex justify="flex-end" align="center" gap="lg" mt="lg">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => navigate({ search: {} })}
|
||||
disabled={mutation.isPending}
|
||||
>
|
||||
Batal
|
||||
</Button>
|
||||
<Button
|
||||
variant="subtle"
|
||||
type="submit"
|
||||
color="red"
|
||||
loading={mutation.isPending}
|
||||
onClick={() => mutation.mutate({ id: aspectId })}
|
||||
>
|
||||
Hapus Aspek
|
||||
</Button>
|
||||
</Flex>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,224 @@
|
|||
import { Button, Flex, Modal, ScrollArea, TextInput, Group, Text } from "@mantine/core";
|
||||
import { useForm } from "@mantine/form";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { getRouteApi } from "@tanstack/react-router";
|
||||
import { createAspect, updateAspect, getAspectByIdQueryOptions } from "../queries/aspectQueries";
|
||||
import { TbDeviceFloppy } from "react-icons/tb";
|
||||
import { useEffect } from "react";
|
||||
import { notifications } from "@mantine/notifications";
|
||||
import FormResponseError from "@/errors/FormResponseError";
|
||||
import { createId } from "@paralleldrive/cuid2";
|
||||
|
||||
// Initialize route API
|
||||
const routeApi = getRouteApi("/_dashboardLayout/aspect/");
|
||||
|
||||
export default function AspectFormModal() {
|
||||
const queryClient = useQueryClient();
|
||||
const navigate = routeApi.useNavigate();
|
||||
const searchParams = routeApi.useSearch();
|
||||
const dataId = searchParams.detail || searchParams.edit;
|
||||
const isModalOpen = Boolean(dataId || searchParams.create);
|
||||
const formType = searchParams.detail ? "detail" : searchParams.edit ? "edit" : "create";
|
||||
|
||||
// Fetch aspect data if editing or viewing details
|
||||
const aspectQuery = useQuery(getAspectByIdQueryOptions(dataId));
|
||||
|
||||
const modalTitle = `${formType.charAt(0).toUpperCase() + formType.slice(1)} Aspek`;
|
||||
|
||||
const form = useForm({
|
||||
initialValues: {
|
||||
id: "",
|
||||
name: "",
|
||||
subAspects: [{ id: "", name: "", questionCount: 0 }] as { id: string; name: string; questionCount: number }[],
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const data = aspectQuery.data;
|
||||
|
||||
if (!data) {
|
||||
form.reset();
|
||||
return;
|
||||
}
|
||||
|
||||
form.setValues({
|
||||
id: data.id,
|
||||
name: data.name,
|
||||
subAspects: data.subAspects?.map(subAspect => ({
|
||||
id: subAspect.id || "",
|
||||
name: subAspect.name,
|
||||
questionCount: subAspect.questionCount || 0,
|
||||
})) || [],
|
||||
});
|
||||
|
||||
form.setErrors({});
|
||||
}, [aspectQuery.data]);
|
||||
|
||||
const mutation = useMutation({
|
||||
mutationKey: ["aspectMutation"],
|
||||
mutationFn: async (
|
||||
options:
|
||||
| { action: "edit"; data: Parameters<typeof updateAspect>[0] }
|
||||
| { action: "create"; data: Parameters<typeof createAspect>[0] }
|
||||
) => {
|
||||
return options.action === "edit"
|
||||
? await updateAspect(options.data)
|
||||
: await createAspect(options.data);
|
||||
},
|
||||
onError: (error: unknown) => {
|
||||
if (error instanceof FormResponseError) {
|
||||
form.setErrors(error.formErrors);
|
||||
return;
|
||||
}
|
||||
|
||||
if (error instanceof Error) {
|
||||
notifications.show({
|
||||
message: error.message,
|
||||
color: "red",
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
type CreateAspectPayload = {
|
||||
name: string;
|
||||
subAspects?: string;
|
||||
};
|
||||
|
||||
type EditAspectPayload = {
|
||||
id: string;
|
||||
name: string;
|
||||
subAspects?: string;
|
||||
};
|
||||
|
||||
const handleSubmit = async (values: typeof form.values) => {
|
||||
try {
|
||||
let payload: CreateAspectPayload | EditAspectPayload;
|
||||
|
||||
if (formType === "create") {
|
||||
payload = {
|
||||
name: values.name,
|
||||
subAspects: values.subAspects.length > 0
|
||||
? JSON.stringify(
|
||||
values.subAspects
|
||||
.filter(subAspect => subAspect.name.trim() !== "")
|
||||
.map(subAspect => subAspect.name)
|
||||
)
|
||||
: "",
|
||||
};
|
||||
await createAspect(payload);
|
||||
} else if (formType === "edit") {
|
||||
payload = {
|
||||
id: values.id,
|
||||
name: values.name,
|
||||
subAspects: values.subAspects.length > 0
|
||||
? JSON.stringify(
|
||||
values.subAspects
|
||||
.filter(subAspect => subAspect.name.trim() !== "")
|
||||
.map(subAspect => ({
|
||||
id: subAspect.id || "",
|
||||
name: subAspect.name,
|
||||
questionCount: subAspect.questionCount || 0,
|
||||
}))
|
||||
)
|
||||
: "",
|
||||
};
|
||||
await updateAspect(payload);
|
||||
}
|
||||
|
||||
queryClient.invalidateQueries({ queryKey: ["management-aspect"] });
|
||||
|
||||
notifications.show({
|
||||
message: `Aspek ${formType === "create" ? "berhasil dibuat" : "berhasil diedit"}`,
|
||||
});
|
||||
|
||||
navigate({ search: {} });
|
||||
} catch (error) {
|
||||
console.error("Error during submit:", error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
opened={isModalOpen}
|
||||
onClose={() => navigate({ search: {} })}
|
||||
title={modalTitle}
|
||||
scrollAreaComponent={ScrollArea.Autosize}
|
||||
size="md"
|
||||
>
|
||||
<form onSubmit={form.onSubmit((values) => handleSubmit(values))}>
|
||||
<TextInput
|
||||
type="text"
|
||||
label="Nama"
|
||||
{...form.getInputProps("name")}
|
||||
disabled={formType === "detail"}
|
||||
/>
|
||||
|
||||
{form.values.subAspects.map((field, index) => (
|
||||
<Group key={index} mt="md" align="center">
|
||||
<TextInput
|
||||
type="text"
|
||||
label={`Sub Aspek ${index + 1}`}
|
||||
value={field.name}
|
||||
onChange={(event) => {
|
||||
const newSubAspects = [...form.values.subAspects];
|
||||
newSubAspects[index] = { ...newSubAspects[index], name: event.target.value };
|
||||
form.setValues({ subAspects: newSubAspects });
|
||||
}}
|
||||
disabled={formType === "detail"}
|
||||
/>
|
||||
<Text>Jumlah Soal: {field.questionCount}</Text>
|
||||
{formType !== "detail" && (
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
const newSubAspects = form.values.subAspects.filter((_, i) => i !== index);
|
||||
form.setValues({ subAspects: newSubAspects });
|
||||
}}
|
||||
>
|
||||
Hapus
|
||||
</Button>
|
||||
)}
|
||||
</Group>
|
||||
))}
|
||||
|
||||
{formType !== "detail" && (
|
||||
<Button
|
||||
variant="outline"
|
||||
mt="md"
|
||||
onClick={() => {
|
||||
const newSubAspects = [
|
||||
...form.values.subAspects,
|
||||
{ id: createId(), name: "", questionCount: 0 }
|
||||
];
|
||||
form.setValues({ subAspects: newSubAspects });
|
||||
}}
|
||||
>
|
||||
Tambah Sub Aspek
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{/* Buttons */}
|
||||
<Flex justify="flex-end" align="center" gap="lg" mt="lg">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => navigate({ search: {} })}
|
||||
disabled={mutation.isPending}
|
||||
>
|
||||
Tutup
|
||||
</Button>
|
||||
{formType !== "detail" && (
|
||||
<Button
|
||||
variant="filled"
|
||||
leftSection={<TbDeviceFloppy size={20} />}
|
||||
type="submit"
|
||||
loading={mutation.isPending}
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
)}
|
||||
</Flex>
|
||||
</form>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user