rohskiddo/UMBRA
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Convert TemplateForm from Dialog to Sheet side panel

Browse Source 
Matches the EventForm UI pattern for consistency — same slide-in panel,
same layout structure with scrollable content area and pinned footer.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Kyle 2026-02-23 11:58:55 +08:00
parent 4a8c44ab80
commit b21343601b
1 changed files with 112 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
frontend/src/components/calendar/TemplateForm.tsx
View File

@ -5,13 +5,13 @@ import api, { getErrorMessage } from '@/lib/api';
import type { EventTemplate, Location } from '@/types'; import type { EventTemplate, Location } from '@/types';
import { useCalendars } from '@/hooks/useCalendars'; import { useCalendars } from '@/hooks/useCalendars';
import { import {
Dialog, Sheet,
DialogContent, SheetContent,
DialogHeader, SheetHeader,
DialogTitle, SheetTitle,
DialogFooter, SheetFooter,
DialogClose, SheetClose,
} from '@/components/ui/dialog'; } from '@/components/ui/sheet';
import { Input } from '@/components/ui/input'; import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea'; import { Textarea } from '@/components/ui/textarea';
import { Select } from '@/components/ui/select'; import { Select } from '@/components/ui/select';
@ -87,13 +87,14 @@ export default function TemplateForm({ template, onClose }: TemplateFormProps) {
}; };
return ( return (
<Dialog open={true} onOpenChange={onClose}> <Sheet open={true} onOpenChange={onClose}>
<DialogContent className="max-w-2xl"> <SheetContent>
<DialogClose onClick={onClose} /> <SheetClose onClick={onClose} />
<DialogHeader> <SheetHeader>
<DialogTitle>{template ? 'Edit Template' : 'New Template'}</DialogTitle> <SheetTitle>{template ? 'Edit Template' : 'New Template'}</SheetTitle>
</DialogHeader> </SheetHeader>
<form onSubmit={handleSubmit} className="space-y-4"> <form onSubmit={handleSubmit} className="flex flex-col flex-1 overflow-y-auto">
<div className="px-6 py-5 space-y-4 flex-1">
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="tmpl-name" required>Template Name</Label> <Label htmlFor="tmpl-name" required>Template Name</Label>
<Input <Input
@ -122,10 +123,11 @@ export default function TemplateForm({ template, onClose }: TemplateFormProps) {
id="tmpl-desc" id="tmpl-desc"
value={formData.description} value={formData.description}
onChange={(e) => setFormData({ ...formData, description: e.target.value })} onChange={(e) => setFormData({ ...formData, description: e.target.value })}
className="min-h-[60px]" className="min-h-[80px] flex-1"
/> />
</div> </div>
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="tmpl-calendar">Calendar</Label> <Label htmlFor="tmpl-calendar">Calendar</Label>
<Select <Select
@ -170,6 +172,7 @@ export default function TemplateForm({ template, onClose }: TemplateFormProps) {
placeholder="Search for a location..." placeholder="Search for a location..."
/> />
</div> </div>
</div>
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
@ -189,17 +192,18 @@ export default function TemplateForm({ template, onClose }: TemplateFormProps) {
<Label htmlFor="tmpl-starred">Starred</Label> <Label htmlFor="tmpl-starred">Starred</Label>
</div> </div>
</div> </div>
</div>
<DialogFooter> <SheetFooter>
<Button type="button" variant="outline" onClick={onClose}> <Button type="button" variant="outline" onClick={onClose}>
Cancel Cancel
</Button> </Button>
<Button type="submit" disabled={mutation.isPending}> <Button type="submit" disabled={mutation.isPending}>
{mutation.isPending ? 'Saving...' : template ? 'Update' : 'Create'} {mutation.isPending ? 'Saving...' : template ? 'Update' : 'Create'}
</Button> </Button>
</DialogFooter> </SheetFooter>
</form> </form>
</DialogContent> </SheetContent>
</Dialog> </Sheet>
); );
} }