|
| 1 | +import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog.tsx' |
| 2 | +import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form.tsx' |
| 3 | +import { Button } from '@/components/ui/button.tsx' |
| 4 | +import { LoaderButton } from '@/components/ui/loader-button.tsx' |
| 5 | +import useDirDetection from '@/hooks/use-dir-detection' |
| 6 | +import { UseFormReturn } from 'react-hook-form' |
| 7 | +import { useTranslation } from 'react-i18next' |
| 8 | +import { z } from 'zod' |
| 9 | +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select.tsx' |
| 10 | +import { Badge } from '@/components/ui/badge.tsx' |
| 11 | +import { X } from 'lucide-react' |
| 12 | +import { NodeStatus } from '@/service/api' |
| 13 | +import { Checkbox } from '@/components/ui/checkbox.tsx' |
| 14 | +import CoresSelector from '@/components/common/cores-selector.tsx' |
| 15 | + |
| 16 | +interface NodeAdvanceSearchModalProps { |
| 17 | + isDialogOpen: boolean |
| 18 | + onOpenChange: (open: boolean) => void |
| 19 | + form: UseFormReturn<NodeAdvanceSearchFormValue> |
| 20 | + onSubmit: (values: NodeAdvanceSearchFormValue) => void |
| 21 | +} |
| 22 | + |
| 23 | +export const nodeAdvanceSearchFormSchema = z.object({ |
| 24 | + status: z.array(z.nativeEnum(NodeStatus)).optional(), |
| 25 | + core_id: z.number().nullable().optional() |
| 26 | +}) |
| 27 | + |
| 28 | +export type NodeAdvanceSearchFormValue = z.infer<typeof nodeAdvanceSearchFormSchema> |
| 29 | + |
| 30 | +const statusOptions = [ |
| 31 | + { value: NodeStatus.connected, label: 'nodeModal.status.connected' }, |
| 32 | + { value: NodeStatus.disabled, label: 'nodeModal.status.disabled' }, |
| 33 | + { value: NodeStatus.error, label: 'nodeModal.status.error' }, |
| 34 | + { value: NodeStatus.limited, label: 'status.limited' }, |
| 35 | + { value: NodeStatus.connecting, label: 'nodeModal.status.connecting' }, |
| 36 | +] as const |
| 37 | + |
| 38 | +export default function NodeAdvanceSearchModal({ isDialogOpen, onOpenChange, form, onSubmit }: NodeAdvanceSearchModalProps) { |
| 39 | + const dir = useDirDetection() |
| 40 | + const { t } = useTranslation() |
| 41 | + |
| 42 | + return ( |
| 43 | + <Dialog open={isDialogOpen} onOpenChange={onOpenChange}> |
| 44 | + <DialogContent className="flex h-full max-w-[650px] flex-col justify-start sm:h-auto" onOpenAutoFocus={e => e.preventDefault()}> |
| 45 | + <DialogHeader> |
| 46 | + <DialogTitle className={`${dir === 'rtl' ? 'text-right' : 'text-left'}`} dir={dir}> |
| 47 | + {t('advanceSearch.title')} |
| 48 | + </DialogTitle> |
| 49 | + </DialogHeader> |
| 50 | + <Form {...form}> |
| 51 | + <form onSubmit={form.handleSubmit(onSubmit)} className="flex h-full flex-col justify-between space-y-4"> |
| 52 | + <div className="-mr-4 max-h-[80dvh] overflow-y-auto px-2 pr-4 sm:max-h-[75dvh]"> |
| 53 | + <div className="flex w-full flex-1 flex-col items-start gap-4 pb-4"> |
| 54 | + <FormField |
| 55 | + control={form.control} |
| 56 | + name="status" |
| 57 | + render={({ field }) => { |
| 58 | + return ( |
| 59 | + <FormItem className="w-full flex-1"> |
| 60 | + <FormLabel>{t('advanceSearch.byStatus')}</FormLabel> |
| 61 | + <FormControl> |
| 62 | + <> |
| 63 | + {/* Display selected statuses as badges */} |
| 64 | + {field.value && field.value.length > 0 && ( |
| 65 | + <div className="flex flex-wrap gap-2 mb-2"> |
| 66 | + {field.value.map(status => { |
| 67 | + const option = statusOptions.find(opt => opt.value === status) |
| 68 | + if (!option) return null |
| 69 | + return ( |
| 70 | + <Badge key={status} variant="secondary" className="flex items-center gap-1"> |
| 71 | + {t(option.label)} |
| 72 | + <X |
| 73 | + className="h-3 w-3 cursor-pointer" |
| 74 | + onClick={() => { |
| 75 | + field.onChange(field.value?.filter(s => s !== status)) |
| 76 | + }} |
| 77 | + /> |
| 78 | + </Badge> |
| 79 | + ) |
| 80 | + })} |
| 81 | + </div> |
| 82 | + )} |
| 83 | + |
| 84 | + {/* Status selector with checkboxes */} |
| 85 | + <Select |
| 86 | + value="" |
| 87 | + onValueChange={(value: NodeStatus) => { |
| 88 | + if (!value) return |
| 89 | + const currentValue = field.value || [] |
| 90 | + if (!currentValue.includes(value)) { |
| 91 | + field.onChange([...currentValue, value]) |
| 92 | + } |
| 93 | + }} |
| 94 | + > |
| 95 | + <SelectTrigger dir={dir} className="w-full gap-2 py-2"> |
| 96 | + <SelectValue placeholder={t('hostsDialog.selectStatus')} /> |
| 97 | + </SelectTrigger> |
| 98 | + <SelectContent dir={dir} className="bg-background"> |
| 99 | + {statusOptions.map(option => ( |
| 100 | + <SelectItem |
| 101 | + key={option.value} |
| 102 | + value={option.value} |
| 103 | + className="flex cursor-pointer items-center gap-2 px-4 py-2 focus:bg-accent" |
| 104 | + disabled={field.value?.includes(option.value)} |
| 105 | + > |
| 106 | + <div className="flex w-full items-center gap-3"> |
| 107 | + <Checkbox checked={field.value?.includes(option.value)} className="h-4 w-4" /> |
| 108 | + <span className="text-sm font-normal">{t(option.label)}</span> |
| 109 | + </div> |
| 110 | + </SelectItem> |
| 111 | + ))} |
| 112 | + </SelectContent> |
| 113 | + </Select> |
| 114 | + |
| 115 | + {/* Clear all button */} |
| 116 | + {field.value && field.value.length > 0 && ( |
| 117 | + <Button |
| 118 | + type="button" |
| 119 | + variant="outline" |
| 120 | + size="sm" |
| 121 | + onClick={() => field.onChange([])} |
| 122 | + className="mt-2 w-full" |
| 123 | + > |
| 124 | + {t('hostsDialog.clearAllStatuses')} |
| 125 | + </Button> |
| 126 | + )} |
| 127 | + </> |
| 128 | + </FormControl> |
| 129 | + <FormMessage /> |
| 130 | + </FormItem> |
| 131 | + ) |
| 132 | + }} |
| 133 | + /> |
| 134 | + |
| 135 | + <FormField |
| 136 | + control={form.control} |
| 137 | + name="core_id" |
| 138 | + render={({ field }) => { |
| 139 | + return ( |
| 140 | + <FormItem className="w-full flex-1"> |
| 141 | + <FormLabel>{t('advanceSearch.byCore', { defaultValue: 'Core' })}</FormLabel> |
| 142 | + <FormControl> |
| 143 | + <CoresSelector |
| 144 | + control={form.control} |
| 145 | + name="core_id" |
| 146 | + onCoreChange={field.onChange} |
| 147 | + placeholder={t('advanceSearch.searchCore', { defaultValue: 'Search cores...' })} |
| 148 | + /> |
| 149 | + </FormControl> |
| 150 | + <FormMessage /> |
| 151 | + </FormItem> |
| 152 | + ) |
| 153 | + }} |
| 154 | + /> |
| 155 | + </div> |
| 156 | + </div> |
| 157 | + <div className="flex justify-end gap-2"> |
| 158 | + <Button type="button" variant="outline" onClick={() => onOpenChange(false)}> |
| 159 | + {t('cancel')} |
| 160 | + </Button> |
| 161 | + <LoaderButton type="submit"> |
| 162 | + {t('apply')} |
| 163 | + </LoaderButton> |
| 164 | + </div> |
| 165 | + </form> |
| 166 | + </Form> |
| 167 | + </DialogContent> |
| 168 | + </Dialog> |
| 169 | + ) |
| 170 | +} |
0 commit comments