mirror of
https://github.com/Portabase/portabase.git
synced 2026-07-14 11:16:13 +02:00
migration
This commit is contained in:
Théo LAGACHE
@@ -1,74 +1,55 @@
|
||||
"use client"
|
||||
"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 }>
|
||||
defaultValue?: string
|
||||
onValueChange?: any
|
||||
searchField?: boolean
|
||||
sideBar?: boolean
|
||||
}
|
||||
|
||||
values: Array<{ value: string; label: string }>;
|
||||
defaultValue?: string;
|
||||
onValueChange?: any;
|
||||
searchField?: boolean;
|
||||
sideBar?: boolean;
|
||||
};
|
||||
|
||||
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>()
|
||||
const [value, setValue] = useState<string>();
|
||||
|
||||
useEffect(() => {
|
||||
setValue(defaultChoice)
|
||||
}, [defaultChoice])
|
||||
setValue(defaultChoice);
|
||||
}, [defaultChoice]);
|
||||
|
||||
const [open, setOpen] = useState(false)
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
{sideBar ?
|
||||
{sideBar ? (
|
||||
<SidebarMenuButton>
|
||||
{value
|
||||
? choices.find((choice) => choice.value === value)?.label
|
||||
: "Select choice..."}
|
||||
<ChevronDown className="ml-auto"/>
|
||||
{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 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}
|
||||
{searchField ? <CommandInput placeholder="Search choice..." className="h-9" /> : null}
|
||||
<CommandList>
|
||||
<CommandEmpty>No choice found.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
@@ -77,75 +58,54 @@ export function ComboBox(props: comboBoxProps) {
|
||||
key={choice.value}
|
||||
value={choice.value}
|
||||
onSelect={(currentValue) => {
|
||||
setValue(currentValue)
|
||||
onValueChange(currentValue)
|
||||
setOpen(false)
|
||||
setValue(currentValue);
|
||||
onValueChange(currentValue);
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
{choice.label}
|
||||
<Check
|
||||
className={cn(
|
||||
"ml-auto",
|
||||
value === choice.value ? "opacity-100" : "opacity-0"
|
||||
)}
|
||||
/>
|
||||
<Check className={cn("ml-auto", value === choice.value ? "opacity-100" : "opacity-0")} />
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
<Separator/>
|
||||
{sideBar ?
|
||||
<Separator />
|
||||
{sideBar ? (
|
||||
<CreateOrganizationModal>
|
||||
<SidebarMenuButton>
|
||||
+ Create new organization
|
||||
</SidebarMenuButton>
|
||||
<SidebarMenuButton>+ Create new organization</SidebarMenuButton>
|
||||
</CreateOrganizationModal>
|
||||
: null}
|
||||
) : null}
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
export type comboBoxFormItemProps = comboBoxProps & {
|
||||
value: any
|
||||
name: any
|
||||
onChange: any
|
||||
value: any;
|
||||
name: any;
|
||||
onChange: any;
|
||||
};
|
||||
|
||||
/** 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)
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<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"
|
||||
)}
|
||||
>
|
||||
{value
|
||||
? choices.find(
|
||||
(choice) => choice.value === value
|
||||
)?.label
|
||||
: `Select ${name}`}
|
||||
<ChevronDown className="opacity-50"/>
|
||||
<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" />
|
||||
</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>
|
||||
@@ -154,19 +114,12 @@ export function ComboBoxFormItem(props: comboBoxFormItemProps) {
|
||||
value={choice.label}
|
||||
key={choice.value}
|
||||
onSelect={() => {
|
||||
onChange(choice.value)
|
||||
setOpen(false)
|
||||
onChange(choice.value);
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
{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>
|
||||
@@ -174,5 +127,5 @@ export function ComboBoxFormItem(props: comboBoxFormItemProps) {
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
)
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user