forked from M-Labs/web2019
44 lines
1.8 KiB
React
44 lines
1.8 KiB
React
|
import {ProductItem} from "./ProductItem";
|
||
|
|
import React from "react";
|
||
|
|
import {useShopStore} from "./shop_store";
|
||
|
|
|
||
|
|
export function BacklogGroups() {
|
||
|
|
const data = useShopStore((state) => state.groups);
|
||
|
|
const items = useShopStore((state) => state.cards);
|
||
|
|
|
||
|
|
const ordered_groups = data.categories.map(groupItem => ({
|
||
|
|
name: groupItem.name,
|
||
|
|
items: groupItem.itemIds.map(itemId => items[itemId])
|
||
|
|
}));
|
||
|
|
let item_index = -1;
|
||
|
|
const groups = ordered_groups.map((group, g_index) => {
|
||
|
|
return (
|
||
|
|
<div className="accordion-item" key={`${group.name}`}>
|
||
|
|
<h2 className="accordion-header">
|
||
|
|
<button className="accordion-button collapsed" type="button" data-bs-toggle="collapse"
|
||
|
|
data-bs-target={`#collapse${g_index}`} aria-expanded="true"
|
||
|
|
aria-controls={`collapse${g_index}`}>
|
||
|
|
{group.name}
|
||
|
|
</button>
|
||
|
|
</h2>
|
||
|
|
<div id={`collapse${g_index}`} className="accordion-collapse collapse" aria-labelledby="headingOne"
|
||
|
|
data-bs-parent="#accordion_categories">
|
||
|
|
<div className="accordion-body">
|
||
|
|
{group.items.map(item => {
|
||
|
|
item_index++;
|
||
|
|
return (
|
||
|
|
<ProductItem card_index={item_index} key={item.id} />
|
||
|
|
)
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
);
|
||
|
|
return (
|
||
|
|
<div className="accordion accordion-flush" id="accordion_categories">
|
||
|
|
{groups}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|