mario-core 2.9.160-level → 2.9.161-level

package/dist/index.modern.js

@@ -7305,6 +7305,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
@@ -7375,11 +7380,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
     };
   }
 }, {
@@ -7388,11 +7391,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
     };
   }
 }, {
@@ -7405,13 +7406,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
     };
   }
 }, {
@@ -7419,12 +7418,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"
@@ -7441,32 +7434,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
     };
   }
 }, {
@@ -7544,6 +7515,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 () {
@@ -7620,7 +7599,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,
@@ -7628,11 +7607,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(" / ");
@@ -7664,9 +7643,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);
@@ -7683,7 +7662,7 @@ var useUserList = function useUserList() {
     }
 
     dispatch(setLoading(false));
-  }, [filters]);
+  }, [JSON.stringify(filters)]);
 
   var redirectLoginUser = function redirectLoginUser(res) {
     var _res$data2 = res.data,
@@ -7920,9 +7899,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,
@@ -7937,28 +7917,32 @@ var useFilterPopover = function useFilterPopover(props) {
       filteredOptions = _useState2[0],
       setFilteredOptions = _useState2[1];
 
-  var _useState3 = useState(""),
-      searchKey = _useState3[0],
-      setSearchKey = _useState3[1];
-
   var ref = useRef(null);
+  var inputRef = useRef(null);
   useClickOutside(ref, onClose);
 
   var _useTranslation = useTranslation(),
       t = _useTranslation.t;
 
   var handleSearch = 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 = useCallback(function () {
@@ -7966,9 +7950,9 @@ var useFilterPopover = function useFilterPopover(props) {
     onClose === null || onClose === void 0 ? void 0 : onClose();
   }, [JSON.stringify(sOptions)]);
   var handleOptionSelected = 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);
 
@@ -7990,22 +7974,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 = 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 = 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;
@@ -8016,14 +7997,12 @@ var useFilterPopover = function useFilterPopover(props) {
     setFilteredOptions(defaultOptions || []);
   }, [JSON.stringify(defaultOptions)]);
   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]);
-  useEffect(function () {
-    isOpen && handleSearch();
+    debounceSearch();
   }, [searchKey, isOpen]);
   return {
     ref: ref,
     options: options,
+    inputRef: inputRef,
     sOptions: sOptions,
     isAscending: isAscending,
     isDescending: isDescending,
@@ -8046,6 +8025,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,
@@ -8080,7 +8060,7 @@ var FilterPopover = function FilterPopover(props) {
     onClick: handleSortDesc
   }, React.createElement(AiOutlineSortDescending, {
     className: "mr-1"
-  }), "Descending")), typeof getOption != 'undefined' && React.createElement(React.Fragment, null, React.createElement("div", {
+  }), "Descending")), (typeof getOption != 'undefined' || !!defaultOptions) && React.createElement(React.Fragment, null, React.createElement("div", {
     className: "border border-top-1 border-bottom-0 mx-1 my-2"
   }), React.createElement("div", {
     className: "d-flex flex-column"
@@ -8091,6 +8071,7 @@ var FilterPopover = function FilterPopover(props) {
   }, React.createElement(BiSearchAlt2, {
     className: "position-absolute " + styles["popover__search__icon"]
   }), React.createElement(Input, {
+    ref: inputRef,
     className: styles["popover__search__input"],
     value: searchKey,
     onChange: handleChangeSearchKey
@@ -8105,19 +8086,19 @@ var FilterPopover = function FilterPopover(props) {
     checked: sOptions == undefined
   }), " ", React.createElement(Label, {
     check: true
-  }, "(Select all)")), !!getOption && !defaultOptions && Object.keys(options).map(function (i) {
+  }, "(Select all)")), !!getOption && !defaultOptions && options.map(function (i) {
     return React.createElement(FormGroup, {
-      key: i.id,
+      key: i.value,
       className: "d-flex align-items-center",
       check: true
     }, React.createElement(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.createElement(Label, {
       check: true
-    }, i));
+    }, i.label));
   }), !!defaultOptions && filteredOptions.map(function (i) {
     return React.createElement(FormGroup, {
       key: i.value,
@@ -8151,14 +8132,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 = useTranslation(),
       t = _useTranslation.t;
 
+  var _useState = useState(""),
+      searchKey = _useState[0],
+      setSearchKey = _useState[1];
+
   var id = useMemo(function () {
     return data.sortBy != undefined ? userOrders[data.sortBy] : "";
   }, [data.sortBy]);
@@ -8167,7 +8156,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.createElement("th", {
@@ -8181,18 +8174,25 @@ var HeaderCell = function HeaderCell(_ref) {
     style: {
       cursor: "pointer"
     }
-  }, data.sortBy !== undefined && data.sortBy === (filters === null || filters === void 0 ? void 0 : filters.sortBy) && React.createElement("span", null, filters.isDescending ? React.createElement(AiOutlineSortDescending, null) : React.createElement(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.createElement(HiFilter, null) : React.createElement(BiFilterAlt, null)), React.createElement(FilterPopover, Object.assign({
-    target: id,
+  }, data.sortBy !== undefined && data.sortBy === (filters === null || filters === void 0 ? void 0 : filters.sortBy) && React.createElement("span", null, filters.isDescending ? React.createElement(AiOutlineSortDescending, null) : React.createElement(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.createElement(HiFilter, null) : React.createElement(BiFilterAlt, null)), React.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) {
@@ -8208,7 +8208,6 @@ var useTableHeader = function useTableHeader(props) {
       setUsers = _useState2[1];
 
   var _useState3 = useState(_extends({}, DEFAULT_FILTER_POPOVER, {
-    sortBy: filters.sortBy,
     isDescending: filters.isDescending,
     searchString: filters.searchString
   })),
@@ -8219,14 +8218,10 @@ var useTableHeader = function useTableHeader(props) {
   var getData = 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) {
@@ -8243,25 +8238,24 @@ var useTableHeader = function useTableHeader(props) {
       return Promise.reject(e);
     }
   }, [JSON.stringify(popoverFilters)]);
-
-  var handleFilterIcon = function handleFilterIcon(id) {
+  var handleFilterIcon = 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("");
   };
 
-  useEffect(function () {
-    setPopoverFilters(_extends({}, popoverFilters, {
-      sortBy: filters.sortBy,
-      isDescending: filters.isDescending
-    }));
-  }, [filters.sortBy, filters.isDescending]);
   var handleSearch = useCallback(function (search, searchBy) {
     setPopoverFilters(_extends({}, popoverFilters, {
-      searchStringBy: search,
-      searchBy: searchBy
+      searchBy: searchBy,
+      searchStringBy: search
     }));
   }, [JSON.stringify(popoverFilters)]);
   var handleChangeFilters = useCallback(function (value, searchBy) {
@@ -8271,15 +8265,8 @@ var useTableHeader = function useTableHeader(props) {
     }));
   }, [JSON.stringify(filters)]);
   useEffect(function () {
-    getData();
+    popoverFilters.searchBy !== undefined && getData();
   }, [JSON.stringify(popoverFilters)]);
-  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,
@@ -8300,7 +8287,6 @@ var TableHeader = function TableHeader(_ref) {
     filters: filters,
     onChangeFilters: onChangeFilters
   }),
-      popoverFilters = _useTableHeader.popoverFilters,
       popoverId = _useTableHeader.popoverId,
       users = _useTableHeader.users,
       handleFilterIcon = _useTableHeader.handleFilterIcon,
@@ -8310,17 +8296,16 @@ var TableHeader = function TableHeader(_ref) {
 
   return React.createElement("tr", null, headers.map(function (header) {
     return React.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
     });
   }));