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