static/css/order-hardware.css

@@ -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;
+  }
 }

static/js/shop.jsx

@@ -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,
               ),
             },

static/js/shop_data.js

@@ -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']}
       ],
     },