shop: group cards

Closes #30
Co-authored-by: Egor Savkin <es@m-labs.hk>
Co-committed-by: Egor Savkin <es@m-labs.hk>
This commit is contained in:
Egor Savkin 2023-06-30 10:10:15 +08:00 committed by sb10q
parent d9ba17ad3a
commit 53a6d3f378
4 changed files with 337 additions and 476 deletions

View File

@ -12,6 +12,42 @@
display: none;
}
#accordion_categories,
#accordion_categories .card {
background-color: inherit;
}
#accordion_categories .card:not(:first-child) {
border-top: thin rgba(255,255, 255, 20%) solid ;
border-radius: 0;
}
#accordion_categories .card-header {
padding: 0;
}
#accordion_categories button {
color: white;
font-weight: bold;
font-size: 1.75rem;
padding: .75rem 2rem;
}
#accordion_categories .card .card-body {
padding: 0;
}
#accordion_categories .card-header:hover {
background-color: #1f4f68;
transition: 0.3s;
text-decoration: none;
}
#accordion_categories button:focus,
#accordion_categories button:hover {
text-decoration: none;
}
/*
##Device = Tablets, Ipads (portrait)
##Screen = B/w 768px to 1024px
@ -110,6 +146,11 @@
#root-shop .panel .summary>.summary-form {
width: 100%;
}
#accordion_categories button {
font-size: 1.5rem;
padding: .75rem 1rem;
}
}
/*
##Device = Tablets, Ipads (landscape)
@ -178,6 +219,11 @@
#root-shop .panel .summary>.summary-form {
width: 100%;
}
#accordion_categories button {
font-size: 1.5rem;
padding: .75rem 1rem;
}
}
/*
##Device = Low Resolution Tablets, Mobiles (Landscape)
@ -379,6 +425,11 @@
#root-shop .panel .summary>.summary-form {
width: 100%;
}
#accordion_categories button {
font-size: 1rem;
padding: .5rem 0.5rem;
}
}
/*
##Device = Most of the Smartphones Mobiles (Portrait)
@ -576,4 +627,9 @@
#root-shop .panel .summary>.summary-form {
width: 100%;
}
#accordion_categories button {
font-size: 1rem;
padding: .5rem 0.5rem;
}
}

View File

@ -74,15 +74,13 @@ const copy = (
model,
source,
destination,
droppableSource,
draggableSource,
droppableDestination
) => {
const sourceClone = Array.from(source.itemIds);
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
@ -1515,25 +1511,43 @@ class Backlog extends React.PureComponent {
isMobile,
} = this.props;
const ordered_items = data.itemIds.map(itemId => items[itemId]);
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
@ -1554,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' }}>
@ -1608,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',
@ -1620,7 +1637,7 @@ class Shop extends React.PureComponent {
this.handleOnDragEnd({
source,
destination,
draggableId: null,
draggableId: sourceIds[0],
});
}
@ -1703,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',
@ -1716,7 +1733,7 @@ class Shop extends React.PureComponent {
this.handleOnDragEnd({
source,
destination,
draggableId: null
draggableId: id
}, tap);
}
@ -1958,7 +1975,7 @@ class Shop extends React.PureComponent {
this.state.items,
this.state.columns[source.droppableId],
this.state.columns[destination.droppableId],
source,
draggableId,
destination,
),
},

612
static/js/shop.min.js vendored

File diff suppressed because it is too large Load Diff

View File

@ -855,28 +855,40 @@ const shop_data = {
id: 'backlog',
title: 'Backlog',
/* itemIds define items order - change order to suit your need */
itemIds: [
'kasli',
'kaslisoc',
'bnc-dio',
'sma-dio',
'mcx-dio',
'rj45-dio',
'urukul',
'phaser',
'mirny',
'almazny',
'zotino',
'fastino',
'idc-bnc-adapter',
'idc-sma-adapter',
'idc-mcx-adapter',
'hd68-idc-adapter',
'novo',
'koster',
'clocker',
'stabilizer',
'vhdcicarrier',
categories: [
{ name: 'Core',
itemIds: [
'kasli',
'kaslisoc']},
{ name: 'TTL',
itemIds: [
'bnc-dio',
'sma-dio',
'mcx-dio',
'rj45-dio']},
{ name: 'RF',
itemIds: [
'clocker',
'urukul',
'phaser',
'mirny',
'almazny']},
{ name: 'DAC/ADC',
itemIds: [
'zotino',
'fastino',
'novo']},
{ name: 'Adapters',
itemIds: [
'idc-bnc-adapter',
'idc-sma-adapter',
'idc-mcx-adapter',
'hd68-idc-adapter',
'vhdcicarrier']},
{ name: 'Misc',
itemIds: [
'koster',
'stabilizer']}
],
},