diff --git a/packages/client/src/components/dialogs/EditGroupMembersDialog/EditGroupMembersDialog.styled.ts b/packages/client/src/components/dialogs/EditGroupMembersDialog/EditGroupMembersDialog.styled.ts
new file mode 100644
index 0000000000..3849b9080b
--- /dev/null
+++ b/packages/client/src/components/dialogs/EditGroupMembersDialog/EditGroupMembersDialog.styled.ts
@@ -0,0 +1,38 @@
+// (c) Copyright Ascensio System SIA 2009-2024
+//
+// This program is a free software product.
+// You can redistribute it and/or modify it under the terms
+// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
+// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
+// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
+// any third-party rights.
+//
+// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
+// of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For details, see
+// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+//
+// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
+//
+// The interactive user interfaces in modified source and object code versions of the Program must
+// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
+//
+// Pursuant to Section 7(b) of the License you must retain the original Product logo when
+// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
+// trademark law for use of our trademarks.
+//
+// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
+// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
+// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+
+import styled from "styled-components";
+import { ModalDialog } from "@docspace/shared/components/modal-dialog";
+
+export const StyledModalDialog = styled(ModalDialog)`
+ .modal-body {
+ padding: 0;
+ }
+
+ .search-input {
+ margin: 16px 16px 12px;
+ }
+`;
diff --git a/packages/client/src/components/dialogs/EditGroupMembersDialog/index.tsx b/packages/client/src/components/dialogs/EditGroupMembersDialog/index.tsx
index e6b07383a0..f65d9f4984 100644
--- a/packages/client/src/components/dialogs/EditGroupMembersDialog/index.tsx
+++ b/packages/client/src/components/dialogs/EditGroupMembersDialog/index.tsx
@@ -34,8 +34,10 @@ import { getGroupMembersInRoom } from "@docspace/shared/api/groups";
import { useTranslation } from "react-i18next";
import { InputSize } from "@docspace/shared/components/text-input";
import { SearchInput } from "@docspace/shared/components/search-input";
-import GroupMember from "./GroupMember";
+import GroupMember from "./sub-components/GroupMember";
import EmptyContainer from "./EmptyContainer";
+import GroupMembersList from "./sub-components/GroupMembersList/GroupMembersList";
+import { StyledModalDialog } from "./EditGroupMembersDialog.styled";
interface EditGroupMembersProps {
visible: boolean;
@@ -87,7 +89,7 @@ const EditGroupMembers = ({
}
return (
-
-
-
{isSearchListEmpty && }
- {hasMembers &&
- filteredGroupMembers.map(({ user, ...rest }) => (
-
- ))}
+ {/*{hasMembers &&*/}
+ {/* filteredGroupMembers.map(({ user, ...rest }) => (*/}
+ {/* */}
+ {/* ))}*/}
+ {hasMembers && }
-
+
);
};
diff --git a/packages/client/src/components/dialogs/EditGroupMembersDialog/GroupMember/index.styled.ts b/packages/client/src/components/dialogs/EditGroupMembersDialog/sub-components/GroupMember/index.styled.ts
similarity index 99%
rename from packages/client/src/components/dialogs/EditGroupMembersDialog/GroupMember/index.styled.ts
rename to packages/client/src/components/dialogs/EditGroupMembersDialog/sub-components/GroupMember/index.styled.ts
index 674176a797..f3e0e01173 100644
--- a/packages/client/src/components/dialogs/EditGroupMembersDialog/GroupMember/index.styled.ts
+++ b/packages/client/src/components/dialogs/EditGroupMembersDialog/sub-components/GroupMember/index.styled.ts
@@ -31,7 +31,7 @@ export const GroupMember = styled.div<{ isExpect: boolean }>`
display: flex;
align-items: center;
gap: 8px;
- padding: 8px 0;
+ padding: 8px 16px;
.avatar {
min-width: 32px;
diff --git a/packages/client/src/components/dialogs/EditGroupMembersDialog/GroupMember/index.tsx b/packages/client/src/components/dialogs/EditGroupMembersDialog/sub-components/GroupMember/index.tsx
similarity index 91%
rename from packages/client/src/components/dialogs/EditGroupMembersDialog/GroupMember/index.tsx
rename to packages/client/src/components/dialogs/EditGroupMembersDialog/sub-components/GroupMember/index.tsx
index f9f65f4379..e1740c0230 100644
--- a/packages/client/src/components/dialogs/EditGroupMembersDialog/GroupMember/index.tsx
+++ b/packages/client/src/components/dialogs/EditGroupMembersDialog/sub-components/GroupMember/index.tsx
@@ -44,19 +44,25 @@ import { HelpButton } from "@docspace/shared/components/help-button";
import { getUserRoleOptions } from "@docspace/shared/utils/room-members/getUserRoleOptions";
import { ShareAccessRights } from "@docspace/shared/enums";
import { getUserRole, getUserTypeLabel } from "@docspace/shared/utils/common";
+import { useTranslation } from "react-i18next";
interface GroupMemberProps {
- t: any;
- user: any;
+ member: any;
infoPanelSelection: any;
}
-const GroupMember = ({ t, user, infoPanelSelection }: GroupMemberProps) => {
+const GroupMember = ({ member, infoPanelSelection }: GroupMemberProps) => {
+ const { user } = member;
+
const [isLoading, setIsLoading] = useState(false);
+ const { t } = useTranslation("Common");
const userRole = user.isOwner
? getUserRoleOptions(t).portalAdmin
- : getUserRoleOptionsByUserAccess(t, user.userAccess || user.groupAccess);
+ : getUserRoleOptionsByUserAccess(
+ t,
+ member.userAccess || member.groupAccess,
+ );
const fullRoomRoleOptions = getUserRoleOptionsByRoomType(
t,
@@ -86,7 +92,7 @@ const GroupMember = ({ t, user, infoPanelSelection }: GroupMemberProps) => {
else
selectedUserRoleCBOption = getUserRoleOptionsByUserAccess(
t,
- user.userAccess || user.groupAccess,
+ member.userAccess || member.groupAccess,
);
const availableUserRoleCBOptions = filterUserRoleOptions(
@@ -101,7 +107,7 @@ const GroupMember = ({ t, user, infoPanelSelection }: GroupMemberProps) => {
notify: false,
sharingMessage: "",
})
- .then(() => (user.userAccess = userRoleOption.access))
+ .then(() => (member.userAccess = userRoleOption.access))
.catch((err) => toastr.error(err))
.finally(() => setIsLoading(false));
};
@@ -134,8 +140,8 @@ const GroupMember = ({ t, user, infoPanelSelection }: GroupMemberProps) => {
- {user.userAccess &&
- user.userAccess !== user.groupAccess &&
+ {member.userAccess &&
+ member.userAccess !== member.groupAccess &&
!user.isOwner && (
{
{userRole && userRoleOptions && (
- {user.canEditAccess && !user.isOwner ? (
+ {member.canEditAccess && !user.isOwner ? (
{
+ const member = data[index];
+
+ return (
+
+
+
+ );
+}, areEqual);
+
+const GroupMembersList = ({ members }) => {
+ return (
+
+ {({ height, width }) => (
+
+ {Row}
+
+ )}
+
+ );
+};
+
+export default GroupMembersList;