web: People: Moved converters to selectors
This commit is contained in:
parent
a52222f81b
commit
dced6d991b
@ -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)
|
||||
};
|
||||
}
|
||||
|
||||
|
@ -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,
|
||||
|
@ -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)
|
||||
};
|
||||
};
|
||||
|
||||
|
@ -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)));
|
||||
};
|
||||
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
}
|
Loading…
Reference in New Issue
Block a user