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

package/dist/index.js

@@ -6,17 +6,18 @@ import { useDebounce, useQueryParams, useMutationWithInvalidation, withT } from
 import { groupBy, anyPass, isNil, isEmpty, any, concat, omit, mergeLeft, toLower, identity, mergeRight, toPairs, pluck, either, not, has, equals, pick, last, modify, append, mergeDeepRight, prop, assoc, sortBy, project } from 'ramda';
 import { useQuery, useQueryClient } from 'react-query';
 import { Help, Delete as Delete$1, Plus, Close, Down } from '@bigbinary/neeto-icons';
-import { Select, DatePicker, TimePicker, Input, Button, Pane as Pane$1, Typography, Accordion, Tooltip, Dropdown as Dropdown$2, Alert, Spinner } from '@bigbinary/neetoui';
+import { Select, DatePicker, TimePickerInput, Input, Button, Pane as Pane$1, Typography, Accordion, Tooltip, Dropdown as Dropdown$2, Alert, Spinner } from '@bigbinary/neetoui';
 import { Form, Input as Input$1, ActionBlock } from '@bigbinary/neetoui/formik';
 import { useTranslation, Trans } from 'react-i18next';
 import { useHistory } from 'react-router-dom/cjs/react-router-dom.min';
 import { buildUrl, getQueryParams, dateFormat, showThumbsUpToastr } from '@bigbinary/neeto-commons-frontend/utils';
 import * as yup from 'yup';
-import useHotkeys from '@bigbinary/neeto-hotkeys';
 import { useHistory as useHistory$1, useLocation } from 'react-router-dom';
+import useHotkeys from '@bigbinary/neeto-hotkeys';
 import axios from 'axios';
 import Search from '@bigbinary/neeto-molecules/Search';
 import MenuBar from '@bigbinary/neeto-molecules/MenuBar';
+import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
 import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
 
 function _typeof(o) {
@@ -534,7 +535,7 @@ var buildFiltersFromSearchParams = function buildFiltersFromSearchParams(columns
       }, column);
     } else if (isTime(defaultType) && isCustomTimeRange(value)) {
       return mergeLeft({
-        value: value.split(",")
+        value: value
       }, column);
     } else if (isSingleDate(defaultType)) {
       var _value$split3 = value.split("+rule-"),
@@ -940,6 +941,9 @@ var getColumnsWithStandardizedType = function getColumnsWithStandardizedType(col
     });
   });
 };
+var isNilOrEmpty = function isNilOrEmpty(param) {
+  return isNil(param) || isEmpty(param);
+};
 var isKeywordFilterPresent = function isKeywordFilterPresent(keyworFilter) {
   return not(isEmpty(keyworFilter.node));
 };
@@ -1035,6 +1039,31 @@ var buildDateValues = function buildDateValues(dates, selectedRule) {
 var buildHelpIconProps = function buildHelpIconProps(helpIconProps) {
   return 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,
@@ -1381,6 +1410,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" ? pluck("$d", times).map(function (time) {
       return time.toISOString();
     }) : times["$d"].toISOString();
@@ -1393,6 +1431,7 @@ var SingleTime = function SingleTime(_ref) {
     });
     handleApplyFilter(updatedFilter);
   };
+  var formattedTime = formatTime(value, timePickerType);
   return /*#__PURE__*/React.createElement("div", {
     className: "neeto-filters-pane-filter__item-wrapper"
   }, /*#__PURE__*/React.createElement(Select, _extends({
@@ -1407,15 +1446,12 @@ var SingleTime = function SingleTime(_ref) {
     }
   }, {
     onChange: handleRuleChange
-  })), /*#__PURE__*/React.createElement(TimePicker, _extends({
+  })), /*#__PURE__*/React.createElement(TimePickerInput, _extends({
     autoFocus: autoFocus,
-    value: value,
-    use12Hours: true,
     className: "w-full",
     "data-cy": "neeto-filters-".concat(hyphenate(key), "-filter"),
-    format: "h:mm A",
-    getPopupContainer: prop("parentNode"),
     type: timePickerType,
+    value: formattedTime,
     onChange: handleChange
   }, otherProps)));
 };
@@ -1558,6 +1594,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,
@@ -1588,13 +1633,11 @@ var Time = function Time(_ref) {
     }
   }, {
     onChange: handleChange
-  })), isCustomTimeRangeShown && /*#__PURE__*/React.createElement(TimePicker, _extends({
-    use12Hours: true,
+  })), isCustomTimeRangeShown && /*#__PURE__*/React.createElement(TimePickerInput, _extends({
+    className: "w-full",
     "data-cy": "neeto-filters-".concat(hyphenate(key), "-date-range"),
-    format: "h:mm A",
-    getPopupContainer: prop("parentNode"),
     type: "range",
-    value: filter.value,
+    value: formatTime(filter.value, "range"),
     onChange: handleTimeRangeChange
   }, otherProps)));
 };
@@ -2169,7 +2212,7 @@ var FilterBar = function FilterBar(_ref) {
     handleApplyFilters = _ref.handleApplyFilters;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var history = useHistory();
+  var history = useHistory$1();
   var searchParams = useQueryParams({
     toCamelCase: false
   });
@@ -2227,6 +2270,7 @@ var FilterBar = function FilterBar(_ref) {
   }), /*#__PURE__*/React.createElement("div", {
     className: "flex items-center gap-x-2"
   }, isPresent(entity) && !hasOnlyKeywordFilter(filters) && /*#__PURE__*/React.createElement(Button, {
+    "data-cy": "save-segment-button",
     label: t("neetoFilters.segments.saveAsNewSegment"),
     style: "secondary",
     onClick: function onClick() {
@@ -2952,6 +2996,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,
@@ -2960,22 +3013,39 @@ var useSegments = function useSegments(_ref) {
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var history = useHistory$1();
+  var _useState = 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 = useState({
+  var _useState3 = 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;
@@ -2990,10 +3060,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,
@@ -3002,6 +3072,9 @@ var useSegments = function useSegments(_ref) {
       })
     });
   };
+  useEffect(function () {
+    setSegments(fetchedSegments);
+  }, [fetchedSegments]);
   if (isLoading) {
     return /*#__PURE__*/React.createElement(Spinner, null);
   }
@@ -3010,9 +3083,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,
@@ -3039,6 +3112,7 @@ var useSegments = function useSegments(_ref) {
     segments: segments,
     clearAppliedFilters: clearAppliedFilters,
     handleSelectSegment: handleSelectSegment,
+    handleSegmentsReorder: handleSegmentsReorder,
     setConfirmAction: setConfirmAction,
     isUpdating: isUpdating,
     handleUpdate: handleUpdate,
@@ -3087,6 +3161,7 @@ var Segment = function Segment(_ref) {
   }];
   return /*#__PURE__*/React.createElement("div", {
     onClick: onClick,
+    "data-cy": "neeto-filters-segment-block-".concat(hyphenate(label)),
     className: classnames("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
     })
@@ -3132,6 +3207,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,
@@ -3155,20 +3231,43 @@ var MenuBlocks = function MenuBlocks(_ref) {
     isActive: isEmpty(appliedFilters),
     label: defaultSegmentName,
     onClick: clearAppliedFilters
-  }), segments.slice(0, showAll ? segments.length : ITEMS_MAX_COUNT).map(function (segment) {
-    return /*#__PURE__*/React.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.createElement(SegmentForm, {
+  }), /*#__PURE__*/React.createElement(DragDropContext, {
+    onDragEnd: handleSegmentsReorder
+  }, /*#__PURE__*/React.createElement(Droppable, {
+    droppableId: "neeto-filters-segments-".concat(entity)
+  }, function (_ref2) {
+    var innerRef = _ref2.innerRef,
+      droppableProps = _ref2.droppableProps,
+      placeholder = _ref2.placeholder;
+    return /*#__PURE__*/React.createElement("div", _extends({
+      ref: innerRef
+    }, droppableProps), segments.slice(0, showAll ? segments.length : ITEMS_MAX_COUNT).map(function (segment, index) {
+      return /*#__PURE__*/React.createElement(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.createElement("div", _extends({
+          ref: innerRef
+        }, draggableProps, dragHandleProps), /*#__PURE__*/React.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.createElement(SegmentForm, {
     childrenKeys: childrenKeys,
     columns: columns,
     customFilters: customFilters,