Web: Client: PeopleSelector moved from header to admins page

web/ASC.Web.Client/src/components/pages/Settings/Layout/Section/Header/index.js

@@ -7,7 +7,6 @@ import Headline from "@appserver/common/components/Headline";
 import IconButton from "@appserver/components/icon-button";
 import GroupButtonsMenu from "@appserver/components/group-buttons-menu";
 import { tablet, desktop } from "@appserver/components/utils/device";
-import PeopleSelector from "people/PeopleSelector";
 
 import {
   getKeyByLink,
@@ -154,10 +153,9 @@ class SectionHeaderContent extends React.Component {
     addUsers(items);
   };
 
-  onToggleSelector = (status = !this.state.showSelector) => {
-    this.setState({
-      showSelector: status,
-    });
+  onToggleSelector = (isOpen = !this.props.selectorIsOpen) => {
+    const { toggleSelector } = this.props;
+    toggleSelector(isOpen);
   };
 
   onCancelSelector = () => {
@@ -167,7 +165,6 @@ class SectionHeaderContent extends React.Component {
   onSelect = (items) => {
     this.onToggleSelector(false);
     this.addUsers(items);
-    //this.changeOwner(items[0]);
   };
 
   onClose = () => {
@@ -255,14 +252,6 @@ class SectionHeaderContent extends React.Component {
                   onClick={this.onToggleSelector}
                   className="action-button"
                 />
-                <PeopleSelector
-                  isMultiSelect={true}
-                  displayType="aside"
-                  isOpen={showSelector}
-                  onSelect={this.onSelect}
-                  groupsCaption={groupsCaption}
-                  onCancel={this.onCancelSelector}
-                />
               </div>
             )}
           </HeaderContainer>
@@ -275,6 +264,7 @@ class SectionHeaderContent extends React.Component {
 export default inject(({ auth, setup }) => {
   const { customNames } = auth.settingsStore;
   const { addUsers, removeAdmins } = setup.headerAction;
+  const { toggleSelector } = setup;
   const {
     selected,
     setSelected,
@@ -284,7 +274,7 @@ export default inject(({ auth, setup }) => {
     deselectUser,
     selectAll,
   } = setup.selectionStore;
-  const { admins } = setup.security.accessRight;
+  const { admins, selectorIsOpen } = setup.security.accessRight;
 
   return {
     addUsers,
@@ -298,5 +288,7 @@ export default inject(({ auth, setup }) => {
     isHeaderVisible,
     deselectUser,
     selectAll,
+    toggleSelector,
+    selectorIsOpen,
   };
 })(withRouter(withTranslation("Settings")(observer(SectionHeaderContent))));

web/ASC.Web.Client/src/components/pages/Settings/categories/security/admins.js

@@ -16,6 +16,7 @@ import SearchInput from "@appserver/components/search-input";
 import RequestLoader from "@appserver/components/request-loader";
 import Loader from "@appserver/components/loader";
 import EmptyScreenContainer from "@appserver/components/empty-screen-container";
+import PeopleSelector from "people/PeopleSelector";
 
 import { inject, observer } from "mobx-react";
 
@@ -157,7 +158,7 @@ const ToggleContentContainer = styled.div`
 
     .actionIconsWrapper {
       .fullAccessWrapper {
-        margin-right: 10px;
+        margin-right: 0;
       }
 
       .iconWrapper {
@@ -183,7 +184,6 @@ class PortalAdmins extends Component {
     super(props);
 
     this.state = {
-      showSelector: false,
       showFullAdminSelector: false,
       isLoading: false,
       showLoader: false,
@@ -292,6 +292,19 @@ class PortalAdmins extends Component {
     this.checkChanges();
   };
 
+  onCancelSelector = () => {
+    const { toggleSelector } = this.props;
+
+    toggleSelector(false);
+  };
+
+  onSelect = (items) => {
+    const { toggleSelector } = this.props;
+
+    toggleSelector(false);
+    this.addUsers(items);
+  };
+
   findAdminById = (admin) => {
     if (admin.id === this.id) return true;
   };
@@ -423,6 +436,8 @@ class PortalAdmins extends Component {
     });
   };
 
+  onRowClick = () => {};
+
   saveChanges = async (
     changedAdmins,
     deletedAdmins,
@@ -652,7 +667,13 @@ class PortalAdmins extends Component {
   };
 
   render() {
-    const { t, admins, isUserSelected } = this.props;
+    const {
+      t,
+      admins,
+      isUserSelected,
+      selectorIsOpen,
+      groupsCaption,
+    } = this.props;
     const {
       isLoading,
       showLoader,
@@ -690,6 +711,14 @@ class PortalAdmins extends Component {
                 onClearSearch={this.onSearchChange}
                 value={searchValue}
               />
+              <PeopleSelector
+                isMultiSelect={true}
+                displayType="aside"
+                isOpen={!!selectorIsOpen}
+                onSelect={this.onSelect}
+                groupsCaption={groupsCaption}
+                onCancel={this.onCancelSelector}
+              />
 
               {filteredAdmins.length > 0 ? (
                 <>
@@ -725,11 +754,12 @@ class PortalAdmins extends Component {
                             checkbox={true}
                             checked={checked}
                             contextButtonSpacerWidth={"0px"}
+                            onRowClick={this.onRowClick}
                           >
                             <>
                               <div className="userData">
                                 <div className="nameAndStatus">
-                                  <Link
+                                  {/*<Link
                                     isTextOverflow={true}
                                     type="page"
                                     title={user.displayName}
@@ -739,7 +769,14 @@ class PortalAdmins extends Component {
                                     href={user.profileUrl}
                                   >
                                     {user.displayName}
-                                  </Link>
+                                  </Link>*/}
+                                  <Text
+                                    isBold={true}
+                                    fontSize="15px"
+                                    color={nameColor}
+                                  >
+                                    {user.displayName}
+                                  </Text>
                                 </div>
                               </div>
                               <div className="actionIconsWrapper">
@@ -843,9 +880,9 @@ PortalAdmins.propTypes = {
 };
 
 export default inject(({ auth, setup }) => {
-  const { admins, owner, filter } = setup.security.accessRight;
+  const { admins, owner, filter, selectorIsOpen } = setup.security.accessRight;
   const { user: me } = auth.userStore;
-  const { setAddUsers, setRemoveAdmins } = setup;
+  const { setAddUsers, setRemoveAdmins, toggleSelector } = setup;
   const {
     selectUser,
     deselectUser,
@@ -871,5 +908,7 @@ export default inject(({ auth, setup }) => {
     selection,
     isUserSelected,
     setSelected,
+    selectorIsOpen,
+    toggleSelector,
   };
 })(withTranslation("Settings")(withRouter(observer(PortalAdmins))));

web/ASC.Web.Client/src/store/SettingsSetupStore.js

@@ -20,6 +20,7 @@ class SettingsSetupStore {
       admins: [],
       owner: {},
       filter: Filter.getDefault(),
+      selectorIsOpen: false,
     },
   };
 
@@ -82,6 +83,10 @@ class SettingsSetupStore {
     this.headerAction.removeAdmins = func;
   };
 
+  toggleSelector = (isOpen) => {
+    this.security.accessRight.selectorIsOpen = isOpen;
+  };
+
   setSelectedConsumer = (selectedConsumerName) => {
     this.integration.selectedConsumer =
       this.integration.consumers.find((c) => c.name === selectedConsumerName) ||