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

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

static/css/order-hardware.css

@@ -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

static/js/shop.jsx

@@ -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,13 +1512,25 @@ 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) => {
+    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}
-            index={index}
                             name={`${item.name_number} ${item.name}`}
                             name_codename={item.name_codename}
                             price={item.price}
@@ -1533,8 +1541,13 @@ class Backlog extends React.PureComponent {
                             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,
               ),
             },