Web:People: update filter selected items

products/ASC.People/Client/src/pages/Home/Section/Filter/index.js

@@ -209,11 +209,16 @@ const SectionFilterContent = ({
   }, [filter.sortOrder, filter.sortBy]);
 
   const getSelectedFilterData = async () => {
+    const { guestCaption, userCaption, groupCaption } = customNames;
     const filterValues = [];
 
     if (filter.employeeStatus) {
       filterValues.push({
         key: `${filter.employeeStatus}`,
+        label:
+          `${filter.employeeStatus}` === "1"
+            ? t("Common:Active")
+            : t("Translations:DisabledEmployeeStatus"),
         group: "filter-status",
       });
     }
@@ -221,13 +226,34 @@ const SectionFilterContent = ({
     if (filter.activationStatus) {
       filterValues.push({
         key: `${filter.activationStatus}`,
+        label:
+          `${filter.activationStatus}` === "1"
+            ? t("Common:Active")
+            : t("Translations:PendingTitle"),
         group: "filter-email",
       });
     }
 
     if (filter.role) {
+      let label = null;
+
+      switch (filter.role) {
+        case "admin":
+          label = t("Administrator");
+          break;
+        case "user":
+          label = userCaption;
+          break;
+        case "guest":
+          label = guestCaption;
+          break;
+        default:
+          label = "";
+      }
+
       filterValues.push({
         key: filter.role,
+        label: label,
         group: "filter-type",
       });
     }
@@ -247,6 +273,30 @@ const SectionFilterContent = ({
     return filterValues;
   };
 
+  const removeSelectedItem = ({ key, group }) => {
+    const newFilter = filter.clone();
+    newFilter.page = 0;
+
+    if (group === "filter-status") {
+      newFilter.employeeStatus = null;
+    }
+
+    if (group === "filter-type") {
+      newFilter.role = null;
+    }
+
+    if (group === "filter-email") {
+      newFilter.activationStatus = null;
+    }
+
+    if (group === "filter-other") {
+      newFilter.group = null;
+    }
+
+    setIsLoading(true);
+    fetchPeople(newFilter).finally(() => setIsLoading(false));
+  };
+
   return isLoaded && tReady ? (
     <FilterInput
       t={t}
@@ -258,11 +308,13 @@ const SectionFilterContent = ({
       getSelectedSortData={getSelectedSortData}
       onSearch={onSearch}
       getSelectedInputValue={getSelectedInputValue}
+      filterHeader={t("Common:Filter")}
       contextMenuHeader={t("Common:AddFilter")}
       placeholder={t("Common:Search")}
       isMobile={isMobileOnly}
       viewAs={viewAs}
       viewSelectorVisible={false}
+      removeSelectedItem={removeSelectedItem}
     />
   ) : (
     <Loaders.Filter />