courrier preview

This commit is contained in:
alma 2025-05-01 21:20:17 +02:00
parent 76ab4c0e7d
commit 15043f0b0c

View File

@ -195,6 +195,7 @@ export default function CourrierPage() {
const [newPassword, setNewPassword] = useState(''); const [newPassword, setNewPassword] = useState('');
const [editLoading, setEditLoading] = useState(false); const [editLoading, setEditLoading] = useState(false);
const [deleteLoading, setDeleteLoading] = useState(false); const [deleteLoading, setDeleteLoading] = useState(false);
const [selectedColor, setSelectedColor] = useState<string>('');
// Use the reducer-managed values directly instead of tracked separately // Use the reducer-managed values directly instead of tracked separately
const [searchQuery, setSearchQuery] = useState(''); const [searchQuery, setSearchQuery] = useState('');
@ -671,6 +672,7 @@ export default function CourrierPage() {
const updatedAccount = accounts.find(a => a.id === account.id); const updatedAccount = accounts.find(a => a.id === account.id);
if (updatedAccount) { if (updatedAccount) {
setAccountToEdit(updatedAccount as any); setAccountToEdit(updatedAccount as any);
setSelectedColor(updatedAccount.color || '');
setShowEditModal(true); setShowEditModal(true);
} else { } else {
toast({ toast({
@ -918,6 +920,8 @@ export default function CourrierPage() {
setEditLoading(false); setEditLoading(false);
setAccountToEdit(null); setAccountToEdit(null);
setNewPassword(''); setNewPassword('');
setSelectedColor('');
window.location.reload();
} }
}}> }}>
<DialogContent className="sm:max-w-[500px] bg-white text-gray-800"> <DialogContent className="sm:max-w-[500px] bg-white text-gray-800">
@ -929,7 +933,7 @@ export default function CourrierPage() {
try { try {
const formElement = e.target as HTMLFormElement; const formElement = e.target as HTMLFormElement;
const displayName = (formElement.querySelector('#display-name') as HTMLInputElement).value; const displayName = (formElement.querySelector('#display-name') as HTMLInputElement).value;
const color = (formElement.querySelector('input[name="color"]:checked') as HTMLInputElement)?.value || accountToEdit.color; const color = selectedColor;
// If password is changed, test the connection first // If password is changed, test the connection first
if (newPassword) { if (newPassword) {
@ -994,6 +998,8 @@ export default function CourrierPage() {
)); ));
// Clear accountToEdit to ensure fresh data on next edit // Clear accountToEdit to ensure fresh data on next edit
setAccountToEdit(null); setAccountToEdit(null);
// Force a page refresh to reset all UI states
window.location.reload();
} catch (err) { } catch (err) {
toast({ title: 'Error', description: err instanceof Error ? err.message : 'Failed to update account settings', variant: 'destructive' }); toast({ title: 'Error', description: err instanceof Error ? err.message : 'Failed to update account settings', variant: 'destructive' });
} finally { } finally {
@ -1034,15 +1040,17 @@ export default function CourrierPage() {
id={`color-${index}`} id={`color-${index}`}
name="color" name="color"
value={color} value={color}
defaultChecked={accountToEdit?.color === color} checked={selectedColor === color}
onChange={() => setSelectedColor(color)}
className="sr-only" className="sr-only"
/> />
<label <label
htmlFor={`color-${index}`} htmlFor={`color-${index}`}
className={`w-8 h-8 rounded-full cursor-pointer flex items-center justify-center ${color} hover:ring-2 hover:ring-blue-300 transition-all`} className={`w-8 h-8 rounded-full cursor-pointer flex items-center justify-center ${color} hover:ring-2 hover:ring-blue-300 transition-all`}
style={{ boxShadow: accountToEdit?.color === color ? '0 0 0 2px white, 0 0 0 4px #3b82f6' : 'none' }} style={{ boxShadow: selectedColor === color ? '0 0 0 2px white, 0 0 0 4px #3b82f6' : 'none' }}
onClick={() => setSelectedColor(color)}
> >
{accountToEdit?.color === color && ( {selectedColor === color && (
<Check className="h-4 w-4 text-white" /> <Check className="h-4 w-4 text-white" />
)} )}
</label> </label>
@ -1055,7 +1063,10 @@ export default function CourrierPage() {
<Button <Button
type="button" type="button"
className="bg-red-500 hover:bg-red-600 text-white" className="bg-red-500 hover:bg-red-600 text-white"
onClick={() => setShowEditModal(false)} onClick={() => {
setShowEditModal(false);
window.location.reload();
}}
> >
Cancel Cancel
</Button> </Button>