shop: group cards

Closes #30 Co-authored-by: Egor Savkin <es@m-labs.hk> Co-committed-by: Egor Savkin <es@m-labs.hk>
2023-06-30 10:10:15 +08:00 · 2023-06-30 10:10:15 +08:00 · 53a6d3f378
parent d9ba17ad3a
commit 53a6d3f378
4 changed files with 337 additions and 476 deletions
--- a/static/css/order-hardware.css
+++ b/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;
+  }
 }
--- a/static/js/shop.jsx
+++ b/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,
              ),
            },
--- a/static/js/shop.min.js
+++ b/static/js/shop.min.js
--- a/static/js/shop_data.js
+++ b/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']}
      ],
    },