diff --git a/products/ASC.People/Client/src/components/pages/Home/Section/Header/index.js b/products/ASC.People/Client/src/components/pages/Home/Section/Header/index.js index 20c1295404..b2de0ddc8c 100644 --- a/products/ASC.People/Client/src/components/pages/Home/Section/Header/index.js +++ b/products/ASC.People/Client/src/components/pages/Home/Section/Header/index.js @@ -2,6 +2,7 @@ import React from 'react'; import { GroupButtonsMenu, DropDownItem, Text, toastr, ContextMenuButton } from 'asc-web-components'; import { connect } from 'react-redux'; import { getSelectedGroup } from '../../../../../store/people/selectors'; +import { isAdmin } from '../../../../../store/auth/selectors'; const getPeopleItems = (onSelect) => [ { @@ -74,7 +75,8 @@ const SectionHeaderContent = React.memo(({ onCheck, onSelect, onClose, - group + group, + isAdmin }) => { console.log("SectionHeaderContent render"); const menuItems = getPeopleItems(onSelect); @@ -97,14 +99,16 @@ const SectionHeaderContent = React.memo(({ group ?
{group.name} - + {isAdmin && + + }
: People ) @@ -113,7 +117,8 @@ const SectionHeaderContent = React.memo(({ const mapStateToProps = (state) => { return { - group: getSelectedGroup(state.people.groups, state.people.selectedGroup) + group: getSelectedGroup(state.people.groups, state.people.selectedGroup), + isAdmin: isAdmin(state.auth.user) } } diff --git a/products/ASC.People/Client/src/components/pages/Profile/Section/Body/index.js b/products/ASC.People/Client/src/components/pages/Profile/Section/Body/index.js index 6318977ab9..adb7112829 100644 --- a/products/ASC.People/Client/src/components/pages/Profile/Section/Body/index.js +++ b/products/ASC.People/Client/src/components/pages/Profile/Section/Body/index.js @@ -1,8 +1,19 @@ -import React, { useCallback } from 'react'; -import { withRouter } from 'react-router'; -import { Text, Avatar, Button, ToggleContent, IconButton, Link } from 'asc-web-components'; -import { connect } from 'react-redux'; -import { getUserRole, getUserContacts } from '../../../../../store/people/selectors'; +import React, { useCallback } from "react"; +import { withRouter } from "react-router"; +import { + Text, + Avatar, + Button, + ToggleContent, + IconButton, + Link +} from "asc-web-components"; +import { connect } from "react-redux"; +import { + getUserRole, + getUserContacts +} from "../../../../../store/people/selectors"; +import { isAdmin, isMe } from "../../../../../store/auth/selectors"; const profileWrapper = { display: "flex", @@ -40,7 +51,7 @@ const titlesWrapper = { const restMargins = { marginBottom: "0", marginBlockStart: "5px", - marginBlockEnd: "0px", + marginBlockEnd: "0px" }; const notesWrapper = { @@ -70,7 +81,7 @@ const marginLeft18 = { const selfToggleWrapper = { width: "100%", marginBottom: "24px" -} +}; const contactsToggleWrapper = { width: "100%", @@ -86,47 +97,52 @@ const contactWrapper = { width: "300px" }; -const getFormattedDate = (date) => { +const getFormattedDate = date => { if (!date) return; - let d = date.slice(0, 10).split('-'); - return d[1] + '.' + d[2] + '.' + d[0]; + let d = date.slice(0, 10).split("-"); + return d[1] + "." + d[2] + "." + d[0]; }; -const getFormattedDepartments = (departments) => { - const splittedDepartments = departments.split(','); +const getFormattedDepartments = departments => { + const splittedDepartments = departments.split(","); const departmentsLength = splittedDepartments.length - 1; const formattedDepartments = splittedDepartments.map((department, index) => { return ( - + {department.trim()} - {(departmentsLength !== index) ? ', ' : ''} + {departmentsLength !== index ? ", " : ""} - ) + ); }); return formattedDepartments; }; -const capitalizeFirstLetter = (string) => { +const capitalizeFirstLetter = string => { if (!string) return; return string.charAt(0).toUpperCase() + string.slice(1); }; -const createContacts = (contacts) => { +const createContacts = contacts => { return contacts.map((contact, index) => { return (
- +
{contact.value}
); }); }; -const SectionBodyContent = (props) => { - const { profile, history, isSelf, settings } = props; +const SectionBodyContent = props => { + const { profile, history, isSelf, settings, isAdmin, viewer } = props; //console.log(profile, settings); const contacts = profile.contacts && getUserContacts(profile.contacts); const role = getUserRole(profile); @@ -138,12 +154,12 @@ const SectionBodyContent = (props) => { const infoContacts = contacts && createContacts(contacts.contact); const onEmailClick = useCallback( - () => window.open('mailto:' + profile.email), + () => window.open("mailto:" + profile.email), [profile.email] ); const onEditSubscriptionsClick = useCallback( - () => console.log('Edit subscriptions onClick()'), + () => console.log("Edit subscriptions onClick()"), [] ); @@ -162,30 +178,95 @@ const SectionBodyContent = (props) => { return (
- -
- Type: - {profile.email && E-mail:} - {profile.department && Department:} - {profile.title && Position:} - {profile.mobilePhone && Phone:} - {profile.sex && Sex:} - {profile.workFrom && Employed since:} - {profile.birthday && Date of birth:} - {profile.location && Location:} - {isSelf && Language:} + + Type: + + {profile.email && ( + + E-mail: + + )} + {profile.department && ( + + Department: + + )} + {profile.title && ( + + Position: + + )} + {profile.mobilePhone && ( + + Phone: + + )} + {profile.sex && ( + + Sex: + + )} + {profile.workFrom && ( + + Employed since: + + )} + {profile.birthday && ( + + Date of birth: + + )} + {profile.location && ( + + Location: + + )} + {isSelf && ( + + Language: + + )} {/*{isSelf && Affiliate status:}*/} -
+
- {profile.isVisitor ? "Guest" : "Employee"} - + {profile.isVisitor ? "Guest" : "Employee"} + + + {profile.email} - {profile.activationStatus === 2 && ' (Pending)'} + {profile.activationStatus === 2 && " (Pending)"} {formatedDepartments} {profile.title} @@ -194,7 +275,11 @@ const SectionBodyContent = (props) => { {workFrom} {birthDay} {profile.location} - {isSelf && {profile.cultureName || settings.currentCulture}} + {isSelf && ( + + {profile.cultureName || settings.currentCulture} + + )} {/*{isSelf &&
@@ -211,50 +296,63 @@ const SectionBodyContent = (props) => { }*/} - {isSelf && + {isSelf && (
- + -
- } - {profile.notes && + )} + {profile.notes && (
- - {profile.notes} - + {profile.notes}
- } - {profile.contacts && + )} + {profile.contacts && (
- - - {infoContacts} - + + {infoContacts}
- } - {profile.contacts && + )} + {profile.contacts && (
- - - {socialContacts} - + + {socialContacts}
- } + )} ); }; function mapStateToProps(state) { return { - settings: state.auth.settings + settings: state.auth.settings, + isAdmin: isAdmin(state.auth.user), + viewer: state.auth.user }; } -export default connect(mapStateToProps)(withRouter(SectionBodyContent)); \ No newline at end of file +export default connect(mapStateToProps)(withRouter(SectionBodyContent)); diff --git a/products/ASC.People/Client/src/components/pages/Profile/Section/Header/index.js b/products/ASC.People/Client/src/components/pages/Profile/Section/Header/index.js index ad4cc51968..87ed6797e8 100644 --- a/products/ASC.People/Client/src/components/pages/Profile/Section/Header/index.js +++ b/products/ASC.People/Client/src/components/pages/Profile/Section/Header/index.js @@ -1,7 +1,13 @@ -import React from 'react'; -import { connect } from 'react-redux'; -import { Text, IconButton, ContextMenuButton, toastr } from 'asc-web-components'; +import React from "react"; +import { connect } from "react-redux"; +import { + Text, + IconButton, + ContextMenuButton, + toastr +} from "asc-web-components"; import { withRouter } from "react-router"; +import { isAdmin, isMe } from "../../../../../store/auth/selectors"; const wrapperStyle = { display: "flex", @@ -13,29 +19,29 @@ const textStyle = { marginRight: "16px" }; -const SectionHeaderContent = (props) => { - const { profile, history, settings } = props; +const SectionHeaderContent = props => { + const { profile, history, settings, isAdmin, viewer } = props; - const onEditClick = (user) => { + const onEditClick = user => { history.push(`${settings.homepage}/edit/${user.userName}`); - } - + }; + const onChangePasswordClick = () => { toastr.success("Context action: Change password"); - } - + }; + const onChangePhoneClick = () => { toastr.success("Context action: Change phone"); - } - + }; + const onChangeEmailClick = () => { toastr.success("Context action: Change e-mail"); - } - + }; + const onDisableClick = () => { toastr.success("Context action: Disable"); - } - + }; + const getUserContextOptions = user => { return [ { @@ -70,26 +76,39 @@ const SectionHeaderContent = (props) => { return (
-
- history.push(settings.homepage)} /> +
+ history.push(settings.homepage)} + />
- {profile.displayName}{profile.isLDAP && ' (LDAP)'} - + + {profile.displayName} + {profile.isLDAP && " (LDAP)"} + + {(isAdmin || isMe(viewer, profile.userName)) && ( + + )}
); }; function mapStateToProps(state) { return { - settings: state.auth.settings + settings: state.auth.settings, + viewer: state.auth.user, + isAdmin: isAdmin(state.auth.user) }; } -export default connect(mapStateToProps)(withRouter(SectionHeaderContent)); \ No newline at end of file +export default connect(mapStateToProps)(withRouter(SectionHeaderContent)); diff --git a/products/ASC.People/Client/src/components/pages/Profile/index.js b/products/ASC.People/Client/src/components/pages/Profile/index.js index 2f81170f89..f8e80cc145 100644 --- a/products/ASC.People/Client/src/components/pages/Profile/index.js +++ b/products/ASC.People/Client/src/components/pages/Profile/index.js @@ -5,7 +5,6 @@ import { Backdrop, NewPageLayout as NPL, Loader } from "asc-web-components"; import { ArticleHeaderContent, ArticleMainButtonContent, ArticleBodyContent } from '../../Article'; import { SectionHeaderContent, SectionBodyContent } from './Section'; import { setProfile, fetchProfile, resetProfile } from '../../../store/profile/actions'; -import { isAdmin, isMe } from '../../../store/auth/selectors'; class Profile extends React.Component { constructor(props) { @@ -80,8 +79,7 @@ class Profile extends React.Component { console.log("Profile render") const { isBackdropVisible, isArticleVisible, isArticlePinned } = this.state; - const { profile, auth, isAdmin, match } = this.props; - const { userId } = match.params; + const { profile } = this.props; return ( profile ? <> @@ -103,7 +101,7 @@ class Profile extends React.Component { - + @@ -129,8 +127,6 @@ Profile.propTypes = { function mapStateToProps(state) { return { - auth: state.auth, - isAdmin: isAdmin(state.auth.user), profile: state.profile.targetUser }; }