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;