konobangu/apps/webui/src/presentation/routes/_app/subscriptions/-credential3rd-select.tsx

94 lines
2.6 KiB
TypeScript

import { Button } from '@/components/ui/button';
import { SelectContent, SelectItem } from '@/components/ui/select';
import { GET_CREDENTIAL_3RD } from '@/domains/recorder/schema/credential3rd';
import {
type Credential3rdTypeEnum,
type GetCredential3rdQuery,
type GetCredential3rdQueryVariables,
OrderByEnum,
} from '@/infra/graphql/gql/graphql';
import { useQuery } from '@apollo/client';
import { AlertCircle, Loader2, RefreshCw } from 'lucide-react';
import type { ComponentProps } from 'react';
export interface Credential3rdSelectContentProps
extends ComponentProps<typeof SelectContent> {
credentialType: Credential3rdTypeEnum;
}
export function Credential3rdSelectContent({
credentialType,
...props
}: Credential3rdSelectContentProps) {
const { data, loading, error, refetch } = useQuery<
GetCredential3rdQuery,
GetCredential3rdQueryVariables
>(GET_CREDENTIAL_3RD, {
fetchPolicy: 'cache-and-network',
nextFetchPolicy: 'cache-and-network',
variables: {
filters: {
credentialType: {
eq: credentialType,
},
},
orderBy: {
createdAt: OrderByEnum.Desc,
},
pagination: {
page: {
page: 0,
limit: 100,
},
},
},
});
const credentials = data?.credential3rd?.nodes ?? [];
return (
<SelectContent {...props}>
{loading && (
<div className="flex items-center justify-center py-6">
<Loader2 className="h-4 w-4 animate-spin" />
<span className="ml-2 text-muted-foreground text-sm">Loading...</span>
</div>
)}
{error && (
<div className="flex flex-col items-center gap-2 py-6">
<div className="flex items-center text-destructive">
<AlertCircle className="h-4 w-4" />
<span className="ml-2 text-sm">Failed to load credentials</span>
</div>
<Button
variant="outline"
size="sm"
onClick={() => refetch()}
className="flex items-center gap-1"
>
<RefreshCw className="h-3 w-3" />
Retry
</Button>
</div>
)}
{!loading &&
!error &&
(credentials.length === 0 ? (
<div className="py-6 text-center">
<span className="text-muted-foreground text-sm">
No credentials found
</span>
</div>
) : (
credentials.map((credential) => (
<SelectItem key={credential.id} value={credential.id.toString()}>
{credential.username}
</SelectItem>
))
))}
</SelectContent>
);
}