1
This commit is contained in:
dengqichen
parent
967c79a618
commit
8a15130a31
@ -37,7 +37,7 @@ import {applicationFormSchema, type ApplicationFormValues} from "../schema";
|
||||
import {Textarea} from "@/components/ui/textarea";
|
||||
import {Command, CommandEmpty, CommandGroup, CommandInput, CommandItem} from "@/components/ui/command";
|
||||
import {ScrollArea} from "@/components/ui/scroll-area";
|
||||
import {Check} from "lucide-react";
|
||||
import {Check, ChevronDown, Search} from "lucide-react";
|
||||
import {cn} from "@/lib/utils";
|
||||
import {Popover, PopoverContent, PopoverTrigger} from "@/components/ui/popover";
|
||||
|
||||
@ -241,6 +241,7 @@ const ApplicationModal: React.FC<ApplicationModalProps> = ({
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="gitInstanceId"
|
||||
@ -248,9 +249,9 @@ const ApplicationModal: React.FC<ApplicationModalProps> = ({
|
||||
<FormItem>
|
||||
<FormLabel>Git实例</FormLabel>
|
||||
<Select
|
||||
disabled={isEdit}
|
||||
onValueChange={(value) => {
|
||||
field.onChange(Number(value));
|
||||
form.setValue('repositoryGroupId', undefined);
|
||||
handleGitInstanceChange(Number(value));
|
||||
}}
|
||||
value={field.value?.toString()}
|
||||
@ -261,8 +262,11 @@ const ApplicationModal: React.FC<ApplicationModalProps> = ({
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{gitInstances.map(instance => (
|
||||
<SelectItem key={instance.id} value={instance.id.toString()}>
|
||||
{gitInstances.map((instance) => (
|
||||
<SelectItem
|
||||
key={instance.id}
|
||||
value={instance.id.toString()}
|
||||
>
|
||||
{instance.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
@ -276,41 +280,87 @@ const ApplicationModal: React.FC<ApplicationModalProps> = ({
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="repositoryGroupId"
|
||||
render={({field}) => (
|
||||
render={({field}) => {
|
||||
const [searchValue, setSearchValue] = React.useState("");
|
||||
const filteredGroups = repositoryGroups.filter(group =>
|
||||
group.name.toLowerCase().includes(searchValue.toLowerCase())
|
||||
);
|
||||
|
||||
return (
|
||||
<FormItem>
|
||||
<FormLabel>代码仓库组</FormLabel>
|
||||
<Select
|
||||
disabled={!form.watch('gitInstanceId')}
|
||||
onValueChange={(value) => {
|
||||
form.setValue("repositoryGroupId", Number(value));
|
||||
}}
|
||||
value={field.value?.toString()}
|
||||
>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue
|
||||
placeholder={!form.watch('gitInstanceId')
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
disabled={!form.watch('gitInstanceId')}
|
||||
className={cn(
|
||||
"w-full justify-between",
|
||||
!field.value && "text-muted-foreground"
|
||||
)}
|
||||
>
|
||||
{field.value
|
||||
? repositoryGroups.find(
|
||||
(group) => group.id === field.value
|
||||
)?.name
|
||||
: !form.watch('gitInstanceId')
|
||||
? "请先选择Git实例"
|
||||
: "请选择代码仓库组"
|
||||
}
|
||||
/>
|
||||
</SelectTrigger>
|
||||
: "请选择代码仓库组"}
|
||||
<ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{repositoryGroups.map((group) => (
|
||||
<SelectItem
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[--radix-popover-trigger-width] p-0">
|
||||
<div className="flex items-center border-b px-3">
|
||||
<Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
<input
|
||||
placeholder="搜索代码仓库组..."
|
||||
className="flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
|
||||
value={searchValue}
|
||||
onChange={(e) => setSearchValue(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<ScrollArea className="h-[200px]">
|
||||
{filteredGroups.length === 0 ? (
|
||||
<div className="p-4 text-center text-sm text-muted-foreground">
|
||||
未找到代码仓库组
|
||||
</div>
|
||||
) : (
|
||||
filteredGroups.map((group) => (
|
||||
<div
|
||||
key={group.id}
|
||||
value={group.id.toString()}
|
||||
className={cn(
|
||||
"relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground",
|
||||
group.id === field.value && "bg-accent text-accent-foreground"
|
||||
)}
|
||||
onClick={() => {
|
||||
form.setValue("repositoryGroupId", group.id);
|
||||
setSearchValue("");
|
||||
// 关闭 Popover
|
||||
const popoverTrigger = document.querySelector('[role="combobox"]');
|
||||
if (popoverTrigger) {
|
||||
(popoverTrigger as HTMLElement).click();
|
||||
}
|
||||
}}
|
||||
>
|
||||
{group.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{group.id === field.value && (
|
||||
<Check className="ml-auto h-4 w-4" />
|
||||
)}
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</ScrollArea>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user