Client: Add temporary empty screen for inside group. Hide filter if group is empty

packages/client/src/pages/Home/Section/AccountsBody/EmptyScreen.js

@@ -42,6 +42,7 @@ const EmptyScreen = ({
   resetInsideGroupFilter,
   setIsLoading,
   theme,
+  isEmptyGroup = false,
 }) => {
   const { t } = useTranslation(["People", "Common"]);
   const isPeopleAccounts = window.location.pathname.includes("accounts/people");
@@ -57,6 +58,17 @@ const EmptyScreen = ({
   const imageSrc = theme.isBase
     ? EmptyScreenPersonSvgUrl
     : EmptyScreenPersonSvgDarkUrl;
+
+  if (isEmptyGroup) {
+    return (
+      <EmptyScreenContainer
+        imageSrc={imageSrc}
+        imageAlt="Empty Screen Filter image"
+        headerText={title}
+      />
+    );
+  }
+
   return (
     <>
       <EmptyScreenContainer

packages/client/src/pages/Home/Section/AccountsBody/InsideGroup/RowView/PeopleRowContainer.js

@@ -85,6 +85,7 @@ const PeopleRowContainer = ({
   infoPanelVisible,
   withPaging,
   currentDeviceType,
+  insideGroupIsFiltered,
 }) => {
   useViewEffect({
     view: accountsViewAs,
@@ -113,7 +114,7 @@ const PeopleRowContainer = ({
       ))}
     </StyledRowContainer>
   ) : (
-    <EmptyScreen />
+    <EmptyScreen isEmptyGroup={!insideGroupIsFiltered} />
   );
 };
 
@@ -126,7 +127,7 @@ export default inject(({ peopleStore, filesStore, settingsStore }) => {
   } = peopleStore;
   const { theme, withPaging, currentDeviceType } = settingsStore;
   const { isVisible: infoPanelVisible } = infoPanelStore;
-  const { currentGroup } = peopleStore.groupsStore;
+  const { currentGroup, insideGroupIsFiltered } = peopleStore.groupsStore;
   const { peopleList } = usersStore;
 
   return {
@@ -138,5 +139,6 @@ export default inject(({ peopleStore, filesStore, settingsStore }) => {
     infoPanelVisible,
     withPaging,
     currentDeviceType,
+    insideGroupIsFiltered,
   };
 })(observer(PeopleRowContainer));

packages/client/src/pages/Home/Section/AccountsBody/InsideGroup/TableView/TableContainer.js

@@ -157,6 +157,7 @@ const Table = ({
   insideGroupIsLoading,
   fetchMoreInsideGroupUsers,
   insideGroupFilterTotal,
+  insideGroupIsFiltered,
   hasMoreInsideGroupUsers,
 }) => {
   const ref = useRef(null);
@@ -177,7 +178,7 @@ const Table = ({
   const isEmptyPage = !insideGroupIsLoading && peopleList.length === 0;
 
   return isEmptyPage ? (
-    <EmptyScreen />
+    <EmptyScreen isEmptyGroup={!insideGroupIsFiltered} />
   ) : (
     <StyledTableContainer useReactWindow={!withPaging} forwardedRef={ref}>
       <TableHeader
@@ -261,6 +262,7 @@ export default inject(
     const {
       insideGroupIsLoading,
       insideGroupFilterTotal,
+      insideGroupIsFiltered,
       hasMoreInsideGroupUsers,
       fetchMoreInsideGroupUsers,
     } = peopleStore.groupsStore;
@@ -286,6 +288,7 @@ export default inject(
       insideGroupIsLoading,
       fetchMoreInsideGroupUsers,
       insideGroupFilterTotal,
+      insideGroupIsFiltered,
       hasMoreInsideGroupUsers,
     };
   },

packages/client/src/pages/Home/index.js

@@ -160,6 +160,7 @@ const PureHome = (props) => {
     getFolderModel,
     scrollToTop,
     isEmptyGroups,
+    isCurrentGroupEmpty,
     wsCreatedPDFForm,
     disableUploadPanelOpen,
   } = props;
@@ -176,7 +177,11 @@ const PureHome = (props) => {
   const isPeopleAccounts = location.pathname.includes("accounts/people");
   const isGroupsAccounts =
     location.pathname.includes("accounts/groups") && !groupId;
-  const isAccountsEmptyFilter = isGroupsAccounts && isEmptyGroups;
+  const isInsideGroup =
+    location.pathname.includes("accounts/groups") && groupId;
+  const isAccountsEmptyFilter =
+    (isGroupsAccounts && isEmptyGroups) ||
+    (isInsideGroup && isCurrentGroupEmpty);
 
   const { onDrop } = useFiles({
     t,
@@ -574,6 +579,7 @@ export default inject(
       fetchGroup,
       groups,
       groupsIsFiltered,
+      isCurrentGroupEmpty,
     } = groupsStore;
     const isEmptyGroups =
       !groupsIsFiltered &&
@@ -692,6 +698,7 @@ export default inject(
       getFolderModel,
       scrollToTop,
       isEmptyGroups,
+      isCurrentGroupEmpty,
       wsCreatedPDFForm,
     };
   },

packages/client/src/store/GroupsStore.ts

@@ -152,6 +152,24 @@ class GroupsStore {
     return false;
   }
 
+  get insideGroupIsFiltered() {
+    return (
+      this.insideGroupFilter.activationStatus ||
+      this.insideGroupFilter.employeeStatus ||
+      this.insideGroupFilter.payments ||
+      this.insideGroupFilter.search ||
+      this.insideGroupFilter.role ||
+      this.insideGroupFilter.accountLoginType
+    );
+  }
+
+  get isCurrentGroupEmpty() {
+    return (
+      !this.insideGroupIsFiltered &&
+      this.peopleStore.usersStore.peopleList.length === 0
+    );
+  }
+
   // Inside Group Filter
 
   setInsideGroupFilter = (filter) => {