@crystaldesign/diva-web-planner-react 26.3.0-beta.4 → 26.3.0-beta.41

package/build/esm/PriceListCockpit-47726a02.js

@@ -0,0 +1,359 @@
+import './index-e7467256.js';
+import 'react';
+import classnames from 'classnames';
+import { c as cockpitSection, a as cockpitSectionTitle, P as PLANNABLE_ARTICLE_DIMENSION_ID, p as plannableDimensionBlock, d as dimensionRow, b as dimensionRowDisabled, e as dimensionRowHeader, f as cockpitBtnSmall, n as noEffectWarning, o as optionChip, i as optionChipSelected, j as plannableDimensionGroupTitle, k as plannableDimensionGroupValues, l as cockpitBtnPrimary } from './index.module-0de0b74f.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/defineProperty';
+import 'react-dynamic-multi-render';
+import '@crystaldesign/diva-core';
+import 'mobx-react-lite';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import '@babel/runtime/helpers/toArray';
+
+var POSITION_OPTIONS = [{
+  value: 'row',
+  label: 'Row'
+}, {
+  value: 'column',
+  label: 'Column'
+}, {
+  value: 'cell',
+  label: 'Cell'
+}, {
+  value: 'tables',
+  label: 'Tables'
+}];
+function PriceListCockpit(_ref) {
+  var _scopedComboSpec$scop, _scopedComboSpec$scop2, _gatheredData$cellsBy;
+  var gatheredData = _ref.gatheredData,
+    scopeSelection = _ref.scopeSelection,
+    scopedComboSpec = _ref.scopedComboSpec,
+    computing = _ref.computing,
+    maxCombosForBuild = _ref.maxCombosForBuild,
+    getDefaultPositionForDimension = _ref.getDefaultPositionForDimension,
+    onToggleScopeValue = _ref.onToggleScopeValue,
+    onSelectAllForDimension = _ref.onSelectAllForDimension,
+    onSelectGroupForDimension = _ref.onSelectGroupForDimension,
+    onDeselectGroupForDimension = _ref.onDeselectGroupForDimension,
+    onDeselectAllForDimension = _ref.onDeselectAllForDimension,
+    onSetDimensionPosition = _ref.onSetDimensionPosition,
+    onToggleDimensionDisabled = _ref.onToggleDimensionDisabled,
+    onCompute = _ref.onCompute,
+    onToggleSmartMerge = _ref.onToggleSmartMerge;
+  return /*#__PURE__*/jsxs("div", {
+    className: cockpitSection,
+    children: [/*#__PURE__*/jsxs("div", {
+      className: cockpitSectionTitle,
+      children: ["Dimensions (", gatheredData.dimensions.length, ")"]
+    }), scopeSelection && /*#__PURE__*/jsxs(Fragment, {
+      children: [gatheredData.dimensions.map(function (d) {
+        var _scopeSelection$disab, _gatheredData$dimensi2, _scopeSelection$autoE3, _scopeSelection$autoE4;
+        var isPlannableDim = d.id === PLANNABLE_ARTICLE_DIMENSION_ID;
+        var isDisabled = ((_scopeSelection$disab = scopeSelection.disabledDimensionIds) !== null && _scopeSelection$disab !== void 0 ? _scopeSelection$disab : []).includes(d.id);
+        if (isPlannableDim) {
+          var _gatheredData$dimensi, _scopeSelection$autoE, _scopeSelection$autoE2;
+          return /*#__PURE__*/jsxs("div", {
+            className: classnames(plannableDimensionBlock, dimensionRow, isDisabled && dimensionRowDisabled),
+            children: [/*#__PURE__*/jsxs("div", {
+              className: dimensionRowHeader,
+              children: [/*#__PURE__*/jsx("button", {
+                type: "button",
+                className: cockpitBtnSmall,
+                onClick: function onClick() {
+                  return onToggleDimensionDisabled(d.id);
+                },
+                title: isDisabled ? 'Include in combinations' : 'Exclude from combinations',
+                children: isDisabled ? 'Include' : 'Exclude'
+              }), !isDisabled && /*#__PURE__*/jsxs(Fragment, {
+                children: [/*#__PURE__*/jsx("button", {
+                  type: "button",
+                  className: cockpitBtnSmall,
+                  onClick: function onClick() {
+                    return onSelectAllForDimension(d.id);
+                  },
+                  title: "Select all",
+                  children: "All"
+                }), /*#__PURE__*/jsx("button", {
+                  type: "button",
+                  className: cockpitBtnSmall,
+                  onClick: function onClick() {
+                    return onDeselectAllForDimension(d.id);
+                  },
+                  title: "Deselect all",
+                  children: "None"
+                })]
+              }), /*#__PURE__*/jsx("span", {
+                style: {
+                  fontWeight: 600
+                },
+                children: d.name
+              }), " (plannable articles \xB7 add to set)", (((_gatheredData$dimensi = gatheredData.dimensionsWithNoEffect) === null || _gatheredData$dimensi === void 0 ? void 0 : _gatheredData$dimensi.includes(d.id)) || isDisabled && ((_scopeSelection$autoE = scopeSelection.autoExcludedNoEffectDimensionIds) !== null && _scopeSelection$autoE !== void 0 ? _scopeSelection$autoE : []).includes(d.id)) && /*#__PURE__*/jsx("span", {
+                className: noEffectWarning,
+                title: "Varying this dimension does not change the price in any context",
+                children: "\u26A0 Doesn't affect prices"
+              }), isDisabled && ((_scopeSelection$autoE2 = scopeSelection.autoExcludedNoEffectDimensionIds) !== null && _scopeSelection$autoE2 !== void 0 ? _scopeSelection$autoE2 : []).includes(d.id) && /*#__PURE__*/jsx("span", {
+                style: {
+                  marginLeft: 8,
+                  fontStyle: 'italic',
+                  opacity: 0.8
+                },
+                children: "\u2013 excluded (no effect on price)"
+              }), !isDisabled && /*#__PURE__*/jsxs(Fragment, {
+                children: [/*#__PURE__*/jsx("span", {
+                  style: {
+                    marginLeft: 8
+                  },
+                  children: "Layout:"
+                }), POSITION_OPTIONS.map(function (opt) {
+                  var _scopeSelection$dimen, _scopeSelection$dimen2;
+                  var pos = (_scopeSelection$dimen = (_scopeSelection$dimen2 = scopeSelection.dimensionPositionByDimensionId) === null || _scopeSelection$dimen2 === void 0 ? void 0 : _scopeSelection$dimen2[d.id]) !== null && _scopeSelection$dimen !== void 0 ? _scopeSelection$dimen : getDefaultPositionForDimension(d.id, gatheredData.dimensions, scopeSelection);
+                  var selected = pos === opt.value;
+                  return /*#__PURE__*/jsx("button", {
+                    type: "button",
+                    className: classnames(optionChip, selected && optionChipSelected),
+                    style: {
+                      marginLeft: 4
+                    },
+                    onClick: function onClick() {
+                      return onSetDimensionPosition(d.id, opt.value);
+                    },
+                    title: "Position: ".concat(opt.label),
+                    children: opt.label
+                  }, opt.value);
+                })]
+              })]
+            }), !isDisabled && /*#__PURE__*/jsxs("div", {
+              style: {
+                marginTop: 6
+              },
+              children: [/*#__PURE__*/jsx("span", {
+                className: plannableDimensionGroupTitle,
+                style: {
+                  display: 'block',
+                  marginBottom: 4
+                },
+                children: "Articles:"
+              }), d.valueGroups && d.valueGroups.length > 0 ? d.valueGroups.map(function (grp) {
+                return /*#__PURE__*/jsxs("div", {
+                  style: {
+                    marginBottom: 4
+                  },
+                  children: [/*#__PURE__*/jsxs("div", {
+                    style: {
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: 6,
+                      marginBottom: 2
+                    },
+                    children: [/*#__PURE__*/jsx("span", {
+                      className: plannableDimensionGroupTitle,
+                      children: grp.groupName
+                    }), function (_scopeSelection$selec) {
+                      var selectedForDim = (_scopeSelection$selec = scopeSelection.selectedValuesByDimensionId[d.id]) !== null && _scopeSelection$selec !== void 0 ? _scopeSelection$selec : [];
+                      var allSelected = grp.values.every(function (v) {
+                        return selectedForDim.includes(v);
+                      });
+                      return /*#__PURE__*/jsx("button", {
+                        type: "button",
+                        className: cockpitBtnSmall,
+                        onClick: function onClick() {
+                          return allSelected ? onDeselectGroupForDimension(d.id, grp.values) : onSelectGroupForDimension(d.id, grp.values);
+                        },
+                        title: allSelected ? 'Deselect all articles in this group' : 'Select all articles in this group',
+                        children: allSelected ? 'Deselect group' : 'Select group'
+                      });
+                    }()]
+                  }), /*#__PURE__*/jsx("div", {
+                    className: plannableDimensionGroupValues,
+                    children: grp.values.map(function (val) {
+                      var _scopeSelection$selec2;
+                      var selected = ((_scopeSelection$selec2 = scopeSelection.selectedValuesByDimensionId[d.id]) !== null && _scopeSelection$selec2 !== void 0 ? _scopeSelection$selec2 : []).includes(val);
+                      return /*#__PURE__*/jsx("button", {
+                        type: "button",
+                        className: classnames(optionChip, selected && optionChipSelected),
+                        onClick: function onClick() {
+                          return onToggleScopeValue(d.id, val);
+                        },
+                        children: val
+                      }, val);
+                    })
+                  })]
+                }, grp.groupName);
+              }) : /*#__PURE__*/jsx("div", {
+                className: plannableDimensionGroupValues,
+                children: d.values.map(function (val) {
+                  var _scopeSelection$selec3;
+                  var selected = ((_scopeSelection$selec3 = scopeSelection.selectedValuesByDimensionId[d.id]) !== null && _scopeSelection$selec3 !== void 0 ? _scopeSelection$selec3 : []).includes(val);
+                  return /*#__PURE__*/jsx("button", {
+                    type: "button",
+                    className: classnames(optionChip, selected && optionChipSelected),
+                    onClick: function onClick() {
+                      return onToggleScopeValue(d.id, val);
+                    },
+                    children: val
+                  }, val);
+                })
+              })]
+            })]
+          }, d.id);
+        }
+        return /*#__PURE__*/jsxs("div", {
+          className: classnames(dimensionRow, isDisabled && dimensionRowDisabled),
+          children: [/*#__PURE__*/jsxs("div", {
+            className: dimensionRowHeader,
+            children: [/*#__PURE__*/jsx("button", {
+              type: "button",
+              className: cockpitBtnSmall,
+              onClick: function onClick() {
+                return onToggleDimensionDisabled(d.id);
+              },
+              title: isDisabled ? 'Include in combinations' : 'Exclude from combinations',
+              children: isDisabled ? 'Include' : 'Exclude'
+            }), !isDisabled && /*#__PURE__*/jsxs(Fragment, {
+              children: [/*#__PURE__*/jsx("button", {
+                type: "button",
+                className: cockpitBtnSmall,
+                onClick: function onClick() {
+                  return onSelectAllForDimension(d.id);
+                },
+                title: "Select all",
+                children: "All"
+              }), /*#__PURE__*/jsx("button", {
+                type: "button",
+                className: cockpitBtnSmall,
+                onClick: function onClick() {
+                  return onDeselectAllForDimension(d.id);
+                },
+                title: "Deselect all",
+                children: "None"
+              })]
+            }), /*#__PURE__*/jsx("span", {
+              style: {
+                fontWeight: 600
+              },
+              children: d.name
+            }), " (", d.source, ")", (((_gatheredData$dimensi2 = gatheredData.dimensionsWithNoEffect) === null || _gatheredData$dimensi2 === void 0 ? void 0 : _gatheredData$dimensi2.includes(d.id)) || isDisabled && ((_scopeSelection$autoE3 = scopeSelection.autoExcludedNoEffectDimensionIds) !== null && _scopeSelection$autoE3 !== void 0 ? _scopeSelection$autoE3 : []).includes(d.id)) && /*#__PURE__*/jsx("span", {
+              className: noEffectWarning,
+              title: "Varying this dimension does not change the price in any context",
+              children: "\u26A0 Doesn't affect prices"
+            }), isDisabled ? /*#__PURE__*/jsx("span", {
+              style: {
+                marginLeft: 8,
+                fontStyle: 'italic',
+                opacity: 0.8
+              },
+              children: ((_scopeSelection$autoE4 = scopeSelection.autoExcludedNoEffectDimensionIds) !== null && _scopeSelection$autoE4 !== void 0 ? _scopeSelection$autoE4 : []).includes(d.id) ? '– excluded (no effect on price)' : '– excluded from combinations'
+            }) : /*#__PURE__*/jsxs(Fragment, {
+              children: [/*#__PURE__*/jsx("span", {
+                style: {
+                  marginLeft: 8
+                },
+                children: "Layout:"
+              }), POSITION_OPTIONS.map(function (opt) {
+                var _scopeSelection$dimen3, _scopeSelection$dimen4;
+                var pos = (_scopeSelection$dimen3 = (_scopeSelection$dimen4 = scopeSelection.dimensionPositionByDimensionId) === null || _scopeSelection$dimen4 === void 0 ? void 0 : _scopeSelection$dimen4[d.id]) !== null && _scopeSelection$dimen3 !== void 0 ? _scopeSelection$dimen3 : getDefaultPositionForDimension(d.id, gatheredData.dimensions, scopeSelection);
+                var selected = pos === opt.value;
+                return /*#__PURE__*/jsx("button", {
+                  type: "button",
+                  className: classnames(optionChip, selected && optionChipSelected),
+                  style: {
+                    marginLeft: 4
+                  },
+                  onClick: function onClick() {
+                    return onSetDimensionPosition(d.id, opt.value);
+                  },
+                  title: "Position: ".concat(opt.label),
+                  children: opt.label
+                }, opt.value);
+              }), "\u2013 select options:"]
+            })]
+          }), !isDisabled && /*#__PURE__*/jsx("div", {
+            style: {
+              marginTop: 4
+            },
+            children: d.values.map(function (val) {
+              var _scopeSelection$selec4;
+              var selected = ((_scopeSelection$selec4 = scopeSelection.selectedValuesByDimensionId[d.id]) !== null && _scopeSelection$selec4 !== void 0 ? _scopeSelection$selec4 : []).includes(val);
+              return /*#__PURE__*/jsx("button", {
+                type: "button",
+                className: classnames(optionChip, selected && optionChipSelected),
+                onClick: function onClick() {
+                  return onToggleScopeValue(d.id, val);
+                },
+                children: val
+              }, val);
+            })
+          })]
+        }, d.id);
+      }), /*#__PURE__*/jsxs("p", {
+        style: {
+          marginTop: 8,
+          fontSize: 12
+        },
+        children: ["Partlist positions: ", gatheredData.partlistPositions.length, " \xB7 Loaded articles:", ' ', gatheredData.loadedArticleCodexes.length, scopedComboSpec && /*#__PURE__*/jsxs(Fragment, {
+          children: [' ', "\xB7 Combos to compute:", ' ', /*#__PURE__*/jsx("span", {
+            style: {
+              fontWeight: scopedComboSpec.comboKeysToCompute.length > maxCombosForBuild ? 600 : undefined,
+              color: scopedComboSpec.comboKeysToCompute.length > maxCombosForBuild ? 'var(--errorColor, #b91c1c)' : undefined
+            },
+            children: scopedComboSpec.comboKeysToCompute.length
+          }), scopedComboSpec.comboKeysToCompute.length > maxCombosForBuild && /*#__PURE__*/jsxs("span", {
+            children: [" (max ", maxCombosForBuild, ")"]
+          })]
+        })]
+      }), /*#__PURE__*/jsxs("div", {
+        style: {
+          marginTop: 8,
+          display: 'flex',
+          gap: 8,
+          flexWrap: 'wrap'
+        },
+        children: [/*#__PURE__*/jsx("button", {
+          type: "button",
+          className: cockpitBtnPrimary,
+          disabled: computing || !(scopedComboSpec !== null && scopedComboSpec !== void 0 && scopedComboSpec.comboKeysToCompute.length) || scopedComboSpec.comboKeysToCompute.length > maxCombosForBuild || ((_scopedComboSpec$scop = scopedComboSpec === null || scopedComboSpec === void 0 || (_scopedComboSpec$scop2 = scopedComboSpec.scopedDimensions) === null || _scopedComboSpec$scop2 === void 0 ? void 0 : _scopedComboSpec$scop2.length) !== null && _scopedComboSpec$scop !== void 0 ? _scopedComboSpec$scop : 0) === 0,
+          onClick: onCompute,
+          children: computing ? 'Computing…' : 'Build table'
+        }), Object.keys((_gatheredData$cellsBy = gatheredData === null || gatheredData === void 0 ? void 0 : gatheredData.cellsByDimensionCombo) !== null && _gatheredData$cellsBy !== void 0 ? _gatheredData$cellsBy : {}).length > 0 && /*#__PURE__*/jsx("button", {
+          type: "button",
+          className: classnames(cockpitBtnSmall, (scopeSelection === null || scopeSelection === void 0 ? void 0 : scopeSelection.smartMerge) && optionChipSelected),
+          onClick: onToggleSmartMerge,
+          title: "Merge columns/rows/tables that have identical values",
+          children: scopeSelection !== null && scopeSelection !== void 0 && scopeSelection.smartMerge ? 'Smart merge: on' : 'Smart merge: off'
+        })]
+      })]
+    }), !scopeSelection && /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx("ul", {
+        style: {
+          margin: 0,
+          paddingLeft: 20
+        },
+        children: gatheredData.dimensions.map(function (d) {
+          return /*#__PURE__*/jsxs("li", {
+            children: [d.name, " (", d.source, ") \u2013 ", d.valueCount, " value", d.valueCount !== 1 ? 's' : '']
+          }, d.id);
+        })
+      }), /*#__PURE__*/jsxs("p", {
+        style: {
+          marginTop: 8,
+          fontSize: 12
+        },
+        children: ["Partlist positions: ", gatheredData.partlistPositions.length, " \xB7 Loaded articles:", ' ', gatheredData.loadedArticleCodexes.length]
+      })]
+    })]
+  });
+}
+
+export { PriceListCockpit };