IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web:Client: add owner and admin access rights support to accounts

Browse Source
This commit is contained in:
TimofeyBoyko 2022-09-16 11:21:15 +03:00
parent c14bd6810d
commit a421bdfc0b
6 changed files with 438 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/client/src/components/Article/MainButton/index.js
View File

@ -11,7 +11,7 @@ import { encryptionUploadDialog } from "../../../helpers/desktop";
import { withRouter } from "react-router";
import MobileView from "./MobileView";
import { combineUrl } from "@docspace/common/utils";
import { combineUrl, isAdmin } from "@docspace/common/utils";
import config from "PACKAGE_FILE";
import withLoader from "../../../HOCs/withLoader";
import { Events } from "@docspace/common/constants";
@ -87,6 +87,9 @@ const ArticleMainButtonContent = (props) => {
enablePlugins,
currentColorScheme,
isOwner,
isAdmin,
} = props;
const isAccountsPage = selectedTreeNode[0] === "accounts";
@ -177,6 +180,8 @@ const ArticleMainButtonContent = (props) => {
React.useEffect(() => {
if (isRoomsFolder) return;
console.log(isOwner, isAdmin);
const folderUpload = !isMobile
? [
{
@ -228,7 +233,7 @@ const ArticleMainButtonContent = (props) => {
const actions = isAccountsPage
? [
{
isOwner && {
id: "main-button_administrator",
className: "main-button_drop-down",
icon: "/static/images/person.admin.react.svg",
@ -237,7 +242,7 @@ const ArticleMainButtonContent = (props) => {
action: "administrator",
key: "administrator",
},
{
isAdmin && {
id: "main-button_manager",
className: "main-button_drop-down",
icon: "/static/images/person.manager.react.svg",
@ -351,6 +356,8 @@ const ArticleMainButtonContent = (props) => {
isAccountsPage,
enablePlugins,
isRoomsFolder,
isOwner,
isAdmin,
onCreate,
onCreateRoom,
onInvite,
@ -465,6 +472,8 @@ export default inject(
const currentFolderId = selectedFolderStore.id;
const { isOwner, isAdmin } = auth.userStore.user;
return {
showText: auth.settingsStore.showText,
isMobileArticle: auth.settingsStore.isMobileArticle,
@ -493,6 +502,9 @@ export default inject(
enablePlugins,
currentColorScheme,
isOwner,
isAdmin,
};
}
)(

97
packages/client/src/pages/AccountsHome/InfoPanel/Body/SingleItem.js
View File

@ -24,7 +24,7 @@ const SingleItem = ({
const [statusLabel, setStatusLabel] = React.useState("");
const user = selection[0];
const { role, statusType, options } = user;
const { role, statusType, options, id } = user;
React.useEffect(() => {
getStatusLabel();
@ -45,7 +45,7 @@ const SingleItem = ({
const isPending = statusType === "pending";
const getRoomTypeLabel = React.useCallback((role) => {
const getUserTypeLabel = React.useCallback((role) => {
switch (role) {
case "owner":
return t("Common:Owner");
@ -84,6 +84,7 @@ const SingleItem = ({
isAdmin && options.push(managerOption);
// TODO: add check on manager type
options.push(userOption);
return options;
@ -96,7 +97,7 @@ const SingleItem = ({
[user, changeUserType, t]
);
const typeLabel = getRoomTypeLabel(role);
const typeLabel = getUserTypeLabel(role);
const getData = () => {
const newOptions = options.filter((option) => option !== "details");
@ -104,6 +105,67 @@ const SingleItem = ({
return getUserContextOptions(t, newOptions, user);
};
const renderTypeData = () => {
const typesOptions = getTypesOptions();
const combobox = (
<ComboBox
className="type-combobox"
selectedOption={
typesOptions.find((option) => option.key === role) || {}
}
options={typesOptions}
onSelect={onTypeChange}
scaled={false}
size="content"
displaySelectedOption
modernView
/>
);
const text = (
<Text
type="page"
title={typeLabel}
fontSize="13px"
fontWeight={600}
truncate
noSelect
>
{typeLabel}
</Text>
);
if (userId === id) return text;
console.log(userId, id);
switch (role) {
case "owner":
return text;
case "admin":
case "manager":
if (isOwner) {
return combobox;
} else {
return text;
}
case "user":
if (isOwner || isAdmin) {
return combobox;
} else {
return text;
}
default:
return text;
}
};
const typeData = renderTypeData();
return (
<>
<StyledInfoHeaderContainer isPending={isPending}>
@ -150,34 +212,7 @@ const SingleItem = ({
<Text className={"info_field"} noSelect title={t("Common:Type")}>
{t("Common:Type")}
</Text>
{((isOwner && role !== "owner") ||
(isAdmin && !isOwner && role !== "admin")) &&
statusType !== "disabled" &&
userId !== user.id ? (
<ComboBox
className="type-combobox"
selectedOption={getTypesOptions().find(
(option) => option.key === role
)}
options={getTypesOptions()}
onSelect={onTypeChange}
scaled={false}
size="content"
displaySelectedOption
modernView
/>
) : (
<Text
type="page"
title={typeLabel}
fontSize="13px"
fontWeight={600}
truncate
noSelect
>
{typeLabel}
</Text>
)}
{typeData}
<Text className={"info_field"} noSelect title={t("UserStatus")}>
{t("UserStatus")}
</Text>

100
packages/client/src/pages/AccountsHome/Section/Body/TableView/TableRow.js
View File

@ -148,6 +148,7 @@ const PeopleTableRow = (props) => {
position,
role,
rooms,
id,
} = item;
const isPending = statusType === "pending" || statusType === "disabled";
@ -187,6 +188,7 @@ const PeopleTableRow = (props) => {
isAdmin && options.push(managerOption);
// TODO: add check on manager type
options.push(userOption);
return options;
@ -217,7 +219,7 @@ const PeopleTableRow = (props) => {
return <>{options.map((option) => option)}</>;
}, []);
const getRoomTypeLabel = React.useCallback((role) => {
const getUserTypeLabel = React.useCallback((role) => {
switch (role) {
case "owner":
return t("Common:Owner");
@ -230,7 +232,7 @@ const PeopleTableRow = (props) => {
}
}, []);
const typeLabel = getRoomTypeLabel(role);
const typeLabel = getUserTypeLabel(role);
const isChecked = checkedProps.checked;
@ -242,6 +244,67 @@ const PeopleTableRow = (props) => {
setBufferSelection(item);
}, [isSeveralSelection, isChecked, item, setBufferSelection]);
const renderTypeCell = () => {
const typesOptions = getTypesOptions();
const combobox = (
<ComboBox
className="type-combobox"
selectedOption={
typesOptions.find((option) => option.key === role) || {}
}
options={typesOptions}
onSelect={onTypeChange}
scaled={false}
size="content"
displaySelectedOption
modernView
/>
);
const text = (
<Text
type="page"
title={position}
fontSize="13px"
fontWeight={400}
color={sideInfoColor}
truncate
noSelect
style={{ paddingLeft: "8px" }}
>
{typeLabel}
</Text>
);
if (userId === id) return text;
switch (role) {
case "owner":
return text;
case "admin":
case "manager":
if (isOwner) {
return combobox;
} else {
return text;
}
case "user":
if (isOwner || isAdmin) {
return combobox;
} else {
return text;
}
default:
return text;
}
};
const typeCell = renderTypeCell();
return (
<StyledWrapper
className={`user-item ${
@ -286,38 +349,7 @@ const PeopleTableRow = (props) => {
</Link>
<Badges statusType={statusType} />
</TableCell>
<TableCell className={"table-cell_type"}>
{((isOwner && role !== "owner") ||
(isAdmin && !isOwner && role !== "admin")) &&
statusType !== "disabled" &&
userId !== item.id ? (
<ComboBox
className="type-combobox"
selectedOption={getTypesOptions().find(
(option) => option.key === role
)}
options={getTypesOptions()}
onSelect={onTypeChange}
scaled={false}
size="content"
displaySelectedOption
modernView
/>
) : (
<Text
type="page"
title={position}
fontSize="13px"
fontWeight={400}
color={sideInfoColor}
truncate
noSelect
style={{ paddingLeft: "8px" }}
>
{typeLabel}
</Text>
)}
</TableCell>
<TableCell className={"table-cell_type"}>{typeCell}</TableCell>
<TableCell className="table-cell_room">
{!rooms?.length ? (
<Text

10
packages/client/src/pages/AccountsHome/Section/Header/index.js
View File

@ -157,6 +157,8 @@ const SectionHeaderContent = (props) => {
getCheckboxItemLabel,
setInfoPanelVisible,
isInfoPanelVisible,
isOwner,
isAdmin,
} = props;
//console.log("SectionHeaderContent render");
@ -208,7 +210,7 @@ const SectionHeaderContent = (props) => {
const getContextOptions = () => {
return [
{
isOwner && {
id: "main-button_administrator",
className: "main-button_drop-down",
icon: "/static/images/person.admin.react.svg",
@ -217,7 +219,7 @@ const SectionHeaderContent = (props) => {
"data-action": "administrator",
key: "administrator",
},
{
isAdmin && {
id: "main-button_manager",
className: "main-button_drop-down",
icon: "/static/images/person.manager.react.svg",
@ -317,6 +319,8 @@ export default withRouter(
isVisible: isInfoPanelVisible,
} = auth.infoPanelStore;
const { isOwner, isAdmin } = auth.userStore.user;
const { selectionStore, headerMenuStore, getHeaderMenu } = peopleStore;
const {
@ -339,6 +343,8 @@ export default withRouter(
getCheckboxItemLabel,
setInfoPanelVisible,
isInfoPanelVisible,
isOwner,
isAdmin,
};
})(
withTranslation([

2
packages/client/src/store/PeopleStore.js
View File

@ -141,8 +141,6 @@ class PeopleStore {
hasUsersToDisable,
hasUsersToInvite,
hasUsersToRemove,
getUsersToRemoveIds,
selection,
} = this.selectionStore;
const {
setActiveDialogVisible,

322
packages/client/src/store/SelectionPeopleStore.js
View File

@ -126,34 +126,60 @@ class SelectionStore {
}
get hasUsersToMakeEmployees() {
const isOwner = this.peopleStore.authStore.userStore.user.isOwner;
const users = this.selection.filter((x) => {
return (
(!x.isOwner &&
!x.isAdmin &&
x.status !== EmployeeStatus.Disabled &&
x.id !== this.peopleStore.authStore.userStore.user.id) ||
(x.isAdmin &&
isOwner &&
x.status !== EmployeeStatus.Disabled &&
x.id !== this.peopleStore.authStore.userStore.user.id)
);
});
const { id, isOwner, isAdmin } = this.peopleStore.authStore.userStore.user;
return users.length > 0;
if (isOwner) {
const users = this.selection.filter(
(x) => x.status !== EmployeeStatus.Disabled && x.id !== id
);
return users.length > 0;
}
// TODO: add check on manager type
if (isAdmin && !isOwner) {
const users = this.selection.filter(
(x) =>
x.status !== EmployeeStatus.Disabled &&
x.id !== id &&
!x.isAdmin &&
!x.isOwner
);
return users.length > 0;
}
return false;
}
get getUsersToMakeEmployeesIds() {
const users = this.selection.filter((x) => {
return (
!x.isOwner &&
x.status !== EmployeeStatus.Disabled &&
x.id !== this.peopleStore.authStore.userStore.user.id
const { id, isOwner, isAdmin } = this.peopleStore.authStore.userStore.user;
if (isOwner) {
const users = this.selection.filter(
(x) => x.status !== EmployeeStatus.Disabled && x.id !== id
);
});
return users.map((u) => u.id);
return users.map((u) => u.id);
}
// TODO: add check on manager type
if (isAdmin && !isOwner) {
const users = this.selection.filter(
(x) =>
x.status !== EmployeeStatus.Disabled &&
x.id !== id &&
!x.isAdmin &&
!x.isOwner
);
return users.map((u) => u.id);
}
return false;
}
//TODO: delete this
get hasUsersToMakeGuests() {
const users = this.selection.filter((x) => {
return (
@ -166,7 +192,7 @@ class SelectionStore {
});
return !!users.length;
}
//TODO: delete this
get getUsersToMakeGuestsIds() {
const users = this.selection.filter((x) => {
return (
@ -181,74 +207,292 @@ class SelectionStore {
}
get hasUsersToActivate() {
const { id, isOwner, isAdmin } = this.peopleStore.authStore.userStore.user;
if (isOwner) {
const users = this.selection.filter(
(x) => x.status !== EmployeeStatus.Active && x.id !== id
);
return users.length > 0;
}
if (isAdmin && !isOwner) {
const users = this.selection.filter(
(x) =>
x.status !== EmployeeStatus.Active &&
x.id !== id &&
!x.isAdmin &&
!x.isOwner
);
return users.length > 0;
}
// TODO: add check on manager type
const users = this.selection.filter(
(x) =>
!x.isOwner &&
x.status !== EmployeeStatus.Active &&
x.id !== this.peopleStore.authStore.userStore.user.id
x.id !== id &&
!x.isAdmin &&
!x.isOwner
);
return !!users.length;
return users.length > 0;
}
get getUsersToActivateIds() {
const { id, isOwner, isAdmin } = this.peopleStore.authStore.userStore.user;
if (isOwner) {
const users = this.selection.filter(
(x) => x.status !== EmployeeStatus.Active && x.id !== id
);
return users.map((u) => u.id);
}
if (isAdmin && !isOwner) {
const users = this.selection.filter(
(x) =>
x.status !== EmployeeStatus.Active &&
x.id !== id &&
!x.isAdmin &&
!x.isOwner
);
return users.map((u) => u.id);
}
// TODO: add check on manager type
const users = this.selection.filter(
(x) =>
!x.isOwner &&
x.status !== EmployeeStatus.Active &&
x.id !== this.peopleStore.authStore.userStore.user.id
x.id !== id &&
!x.isAdmin &&
!x.isOwner
);
return users.map((u) => u.id);
}
get hasUsersToDisable() {
const { id, isOwner, isAdmin } = this.peopleStore.authStore.userStore.user;
if (isOwner) {
const users = this.selection.filter(
(x) => x.status !== EmployeeStatus.Disabled && x.id !== id
);
return users.length > 0;
}
if (isAdmin && !isOwner) {
const users = this.selection.filter(
(x) =>
x.status !== EmployeeStatus.Disabled &&
x.id !== id &&
!x.isAdmin &&
!x.isOwner
);
return users.length > 0;
}
// TODO: add check on manager type
const users = this.selection.filter(
(x) =>
!x.isOwner &&
x.status !== EmployeeStatus.Disabled &&
x.id !== this.peopleStore.authStore.userStore.user.id
x.id !== id &&
!x.isAdmin &&
!x.isOwner
);
return !!users.length;
return users.length > 0;
}
get getUsersToDisableIds() {
const { id, isOwner, isAdmin } = this.peopleStore.authStore.userStore.user;
if (isOwner) {
const users = this.selection.filter(
(x) => x.status !== EmployeeStatus.Active && x.id !== id
);
return users.map((u) => u.id);
}
if (isAdmin && !isOwner) {
const users = this.selection.filter(
(x) =>
x.status !== EmployeeStatus.Active &&
x.id !== id &&
!x.isAdmin &&
!x.isOwner
);
return users.map((u) => u.id);
}
// TODO: add check on manager type
const users = this.selection.filter(
(x) =>
!x.isOwner &&
x.status !== EmployeeStatus.Disabled &&
x.id !== this.peopleStore.authStore.userStore.user.id
x.status !== EmployeeStatus.Active &&
x.id !== id &&
!x.isAdmin &&
!x.isOwner
);
return users.map((u) => u.id);
}
get hasUsersToInvite() {
const { id, isOwner, isAdmin } = this.peopleStore.authStore.userStore.user;
if (isOwner) {
const users = this.selection.filter(
(x) =>
x.activationStatus === EmployeeActivationStatus.Pending &&
x.status === EmployeeStatus.Active &&
x.id !== id
);
return users.length > 0;
}
if (isAdmin && !isOwner) {
const users = this.selection.filter(
(x) =>
x.activationStatus === EmployeeActivationStatus.Pending &&
x.status === EmployeeStatus.Active &&
x.id !== id &&
!x.isAdmin &&
!x.isOwner
);
return users.length > 0;
}
// TODO: add check on manager type
const users = this.selection.filter(
(x) =>
x.activationStatus === EmployeeActivationStatus.Pending &&
x.status === EmployeeStatus.Active
x.status === EmployeeStatus.Active &&
x.id !== id &&
!x.isAdmin &&
!x.isOwner
);
return !!users.length;
return users.length > 0;
}
get getUsersToInviteIds() {
const { id, isOwner, isAdmin } = this.peopleStore.authStore.userStore.user;
if (isOwner) {
const users = this.selection.filter(
(x) =>
x.activationStatus === EmployeeActivationStatus.Pending &&
x.status === EmployeeStatus.Active &&
x.id !== id
);
return users.map((u) => u.id);
}
if (isAdmin && !isOwner) {
const users = this.selection.filter(
(x) =>
x.activationStatus === EmployeeActivationStatus.Pending &&
x.status === EmployeeStatus.Active &&
x.id !== id &&
!x.isAdmin &&
!x.isOwner
);
return users.map((u) => u.id);
}
// TODO: add check on manager type
const users = this.selection.filter(
(x) =>
x.activationStatus === EmployeeActivationStatus.Pending &&
x.status === EmployeeStatus.Active
x.status === EmployeeStatus.Active &&
x.id !== id &&
!x.isAdmin &&
!x.isOwner
);
return users.map((u) => u.id);
}
get hasUsersToRemove() {
const { id, isOwner, isAdmin } = this.peopleStore.authStore.userStore.user;
if (isOwner) {
const users = this.selection.filter(
(x) => x.status === EmployeeStatus.Disabled && x.id !== id
);
return users.length > 0;
}
if (isAdmin && !isOwner) {
const users = this.selection.filter(
(x) =>
x.status === EmployeeStatus.Disabled &&
x.id !== id &&
!x.isAdmin &&
!x.isOwner
);
return users.length > 0;
}
// TODO: add check on manager type
const users = this.selection.filter(
(x) => x.status === EmployeeStatus.Disabled
(x) =>
x.status === EmployeeStatus.Disabled &&
x.id !== id &&
!x.isAdmin &&
!x.isOwner
);
return !!users.length;
return users.length > 0;
}
get getUsersToRemoveIds() {
const { id, isOwner, isAdmin } = this.peopleStore.authStore.userStore.user;
if (isOwner) {
const users = this.selection.filter(
(x) => x.status === EmployeeStatus.Disabled && x.id !== id
);
return users.map((u) => u.id);
}
if (isAdmin && !isOwner) {
const users = this.selection.filter(
(x) =>
x.status === EmployeeStatus.Disabled &&
x.id !== id &&
!x.isAdmin &&
!x.isOwner
);
return users.map((u) => u.id);
}
// TODO: add check on manager type
const users = this.selection.filter(
(x) => x.status === EmployeeStatus.Disabled
(x) =>
x.status === EmployeeStatus.Disabled &&
x.id !== id &&
!x.isAdmin &&
!x.isOwner
);
return users.map((u) => u.id);
}
}