Skip to content

Commit 46a49d7

Browse files
aahnikaahnik
committed
Update generic-editor.tsx ui to show two coloumn view when datetime fields are present in the schema
1 parent 37165af commit 46a49d7

File tree

1 file changed

+186
-80
lines changed

1 file changed

+186
-80
lines changed

‎mint/generic-editor.tsx‎

Lines changed: 186 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -118,97 +118,203 @@ export function GenericEditor<T>({
118118

119119
return (
120120
<Dialog open={isOpen} onOpenChange={onClose}>
121-
<DialogContent className="sm:max-w-[425px]">
121+
<DialogContent
122+
className={`p-8 ${fields.some((f) => f.type === "datetime") ? "w-[1000px]" : "w-[700px]"} rounded-lg`}
123+
>
122124
<DialogHeader>
123125
<DialogTitle>
124126
{data ? `Edit ${title}` : `Add New ${title}`}
125127
</DialogTitle>
126128
</DialogHeader>
127129
<form onSubmit={handleSubmit(onSubmit)}>
128-
<div className="grid gap-4 py-4">
129-
{fields.map((field) => (
130-
<div key={field.name} className="space-y-2">
131-
<Label htmlFor={field.name}>{field.label}</Label>
132-
{field.type === "select" && field.options ? (
133-
<Select
134-
onValueChange={(value) => {
135-
const event = {
136-
target: { name: field.name, value },
137-
};
138-
register(field.name as any).onChange(event);
139-
}}
140-
defaultValue={
141-
data?.[field.name as keyof typeof data] as string
142-
}
143-
>
144-
<SelectTrigger
130+
{fields.some((f) => f.type === "datetime") ? (
131+
<div className="flex gap-0">
132+
{/* Left panel: non-datetime fields */}
133+
<div className="flex-1 grid gap-4 py-4 pr-6">
134+
{fields
135+
.filter((field) => field.type !== "datetime")
136+
.map((field) => (
137+
<div key={field.name} className="space-y-2">
138+
<Label htmlFor={field.name}>{field.label}</Label>
139+
{field.type === "select" && field.options ? (
140+
<Select
141+
onValueChange={(value) => {
142+
const event = {
143+
target: { name: field.name, value },
144+
};
145+
register(field.name as any).onChange(event);
146+
}}
147+
defaultValue={
148+
data?.[field.name as keyof typeof data] as string
149+
}
150+
>
151+
<SelectTrigger
152+
className={
153+
errors[field.name as keyof typeof errors]
154+
? "border-red-500"
155+
: ""
156+
}
157+
>
158+
<SelectValue
159+
placeholder={
160+
field.placeholder || "Select an option"
161+
}
162+
/>
163+
</SelectTrigger>
164+
<SelectContent>
165+
{field.options.map((option) => (
166+
<SelectItem
167+
key={option.value}
168+
value={option.value}
169+
>
170+
{option.label}
171+
</SelectItem>
172+
))}
173+
</SelectContent>
174+
</Select>
175+
) : field.type === "textarea" ? (
176+
<Textarea
177+
id={field.name}
178+
placeholder={field.placeholder || ""}
179+
{...register(field.name as any)}
180+
className={
181+
errors[field.name as keyof typeof errors]
182+
? "border-red-500"
183+
: ""
184+
}
185+
/>
186+
) : (
187+
<Input
188+
id={field.name}
189+
type={field.type}
190+
placeholder={field.placeholder || ""}
191+
{...register(field.name as any, {
192+
valueAsNumber: field.type === "number",
193+
})}
194+
className={
195+
errors[field.name as keyof typeof errors]
196+
? "border-red-500"
197+
: ""
198+
}
199+
/>
200+
)}
201+
{errors[field.name as keyof typeof errors] && (
202+
<p className="text-red-500 text-sm">
203+
{
204+
errors[field.name as keyof typeof errors]
205+
?.message as string
206+
}
207+
</p>
208+
)}
209+
</div>
210+
))}
211+
</div>
212+
{/* Divider */}
213+
<div className="w-px bg-border mx-2" />
214+
{/* Right panel: datetime fields */}
215+
<div className="w-72 grid gap-1 py-4 pl-6">
216+
{fields
217+
.filter((field) => field.type === "datetime")
218+
.map((field) => (
219+
<div key={field.name} className="space-y-0.5">
220+
<Label htmlFor={field.name}>{field.label}</Label>
221+
<Input
222+
id={field.name}
223+
type="datetime-local"
224+
placeholder={field.placeholder || ""}
225+
{...register(field.name as any)}
226+
className={
227+
errors[field.name as keyof typeof errors]
228+
? "border-red-500"
229+
: ""
230+
}
231+
/>
232+
{errors[field.name as keyof typeof errors] && (
233+
<p className="text-red-500 text-sm">
234+
{
235+
errors[field.name as keyof typeof errors]
236+
?.message as string
237+
}
238+
</p>
239+
)}
240+
</div>
241+
))}
242+
</div>
243+
</div>
244+
) : (
245+
<div className="grid gap-4 py-4">
246+
{fields.map((field) => (
247+
<div key={field.name} className="space-y-2">
248+
<Label htmlFor={field.name}>{field.label}</Label>
249+
{field.type === "select" && field.options ? (
250+
<Select
251+
onValueChange={(value) => {
252+
const event = {
253+
target: { name: field.name, value },
254+
};
255+
register(field.name as any).onChange(event);
256+
}}
257+
defaultValue={
258+
data?.[field.name as keyof typeof data] as string
259+
}
260+
>
261+
<SelectTrigger
262+
className={
263+
errors[field.name as keyof typeof errors]
264+
? "border-red-500"
265+
: ""
266+
}
267+
>
268+
<SelectValue
269+
placeholder={field.placeholder || "Select an option"}
270+
/>
271+
</SelectTrigger>
272+
<SelectContent>
273+
{field.options.map((option) => (
274+
<SelectItem key={option.value} value={option.value}>
275+
{option.label}
276+
</SelectItem>
277+
))}
278+
</SelectContent>
279+
</Select>
280+
) : field.type === "textarea" ? (
281+
<Textarea
282+
id={field.name}
283+
placeholder={field.placeholder || ""}
284+
{...register(field.name as any)}
145285
className={
146286
errors[field.name as keyof typeof errors]
147287
? "border-red-500"
148288
: ""
149289
}
150-
>
151-
<SelectValue
152-
placeholder={field.placeholder || "Select an option"}
153-
/>
154-
</SelectTrigger>
155-
<SelectContent>
156-
{field.options.map((option) => (
157-
<SelectItem key={option.value} value={option.value}>
158-
{option.label}
159-
</SelectItem>
160-
))}
161-
</SelectContent>
162-
</Select>
163-
) : field.type === "textarea" ? (
164-
<Textarea
165-
id={field.name}
166-
placeholder={field.placeholder || ""}
167-
{...register(field.name as any)}
168-
className={
169-
errors[field.name as keyof typeof errors]
170-
? "border-red-500"
171-
: ""
172-
}
173-
/>
174-
) : field.type === "datetime" ? (
175-
<Input
176-
id={field.name}
177-
type="datetime-local"
178-
placeholder={field.placeholder || ""}
179-
{...register(field.name as any)}
180-
className={
181-
errors[field.name as keyof typeof errors]
182-
? "border-red-500"
183-
: ""
184-
}
185-
/>
186-
) : (
187-
<Input
188-
id={field.name}
189-
type={field.type}
190-
placeholder={field.placeholder || ""}
191-
{...register(field.name as any, {
192-
valueAsNumber: field.type === "number",
193-
})}
194-
className={
195-
errors[field.name as keyof typeof errors]
196-
? "border-red-500"
197-
: ""
198-
}
199-
/>
200-
)}
201-
{errors[field.name as keyof typeof errors] && (
202-
<p className="text-red-500 text-sm">
203-
{
204-
errors[field.name as keyof typeof errors]
205-
?.message as string
206-
}
207-
</p>
208-
)}
209-
</div>
210-
))}
211-
</div>
290+
/>
291+
) : (
292+
<Input
293+
id={field.name}
294+
type={field.type}
295+
placeholder={field.placeholder || ""}
296+
{...register(field.name as any, {
297+
valueAsNumber: field.type === "number",
298+
})}
299+
className={
300+
errors[field.name as keyof typeof errors]
301+
? "border-red-500"
302+
: ""
303+
}
304+
/>
305+
)}
306+
{errors[field.name as keyof typeof errors] && (
307+
<p className="text-red-500 text-sm">
308+
{
309+
errors[field.name as keyof typeof errors]
310+
?.message as string
311+
}
312+
</p>
313+
)}
314+
</div>
315+
))}
316+
</div>
317+
)}
212318
<DialogFooter>
213319
<Button type="submit" disabled={isSaving}>
214320
{isSaving ? (

0 commit comments

Comments
 (0)