85 lines
2.1 KiB
TypeScript
85 lines
2.1 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import React from "react";
|
||
|
|
import { useQuery } from "@tanstack/react-query";
|
||
|
|
import { ControllerRenderProps, FieldValues, Path } from "react-hook-form";
|
||
|
|
import organizationApi from "@/shared/services/organization";
|
||
|
|
import { cn } from "@/shared/utils/utils";
|
||
|
|
import {
|
||
|
|
Select,
|
||
|
|
SelectContent,
|
||
|
|
SelectGroup,
|
||
|
|
SelectItem,
|
||
|
|
SelectLabel,
|
||
|
|
SelectTrigger,
|
||
|
|
SelectValue,
|
||
|
|
} from "@/shared/components/ui/select";
|
||
|
|
|
||
|
|
interface FormOrganizationSelectProps<T extends FieldValues> {
|
||
|
|
field: ControllerRenderProps<T, Path<T>>;
|
||
|
|
placeholder?: string;
|
||
|
|
className?: string;
|
||
|
|
disabled?: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const FormOrganizationSelect = <T extends FieldValues>({
|
||
|
|
field,
|
||
|
|
placeholder = "Pilih Organisasi",
|
||
|
|
className,
|
||
|
|
disabled = false,
|
||
|
|
}: FormOrganizationSelectProps<T>) => {
|
||
|
|
const { data, isLoading, error } = useQuery({
|
||
|
|
queryKey: ["organizations"],
|
||
|
|
queryFn: () =>
|
||
|
|
organizationApi.getOrganizations().then((res) => {
|
||
|
|
return res.items;
|
||
|
|
}),
|
||
|
|
staleTime: 5000,
|
||
|
|
});
|
||
|
|
|
||
|
|
if (error) {
|
||
|
|
return (
|
||
|
|
<div className="py-2 text-sm text-red-500">
|
||
|
|
Gagal memuat organisasi. Silakan coba lagi.
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Select
|
||
|
|
value={field.value?.toString()}
|
||
|
|
onValueChange={(value) => {
|
||
|
|
if (value) field.onChange(value);
|
||
|
|
}}
|
||
|
|
disabled={disabled || isLoading}
|
||
|
|
>
|
||
|
|
<SelectTrigger className={cn("w-full", className)}>
|
||
|
|
<SelectValue
|
||
|
|
placeholder={isLoading ? "Memuat organisasi..." : placeholder}
|
||
|
|
/>
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
<SelectGroup>
|
||
|
|
<SelectLabel>Organisasi</SelectLabel>
|
||
|
|
{isLoading ? (
|
||
|
|
<SelectItem value="loading" disabled>
|
||
|
|
Memuat...
|
||
|
|
</SelectItem>
|
||
|
|
) : (
|
||
|
|
data?.map((organization) => (
|
||
|
|
<SelectItem
|
||
|
|
key={organization.id}
|
||
|
|
value={organization.id.toString()}
|
||
|
|
>
|
||
|
|
{organization.name}
|
||
|
|
</SelectItem>
|
||
|
|
))
|
||
|
|
)}
|
||
|
|
</SelectGroup>
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default FormOrganizationSelect;
|