Pull Request branch dev-clone to main #1
|
|
@ -1,72 +0,0 @@
|
||||||
import client from "@/honoClient";
|
|
||||||
import fetchRPC from "@/utils/fetchRPC";
|
|
||||||
import { queryOptions } from "@tanstack/react-query";
|
|
||||||
import { InferRequestType } from "hono";
|
|
||||||
|
|
||||||
export const questionsQueryOptions = (page: number, limit: number, q?: string) =>
|
|
||||||
queryOptions({
|
|
||||||
queryKey: ["questions", { page, limit, q }],
|
|
||||||
queryFn: async () => {
|
|
||||||
const result = await fetchRPC(
|
|
||||||
client.assessments.getAllQuestions.$get({
|
|
||||||
query: {
|
|
||||||
limit: String(limit),
|
|
||||||
page: String(page),
|
|
||||||
q,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
);
|
|
||||||
console.log('Result from fetchRPC:', result);
|
|
||||||
return result;
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
export const getUserByIdQueryOptions = (userId: string | undefined) =>
|
|
||||||
queryOptions({
|
|
||||||
queryKey: ["user", userId],
|
|
||||||
queryFn: () =>
|
|
||||||
fetchRPC(
|
|
||||||
client.users[":id"].$get({
|
|
||||||
param: {
|
|
||||||
id: userId!,
|
|
||||||
},
|
|
||||||
query: {},
|
|
||||||
})
|
|
||||||
),
|
|
||||||
enabled: Boolean(userId),
|
|
||||||
});
|
|
||||||
|
|
||||||
export const createUser = async (
|
|
||||||
form: InferRequestType<typeof client.users.$post>["form"]
|
|
||||||
) => {
|
|
||||||
return await fetchRPC(
|
|
||||||
client.users.$post({
|
|
||||||
form,
|
|
||||||
})
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const updateUser = async (
|
|
||||||
form: InferRequestType<(typeof client.users)[":id"]["$patch"]>["form"] & {
|
|
||||||
id: string;
|
|
||||||
}
|
|
||||||
) => {
|
|
||||||
return await fetchRPC(
|
|
||||||
client.users[":id"].$patch({
|
|
||||||
param: {
|
|
||||||
id: form.id,
|
|
||||||
},
|
|
||||||
form,
|
|
||||||
})
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const deleteUser = async (id: string) => {
|
|
||||||
return await fetchRPC(
|
|
||||||
client.users[":id"].$delete({
|
|
||||||
param: { id },
|
|
||||||
form: {},
|
|
||||||
})
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
@ -1,131 +0,0 @@
|
||||||
import { createLazyFileRoute } from '@tanstack/react-router'
|
|
||||||
|
|
||||||
import { Button } from "@/shadcn/components/ui/button"
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardFooter,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/shadcn/components/ui/card"
|
|
||||||
import { Label } from "@/shadcn/components/ui/label"
|
|
||||||
import { RadioGroup, RadioGroupItem } from "@/shadcn/components/ui/radio-group"
|
|
||||||
// import ExtractQueryDataType from '@/types/ExtractQueryDataType'
|
|
||||||
// import { createColumnHelper } from '@tanstack/react-table'
|
|
||||||
import { questionsQueryOptions } from "@/modules/assessmentsManagement/queries/assessmentsQueries";
|
|
||||||
// import { useForm } from '@mantine/form'
|
|
||||||
import { useQuery } from '@tanstack/react-query'
|
|
||||||
|
|
||||||
// type DataType = ExtractQueryDataType<typeof getAllAssessmentsQueryOptions>;
|
|
||||||
// const columnHelper = useForm<DataType>();
|
|
||||||
|
|
||||||
export function CardWithAssessment() {
|
|
||||||
// const { handleSubmit, form } = useForm<DataType>();
|
|
||||||
|
|
||||||
const { page = 1, limit = 10, q = '' } = {}
|
|
||||||
|
|
||||||
const { data, isLoading, isError } = useQuery(questionsQueryOptions(page, limit, q));
|
|
||||||
|
|
||||||
console.log(data)
|
|
||||||
|
|
||||||
if (isLoading) return <div>Loading...</div>;
|
|
||||||
if (isError) return <div>Error fetching data</div>;
|
|
||||||
|
|
||||||
// const groupedQuestions = data?.reduce((acc, item) => {
|
|
||||||
// const { subAspectId, subAspectName } = item;
|
|
||||||
// if (!acc[subAspectId]) {
|
|
||||||
// acc[subAspectId] = {
|
|
||||||
// subAspectName,
|
|
||||||
// questions: [],
|
|
||||||
// };
|
|
||||||
// }
|
|
||||||
// acc[subAspectId].questions.push(item);
|
|
||||||
// return acc;
|
|
||||||
// }, {} as Record<string, { subAspectName: string, questions: DataType[] }>);
|
|
||||||
|
|
||||||
|
|
||||||
const renderQuestions = () => {
|
|
||||||
return data?.data.map((subAspect) => (
|
|
||||||
<div key={subAspect.subAspectId}>
|
|
||||||
<h2 className="text-lg font-bold mb-4">{subAspect.subAspectName}</h2>
|
|
||||||
{data?.data.map((question) => (
|
|
||||||
<div key={question.questionId} className="mb-6">
|
|
||||||
<Label className='text-base font-semibold' htmlFor={`question-${question.questionId}`}>
|
|
||||||
{question.questionText}
|
|
||||||
</Label>
|
|
||||||
<RadioGroup className='gap-y-3 mt-2' defaultValue="">
|
|
||||||
{data?.data.map((option) => (
|
|
||||||
<div key={option.optionId} className="flex items-center space-x-2">
|
|
||||||
<RadioGroupItem value={option.optionText} id={`option-${option.optionId}`} />
|
|
||||||
<Label htmlFor={`option-${option.optionId}`}>{option.questionText}</Label>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</RadioGroup>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
));
|
|
||||||
};
|
|
||||||
|
|
||||||
const renderQuestionNumbers = () => {
|
|
||||||
const questionNumbers: number[] = [];
|
|
||||||
data?.data.forEach((subAspect) => {
|
|
||||||
data?.data.forEach((question, index) => {
|
|
||||||
questionNumbers.push(index + 1);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
return questionNumbers.map((num) => (
|
|
||||||
<Button key={num} className='w-12 h-12' variant="outline">
|
|
||||||
{num}
|
|
||||||
</Button>
|
|
||||||
));
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card className="w-full flex">
|
|
||||||
<div className='flex-none w-3/5 border-r-2'>
|
|
||||||
<CardHeader className='border-b-2'>
|
|
||||||
<CardTitle className='text-xl'>Pertanyaan</CardTitle>
|
|
||||||
<CardDescription className='text-sm italic'>
|
|
||||||
Bacalah pertanyaan dengan hati-hati dan jawablah dengan teliti!
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className='flex'>
|
|
||||||
<div className="w-full mt-5">
|
|
||||||
<form>
|
|
||||||
{renderQuestions()}
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
<CardFooter className="flex gap-3">
|
|
||||||
<Button variant="outline">Back</Button>
|
|
||||||
<Button>Next</Button>
|
|
||||||
</CardFooter>
|
|
||||||
</div>
|
|
||||||
<div className='flex-1'>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle className='text-xl ml-7'>Daftar Nomor</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<div className="w-full">
|
|
||||||
<div className="flex flex-wrap gap-3 p-1 justify-center">
|
|
||||||
{renderQuestionNumbers()}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export const Route = createLazyFileRoute('/_dashboardLayout/assessments/')({
|
|
||||||
component: () =>
|
|
||||||
<div>
|
|
||||||
<h1 className="font-semibold text-2xl text-gray-800 dark:text-white leading-tight mb-5">
|
|
||||||
Halaman Assessments
|
|
||||||
</h1>
|
|
||||||
<CardWithAssessment />
|
|
||||||
</div>
|
|
||||||
})
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
import { createFileRoute } from '@tanstack/react-router'
|
|
||||||
|
|
||||||
export const Route = createFileRoute('/_dashboardLayout/assessments/')({
|
|
||||||
component: () => <div>Hello /_dashboardLayout/assessments/!</div>
|
|
||||||
})
|
|
||||||
Loading…
Reference in New Issue
Block a user