mario-core 2.9.160-level → 2.9.161-level

package/dist/containers/User/components/FilterPopover.d.ts

@@ -5,10 +5,11 @@ interface Props extends PopoverProps {
     filters?: UserFilter;
     sortBy: UserOrder;
     searchBy?: SearchBy;
-    searchString?: string;
-    users: any[];
+    users: string[];
     defaultOptions?: FilterOption[];
     selectedOptions?: string[];
+    searchKey: string;
+    onChangeSearchKey: (value: string) => void;
     onOptionsChange?: (value?: string[], searchBy?: SearchBy) => void;
     onSearch?: (search: string, searchBy: SearchBy) => void;
     onClose?: () => void;

package/dist/containers/User/components/HeaderCell.d.ts

@@ -1,15 +1,15 @@
 import { FC } from "react";
-import { SearchBy, UserColumn, UserFilter } from "../constants/types";
+import { SearchBy, UserColumn, UserFilter, UserOrder } from "../constants/types";
 interface Props {
     data: UserColumn;
     popoverId?: string;
     filters?: UserFilter;
     searchString?: string;
-    users: any[];
+    users: string[];
     selectedOptions?: string[];
     onOptionsChange?: (value?: string[], searchBy?: SearchBy) => void;
     onSearch?: (search: string, searchBy: SearchBy) => void;
-    onOpenFilter?: (id: string) => void;
+    onOpenFilter?: (id: string, searchBy?: SearchBy, searchStringBy?: string, sortBy?: UserOrder) => void;
     onClose?: () => void;
     onChangeFilters?: (filter: UserFilter) => void;
 }

package/dist/containers/User/constants/types.d.ts

@@ -36,9 +36,16 @@ export declare type UserFilter = {
     isDescending?: boolean;
     sortBy?: UserOrder;
     searchBy?: SearchBy;
-    searchStringBy?: string;
     searchByStrings?: string[];
 };
+export declare type UserFilterField = {
+    currentPage?: number;
+    pageSize?: number;
+    searchString?: string;
+    isDescending?: boolean;
+    searchBy?: SearchBy;
+    searchStringBy?: string;
+};
 export declare type UserColumn = {
     name: string;
     sortBy?: UserOrder;

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

@@ -4,11 +4,12 @@ import { PopoverProps } from "reactstrap";
 interface Props extends PopoverProps {
     filters?: UserFilter;
     sortBy: UserOrder;
-    searchString?: string;
     searchBy?: SearchBy;
-    users: any[];
+    users: string[];
     defaultOptions?: FilterOption[];
     selectedOptions?: string[];
+    searchKey: string;
+    onChangeSearchKey: (value: string) => void;
     onOptionsChange?: (value?: string[], searchBy?: SearchBy) => void;
     onSearch?: (search: string, searchBy: SearchBy) => void;
     onClose?: () => void;
@@ -18,8 +19,9 @@ interface Props extends PopoverProps {
 }
 declare const useFilterPopover: (props: Props) => {
     ref: import("react").RefObject<HTMLDivElement>;
-    options: any;
-    sOptions: string[] | undefined;
+    options: FilterOption[];
+    inputRef: import("react").MutableRefObject<any>;
+    sOptions: any[] | undefined;
     isAscending: boolean;
     isDescending: boolean;
     filteredOptions: FilterOption[];
@@ -30,6 +32,6 @@ declare const useFilterPopover: (props: Props) => {
     handleOptionSelectedAll: (e?: any) => void;
     handleSortDesc: () => void;
     handleSortAsc: () => void;
-    handleChangeSearchKey: (e: any) => void;
+    handleChangeSearchKey: (e: React.ChangeEvent<HTMLInputElement>) => void;
 };
 export default useFilterPopover;

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

@@ -1,15 +1,15 @@
-import { SearchBy, UserFilter } from "../constants/types";
+import { SearchBy, UserFilter, UserFilterField, UserOrder } from "../constants/types";
 interface Props {
     filters: UserFilter;
     onChangeFilters?: (filter: UserFilter) => void;
 }
 declare const useTableHeader: (props: Props) => {
-    popoverFilters: UserFilter;
+    popoverFilters: UserFilterField;
     popoverId: string | undefined;
-    users: any[];
-    handleFilterIcon: (id: string) => void;
+    users: string[];
+    handleFilterIcon: (id: string, searchBy?: SearchBy | undefined, searchStringBy?: string | undefined, sortBy?: UserOrder | undefined) => void;
     handleCloseFilter: () => void;
-    handleSearch: (search: string, searchBy: SearchBy) => void;
+    handleSearch: (search: string, searchBy?: SearchBy | undefined) => void;
     handleChangeFilters: (value?: string[] | undefined, searchBy?: SearchBy | undefined) => void;
 };
 export default useTableHeader;

package/dist/index.js

@@ -7307,6 +7307,11 @@ var getRosterUser = function getRosterUser(filter) {
     params: filter
   });
 };
+var getFilterRosterUser = function getFilterRosterUser(filter) {
+  return api.get(MAPPING_ROSTER_USER_URL + "/filters", {
+    params: filter
+  });
+};
 var getRosterUserExport = function getRosterUserExport(filter) {
   return api.get(MAPPING_ROSTER_USER_URL + "/export-csv", {
     params: filter
@@ -7377,11 +7382,9 @@ var UserColumns = [{
   searchBy: SearchBy.Name,
   className: "align-top",
   getOption: function getOption(user) {
-    var _user$fullName, _user$fullName$trim;
-
     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)) || ""
+      label: user || "empty",
+      value: user
     };
   }
 }, {
@@ -7390,11 +7393,9 @@ var UserColumns = [{
   searchBy: SearchBy.Email,
   className: "align-top",
   getOption: function getOption(user) {
-    var _user$email, _user$email$trim;
-
     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)) || ""
+      label: user || "empty",
+      value: user
     };
   }
 }, {
@@ -7407,13 +7408,11 @@ var UserColumns = [{
   searchBy: SearchBy.Role,
   className: "align-top",
   getOption: function getOption(user) {
-    var _user$roles, _user$roles2, _user$roles3, _user$roles3$join, _user$roles3$join$tri;
+    var _user$replace;
 
     return {
-      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)) || ""
+      label: !!user ? user === null || user === void 0 ? void 0 : (_user$replace = user.replace) === null || _user$replace === void 0 ? void 0 : _user$replace.call(user, "SecondaryTeacher", "SupportTeacher") : "empty",
+      value: user
     };
   }
 }, {
@@ -7421,12 +7420,6 @@ var UserColumns = [{
   sortBy: UserOrder.Status,
   searchBy: SearchBy.Status,
   className: "align-top",
-  getOption: function getOption(user, t) {
-    return {
-      label: user.isActive ? t("active") : t("inactive"),
-      value: user.isActive
-    };
-  },
   options: [{
     label: "Active",
     value: "true"
@@ -7443,32 +7436,10 @@ var UserColumns = [{
   sortBy: UserOrder.RosterUser,
   searchBy: SearchBy.RosterUser,
   className: "align-top",
-  getOption: function getOption(record) {
-    if (!record) return {
-      label: "empty",
-      value: ""
-    };
-    var result = [];
-    var sourcedId = record.sourcedId,
-        rosterUser = record.rosterUser;
-    !!sourcedId && result.push(sourcedId);
-
-    if (rosterUser) {
-      var givenName = rosterUser.givenName,
-          middleName = rosterUser.middleName,
-          familyName = rosterUser.familyName,
-          email = rosterUser.email;
-      var names = [];
-      !!givenName && names.push(givenName);
-      !!middleName && names.push(middleName);
-      !!familyName && names.push(familyName);
-      !!names.length && result.push(names.join(" "));
-      !!email && result.push(email);
-    }
-
+  getOption: function getOption(user) {
     return {
-      label: result.length ? result.join(" / ") : "empty",
-      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) || "") : ""
+      label: user || "empty",
+      value: user
     };
   }
 }, {
@@ -7546,6 +7517,14 @@ var useUserList = function useUserList() {
         dispatch(setLoading(false));
       };
 
+      if (filters.searchBy !== undefined && filters.searchByStrings !== undefined && filters.searchByStrings.length === 0) {
+        dispatch(setUserList({
+          userList: [],
+          totalItems: 0
+        }));
+        return Promise.resolve();
+      }
+
       dispatch(setLoading(true));
 
       var _temp4 = _catch(function () {
@@ -7622,7 +7601,7 @@ var useUserList = function useUserList() {
     var result = [];
     var sourcedId = record.sourcedId,
         rosterUser = record.rosterUser;
-    !!sourcedId && result.push(sourcedId);
+    !!sourcedId && !!rosterUser && result.push(sourcedId);
 
     if (rosterUser) {
       var givenName = rosterUser.givenName,
@@ -7630,11 +7609,11 @@ var useUserList = function useUserList() {
           familyName = rosterUser.familyName,
           email = rosterUser.email;
       var names = [];
-      !!givenName && names.push(givenName);
-      !!middleName && names.push(middleName);
       !!familyName && names.push(familyName);
-      !!names.length && result.push(names.join(" "));
-      !!email && result.push(email);
+      !!middleName && names.push(middleName);
+      !!givenName && names.push(givenName);
+      result.push(names.join(" ") || "");
+      result.push(email || "");
     }
 
     return result.join(" / ");
@@ -7666,9 +7645,9 @@ var useUserList = function useUserList() {
                 type: "success",
                 message: "Remove user successfully"
               }));
-              changeFilters({
+              if (filters.currentPage !== 1) changeFilters({
                 currentPage: 1
-              });
+              });else getData();
             });
           } catch (e) {
             return Promise.reject(e);
@@ -7685,7 +7664,7 @@ var useUserList = function useUserList() {
     }
 
     dispatch(setLoading(false));
-  }, [filters]);
+  }, [JSON.stringify(filters)]);
 
   var redirectLoginUser = function redirectLoginUser(res) {
     var _res$data2 = res.data,
@@ -7922,9 +7901,10 @@ var useFilterPopover = function useFilterPopover(props) {
       filters = props.filters,
       users = props.users,
       searchBy = props.searchBy,
-      searchString = props.searchString,
       defaultOptions = props.defaultOptions,
       selectedOptions = props.selectedOptions,
+      searchKey = props.searchKey,
+      onChangeSearchKey = props.onChangeSearchKey,
       onOptionsChange = props.onOptionsChange,
       onSearch = props.onSearch,
       onClose = props.onClose,
@@ -7939,28 +7919,32 @@ 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);
+  var inputRef = React.useRef(null);
   useClickOutside(ref, onClose);
 
   var _useTranslation = reactI18next.useTranslation(),
       t = _useTranslation.t;
 
   var handleSearch = React.useCallback(function () {
-    searchBy != undefined && !defaultOptions && (onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchKey, searchBy));
+    var _searchKey$trim, _searchKey$trim2;
+
+    if (!isOpen) return;
+    var searchString = (_searchKey$trim = searchKey === null || searchKey === void 0 ? void 0 : (_searchKey$trim2 = searchKey.trim) === null || _searchKey$trim2 === void 0 ? void 0 : _searchKey$trim2.call(searchKey)) != null ? _searchKey$trim : "";
+    searchBy != undefined && !defaultOptions && (onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchString, searchBy));
     searchBy != undefined && !!defaultOptions && setFilteredOptions(defaultOptions.filter(function (i) {
-      return i.label.toLowerCase().includes(searchKey === null || searchKey === void 0 ? void 0 : searchKey.toLowerCase());
+      return i.label.toLowerCase().includes(searchString.toLowerCase());
     }));
-  }, [searchBy, searchKey, JSON.stringify(defaultOptions)]);
+  }, [searchBy, searchKey, JSON.stringify(defaultOptions), isOpen]);
 
-  var handleChangeSearchKey = function handleChangeSearchKey(e) {
-    var _e$target$value;
+  var debounceSearch = function debounceSearch() {
+    if (!!inputRef.current) clearTimeout(inputRef.current);
+    inputRef.current = setTimeout(handleSearch, 500);
+  };
 
-    var value = (_e$target$value = e.target.value) != null ? _e$target$value : "";
-    setSearchKey(value);
+  var handleChangeSearchKey = function handleChangeSearchKey(e) {
+    var value = e.target.value;
+    onChangeSearchKey(value);
   };
 
   var handleApplyFilter = React.useCallback(function () {
@@ -7968,9 +7952,9 @@ var useFilterPopover = function useFilterPopover(props) {
     onClose === null || onClose === void 0 ? void 0 : onClose();
   }, [JSON.stringify(sOptions)]);
   var handleOptionSelected = React.useCallback(function (e) {
-    var _e$target$value2;
+    var _e$target$value;
 
-    var value = (_e$target$value2 = e.target.value) != null ? _e$target$value2 : "";
+    var value = (_e$target$value = e.target.value) != null ? _e$target$value : "";
     var newOptions = sOptions != null ? sOptions : [];
     var index = newOptions.indexOf(value);
 
@@ -7992,22 +7976,19 @@ var useFilterPopover = function useFilterPopover(props) {
       isDescending: (filters === null || filters === void 0 ? void 0 : filters.isDescending) === true ? undefined : true
     }));
     onClose === null || onClose === void 0 ? void 0 : onClose();
-  }, [JSON.stringify(filters), searchBy, searchBy]);
+  }, [JSON.stringify(filters), searchBy]);
   var handleSortAsc = React.useCallback(function () {
     onChangeFilters === null || onChangeFilters === void 0 ? void 0 : onChangeFilters(_extends({}, filters, {
       sortBy: (filters === null || filters === void 0 ? void 0 : filters.isDescending) === false ? undefined : sortBy,
       isDescending: (filters === null || filters === void 0 ? void 0 : filters.isDescending) === false ? undefined : false
     }));
     onClose === null || onClose === void 0 ? void 0 : onClose();
-  }, [JSON.stringify(filters), searchBy, searchBy]);
+  }, [JSON.stringify(filters), searchBy]);
   var options = React.useMemo(function () {
     if (!getOption) return [];
-    return users.reduce(function (i, current) {
-      var _extends2;
-
-      var option = getOption(current, t);
-      return _extends({}, i, (_extends2 = {}, _extends2[option.label] = option.value, _extends2));
-    }, {});
+    return users.map(function (i) {
+      return getOption(i, t);
+    });
   }, [JSON.stringify(users), JSON.stringify(getOption)]);
   var isAscending = (filters === null || filters === void 0 ? void 0 : filters.isDescending) == false && filters.sortBy === sortBy;
   var isDescending = !!(filters !== null && filters !== void 0 && filters.isDescending) && filters.sortBy === sortBy;
@@ -8018,14 +7999,12 @@ var useFilterPopover = function useFilterPopover(props) {
     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();
+    debounceSearch();
   }, [searchKey, isOpen]);
   return {
     ref: ref,
     options: options,
+    inputRef: inputRef,
     sOptions: sOptions,
     isAscending: isAscending,
     isDescending: isDescending,
@@ -8048,6 +8027,7 @@ var FilterPopover = function FilterPopover(props) {
 
   var _useFilterPopover = useFilterPopover(props),
       ref = _useFilterPopover.ref,
+      inputRef = _useFilterPopover.inputRef,
       options = _useFilterPopover.options,
       sOptions = _useFilterPopover.sOptions,
       isAscending = _useFilterPopover.isAscending,
@@ -8082,7 +8062,7 @@ var FilterPopover = function FilterPopover(props) {
     onClick: handleSortDesc
   }, React__default.createElement(ai.AiOutlineSortDescending, {
     className: "mr-1"
-  }), "Descending")), typeof getOption != 'undefined' && React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+  }), "Descending")), (typeof getOption != 'undefined' || !!defaultOptions) && React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
     className: "border border-top-1 border-bottom-0 mx-1 my-2"
   }), React__default.createElement("div", {
     className: "d-flex flex-column"
@@ -8093,6 +8073,7 @@ var FilterPopover = function FilterPopover(props) {
   }, React__default.createElement(bi.BiSearchAlt2, {
     className: "position-absolute " + styles["popover__search__icon"]
   }), React__default.createElement(reactstrap.Input, {
+    ref: inputRef,
     className: styles["popover__search__input"],
     value: searchKey,
     onChange: handleChangeSearchKey
@@ -8107,19 +8088,19 @@ var FilterPopover = function FilterPopover(props) {
     checked: sOptions == undefined
   }), " ", React__default.createElement(reactstrap.Label, {
     check: true
-  }, "(Select all)")), !!getOption && !defaultOptions && Object.keys(options).map(function (i) {
+  }, "(Select all)")), !!getOption && !defaultOptions && options.map(function (i) {
     return React__default.createElement(reactstrap.FormGroup, {
-      key: i.id,
+      key: i.value,
       className: "d-flex align-items-center",
       check: true
     }, React__default.createElement(reactstrap.Input, {
       type: "checkbox",
-      value: options["" + i],
+      value: i.value,
       onChange: handleOptionSelected,
-      checked: (sOptions === null || sOptions === void 0 ? void 0 : sOptions.includes(options["" + i])) || sOptions == undefined
+      checked: (sOptions === null || sOptions === void 0 ? void 0 : sOptions.includes(i.value)) || sOptions == undefined
     }), " ", React__default.createElement(reactstrap.Label, {
       check: true
-    }, i));
+    }, i.label));
   }), !!defaultOptions && filteredOptions.map(function (i) {
     return React__default.createElement(reactstrap.FormGroup, {
       key: i.value,
@@ -8153,14 +8134,22 @@ var HeaderCell = function HeaderCell(_ref) {
   var data = _ref.data,
       popoverId = _ref.popoverId,
       filters = _ref.filters,
+      searchString = _ref.searchString,
+      users = _ref.users,
+      selectedOptions = _ref.selectedOptions,
+      onOptionsChange = _ref.onOptionsChange,
+      onSearch = _ref.onSearch,
       onChangeFilters = _ref.onChangeFilters,
       onOpenFilter = _ref.onOpenFilter,
-      onClose = _ref.onClose,
-      rest = _objectWithoutPropertiesLoose(_ref, ["data", "popoverId", "filters", "onChangeFilters", "onOpenFilter", "onClose"]);
+      onClose = _ref.onClose;
 
   var _useTranslation = reactI18next.useTranslation(),
       t = _useTranslation.t;
 
+  var _useState = React.useState(""),
+      searchKey = _useState[0],
+      setSearchKey = _useState[1];
+
   var id = React.useMemo(function () {
     return data.sortBy != undefined ? userOrders[data.sortBy] : "";
   }, [data.sortBy]);
@@ -8169,7 +8158,11 @@ var HeaderCell = function HeaderCell(_ref) {
   }, [id, popoverId]);
 
   var handleOpenFilter = function handleOpenFilter() {
-    onOpenFilter === null || onOpenFilter === void 0 ? void 0 : onOpenFilter(id);
+    onOpenFilter === null || onOpenFilter === void 0 ? void 0 : onOpenFilter(id, data.searchBy, searchKey, data.sortBy);
+  };
+
+  var handleChangeSearchKey = function handleChangeSearchKey(value) {
+    setSearchKey(value);
   };
 
   return React__default.createElement("th", {
@@ -8183,18 +8176,25 @@ var HeaderCell = function HeaderCell(_ref) {
     style: {
       cursor: "pointer"
     }
-  }, data.sortBy !== undefined && data.sortBy === (filters === null || filters === void 0 ? void 0 : filters.sortBy) && React__default.createElement("span", null, filters.isDescending ? React__default.createElement(ai.AiOutlineSortDescending, null) : React__default.createElement(ai.AiOutlineSortAscending, null)), !!(filters !== null && filters !== void 0 && (_filters$searchByStri = filters.searchByStrings) !== null && _filters$searchByStri !== void 0 && _filters$searchByStri.length) && data.searchBy === (filters === null || filters === void 0 ? void 0 : filters.searchBy) ? React__default.createElement(hi.HiFilter, null) : React__default.createElement(bi.BiFilterAlt, null)), React__default.createElement(FilterPopover, Object.assign({
-    target: id,
+  }, data.sortBy !== undefined && data.sortBy === (filters === null || filters === void 0 ? void 0 : filters.sortBy) && React__default.createElement("span", null, filters.isDescending ? React__default.createElement(ai.AiOutlineSortDescending, null) : React__default.createElement(ai.AiOutlineSortAscending, null)), !!(filters !== null && filters !== void 0 && (_filters$searchByStri = filters.searchByStrings) !== null && _filters$searchByStri !== void 0 && _filters$searchByStri.length) && data.searchBy === (filters === null || filters === void 0 ? void 0 : filters.searchBy) ? React__default.createElement(hi.HiFilter, null) : React__default.createElement(bi.BiFilterAlt, null)), React__default.createElement(FilterPopover, {
     placement: "bottom-end",
+    target: id,
+    users: users,
     isOpen: isOpen,
     filters: filters,
-    onClose: onClose,
-    onChangeFilters: onChangeFilters,
     sortBy: data.sortBy,
+    searchKey: searchKey,
     searchBy: data.searchBy,
+    searchString: searchString,
+    defaultOptions: data.options,
+    selectedOptions: selectedOptions,
+    onClose: onClose,
+    onSearch: onSearch,
     getOption: data.getOption,
-    defaultOptions: data.options
-  }, rest))) : t(data.name));
+    onChangeFilters: onChangeFilters,
+    onOptionsChange: onOptionsChange,
+    onChangeSearchKey: handleChangeSearchKey
+  })) : t(data.name));
 };
 
 var useTableHeader = function useTableHeader(props) {
@@ -8210,7 +8210,6 @@ var useTableHeader = function useTableHeader(props) {
       setUsers = _useState2[1];
 
   var _useState3 = React.useState(_extends({}, DEFAULT_FILTER_POPOVER, {
-    sortBy: filters.sortBy,
     isDescending: filters.isDescending,
     searchString: filters.searchString
   })),
@@ -8221,14 +8220,10 @@ var useTableHeader = function useTableHeader(props) {
   var getData = React.useCallback(function () {
     try {
       var _temp2 = _catch(function () {
-        return Promise.resolve(getRosterUser(popoverFilters)).then(function (res) {
-          var items = res.data.items;
-
-          for (var _iterator = _createForOfIteratorHelperLoose(items), _step; !(_step = _iterator()).done;) {
-            var user = _step.value;
-            user.roles = user.roles.includes("EduTeacher") ? [ROLES.EDUTEACHER] : user.roles;
-          }
+        return Promise.resolve(getFilterRosterUser(popoverFilters)).then(function (res) {
+          var _res$data;
 
+          var items = ((_res$data = res.data) === null || _res$data === void 0 ? void 0 : _res$data.items) || [];
           setUsers(items);
         });
       }, function (err) {
@@ -8245,25 +8240,24 @@ var useTableHeader = function useTableHeader(props) {
       return Promise.reject(e);
     }
   }, [JSON.stringify(popoverFilters)]);
-
-  var handleFilterIcon = function handleFilterIcon(id) {
+  var handleFilterIcon = React.useCallback(function (id, searchBy, searchStringBy, sortBy) {
     setPopoverId(id);
-  };
+    setPopoverFilters(_extends({}, popoverFilters, {
+      searchBy: searchBy,
+      searchStringBy: searchStringBy,
+      isDescending: filters.sortBy === sortBy ? filters.isDescending : undefined,
+      searchString: filters.searchString
+    }));
+  }, [JSON.stringify(popoverFilters), filters.isDescending, filters.searchString]);
 
   var handleCloseFilter = function handleCloseFilter() {
     setPopoverId("");
   };
 
-  React.useEffect(function () {
-    setPopoverFilters(_extends({}, popoverFilters, {
-      sortBy: filters.sortBy,
-      isDescending: filters.isDescending
-    }));
-  }, [filters.sortBy, filters.isDescending]);
   var handleSearch = React.useCallback(function (search, searchBy) {
     setPopoverFilters(_extends({}, popoverFilters, {
-      searchStringBy: search,
-      searchBy: searchBy
+      searchBy: searchBy,
+      searchStringBy: search
     }));
   }, [JSON.stringify(popoverFilters)]);
   var handleChangeFilters = React.useCallback(function (value, searchBy) {
@@ -8273,15 +8267,8 @@ var useTableHeader = function useTableHeader(props) {
     }));
   }, [JSON.stringify(filters)]);
   React.useEffect(function () {
-    getData();
+    popoverFilters.searchBy !== undefined && getData();
   }, [JSON.stringify(popoverFilters)]);
-  React.useEffect(function () {
-    setPopoverFilters(_extends({}, DEFAULT_FILTER_POPOVER, popoverFilters, {
-      sortBy: filters.sortBy,
-      isDescending: filters.isDescending,
-      searchString: filters.searchString
-    }));
-  }, [JSON.stringify(filters), JSON.stringify(popoverFilters)]);
   return {
     popoverFilters: popoverFilters,
     popoverId: popoverId,
@@ -8302,7 +8289,6 @@ var TableHeader = function TableHeader(_ref) {
     filters: filters,
     onChangeFilters: onChangeFilters
   }),
-      popoverFilters = _useTableHeader.popoverFilters,
       popoverId = _useTableHeader.popoverId,
       users = _useTableHeader.users,
       handleFilterIcon = _useTableHeader.handleFilterIcon,
@@ -8312,17 +8298,16 @@ var TableHeader = function TableHeader(_ref) {
 
   return React__default.createElement("tr", null, headers.map(function (header) {
     return React__default.createElement(HeaderCell, {
-      key: header.name,
+      users: users,
       data: header,
-      popoverId: popoverId,
+      key: header.name,
       filters: filters,
-      users: users,
-      searchString: popoverFilters.searchStringBy,
+      popoverId: popoverId,
       selectedOptions: filters.searchByStrings,
       onSearch: handleSearch,
-      onChangeFilters: onChangeFilters,
       onClose: handleCloseFilter,
       onOpenFilter: handleFilterIcon,
+      onChangeFilters: onChangeFilters,
       onOptionsChange: handleChangeFilters
     });
   }));