Web: Client: added loader to accessRights page, fixed selected users bug, replace selector functions, added new translations
This commit is contained in:
parent
dc3ccbe7b7
commit
e9ffc8f363
@ -11,7 +11,11 @@ import {
|
||||
getListUsers,
|
||||
getUserById
|
||||
} from "../../../../../store/settings/actions";
|
||||
import { filter } from "lodash";
|
||||
import {
|
||||
getUsers,
|
||||
getAdmins,
|
||||
getSelectorOptions
|
||||
} from "../../../../../store/settings/selectors";
|
||||
import {
|
||||
Text,
|
||||
Avatar,
|
||||
@ -25,12 +29,18 @@ import {
|
||||
SelectorAddButton,
|
||||
IconButton,
|
||||
AdvancedSelector,
|
||||
toastr
|
||||
toastr,
|
||||
RequestLoader
|
||||
} from "asc-web-components";
|
||||
|
||||
const MainContainer = styled.div`
|
||||
padding: 16px 16px 16px 24px;
|
||||
width: 100%;
|
||||
|
||||
.page_loader {
|
||||
position: fixed;
|
||||
left: 48%;
|
||||
}
|
||||
`;
|
||||
|
||||
const ProjectsContainer = styled.div`
|
||||
@ -69,7 +79,7 @@ const BodyContainer = styled.div`
|
||||
const AvatarContainer = styled.div`
|
||||
display: flex;
|
||||
width: 330px;
|
||||
height: 100px;
|
||||
height: 120px;
|
||||
margin-right: 130px;
|
||||
margin-bottom: 24px;
|
||||
padding: 8px;
|
||||
@ -116,7 +126,9 @@ class PureAccessRights extends Component {
|
||||
|
||||
this.state = {
|
||||
showSelector: false,
|
||||
advancedOptions: []
|
||||
options: [],
|
||||
isLoading: false,
|
||||
selectedOptions: []
|
||||
};
|
||||
}
|
||||
|
||||
@ -146,40 +158,49 @@ class PureAccessRights extends Component {
|
||||
}
|
||||
|
||||
onChangeAdmin = (userId, isAdmin) => {
|
||||
this.onLoading(true);
|
||||
const { changeAdmins, productId } = this.props;
|
||||
|
||||
changeAdmins(userId, productId, isAdmin).catch(error => {
|
||||
changeAdmins(userId, productId, isAdmin)
|
||||
.catch(error => {
|
||||
toastr.error("accessRights onChangeAdmin", error);
|
||||
//console.log("accessRights onChangeAdmin", error)
|
||||
});
|
||||
})
|
||||
.finally(() => this.onLoading(false));
|
||||
};
|
||||
|
||||
onShowGroupSelector = () =>
|
||||
this.setState({
|
||||
showSelector: !this.state.showSelector,
|
||||
advancedOptions: this.props.advancedOptions
|
||||
options: this.props.options,
|
||||
selectedOptions: []
|
||||
});
|
||||
|
||||
onSelect = selected => {
|
||||
selected.map(user => this.onChangeAdmin(user.key, true));
|
||||
this.onShowGroupSelector();
|
||||
this.setState({ selectedOptions: selected });
|
||||
};
|
||||
|
||||
onSearchUsers = template =>
|
||||
onSearchUsers = template => {
|
||||
this.onLoading(true);
|
||||
this.setState({
|
||||
advancedOptions: this.filterUserSelectorOptions(
|
||||
this.props.advancedOptions,
|
||||
template
|
||||
)
|
||||
options: this.filterUserSelectorOptions(this.props.options, template)
|
||||
});
|
||||
this.onLoading(false);
|
||||
};
|
||||
|
||||
filterUserSelectorOptions = (options, template) => {
|
||||
return options.filter(option => option.label.indexOf(template) > -1);
|
||||
filterUserSelectorOptions = (options, template) =>
|
||||
options.filter(option => option.label.indexOf(template) > -1);
|
||||
|
||||
onLoading = status => {
|
||||
console.log("onLoading status", status);
|
||||
this.setState({ isLoading: status });
|
||||
};
|
||||
|
||||
render() {
|
||||
const { t, owner, admins } = this.props;
|
||||
const { showSelector, advancedOptions } = this.state;
|
||||
const { showSelector, options, selectedOptions, isLoading } = this.state;
|
||||
const OwnerOpportunities = t("AccessRightsOwnerOpportunities").split("|");
|
||||
|
||||
const countItems = [
|
||||
@ -188,22 +209,33 @@ class PureAccessRights extends Component {
|
||||
{ key: 100, label: t("CountPerPage", { count: 100 }) }
|
||||
];
|
||||
|
||||
console.log("isLoading", isLoading);
|
||||
|
||||
return (
|
||||
<MainContainer>
|
||||
<RequestLoader
|
||||
visible={isLoading}
|
||||
zIndex={256}
|
||||
loaderSize={16}
|
||||
loaderColor={"#999"}
|
||||
label={`${t("LoadingProcessing")} ${t("LoadingDescription")}`}
|
||||
fontSize={12}
|
||||
fontColor={"#999"}
|
||||
className="page_loader"
|
||||
/>
|
||||
<HeaderContainer>
|
||||
<Text.Body fontSize={18}>{t("PortalOwner")}</Text.Body>
|
||||
</HeaderContainer>
|
||||
|
||||
<BodyContainer>
|
||||
<AvatarContainer>
|
||||
<div className="avatar_wrapper">
|
||||
<Avatar
|
||||
className="avatar_wrapper"
|
||||
size="big"
|
||||
role="owner"
|
||||
userName={owner.userName}
|
||||
source={owner.avatar}
|
||||
/>
|
||||
</div>
|
||||
<div className="avatar_body">
|
||||
<Text.Body className="avatar_text" fontSize={16} isBold={true}>
|
||||
{owner.displayName}
|
||||
@ -234,20 +266,18 @@ class PureAccessRights extends Component {
|
||||
label={t("AdminSettings")}
|
||||
isOpen={true}
|
||||
>
|
||||
<div className="selector-button">
|
||||
<SelectorAddButton
|
||||
//isDisabled={isDisabled}
|
||||
className="selector-button"
|
||||
isDisabled={isLoading}
|
||||
//title={showGroupSelectorButtonTitle}
|
||||
onClick={this.onShowGroupSelector}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="advanced-selector">
|
||||
<AdvancedSelector
|
||||
displayType="dropdown"
|
||||
isOpen={showSelector}
|
||||
placeholder="placeholder"
|
||||
options={advancedOptions}
|
||||
options={options}
|
||||
onSearchChanged={this.onSearchUsers}
|
||||
//groups={groups}
|
||||
isMultiSelect={true}
|
||||
@ -256,9 +286,9 @@ class PureAccessRights extends Component {
|
||||
onCancel={this.onShowGroupSelector}
|
||||
onAddNewClick={() => console.log("onAddNewClick")}
|
||||
selectAllLabel="selectorSelectAllText"
|
||||
selectedOptions={selectedOptions}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="wrapper">
|
||||
<RowContainer manualHeight={`${admins.length * 50}px`}>
|
||||
{admins.map(user => {
|
||||
@ -297,7 +327,7 @@ class PureAccessRights extends Component {
|
||||
<div style={{ marginLeft: "60px" }}>
|
||||
<IconButton
|
||||
size="16"
|
||||
isDisabled={false}
|
||||
isDisabled={isLoading}
|
||||
onClick={this.onChangeAdmin.bind(
|
||||
this,
|
||||
user.id,
|
||||
@ -368,7 +398,9 @@ class PureAccessRights extends Component {
|
||||
</RadioButtonContainer>
|
||||
<ProjectsBody>
|
||||
<Text.Body className="projects_margin" fontSize={12}>
|
||||
{t("AccessRightsProductUsersCan", { category: t("People") })}
|
||||
{t("AccessRightsProductUsersCan", {
|
||||
category: t("People")
|
||||
})}
|
||||
</Text.Body>
|
||||
<Text.Body fontSize={12}>
|
||||
<li>{t("ViewProfilesAndGroups")}</li>
|
||||
@ -396,45 +428,20 @@ const AccessRights = props => {
|
||||
);
|
||||
};
|
||||
|
||||
const filterUsers = (users, ownerId) =>
|
||||
filter(users, function(f) {
|
||||
return f.id !== ownerId;
|
||||
});
|
||||
const filterAdminUsers = users => {
|
||||
const newArray = [];
|
||||
users.map(user => {
|
||||
if (user.listAdminModules !== undefined) {
|
||||
if (!user.listAdminModules.includes("people")) {
|
||||
newArray.push(user);
|
||||
}
|
||||
} else {
|
||||
newArray.push(user);
|
||||
}
|
||||
});
|
||||
return newArray.filter(user => !user.isVisitor);
|
||||
};
|
||||
|
||||
const AdvancedSelectorFunction = users =>
|
||||
users.map(user => {
|
||||
return {
|
||||
key: user.id,
|
||||
label: user.displayName
|
||||
};
|
||||
});
|
||||
|
||||
function mapStateToProps(state) {
|
||||
const { ownerId } = state.auth.settings;
|
||||
const { admins, users } = state.settings;
|
||||
const arrayUsers = filterUsers(users, ownerId);
|
||||
const filterArrayUsers = filterAdminUsers(arrayUsers);
|
||||
const { admins, users, owner } = state.settings;
|
||||
const arrayUsers = getUsers(users, ownerId);
|
||||
const filterArrayUsers = getAdmins(arrayUsers);
|
||||
const options = getSelectorOptions(filterArrayUsers);
|
||||
|
||||
return {
|
||||
users: filterArrayUsers,
|
||||
admins: filterUsers(admins, ownerId),
|
||||
admins: getUsers(admins, ownerId),
|
||||
productId: state.auth.modules[0].id,
|
||||
owner: state.settings.owner,
|
||||
owner,
|
||||
ownerId,
|
||||
advancedOptions: AdvancedSelectorFunction(filterArrayUsers)
|
||||
options
|
||||
};
|
||||
}
|
||||
|
||||
@ -444,7 +451,7 @@ AccessRights.defaultProps = {
|
||||
productId: "",
|
||||
ownerId: "",
|
||||
owner: {},
|
||||
advancedOptions: []
|
||||
options: []
|
||||
};
|
||||
|
||||
AccessRights.propTypes = {
|
||||
@ -453,7 +460,7 @@ AccessRights.propTypes = {
|
||||
productId: PropTypes.string,
|
||||
ownerId: PropTypes.string,
|
||||
owner: PropTypes.object,
|
||||
advancedOptions: PropTypes.arrayOf(PropTypes.object)
|
||||
options: PropTypes.arrayOf(PropTypes.object)
|
||||
};
|
||||
|
||||
export default connect(
|
||||
|
@ -25,6 +25,8 @@
|
||||
"Settings": "Settings",
|
||||
"PreviousPage": "Previous",
|
||||
"NextPage": "Next",
|
||||
"LoadingProcessing": "Loading...",
|
||||
"LoadingDescription": "Please wait...",
|
||||
|
||||
|
||||
|
||||
|
@ -24,6 +24,8 @@
|
||||
"Settings": "Настройки",
|
||||
"PreviousPage": "Предыдущая",
|
||||
"NextPage": "Следующая",
|
||||
"LoadingProcessing": "Загрузка...",
|
||||
"LoadingDescription": "Пожалуйста подождите...",
|
||||
|
||||
|
||||
|
||||
|
@ -26,7 +26,8 @@
|
||||
"ForgotPassword",
|
||||
"PasswordRecoveryTitle",
|
||||
"MessageSendPasswordRecoveryInstructionsOnEmail",
|
||||
"RememberHelper"
|
||||
"RememberHelper",
|
||||
"LoadingDescription"
|
||||
]
|
||||
},
|
||||
"Confirm": {
|
||||
|
31
web/ASC.Web.Client/src/store/settings/selectors.js
Normal file
31
web/ASC.Web.Client/src/store/settings/selectors.js
Normal file
@ -0,0 +1,31 @@
|
||||
import { filter } from "lodash";
|
||||
|
||||
export function getUsers(users, ownerId) {
|
||||
return filter(users, function(f) {
|
||||
return f.id !== ownerId;
|
||||
});
|
||||
}
|
||||
|
||||
export function getAdmins(users) {
|
||||
const newArray = [];
|
||||
users.map(user => {
|
||||
if (user.listAdminModules !== undefined) {
|
||||
if (!user.listAdminModules.includes("people")) {
|
||||
newArray.push(user);
|
||||
}
|
||||
} else {
|
||||
newArray.push(user);
|
||||
}
|
||||
});
|
||||
return newArray.filter(user => !user.isVisitor);
|
||||
}
|
||||
|
||||
export function getSelectorOptions(users) {
|
||||
return users.map(user => {
|
||||
return {
|
||||
key: user.id,
|
||||
label: user.displayName,
|
||||
selected: false
|
||||
};
|
||||
});
|
||||
}
|
Loading…
Reference in New Issue
Block a user