Merge pull request #593 from ONLYOFFICE/feature/people-column

Feature/people column

packages/client/src/helpers/constants.js

@@ -85,7 +85,7 @@ export const TableVersions = Object.freeze({
   Files: "3",
   People: "3",
   Trash: "4",
-  Groups: "5",
+  Groups: "6",
   InsideGroup: "6",
   Recent: "1",
 });

packages/client/src/pages/Home/Section/AccountsBody/Groups/TableView/GroupsTableHeader.js

@@ -30,9 +30,9 @@ import { withTranslation } from "react-i18next";
 
 import { TableHeader } from "@docspace/shared/components/table";
 import { Events } from "@docspace/shared/enums";
+import { TableVersions } from "SRC_DIR/helpers/constants";
 
-const TABLE_VERSION = "5";
-const TABLE_COLUMNS = `groupsTableColumns_ver-${TABLE_VERSION}`;
+const TABLE_COLUMNS = `groupsTableColumns_ver-${TableVersions.Groups}`;
 
 class GroupsTableHeader extends React.Component {
   constructor(props) {
@@ -49,6 +49,15 @@ class GroupsTableHeader extends React.Component {
         minWidth: 210,
         onClick: this.onFilter,
       },
+      {
+        key: "People",
+        title: props.t("Common:People"),
+        enable: props.peopleAccountsGroupsColumnIsEnabled,
+        sortBy: "membersCount",
+        onClick: this.onFilter,
+        resizable: true,
+        onChange: this.onColumnChange,
+      },
       {
         key: "Head of Group",
         title: props.t("Common:HeadOfGroup"),
@@ -161,6 +170,8 @@ export default inject(
     setColumnEnable: tableStore.setColumnEnable,
     managerAccountsGroupsColumnIsEnabled:
       tableStore.managerAccountsGroupsColumnIsEnabled,
+    peopleAccountsGroupsColumnIsEnabled:
+      tableStore.peopleAccountsGroupsColumnIsEnabled,
   }),
 )(
   withTranslation(["People", "Common", "PeopleTranslations"])(

packages/client/src/pages/Home/Section/AccountsBody/Groups/TableView/GroupsTableItem.js

@@ -45,6 +45,7 @@ const GroupsTableItem = ({
   getGroupContextOptions,
   getModel,
   openGroupAction,
+  peopleAccountsGroupsColumnIsEnabled,
   managerAccountsGroupsColumnIsEnabled,
 
   changeGroupSelection,
@@ -139,6 +140,23 @@ const GroupsTableItem = ({
           <Badges isLDAP={item.isLDAP} />
         </TableCell>
 
+        {peopleAccountsGroupsColumnIsEnabled ? (
+          <TableCell className="table-container_group-people">
+            <Text
+              title={item.membersCount}
+              fontWeight="600"
+              fontSize="13px"
+              isTextOverflow
+              className="table-cell_group-people"
+              color={theme.filesSection.tableView.row.sideColor}
+            >
+              {item.membersCount}
+            </Text>
+          </TableCell>
+        ) : (
+          <div />
+        )}
+
         {managerAccountsGroupsColumnIsEnabled ? (
           <TableCell className={"table-container_group-manager"}>
             <Text

packages/client/src/pages/Home/Section/AccountsBody/Groups/TableView/index.js

@@ -57,6 +57,7 @@ const GroupsTableView = ({
   groupsIsFiltered,
   groupsFilterTotal,
 
+  peopleAccountsGroupsColumnIsEnabled,
   managerAccountsGroupsColumnIsEnabled,
 }) => {
   const ref = useRef(null);
@@ -110,6 +111,9 @@ const GroupsTableView = ({
             managerAccountsGroupsColumnIsEnabled={
               managerAccountsGroupsColumnIsEnabled
             }
+            peopleAccountsGroupsColumnIsEnabled={
+              peopleAccountsGroupsColumnIsEnabled
+            }
           />
         ))}
       </TableBody>
@@ -155,7 +159,10 @@ export default inject(
 
     const { isVisible: infoPanelVisible } = infoPanelStore;
 
-    const { managerAccountsGroupsColumnIsEnabled } = tableStore;
+    const {
+      managerAccountsGroupsColumnIsEnabled,
+      peopleAccountsGroupsColumnIsEnabled,
+    } = tableStore;
 
     return {
       groups,
@@ -177,6 +184,7 @@ export default inject(
       groupsIsFiltered,
       groupsFilterTotal,
 
+      peopleAccountsGroupsColumnIsEnabled,
       managerAccountsGroupsColumnIsEnabled,
     };
   },

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

@@ -2021,6 +2021,13 @@ const SectionFilterContent = ({
         default: true,
       };
 
+      const people = {
+        id: "sort-by_people",
+        key: "membersCount",
+        label: t("Common:People"),
+        default: true,
+      };
+
       const manager = {
         id: "sort-by_manager",
         key: "manager",
@@ -2028,7 +2035,7 @@ const SectionFilterContent = ({
         default: true,
       };
 
-      groupsOptions.push(title, manager);
+      groupsOptions.push(title, people, manager);
 
       return groupsOptions;
     }

packages/client/src/store/TableStore.js

@@ -80,6 +80,7 @@ class TableStore {
   emailAccountsColumnIsEnabled = true;
   storageAccountsColumnIsEnabled = true;
 
+  peopleAccountsGroupsColumnIsEnabled = true;
   managerAccountsGroupsColumnIsEnabled = true;
 
   typeAccountsInsideGroupColumnIsEnabled = true;
@@ -163,6 +164,8 @@ class TableStore {
   setAccountsColumnStorage = (enable) =>
     (this.storageAccountsColumnIsEnabled = enable);
 
+  setAccountsGroupsColumnPeople = (enable) =>
+    (this.peopleAccountsGroupsColumnIsEnabled = enable);
   setAccountsGroupsColumnManager = (enable) =>
     (this.managerAccountsGroupsColumnIsEnabled = enable);
 
@@ -210,6 +213,7 @@ class TableStore {
       }
 
       if (getIsAccountsGroups()) {
+        this.setAccountsGroupsColumnPeople(splitColumns.includes("People"));
         this.setAccountsGroupsColumnManager(
           splitColumns.includes("Head of Group"),
         );
@@ -349,6 +353,12 @@ class TableStore {
           : this.setRoomColumnQuota(!this.roomQuotaColumnIsEnable);
         return;
 
+      case "People":
+        this.setAccountsGroupsColumnPeople(
+          !this.peopleAccountsGroupsColumnIsEnabled,
+        );
+        return;
+
       case "Head of Group":
         this.setAccountsGroupsColumnManager(
           !this.managerAccountsGroupsColumnIsEnabled,