82 lines
3.6 KiB
TypeScript
82 lines
3.6 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { useEffect, useState } from "react";
|
||
|
|
import { Button } from "../ui/button";
|
||
|
|
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
|
||
|
|
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||
|
|
import { Label } from "../ui/label";
|
||
|
|
import axios from "axios";
|
||
|
|
|
||
|
|
export interface ConnectionDefault {
|
||
|
|
type: string,
|
||
|
|
connections: { name: string, clientId: string, token: string, type: string, scope: string, expiresAt: Date }[]
|
||
|
|
}
|
||
|
|
|
||
|
|
export const ConnectionDefaultElement = ({
|
||
|
|
type,
|
||
|
|
connections,
|
||
|
|
}: ConnectionDefault) => {
|
||
|
|
const [connection, setConnection] = useState<{ name: string, clientId: string, token: string, type: string, scope: string, expiresAt: Date } | undefined>(undefined)
|
||
|
|
const [open, setOpen] = useState(false)
|
||
|
|
|
||
|
|
const OnDefaultConnectionUpdate = function (con: { name: string, clientId: string, token: string, type: string, scope: string, expiresAt: Date }) {
|
||
|
|
if (connection && con.name == connection.name)
|
||
|
|
return;
|
||
|
|
|
||
|
|
axios.put('/api/connection/default', { name: con.name, type: con.type })
|
||
|
|
.then(d => {
|
||
|
|
setConnection(con)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const con = connections.filter((c: any) => c.type == type && c.default)
|
||
|
|
if (con.length > 0)
|
||
|
|
OnDefaultConnectionUpdate(con[0])
|
||
|
|
console.log('default', type, connections.filter(c => c.type == type).length > 0)
|
||
|
|
}, [])
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className={"bg-green-200 p-4 rounded-lg block m-5 max-w-[230px] " + (connections.filter(c => c.type == type).length > 0 ? 'visible' : 'hidden')}>
|
||
|
|
<Popover
|
||
|
|
open={open}
|
||
|
|
onOpenChange={setOpen}>
|
||
|
|
<PopoverTrigger asChild>
|
||
|
|
<div className="flex flex-col flex-1">
|
||
|
|
<Label className="text-base text-black">{type.charAt(0).toUpperCase() + type.substring(1)}</Label>
|
||
|
|
<Button
|
||
|
|
variant="outline"
|
||
|
|
role="combobox"
|
||
|
|
aria-expanded={open}
|
||
|
|
className={"w-[200px] justify-between"}
|
||
|
|
>{!connection ? "Select " + type.charAt(0).toUpperCase() + type.substring(1) + " connection..." : connection.name}</Button>
|
||
|
|
</div>
|
||
|
|
</PopoverTrigger>
|
||
|
|
<PopoverContent>
|
||
|
|
<Command>
|
||
|
|
<CommandInput
|
||
|
|
placeholder="Filter connections..."
|
||
|
|
autoFocus={true} />
|
||
|
|
<CommandList>
|
||
|
|
<CommandEmpty>No action found.</CommandEmpty>
|
||
|
|
<CommandGroup>
|
||
|
|
{connections.filter(c => c.type == type).map(c => (
|
||
|
|
<CommandItem
|
||
|
|
value={c.name}
|
||
|
|
key={c.name}
|
||
|
|
onSelect={(value) => {
|
||
|
|
OnDefaultConnectionUpdate(c)
|
||
|
|
setOpen(false)
|
||
|
|
}}>
|
||
|
|
{c.name}
|
||
|
|
</CommandItem>
|
||
|
|
))}
|
||
|
|
</CommandGroup>
|
||
|
|
</CommandList>
|
||
|
|
</Command>
|
||
|
|
</PopoverContent>
|
||
|
|
</Popover>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|