91 lines
2.4 KiB
TypeScript
91 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { DraggableFolderItem } from "./draggable-folder-item";
|
|
import { DraggableAccountItem } from "./draggable-account-item";
|
|
import type { Folder as FolderType, Account } from "@/lib/types";
|
|
import { getAccountBalance } from "@/lib/account-utils";
|
|
|
|
interface FolderTreeItemProps {
|
|
folder: FolderType;
|
|
accounts: Account[];
|
|
allFolders: FolderType[];
|
|
level: number;
|
|
onEdit: (folder: FolderType) => void;
|
|
onDelete: (folderId: string) => void;
|
|
onEditAccount: (account: Account) => void;
|
|
formatCurrency: (amount: number) => string;
|
|
}
|
|
|
|
export function FolderTreeItem({
|
|
folder,
|
|
accounts,
|
|
allFolders,
|
|
level,
|
|
onEdit,
|
|
onDelete,
|
|
onEditAccount,
|
|
formatCurrency,
|
|
}: FolderTreeItemProps) {
|
|
const [isExpanded, setIsExpanded] = useState(true);
|
|
|
|
// Pour le dossier "Mes Comptes" (folder-root), inclure aussi les comptes sans dossier
|
|
const folderAccounts = accounts.filter(
|
|
(a) =>
|
|
a.folderId === folder.id ||
|
|
(folder.id === "folder-root" && a.folderId === null),
|
|
);
|
|
const childFolders = allFolders.filter((f) => f.parentId === folder.id);
|
|
const folderTotal = folderAccounts.reduce(
|
|
(sum, a) => sum + getAccountBalance(a),
|
|
0,
|
|
);
|
|
|
|
return (
|
|
<div>
|
|
<DraggableFolderItem
|
|
folder={folder}
|
|
accounts={accounts}
|
|
allFolders={allFolders}
|
|
level={level}
|
|
isExpanded={isExpanded}
|
|
onToggleExpand={() => setIsExpanded(!isExpanded)}
|
|
onEdit={onEdit}
|
|
onDelete={onDelete}
|
|
onEditAccount={onEditAccount}
|
|
formatCurrency={formatCurrency}
|
|
folderAccounts={folderAccounts}
|
|
childFolders={childFolders}
|
|
folderTotal={folderTotal}
|
|
/>
|
|
|
|
{isExpanded && (
|
|
<div>
|
|
{folderAccounts.map((account) => (
|
|
<DraggableAccountItem
|
|
key={account.id}
|
|
account={account}
|
|
onEditAccount={onEditAccount}
|
|
formatCurrency={formatCurrency}
|
|
/>
|
|
))}
|
|
|
|
{childFolders.map((child) => (
|
|
<FolderTreeItem
|
|
key={child.id}
|
|
folder={child}
|
|
accounts={accounts}
|
|
allFolders={allFolders}
|
|
level={level + 1}
|
|
onEdit={onEdit}
|
|
onDelete={onDelete}
|
|
onEditAccount={onEditAccount}
|
|
formatCurrency={formatCurrency}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|