web: People: Added loading groups and users info into store and on the Home page
This commit is contained in:
parent
94bbcac664
commit
a97c057108
@ -2,4 +2,6 @@ export const LOGIN_POST = 'LOGIN_POST';
|
||||
export const SET_CURRENT_USER = 'SET_CURRENT_USER';
|
||||
export const SET_MODULES = 'SET_MODULES';
|
||||
export const SET_IS_LOADED = 'SET_IS_LOADED';
|
||||
export const LOGOUT = 'LOGOUT';
|
||||
export const LOGOUT = 'LOGOUT';
|
||||
export const SET_GROUPS = 'SET_GROUPS';
|
||||
export const SET_USERS = 'SET_USERS';
|
@ -1,5 +1,6 @@
|
||||
import * as api from '../utils/api';
|
||||
import { SET_CURRENT_USER, SET_MODULES, SET_IS_LOADED, LOGOUT } from './actionTypes';
|
||||
import { setGroups, setUsers } from './peopleActions';
|
||||
import setAuthorizationToken from '../utils/setAuthorizationToken';
|
||||
|
||||
export function setCurrentUser(user) {
|
||||
@ -35,6 +36,10 @@ export function getUserInfo(dispatch) {
|
||||
.then((res) => dispatch(setCurrentUser(res.data.response)))
|
||||
.then(api.getModulesList)
|
||||
.then((res) => dispatch(setModules(res.data.response)))
|
||||
.then(api.getGroupList)
|
||||
.then((res) => dispatch(setGroups(res.data.response)))
|
||||
.then(api.getUserList)
|
||||
.then((res) => dispatch(setUsers(res.data.response)))
|
||||
.then(() => dispatch(setIsLoaded(true)));
|
||||
};
|
||||
|
||||
|
15
products/ASC.People/Client/src/actions/peopleActions.js
Normal file
15
products/ASC.People/Client/src/actions/peopleActions.js
Normal file
@ -0,0 +1,15 @@
|
||||
import { SET_GROUPS, SET_USERS } from './actionTypes';
|
||||
|
||||
export function setUsers(users) {
|
||||
return {
|
||||
type: SET_USERS,
|
||||
users
|
||||
};
|
||||
};
|
||||
|
||||
export function setGroups(groups) {
|
||||
return {
|
||||
type: SET_GROUPS,
|
||||
groups
|
||||
};
|
||||
};
|
@ -1,224 +1,238 @@
|
||||
import React, {useState} from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import {
|
||||
MainButton,
|
||||
DropDownItem,
|
||||
TreeMenu,
|
||||
TreeNode,
|
||||
Icons
|
||||
} from "asc-web-components";
|
||||
MainButton,
|
||||
DropDownItem,
|
||||
TreeMenu,
|
||||
TreeNode,
|
||||
Icons
|
||||
} from "asc-web-components";
|
||||
|
||||
const treeData = [
|
||||
{
|
||||
key: "0-0",
|
||||
title: "Departments",
|
||||
root: true,
|
||||
children: [
|
||||
{ key: "0-0-0", title: "Development", root: false },
|
||||
{ key: "0-0-1", title: "Direction", root: false },
|
||||
{ key: "0-0-2", title: "Marketing", root: false },
|
||||
{ key: "0-0-3", title: "Mobile", root: false },
|
||||
{ key: "0-0-4", title: "Support", root: false },
|
||||
{ key: "0-0-5", title: "Web", root: false }
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
const PeopleTreeMenu = props => {
|
||||
const { data } = props;
|
||||
|
||||
const [gData, setGData] = useState(data);
|
||||
const [autoExpandParent, setAutoExpandParent] = useState(true);
|
||||
|
||||
const [expandedKeys, setExpandedKeys] = useState([
|
||||
"0-0-key",
|
||||
"0-0-0-key",
|
||||
"0-0-0-0-key"
|
||||
]);
|
||||
|
||||
const onDragStart = info => {
|
||||
info.event.persist();
|
||||
};
|
||||
|
||||
const onDragEnter = info => {
|
||||
setExpandedKeys(info.expandedKeys);
|
||||
};
|
||||
|
||||
const onDrop = info => {
|
||||
info.event.persist();
|
||||
const dropKey = info.node.props.eventKey;
|
||||
const dragKey = info.dragNode.props.eventKey;
|
||||
const dropPos = info.node.props.pos.split("-");
|
||||
const dropPosition =
|
||||
info.dropPosition - Number(dropPos[dropPos.length - 1]);
|
||||
|
||||
const getItems = (data, key, callback) => {
|
||||
data.forEach((item, index, arr) => {
|
||||
if (item.key === key) {
|
||||
callback(item, index, arr);
|
||||
return;
|
||||
}
|
||||
if (item.children) {
|
||||
getItems(item.children, key, callback);
|
||||
}
|
||||
});
|
||||
};
|
||||
const data = [...gData];
|
||||
|
||||
let dragObj;
|
||||
getItems(data, dragKey, (item, index, arr) => {
|
||||
arr.splice(index, 1);
|
||||
dragObj = item;
|
||||
|
||||
const PeopleTreeMenu = props => {
|
||||
const { data } = props;
|
||||
|
||||
const [gData, setGData] = useState(data);
|
||||
const [autoExpandParent, setAutoExpandParent] = useState(true);
|
||||
|
||||
const [expandedKeys, setExpandedKeys] = useState([
|
||||
"0-0-key",
|
||||
"0-0-0-key",
|
||||
"0-0-0-0-key"
|
||||
]);
|
||||
|
||||
const onDragStart = info => {
|
||||
info.event.persist();
|
||||
};
|
||||
|
||||
const onDragEnter = info => {
|
||||
setExpandedKeys(info.expandedKeys);
|
||||
};
|
||||
|
||||
const onDrop = info => {
|
||||
info.event.persist();
|
||||
const dropKey = info.node.props.eventKey;
|
||||
const dragKey = info.dragNode.props.eventKey;
|
||||
const dropPos = info.node.props.pos.split("-");
|
||||
const dropPosition =
|
||||
info.dropPosition - Number(dropPos[dropPos.length - 1]);
|
||||
|
||||
const getItems = (data, key, callback) => {
|
||||
data.forEach((item, index, arr) => {
|
||||
if (item.key === key) {
|
||||
callback(item, index, arr);
|
||||
return;
|
||||
}
|
||||
if (item.children) {
|
||||
getItems(item.children, key, callback);
|
||||
}
|
||||
});
|
||||
|
||||
if (!info.dropToGap) {
|
||||
getItems(data, dropKey, item => {
|
||||
item.children = item.children || [];
|
||||
item.children.push(dragObj);
|
||||
});
|
||||
} else if (
|
||||
(info.node.props.children || []).length > 0 &&
|
||||
info.node.props.expanded &&
|
||||
dropPosition === 1
|
||||
) {
|
||||
getItems(data, dropKey, item => {
|
||||
item.children = item.children || [];
|
||||
item.children.unshift(dragObj);
|
||||
});
|
||||
};
|
||||
const data = [...gData];
|
||||
|
||||
let dragObj;
|
||||
getItems(data, dragKey, (item, index, arr) => {
|
||||
arr.splice(index, 1);
|
||||
dragObj = item;
|
||||
});
|
||||
|
||||
if (!info.dropToGap) {
|
||||
getItems(data, dropKey, item => {
|
||||
item.children = item.children || [];
|
||||
item.children.push(dragObj);
|
||||
});
|
||||
} else if (
|
||||
(info.node.props.children || []).length > 0 &&
|
||||
info.node.props.expanded &&
|
||||
dropPosition === 1
|
||||
) {
|
||||
getItems(data, dropKey, item => {
|
||||
item.children = item.children || [];
|
||||
item.children.unshift(dragObj);
|
||||
});
|
||||
} else {
|
||||
let ar;
|
||||
let i;
|
||||
getItems(data, dropKey, (item, index, arr) => {
|
||||
ar = arr;
|
||||
i = index;
|
||||
});
|
||||
if (dropPosition === -1) {
|
||||
ar.splice(i, 0, dragObj);
|
||||
} else {
|
||||
let ar;
|
||||
let i;
|
||||
getItems(data, dropKey, (item, index, arr) => {
|
||||
ar = arr;
|
||||
i = index;
|
||||
});
|
||||
if (dropPosition === -1) {
|
||||
ar.splice(i, 0, dragObj);
|
||||
} else {
|
||||
ar.splice(i + 1, 0, dragObj);
|
||||
}
|
||||
ar.splice(i + 1, 0, dragObj);
|
||||
}
|
||||
setGData(data);
|
||||
};
|
||||
const onExpand = expandedKeys => {
|
||||
setExpandedKeys(expandedKeys);
|
||||
setAutoExpandParent(false);
|
||||
};
|
||||
|
||||
const getItems = data => {
|
||||
return data.map(item => {
|
||||
if (item.children && item.children.length) {
|
||||
return (
|
||||
<TreeNode
|
||||
title={item.title}
|
||||
key={item.key}
|
||||
icon={
|
||||
item.root ? (
|
||||
<Icons.CatalogDepartmentsIcon
|
||||
size="scale"
|
||||
isfill={true}
|
||||
color="dimgray"
|
||||
/>
|
||||
) : (
|
||||
""
|
||||
)
|
||||
}
|
||||
>
|
||||
{getItems(item.children)}
|
||||
</TreeNode>
|
||||
);
|
||||
}
|
||||
}
|
||||
setGData(data);
|
||||
};
|
||||
const onExpand = expandedKeys => {
|
||||
setExpandedKeys(expandedKeys);
|
||||
setAutoExpandParent(false);
|
||||
};
|
||||
|
||||
const getItems = data => {
|
||||
return data.map(item => {
|
||||
if (item.children && item.children.length) {
|
||||
return (
|
||||
<TreeNode
|
||||
key={item.key}
|
||||
title={item.title}
|
||||
key={item.key}
|
||||
icon={
|
||||
!item.root ? (
|
||||
<Icons.CatalogFolderIcon
|
||||
item.root ? (
|
||||
<Icons.CatalogDepartmentsIcon
|
||||
size="scale"
|
||||
isfill={true}
|
||||
color="dimgray"
|
||||
/>
|
||||
) : (
|
||||
""
|
||||
)
|
||||
}
|
||||
>
|
||||
{getItems(item.children)}
|
||||
</TreeNode>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<TreeNode
|
||||
key={item.key}
|
||||
title={item.title}
|
||||
icon={
|
||||
!item.root ? (
|
||||
<Icons.CatalogFolderIcon
|
||||
size="scale"
|
||||
isfill={true}
|
||||
color="dimgray"
|
||||
/>
|
||||
) : (
|
||||
""
|
||||
)
|
||||
}
|
||||
/>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
const switcherIcon = obj => {
|
||||
if (obj.isLeaf) {
|
||||
return null;
|
||||
}
|
||||
if (obj.expanded) {
|
||||
return (
|
||||
<Icons.ExpanderDownIcon size="scale" isfill={true} color="dimgray" />
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<Icons.ExpanderRightIcon size="scale" isfill={true} color="dimgray" />
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<MainButton
|
||||
style={{ marginBottom: 5 }}
|
||||
isDisabled={false}
|
||||
isDropdown={true}
|
||||
text={"Actions"}
|
||||
clickAction={() => console.log("MainButton clickAction")}
|
||||
>
|
||||
<DropDownItem
|
||||
label="New employee"
|
||||
onClick={() => console.log("New employee clicked")}
|
||||
/>
|
||||
<DropDownItem
|
||||
label="New quest"
|
||||
onClick={() => console.log("New quest clicked")}
|
||||
/>
|
||||
<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>
|
||||
<TreeMenu
|
||||
checkable={false}
|
||||
draggable={false}
|
||||
disabled={false}
|
||||
multiple={false}
|
||||
showIcon={true}
|
||||
defaultExpandAll={true}
|
||||
defaultExpandParent={true}
|
||||
onExpand={onExpand}
|
||||
autoExpandParent={autoExpandParent}
|
||||
expandedKeys={expandedKeys}
|
||||
onDragStart={info => onDragStart(info)}
|
||||
onDrop={info => onDrop(info)}
|
||||
onDragEnter={onDragEnter}
|
||||
switcherIcon={switcherIcon}
|
||||
>
|
||||
{getItems(gData)}
|
||||
</TreeMenu>
|
||||
</>
|
||||
);
|
||||
}
|
||||
/>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
const ArticleBodyContent = <PeopleTreeMenu data={treeData} />;
|
||||
const switcherIcon = obj => {
|
||||
if (obj.isLeaf) {
|
||||
return null;
|
||||
}
|
||||
if (obj.expanded) {
|
||||
return (
|
||||
<Icons.ExpanderDownIcon size="scale" isfill={true} color="dimgray" />
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<Icons.ExpanderRightIcon size="scale" isfill={true} color="dimgray" />
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default ArticleBodyContent;
|
||||
return (
|
||||
<>
|
||||
<MainButton
|
||||
style={{ marginBottom: 5 }}
|
||||
isDisabled={false}
|
||||
isDropdown={true}
|
||||
text={"Actions"}
|
||||
clickAction={() => console.log("MainButton clickAction")}
|
||||
>
|
||||
<DropDownItem
|
||||
label="New employee"
|
||||
onClick={() => console.log("New employee clicked")}
|
||||
/>
|
||||
<DropDownItem
|
||||
label="New quest"
|
||||
onClick={() => console.log("New quest clicked")}
|
||||
/>
|
||||
<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>
|
||||
<TreeMenu
|
||||
checkable={false}
|
||||
draggable={false}
|
||||
disabled={false}
|
||||
multiple={false}
|
||||
showIcon={true}
|
||||
defaultExpandAll={true}
|
||||
defaultExpandParent={true}
|
||||
onExpand={onExpand}
|
||||
autoExpandParent={autoExpandParent}
|
||||
expandedKeys={expandedKeys}
|
||||
onDragStart={info => onDragStart(info)}
|
||||
onDrop={info => onDrop(info)}
|
||||
onDragEnter={onDragEnter}
|
||||
switcherIcon={switcherIcon}
|
||||
>
|
||||
{getItems(gData)}
|
||||
</TreeMenu>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
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
|
||||
};
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps)(ArticleBodyContent);
|
@ -1,3 +1,6 @@
|
||||
const ArticleHeaderContent = "People";
|
||||
import React from 'react';
|
||||
import { Text } from 'asc-web-components';
|
||||
|
||||
const ArticleHeaderContent = () => <Text.MenuHeader>People</Text.MenuHeader>;
|
||||
|
||||
export default ArticleHeaderContent;
|
@ -1,131 +1,38 @@
|
||||
import React from 'react';
|
||||
import { Container, Row, Col } from "reactstrap";
|
||||
import {ContentRow, Link} from 'asc-web-components';
|
||||
|
||||
const UserContent = ({
|
||||
userName,
|
||||
department,
|
||||
phone,
|
||||
email,
|
||||
headDepartment,
|
||||
status
|
||||
}) => (
|
||||
<Container fluid={true}>
|
||||
<Row className="justify-content-start no-gutters">
|
||||
<Col className="col-12 col-sm-12 col-lg-4 text-truncate">
|
||||
<Link
|
||||
style={
|
||||
status === "pending" ? { color: "#A3A9AE" } : { color: "#333333" }
|
||||
}
|
||||
type="action"
|
||||
title={userName}
|
||||
text={userName}
|
||||
isBold={true}
|
||||
fontSize={15}
|
||||
onClick={() => console.log("User name action")}
|
||||
/>
|
||||
</Col>
|
||||
<Col
|
||||
className={`${
|
||||
headDepartment ? "col-3" : "col-auto"
|
||||
} col-sm-auto col-lg-2 text-truncate`}
|
||||
>
|
||||
<Link
|
||||
style={
|
||||
status === "pending" ? { color: "#D0D5DA" } : { color: "#A3A9AE" }
|
||||
}
|
||||
type="action"
|
||||
isHovered
|
||||
title={headDepartment ? "Head of department" : ""}
|
||||
text={headDepartment ? "Head of department" : ""}
|
||||
onClick={() => console.log("Head of department action")}
|
||||
/>
|
||||
</Col>
|
||||
<Col className={`col-3 col-sm-auto col-lg-2 text-truncate`}>
|
||||
{headDepartment && (
|
||||
<span className="d-lg-none" style={{ margin: "0 4px" }}>
|
||||
{department.title ? "|" : ""}
|
||||
</span>
|
||||
)}
|
||||
<Link
|
||||
style={
|
||||
status === "pending" ? { color: "#D0D5DA" } : { color: "#A3A9AE" }
|
||||
}
|
||||
type="action"
|
||||
isHovered
|
||||
title={department.title}
|
||||
text={department.title}
|
||||
onClick={department.action}
|
||||
/>
|
||||
</Col>
|
||||
<Col className={`col-3 col-sm-auto col-lg-2 text-truncate`}>
|
||||
{department.title && (
|
||||
<span className="d-lg-none" style={{ margin: "0 4px" }}>
|
||||
{phone.title ? "|" : ""}
|
||||
</span>
|
||||
)}
|
||||
<Link
|
||||
style={
|
||||
status === "pending" ? { color: "#D0D5DA" } : { color: "#A3A9AE" }
|
||||
}
|
||||
type="action"
|
||||
title={phone.title}
|
||||
text={phone.title}
|
||||
onClick={phone.action}
|
||||
/>
|
||||
</Col>
|
||||
<Col className={`col-3 col-sm-auto col-lg-2 text-truncate`}>
|
||||
{phone.title && (
|
||||
<span className="d-lg-none" style={{ margin: "0 4px" }}>
|
||||
{email.title ? "|" : ""}
|
||||
</span>
|
||||
)}
|
||||
<Link
|
||||
style={
|
||||
status === "pending" ? { color: "#D0D5DA" } : { color: "#A3A9AE" }
|
||||
}
|
||||
type="action"
|
||||
isHovered
|
||||
title={email.title}
|
||||
text={email.title}
|
||||
onClick={email.action}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
);
|
||||
import { ContentRow } from 'asc-web-components';
|
||||
import UserContent from './userContent';
|
||||
|
||||
const SectionBodyContent = ({ users, onSelect, isHeaderChecked }) => {
|
||||
return (
|
||||
<>
|
||||
{users.map((user, index) => (
|
||||
<ContentRow
|
||||
key={user.id}
|
||||
return (
|
||||
<>
|
||||
{users.map(user => (
|
||||
<ContentRow
|
||||
key={user.id}
|
||||
status={user.status}
|
||||
checked={isHeaderChecked}
|
||||
data={user}
|
||||
onSelect={(checked, data) => {
|
||||
// console.log("ContentRow onSelect", checked, data);
|
||||
onSelect(checked, data);
|
||||
}}
|
||||
avatarRole={user.role}
|
||||
avatarSource={user.avatar}
|
||||
avatarName={user.userName}
|
||||
contextOptions={user.contextOptions}
|
||||
>
|
||||
<UserContent
|
||||
userName={user.userName}
|
||||
department={user.departments[0]}
|
||||
phone={user.phones[0]}
|
||||
email={user.emails[0]}
|
||||
headDepartment={user.isHead}
|
||||
status={user.status}
|
||||
checked={isHeaderChecked}
|
||||
data={user}
|
||||
onSelect={(checked, data) => {
|
||||
//toggleChecked(e.target.checked);
|
||||
console.log("ContentRow onSelect", checked, data);
|
||||
onSelect(checked, data);
|
||||
}}
|
||||
avatarRole={user.role}
|
||||
avatarSource={user.avatar}
|
||||
avatarName={user.userName}
|
||||
contextOptions={user.contextOptions}
|
||||
>
|
||||
<UserContent
|
||||
userName={user.userName}
|
||||
department={user.departments[0]}
|
||||
phone={user.phones[0]}
|
||||
email={user.emails[0]}
|
||||
headDepartment={user.isHead}
|
||||
status={user.status}
|
||||
/>
|
||||
</ContentRow>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
/>
|
||||
</ContentRow>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SectionBodyContent;
|
||||
|
||||
export default SectionBodyContent;
|
@ -0,0 +1,98 @@
|
||||
import React from 'react';
|
||||
import { Container, Row, Col } from "reactstrap";
|
||||
import {Link} from 'asc-web-components';
|
||||
|
||||
const UserContent = ({
|
||||
userName,
|
||||
department,
|
||||
phone,
|
||||
email,
|
||||
headDepartment,
|
||||
status
|
||||
}) => (
|
||||
<Container fluid={true}>
|
||||
<Row className="justify-content-start no-gutters">
|
||||
<Col className="col-12 col-sm-12 col-lg-4 text-truncate">
|
||||
<Link
|
||||
style={
|
||||
status === "pending" ? { color: "#A3A9AE" } : { color: "#333333" }
|
||||
}
|
||||
type="action"
|
||||
title={userName}
|
||||
text={userName}
|
||||
isBold={true}
|
||||
fontSize={15}
|
||||
onClick={() => console.log("User name action")}
|
||||
/>
|
||||
</Col>
|
||||
<Col
|
||||
className={`${
|
||||
headDepartment ? "col-3" : "col-auto"
|
||||
} col-sm-auto col-lg-2 text-truncate`}
|
||||
>
|
||||
<Link
|
||||
style={
|
||||
status === "pending" ? { color: "#D0D5DA" } : { color: "#A3A9AE" }
|
||||
}
|
||||
type="action"
|
||||
isHovered
|
||||
title={headDepartment ? "Head of department" : ""}
|
||||
text={headDepartment ? "Head of department" : ""}
|
||||
onClick={() => console.log("Head of department action")}
|
||||
/>
|
||||
</Col>
|
||||
<Col className={`col-3 col-sm-auto col-lg-2 text-truncate`}>
|
||||
{headDepartment && (
|
||||
<span className="d-lg-none" style={{ margin: "0 4px" }}>
|
||||
{department.title ? "|" : ""}
|
||||
</span>
|
||||
)}
|
||||
<Link
|
||||
style={
|
||||
status === "pending" ? { color: "#D0D5DA" } : { color: "#A3A9AE" }
|
||||
}
|
||||
type="action"
|
||||
isHovered
|
||||
title={department.title}
|
||||
text={department.title}
|
||||
onClick={department.action}
|
||||
/>
|
||||
</Col>
|
||||
<Col className={`col-3 col-sm-auto col-lg-2 text-truncate`}>
|
||||
{department.title && (
|
||||
<span className="d-lg-none" style={{ margin: "0 4px" }}>
|
||||
{phone.title ? "|" : ""}
|
||||
</span>
|
||||
)}
|
||||
<Link
|
||||
style={
|
||||
status === "pending" ? { color: "#D0D5DA" } : { color: "#A3A9AE" }
|
||||
}
|
||||
type="action"
|
||||
title={phone.title}
|
||||
text={phone.title}
|
||||
onClick={phone.action}
|
||||
/>
|
||||
</Col>
|
||||
<Col className={`col-3 col-sm-auto col-lg-2 text-truncate`}>
|
||||
{phone.title && (
|
||||
<span className="d-lg-none" style={{ margin: "0 4px" }}>
|
||||
{email.title ? "|" : ""}
|
||||
</span>
|
||||
)}
|
||||
<Link
|
||||
style={
|
||||
status === "pending" ? { color: "#D0D5DA" } : { color: "#A3A9AE" }
|
||||
}
|
||||
type="action"
|
||||
isHovered
|
||||
title={email.title}
|
||||
text={email.title}
|
||||
onClick={email.action}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
);
|
||||
|
||||
export default UserContent;
|
@ -10,22 +10,22 @@ import {SectionHeaderContent, SectionBodyContent} from './Section';
|
||||
|
||||
let selection = [];
|
||||
|
||||
const Home = () => {
|
||||
const Home = ({users}) => {
|
||||
const [isHeaderVisible, toggleHeaderVisible] = useState(false);
|
||||
const [isHeaderIndeterminate, toggleHeaderIndeterminate] = useState(false);
|
||||
const [isHeaderChecked, toggleHeaderChecked] = useState(false);
|
||||
|
||||
const renderGroupButtonMenu = () => {
|
||||
const headerVisible = selection.length > 0;
|
||||
const headerIndeterminate = headerVisible && selection.length > 0 && selection.length < fakeUsers.length;
|
||||
const headerChecked = headerVisible && selection.length === fakeUsers.length;
|
||||
const headerIndeterminate = headerVisible && selection.length > 0 && selection.length < users.length;
|
||||
const headerChecked = headerVisible && selection.length === users.length;
|
||||
|
||||
/*console.log(`renderGroupButtonMenu()
|
||||
headerVisible=${headerVisible}
|
||||
headerIndeterminate=${headerIndeterminate}
|
||||
headerChecked=${headerChecked}
|
||||
selection.length=${selection.length}
|
||||
fakeUsers.length=${fakeUsers.length}`);*/
|
||||
users.length=${users.length}`);*/
|
||||
|
||||
if(headerVisible)
|
||||
toggleHeaderVisible(headerVisible);
|
||||
@ -62,8 +62,8 @@ const Home = () => {
|
||||
|
||||
return (
|
||||
<PageLayout
|
||||
articleHeaderContent={ArticleHeaderContent}
|
||||
articleBodyContent={ArticleBodyContent}
|
||||
articleHeaderContent={<ArticleHeaderContent />}
|
||||
articleBodyContent={<ArticleBodyContent />}
|
||||
sectionHeaderContent={
|
||||
<SectionHeaderContent
|
||||
isHeaderVisible={isHeaderVisible}
|
||||
@ -71,7 +71,7 @@ const Home = () => {
|
||||
isHeaderChecked={isHeaderChecked}
|
||||
onCheck={checked => {
|
||||
toggleHeaderChecked(checked);
|
||||
selection = checked ? [...fakeUsers] : [];
|
||||
selection = checked ? [...users] : [];
|
||||
/*console.log(`SectionHeaderContent onCheck
|
||||
selection.length=${selection.length}`)*/
|
||||
renderGroupButtonMenu();
|
||||
@ -80,7 +80,7 @@ const Home = () => {
|
||||
}
|
||||
sectionBodyContent={
|
||||
<SectionBodyContent
|
||||
users={fakeUsers}
|
||||
users={users}
|
||||
isHeaderChecked={isHeaderChecked}
|
||||
onSelect={onRowSelect}
|
||||
/>
|
||||
@ -90,14 +90,117 @@ const Home = () => {
|
||||
};
|
||||
|
||||
Home.propTypes = {
|
||||
modules: PropTypes.array.isRequired,
|
||||
users: PropTypes.array.isRequired,
|
||||
history: PropTypes.object.isRequired,
|
||||
isLoaded: PropTypes.bool
|
||||
};
|
||||
|
||||
const getUserDepartments = (user) => {
|
||||
return [
|
||||
{
|
||||
title: user.department,
|
||||
action: () => console.log("Department action")
|
||||
}
|
||||
];
|
||||
};
|
||||
|
||||
const getUserPhones = (user) => {
|
||||
return [
|
||||
{
|
||||
title: "+5 104 6473420",
|
||||
action: () => console.log("Phone action")
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
const getUserEmails = (user) => {
|
||||
return [
|
||||
{
|
||||
title: user.email,
|
||||
action: () => console.log("Email action")
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
const getUserContextOptions = (user) => {
|
||||
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: () => console.log("Context action: Edit")
|
||||
},
|
||||
{
|
||||
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 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.state === 1 && user.activationStatus === 1)
|
||||
return "normal";
|
||||
else if(user.state === 1 && user.activationStatus === 2)
|
||||
return "pending";
|
||||
else if(user.state === 2)
|
||||
return "disabled";
|
||||
else
|
||||
return "normal";
|
||||
};
|
||||
|
||||
const convertUsers = (users) => {
|
||||
return users.map(user => {
|
||||
return {
|
||||
id: user.id,
|
||||
userName: user.userName,
|
||||
avatar: user.avatar,
|
||||
role: getUserRole(user),
|
||||
status: getUserStatus(user),
|
||||
isHead: false,
|
||||
departments: getUserDepartments(user),
|
||||
phones: getUserPhones(user),
|
||||
emails: getUserEmails(user),
|
||||
contextOptions: getUserContextOptions(user)
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
function mapStateToProps(state) {
|
||||
const users = convertUsers(state.people.users)
|
||||
return {
|
||||
modules: state.auth.modules,
|
||||
users: users,
|
||||
isLoaded: state.auth.isLoaded
|
||||
};
|
||||
}
|
||||
|
23
products/ASC.People/Client/src/reducers/people.js
Normal file
23
products/ASC.People/Client/src/reducers/people.js
Normal file
@ -0,0 +1,23 @@
|
||||
import { SET_GROUPS, SET_USERS } from '../actions/actionTypes';
|
||||
|
||||
const initialState = {
|
||||
users: [],
|
||||
groups: []
|
||||
};
|
||||
|
||||
const people = (state = initialState, action) => {
|
||||
switch (action.type) {
|
||||
case SET_GROUPS:
|
||||
return Object.assign({}, state, {
|
||||
groups: action.groups
|
||||
});
|
||||
case SET_USERS:
|
||||
return Object.assign({}, state, {
|
||||
users: action.users
|
||||
});
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
|
||||
export default people;
|
@ -1,8 +1,10 @@
|
||||
import { combineReducers } from 'redux';
|
||||
import auth from './auth';
|
||||
import people from './people';
|
||||
|
||||
const rootReducer = combineReducers({
|
||||
auth
|
||||
auth,
|
||||
people
|
||||
});
|
||||
|
||||
export default rootReducer;
|
@ -27,4 +27,12 @@ export function getModulesList() {
|
||||
|
||||
export function getUser() {
|
||||
return IS_FAKE ? fakeApi.getUser() : axios.get(`${API_URL}/people/@self.json`);
|
||||
};
|
||||
|
||||
export function getUserList() {
|
||||
return IS_FAKE ? fakeApi.getUsers() : axios.get(`${API_URL}/people`);
|
||||
};
|
||||
|
||||
export function getGroupList() {
|
||||
return fakeApi.getGroups(); // IS_FAKE ? fakeApi.getGroups() : axios.get(`${API_URL}/api/2.0/group`);
|
||||
};
|
@ -13,14 +13,14 @@ function fakeResponse(data) {
|
||||
response: data
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export function login(data) {
|
||||
return axios.post(`${API_URL}/authentication`, data);
|
||||
};
|
||||
|
||||
export function getModulesList() {
|
||||
let data = [
|
||||
const data = [
|
||||
{
|
||||
title: "Documents",
|
||||
link: "/products/files/",
|
||||
@ -40,7 +40,7 @@ export function getModulesList() {
|
||||
};
|
||||
|
||||
export function getUser() {
|
||||
let data = {
|
||||
const data = {
|
||||
"index": "a",
|
||||
"type": "person",
|
||||
"id": "2881e6c6-7c9a-11e9-81fb-0242ac120002",
|
||||
@ -88,4 +88,144 @@ export function getUser() {
|
||||
}
|
||||
|
||||
return fakeResponse(data);
|
||||
};
|
||||
};
|
||||
|
||||
export function getUsers() {
|
||||
const data = [
|
||||
{
|
||||
"id": "657d1d0e-c9f3-4c9d-bd48-07525e539fd6",
|
||||
"userName": "Alexey.Safronov",
|
||||
"isVisitor": false,
|
||||
"firstName": "Alexey",
|
||||
"lastName": "Safronov",
|
||||
"email": "Alexey.Safronov@avsmedia.net",
|
||||
"status": 1,
|
||||
"activationStatus": 1,
|
||||
"terminated": null,
|
||||
"department": "",
|
||||
"workFrom": "2017-07-11T20:22:53.0000000+03:00",
|
||||
"displayName": "Safronov Alexey",
|
||||
"contacts": [
|
||||
{
|
||||
"type": "mail",
|
||||
"value": "alexey.safronov@onlyoffice.com"
|
||||
}
|
||||
],
|
||||
"avatarMedium": "/images/default_user_photo_size_48-48.png?_=-48038267",
|
||||
"avatar": "/images/default_user_photo_size_82-82.png?_=-48038267",
|
||||
"isAdmin": false,
|
||||
"isLDAP": true,
|
||||
"isOwner": false,
|
||||
"isSSO": false,
|
||||
"avatarSmall": "/images/default_user_photo_size_32-32.png?_=-48038267",
|
||||
"profileUrl": "http://localhost:8092/products/people/profile.aspx?user=alexey.safronov"
|
||||
},
|
||||
{
|
||||
"id": "646a6cff-df57-4b83-8ffe-91a24910328c",
|
||||
"userName": "Nikolay.Ivanov",
|
||||
"isVisitor": false,
|
||||
"firstName": "Nikolay",
|
||||
"lastName": "Ivanov",
|
||||
"email": "profi.troll@outlook.com",
|
||||
"birthday": "1983-09-15T04:00:00.0000000+04:00",
|
||||
"sex": "male",
|
||||
"status": 1,
|
||||
"activationStatus": 1,
|
||||
"terminated": null,
|
||||
"department": "",
|
||||
"workFrom": "2007-10-03T04:00:00.0000000+04:00",
|
||||
"displayName": "Ivanov Nikolay",
|
||||
"mobilePhone": "79081612979",
|
||||
"avatarMedium": "/images/default_user_photo_size_48-48.png?_=-562774739",
|
||||
"avatar": "/images/default_user_photo_size_82-82.png?_=-562774739",
|
||||
"isAdmin": true,
|
||||
"isLDAP": false,
|
||||
"listAdminModules": [
|
||||
"people"
|
||||
],
|
||||
"isOwner": true,
|
||||
"isSSO": false,
|
||||
"avatarSmall": "/images/default_user_photo_size_32-32.png?_=-562774739",
|
||||
"profileUrl": "http://localhost:8092/products/people/profile.aspx?user=nikolay.ivanov"
|
||||
}
|
||||
];
|
||||
|
||||
return fakeResponse(data);
|
||||
};
|
||||
|
||||
export function getGroups() {
|
||||
const data = [
|
||||
{
|
||||
"id": "0824d8a0-d860-46df-8142-9313bb298a5c",
|
||||
"name": "Отдел продвижения и рекламы",
|
||||
"manager": null
|
||||
},
|
||||
{
|
||||
"id": "098f3dac-92bd-455f-8138-966313c098da",
|
||||
"name": "Группа интернет-рекламы",
|
||||
"manager": "galina.medvedeva"
|
||||
},
|
||||
{
|
||||
"id": "1518cad6-c2b9-4644-bcb9-3fc816714ecc",
|
||||
"name": "Отдел тестирования",
|
||||
"manager": null
|
||||
},
|
||||
{
|
||||
"id": "1d42a4fb-755e-44ab-bcf5-38482c9b2415",
|
||||
"name": "Отдел программирования форматов",
|
||||
"manager": "Sergey.Kirillov"
|
||||
},
|
||||
{
|
||||
"id": "36800583-b347-4646-b303-65d969fabec1",
|
||||
"name": "Рига",
|
||||
"manager": "Kate.Osipova"
|
||||
},
|
||||
{
|
||||
"id": "3b99e536-7b68-44c4-8d44-6e745fe48348",
|
||||
"name": "Группа проектирования",
|
||||
"manager": "Anna.Medvedeva"
|
||||
},
|
||||
{
|
||||
"id": "40e2b7b4-bdb8-43f8-a012-5ab382754dba",
|
||||
"name": "Группа технической поддержки клиентов",
|
||||
"manager": "Alexey.Micheev"
|
||||
},
|
||||
{
|
||||
"id": "5fd54d7e-aff8-435f-85d0-af0e2129be85",
|
||||
"name": "Группа PR и продвижения",
|
||||
"manager": "Alexander.Galkin"
|
||||
},
|
||||
{
|
||||
"id": "613fc896-3ddd-4de1-a567-edbbc6cf1fc8",
|
||||
"name": "Администрация",
|
||||
"manager": "Lev.Bannov"
|
||||
},
|
||||
{
|
||||
"id": "70fe34d0-e589-4810-bcf8-f3a791db20bf",
|
||||
"name": "Отдел технической документации",
|
||||
"manager": "Alexander.Vnuchkov"
|
||||
},
|
||||
{
|
||||
"id": "72940d26-57f7-4994-aff9-e505e48558d4",
|
||||
"name": "Даллас",
|
||||
"manager": null
|
||||
},
|
||||
{
|
||||
"id": "cc8eea30-1260-427e-83c4-ff9e9680edba",
|
||||
"name": "Отдел интернет-приложений",
|
||||
"manager": "Alex.Bannov"
|
||||
},
|
||||
{
|
||||
"id": "f34754ff-ba4f-4f5e-bc35-1ea2921b2c44",
|
||||
"name": "Отдел продаж",
|
||||
"manager": "galina.goduhina"
|
||||
},
|
||||
{
|
||||
"id": "ff00f2ea-2960-4fe9-b477-6a5a6ab14187",
|
||||
"name": "Группа по работе с клиентами",
|
||||
"manager": "Evgenia.Olshanskaja"
|
||||
}
|
||||
];
|
||||
|
||||
return fakeResponse(data);
|
||||
}
|
Loading…
Reference in New Issue
Block a user