Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 | 70x 70x 70x 70x 70x 30x 11x 11x 70x 3x 3x 3x 3x 3x 3x 2x 1x 1x 1x 3x 70x 70x 1x 2x | /**
* Edit group dialog component
*/
import { useEffect, useState } from 'react';
import { AppDialog } from '@/components/common/AppDialog';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { Loader2 } from 'lucide-react';
import type { Group, UpdateGroupRequest } from '@/services/groups.service';
interface EditGroupDialogProps {
open: boolean;
onOpenChange: (open: boolean) => void;
group: Group | null;
onSubmit: (groupId: string, data: UpdateGroupRequest) => Promise<void>;
}
export default function EditGroupDialog({ open, onOpenChange, group, onSubmit }: EditGroupDialogProps) {
const [name, setName] = useState('');
const [description, setDescription] = useState('');
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
// Populate form when group changes
useEffect(() => {
if (group) {
setName(group.name);
setDescription(group.description || '');
}
}, [group]);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
Iif (!group) return;
setLoading(true);
setError(null);
try {
await onSubmit(group.id, {
name,
description: description || null,
});
onOpenChange(false);
} catch (err: unknown) {
const error = err as { response?: { data?: { detail?: string | unknown } }; message?: string };
const errorMsg = error.response?.data?.detail || error.message || 'Failed to update group';
setError(typeof errorMsg === 'string' ? errorMsg : JSON.stringify(errorMsg));
} finally {
setLoading(false);
}
};
const isFormValid = name.trim().length > 0;
return (
<AppDialog
open={open}
onOpenChange={onOpenChange}
title="Edit Group"
description="Update the group name and description."
className="max-w-md"
footer={
<>
<Button
type="button"
variant="outline"
onClick={() => onOpenChange(false)}
disabled={loading}
>
Cancel
</Button>
<Button type="submit" form="edit-group-form" disabled={loading || !isFormValid}>
{loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
Save Changes
</Button>
</>
}
>
<form id="edit-group-form" onSubmit={handleSubmit}>
<div className="space-y-4">
<div className="space-y-2">
<Label htmlFor="edit-name">Name *</Label>
<Input
id="edit-name"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="e.g., Managers, Developers"
required
disabled={loading}
maxLength={100}
/>
<p className="text-xs text-muted-foreground">
1-100 characters
</p>
</div>
<div className="space-y-2">
<Label htmlFor="edit-description">Description</Label>
<Textarea
id="edit-description"
value={description}
onChange={(e) => setDescription(e.target.value)}
placeholder="Optional description of the group's purpose"
disabled={loading}
maxLength={500}
rows={3}
/>
<p className="text-xs text-muted-foreground">
Optional, max 500 characters
</p>
</div>
{error && (
<div className="text-sm text-destructive bg-destructive/10 p-3 rounded-md">
{error}
</div>
)}
</div>
</form>
</AppDialog>
);
}
|