106 lines
3.9 KiB
JavaScript
106 lines
3.9 KiB
JavaScript
import React from 'react';
|
|
import {v4 as uuidv4} from "uuid";
|
|
import {Droppable} from "@hello-pangea/dnd";
|
|
import {ProductItem} from "./ProductItem.jsx";
|
|
import {useShopStore} from "./shop_store";
|
|
|
|
/**
|
|
* Component that renders the backlog in the aside
|
|
*/
|
|
export function Backlog() {
|
|
const {
|
|
currency,
|
|
data,
|
|
items,
|
|
onClickAddItem,
|
|
onClickToggleMobileSideMenu,
|
|
isMobile,
|
|
} = useShopStore(state=> ({
|
|
currency: state.currency,
|
|
data: state.groups,
|
|
items: state.cards,
|
|
onClickAddItem: state.addCardFromBacklog,
|
|
onClickToggleMobileSideMenu: state.switchSideMenu,
|
|
isMobile: state.isMobile
|
|
}));
|
|
|
|
|
|
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
|
|
key={item.id}
|
|
id={uuidv4()}
|
|
index={item_index}
|
|
name={`${item.name_number} ${item.name}`}
|
|
name_codename={item.name_codename}
|
|
price={item.price}
|
|
currency={currency}
|
|
image={`/images/${item.image}`}
|
|
specs={item.specs}
|
|
datasheet_file={item.datasheet_file}
|
|
datasheet_name={item.datasheet_name}
|
|
onClickAddItem={onClickAddItem}
|
|
></ProductItem>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
);
|
|
|
|
return (
|
|
<Droppable
|
|
droppableId={data.id}
|
|
isDropDisabled={true}>
|
|
|
|
{(provided) => (
|
|
<div
|
|
className="backlog-container"
|
|
ref={provided.innerRef}
|
|
{...provided.droppableProps}>
|
|
|
|
{isMobile ? (
|
|
<div className="mobileCloseMenu">
|
|
<button onClick={onClickToggleMobileSideMenu}>
|
|
<img src="/images/shop/icon-close-white.svg" alt="add"/>
|
|
</button>
|
|
</div>
|
|
) : null}
|
|
|
|
<div className="accordion accordion-flush" id="accordion_categories">
|
|
{groups}
|
|
</div>
|
|
|
|
{provided.placeholder && (
|
|
<div style={{display: 'none'}}>
|
|
{provided.placeholder}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
</Droppable>
|
|
);
|
|
|
|
} |