feat: implement optimistic updates for transaction handling and improve category selection in combobox components for enhanced user experience
This commit is contained in:
@@ -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>
|
||||
);
|
||||
})}
|
||||
|
||||
Reference in New Issue
Block a user