23 lines
1.3 KiB
TypeScript
23 lines
1.3 KiB
TypeScript
import { effectiveHidden, type ColumnView } from "./columns.ts";
|
||
import { AgileCard } from "./AgileCard.tsx";
|
||
|
||
// колонки доски; контейнер прокручивается по горизонтали внутри себя; колонки одной высоты, у каждой прокручивается список
|
||
export function BoardColumns({ columns, lastCaption, hidden = [] }: { columns: ColumnView[]; lastCaption?: string; hidden?: string[] }) {
|
||
const lastIdx = columns.reduce((acc, c, i) => (c.extra ? acc : i), -1);
|
||
const gone = effectiveHidden(columns.map((c) => c.name), hidden);
|
||
return (
|
||
<div className="agile-columns">
|
||
{columns.map((c, i) => gone.includes(c.name) ? null : (
|
||
<section key={c.name + i} className={"agile-col" + (c.extra ? " is-extra" : "")} aria-label={c.name}>
|
||
<header className="agile-col__head">
|
||
<h3 className="agile-col__name">{c.name}</h3>
|
||
<span className="agile-col__count">{c.issues.length}</span>
|
||
</header>
|
||
{lastCaption && i === lastIdx && <p className="agile-col__caption">{lastCaption}</p>}
|
||
<ul className="agile-col__list">{c.issues.map((x) => <AgileCard key={x.key} issue={x} />)}</ul>
|
||
</section>
|
||
))}
|
||
</div>
|
||
);
|
||
}
|