Add add/delete functionality to crates

Signed-off-by: Egor Savkin <es@m-labs.hk>
This commit is contained in:
Egor Savkin 2023-12-07 17:50:33 +08:00
parent 691e5bbd86
commit e6df70b96a
4 changed files with 58 additions and 4 deletions

View File

@ -1,6 +1,6 @@
import React from 'react' import React from 'react'
import {Droppable} from "@hello-pangea/dnd"; import {Droppable} from "@hello-pangea/dnd";
import {cartStyle, nbrOccupiedSlotsInCrate} from "./utils"; import {cartStyle} from "./utils";
import {ProductCartItem} from "./ProductCartItem.jsx"; import {ProductCartItem} from "./ProductCartItem.jsx";
import {FakePlaceholder} from "./FakePlaceholder.jsx"; import {FakePlaceholder} from "./FakePlaceholder.jsx";
import {FillExtData} from "./options/utils"; import {FillExtData} from "./options/utils";

View File

@ -7,12 +7,19 @@ import {CrateWarnings} from "./CrateWarnings.jsx";
* Component that displays the main crate with reminder rules. * Component that displays the main crate with reminder rules.
* It includes <Cart> and rules * It includes <Cart> and rules
*/ */
export function Crate({data, handleToggleOverlayRemove, handleDeleteItem, handleShowOverlayRemove, handleCardsUpdated, isMobile, isTouch}) { export function Crate({data, handleToggleOverlayRemove, handleDeleteItem, handleShowOverlayRemove, handleCardsUpdated, isMobile, isTouch, onDelete}) {
return ( return (
<div className="crate"> <div className="crate">
<CrateMode current={data.mode} onChange={null} /> <CrateMode current={data.mode} onChange={null} />
<div>
Delete crate
<button style={{width: "32px"}} onClick={() => onDelete(data.id)}>
<img src="/images/shop/icon-remove.svg" alt="remove" />
</button>
</div>
<div className="crate-products"> <div className="crate-products">
<Cart <Cart

View File

@ -2,16 +2,28 @@ import React from 'react'
import {Accordion} from "react-bootstrap"; import {Accordion} from "react-bootstrap";
import {Crate} from "./Crate.jsx"; import {Crate} from "./Crate.jsx";
export function CrateList({crates, isMobile, isTouch}) { export function CrateList({crates, isMobile, isTouch, onAddCrate, onDeleteCrate}) {
const onClickAdd = (_) => {
onAddCrate("crate" + Object.entries(crates).length);
}
return ( return (
<Accordion defaultActiveKey="0"> <Accordion defaultActiveKey="0">
{Object.entries(crates).map(([crate_id, crate], index) => {Object.entries(crates).map(([crate_id, crate], index) =>
<Accordion.Item eventKey={`${index}`} key={`crate${index}`}> <Accordion.Item eventKey={`${index}`} key={`crate${index}`}>
<Accordion.Header>Crate #{`${index}`}</Accordion.Header> <Accordion.Header>Crate #{`${index}`}</Accordion.Header>
<Accordion.Body> <Accordion.Body>
<Crate data={{id: crate_id, ...crate}} isTouch={isTouch} isMobile={isMobile}/> <Crate data={{id: crate_id, ...crate}} isTouch={isTouch} isMobile={isMobile} onDelete={onDeleteCrate}/>
</Accordion.Body> </Accordion.Body>
</Accordion.Item> </Accordion.Item>
)} )}
<Accordion.Item eventKey="last">
<Accordion.Header>
Add new crate
<button style={{width: "32px"}} onClick={onClickAdd}>
<img src="/images/shop/icon-add.svg" alt="add" />
</button>
</Accordion.Header>
</Accordion.Item>
</Accordion>) </Accordion>)
} }

View File

@ -48,6 +48,8 @@ export class Shop extends PureComponent {
this.handleClickOpenImport = this.handleClickOpenImport.bind(this); this.handleClickOpenImport = this.handleClickOpenImport.bind(this);
this.handleLoadCustomConf = this.handleLoadCustomConf.bind(this); this.handleLoadCustomConf = this.handleLoadCustomConf.bind(this);
this.handleCardsUpdated = this.handleCardsUpdated.bind(this); this.handleCardsUpdated = this.handleCardsUpdated.bind(this);
this.onAddCrate = this.onAddCrate.bind(this);
this.onDeleteCrate = this.onDeleteCrate.bind(this);
this.timer = null; this.timer = null;
this.timer_remove = null; this.timer_remove = null;
@ -81,6 +83,7 @@ export class Shop extends PureComponent {
* trigger again this function (componentDidUpdate) and thus, * trigger again this function (componentDidUpdate) and thus,
* making an infinite loop. * making an infinite loop.
*/ */
console.log("componentDidUpdate")
return; return;
if ( if (
(prevState.columns.crates !== this.state.columns.crates.items) || (prevState.columns.crates !== this.state.columns.crates.items) ||
@ -493,6 +496,34 @@ export class Shop extends PureComponent {
}); });
} }
onAddCrate(id) {
this.setState({
...this.state,
columns: {
...this.state.columns,
crates: {
...this.state.columns.crates,
[id]: {
crate_type: "rack",
items: []
}}
}
});
}
onDeleteCrate(id) {
let new_state = {
...this.state,
columns: {
...this.state.columns,
crates: {
...this.state.columns.crates,
[id]: undefined
}
}};
delete new_state.columns.crates[id];
this.setState(new_state);
}
render() { render() {
const { const {
@ -551,6 +582,10 @@ export class Shop extends PureComponent {
cratesList={ cratesList={
<CrateList <CrateList
crates={columns.crates} crates={columns.crates}
isTouch={isTouch}
isMobile={isMobile}
onAddCrate={this.onAddCrate}
onDeleteCrate={this.onDeleteCrate}
/> />
} }
summaryPrice={ summaryPrice={