@bigbinary/neeto-filters-frontend 3.3.0-beta.2 → 3.3.0

package/dist/index.cjs.js

@@ -16,11 +16,12 @@ var reactI18next = require('react-i18next');
 var reactRouterDom_min = require('react-router-dom/cjs/react-router-dom.min');
 var utils = require('@bigbinary/neeto-commons-frontend/utils');
 var yup = require('yup');
-var useHotkeys = require('@bigbinary/neeto-hotkeys');
 var reactRouterDom = require('react-router-dom');
+var useHotkeys = require('@bigbinary/neeto-hotkeys');
 var axios = require('axios');
 var Search = require('@bigbinary/neeto-molecules/Search');
 var MenuBar = require('@bigbinary/neeto-molecules/MenuBar');
+var dnd = require('@hello-pangea/dnd');
 var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -568,7 +569,7 @@ var buildFiltersFromSearchParams = function buildFiltersFromSearchParams(columns
       }, column);
     } else if (isTime(defaultType) && isCustomTimeRange(value)) {
       return ramda.mergeLeft({
-        value: value.split(",")
+        value: value
       }, column);
     } else if (isSingleDate(defaultType)) {
       var _value$split3 = value.split("+rule-"),
@@ -974,6 +975,9 @@ var getColumnsWithStandardizedType = function getColumnsWithStandardizedType(col
     });
   });
 };
+var isNilOrEmpty = function isNilOrEmpty(param) {
+  return ramda.isNil(param) || ramda.isEmpty(param);
+};
 var isKeywordFilterPresent = function isKeywordFilterPresent(keyworFilter) {
   return ramda.not(ramda.isEmpty(keyworFilter.node));
 };
@@ -1069,6 +1073,31 @@ var buildDateValues = function buildDateValues(dates, selectedRule) {
 var buildHelpIconProps = function buildHelpIconProps(helpIconProps) {
   return ramda.mergeDeepRight(DEFAULT_HELP_ICON_PROPS, helpIconProps);
 };
+var hasInvalidTimes = function hasInvalidTimes(times) {
+  if (Array.isArray(times)) {
+    return times.some(function (time) {
+      return time.isValid();
+    }) === false;
+  }
+  return !times.isValid();
+};
+var areCustomTimeRangeValuesNotValid = function areCustomTimeRangeValuesNotValid(times) {
+  return !times.every(function (time) {
+    return time.isValid();
+  });
+};
+
+// eslint-disable-next-line @bigbinary/neeto/use-standard-date-time-formats
+var formatSingleTime = function formatSingleTime(time) {
+  return dayjs(time).format("HH:mm:ss");
+};
+var formatTime = function formatTime(value, timePickerType) {
+  if (isNilOrEmpty(value)) return null;
+  if (timePickerType === "range") {
+    return value.map(formatSingleTime);
+  }
+  return formatSingleTime(value);
+};
 
 var Boolean = function Boolean(_ref) {
   var column = _ref.column,
@@ -1415,6 +1444,15 @@ var SingleTime = function SingleTime(_ref) {
     handleApplyFilter(updatedFilter);
   };
   var handleChange = function handleChange(times) {
+    if (hasInvalidTimes(times)) {
+      handleApplyFilter({
+        _delete: true
+      });
+      return;
+    }
+    if (timePickerType === "range" && areCustomTimeRangeValuesNotValid(times)) {
+      return;
+    }
     var value = timePickerType === "range" ? ramda.pluck("$d", times).map(function (time) {
       return time.toISOString();
     }) : times["$d"].toISOString();
@@ -1427,6 +1465,7 @@ var SingleTime = function SingleTime(_ref) {
     });
     handleApplyFilter(updatedFilter);
   };
+  var formattedTime = formatTime(value, timePickerType);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "neeto-filters-pane-filter__item-wrapper"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Select, _extends({
@@ -1441,15 +1480,12 @@ var SingleTime = function SingleTime(_ref) {
     }
   }, {
     onChange: handleRuleChange
-  })), /*#__PURE__*/React__default["default"].createElement(neetoui.TimePicker, _extends({
+  })), /*#__PURE__*/React__default["default"].createElement(neetoui.TimePickerInput, _extends({
     autoFocus: autoFocus,
-    value: value,
-    use12Hours: true,
     className: "w-full",
     "data-cy": "neeto-filters-".concat(neetoCist.hyphenate(key), "-filter"),
-    format: "h:mm A",
-    getPopupContainer: ramda.prop("parentNode"),
     type: timePickerType,
+    value: formattedTime,
     onChange: handleChange
   }, otherProps)));
 };
@@ -1592,6 +1628,15 @@ var Time = function Time(_ref) {
     handleApplyFilter(updatedFilter);
   };
   var handleTimeRangeChange = function handleTimeRangeChange(times) {
+    if (hasInvalidTimes(times)) {
+      handleApplyFilter({
+        _delete: true
+      });
+      return;
+    }
+    if (isCustomTimeRangeShown && areCustomTimeRangeValuesNotValid(times)) {
+      return;
+    }
     var updatedFilter = buildUpdatedFilter({
       column: column,
       defaultType: defaultType,
@@ -1622,13 +1667,11 @@ var Time = function Time(_ref) {
     }
   }, {
     onChange: handleChange
-  })), isCustomTimeRangeShown && /*#__PURE__*/React__default["default"].createElement(neetoui.TimePicker, _extends({
-    use12Hours: true,
+  })), isCustomTimeRangeShown && /*#__PURE__*/React__default["default"].createElement(neetoui.TimePickerInput, _extends({
+    className: "w-full",
     "data-cy": "neeto-filters-".concat(neetoCist.hyphenate(key), "-date-range"),
-    format: "h:mm A",
-    getPopupContainer: ramda.prop("parentNode"),
     type: "range",
-    value: filter.value,
+    value: formatTime(filter.value, "range"),
     onChange: handleTimeRangeChange
   }, otherProps)));
 };
@@ -2203,7 +2246,7 @@ var FilterBar = function FilterBar(_ref) {
     handleApplyFilters = _ref.handleApplyFilters;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
-  var history = reactRouterDom_min.useHistory();
+  var history = reactRouterDom.useHistory();
   var searchParams = reactUtils.useQueryParams({
     toCamelCase: false
   });
@@ -2261,6 +2304,7 @@ var FilterBar = function FilterBar(_ref) {
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex items-center gap-x-2"
   }, neetoCist.isPresent(entity) && !hasOnlyKeywordFilter(filters) && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    "data-cy": "save-segment-button",
     label: t("neetoFilters.segments.saveAsNewSegment"),
     style: "secondary",
     onClick: function onClick() {
@@ -2986,6 +3030,15 @@ var Delete = function Delete(_ref) {
   });
 };
 
+var reorderList = function reorderList(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.splice(endIndex, 0, removed);
+  return result;
+};
+
 var useSegments = function useSegments(_ref) {
   var entity = _ref.entity,
     columns = _ref.columns,
@@ -2994,22 +3047,39 @@ var useSegments = function useSegments(_ref) {
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var history = reactRouterDom.useHistory();
+  var _useState = React.useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    segments = _useState2[0],
+    setSegments = _useState2[1];
   var _useFetchSegments = useFetchSegments({
       entity: entity
     }),
-    _useFetchSegments$dat = _useFetchSegments.data,
-    segments = _useFetchSegments$dat === void 0 ? [] : _useFetchSegments$dat,
+    fetchedSegments = _useFetchSegments.data,
     isLoading = _useFetchSegments.isLoading;
   var _useUpdateSegment = useUpdateSegment(),
     updateSegment = _useUpdateSegment.mutate,
     isUpdating = _useUpdateSegment.isLoading;
-  var _useState = React.useState({
+  var _useState3 = React.useState({
       action: "",
       segment: undefined
     }),
-    _useState2 = _slicedToArray(_useState, 2),
-    confirmAction = _useState2[0],
-    setConfirmAction = _useState2[1];
+    _useState4 = _slicedToArray(_useState3, 2),
+    confirmAction = _useState4[0],
+    setConfirmAction = _useState4[1];
+  var handleSegmentsReorder = function handleSegmentsReorder(_ref2) {
+    var source = _ref2.source,
+      destination = _ref2.destination;
+    if (!destination || source.index === destination.index) return;
+    var reorderedSegments = reorderList(segments, source.index, destination.index);
+    updateSegment({
+      id: segments[source.index].id,
+      payload: {
+        position: destination.index + 1
+      },
+      showToastr: false
+    });
+    setSegments(reorderedSegments);
+  };
   var clearAppliedFilters = function clearAppliedFilters() {
     var _filters$, _filters$2;
     var filters = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : appliedFilters;
@@ -3024,10 +3094,10 @@ var useSegments = function useSegments(_ref) {
       })
     });
   };
-  var handleSelectSegment = function handleSelectSegment(_ref2) {
+  var handleSelectSegment = function handleSelectSegment(_ref3) {
     var _filters$3;
-    var id = _ref2.id,
-      filters = _ref2.filters;
+    var id = _ref3.id,
+      filters = _ref3.filters;
     history.push({
       search: buildUrlFromSegment({
         columns: columns,
@@ -3036,6 +3106,9 @@ var useSegments = function useSegments(_ref) {
       })
     });
   };
+  React.useEffect(function () {
+    setSegments(fetchedSegments);
+  }, [fetchedSegments]);
   if (isLoading) {
     return /*#__PURE__*/React__default["default"].createElement(neetoui.Spinner, null);
   }
@@ -3044,9 +3117,9 @@ var useSegments = function useSegments(_ref) {
       style: "body2"
     }, t("neetoFilters.segments.noSegmentsFound"));
   }
-  var handleUpdate = function handleUpdate(_ref3, _ref4) {
-    var name = _ref3.name;
-    var setFieldError = _ref4.setFieldError;
+  var handleUpdate = function handleUpdate(_ref4, _ref5) {
+    var name = _ref4.name;
+    var setFieldError = _ref5.setFieldError;
     var filtersPayload = buildSegmentsPayload(filters, childrenKeys);
     updateSegment({
       id: confirmAction.segment.id,
@@ -3073,6 +3146,7 @@ var useSegments = function useSegments(_ref) {
     segments: segments,
     clearAppliedFilters: clearAppliedFilters,
     handleSelectSegment: handleSelectSegment,
+    handleSegmentsReorder: handleSegmentsReorder,
     setConfirmAction: setConfirmAction,
     isUpdating: isUpdating,
     handleUpdate: handleUpdate,
@@ -3121,6 +3195,7 @@ var Segment = function Segment(_ref) {
   }];
   return /*#__PURE__*/React__default["default"].createElement("div", {
     onClick: onClick,
+    "data-cy": "neeto-filters-segment-block-".concat(neetoCist.hyphenate(label)),
     className: classnames__default["default"]("neeto-ui-border-gray-400 neeto-ui-bg-white hover:neeto-ui-bg-gray-200 neeto-ui-rounded-lg mb-2 flex h-10 cursor-pointer items-center gap-2 border p-3 transition-all duration-300 ease-in-out", {
       "neeto-filters-segment--active": isActive
     })
@@ -3166,6 +3241,7 @@ var MenuBlocks = function MenuBlocks(_ref) {
     segments = _useSegments$segments === void 0 ? [] : _useSegments$segments,
     clearAppliedFilters = _useSegments.clearAppliedFilters,
     handleSelectSegment = _useSegments.handleSelectSegment,
+    handleSegmentsReorder = _useSegments.handleSegmentsReorder,
     onClose = _useSegments.onClose,
     setConfirmAction = _useSegments.setConfirmAction,
     selectedSegment = _useSegments.selectedSegment,
@@ -3189,20 +3265,43 @@ var MenuBlocks = function MenuBlocks(_ref) {
     isActive: ramda.isEmpty(appliedFilters),
     label: defaultSegmentName,
     onClick: clearAppliedFilters
-  }), segments.slice(0, showAll ? segments.length : ITEMS_MAX_COUNT).map(function (segment) {
-    return /*#__PURE__*/React__default["default"].createElement(Segment, {
-      segments: segments,
-      setConfirmAction: setConfirmAction,
-      shouldShowDropdown: true,
-      id: segment.id,
-      isActive: segment.id === segmentId,
-      key: segment.id,
-      label: segment.name,
-      onClick: function onClick() {
-        return handleSelectSegment(segment);
-      }
-    });
-  }), /*#__PURE__*/React__default["default"].createElement(SegmentForm, {
+  }), /*#__PURE__*/React__default["default"].createElement(dnd.DragDropContext, {
+    onDragEnd: handleSegmentsReorder
+  }, /*#__PURE__*/React__default["default"].createElement(dnd.Droppable, {
+    droppableId: "neeto-filters-segments-".concat(entity)
+  }, function (_ref2) {
+    var innerRef = _ref2.innerRef,
+      droppableProps = _ref2.droppableProps,
+      placeholder = _ref2.placeholder;
+    return /*#__PURE__*/React__default["default"].createElement("div", _extends({
+      ref: innerRef
+    }, droppableProps), segments.slice(0, showAll ? segments.length : ITEMS_MAX_COUNT).map(function (segment, index) {
+      return /*#__PURE__*/React__default["default"].createElement(dnd.Draggable, {
+        index: index,
+        draggableId: segment.id.toString(),
+        isDragDisabled: isUpdating,
+        key: segment.id.toString()
+      }, function (_ref3) {
+        var innerRef = _ref3.innerRef,
+          draggableProps = _ref3.draggableProps,
+          dragHandleProps = _ref3.dragHandleProps;
+        return /*#__PURE__*/React__default["default"].createElement("div", _extends({
+          ref: innerRef
+        }, draggableProps, dragHandleProps), /*#__PURE__*/React__default["default"].createElement(Segment, {
+          segments: segments,
+          setConfirmAction: setConfirmAction,
+          shouldShowDropdown: true,
+          id: segment.id,
+          isActive: segment.id === segmentId,
+          key: segment.id,
+          label: segment.name,
+          onClick: function onClick() {
+            return handleSelectSegment(segment);
+          }
+        }));
+      });
+    }), placeholder);
+  })), /*#__PURE__*/React__default["default"].createElement(SegmentForm, {
     childrenKeys: childrenKeys,
     columns: columns,
     customFilters: customFilters,