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