web: People: Moved converters to selectors

products/ASC.People/Client/src/components/Article/Body/index.js

@@ -5,6 +5,7 @@ import {
   TreeNode,
   Icons
 } from "asc-web-components";
+import { getTreeGroups } from '../../../store/people/selectors';
 
 const PeopleTreeMenu = props => {
   const { data } = props;
@@ -169,31 +170,9 @@ const PeopleTreeMenu = props => {
 
 const ArticleBodyContent = ({ treeData }) => <PeopleTreeMenu data={treeData} />;
 
-const convertGroups = (groups) => {
-  const children = groups.map(g => {
-    return {
-      key: g.id, title: g.name, root: false
-    };
-  }) || [];
-
-  const treeData = [
-    {
-      key: "0-0",
-      title: "Departments",
-      root: true,
-      children: children
-    }
-  ];
-
-  return treeData;
-};
-
 function mapStateToProps(state) {
-  console.log("ArticleBodyContent mapStateToProps state=", state);
-  const treeData = convertGroups(state.people.groups);
-  console.log("ArticleBodyContent mapStateToProps treeData=", treeData);
   return {
-    treeData: treeData
+    treeData: getTreeGroups(state.people.groups)
   };
 }
 

products/ASC.People/Client/src/components/Article/MainButton/index.js

@@ -8,42 +8,46 @@ import {
     DropDownItem,
 } from "asc-web-components";
 
-const ArticleMainButtonContent = ({ isAdmin, history }) => (
-    isAdmin ?
-        <MainButton
-            isDisabled={false}
-            isDropdown={true}
-            text={"Actions"}
-        >
-            <DropDownItem
-                label="New employee"
-                onClick={() => history.push(`${config.homepage}/create/user`) }
-            />
-            <DropDownItem
-                label="New guest"
-                onClick={() => history.push(`${config.homepage}/create/guest`)}
-            />
-            <DropDownItem
-                label="New department"
-                onClick={() => console.log("New department clicked")}
-            />
-            <DropDownItem isSeparator />
-            <DropDownItem
-                label="Invitation link"
-                onClick={() => console.log("Invitation link clicked")}
-            />
-            <DropDownItem
-                label="Invite again"
-                onClick={() => console.log("Invite again clicked")}
-            />
-            <DropDownItem
-                label="Import people"
-                onClick={() => console.log("Import people clicked")}
-            />
-        </MainButton>
-        :
-        <></>
-);
+
+const ArticleMainButtonContent = ({ isAdmin, history }) => {
+    console.log("People ArticleMainButtonContent");
+    return (
+        isAdmin ?
+            <MainButton
+                isDisabled={false}
+                isDropdown={true}
+                text={"Actions"}
+            >
+                <DropDownItem
+                    label="New employee"
+                    onClick={() => history.push(`${config.homepage}/create/user`)}
+                />
+                <DropDownItem
+                    label="New guest"
+                    onClick={() => history.push(`${config.homepage}/create/guest`)}
+                />
+                <DropDownItem
+                    label="New department"
+                    onClick={() => console.log("New department clicked")}
+                />
+                <DropDownItem isSeparator />
+                <DropDownItem
+                    label="Invitation link"
+                    onClick={() => console.log("Invitation link clicked")}
+                />
+                <DropDownItem
+                    label="Invite again"
+                    onClick={() => console.log("Invite again clicked")}
+                />
+                <DropDownItem
+                    label="Import people"
+                    onClick={() => console.log("Import people clicked")}
+                />
+            </MainButton>
+            :
+            <></>
+    )
+};
 
 ArticleMainButtonContent.propTypes = {
     isAdmin: PropTypes.bool.isRequired,

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

@@ -3,156 +3,19 @@ import { withRouter } from "react-router";
 import { connect } from "react-redux";
 import { ContentRow } from "asc-web-components";
 import UserContent from "./userContent";
-import config from "../../../../../../package.json";
+//import config from "../../../../../../package.json";
 import { selectUser, deselectUser, setSelection } from "../../../../../store/people/actions";
-import { getSelectedUser } from '../../../../../store/people/selectors';
-
-const getUserDepartment = user => {
-  return {
-    title: user.department,
-    action: () => console.log("Department action")
-  };
-};
-
-const getUserPhone = user => {
-  return {
-    title: user.mobilePhone,
-    action: () => console.log("Phone action")
-  };
-};
-
-const getUserEmail = user => {
-  return {
-    title: user.email,
-    action: () => console.log("Email action")
-  };
-};
-
-const getUserRole = user => {
-  if (user.isOwner) return "owner";
-  else if (user.isAdmin) return "admin";
-  else if (user.isVisitor) return "guest";
-  else return "user";
-};
-
-const getUserStatus = user => {
-  if (user.status === 1 && user.activationStatus === 1) return "normal";
-  else if (user.status === 1 && user.activationStatus === 2) return "pending";
-  else if (user.status === 2) return "disabled";
-  else return "normal";
-};
-
-const getUserContextOptions = (user, isAdmin, history) => {
-  return [
-    {
-      key: "key1",
-      label: "Send e-mail",
-      onClick: () => console.log("Context action: Send e-mail")
-    },
-    {
-      key: "key2",
-      label: "Send message",
-      onClick: () => console.log("Context action: Send message")
-    },
-    { key: "key3", isSeparator: true },
-    {
-      key: "key4",
-      label: "Edit",
-      onClick: () => history.push(`${config.homepage}/edit/${user.userName}`)
-    },
-    {
-      key: "key5",
-      label: "Change password",
-      onClick: () => console.log("Context action: Change password")
-    },
-    {
-      key: "key6",
-      label: "Change e-mail",
-      onClick: () => console.log("Context action: Change e-mail")
-    },
-    {
-      key: "key7",
-      label: "Disable",
-      onClick: () => console.log("Context action: Disable")
-    }
-  ];
-};
-
-const getIsHead = user => {
-  return false;
-};
-
-class SectionBodyContent extends React.Component {
-  getChecked = (status, selected) => {
-    let checked;
-    switch (selected) {
-      case "all":
-        checked = true;
-        break;
-      case "active":
-        checked = status === "normal";
-        break;
-      case "disabled":
-        checked = status === "disabled";
-        break;
-      case "invited":
-        checked = status === "pending";
-        break;
-      default:
-        checked = false;
-    }
-
-    return checked;
-  };
-
-  getPeople = () => {
-    return this.props.users.map(user => {
-      const status = getUserStatus(user);
-      return {
-        user: user,
-        status: status,
-        role: getUserRole(user),
-        contextOptions: getUserContextOptions(
-          user,
-          this.props.isAdmin,
-          this.props.history
-        ),
-        department: getUserDepartment(user),
-        phone: getUserPhone(user),
-        email: getUserEmail(user),
-        isHead: getIsHead(user)
-      };
-    });
-  };
-
-  componentDidUpdate(prevProps) {
-    /*console.log(`SectionBodyContent componentDidUpdate
-    this.props.selected=${this.props.selected}
-    prevProps.selected=${prevProps.selected}`);*/
-
-    if (this.props.selected !== prevProps.selected) {
-      const { setSelection } = this.props;
-
-      let newSelection = [];
-      this.props.users.forEach(user => {
-        const checked = this.getChecked(getUserStatus(user), this.props.selected);
-
-        if(checked)
-          newSelection.push(user);
-      });
-
-      setSelection(newSelection);
-    }
-  }
+import { isSelected, getPeople } from '../../../../../store/people/selectors';
+import { isAdmin } from '../../../../../store/auth/selectors';
 
+class SectionBodyContent extends React.PureComponent {
   render() {
     console.log("Home SectionBodyContent render()");
-    const { isAdmin, selection, selectUser, deselectUser } = this.props;
-    // console.log("SectionBodyContent props ", this.props);
+    const { users, isAdmin, selection, selectUser, deselectUser, history} = this.props;
 
     return (
       <>
-        {this.getPeople().map(item => {
+        {getPeople(users, isAdmin, history).map(item => {
           const user = item.user;
           return isAdmin ? (
             <ContentRow
@@ -163,11 +26,9 @@ class SectionBodyContent extends React.Component {
               avatarSource={user.avatar}
               avatarName={user.userName}
               contextOptions={item.contextOptions}
-              checked={getSelectedUser(selection, user.id)}
+              checked={isSelected(selection, user.id)}
               onSelect={(checked, data) => {
                 console.log("ContentRow onSelect", checked, data);
-                //this.setState(prevState => ({ checkedItems: prevState.checkedItems.set(data.id, checked) }));
-                //onChange && onChange(checked, data);
                 if (checked) {
                   selectUser(user);
                 }
@@ -215,7 +76,7 @@ const mapStateToProps = state => {
     selection: state.people.selection,
     selected: state.people.selected,
     users: state.people.users,
-    isAdmin: state.auth.user.isAdmin || state.auth.user.isOwner
+    isAdmin: isAdmin(state.auth)
   };
 };
 

products/ASC.People/Client/src/store/auth/actions.js

@@ -1,6 +1,7 @@
 import * as api from '../../utils/api';
 import { setGroups, setUsers } from '../people/actions';
 import setAuthorizationToken from '../../utils/setAuthorizationToken';
+import { getPeople } from '../people/actions';
 
 export const LOGIN_POST = 'LOGIN_POST';
 export const SET_CURRENT_USER = 'SET_CURRENT_USER';
@@ -42,10 +43,7 @@ export function getUserInfo(dispatch) {
         .then((res) => dispatch(setModules(res.data.response)))
         .then(() => api.getGroupList())
         .then((res) => dispatch(setGroups(res.data.response)))
-        .then(() => api.getUserList())
-        .then((res) => { 
-            console.log("api.getUserList", res);
-            return dispatch(setUsers(res.data.response)); })
+        .then(() => dispatch(getPeople()))
         .then(() => dispatch(setIsLoaded(true)));
 };
 

products/ASC.People/Client/src/store/people/reducers.js

@@ -6,7 +6,7 @@ import {
     DESELECT_USER,
     SET_SELECTED
 } from "./actions";
-import { isSelected, skipUser } from './selectors';
+import { isSelected, skipUser, getUsersBySelected } from './selectors';
 
 const initialState = {
     users: [],
@@ -43,7 +43,8 @@ const peopleReducer = (state = initialState, action) => {
             } else return state;
         case SET_SELECTED:
             return Object.assign({}, state, {
-                selected: action.selected
+                selected: action.selected,
+                selection: getUsersBySelected(state.users, action.selected)
             });
         default:
             return state;

products/ASC.People/Client/src/store/people/selectors.js

@@ -1,4 +1,5 @@
 import _ from "lodash";
+import config from '../../../package.json';
 
 export function getSelectedUser(selection, userId) {
     return _.find(selection, function (obj) {
@@ -20,4 +21,150 @@ export function skipUser(selection, userId) {
     return _.filter(selection, function (obj) {
         return obj.id !== userId;
     });
+};
+
+export function getTreeGroups(groups) {
+    const treeData = [
+        {
+            key: "0-0",
+            title: "Departments",
+            root: true,
+            children: groups.map(g => {
+                return {
+                    key: g.id, title: g.name, root: false
+                };
+            }) || []
+        }
+    ];
+
+    return treeData;
+};
+
+const getUserDepartment = user => {
+    return {
+        title: user.department,
+        action: () => console.log("Department action")
+    };
+};
+
+const getUserPhone = user => {
+    return {
+        title: user.mobilePhone,
+        action: () => console.log("Phone action")
+    };
+};
+
+const getUserEmail = user => {
+    return {
+        title: user.email,
+        action: () => console.log("Email action")
+    };
+};
+
+const getUserRole = user => {
+    if (user.isOwner) return "owner";
+    else if (user.isAdmin) return "admin";
+    else if (user.isVisitor) return "guest";
+    else return "user";
+};
+
+const getUserStatus = user => {
+    if (user.status === 1 && user.activationStatus === 1) return "normal";
+    else if (user.status === 1 && user.activationStatus === 2) return "pending";
+    else if (user.status === 2) return "disabled";
+    else return "normal";
+};
+
+const getUserContextOptions = (user, isAdmin, history) => {
+    return [
+        {
+            key: "key1",
+            label: "Send e-mail",
+            onClick: () => console.log("Context action: Send e-mail")
+        },
+        {
+            key: "key2",
+            label: "Send message",
+            onClick: () => console.log("Context action: Send message")
+        },
+        { key: "key3", isSeparator: true },
+        {
+            key: "key4",
+            label: "Edit",
+            onClick: () => history.push(`${config.homepage}/edit/${user.userName}`)
+        },
+        {
+            key: "key5",
+            label: "Change password",
+            onClick: () => console.log("Context action: Change password")
+        },
+        {
+            key: "key6",
+            label: "Change e-mail",
+            onClick: () => console.log("Context action: Change e-mail")
+        },
+        {
+            key: "key7",
+            label: "Disable",
+            onClick: () => console.log("Context action: Disable")
+        }
+    ];
+};
+
+const getIsHead = user => {
+    return false;
+};
+
+export function getPeople(users, isAdmin, history) {
+    return users.map(user => {
+        const status = getUserStatus(user);
+        return {
+            user: user,
+            status: status,
+            role: getUserRole(user),
+            contextOptions: getUserContextOptions(
+                user,
+                isAdmin,
+                history
+            ),
+            department: getUserDepartment(user),
+            phone: getUserPhone(user),
+            email: getUserEmail(user),
+            isHead: getIsHead(user)
+        };
+    });
+};
+
+const getChecked = (status, selected) => {
+    let checked;
+    switch (selected) {
+        case "all":
+            checked = true;
+            break;
+        case "active":
+            checked = status === "normal";
+            break;
+        case "disabled":
+            checked = status === "disabled";
+            break;
+        case "invited":
+            checked = status === "pending";
+            break;
+        default:
+            checked = false;
+    }
+
+    return checked;
+};
+
+export function getUsersBySelected(users, selected) {
+    let newSelection = [];
+    users.forEach(user => {
+        const checked = getChecked(getUserStatus(user), selected);
+
+        if (checked)
+            newSelection.push(user);
+    });
+
+    return newSelection;
 }