From 62286e9ea89990230da12b117185dd624bf1a4c9 Mon Sep 17 00:00:00 2001
From: occheung <dc@m-labs.hk>
Date: Wed, 19 Jan 2022 14:27:09 +0800
Subject: [PATCH] shop: implement link to datasheet if available

---
 sass/css/_shop.scss   |  6 ++++++
 static/js/shop.jsx    | 17 +++++++++++++++++
 static/js/shop.min.js | 19 +++++++++++++++++--
 3 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/sass/css/_shop.scss b/sass/css/_shop.scss
index b374be0..a26c10e 100644
--- a/sass/css/_shop.scss
+++ b/sass/css/_shop.scss
@@ -142,6 +142,12 @@ button {
                     padding: .3rem 0;
                 }
             }
+
+            .ds {
+                font-size: .8rem;
+                margin: 0;
+                padding-left: 0px;
+            }
         }
     }
 
diff --git a/static/js/shop.jsx b/static/js/shop.jsx
index 2ec3914..ffc5000 100644
--- a/static/js/shop.jsx
+++ b/static/js/shop.jsx
@@ -415,6 +415,8 @@ class ProductItem extends React.PureComponent {
       currency: PropTypes.string.isRequired,
       image: PropTypes.string.isRequired,
       specs: PropTypes.array,
+      datasheet_file: PropTypes.string,
+      datasheet_name: PropTypes.string,
       onClickAddItem: PropTypes.func,
     };
   }
@@ -441,6 +443,8 @@ class ProductItem extends React.PureComponent {
       currency,
       image,
       specs,
+      datasheet_file,
+      datasheet_name,
     } = this.props;
 
     const render_specs = (specs && specs.length > 0 && (
@@ -451,6 +455,15 @@ class ProductItem extends React.PureComponent {
       </ul>
     ));
 
+    const render_datasheet_link = (datasheet_file && datasheet_name && (
+      <div className="ds">
+        <span class='doc-icon'></span>
+        <a href={datasheet_file} target="_blank" rel="noopener noreferrer">
+          {datasheet_name}
+        </a>
+      </div>
+    ));
+
     return (
       <section className="productItem">
 
@@ -463,6 +476,8 @@ class ProductItem extends React.PureComponent {
           <div className="price">{`${currency} ${formatMoney(price)}`}</div>
 
           {render_specs}
+
+          {render_datasheet_link}
         </div>
 
         <div className="content">
@@ -1513,6 +1528,8 @@ class Backlog extends React.PureComponent {
             currency={currency}
             image={`/images/${item.image}`}
             specs={item.specs}
+            datasheet_file={item.datasheet_file}
+            datasheet_name={item.datasheet_name}
             onClickAddItem={onClickAddItem}
         ></ProductItem>
       );
diff --git a/static/js/shop.min.js b/static/js/shop.min.js
index d4e6f9e..a1a4bb2 100644
--- a/static/js/shop.min.js
+++ b/static/js/shop.min.js
@@ -452,6 +452,8 @@ var ProductItem = /*#__PURE__*/function (_React$PureComponent2) {
         currency: PropTypes.string.isRequired,
         image: PropTypes.string.isRequired,
         specs: PropTypes.array,
+        datasheet_file: PropTypes.string,
+        datasheet_name: PropTypes.string,
         onClickAddItem: PropTypes.func
       };
     }
@@ -487,12 +489,23 @@ var ProductItem = /*#__PURE__*/function (_React$PureComponent2) {
           price = _this$props2.price,
           currency = _this$props2.currency,
           image = _this$props2.image,
-          specs = _this$props2.specs;
+          specs = _this$props2.specs,
+          datasheet_file = _this$props2.datasheet_file,
+          datasheet_name = _this$props2.datasheet_name;
       var render_specs = specs && specs.length > 0 && /*#__PURE__*/React.createElement("ul", null, specs.map(function (spec, index) {
         return /*#__PURE__*/React.createElement("li", {
           key: index
         }, spec);
       }));
+      var render_datasheet_link = datasheet_file && datasheet_name && /*#__PURE__*/React.createElement("div", {
+        className: "ds"
+      }, /*#__PURE__*/React.createElement("span", {
+        "class": "doc-icon"
+      }), /*#__PURE__*/React.createElement("a", {
+        href: datasheet_file,
+        target: "_blank",
+        rel: "noopener noreferrer"
+      }, datasheet_name));
       return /*#__PURE__*/React.createElement("section", {
         className: "productItem"
       }, /*#__PURE__*/React.createElement("div", {
@@ -503,7 +516,7 @@ var ProductItem = /*#__PURE__*/function (_React$PureComponent2) {
         }
       }, name), name_codename ? /*#__PURE__*/React.createElement("p", null, name_codename) : null, /*#__PURE__*/React.createElement("div", {
         className: "price"
-      }, "".concat(currency, " ").concat(formatMoney(price))), render_specs), /*#__PURE__*/React.createElement("div", {
+      }, "".concat(currency, " ").concat(formatMoney(price))), render_specs, render_datasheet_link), /*#__PURE__*/React.createElement("div", {
         className: "content"
       }, /*#__PURE__*/React.createElement("button", {
         onClick: this.handleOnClickAddItem.bind(this, index, true)
@@ -1552,6 +1565,8 @@ var Backlog = /*#__PURE__*/function (_React$PureComponent11) {
           currency: currency,
           image: "/images/".concat(item.image),
           specs: item.specs,
+          datasheet_file: item.datasheet_file,
+          datasheet_name: item.datasheet_name,
           onClickAddItem: onClickAddItem
         });
       });