Update UI and adapt code for new logic without indexes in the sidemenu

Signed-off-by: Egor Savkin <es@m-labs.hk>
This commit is contained in:
Egor Savkin 2023-06-29 11:49:24 +08:00
parent baa7b2b5dd
commit 37907b9504
3 changed files with 273 additions and 459 deletions

View File

@ -12,6 +12,32 @@
display: none;
}
#accordion_categories,
#accordion_categories .card {
background-color: inherit;
border-top: 1px #1a6d93 solid;
border-radius: 3px;
}
#accordion_categories .card-header {
padding: 0;
}
#accordion_categories button {
color: white;
font-weight: bold;
font-size: 1.75rem;
padding: .75rem 1.25rem;
}
#accordion_categories .card .card-body {
padding: 0;
}
#accordion_categories .card-header:hover {
background-color: #1a6d93;
transition: 0.3s;
}
/*
##Device = Tablets, Ipads (portrait)
##Screen = B/w 768px to 1024px

View File

@ -74,15 +74,13 @@ const copy = (
model,
source,
destination,
droppableSource,
draggableSource,
droppableDestination
) => {
const sourceClone = Array.from(source.categories.map(groupId => groupId.itemIds).flat());
const destClone = Array.from(destination.items);
const item = sourceClone[droppableSource.index];
destClone.splice(droppableDestination.index, 0, {
...model[item],
...model[draggableSource],
id: uuidv4(),
});
@ -408,7 +406,6 @@ class ProductItem extends React.PureComponent {
static get propTypes() {
return {
id: PropTypes.string.isRequired,
index: PropTypes.number.isRequired,
name: PropTypes.string.isRequired,
name_codename: PropTypes.string,
price: PropTypes.number.isRequired,
@ -426,9 +423,9 @@ class ProductItem extends React.PureComponent {
this.handleOnClickAddItem = this.handleOnClickAddItem.bind(this);
}
handleOnClickAddItem(index, tap, e) {
handleOnClickAddItem(id, tap, e) {
if (this.props.onClickAddItem) {
this.props.onClickAddItem(index, tap);
this.props.onClickAddItem(id, tap);
}
e.preventDefault();
}
@ -436,7 +433,6 @@ class ProductItem extends React.PureComponent {
render() {
const {
id,
index,
name,
name_codename,
price,
@ -482,11 +478,11 @@ class ProductItem extends React.PureComponent {
<div className="content">
<button onClick={this.handleOnClickAddItem.bind(this, index, true)}>
<button onClick={this.handleOnClickAddItem.bind(this, id, true)}>
<img src="/images/shop/icon-add.svg" alt="add" />
</button>
<Draggable draggableId={id} index={index}>
<Draggable draggableId={id}>
{(provided, snapshot) => (
<React.Fragment>
<img
@ -1516,25 +1512,42 @@ class Backlog extends React.PureComponent {
} = this.props;
const ordered_items = data.categories.map(groupItem => groupItem.itemIds.map(itemId => items[itemId])).flat();
const products = ordered_items.map((item, index) => {
return (
<ProductItem
key={item.id}
id={item.id}
index={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>
);
});
const ordered_groups = data.categories.map(groupItem => ({ name: groupItem.name,
items: groupItem.itemIds.map(itemId => items[itemId])
}));
const groups = ordered_groups.map((group, g_index) => {
return (
<div className="card">
<h2 className="card-header">
<button className="btn btn-link btn-block text-left " type="button" data-toggle="collapse"
data-target={`#collapse${g_index}`} aria-expanded="true" aria-controls={`collapse${g_index}`}>
{group.name}
</button>
</h2>
<div id={`collapse${g_index}`} className="collapse" aria-labelledby="headingOne"
data-parent="#accordion_categories">
<div className="card-body">
{group.items.map(item => (
<ProductItem
key={item.id}
id={item.id}
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
@ -1555,7 +1568,9 @@ class Backlog extends React.PureComponent {
</div>
) : null}
{products}
<div className="accordion" id="accordion_categories">
{groups}
</div>
{provided.placeholder && (
<div style={{ display: 'none' }}>
@ -1609,9 +1624,10 @@ class Shop extends React.PureComponent {
componentDidMount() {
// index 0 is a Kasli, we place it as a default conf on the crate.
const sourceIds = Array.from(this.state.columns.backlog.categories.map(groupId => groupId.itemIds).flat())
const source = {
droppableId: 'backlog',
index: 0,
index: null,
};
const destination = {
droppableId: 'cart',
@ -1621,7 +1637,7 @@ class Shop extends React.PureComponent {
this.handleOnDragEnd({
source,
destination,
draggableId: null,
draggableId: sourceIds[0],
});
}
@ -1704,10 +1720,10 @@ class Shop extends React.PureComponent {
});
}
handleClickAddItem(index, tap) {
handleClickAddItem(id, tap) {
const source = {
droppableId: 'backlog',
index: index,
index: null,
};
const destination = {
droppableId: 'cart',
@ -1717,7 +1733,7 @@ class Shop extends React.PureComponent {
this.handleOnDragEnd({
source,
destination,
draggableId: null
draggableId: id
}, tap);
}
@ -1959,7 +1975,7 @@ class Shop extends React.PureComponent {
this.state.items,
this.state.columns[source.droppableId],
this.state.columns[destination.droppableId],
source,
draggableId,
destination,
),
},

618
static/js/shop.min.js vendored

File diff suppressed because it is too large Load Diff