feat: implement optimistic updates for transaction handling and improve category selection in combobox components for enhanced user experience

This commit is contained in:
Julien Froidefond
2025-12-08 07:44:02 +01:00
parent 1263ac9c52
commit 2177ae7b4a
4 changed files with 80 additions and 84 deletions

View File

@@ -171,7 +171,7 @@ export function AccountFilterCombobox({
<div key={folder.id}>
{/* Folder row */}
<CommandItem
value={`folder-${currentPath}`}
value={`folder-${folder.id}`}
onSelect={() => handleSelectFolder(folder.id)}
style={{ paddingLeft: `${paddingLeft}px` }}
className="font-medium"
@@ -182,12 +182,9 @@ export function AccountFilterCombobox({
{isFolderPartiallySelected(folder.id) && (
<div className="h-3 w-3 rounded-sm bg-primary/50 mr-1" />
)}
<Check
className={cn(
"h-4 w-4",
isFolderSelected(folder.id) ? "opacity-100" : "opacity-0",
)}
/>
{isFolderSelected(folder.id) && (
<Check className="h-4 w-4" />
)}
</div>
</CommandItem>
@@ -198,7 +195,7 @@ export function AccountFilterCombobox({
return (
<CommandItem
key={account.id}
value={`${currentPath} ${account.name}`}
value={account.id}
onSelect={() => handleSelect(account.id)}
style={{ paddingLeft: `${paddingLeft + 16}px` }}
className="min-w-0"
@@ -210,12 +207,9 @@ export function AccountFilterCombobox({
({formatCurrency(total)})
</span>
)}
<Check
className={cn(
"ml-auto h-4 w-4 shrink-0",
value.includes(account.id) ? "opacity-100" : "opacity-0",
)}
/>
{value.includes(account.id) && (
<Check className="ml-auto h-4 w-4 shrink-0" />
)}
</CommandItem>
);
})}
@@ -292,7 +286,7 @@ export function AccountFilterCombobox({
align="start"
onOpenAutoFocus={(e) => e.preventDefault()}
>
<Command>
<Command value={isAll ? "all" : value.join(",")}>
<CommandInput placeholder="Rechercher..." />
<CommandList className="max-h-[300px]">
<CommandEmpty>Aucun compte trouvé.</CommandEmpty>
@@ -312,12 +306,9 @@ export function AccountFilterCombobox({
)
</span>
)}
<Check
className={cn(
"ml-auto h-4 w-4",
isAll ? "opacity-100" : "opacity-0",
)}
/>
{isAll && (
<Check className="ml-auto h-4 w-4" />
)}
</CommandItem>
</CommandGroup>
@@ -333,7 +324,7 @@ export function AccountFilterCombobox({
return (
<CommandItem
key={account.id}
value={`sans-dossier ${account.name}`}
value={account.id}
onSelect={() => handleSelect(account.id)}
className="min-w-0"
>
@@ -346,14 +337,9 @@ export function AccountFilterCombobox({
({formatCurrency(total)})
</span>
)}
<Check
className={cn(
"ml-auto h-4 w-4 shrink-0",
value.includes(account.id)
? "opacity-100"
: "opacity-0",
)}
/>
{value.includes(account.id) && (
<Check className="ml-auto h-4 w-4 shrink-0" />
)}
</CommandItem>
);
})}