trotl-filter 1.0.45 → 1.0.47

package/dist/index.cjs.js

@@ -9514,6 +9514,7 @@ function DateTimeInput({
   style = {},
   predefinedRanges = ["today", "yesterday"],
   startWith = "sunday",
+  presets = [],
   ...rest
 }) {
   let translate;
@@ -9883,6 +9884,56 @@ function DateTimeInput({
     applySelection(d);
     setSelectedPredefined(String(idx));
   };
+  const handlePresetClick = preset => {
+    if (!preset || !preset.type) return;
+    const type = String(preset.type).toLowerCase();
+    if (type === 'clear') {
+      handleClear();
+      return;
+    }
+    if (type === 'today') {
+      const d = new Date();
+      if (time && timeStart) {
+        const [h, m] = (timeStart || "00:00").split(":");
+        d.setHours(Number(h), Number(m), 0, 0);
+      } else if (!time) {
+        d.setHours(0, 0, 0, 0);
+      }
+      applySelection(d);
+      return;
+    }
+
+    // base = selected date (if present) or now
+    const base = selectedDate ? new Date(selectedDate) : new Date();
+    const val = Number(preset.value || 0);
+    if (type === 'days') {
+      base.setDate(base.getDate() + val);
+      if (!selectedDate && time && timeStart) {
+        const [h, m] = (timeStart || "00:00").split(":");
+        base.setHours(Number(h), Number(m), 0, 0);
+      }
+      applySelection(base);
+      return;
+    }
+    if (type === 'months') {
+      base.setMonth(base.getMonth() + val);
+      if (!selectedDate && time && timeStart) {
+        const [h, m] = (timeStart || "00:00").split(":");
+        base.setHours(Number(h), Number(m), 0, 0);
+      }
+      applySelection(base);
+      return;
+    }
+    if (type === 'years') {
+      base.setFullYear(base.getFullYear() + val);
+      if (!selectedDate && time && timeStart) {
+        const [h, m] = (timeStart || "00:00").split(":");
+        base.setHours(Number(h), Number(m), 0, 0);
+      }
+      applySelection(base);
+      return;
+    }
+  };
   const handleDayClick = day => {
     applySelection(day);
   };
@@ -10086,7 +10137,30 @@ function DateTimeInput({
       background: disabled ? '#f9fafb' : undefined,
       color: disabled ? '#9ca3af' : undefined
     }
-  })), /*#__PURE__*/React.createElement("div", {
+  })), presets && presets.length > 0 && /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: 8,
+      marginTop: 8,
+      marginBottom: 8,
+      flexWrap: 'wrap'
+    }
+  }, presets.map((p, i) => /*#__PURE__*/React.createElement("button", {
+    key: `preset_${i}`,
+    type: "button",
+    onClick: () => !disabled && handlePresetClick(p),
+    disabled: disabled,
+    className: "basic-btn",
+    style: {
+      padding: '6px 10px',
+      fontSize: 12,
+      background: disabled ? '#f9fafb' : '#fff',
+      color: disabled ? '#9ca3af' : '#000',
+      border: '1px solid #d9d9d9',
+      borderRadius: 4,
+      cursor: disabled ? 'not-allowed' : 'pointer'
+    }
+  }, p.label || p.type))), /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'flex',
       justifyContent: 'space-between',
@@ -10150,7 +10224,8 @@ DateTimeInput.propTypes = {
   disabled: PropTypes.bool,
   className: PropTypes.string,
   style: PropTypes.object,
-  predefinedRanges: PropTypes.array
+  predefinedRanges: PropTypes.array,
+  presets: PropTypes.array
 };
 const buttonStyle = {
   padding: '6px 16px',
@@ -11600,8 +11675,261 @@ Upload.propTypes = {
   customText: PropTypes.node
 };
 
+const upper = 20;
+const bellow = 180;
+const _markers = [{
+  key: "18",
+  x: 15,
+  y: upper
+}, {
+  key: "17",
+  x: 45,
+  y: upper
+}, {
+  key: "16",
+  x: 75,
+  y: upper
+}, {
+  key: "15",
+  x: 105,
+  y: upper
+}, {
+  key: "14",
+  x: 135,
+  y: upper
+}, {
+  key: "13",
+  x: 165,
+  y: upper
+}, {
+  key: "12",
+  x: 195,
+  y: upper
+}, {
+  key: "11",
+  x: 225,
+  y: upper
+}, {
+  key: "21",
+  x: 255,
+  y: upper
+}, {
+  key: "22",
+  x: 285,
+  y: upper
+}, {
+  key: "23",
+  x: 315,
+  y: upper
+}, {
+  key: "24",
+  x: 345,
+  y: upper
+}, {
+  key: "25",
+  x: 375,
+  y: upper
+}, {
+  key: "26",
+  x: 405,
+  y: upper
+}, {
+  key: "27",
+  x: 435,
+  y: upper
+}, {
+  key: "28",
+  x: 465,
+  y: upper
+}, {
+  key: "48",
+  x: 15,
+  y: bellow
+}, {
+  key: "47",
+  x: 45,
+  y: bellow
+}, {
+  key: "46",
+  x: 75,
+  y: bellow
+}, {
+  key: "45",
+  x: 105,
+  y: bellow
+}, {
+  key: "44",
+  x: 135,
+  y: bellow
+}, {
+  key: "43",
+  x: 165,
+  y: bellow
+}, {
+  key: "42",
+  x: 195,
+  y: bellow
+}, {
+  key: "41",
+  x: 225,
+  y: bellow
+}, {
+  key: "31",
+  x: 255,
+  y: bellow
+}, {
+  key: "32",
+  x: 285,
+  y: bellow
+}, {
+  key: "33",
+  x: 315,
+  y: bellow
+}, {
+  key: "34",
+  x: 345,
+  y: bellow
+}, {
+  key: "35",
+  x: 375,
+  y: bellow
+}, {
+  key: "36",
+  x: 405,
+  y: bellow
+}, {
+  key: "37",
+  x: 435,
+  y: bellow
+}, {
+  key: "38",
+  x: 465,
+  _x: 625,
+  y: bellow
+}];
+const getBackgroundColor = (isSelected, card) => {
+  let color = "white";
+  if (isSelected) color = "#e6f7ff";
+  if (card?.basicMaterial?.Color) color = "#dedede";
+  if (card?.productValue?.colorTooth) color = card?.productValue?.colorTooth;
+  return color;
+};
+const CardSelect = ({
+  mk,
+  sk,
+  finalMarkers = () => {},
+  callbackValues,
+  callbackEvent
+}) => {
+  const [disabled, setDisabled] = React.useState(true);
+  const [markers, setMarkers] = React.useState(mk ?? _markers);
+  const [selectedKeys, setSelectedKeys] = React.useState(sk ?? []);
+  const [isMouseDown, setIsMouseDown] = React.useState(false);
+  const {
+    lang
+  } = React.useMemo(() => ({
+    lang: {}
+  }), []);
+  React.useEffect(() => {
+    const handleGlobalMouseUp = () => setIsMouseDown(false);
+    window.addEventListener("mouseup", handleGlobalMouseUp);
+    return () => window.removeEventListener("mouseup", handleGlobalMouseUp);
+  }, []);
+  React.useEffect(() => {
+    finalMarkers(selectedKeys);
+    if (callbackValues) callbackValues(selectedKeys);
+    if (callbackEvent) callbackEvent({
+      type: "selection",
+      values: selectedKeys
+    });
+  }, [selectedKeys]);
+  const toggleCardSelection = card => {
+    setSelectedKeys(prev => prev.includes(card.key) ? prev.filter(k => k !== card.key) : [...prev, card.key]);
+  };
+  const addCardToSelection = card => {
+    setSelectedKeys(prev => prev.includes(card.key) ? prev : [...prev, card.key]);
+  };
+  const renderCard = card => {
+    const isSelected = selectedKeys.includes(card?.key);
+    return /*#__PURE__*/React.createElement("div", {
+      key: card?.key,
+      className: `no-select custom-card-tooth ${isSelected ? "selected" : ""}`,
+      onMouseDown: e => {
+        if (e.button === 0) {
+          setIsMouseDown(true);
+          toggleCardSelection(card);
+        }
+      },
+      onMouseOver: () => {
+        if (isMouseDown) addCardToSelection(card);
+      },
+      style: {
+        backgroundColor: getBackgroundColor(isSelected, card)
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "card-header-tooth",
+      style: {
+        zIndex: 2
+      }
+    }, card?.key), /*#__PURE__*/React.createElement("div", {
+      title: card?.basicMaterial?.MaterialTypeLabel,
+      className: "card-body-tooth"
+    }, card?.basicMaterial?.MaterialTypeLabel), /*#__PURE__*/React.createElement("div", {
+      title: card?.colorLotRef && card?.colorLotRef?.length > 0 ? card?.colorLotRef.map(el => JSON.stringify(el, null, 4)) : "",
+      className: "card-body-tooth"
+    }, card?.colorLotRef && card?.colorLotRef?.length > 0 ? "colors" : ""), /*#__PURE__*/React.createElement("div", {
+      title: card?.productValue?.label,
+      className: "card-body-tooth"
+    }, card?.productValue?.label ? " " + card?.productValue?.label + " " : ""), /*#__PURE__*/React.createElement("div", {
+      title: card?.basicMaterial?.MaterialTypeLabel,
+      className: "card-body-tooth"
+    }, card?.basicMaterial?.disk ? " " + card?.basicMaterial?.disk + " " : ""), /*#__PURE__*/React.createElement("div", {
+      className: "card-footer-tooth"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "card-footer-tooth-multi"
+    }, card?.clen ? /*#__PURE__*/React.createElement("b", null, "X") : "", card?.ankerValues?.value ? " A " : "", card?.implantatValues ? " I " : "")));
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "fieldsInline001 fieldsInlineTeeth"
+  }, /*#__PURE__*/React.createElement(Button, {
+    title: lang?.["clearSelectedDescription"] ?? "clearSelectedDescription",
+    type: "delete",
+    style: {
+      float: "end"
+    },
+    onClick: () => setSelectedKeys([]),
+    disabled: selectedKeys?.length === 0
+  }, lang?.["clearSelected"] ?? "clearSelected"), /*#__PURE__*/React.createElement(Button, {
+    title: lang?.["selectAllDescription"] ?? "selectAllDescription",
+    type: "ok",
+    style: {
+      float: "end"
+    },
+    onClick: () => setSelectedKeys(_markers.map(el => el.key))
+  }, lang?.["selectAll"] ?? "selectAll"), /*#__PURE__*/React.createElement(Button, {
+    title: lang?.["clearLastSelectedOneAtOnceDescription"] ?? "clearLastSelectedOneAtOnceDescription",
+    type: "cancel",
+    style: {
+      float: "end"
+    },
+    onClick: () => setSelectedKeys(prev => prev.slice(0, -1)),
+    disabled: selectedKeys?.length === 0
+  }, lang?.["clearLastSelectedOneAtOnce"] ?? "clearLastSelectedOneAtOnce")), /*#__PURE__*/React.createElement("div", {
+    className: "bodyTeeth"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "bodyTeeth-first-row"
+  }, markers.slice(0, 16).map(m => renderCard(m))), /*#__PURE__*/React.createElement("div", {
+    className: "bodyTeeth-second-row"
+  }, markers.slice(16, 32).map(m => renderCard(m))), /*#__PURE__*/React.createElement("div", {
+    className: "horizontal-line-h"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "vertical-line-v"
+  })));
+};
+
 exports.Button = Button;
 exports.CalendarRangePicker = CalendarRangePicker;
+exports.CardSelect = CardSelect;
 exports.ColorPicker = ColorPicker;
 exports.DateTimeInput = DateTimeInput;
 exports.DebounceSelect = DebounceSelect;