External/portabase
1
0
Fork 0
mirror of https://github.com/Portabase/portabase.git synced 2026-07-14 11:16:13 +02:00
Code Issues Packages Projects Releases Wiki Activity

update: new org combobox

Browse Source
This commit is contained in:
Théo LAGACHE
2026-01-28 13:51:14 +01:00
parent 0e7ebb79db
commit 1760c1b852
1 changed files with 143 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/wrappers/dashboard/organization/organization-combobox.tsx
+143 -40
View File
@@ -1,29 +1,39 @@
"use client"
import {ComboBox} from "@/components/wrappers/common/combobox";
import {useSidebar} from "@/components/ui/sidebar";
import {useRouter} from "next/navigation";
import {authClient} from "@/lib/auth/auth-client";
import {CreateOrganizationModal} from "@/components/wrappers/dashboard/organization/create-organisation-modal";
import {useState} from "react";
import * as React from "react"
import { Building2, Check, ChevronsUpDown, Plus } from "lucide-react"
import { useRouter } from "next/navigation"
import { authClient } from "@/lib/auth/auth-client"
import { cn } from "@/lib/utils"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
SidebarMenuButton,
useSidebar,
} from "@/components/ui/sidebar"
import { CreateOrganizationModal } from "@/components/wrappers/dashboard/organization/create-organisation-modal"
import { Skeleton } from "@/components/ui/skeleton"
export function OrganizationCombobox() {
const router = useRouter();
const {state} = useSidebar();
const {data: organizations, refetch} = authClient.useListOrganizations();
const {data: activeOrganization, refetch: refetchActiveOrga} = authClient.useActiveOrganization();
const [openModal, setOpenModal] = useState(false);
const router = useRouter()
const { isMobile, state } = useSidebar()
const { data: organizations, isPending: isPendingList, refetch } = authClient.useListOrganizations()
const { data: activeOrganization, isPending: isPendingActive, refetch: refetchActiveOrga } = authClient.useActiveOrganization()
const [openModal, setOpenModal] = React.useState(false)
const [isOpen, setIsOpen] = React.useState(false)
// if (!organizations) return null;
// const values = organizations.map(org => ({ value: org.slug, label: org.name }));
const values = organizations?.map(org => ({ value: org.slug, label: org.name })) ?? [];
const onValueChange = async (slug: string) => {
await authClient.organization.setActive({ organizationSlug: slug });
router.refresh();
};
const handleSelect = async (slug: string) => {
if (activeOrganization?.slug === slug) return
await authClient.organization.setActive({ organizationSlug: slug })
router.refresh()
setIsOpen(false)
}
const handleReload = () => {
refetch();
@@ -31,23 +41,116 @@ export function OrganizationCombobox() {
router.refresh();
};
return (
<>
<CreateOrganizationModal
open={openModal}
onSuccess={handleReload}
onOpenChange={setOpenModal}
/>
{state === "expanded" && (
<ComboBox
sideBar
values={values}
defaultValue={activeOrganization?.slug}
onValueChangeAction={onValueChange}
onAddItemAction={() => setOpenModal(true)}
addItemLabel="Create new organization"
const orgs = organizations || []
if (isPendingList || isPendingActive) {
return (
<SidebarMenuButton size="lg" className="pointer-events-none">
<Skeleton className="size-8 rounded-lg shrink-0" />
<div className="flex flex-col gap-1.5 flex-1 overflow-hidden">
<Skeleton className="h-4 w-24" />
<Skeleton className="h-3 w-16" />
</div>
<Skeleton className="size-4 shrink-0" />
</SidebarMenuButton>
)
}
return (
<>
<CreateOrganizationModal
open={openModal}
onSuccess={handleReload}
onOpenChange={setOpenModal}
/>
)}
<DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
<DropdownMenuTrigger asChild>
<SidebarMenuButton
size="lg"
className={cn(
"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground transition-all duration-200 ease-in-out",
state === "collapsed" && "justify-center p-0"
)}
>
<div className={cn(
"flex aspect-square size-8 items-center justify-center rounded-lg text-white shadow-sm transition-transform duration-200",
activeOrganization?.logo ? "bg-transparent" : "bg-orange-500",
isOpen && "scale-105"
)}>
{activeOrganization?.logo ? (
<img src={activeOrganization.logo} alt={activeOrganization.name} className="size-8 rounded-lg object-cover" />
) : (
<Building2 className="size-5" />
)}
</div>
<div className="grid flex-1 text-left text-sm leading-tight group-data-[collapsible=icon]:hidden">
<span className="truncate font-semibold tracking-tight">
{activeOrganization?.name || "Select Organization"}
</span>
</div>
<ChevronsUpDown className="ml-auto size-4 opacity-50 group-data-[collapsible=icon]:hidden" />
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent
className="w-[--radix-dropdown-menu-trigger-width] min-w-64 rounded-xl border-2 border-border bg-popover shadow-none"
align="start"
side={isMobile ? "bottom" : "right"}
sideOffset={4}
>
{orgs.map((org) => {
const isActive = activeOrganization?.id === org.id;
return (
<DropdownMenuItem
key={org.id}
onClick={() => handleSelect(org.slug)}
className={cn(
"group gap-1 p-1 cursor-pointer rounded-lg mb-1 last:mb-0 transition-colors",
isActive
? "bg-orange-500/10 text-orange-600 dark:text-orange-400 border border-orange-500/20"
: "focus:bg-accent hover:bg-accent/50 border border-transparent"
)}>
<div className={cn(
"flex size-9 items-center justify-center rounded-md border shadow-sm transition-all group-hover:shadow-md",
org.logo ? "bg-transparent border-transparent" : "",
isActive && !org.logo ? "bg-orange-500 text-white border-orange-500/30" : "bg-muted/50 border-border"
)}>
{org.logo ? (
<img src={org.logo} alt={org.name} className="size-9 rounded-md object-cover" />
) : (
<Building2 className={cn(
"size-5",
isActive ? "text-white" : "text-muted-foreground"
)} />
)}
</div>
<div className="flex flex-col gap-0.5">
<span className={cn(
"text-sm max-w-42.5 truncate font-medium leading-none",
isActive ? "text-orange-600 dark:text-orange-400" : ""
)}>{org.name}</span>
</div>
{isActive && (
<div className="ml-auto flex size-5 items-center justify-center rounded-full bg-orange-500 shadow-sm">
<Check className="size-3 text-white" strokeWidth={3} />
</div>
)}
</DropdownMenuItem>
)
})}
<DropdownMenuSeparator className="my-2 bg-border/50" />
<DropdownMenuItem
className="gap-3 p-2.5 cursor-pointer text-muted-foreground focus:text-foreground group rounded-lg"
onClick={() => setOpenModal(true)}
>
<div className="flex size-9 items-center justify-center rounded-md border border-dashed border-muted-foreground/30 bg-background transition-colors group-hover:border-primary/50 group-hover:bg-primary/5">
<Plus className="size-4" />
</div>
<div className="font-medium">Create new organization</div>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</>
);
}
)
}