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

Ready for release soon.

Browse Source
This commit is contained in:
charlesgauthereau
2025-07-17 09:28:57 +02:00
parent 7abdcd57f9
commit 4d52419247
18 changed files with 1779 additions and 3335 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/wrappers/common/combobox.tsx
+86 -61
View File
@@ -1,17 +1,17 @@
"use client";
import { useEffect, useState } from "react";
import {useEffect, useState} from "react";
import { Check, ChevronDown } from "lucide-react";
import {Check, ChevronDown} from "lucide-react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { FormControl } from "@/components/ui/form";
import { SidebarMenuButton } from "@/components/ui/sidebar";
import { Separator } from "@/components/ui/separator";
import { CreateOrganizationModal } from "@/components/wrappers/dashboard/organization/create-organisation-modal";
import {cn} from "@/lib/utils";
import {Button} from "@/components/ui/button";
import {Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList} from "@/components/ui/command";
import {Popover, PopoverContent, PopoverTrigger} from "@/components/ui/popover";
import {FormControl} from "@/components/ui/form";
import {SidebarMenuButton} from "@/components/ui/sidebar";
import {Separator} from "@/components/ui/separator";
import {CreateOrganizationModal} from "@/components/wrappers/dashboard/organization/create-organisation-modal";
export type comboBoxProps = {
values: Array<{ value: string; label: string }>;
@@ -19,10 +19,18 @@ export type comboBoxProps = {
onValueChange?: any;
searchField?: boolean;
sideBar?: boolean;
reload?: () => void;
};
export function ComboBox(props: comboBoxProps) {
const { values: choices, defaultValue: defaultChoice = "", onValueChange, searchField = false, sideBar = false } = props;
const {
values: choices,
defaultValue: defaultChoice = "",
onValueChange,
searchField = false,
sideBar = false
} = props;
const [value, setValue] = useState<string>();
@@ -31,53 +39,68 @@ export function ComboBox(props: comboBoxProps) {
}, [defaultChoice]);
const [open, setOpen] = useState(false);
const [openModal, setOpenModal] = useState(false);
return (
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
{sideBar ? (
<SidebarMenuButton>
{value ? choices.find((choice) => choice.value === value)?.label : "Select choice..."}
<ChevronDown className="ml-auto" />
</SidebarMenuButton>
) : (
<Button variant="outline" role="combobox" aria-expanded={open} className="w-full justify-between">
{value ? choices.find((choice) => choice.value === value)?.label : "Select choice..."}
<ChevronDown className="opacity-50" />
</Button>
)}
</PopoverTrigger>
<PopoverContent className="p-0 popover-content-width-full">
<Command>
{searchField ? <CommandInput placeholder="Search choice..." className="h-9" /> : null}
<CommandList>
<CommandEmpty>No choice found.</CommandEmpty>
<CommandGroup>
{choices.map((choice) => (
<CommandItem
key={choice.value}
value={choice.value}
onSelect={(currentValue) => {
setValue(currentValue);
onValueChange(currentValue);
setOpen(false);
}}
>
{choice.label}
<Check className={cn("ml-auto", value === choice.value ? "opacity-100" : "opacity-0")} />
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
<Separator />
{sideBar ? (
<CreateOrganizationModal>
<SidebarMenuButton>+ Create new organization</SidebarMenuButton>
</CreateOrganizationModal>
) : null}
</PopoverContent>
</Popover>
<div>
<CreateOrganizationModal
open={openModal}
onSuccess={() => {
props.reload?.();
}}
onOpenChange={setOpenModal}
/>
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
{sideBar ? (
<SidebarMenuButton>
{value ? choices.find((choice) => choice.value === value)?.label : "Select choice..."}
<ChevronDown className="ml-auto"/>
</SidebarMenuButton>
) : (
<Button variant="outline" role="combobox" aria-expanded={open}
className="w-full justify-between">
{value ? choices.find((choice) => choice.value === value)?.label : "Select choice..."}
<ChevronDown className="opacity-50"/>
</Button>
)}
</PopoverTrigger>
<PopoverContent className="p-0 popover-content-width-full">
<Command>
{searchField ? <CommandInput placeholder="Search choice..." className="h-9"/> : null}
<CommandList>
<CommandEmpty>No choice found.</CommandEmpty>
<CommandGroup>
{choices.map((choice) => (
<CommandItem
key={choice.value}
value={choice.value}
onSelect={(currentValue) => {
setValue(currentValue);
onValueChange(currentValue);
setOpen(false);
}}
>
{choice.label}
<Check
className={cn("ml-auto", value === choice.value ? "opacity-100" : "opacity-0")}/>
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
<Separator/>
{sideBar ? (
<SidebarMenuButton onClick={() => {
setOpen(false)
setOpenModal(true)
}
}>+ Create new organization</SidebarMenuButton>
) : null}
</PopoverContent>
</Popover>
</div>
);
}
@@ -89,7 +112,7 @@ export type comboBoxFormItemProps = comboBoxProps & {
/** Combobox to use when working with zodForm. */
export function ComboBoxFormItem(props: comboBoxFormItemProps) {
const { values: choices, searchField = false, value, name, onChange } = props;
const {values: choices, searchField = false, value, name, onChange} = props;
const [open, setOpen] = useState(false);
@@ -97,15 +120,16 @@ export function ComboBoxFormItem(props: comboBoxFormItemProps) {
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<FormControl>
<Button variant="outline" role="combobox" aria-expanded={open} className={cn("w-full justify-between", !value && "text-muted-foreground")}>
<Button variant="outline" role="combobox" aria-expanded={open}
className={cn("w-full justify-between", !value && "text-muted-foreground")}>
{value ? choices.find((choice) => choice.value === value)?.label : `Select ${name}`}
<ChevronDown className="opacity-50" />
<ChevronDown className="opacity-50"/>
</Button>
</FormControl>
</PopoverTrigger>
<PopoverContent className="p-0 popover-content-width-full">
<Command>
{searchField ? <CommandInput placeholder="Search choice..." className="h-9" /> : null}
{searchField ? <CommandInput placeholder="Search choice..." className="h-9"/> : null}
<CommandList>
<CommandEmpty>No {name} found.</CommandEmpty>
<CommandGroup>
@@ -119,7 +143,8 @@ export function ComboBoxFormItem(props: comboBoxFormItemProps) {
}}
>
{choice.label}
<Check className={cn("ml-auto", choice.value === value ? "opacity-100" : "opacity-0")} />
<Check
className={cn("ml-auto", choice.value === value ? "opacity-100" : "opacity-0")}/>
</CommandItem>
))}
</CommandGroup>
src/components/wrappers/dashboard/organization/create-organisation-modal.tsx
+26 -24
View File
@@ -1,25 +1,26 @@
"use client";
import { useMutation } from "@tanstack/react-query";
import {useMutation} from "@tanstack/react-query";
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage, useZodForm } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { OrganizationSchema } from "@/components/wrappers/dashboard/organization/organization.schema";
import { createOrganizationAction } from "@/components/wrappers/dashboard/organization/organization.action";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { authClient } from "@/lib/auth/auth-client";
import {Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle} from "@/components/ui/dialog";
import {Button} from "@/components/ui/button";
import {Form, FormControl, FormField, FormItem, FormLabel, FormMessage, useZodForm} from "@/components/ui/form";
import {Input} from "@/components/ui/input";
import {OrganizationSchema} from "@/components/wrappers/dashboard/organization/organization.schema";
import {createOrganizationAction} from "@/components/wrappers/dashboard/organization/organization.action";
import {useRouter} from "next/navigation";
import {useState} from "react";
import {authClient} from "@/lib/auth/auth-client";
export type createOrganizationModalProps = {
children: any;
open: boolean;
onOpenChange: (open: boolean) => void;
onSuccess?: () => void;
};
export function CreateOrganizationModal(props: createOrganizationModalProps) {
const [open, setOpen] = useState(false);
export function CreateOrganizationModal({open, onOpenChange, onSuccess}: createOrganizationModalProps) {
const { children } = props;
const router = useRouter();
@@ -27,6 +28,7 @@ export function CreateOrganizationModal(props: createOrganizationModalProps) {
schema: OrganizationSchema,
});
const mutation = useMutation({
mutationFn: async (values: OrganizationSchema) => {
console.log(values);
@@ -35,18 +37,18 @@ export function CreateOrganizationModal(props: createOrganizationModalProps) {
if (result && result.data) {
if (result.data.success && result.data.value) {
setOpen(false);
await authClient.organization.setActive({ organizationSlug: result.data.value.slug });
router.replace(`/dashboard/${result.data.value.slug}/home`);
onOpenChange(false);
await authClient.organization.setActive({organizationSlug: result.data.value.slug});
onSuccess?.();
router.replace(`/dashboard/home`);
// router.refresh();
}
}
},
});
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>{children}</DialogTrigger>
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="sm:max-w-[425px] w-full">
<DialogHeader>
<DialogTitle>Create a new organization</DialogTitle>
@@ -65,13 +67,13 @@ export function CreateOrganizationModal(props: createOrganizationModalProps) {
control={form.control}
name="name"
defaultValue=""
render={({ field }) => (
render={({field}) => (
<FormItem>
<FormLabel>Name</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
<FormMessage />
<FormMessage/>
</FormItem>
)}
/>
@@ -79,7 +81,7 @@ export function CreateOrganizationModal(props: createOrganizationModalProps) {
control={form.control}
name="slug"
defaultValue=""
render={({ field }) => (
render={({field}) => (
<FormItem>
<FormLabel>Slug</FormLabel>
<FormControl>
@@ -91,7 +93,7 @@ export function CreateOrganizationModal(props: createOrganizationModalProps) {
}}
/>
</FormControl>
<FormMessage />
<FormMessage/>
</FormItem>
)}
/>
src/components/wrappers/dashboard/organization/organization-combobox.tsx
+16 -9
View File
@@ -1,16 +1,16 @@
"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 {ComboBox} from "@/components/wrappers/common/combobox";
import {useSidebar} from "@/components/ui/sidebar";
import {useRouter} from "next/navigation";
import {authClient} from "@/lib/auth/auth-client";
export function OrganizationCombobox() {
const router = useRouter();
const { state } = useSidebar();
const {state} = useSidebar();
const { data: organizations } = authClient.useListOrganizations();
const { data: activeOrganization } = authClient.useActiveOrganization();
const {data: organizations, refetch} = authClient.useListOrganizations();
const {data: activeOrganization, refetch: refetchActiveOrga} = authClient.useActiveOrganization();
if (!organizations) return null;
@@ -28,9 +28,16 @@ export function OrganizationCombobox() {
await authClient.organization.setActive({
organizationSlug: slug,
});
// router.replace(`/dashboard/${slug}/home`);
router.refresh();
};
return <>{state === "expanded" && <ComboBox sideBar values={values} defaultValue={activeOrganization?.slug} onValueChange={onValueChange} />}</>;
const handleReset = () => {
refetch();
refetchActiveOrga()
router.refresh();
}
return <>{state === "expanded" &&
<ComboBox sideBar values={values} defaultValue={activeOrganization?.slug} onValueChange={onValueChange}
reload={handleReset}/>}</>;
}