From 84f6fba00881ab26f6991fe1214431fa354080c6 Mon Sep 17 00:00:00 2001
From: Alexey Safronov <Alexey.Safronov@onlyoffice.com>
Date: Sun, 15 Dec 2019 21:39:34 +0300
Subject: [PATCH] web: client: Applied changes in AdvancedSelector on
 AdminsSettings page

---
 .../security/sub-components/admins.js         | 92 ++++++++-----------
 .../src/store/settings/actions.js             | 43 +++------
 2 files changed, 50 insertions(+), 85 deletions(-)

diff --git a/web/ASC.Web.Client/src/components/pages/Settings/categories/security/sub-components/admins.js b/web/ASC.Web.Client/src/components/pages/Settings/categories/security/sub-components/admins.js
index 46da5fb723..263d83e0b2 100644
--- a/web/ASC.Web.Client/src/components/pages/Settings/categories/security/sub-components/admins.js
+++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/security/sub-components/admins.js
@@ -48,11 +48,12 @@ const ToggleContentContainer = styled.div`
     margin-left: 120px;
   }
 
-  .button_style {
+  .people-admin_container {
     margin-right: 16px;
+    position: relative;
   }
 
-  .advanced-selector {
+  .full-admin_container {
     position: relative;
   }
 
@@ -74,8 +75,6 @@ class PureAdminsSettings extends Component {
     this.state = {
       showSelector: false,
       showFullAdminSelector: false,
-      allOptions: [],
-      options: [],
       isLoading: false,
       showLoader: true,
       selectedOptions: []
@@ -83,9 +82,9 @@ class PureAdminsSettings extends Component {
   }
 
   componentDidMount() {
-    const { admins, options, fetchPeople } = this.props;
+    const { admins, fetchPeople } = this.props;
 
-    if (isEmpty(admins, true) || isEmpty(options, true)) {
+    if (isEmpty(admins, true)) {
       const newFilter = this.onAdminsFilter();
       fetchPeople(newFilter)
         .catch(error => {
@@ -93,8 +92,7 @@ class PureAdminsSettings extends Component {
         })
         .finally(() =>
           this.setState({
-            showLoader: false,
-            allOptions: this.props.options
+            showLoader: false
           })
         );
     } else {
@@ -118,17 +116,20 @@ class PureAdminsSettings extends Component {
 
   onShowGroupSelector = () => {
     this.setState({
-      showSelector: !this.state.showSelector,
-      options: this.props.options,
-      selectedOptions: []
+      showSelector: !this.state.showSelector
     });
   };
 
+  onCancelSelector = () => {
+    this.setState({
+      showSelector: false,
+      showFullAdminSelector: false
+    });
+  }
+
   onShowFullAdminGroupSelector = () => {
     this.setState({
-      showFullAdminSelector: !this.state.showFullAdminSelector,
-      options: this.props.options,
-      selectedOptions: []
+      showFullAdminSelector: !this.state.showFullAdminSelector
     });
   };
 
@@ -140,7 +141,6 @@ class PureAdminsSettings extends Component {
       productId
     );
     this.onShowGroupSelector();
-    this.setState({ selectedOptions: selected });
   };
 
   onSelectFullAdmin = selected => {
@@ -150,15 +150,6 @@ class PureAdminsSettings extends Component {
       "00000000-0000-0000-0000-000000000000"
     );
     this.onShowFullAdminGroupSelector();
-    this.setState({ selectedOptions: selected });
-  };
-
-  onSearchUsers = template => {
-    const options = this.filterUserSelectorOptions(
-      this.state.allOptions,
-      template
-    );
-    this.setState({ options: options });
   };
 
   onChangePage = pageItem => {
@@ -264,9 +255,6 @@ class PureAdminsSettings extends Component {
       .finally(() => this.onLoading(false));
   };
 
-  filterUserSelectorOptions = (options, template) =>
-    options.filter(option => option.label.indexOf(template) > -1);
-
   pageItems = () => {
     const { t, filter } = this.props;
     if (filter.total < filter.pageCount) return [];
@@ -325,8 +313,6 @@ class PureAdminsSettings extends Component {
     const { t, admins, filter } = this.props;
     const {
       showSelector,
-      options,
-      selectedOptions,
       isLoading,
       showFullAdminSelector,
       showLoader
@@ -355,36 +341,36 @@ class PureAdminsSettings extends Component {
 
             <ToggleContentContainer>
               <div className="buttons_container">
-                <Button
-                  className="button_style"
-                  size="medium"
-                  primary={true}
-                  label="Set people admin"
-                  isDisabled={isLoading}
-                  onClick={this.onShowGroupSelector}
-                />
-                <div style={{ right: 180 }} className="advanced-selector">
+                <div className="people-admin_container">
+                  <Button
+                    size="medium"
+                    primary={true}
+                    label="Set people admin"
+                    isDisabled={isLoading}
+                    onClick={this.onShowGroupSelector}
+                  />
                   <PeopleSelector 
+                    id="people-admin-selector"
                     isOpen={showSelector}
                     isMultiSelect={true}
                     onSelect={this.onSelect}
-                    onCancel={this.onShowGroupSelector}
+                    onCancel={this.onCancelSelector}
                   />
                 </div>
-
-                <Button
-                  size="medium"
-                  primary={true}
-                  label="Set portal admin"
-                  isDisabled={isLoading}
-                  onClick={this.onShowFullAdminGroupSelector}
-                />
-                <div style={{ right: 160 }} className="advanced-selector">
+                <div className="full-admin_container">
+                  <Button
+                    size="medium"
+                    primary={true}
+                    label="Set portal admin"
+                    isDisabled={isLoading}
+                    onClick={this.onShowFullAdminGroupSelector}
+                  />
                   <PeopleSelector 
+                    id="full-admin-selector"
                     isOpen={showFullAdminSelector}
                     isMultiSelect={true}
                     onSelect={this.onSelectFullAdmin}
-                    onCancel={this.onShowFullAdminGroupSelector}
+                    onCancel={this.onCancelSelector}
                   />
                 </div>
               </div>
@@ -529,7 +515,6 @@ const AdminsSettings = props => {
 function mapStateToProps(state) {
   const {
     admins,
-    options,
     owner,
     filter
   } = state.settings.security.accessRight;
@@ -538,7 +523,6 @@ function mapStateToProps(state) {
     admins,
     productId: state.auth.modules[0].id,
     owner,
-    options,
     filter
   };
 }
@@ -546,15 +530,13 @@ function mapStateToProps(state) {
 AdminsSettings.defaultProps = {
   admins: [],
   productId: "",
-  owner: {},
-  options: []
+  owner: {}
 };
 
 AdminsSettings.propTypes = {
   admins: PropTypes.arrayOf(PropTypes.object),
   productId: PropTypes.string,
-  owner: PropTypes.object,
-  options: PropTypes.arrayOf(PropTypes.object)
+  owner: PropTypes.object
 };
 
 export default connect(mapStateToProps, {
diff --git a/web/ASC.Web.Client/src/store/settings/actions.js b/web/ASC.Web.Client/src/store/settings/actions.js
index 600fdacaad..11acf43379 100644
--- a/web/ASC.Web.Client/src/store/settings/actions.js
+++ b/web/ASC.Web.Client/src/store/settings/actions.js
@@ -1,6 +1,6 @@
 import { api, store } from "asc-web-common";
 import axios from "axios";
-import { getSelectorOptions, getUserOptions } from "./selectors";
+import { getSelectorOptions } from "./selectors";
 const { Filter } = api;
 const { setPortalLanguageAndTime, setTimezones, setGreetingSettings } = store.auth.actions;
 
@@ -81,20 +81,12 @@ export function changeAdmins(userIds, productId, isAdmin, filter) {
           api.people.changeProductAdmin(userId, productId, isAdmin)
         )
       )
-      .then(() =>
-        axios.all([api.people.getUserList(filterData), api.people.getListAdmins(filterData)])
-      )
-      .then(
-        axios.spread((users, admins) => {
-          const options = getUserOptions(users.items, admins.items);
-          const newOptions = getSelectorOptions(options);
-          filterData.total = admins.total;
-
-          dispatch(setOptions(newOptions));
-          dispatch(setAdmins(admins.items));
-          dispatch(setFilter(filterData));
-        })
-      );
+      .then(() => api.people.getListAdmins(filterData))
+      .then(admins => {
+        filterData.total = admins.total;
+        dispatch(setAdmins(admins.items));
+        dispatch(setFilter(filterData));
+      });
   };
 }
 
@@ -111,21 +103,12 @@ export function fetchPeople(filter) {
   }
 
   return dispatch => {
-    return axios
-      .all([api.people.getUserList(filterData), api.people.getListAdmins(filterData)])
-      .then(
-        axios.spread((users, admins) => {
-          const options = getUserOptions(users.items, admins.items);
-          const newOptions = getSelectorOptions(options);
-        const usersOptions = getSelectorOptions(users.items);
-          filterData.total = admins.total;
-
-        dispatch(setUsers(usersOptions));
-          dispatch(setAdmins(admins.items));
-        dispatch(setOptions(newOptions));
-          dispatch(setFilter(filterData));
-        })
-      );
+    return api.people.getListAdmins(filterData)
+      .then(admins => {
+        filterData.total = admins.total;
+        dispatch(setAdmins(admins.items));
+        dispatch(setFilter(filterData));
+      });
   };
 }