mario-core 2.9.158-level → 2.9.159-level

package/dist/containers/User/hooks/useFilterPopover.d.ts

@@ -1,8 +1,10 @@
 /// <reference types="react" />
 import { FilterOption, SearchBy, UserFilter, UserOrder } from "../constants/types";
-interface Props {
+import { PopoverProps } from "reactstrap";
+interface Props extends PopoverProps {
     filters?: UserFilter;
     sortBy: UserOrder;
+    searchString?: string;
     searchBy?: SearchBy;
     users: any[];
     defaultOptions?: FilterOption[];
@@ -21,11 +23,13 @@ declare const useFilterPopover: (props: Props) => {
     isAscending: boolean;
     isDescending: boolean;
     filteredOptions: FilterOption[];
-    handleSearch: (e: any) => void;
+    searchKey: string;
+    handleSearch: () => void;
     handleApplyFilter: () => void;
     handleOptionSelected: (e?: any) => void;
     handleOptionSelectedAll: (e?: any) => void;
     handleSortDesc: () => void;
     handleSortAsc: () => void;
+    handleChangeSearchKey: (e: any) => void;
 };
 export default useFilterPopover;

package/dist/index.js

@@ -7380,7 +7380,7 @@ var UserColumns = [{
 
     return {
       label: user.fullName || "empty",
-      value: (_user$fullName = user.fullName) === null || _user$fullName === void 0 ? void 0 : (_user$fullName$trim = _user$fullName.trim) === null || _user$fullName$trim === void 0 ? void 0 : _user$fullName$trim.call(_user$fullName)
+      value: ((_user$fullName = user.fullName) === null || _user$fullName === void 0 ? void 0 : (_user$fullName$trim = _user$fullName.trim) === null || _user$fullName$trim === void 0 ? void 0 : _user$fullName$trim.call(_user$fullName)) || ""
     };
   }
 }, {
@@ -7393,7 +7393,7 @@ var UserColumns = [{
 
     return {
       label: user.email || "empty",
-      value: (_user$email = user.email) === null || _user$email === void 0 ? void 0 : (_user$email$trim = _user$email.trim) === null || _user$email$trim === void 0 ? void 0 : _user$email$trim.call(_user$email)
+      value: ((_user$email = user.email) === null || _user$email === void 0 ? void 0 : (_user$email$trim = _user$email.trim) === null || _user$email$trim === void 0 ? void 0 : _user$email$trim.call(_user$email)) || ""
     };
   }
 }, {
@@ -7412,7 +7412,7 @@ var UserColumns = [{
       label: (_user$roles = user.roles) !== null && _user$roles !== void 0 && _user$roles.length ? (_user$roles2 = user.roles) === null || _user$roles2 === void 0 ? void 0 : _user$roles2.map(function (role) {
         return role === "SecondaryTeacher" ? "SupportTeacher" : role;
       }).join(", ") : "empty",
-      value: (_user$roles3 = user.roles) === null || _user$roles3 === void 0 ? void 0 : (_user$roles3$join = _user$roles3.join("")) === null || _user$roles3$join === void 0 ? void 0 : (_user$roles3$join$tri = _user$roles3$join.trim) === null || _user$roles3$join$tri === void 0 ? void 0 : _user$roles3$join$tri.call(_user$roles3$join)
+      value: ((_user$roles3 = user.roles) === null || _user$roles3 === void 0 ? void 0 : (_user$roles3$join = _user$roles3.join("")) === null || _user$roles3$join === void 0 ? void 0 : (_user$roles3$join$tri = _user$roles3$join.trim) === null || _user$roles3$join$tri === void 0 ? void 0 : _user$roles3$join$tri.call(_user$roles3$join)) || ""
     };
   }
 }, {
@@ -7467,7 +7467,7 @@ var UserColumns = [{
 
     return {
       label: result.length ? result.join(" / ") : "empty",
-      value: "" + (sourcedId || "") + ((rosterUser === null || rosterUser === void 0 ? void 0 : rosterUser.familyName) || "") + ((rosterUser === null || rosterUser === void 0 ? void 0 : rosterUser.middleName) || "") + ((rosterUser === null || rosterUser === void 0 ? void 0 : rosterUser.givenName) || "") + ((rosterUser === null || rosterUser === void 0 ? void 0 : rosterUser.email) || "")
+      value: !!rosterUser ? "" + (sourcedId || "") + ((rosterUser === null || rosterUser === void 0 ? void 0 : rosterUser.familyName) || "") + ((rosterUser === null || rosterUser === void 0 ? void 0 : rosterUser.middleName) || "") + ((rosterUser === null || rosterUser === void 0 ? void 0 : rosterUser.givenName) || "") + ((rosterUser === null || rosterUser === void 0 ? void 0 : rosterUser.email) || "") : ""
     };
   }
 }, {
@@ -7916,10 +7916,12 @@ var useClickOutside = function useClickOutside(wrapperRef, onClickOutside) {
 };
 
 var useFilterPopover = function useFilterPopover(props) {
-  var sortBy = props.sortBy,
+  var isOpen = props.isOpen,
+      sortBy = props.sortBy,
       filters = props.filters,
       users = props.users,
       searchBy = props.searchBy,
+      searchString = props.searchString,
       defaultOptions = props.defaultOptions,
       selectedOptions = props.selectedOptions,
       onOptionsChange = props.onOptionsChange,
@@ -7936,43 +7938,52 @@ var useFilterPopover = function useFilterPopover(props) {
       filteredOptions = _useState2[0],
       setFilteredOptions = _useState2[1];
 
+  var _useState3 = React.useState(""),
+      searchKey = _useState3[0],
+      setSearchKey = _useState3[1];
+
   var ref = React.useRef(null);
   useClickOutside(ref, onClose);
 
   var _useTranslation = reactI18next.useTranslation(),
       t = _useTranslation.t;
 
-  var handleSearch = React.useCallback(function (e) {
-    var _e$target$value$trim, _e$target$value;
-
-    var value = (_e$target$value$trim = (_e$target$value = e.target.value) === null || _e$target$value === void 0 ? void 0 : _e$target$value.trim()) != null ? _e$target$value$trim : "";
-    searchBy != undefined && !defaultOptions && (onSearch === null || onSearch === void 0 ? void 0 : onSearch(value, searchBy));
+  var handleSearch = React.useCallback(function () {
+    searchBy != undefined && !defaultOptions && (onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchKey, searchBy));
     searchBy != undefined && !!defaultOptions && setFilteredOptions(defaultOptions.filter(function (i) {
-      return i.label.toLowerCase().includes(value === null || value === void 0 ? void 0 : value.toLowerCase());
+      return i.label.toLowerCase().includes(searchKey === null || searchKey === void 0 ? void 0 : searchKey.toLowerCase());
     }));
-  }, [searchBy, JSON.stringify(defaultOptions)]);
+  }, [searchBy, searchKey, JSON.stringify(defaultOptions)]);
+
+  var handleChangeSearchKey = function handleChangeSearchKey(e) {
+    var _e$target$value;
+
+    var value = (_e$target$value = e.target.value) != null ? _e$target$value : "";
+    setSearchKey(value);
+  };
+
   var handleApplyFilter = React.useCallback(function () {
     onOptionsChange === null || onOptionsChange === void 0 ? void 0 : onOptionsChange(sOptions, searchBy);
     onClose === null || onClose === void 0 ? void 0 : onClose();
   }, [JSON.stringify(sOptions)]);
   var handleOptionSelected = React.useCallback(function (e) {
-    var value = e.target.value;
-    if (!value) setSOptions(undefined);else {
-      var newOptions = sOptions != null ? sOptions : [];
-      var index = newOptions.indexOf(value);
+    var _e$target$value2;
 
-      if (index > -1) {
-        newOptions.splice(index, 1);
-      } else {
-        newOptions = [].concat(newOptions, [value]);
-      }
+    var value = (_e$target$value2 = e.target.value) != null ? _e$target$value2 : "";
+    var newOptions = sOptions != null ? sOptions : [];
+    var index = newOptions.indexOf(value);
 
-      setSOptions(newOptions == undefined ? newOptions : [].concat(newOptions));
+    if (index > -1) {
+      newOptions.splice(index, 1);
+    } else {
+      newOptions = [].concat(newOptions, [value]);
     }
+
+    setSOptions(newOptions == undefined ? newOptions : [].concat(newOptions));
   }, [JSON.stringify(sOptions)]);
   var handleOptionSelectedAll = React.useCallback(function (e) {
     var value = e.target.checked;
-    if (!value) setSOptions([""]);else setSOptions(undefined);
+    if (!value) setSOptions([]);else setSOptions(undefined);
   }, []);
   var handleSortDesc = React.useCallback(function () {
     onChangeFilters === null || onChangeFilters === void 0 ? void 0 : onChangeFilters(_extends({}, filters, {
@@ -8005,6 +8016,12 @@ var useFilterPopover = function useFilterPopover(props) {
   React.useEffect(function () {
     setFilteredOptions(defaultOptions || []);
   }, [JSON.stringify(defaultOptions)]);
+  React.useEffect(function () {
+    if ((filters === null || filters === void 0 ? void 0 : filters.searchBy) === searchBy) setSearchKey(searchString || "");
+  }, [searchBy, searchString, filters === null || filters === void 0 ? void 0 : filters.searchBy]);
+  React.useEffect(function () {
+    isOpen && handleSearch();
+  }, [searchKey, isOpen]);
   return {
     ref: ref,
     options: options,
@@ -8012,18 +8029,19 @@ var useFilterPopover = function useFilterPopover(props) {
     isAscending: isAscending,
     isDescending: isDescending,
     filteredOptions: filteredOptions,
+    searchKey: searchKey,
     handleSearch: handleSearch,
     handleApplyFilter: handleApplyFilter,
     handleOptionSelected: handleOptionSelected,
     handleOptionSelectedAll: handleOptionSelectedAll,
     handleSortDesc: handleSortDesc,
-    handleSortAsc: handleSortAsc
+    handleSortAsc: handleSortAsc,
+    handleChangeSearchKey: handleChangeSearchKey
   };
 };
 
 var FilterPopover = function FilterPopover(props) {
-  var searchString = props.searchString,
-      defaultOptions = props.defaultOptions,
+  var defaultOptions = props.defaultOptions,
       onClose = props.onClose,
       getOption = props.getOption;
 
@@ -8034,7 +8052,8 @@ var FilterPopover = function FilterPopover(props) {
       isAscending = _useFilterPopover.isAscending,
       isDescending = _useFilterPopover.isDescending,
       filteredOptions = _useFilterPopover.filteredOptions,
-      handleSearch = _useFilterPopover.handleSearch,
+      searchKey = _useFilterPopover.searchKey,
+      handleChangeSearchKey = _useFilterPopover.handleChangeSearchKey,
       handleApplyFilter = _useFilterPopover.handleApplyFilter,
       handleOptionSelected = _useFilterPopover.handleOptionSelected,
       handleOptionSelectedAll = _useFilterPopover.handleOptionSelectedAll,
@@ -8074,8 +8093,8 @@ var FilterPopover = function FilterPopover(props) {
     className: "position-absolute " + styles["popover__search__icon"]
   }), React__default.createElement(reactstrap.Input, {
     className: styles["popover__search__input"],
-    value: searchString,
-    onChange: handleSearch
+    value: searchKey,
+    onChange: handleChangeSearchKey
   })), React__default.createElement("div", {
     className: "mx-1 mt-2 p-2 bg-light " + styles["popover__options"]
   }, React__default.createElement(reactstrap.FormGroup, {
@@ -8256,12 +8275,12 @@ var useTableHeader = function useTableHeader(props) {
     getData();
   }, [JSON.stringify(popoverFilters)]);
   React.useEffect(function () {
-    setPopoverFilters(_extends({}, DEFAULT_FILTER_POPOVER, {
+    setPopoverFilters(_extends({}, DEFAULT_FILTER_POPOVER, popoverFilters, {
       sortBy: filters.sortBy,
       isDescending: filters.isDescending,
       searchString: filters.searchString
     }));
-  }, [JSON.stringify(filters)]);
+  }, [JSON.stringify(filters), JSON.stringify(popoverFilters)]);
   return {
     popoverFilters: popoverFilters,
     popoverId: popoverId,