From 53a6d3f378f3f455e57bc8d68948f5e8610be445 Mon Sep 17 00:00:00 2001 From: Egor Savkin Date: Fri, 30 Jun 2023 10:10:15 +0800 Subject: [PATCH] shop: group cards Closes #30 Co-authored-by: Egor Savkin Co-committed-by: Egor Savkin --- static/css/order-hardware.css | 56 ++++ static/js/shop.jsx | 89 +++-- static/js/shop.min.js | 612 +++++++++++----------------------- static/js/shop_data.js | 56 ++-- 4 files changed, 337 insertions(+), 476 deletions(-) diff --git a/static/css/order-hardware.css b/static/css/order-hardware.css index 7b53be8..4a3e67e 100644 --- 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; + } } \ No newline at end of file diff --git a/static/js/shop.jsx b/static/js/shop.jsx index ffc5000..818987a 100644 --- 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 {
- - + {(provided, snapshot) => ( items[itemId]); - const products = ordered_items.map((item, index) => { - return ( - - ); - }); + + 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 ( +
+

+ +

+
+
+ {group.items.map(item => ( + + ))} +
+
+
+ ); + } + ); return ( ) : null} - {products} +
+ {groups} +
{provided.placeholder && (
@@ -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, ), }, diff --git a/static/js/shop.min.js b/static/js/shop.min.js index a1a4bb2..118f21d 100644 --- a/static/js/shop.min.js +++ b/static/js/shop.min.js @@ -1,72 +1,48 @@ 'use strict'; -function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } - -function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } - +function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); } +function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } - -function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } - -function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } - -function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } - -function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } - -function _createSuper(Derived) { return function () { var Super = _getPrototypeOf(Derived), result; if (_isNativeReflectConstruct()) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } - -function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } - +function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } } +function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; } +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); } +function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } +function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } +function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); } function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } - -function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } } - -function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } - +function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } +function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); } - function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } - -function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(n); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } - +function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } - -function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } - +function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } } function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } - -function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } - -function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } - -function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } - +function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; } +function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } +function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } +function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); } +function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } var _window$ReactBeautifu = window.ReactBeautifulDnd, - DragDropContext = _window$ReactBeautifu.DragDropContext, - Draggable = _window$ReactBeautifu.Draggable, - Droppable = _window$ReactBeautifu.Droppable; + DragDropContext = _window$ReactBeautifu.DragDropContext, + Draggable = _window$ReactBeautifu.Draggable, + Droppable = _window$ReactBeautifu.Droppable; var data = window.shop_data; var axios = window.axios; - var productStyle = function productStyle(style, snapshot, removeAnim, hovered, selected) { var custom = { opacity: snapshot.isDragging ? .7 : 1, backgroundColor: hovered || selected ? '#eae7f7' : 'initial' }; - if (!snapshot.isDropAnimating) { return _objectSpread({}, style, {}, custom); } - if (removeAnim) { // cannot be 0, but make it super tiny custom.transitionDuration = '0.001s'; } - return _objectSpread({}, style, {}, custom); }; - var cartStyle = function cartStyle(style, snapshot) { var isDraggingOver = snapshot.isDraggingOver; return _objectSpread({}, style, {}, { @@ -74,77 +50,59 @@ var cartStyle = function cartStyle(style, snapshot) { border: isDraggingOver ? '1px dashed #ccc' : '0' }); }; - var nbrConnectorsStyle = function nbrConnectorsStyle(data) { if (!data || !data.nbrCurrentSlot) { return {}; } - var p = data.nbrCurrentSlot * 100 / data.nbrSlotMax; - if (p > 100) { p = 100; } - return { width: "".concat(p, "%") }; }; - var nbrClocksStyle = function nbrClocksStyle(data) { if (!data || !data.nbrCurrentClock) { return {}; } - var p = data.nbrCurrentClock * 100 / data.nbrClockMax; - if (p > 100) { p = 100; } - return { width: "".concat(p, "%") }; }; - -var copy = function copy(model, source, destination, droppableSource, droppableDestination) { - var sourceClone = Array.from(source.itemIds); +var copy = function copy(model, source, destination, draggableSource, droppableDestination) { var destClone = Array.from(destination.items); - var item = sourceClone[droppableSource.index]; - destClone.splice(droppableDestination.index, 0, _objectSpread({}, model[item], { + destClone.splice(droppableDestination.index, 0, _objectSpread({}, model[draggableSource], { id: uuidv4() })); return destClone; }; - var reorder = function reorder(list, startIndex, endIndex) { var result = Array.from(list); - var _result$splice = result.splice(startIndex, 1), - _result$splice2 = _slicedToArray(_result$splice, 1), - removed = _result$splice2[0]; - + _result$splice2 = _slicedToArray(_result$splice, 1), + removed = _result$splice2[0]; result.splice(endIndex, 0, removed); return result; }; - var remove = function remove(list, startIndex) { var result = Array.from(list); result.splice(startIndex, 1); return result; }; - var nbrOccupiedSlotsInCrate = function nbrOccupiedSlotsInCrate(items) { return items.reduce(function (prev, next) { return prev + (next.hp === 8 ? 2 : 1); }, 0); }; - function formatMoney(amount) { var decimalCount = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2; var decimal = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "."; var thousands = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : ","; - // https://stackoverflow.com/questions/149055/how-can-i-format-numbers-as-currency-string-in-javascript // changes: return amount if error in order to avoid empty value try { @@ -158,17 +116,14 @@ function formatMoney(amount) { return amount; } } - ; + /** * Component that provides a base layout (aside/main) for the page. */ - var Layout = /*#__PURE__*/function (_React$PureComponent) { _inherits(Layout, _React$PureComponent); - var _super = _createSuper(Layout); - _createClass(Layout, null, [{ key: "propTypes", get: function get() { @@ -194,12 +149,9 @@ var Layout = /*#__PURE__*/function (_React$PureComponent) { }; } }]); - function Layout(props) { var _this; - _classCallCheck(this, Layout); - _this = _super.call(this, props); _this.state = { customconf: '', @@ -207,15 +159,15 @@ var Layout = /*#__PURE__*/function (_React$PureComponent) { }; _this.handleCustomConfig = _this.handleCustomConfig.bind(_assertThisInitialized(_this)); _this.handleClickLoad = _this.handleClickLoad.bind(_assertThisInitialized(_this)); - _this.checkValidation = _this.checkValidation.bind(_assertThisInitialized(_this)); // retrieve list of available pn + _this.checkValidation = _this.checkValidation.bind(_assertThisInitialized(_this)); + // retrieve list of available pn var items_keys = Object.keys(props.items); _this.list_pn = items_keys.map(function (key) { return props.items[key].name_number; }); return _this; } - _createClass(Layout, [{ key: "handleCustomConfig", value: function handleCustomConfig(e) { @@ -226,7 +178,6 @@ var Layout = /*#__PURE__*/function (_React$PureComponent) { key: "checkValidation", value: function checkValidation(conf) { var conf_obj; - try { conf_obj = JSON.parse(conf); } catch (e) { @@ -236,7 +187,6 @@ var Layout = /*#__PURE__*/function (_React$PureComponent) { error: 'invalid format' })); } - if (!conf_obj) { return this.setState(_objectSpread({}, this.state, { customconf: conf, @@ -244,7 +194,6 @@ var Layout = /*#__PURE__*/function (_React$PureComponent) { error: 'invalid format' })); } - if ((!conf_obj.items || !conf_obj.type) && (Object.prototype.toString.call(conf_obj.items) !== '[object Array]' || Object.prototype.toString.call(conf_obj.type) !== '[object String]')) { return this.setState(_objectSpread({}, this.state, { customconf: conf, @@ -252,7 +201,6 @@ var Layout = /*#__PURE__*/function (_React$PureComponent) { error: 'invalid format' })); } - if (conf_obj.type !== "desktop" && conf_obj.type !== "rack") { return this.setState(_objectSpread({}, this.state, { customconf: conf, @@ -260,7 +208,6 @@ var Layout = /*#__PURE__*/function (_React$PureComponent) { error: 'invalid format' })); } - conf_obj.items.map(function (item) { try { return JSON.parse(item); @@ -271,7 +218,6 @@ var Layout = /*#__PURE__*/function (_React$PureComponent) { conf_obj.items = conf_obj.items.filter(function (item) { return item; }); - if (conf_obj.items.filter(function (item) { return Object.prototype.toString.call(item) !== '[object Object]' || !item.pn || Object.prototype.toString.call(item.pn) !== '[object String]'; }).length > 0) { @@ -281,7 +227,6 @@ var Layout = /*#__PURE__*/function (_React$PureComponent) { error: 'invalid format' })); } - conf_obj.items = conf_obj.items.map(function (item) { return { pn: item.pn @@ -293,7 +238,6 @@ var Layout = /*#__PURE__*/function (_React$PureComponent) { }).map(function (item_pn) { return item_pn.pn; }); - if (unknow_pn.length > 0) { return this.setState(_objectSpread({}, this.state, { customconf: conf, @@ -301,7 +245,6 @@ var Layout = /*#__PURE__*/function (_React$PureComponent) { error: "".concat(unknow_pn.join(', '), " unknown").concat(unknow_pn.length > 1 ? 's' : '', " pn number") })); } - this.setState(_objectSpread({}, this.state, { customconf: conf, error: null, @@ -312,7 +255,6 @@ var Layout = /*#__PURE__*/function (_React$PureComponent) { key: "handleClickLoad", value: function handleClickLoad() { this.checkValidation(this.state.customconf); - if (this.props.onClickLoadCustomConf) { this.props.onClickLoadCustomConf(this.state.customconf_ready); } @@ -321,16 +263,16 @@ var Layout = /*#__PURE__*/function (_React$PureComponent) { key: "render", value: function render() { var _this$props = this.props, - aside = _this$props.aside, - main = _this$props.main, - mobileSideMenuShouldOpen = _this$props.mobileSideMenuShouldOpen, - isMobile = _this$props.isMobile, - newCardJustAdded = _this$props.newCardJustAdded, - onClickToggleMobileSideMenu = _this$props.onClickToggleMobileSideMenu, - onClickCloseRFQFeedback = _this$props.onClickCloseRFQFeedback, - showRFQFeedback = _this$props.showRFQFeedback, - RFQBodyType = _this$props.RFQBodyType, - RFQBodyOrder = _this$props.RFQBodyOrder; + aside = _this$props.aside, + main = _this$props.main, + mobileSideMenuShouldOpen = _this$props.mobileSideMenuShouldOpen, + isMobile = _this$props.isMobile, + newCardJustAdded = _this$props.newCardJustAdded, + onClickToggleMobileSideMenu = _this$props.onClickToggleMobileSideMenu, + onClickCloseRFQFeedback = _this$props.onClickCloseRFQFeedback, + showRFQFeedback = _this$props.showRFQFeedback, + RFQBodyType = _this$props.RFQBodyType, + RFQBodyOrder = _this$props.RFQBodyOrder; return /*#__PURE__*/React.createElement("div", { className: "layout" }, /*#__PURE__*/React.createElement("aside", { @@ -426,26 +368,20 @@ var Layout = /*#__PURE__*/function (_React$PureComponent) { })); } }]); - return Layout; }(React.PureComponent); /** * Component that renders a product. * Used in the aside (e.g backlog of product) */ - - var ProductItem = /*#__PURE__*/function (_React$PureComponent2) { _inherits(ProductItem, _React$PureComponent2); - var _super2 = _createSuper(ProductItem); - _createClass(ProductItem, null, [{ key: "propTypes", get: function get() { return { id: PropTypes.string.isRequired, - index: PropTypes.number.isRequired, name: PropTypes.string.isRequired, name_codename: PropTypes.string, price: PropTypes.number.isRequired, @@ -458,40 +394,34 @@ var ProductItem = /*#__PURE__*/function (_React$PureComponent2) { }; } }]); - function ProductItem(props) { var _this2; - _classCallCheck(this, ProductItem); - _this2 = _super2.call(this, props); _this2.handleOnClickAddItem = _this2.handleOnClickAddItem.bind(_assertThisInitialized(_this2)); return _this2; } - _createClass(ProductItem, [{ key: "handleOnClickAddItem", - value: function handleOnClickAddItem(index, tap, e) { + value: function handleOnClickAddItem(id, tap, e) { if (this.props.onClickAddItem) { - this.props.onClickAddItem(index, tap); + this.props.onClickAddItem(id, tap); } - e.preventDefault(); } }, { key: "render", value: function render() { var _this$props2 = this.props, - id = _this$props2.id, - index = _this$props2.index, - name = _this$props2.name, - name_codename = _this$props2.name_codename, - price = _this$props2.price, - currency = _this$props2.currency, - image = _this$props2.image, - specs = _this$props2.specs, - datasheet_file = _this$props2.datasheet_file, - datasheet_name = _this$props2.datasheet_name; + id = _this$props2.id, + name = _this$props2.name, + name_codename = _this$props2.name_codename, + price = _this$props2.price, + currency = _this$props2.currency, + image = _this$props2.image, + 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 @@ -519,19 +449,19 @@ var ProductItem = /*#__PURE__*/function (_React$PureComponent2) { }, "".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) + onClick: this.handleOnClickAddItem.bind(this, id, true) }, /*#__PURE__*/React.createElement("img", { src: "/images/shop/icon-add.svg", alt: "add" })), /*#__PURE__*/React.createElement(Draggable, { - draggableId: id, - index: index + draggableId: id }, function (provided, snapshot) { return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("img", _extends({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: productStyle(provided.draggableProps.style, snapshot, true // hack: remove weird animation after a drop ), + src: image })), snapshot.isDragging && /*#__PURE__*/React.createElement("img", { className: "simclone", @@ -540,20 +470,15 @@ var ProductItem = /*#__PURE__*/function (_React$PureComponent2) { }))); } }]); - return ProductItem; }(React.PureComponent); /** * Component that renders a product. * Used in the crate */ - - var ProductCartItem = /*#__PURE__*/function (_React$PureComponent3) { _inherits(ProductCartItem, _React$PureComponent3); - var _super3 = _createSuper(ProductCartItem); - _createClass(ProductCartItem, null, [{ key: "propTypes", get: function get() { @@ -578,12 +503,9 @@ var ProductCartItem = /*#__PURE__*/function (_React$PureComponent3) { }; } }]); - function ProductCartItem(props) { var _this3; - _classCallCheck(this, ProductCartItem); - _this3 = _super3.call(this, props); _this3.handleOnMouseEnterItem = _this3.handleOnMouseEnterItem.bind(_assertThisInitialized(_this3)); _this3.handleOnMouseLeaveItem = _this3.handleOnMouseLeaveItem.bind(_assertThisInitialized(_this3)); @@ -594,14 +516,12 @@ var ProductCartItem = /*#__PURE__*/function (_React$PureComponent3) { _this3.handleOnClickRemoveItem = _this3.handleOnClickRemoveItem.bind(_assertThisInitialized(_this3)); return _this3; } - _createClass(ProductCartItem, [{ key: "handleOnMouseEnterItem", value: function handleOnMouseEnterItem(index, e) { if (this.props.onToggleProgress) { this.props.onToggleProgress(index, true); } - e.preventDefault(); } }, { @@ -610,7 +530,6 @@ var ProductCartItem = /*#__PURE__*/function (_React$PureComponent3) { if (this.props.onToggleProgress) { this.props.onToggleProgress(index, false); } - e.preventDefault(); } }, { @@ -619,11 +538,9 @@ var ProductCartItem = /*#__PURE__*/function (_React$PureComponent3) { if (!isWarning) { return; } - if (this.props.onToggleWarning) { this.props.onToggleWarning(index, true); } - e.preventDefault(); } }, { @@ -632,11 +549,9 @@ var ProductCartItem = /*#__PURE__*/function (_React$PureComponent3) { if (!isWarning) { return; } - if (this.props.onToggleWarning) { this.props.onToggleWarning(index, false); } - e.preventDefault(); } }, { @@ -645,7 +560,6 @@ var ProductCartItem = /*#__PURE__*/function (_React$PureComponent3) { if (this.props.onToggleOverlayRemove && !this.props.isMobile) { this.props.onToggleOverlayRemove(index, true); } - e.preventDefault(); } }, { @@ -654,7 +568,6 @@ var ProductCartItem = /*#__PURE__*/function (_React$PureComponent3) { if (this.props.onToggleOverlayRemove && !this.props.isMobile) { this.props.onToggleOverlayRemove(index, false); } - e.preventDefault(); } }, { @@ -668,26 +581,21 @@ var ProductCartItem = /*#__PURE__*/function (_React$PureComponent3) { key: "render", value: function render() { var _this4 = this; - var _this$props3 = this.props, - hovered = _this$props3.hovered, - model = _this$props3.model, - data = _this$props3.data, - index = _this$props3.index, - shouldTooltipWarningClassInverted = _this$props3.shouldTooltipWarningClassInverted; + hovered = _this$props3.hovered, + model = _this$props3.model, + data = _this$props3.data, + index = _this$props3.index, + shouldTooltipWarningClassInverted = _this$props3.shouldTooltipWarningClassInverted; var warning; - if (data && data.warnings) { var warningsKeys = Object.keys(data.warnings); - if (warningsKeys && warningsKeys.length > 0) { // we display only the first warning warning = data.warnings[warningsKeys[0]]; } } - var render_progress; - if (model.showProgress && data) { switch (model.type) { case 'kasli': @@ -695,31 +603,26 @@ var ProductCartItem = /*#__PURE__*/function (_React$PureComponent3) { className: "k-popup-connectors" }, /*#__PURE__*/React.createElement("p", null, "".concat(data.nbrCurrentSlot, "/").concat(model.nbrSlotMax, " EEM connectors used")), /*#__PURE__*/React.createElement("p", null, "".concat(data.nbrCurrentClock, "/").concat(model.nbrClockMax, " Clock connectors used"))); break; - case 'vhdcicarrier': render_progress = /*#__PURE__*/React.createElement("div", { className: "k-popup-connectors" }, /*#__PURE__*/React.createElement("p", null, "".concat(data.nbrCurrentSlot, "/").concat(model.nbrSlotMax, " EEM connectors used"))); break; - case 'zotino': case 'hd68': render_progress = /*#__PURE__*/React.createElement("div", { className: "k-popup-connectors" }, /*#__PURE__*/React.createElement("p", null, "".concat(data.nbrCurrentSlot, "/").concat(model.nbrSlotMax, " connectors used"))); break; - case 'clocker': render_progress = /*#__PURE__*/React.createElement("div", { className: "k-popup-connectors" }, /*#__PURE__*/React.createElement("p", null, "".concat(data.nbrCurrentClock, "/").concat(model.nbrClockMax, " Clock connectors used"))); break; - default: break; } } - return /*#__PURE__*/React.createElement(Draggable, { draggableId: model.id, index: index @@ -780,36 +683,28 @@ var ProductCartItem = /*#__PURE__*/function (_React$PureComponent3) { }); } }]); - return ProductCartItem; }(React.PureComponent); /** * Component that displays a placeholder inside crate. * Allows to display how it remains space for the current crate. */ - - var FakePlaceholder = /*#__PURE__*/function (_React$PureComponent4) { _inherits(FakePlaceholder, _React$PureComponent4); - var _super4 = _createSuper(FakePlaceholder); - function FakePlaceholder() { _classCallCheck(this, FakePlaceholder); - return _super4.apply(this, arguments); } - _createClass(FakePlaceholder, [{ key: "render", value: function render() { var _this$props4 = this.props, - isDraggingOver = _this$props4.isDraggingOver, - nbrSlots = _this$props4.nbrSlots, - items = _this$props4.items; + isDraggingOver = _this$props4.isDraggingOver, + nbrSlots = _this$props4.nbrSlots, + items = _this$props4.items; var fakePlaceholder = []; var nbrOccupied = nbrOccupiedSlotsInCrate(items); - for (var i = nbrSlots - nbrOccupied; i > 0; i--) { fakePlaceholder.push( /*#__PURE__*/React.createElement("div", { key: i, @@ -821,7 +716,6 @@ var FakePlaceholder = /*#__PURE__*/function (_React$PureComponent4) { } })); } - return /*#__PURE__*/React.createElement(React.Fragment, null, fakePlaceholder); } }], [{ @@ -834,46 +728,37 @@ var FakePlaceholder = /*#__PURE__*/function (_React$PureComponent4) { }; } }]); - return FakePlaceholder; }(React.PureComponent); /** * Component that displays a list of */ - - var Cart = /*#__PURE__*/function (_React$PureComponent5) { _inherits(Cart, _React$PureComponent5); - var _super5 = _createSuper(Cart); - function Cart() { _classCallCheck(this, Cart); - return _super5.apply(this, arguments); } - _createClass(Cart, [{ key: "render", value: function render() { var _this$props5 = this.props, - isMobile = _this$props5.isMobile, - nbrSlots = _this$props5.nbrSlots, - itemHovered = _this$props5.itemHovered, - data = _this$props5.data, - onToggleProgress = _this$props5.onToggleProgress, - onToggleWarning = _this$props5.onToggleWarning, - onToggleOverlayRemove = _this$props5.onToggleOverlayRemove, - onClickRemoveItem = _this$props5.onClickRemoveItem; + isMobile = _this$props5.isMobile, + nbrSlots = _this$props5.nbrSlots, + itemHovered = _this$props5.itemHovered, + data = _this$props5.data, + onToggleProgress = _this$props5.onToggleProgress, + onToggleWarning = _this$props5.onToggleWarning, + onToggleOverlayRemove = _this$props5.onToggleOverlayRemove, + onClickRemoveItem = _this$props5.onClickRemoveItem; var nbrOccupied = nbrOccupiedSlotsInCrate(data.items); var shouldTooltipWarningClassInverted = nbrSlots - nbrOccupied < 5; var products = data.items.map(function (item, index) { var itemData; - if (data.itemsData && index in data.itemsData) { itemData = data.itemsData[index]; } - return /*#__PURE__*/React.createElement(ProductCartItem, { isMobile: isMobile, hovered: item.id === itemHovered, @@ -923,19 +808,14 @@ var Cart = /*#__PURE__*/function (_React$PureComponent5) { }; } }]); - return Cart; }(React.PureComponent); /** * Component that displays crate modes */ - - var CrateMode = /*#__PURE__*/function (_React$PureComponent6) { _inherits(CrateMode, _React$PureComponent6); - var _super6 = _createSuper(CrateMode); - _createClass(CrateMode, null, [{ key: "propTypes", get: function get() { @@ -946,34 +826,28 @@ var CrateMode = /*#__PURE__*/function (_React$PureComponent6) { }; } }]); - function CrateMode(props) { var _this5; - _classCallCheck(this, CrateMode); - _this5 = _super6.call(this, props); _this5.handleOnClickMode = _this5.handleOnClickMode.bind(_assertThisInitialized(_this5)); return _this5; } - _createClass(CrateMode, [{ key: "handleOnClickMode", value: function handleOnClickMode(mode, e) { if (this.props.onClickMode) { this.props.onClickMode(mode); } - e.preventDefault(); } }, { key: "render", value: function render() { var _this6 = this; - var _this$props6 = this.props, - mode = _this$props6.mode, - items = _this$props6.items; + mode = _this$props6.mode, + items = _this$props6.items; return /*#__PURE__*/React.createElement("div", { className: "crate-mode" }, items.map(function (item) { @@ -987,32 +861,25 @@ var CrateMode = /*#__PURE__*/function (_React$PureComponent6) { })); } }]); - return CrateMode; }(React.PureComponent); /** * Component that displays the main crate with reminder rules. * It includes and rules */ - - var Crate = /*#__PURE__*/function (_React$PureComponent7) { _inherits(Crate, _React$PureComponent7); - var _super7 = _createSuper(Crate); - function Crate() { _classCallCheck(this, Crate); - return _super7.apply(this, arguments); } - _createClass(Crate, [{ key: "render", value: function render() { var _this$props7 = this.props, - rules = _this$props7.rules, - cart = _this$props7.cart; + rules = _this$props7.rules, + cart = _this$props7.cart; return /*#__PURE__*/React.createElement("div", { className: "crate" }, /*#__PURE__*/React.createElement("div", { @@ -1040,39 +907,32 @@ var Crate = /*#__PURE__*/function (_React$PureComponent7) { }; } }]); - return Crate; }(React.PureComponent); /** * Component that renders all things for order. * It acts like-a layout, this component do nothing more. */ - - var OrderPanel = /*#__PURE__*/function (_React$PureComponent8) { _inherits(OrderPanel, _React$PureComponent8); - var _super8 = _createSuper(OrderPanel); - function OrderPanel() { _classCallCheck(this, OrderPanel); - return _super8.apply(this, arguments); } - _createClass(OrderPanel, [{ key: "render", value: function render() { var _this$props8 = this.props, - title = _this$props8.title, - description = _this$props8.description, - crateMode = _this$props8.crateMode, - crate = _this$props8.crate, - summaryPrice = _this$props8.summaryPrice, - form = _this$props8.form, - isMobile = _this$props8.isMobile, - onClickToggleMobileSideMenu = _this$props8.onClickToggleMobileSideMenu, - onClickOpenImport = _this$props8.onClickOpenImport; + title = _this$props8.title, + description = _this$props8.description, + crateMode = _this$props8.crateMode, + crate = _this$props8.crate, + summaryPrice = _this$props8.summaryPrice, + form = _this$props8.form, + isMobile = _this$props8.isMobile, + onClickToggleMobileSideMenu = _this$props8.onClickToggleMobileSideMenu, + onClickOpenImport = _this$props8.onClickOpenImport; return /*#__PURE__*/React.createElement("section", { className: "panel" }, /*#__PURE__*/React.createElement("h2", null, title), /*#__PURE__*/React.createElement("div", { @@ -1113,19 +973,14 @@ var OrderPanel = /*#__PURE__*/function (_React$PureComponent8) { }; } }]); - return OrderPanel; }(React.PureComponent); /** * Components that renders the form to request quote. */ - - var OrderForm = /*#__PURE__*/function (_React$PureComponent9) { _inherits(OrderForm, _React$PureComponent9); - var _super9 = _createSuper(OrderForm); - _createClass(OrderForm, null, [{ key: "propTypes", get: function get() { @@ -1136,12 +991,9 @@ var OrderForm = /*#__PURE__*/function (_React$PureComponent9) { }; } }]); - function OrderForm(props) { var _this7; - _classCallCheck(this, OrderForm); - _this7 = _super9.call(this, props); _this7.state = { note: '', @@ -1162,18 +1014,14 @@ var OrderForm = /*#__PURE__*/function (_React$PureComponent9) { _this7.checkValidation = _this7.checkValidation.bind(_assertThisInitialized(_this7)); return _this7; } - _createClass(OrderForm, [{ key: "checkValidation", value: function checkValidation() { var isValid = true; - var validationFields = _objectSpread({}, this.state); - var _this$validateEmail = this.validateEmail(this.state.email), - isEmailEmpty = _this$validateEmail.isEmpty, - isEmailError = _this$validateEmail.isError; - + isEmailEmpty = _this$validateEmail.isEmpty, + isEmailError = _this$validateEmail.isError; validationFields = _objectSpread({}, validationFields, { error: _objectSpread({}, this.state.error, { email: isEmailError @@ -1192,7 +1040,6 @@ var OrderForm = /*#__PURE__*/function (_React$PureComponent9) { var isEmpty = null; var isError = null; var t = this.props.t; - if (!value || value.trim() === '') { isEmpty = true; } else if (value && !value.match(/^\w+([\+\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/)) { @@ -1200,7 +1047,6 @@ var OrderForm = /*#__PURE__*/function (_React$PureComponent9) { message: 'Your email is incomplete' }; } - return { isEmpty: isEmpty, isError: isError @@ -1210,11 +1056,9 @@ var OrderForm = /*#__PURE__*/function (_React$PureComponent9) { key: "validateNote", value: function validateNote(value) { var isEmpty = null; - if (!value || value.trim() === '') { isEmpty = true; } - return { isEmpty: isEmpty }; @@ -1231,11 +1075,9 @@ var OrderForm = /*#__PURE__*/function (_React$PureComponent9) { key: "handleEmail", value: function handleEmail(e) { var value = e.target.value; - var _this$validateEmail2 = this.validateEmail(value), - isEmpty = _this$validateEmail2.isEmpty, - isError = _this$validateEmail2.isError; - + isEmpty = _this$validateEmail2.isEmpty, + isError = _this$validateEmail2.isError; this.setState(_objectSpread({}, this.state, { email: value, error: _objectSpread({}, this.state.error, { @@ -1258,15 +1100,12 @@ var OrderForm = /*#__PURE__*/function (_React$PureComponent9) { key: "handleSubmit", value: function handleSubmit(event) { event.preventDefault(); - if (this.props.onClickSubmit) { // check validation input fields var isValidated = this.checkValidation(); - if (!isValidated) { return false; } - this.props.onClickSubmit(this.state.note, this.state.email); } } @@ -1274,18 +1113,18 @@ var OrderForm = /*#__PURE__*/function (_React$PureComponent9) { key: "render", value: function render() { var handleEmail = this.handleEmail, - handleNote = this.handleNote, - resetEmptyError = this.resetEmptyError, - handleSubmit = this.handleSubmit; + handleNote = this.handleNote, + resetEmptyError = this.resetEmptyError, + handleSubmit = this.handleSubmit; var onClickShow = this.props.onClickShow; var _this$state = this.state, - email = _this$state.email, - note = _this$state.note, - error = _this$state.error, - empty = _this$state.empty; + email = _this$state.email, + note = _this$state.note, + error = _this$state.error, + empty = _this$state.empty; var _this$props9 = this.props, - isProcessing = _this$props9.isProcessing, - isProcessingComplete = _this$props9.isProcessingComplete; + isProcessing = _this$props9.isProcessing, + isProcessingComplete = _this$props9.isProcessingComplete; return /*#__PURE__*/React.createElement("div", { className: "summary-form" }, /*#__PURE__*/React.createElement("form", { @@ -1327,20 +1166,15 @@ var OrderForm = /*#__PURE__*/function (_React$PureComponent9) { })))); } }]); - return OrderForm; }(React.PureComponent); /** * Components that displays the list of card that are used in the crate. * It is a summary of purchase */ - - var OrderSumary = /*#__PURE__*/function (_React$PureComponent10) { _inherits(OrderSumary, _React$PureComponent10); - var _super10 = _createSuper(OrderSumary); - _createClass(OrderSumary, null, [{ key: "propTypes", get: function get() { @@ -1358,12 +1192,9 @@ var OrderSumary = /*#__PURE__*/function (_React$PureComponent10) { }; } }]); - function OrderSumary(props) { var _this8; - _classCallCheck(this, OrderSumary); - _this8 = _super10.call(this, props); _this8.handleOnDeleteItem = _this8.handleOnDeleteItem.bind(_assertThisInitialized(_this8)); _this8.handleOnDeleteAllItems = _this8.handleOnDeleteAllItems.bind(_assertThisInitialized(_this8)); @@ -1372,14 +1203,12 @@ var OrderSumary = /*#__PURE__*/function (_React$PureComponent10) { _this8.handleOnClickSelectItem = _this8.handleOnClickSelectItem.bind(_assertThisInitialized(_this8)); return _this8; } - _createClass(OrderSumary, [{ key: "handleOnDeleteItem", value: function handleOnDeleteItem(index, e) { if (this.props.onDeleteItem) { this.props.onDeleteItem(index); } - e.preventDefault(); } }, { @@ -1388,7 +1217,6 @@ var OrderSumary = /*#__PURE__*/function (_React$PureComponent10) { if (this.props.onDeleteAllItems) { this.props.onDeleteAllItems(); } - e.preventDefault(); } }, { @@ -1397,7 +1225,6 @@ var OrderSumary = /*#__PURE__*/function (_React$PureComponent10) { if (this.props.onMouseEnterItem) { this.props.onMouseEnterItem(id); } - e.preventDefault(); } }, { @@ -1406,7 +1233,6 @@ var OrderSumary = /*#__PURE__*/function (_React$PureComponent10) { if (this.props.onMouseLeaveItem) { this.props.onMouseLeaveItem(); } - e.preventDefault(); } }, { @@ -1417,20 +1243,18 @@ var OrderSumary = /*#__PURE__*/function (_React$PureComponent10) { this.props.onClickSelectItem(index); } } - return e.preventDefault(); } }, { key: "render", value: function render() { var _this9 = this; - var _this$props10 = this.props, - currency = _this$props10.currency, - modes = _this$props10.modes, - currentMode = _this$props10.currentMode, - summary = _this$props10.summary, - itemsData = _this$props10.itemsData; + currency = _this$props10.currency, + modes = _this$props10.modes, + currentMode = _this$props10.currentMode, + summary = _this$props10.summary, + itemsData = _this$props10.itemsData; var mode = modes.find(function (elem) { return elem.id === currentMode; }); @@ -1464,16 +1288,13 @@ var OrderSumary = /*#__PURE__*/function (_React$PureComponent10) { }, "\xA0")))), /*#__PURE__*/React.createElement("tbody", null, summary.map(function (item, index) { var alert; var warning; - if (itemsData[index]) { alert = itemsData[index]; var warningsKeys = Object.keys(alert.warnings); - if (warningsKeys && warningsKeys.length > 0) { warning = alert.warnings[warningsKeys[0]]; } } - return /*#__PURE__*/React.createElement("tr", { key: item.id, className: "hoverable ".concat(item.selected ? 'selected' : ''), @@ -1522,53 +1343,70 @@ var OrderSumary = /*#__PURE__*/function (_React$PureComponent10) { }, "\xA0")))))); } }]); - return OrderSumary; }(React.PureComponent); /** * Component that renders the backlog in the aside */ - - var Backlog = /*#__PURE__*/function (_React$PureComponent11) { _inherits(Backlog, _React$PureComponent11); - var _super11 = _createSuper(Backlog); - function Backlog() { _classCallCheck(this, Backlog); - return _super11.apply(this, arguments); } - _createClass(Backlog, [{ key: "render", value: function render() { var _this$props11 = this.props, - currency = _this$props11.currency, - data = _this$props11.data, - items = _this$props11.items, - onClickAddItem = _this$props11.onClickAddItem, - onClickToggleMobileSideMenu = _this$props11.onClickToggleMobileSideMenu, - isMobile = _this$props11.isMobile; - var ordered_items = data.itemIds.map(function (itemId) { - return items[itemId]; + currency = _this$props11.currency, + data = _this$props11.data, + items = _this$props11.items, + onClickAddItem = _this$props11.onClickAddItem, + onClickToggleMobileSideMenu = _this$props11.onClickToggleMobileSideMenu, + isMobile = _this$props11.isMobile; + var ordered_groups = data.categories.map(function (groupItem) { + return { + name: groupItem.name, + items: groupItem.itemIds.map(function (itemId) { + return items[itemId]; + }) + }; }); - var products = ordered_items.map(function (item, index) { - return /*#__PURE__*/React.createElement(ProductItem, { - key: item.id, - id: item.id, - index: index, - name: "".concat(item.name_number, " ").concat(item.name), - name_codename: item.name_codename, - price: item.price, - currency: currency, - image: "/images/".concat(item.image), - specs: item.specs, - datasheet_file: item.datasheet_file, - datasheet_name: item.datasheet_name, - onClickAddItem: onClickAddItem - }); + var groups = ordered_groups.map(function (group, g_index) { + return /*#__PURE__*/React.createElement("div", { + className: "card" + }, /*#__PURE__*/React.createElement("h2", { + className: "card-header" + }, /*#__PURE__*/React.createElement("button", { + className: "btn btn-link btn-block text-left ", + type: "button", + "data-toggle": "collapse", + "data-target": "#collapse".concat(g_index), + "aria-expanded": "true", + "aria-controls": "collapse".concat(g_index) + }, group.name)), /*#__PURE__*/React.createElement("div", { + id: "collapse".concat(g_index), + className: "collapse", + "aria-labelledby": "headingOne", + "data-parent": "#accordion_categories" + }, /*#__PURE__*/React.createElement("div", { + className: "card-body" + }, group.items.map(function (item) { + return /*#__PURE__*/React.createElement(ProductItem, { + key: item.id, + id: item.id, + name: "".concat(item.name_number, " ").concat(item.name), + name_codename: item.name_codename, + price: item.price, + currency: currency, + image: "/images/".concat(item.image), + specs: item.specs, + datasheet_file: item.datasheet_file, + datasheet_name: item.datasheet_name, + onClickAddItem: onClickAddItem + }); + })))); }); return /*#__PURE__*/React.createElement(Droppable, { droppableId: data.id, @@ -1584,7 +1422,10 @@ var Backlog = /*#__PURE__*/function (_React$PureComponent11) { }, /*#__PURE__*/React.createElement("img", { src: "/images/shop/icon-close-white.svg", alt: "add" - }))) : null, products, provided.placeholder && /*#__PURE__*/React.createElement("div", { + }))) : null, /*#__PURE__*/React.createElement("div", { + className: "accordion", + id: "accordion_categories" + }, groups), provided.placeholder && /*#__PURE__*/React.createElement("div", { style: { display: 'none' } @@ -1611,19 +1452,14 @@ var Backlog = /*#__PURE__*/function (_React$PureComponent11) { }; } }]); - return Backlog; }(React.PureComponent); /** * Component that render the entire shop */ - - var Shop = /*#__PURE__*/function (_React$PureComponent12) { _inherits(Shop, _React$PureComponent12); - var _super12 = _createSuper(Shop); - _createClass(Shop, null, [{ key: "propTypes", get: function get() { @@ -1632,12 +1468,9 @@ var Shop = /*#__PURE__*/function (_React$PureComponent12) { }; } }]); - function Shop(props) { var _this10; - _classCallCheck(this, Shop); - _this10 = _super12.call(this, props); _this10.state = _this10.props.data; _this10.handleCrateModeChange = _this10.handleCrateModeChange.bind(_assertThisInitialized(_this10)); @@ -1661,14 +1494,16 @@ var Shop = /*#__PURE__*/function (_React$PureComponent12) { _this10.timer = null; return _this10; } - _createClass(Shop, [{ key: "componentDidMount", value: function componentDidMount() { // index 0 is a Kasli, we place it as a default conf on the crate. + var sourceIds = Array.from(this.state.columns.backlog.categories.map(function (groupId) { + return groupId.itemIds; + }).flat()); var source = { droppableId: 'backlog', - index: 0 + index: null }; var destination = { droppableId: 'cart', @@ -1677,14 +1512,13 @@ var Shop = /*#__PURE__*/function (_React$PureComponent12) { this.handleOnDragEnd({ source: source, destination: destination, - draggableId: null + draggableId: sourceIds[0] }); } }, { key: "componentDidUpdate", value: function componentDidUpdate(prevProps, prevState) { var _this11 = this; - /** * We check alerts (reminder + warning) only when items inside crate or * crate mode change. @@ -1696,7 +1530,6 @@ var Shop = /*#__PURE__*/function (_React$PureComponent12) { if (prevState.columns.cart.items !== this.state.columns.cart.items || prevState.currentMode !== this.state.currentMode) { this.checkAlerts(prevState.columns.cart.items, this.state.columns.cart.items); } - if (this.state.newCardJustAdded) { this.timer = setTimeout(function () { _this11.setState({ @@ -1757,10 +1590,10 @@ var Shop = /*#__PURE__*/function (_React$PureComponent12) { } }, { key: "handleClickAddItem", - value: function handleClickAddItem(index, tap) { + value: function handleClickAddItem(id, tap) { var source = { droppableId: 'backlog', - index: index + index: null }; var destination = { droppableId: 'cart', @@ -1769,7 +1602,7 @@ var Shop = /*#__PURE__*/function (_React$PureComponent12) { this.handleOnDragEnd({ source: source, destination: destination, - draggableId: null + draggableId: id }, tap); } }, { @@ -1850,14 +1683,12 @@ var Shop = /*#__PURE__*/function (_React$PureComponent12) { type: this.state.currentMode }; var clonedCart = Array.from(this.state.columns.cart.items); - for (var i in clonedCart) { var item = clonedCart[i]; crate.items.push({ 'pn': item.name_number }); } - this.setState({ isProcessing: false, shouldShowRFQFeedback: true, @@ -1880,7 +1711,6 @@ var Shop = /*#__PURE__*/function (_React$PureComponent12) { if (!customconf) { return; } - var items = this.props.data.items; var self = this; var new_items = []; @@ -1915,20 +1745,17 @@ var Shop = /*#__PURE__*/function (_React$PureComponent12) { key: "handleClickSubmit", value: function handleClickSubmit(note, email) { var _this12 = this; - var crate = { items: [], type: this.state.currentMode }; var clonedCart = Array.from(this.state.columns.cart.items); - for (var i in clonedCart) { var item = clonedCart[i]; crate.items.push({ 'pn': item.name_number }); } - var data = this.props.data; this.setState({ isProcessing: true @@ -1956,9 +1783,8 @@ var Shop = /*#__PURE__*/function (_React$PureComponent12) { key: "handleOnDragEnd", value: function handleOnDragEnd(result, newAdded) { var source = result.source, - destination = result.destination, - draggableId = result.draggableId; - + destination = result.destination, + draggableId = result.draggableId; if (!destination) { if (source.droppableId === 'cart') { this.setState(_objectSpread({}, this.state, { @@ -1968,20 +1794,17 @@ var Shop = /*#__PURE__*/function (_React$PureComponent12) { }))) })); } - return; } - switch (source.droppableId) { case 'backlog': this.setState(_objectSpread({}, this.state, { newCardJustAdded: newAdded ? true : false, columns: _objectSpread({}, this.state.columns, _defineProperty({}, destination.droppableId, _objectSpread({}, this.state.columns[destination.droppableId], { - items: copy(this.state.items, this.state.columns[source.droppableId], this.state.columns[destination.droppableId], source, destination) + items: copy(this.state.items, this.state.columns[source.droppableId], this.state.columns[destination.droppableId], draggableId, destination) }))) })); break; - case destination.droppableId: this.setState(_objectSpread({}, this.state, { newCardJustAdded: false, @@ -1990,7 +1813,6 @@ var Shop = /*#__PURE__*/function (_React$PureComponent12) { }))) })); break; - default: break; } @@ -2013,51 +1835,45 @@ var Shop = /*#__PURE__*/function (_React$PureComponent12) { key: "checkAlerts", value: function checkAlerts(prevItems, newItems) { var _this13 = this; - console.log('--- START CHECKING CRATE WARNING ---'); var _this$state2 = this.state, - currentMode = _this$state2.currentMode, - crateModeSlots = _this$state2.crateModeSlots, - crateRules = _this$state2.crateRules; + currentMode = _this$state2.currentMode, + crateModeSlots = _this$state2.crateModeSlots, + crateRules = _this$state2.crateRules; var itemsCloned = Array.from(newItems); var itemsData = {}; - var rules = {}; // check number of slot in crate + var rules = {}; + // check number of slot in crate var nbrOccupied = nbrOccupiedSlotsInCrate(newItems); - if (nbrOccupied > crateModeSlots[currentMode]) { rules[crateRules.maxSlot.type] = _objectSpread({}, crateRules.maxSlot); } else if (crateModeSlots[currentMode] === 21 && nbrOccupied <= 10) { rules[crateRules.compactSlot.type] = _objectSpread({}, crateRules.compactSlot); - } // check the number of EEM connectors available for all Kasli - + } + // check the number of EEM connectors available for all Kasli var idxK = itemsCloned.reduce(function (prev, next, i) { if (next.type === 'kasli' || next.type === 'vhdcicarrier') { prev.push(i); } - return prev; }, []); - for (var _i2 = 0; _i2 <= idxK.length - 1; _i2++) { var slots = void 0; var nbUsedSlot = 0; var nbrCurrentClock = 0; var idx = idxK[_i2]; - if (_i2 !== idxK.length - 1) { slots = itemsCloned.slice(idx + 1, idxK[_i2 + 1]); } else { slots = itemsCloned.slice(idx + 1); } - if (_i2 == 0) { var slots_need_resource = itemsCloned.slice(0, idx); var idx_need = slots_need_resource.findIndex(function (e) { return e.rules && e.rules.resources; }); - if (idx_need != -1) { if (idx_need in itemsData) { if ('warnings' in itemsData[idx_need]) { @@ -2073,7 +1889,6 @@ var Shop = /*#__PURE__*/function (_React$PureComponent12) { } } } - nbUsedSlot = slots.filter(function (item) { return item.type !== 'idc-bnc'; }).reduce(function (prev, next) { @@ -2082,11 +1897,9 @@ var Shop = /*#__PURE__*/function (_React$PureComponent12) { nbrCurrentClock = slots.reduce(function (prev, next) { return next.type === 'clocker' ? prev + next.clockOccupied : prev; }, 0); - if (idx in itemsData) { itemsData[idx].nbrCurrentSlot = nbUsedSlot; itemsData[idx].nbrCurrentClock = nbrCurrentClock; - if (!('warnings' in itemsData[idx])) { itemsData[idx].warnings = {}; } @@ -2096,36 +1909,28 @@ var Shop = /*#__PURE__*/function (_React$PureComponent12) { itemsData[idx].nbrCurrentClock = nbrCurrentClock; itemsData[idx].warnings = {}; } - if (nbUsedSlot > itemsCloned[idx].nbrSlotMax) { if (itemsCloned[idx].rules.maxSlot.message) { rules[itemsCloned[idx].rules.maxSlot.type] = _objectSpread({}, itemsCloned[idx].rules.maxSlot); } - itemsData[idx].warnings.maxSlotWarning = _objectSpread({}, itemsCloned[idx].rules.maxSlotWarning); } - if (nbrCurrentClock > itemsCloned[idx].nbrClockMax) { rules[itemsCloned[idx].rules.maxClock.type] = _objectSpread({}, itemsCloned[idx].rules.maxClock); itemsData[idx].warnings.maxClockWarning = _objectSpread({}, itemsCloned[idx].rules.maxClockWarning); } - if (itemsCloned.length > idx + 1) { var ddkali = itemsCloned[idx + 1]; - if (ddkali.type === 'kasli' || ddkali.type === 'vhdcicarrier') { rules[ddkali.rules.follow.type] = _objectSpread({}, ddkali.rules.follow); } } } - if (idxK.length === 0) { var _slots_need_resource = itemsCloned.slice(0); - var _idx_need = _slots_need_resource.findIndex(function (e) { return e.rules && e.rules.resources; }); - if (_idx_need != -1) { if (_idx_need in itemsData) { if ('warnings' in itemsData[_idx_need]) { @@ -2140,33 +1945,27 @@ var Shop = /*#__PURE__*/function (_React$PureComponent12) { itemsData[_idx_need].warnings.resources = _objectSpread({}, itemsCloned[_idx_need].rules.resources); } } - } // check number of clock connector available - + } + // check number of clock connector available var idxC = itemsCloned.reduce(function (prev, next, i) { if (next.type === 'kasli' || next.type === 'clocker') { prev.push(i); } - return prev; }, []); - for (var _i3 = 0; _i3 <= idxC.length - 1; _i3++) { var _slots = void 0; - var _nbrCurrentClock = 0; var _idx = idxC[_i3]; - if (_i3 !== idxC.length - 1) { _slots = itemsCloned.slice(_idx + 1, idxC[_i3 + 1]); } else { _slots = itemsCloned.slice(_idx + 1); } - _nbrCurrentClock = _slots.reduce(function (prev, next) { return prev + next.clockOccupied; }, 0); - if (_idx in itemsData) { if (itemsData[_idx].nbrCurrentClock) { itemsData[_idx].nbrCurrentClock += _nbrCurrentClock; @@ -2178,82 +1977,70 @@ var Shop = /*#__PURE__*/function (_React$PureComponent12) { itemsData[_idx].nbrCurrentClock = _nbrCurrentClock; itemsData[_idx].warnings = {}; } - if (_nbrCurrentClock > itemsCloned[_idx].nbrClockMax) { rules[itemsCloned[_idx].rules.maxClock.type] = _objectSpread({}, itemsCloned[_idx].rules.maxClock); itemsData[_idx].warnings.maxClockWarning = _objectSpread({}, itemsCloned[_idx].rules.maxClockWarning); } - } // check for number of recommanded EEM connectors - + } + // check for number of recommanded EEM connectors ['novo', 'urukul', 'koster'].map(function (_type) { if (itemsCloned.find(function (elem) { return elem.type === _type; })) { rules[_this13.state.items[_type].rules.connectors.type] = _objectSpread({}, _this13.state.items[_type].rules.connectors); } - return _type; }); - if (itemsCloned.find(function (elem) { return elem.type === 'urukul'; })) { if (this.state.items['urukul'].rules.info) { rules[this.state.items['urukul'].rules.info.type] = _objectSpread({}, this.state.items['urukul'].rules.info); } - } // check if IDC-BNC is correctly positionned (after Zotino or HD68) - + } + // check if IDC-BNC is correctly positionned (after Zotino or HD68) var idxIDCBNC = itemsCloned.reduce(function (prev, next, i) { if (next.type === 'idc-bnc') { prev.push(i); } - return prev; }, []); - for (var i = idxIDCBNC.length - 1; i >= 0; i--) { var ce = idxIDCBNC[i]; var shouldWarning = false; - if (ce == 0) { shouldWarning = true; } else if (ce >= 1) { var pe = idxIDCBNC[i] - 1; - if (itemsCloned[pe].type !== 'zotino' && itemsCloned[pe].type !== 'hd68' && itemsCloned[pe].type !== 'idc-bnc') { shouldWarning = true; } } - if (shouldWarning) { itemsData[ce] = _objectSpread({}, itemsCloned[ce]); itemsData[ce].warnings = {}; itemsData[ce].warnings.wrong = _objectSpread({}, itemsCloned[ce].rules.wrong); } - } // check number of IDC-BNC adapters for a Zotino and HD68-IDC - + } + // check number of IDC-BNC adapters for a Zotino and HD68-IDC var idxZH = itemsCloned.reduce(function (prev, next, i) { if (next.type === 'zotino' || next.type === 'hd68') { prev.push(i); } - return prev; }, []); - var _loop = function _loop(_i4) { var slots = void 0; var nbUsedSlot = 0; var idx = idxZH[_i4]; - if (_i4 !== idxZH.length - 1) { slots = itemsCloned.slice(idx + 1, idxZH[_i4 + 1]); } else { slots = itemsCloned.slice(idx + 1); } - var stopCount = false; nbUsedSlot = slots.reduce(function (prev, next, ci, ca) { if (ci === 0 && next.type === 'idc-bnc') { @@ -2262,16 +2049,12 @@ var Shop = /*#__PURE__*/function (_React$PureComponent12) { if (next.type !== 'idc-bnc') { stopCount = true; } - return prev + (next.type === 'idc-bnc' && !stopCount ? 1 : 0); } - return prev; }, 0); - if (idx in itemsData) { itemsData[idx].nbrCurrentSlot = nbUsedSlot; - if (!('warnings' in itemsData[idx])) { itemsData[idx].warnings = {}; } @@ -2280,21 +2063,18 @@ var Shop = /*#__PURE__*/function (_React$PureComponent12) { itemsData[idx].nbrCurrentSlot = nbUsedSlot; itemsData[idx].warnings = {}; } - if (nbUsedSlot > 0) { if (itemsCloned[idx].rules.maxSlot.message) { rules[itemsCloned[idx].rules.maxSlot.type] = _objectSpread({}, itemsCloned[idx].rules.maxSlot); } } - if (nbUsedSlot > itemsCloned[idx].nbrSlotMax) { itemsData[idx].warnings.maxSlotWarning = _objectSpread({}, itemsCloned[idx].rules.maxSlotWarning); - } // check if HD68-IDC has at least 1 IDC-BNC adapter - + } + // check if HD68-IDC has at least 1 IDC-BNC adapter if (itemsCloned[idx].type === 'hd68') { var _shouldWarning = false; - if (idx < itemsCloned.length - 1) { if (itemsCloned[idx + 1].type !== 'idc-bnc') { _shouldWarning = true; @@ -2302,7 +2082,6 @@ var Shop = /*#__PURE__*/function (_React$PureComponent12) { } else if (idx === itemsCloned.length - 1) { _shouldWarning = true; } - if (_shouldWarning) { if (idx in itemsData) { itemsData[idx].warnings.minAdapter = _objectSpread({}, itemsCloned[idx].rules.minAdapter); @@ -2314,12 +2093,11 @@ var Shop = /*#__PURE__*/function (_React$PureComponent12) { } } }; - for (var _i4 = 0; _i4 <= idxZH.length - 1; _i4++) { _loop(_i4); - } // update state with rules - + } + // update state with rules this.setState(_objectSpread({}, this.state, { columns: _objectSpread({}, this.state.columns, { cart: _objectSpread({}, this.state.columns.cart, { @@ -2333,21 +2111,21 @@ var Shop = /*#__PURE__*/function (_React$PureComponent12) { key: "render", value: function render() { var _this$state3 = this.state, - currency = _this$state3.currency, - currentItemHovered = _this$state3.currentItemHovered, - currentMode = _this$state3.currentMode, - crateModeSlots = _this$state3.crateModeSlots, - crateModeItems = _this$state3.crateModeItems, - items = _this$state3.items, - columns = _this$state3.columns, - rules = _this$state3.rules, - mobileSideMenuShouldOpen = _this$state3.mobileSideMenuShouldOpen, - newCardJustAdded = _this$state3.newCardJustAdded, - isProcessing = _this$state3.isProcessing, - shouldShowRFQFeedback = _this$state3.shouldShowRFQFeedback, - RFQBodyType = _this$state3.RFQBodyType, - RFQBodyOrder = _this$state3.RFQBodyOrder, - isProcessingComplete = _this$state3.isProcessingComplete; + currency = _this$state3.currency, + currentItemHovered = _this$state3.currentItemHovered, + currentMode = _this$state3.currentMode, + crateModeSlots = _this$state3.crateModeSlots, + crateModeItems = _this$state3.crateModeItems, + items = _this$state3.items, + columns = _this$state3.columns, + rules = _this$state3.rules, + mobileSideMenuShouldOpen = _this$state3.mobileSideMenuShouldOpen, + newCardJustAdded = _this$state3.newCardJustAdded, + isProcessing = _this$state3.isProcessing, + shouldShowRFQFeedback = _this$state3.shouldShowRFQFeedback, + RFQBodyType = _this$state3.RFQBodyType, + RFQBodyOrder = _this$state3.RFQBodyOrder, + isProcessingComplete = _this$state3.isProcessingComplete; var isMobile = window.deviceIsMobile(); return /*#__PURE__*/React.createElement(DragDropContext, { onDragEnd: this.handleOnDragEnd @@ -2420,10 +2198,8 @@ var Shop = /*#__PURE__*/function (_React$PureComponent12) { })); } }]); - return Shop; }(React.PureComponent); - ReactDOM.render( /*#__PURE__*/React.createElement(Shop, { data: data }), document.querySelector('#root-shop')); diff --git a/static/js/shop_data.js b/static/js/shop_data.js index c3b9da9..8f174d1 100644 --- 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']} ], },