Add add/delete functionality to crates

Signed-off-by: Egor Savkin <es@m-labs.hk>

static/js/shop/Cart.jsx

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

static/js/shop/Crate.jsx

@@ -7,12 +7,19 @@ import {CrateWarnings} from "./CrateWarnings.jsx";
  * Component that displays the main crate with reminder 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 (
         <div className="crate">
 
             <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">
 
                 <Cart

static/js/shop/CrateList.jsx

@@ -2,16 +2,28 @@ import React from 'react'
 import {Accordion} from "react-bootstrap";
 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 (
         <Accordion defaultActiveKey="0">
             {Object.entries(crates).map(([crate_id, crate], index) =>
                 <Accordion.Item eventKey={`${index}`} key={`crate${index}`}>
                     <Accordion.Header>Crate #{`${index}`}</Accordion.Header>
                     <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.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>)
 }

static/js/shop/Shop.jsx

@@ -48,6 +48,8 @@ export class Shop extends PureComponent {
         this.handleClickOpenImport = this.handleClickOpenImport.bind(this);
         this.handleLoadCustomConf = this.handleLoadCustomConf.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_remove = null;
@@ -81,6 +83,7 @@ export class Shop extends PureComponent {
          * trigger again this function (componentDidUpdate) and thus,
          * making an infinite loop.
          */
+        console.log("componentDidUpdate")
         return;
         if (
             (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() {
 
         const {
@@ -551,6 +582,10 @@ export class Shop extends PureComponent {
                             cratesList={
                                 <CrateList
                                     crates={columns.crates}
+                                    isTouch={isTouch}
+                                    isMobile={isMobile}
+                                    onAddCrate={this.onAddCrate}
+                                    onDeleteCrate={this.onDeleteCrate}
                                 />
                             }
                             summaryPrice={