import React, { useState } from "react"; import Image from "next/image"; import { useRouter } from "next/router"; import useSWR from "swr"; // headless ui import { Transition, Combobox } from "@headlessui/react"; // services import workspaceService from "services/workspace.service"; // types import type { Props } from "./types"; // fetch-keys import { WORKSPACE_MEMBERS } from "constants/fetch-keys"; const SearchListbox: React.FC = ({ title, options, onChange, value, multiple: canSelectMultiple, icon, optionsFontsize, buttonClassName, optionsClassName, assignee = false, }) => { const [query, setQuery] = useState(""); const router = useRouter(); const { workspaceSlug } = router.query; const filteredOptions = query === "" ? options : options?.filter((option) => option.display.toLowerCase().includes(query.toLowerCase())); const props: any = { value, onChange, }; if (canSelectMultiple) { props.value = props.value ?? []; props.onChange = (value: string[]) => { onChange(value); }; props.multiple = true; } const { data: people } = useSWR( workspaceSlug ? WORKSPACE_MEMBERS(workspaceSlug as string) : null, workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug as string) : null ); const userAvatar = (userId: string) => { const user = people?.find((p) => p.member.id === userId); if (!user) return; if (user.member.avatar && user.member.avatar !== "") { return (
avatar
); } else return (
{user.member.first_name && user.member.first_name !== "" ? user.member.first_name.charAt(0) : user.member.email.charAt(0)}
); }; return ( {({ open }: any) => ( <> {title} {icon ?? null} {Array.isArray(value) ? value .map((v) => options?.find((option) => option.value === v)?.display) .join(", ") || title : options?.find((option) => option.value === value)?.display || title} setQuery(event.target.value)} placeholder="Search" displayValue={(assigned: any) => assigned?.name} />
{filteredOptions ? ( filteredOptions.length > 0 ? ( filteredOptions.map((option) => ( `${ active ? "bg-indigo-50" : "" } flex cursor-pointer select-none items-center gap-2 truncate p-2 text-gray-900` } value={option.value} > {assignee && userAvatar(option.value)} {option.element ?? option.display} )) ) : (

No {title.toLowerCase()} found

) ) : (

Loading...

)}
)}
); }; export default SearchListbox;