Web: Client: Added button "AddUsers" on header on access-rights/admins page
This commit is contained in:
Alexey Kostenko
parent
d19a3469d1
commit
2cc413ed16
3
public/images/departments.group.react.svg
Normal file
3
public/images/departments.group.react.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M11 4.05692C11 6.06254 9.68753 8 8.00003 8C6.31247 8 5 6.06254 5 4.05692V3.42859C5 1.42297 6.31247 0 8.00003 0C9.68753 0 11 1.42305 11 3.42859V4.05692ZM3.99684 6.89387C3.99684 7.97353 2.89941 8.49386 2.49839 8.49386C2.11871 8.49386 1 7.97353 1 6.89387V6.09385C1 5.01414 1.81506 4.4938 2.49839 4.4938C3.20518 4.4938 3.99684 5.01414 3.99684 6.09385V6.89387ZM12.9783 10.538C12.9778 10.533 12.9768 10.5281 12.9759 10.5233L12.9759 10.5232C12.9749 10.5184 12.9739 10.5136 12.9734 10.5087C12.9588 10.3888 12.9363 10.2715 12.9051 10.1567C12.9051 10.1556 12.9051 10.1547 12.9041 10.1537C12.8386 9.90959 12.7282 9.67443 12.5633 9.44275V9.44176C12.2927 9.06046 11.8846 8.67156 11.2215 8.29233L11.1924 8.27572C10.8622 8.08679 10.7105 8 10.4998 8C10.1551 8 9.85434 8.27292 9.34759 8.74673H9.34655L8.88562 9.17822C8.88396 9.17982 8.87753 9.18836 8.86692 9.20245L8.86689 9.20249C8.77104 9.3298 8.33489 9.90909 7.99994 9.90909C7.66516 9.90909 7.22925 9.33036 7.13307 9.20268C7.12235 9.18845 7.11585 9.17982 7.11419 9.17822L6.65326 8.74673H6.65228C6.14554 8.27292 5.84475 8 5.50003 8C5.28326 8 5.08981 8.09187 4.7784 8.29233C4.13547 8.70555 3.70702 9.05997 3.43759 9.44069L3.43654 9.44119C3.43605 9.44169 3.4358 9.44233 3.43557 9.44296C3.43533 9.44358 3.4351 9.44418 3.43465 9.4446C3.27151 9.67436 3.16215 9.90802 3.09678 10.1507C3.09587 10.1526 3.09475 10.1551 3.09399 10.1575C3.06361 10.2715 3.04112 10.3872 3.02652 10.5061C3.02602 10.5117 3.02502 10.5171 3.02401 10.5226L3.02401 10.5226C3.02304 10.5278 3.02208 10.5331 3.02156 10.5384C3.00788 10.6647 3.00012 10.7935 3.00012 10.9272L3.00012 10.9643C3.00009 11.2949 2.99986 13.7152 3.00012 13.7273C3.00012 14.6321 3.33507 15 4.25008 15H11.7499C12.6728 15 12.9999 14.6519 12.9999 13.7273C13.0002 13.7153 12.9999 11.3331 12.9998 10.9726L12.9998 10.9272C12.9998 10.7936 12.9919 10.6648 12.9783 10.538ZM14.9969 6.89387C14.9969 7.97353 13.8994 8.49386 13.4984 8.49386C13.1187 8.49386 12 7.97353 12 6.89387V6.09385C12 5.01414 12.8151 4.4938 13.4984 4.4938C14.2053 4.4938 14.9969 5.01414 14.9969 6.09385V6.89387ZM0.758501 9.11697C0.138217 9.77624 0.000231735 10.8273 0.000231735 11.5109L0.000222208 11.5363C0.000153736 11.7128 -0.000247212 12.7465 0.000231735 12.7554C0.000231735 13.6587 0.162723 14 0.666809 14H2V10.2662L1.66671 9.64398C1.31409 9.0635 1.01682 8.8428 0.758501 9.11697ZM15.2415 9.11697C15.8617 9.77615 15.9998 10.8272 15.9998 11.5108L15.9998 11.5364C15.9998 11.7134 16.0002 12.7465 15.9998 12.7554C15.9998 13.6587 15.8373 14 15.3332 14H14V10.2663L14.3333 9.64404C14.6859 9.0635 14.9832 8.8428 15.2415 9.11697Z" fill="#657077"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
3
public/images/files.menu.svg
Normal file
3
public/images/files.menu.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M3 2.5C3 1.67157 3.67157 1 4.5 1H16L21 6.00587V22.5C21 23.3284 20.3284 24 19.5 24H4.5C3.67157 24 3 23.3284 3 22.5V2.5ZM6 4H14V6H6V4ZM18 9H6V11H18V9ZM6 14H18V16H6V14ZM18 19H6V21H18V19Z" fill="#7A95B0"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 354 B |
@ -1,10 +1,12 @@
|
||||
import React from "react";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import styled from "styled-components";
|
||||
import { withRouter } from "react-router";
|
||||
import { withTranslation } from "react-i18next";
|
||||
import Headline from "@appserver/common/components/Headline";
|
||||
import IconButton from "@appserver/components/icon-button";
|
||||
import { tablet } from "@appserver/components/utils/device";
|
||||
import PeopleSelector from "people/PeopleSelector";
|
||||
|
||||
import {
|
||||
getKeyByLink,
|
||||
@ -21,6 +23,14 @@ const HeaderContainer = styled.div`
|
||||
align-items: center;
|
||||
max-width: calc(100vw - 32px);
|
||||
|
||||
.action-wrapper {
|
||||
flex-grow: 1;
|
||||
|
||||
.action-button {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.arrow-button {
|
||||
margin-right: 16px;
|
||||
|
||||
@ -59,6 +69,7 @@ class SectionHeaderContent extends React.Component {
|
||||
this.state = {
|
||||
header,
|
||||
isCategoryOrHeader: isCategory || isHeader,
|
||||
showSelector: false,
|
||||
};
|
||||
}
|
||||
|
||||
@ -102,9 +113,31 @@ class SectionHeaderContent extends React.Component {
|
||||
return arrayOfParams;
|
||||
};
|
||||
|
||||
addUsers = (items) => {
|
||||
const { addUsers } = this.props;
|
||||
if (!addUsers) return;
|
||||
addUsers(items);
|
||||
};
|
||||
|
||||
onToggleSelector = (status = !this.state.showSelector) => {
|
||||
this.setState({
|
||||
showSelector: status,
|
||||
});
|
||||
};
|
||||
|
||||
onCancelSelector = () => {
|
||||
this.onToggleSelector(false);
|
||||
};
|
||||
|
||||
onSelect = (items) => {
|
||||
this.onToggleSelector(false);
|
||||
this.addUsers(items);
|
||||
//this.changeOwner(items[0]);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { t } = this.props;
|
||||
const { header, isCategoryOrHeader } = this.state;
|
||||
const { t, addUsers, groupsCaption } = this.props;
|
||||
const { header, isCategoryOrHeader, showSelector } = this.state;
|
||||
const arrayOfParams = this.getArrayOfParams();
|
||||
|
||||
return (
|
||||
@ -123,9 +156,38 @@ class SectionHeaderContent extends React.Component {
|
||||
<Headline type="content" truncate={true}>
|
||||
{t(header)}
|
||||
</Headline>
|
||||
{addUsers && (
|
||||
<div className="action-wrapper">
|
||||
<IconButton
|
||||
iconName="/static/images/actions.header.touch.react.svg"
|
||||
size="17"
|
||||
color="#A3A9AE"
|
||||
hoverColor="#657077"
|
||||
isFill={true}
|
||||
onClick={this.onToggleSelector}
|
||||
className="action-button"
|
||||
/>
|
||||
<PeopleSelector
|
||||
isMultiSelect={true}
|
||||
displayType="aside"
|
||||
isOpen={showSelector}
|
||||
onSelect={this.onSelect}
|
||||
groupsCaption={groupsCaption}
|
||||
onCancel={this.onCancelSelector}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</HeaderContainer>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withRouter(withTranslation("Settings")(SectionHeaderContent));
|
||||
export default inject(({ auth, setup }) => {
|
||||
const { customNames } = auth.settingsStore;
|
||||
const { addUsers } = setup.headerAction;
|
||||
|
||||
return {
|
||||
addUsers,
|
||||
groupsCaption: customNames.groupsCaption,
|
||||
};
|
||||
})(withRouter(withTranslation("Settings")(observer(SectionHeaderContent))));
|
||||
|
||||
@ -3,6 +3,7 @@ import { withRouter } from "react-router";
|
||||
import { withTranslation } from "react-i18next";
|
||||
import PropTypes from "prop-types";
|
||||
import styled from "styled-components";
|
||||
import { ReactSVG } from "react-svg";
|
||||
|
||||
import Text from "@appserver/components/text";
|
||||
import Avatar from "@appserver/components/avatar";
|
||||
@ -210,7 +211,7 @@ class PortalAdmins extends Component {
|
||||
showSelector: false,
|
||||
showFullAdminSelector: false,
|
||||
isLoading: false,
|
||||
showLoader: true,
|
||||
showLoader: false,
|
||||
selectedOptions: [],
|
||||
admins: adminsFromSessionStorage || {},
|
||||
hasChanged: false,
|
||||
@ -219,48 +220,30 @@ class PortalAdmins extends Component {
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const { admins, fetchPeople } = this.props;
|
||||
async componentDidMount() {
|
||||
const { admins, setAddUsers, getUpdateListAdmin } = this.props;
|
||||
const { showReminder } = this.state;
|
||||
|
||||
setAddUsers(this.addUsers);
|
||||
|
||||
if (isEmpty(admins, true)) {
|
||||
try {
|
||||
await getUpdateListAdmin();
|
||||
} catch (error) {
|
||||
toastr.error(error);
|
||||
}
|
||||
}
|
||||
|
||||
if (adminsFromSessionStorage && !showReminder) {
|
||||
this.setState({
|
||||
showReminder: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (isEmpty(admins, true)) {
|
||||
const newFilter = this.onAdminsFilter();
|
||||
fetchPeople(newFilter)
|
||||
.catch((error) => {
|
||||
toastr.error(error);
|
||||
})
|
||||
.finally(() => {
|
||||
this.setState({
|
||||
showLoader: false,
|
||||
});
|
||||
|
||||
this.checkChanges();
|
||||
|
||||
if (!adminsFromSessionStorage && this.props.admins.length > 0) {
|
||||
this.setState({
|
||||
admins: this.props.admins,
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
if (!adminsFromSessionStorage && this.props.admins.length > 0) {
|
||||
this.setState({
|
||||
admins: this.props.admins,
|
||||
showLoader: false,
|
||||
});
|
||||
} else {
|
||||
this.setState({
|
||||
admins: adminsFromSessionStorage || {},
|
||||
showLoader: false,
|
||||
});
|
||||
}
|
||||
}
|
||||
componentWillUnmount() {
|
||||
const { setAddUsers } = this.props;
|
||||
setAddUsers("");
|
||||
}
|
||||
|
||||
onChangeAdmin = async (userIds, isAdmin, productId) => {
|
||||
@ -330,6 +313,10 @@ class PortalAdmins extends Component {
|
||||
if (admin.id === this.id) return true;
|
||||
};
|
||||
|
||||
addUsers = () => {
|
||||
console.log("Added users");
|
||||
};
|
||||
|
||||
filterNewAdmins = (admins, newAdmins) => {
|
||||
admins.forEach((admin) => {
|
||||
for (let t = 0; t < newAdmins.length; t++) {
|
||||
@ -657,11 +644,10 @@ class PortalAdmins extends Component {
|
||||
};
|
||||
|
||||
render() {
|
||||
const { t } = this.props;
|
||||
const { t, admins } = this.props;
|
||||
const {
|
||||
isLoading,
|
||||
showLoader,
|
||||
admins,
|
||||
hasChanged,
|
||||
showReminder,
|
||||
searchValue,
|
||||
@ -750,7 +736,10 @@ class PortalAdmins extends Component {
|
||||
isfill={true}
|
||||
color="#3B72A7"
|
||||
/>
|
||||
)*/}
|
||||
)
|
||||
<ReactSVG src={icon} className="drop-down-item_icon" />
|
||||
|
||||
*/}
|
||||
{/*getUserStatus(user) === "disabled" && (
|
||||
<Icons.CatalogSpamIcon
|
||||
className="statusIcon"
|
||||
@ -822,7 +811,7 @@ class PortalAdmins extends Component {
|
||||
<div className="iconsWrapper">
|
||||
<div className="iconWrapper">
|
||||
<IconButton
|
||||
iconName="ActionsDocumentsSettingsIcon"
|
||||
iconName="/static/images/files.menu.svg"
|
||||
size={14}
|
||||
color={
|
||||
getUserRole(user) === "owner" ||
|
||||
@ -859,7 +848,9 @@ class PortalAdmins extends Component {
|
||||
</div>
|
||||
<div className="iconWrapper">
|
||||
<IconButton
|
||||
iconName="MainMenuPeopleIcon"
|
||||
iconName={
|
||||
"/static/images/departments.group.react.svg"
|
||||
}
|
||||
size={16}
|
||||
color={
|
||||
getUserRole(user) === "owner" ||
|
||||
@ -944,11 +935,14 @@ PortalAdmins.propTypes = {
|
||||
admins: PropTypes.arrayOf(PropTypes.object),
|
||||
productId: PropTypes.string,
|
||||
owner: PropTypes.object,
|
||||
setAddUsers: PropTypes.func.isRequired,
|
||||
getUpdateListAdmin: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export default inject(({ auth, setup }) => {
|
||||
const { admins, owner, filter } = setup.security.accessRight;
|
||||
const { user: me } = auth.userStore;
|
||||
const { setAddUsers } = setup;
|
||||
|
||||
return {
|
||||
groupsCaption: auth.settingsStore.customNames.groupsCaption,
|
||||
@ -960,5 +954,6 @@ export default inject(({ auth, setup }) => {
|
||||
owner,
|
||||
filter,
|
||||
me,
|
||||
setAddUsers,
|
||||
};
|
||||
})(withTranslation("Settings")(withRouter(observer(PortalAdmins))));
|
||||
|
||||
@ -20,6 +20,10 @@ class SettingsSetupStore {
|
||||
},
|
||||
};
|
||||
|
||||
headerAction = {
|
||||
addUsers: "",
|
||||
};
|
||||
|
||||
integration = {
|
||||
consumers: [],
|
||||
selectedConsumer: {},
|
||||
@ -65,6 +69,10 @@ class SettingsSetupStore {
|
||||
this.integration.consumers = consumers;
|
||||
};
|
||||
|
||||
setAddUsers = (func) => {
|
||||
this.headerAction.addUsers = func;
|
||||
};
|
||||
|
||||
setSelectedConsumer = (selectedConsumerName) => {
|
||||
this.integration.selectedConsumer =
|
||||
this.integration.consumers.find((c) => c.name === selectedConsumerName) ||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user