From 0d9f54cbf35391bb4cd95c30c3b09eb80b31cc42 Mon Sep 17 00:00:00 2001
From: Finley Ge <32237950+FinleyGe@users.noreply.github.com>
Date: Tue, 14 Jan 2025 19:16:52 +0800
Subject: [PATCH] fix: scroll fetch (#3592)

---
 .../permission/MemberManager/MemberModal.tsx  | 245 +++++++++---------
 1 file changed, 124 insertions(+), 121 deletions(-)

diff --git a/projects/app/src/components/support/permission/MemberManager/MemberModal.tsx b/projects/app/src/components/support/permission/MemberManager/MemberModal.tsx
index 46ab85954d76..21b45d4ef2c6 100644
--- a/projects/app/src/components/support/permission/MemberManager/MemberModal.tsx
+++ b/projects/app/src/components/support/permission/MemberManager/MemberModal.tsx
@@ -51,7 +51,7 @@ function MemberModal({
   addPermissionOnly?: boolean;
 }) {
   const { t } = useTranslation();
-  const { userInfo, myGroups } = useUserStore();
+  const { userInfo } = useUserStore();
   const collaboratorList = useContextSelector(CollaboratorContext, (v) => v.collaboratorList);
   const [searchText, setSearchText] = useState<string>('');
   const [filterClass, setFilterClass] = useState<'member' | 'org' | 'group'>();
@@ -299,130 +299,133 @@ function MemberModal({
                 </Box>
               )}
 
-              <Flex flexDirection={'column'} gap={1} userSelect={'none'}>
-                <ScrollData>
-                  {filterMembers.map((member) => {
-                    const onChange = () => {
-                      setSelectedMembers((state) => {
-                        if (state.includes(member.tmbId)) {
-                          return state.filter((v) => v !== member.tmbId);
-                        }
-                        return [...state, member.tmbId];
-                      });
-                    };
-                    const collaborator = collaboratorList?.find((v) => v.tmbId === member.tmbId);
-                    return (
-                      <HStack
-                        justifyContent="space-between"
-                        key={member.tmbId}
-                        py="2"
-                        px="3"
-                        borderRadius="sm"
-                        alignItems="center"
-                        _hover={HoverBoxStyle}
-                        onClick={onChange}
-                      >
-                        <Checkbox
-                          isChecked={selectedMemberIdList.includes(member.tmbId)}
-                          pointerEvents="none"
-                        />
-                        <MyAvatar src={member.avatar} w="1.5rem" borderRadius={'50%'} />
-                        <Box w="full" ml="2">
-                          {member.memberName}
-                        </Box>
-                        <PermissionTags permission={collaborator?.permission.value} />
-                      </HStack>
-                    );
-                  })}
-                  {filterOrgs.map((org) => {
-                    const onChange = () => {
-                      setSelectedOrgIdList((state) => {
-                        if (state.includes(org._id)) {
-                          return state.filter((v) => v !== org._id);
-                        }
-                        return [...state, org._id];
-                      });
-                    };
-                    const collaborator = collaboratorList?.find((v) => v.orgId === org._id);
-                    return (
-                      <HStack
-                        justifyContent="space-between"
-                        key={org._id}
-                        py="2"
-                        px="3"
-                        borderRadius="sm"
-                        alignItems="center"
-                        _hover={HoverBoxStyle}
-                        onClick={onChange}
-                      >
-                        <Checkbox
-                          isChecked={selectedOrgIdList.includes(org._id)}
-                          pointerEvents="none"
-                        />
-                        <MyAvatar src={org.avatar} w="1.5rem" borderRadius={'50%'} />
-                        <HStack ml="2" w="full" gap="5px">
-                          <Text>{org.name}</Text>
-                          {org.count && (
-                            <>
-                              <Tag size="sm" my="auto">
-                                {org.count}
-                              </Tag>
-                            </>
-                          )}
-                        </HStack>
-                        <PermissionTags permission={collaborator?.permission.value} />
+              <ScrollData
+                flexDirection={'column'}
+                gap={1}
+                userSelect={'none'}
+                height={'fit-content'}
+              >
+                {filterMembers.map((member) => {
+                  const onChange = () => {
+                    setSelectedMembers((state) => {
+                      if (state.includes(member.tmbId)) {
+                        return state.filter((v) => v !== member.tmbId);
+                      }
+                      return [...state, member.tmbId];
+                    });
+                  };
+                  const collaborator = collaboratorList?.find((v) => v.tmbId === member.tmbId);
+                  return (
+                    <HStack
+                      justifyContent="space-between"
+                      key={member.tmbId}
+                      py="2"
+                      px="3"
+                      borderRadius="sm"
+                      alignItems="center"
+                      _hover={HoverBoxStyle}
+                      onClick={onChange}
+                    >
+                      <Checkbox
+                        isChecked={selectedMemberIdList.includes(member.tmbId)}
+                        pointerEvents="none"
+                      />
+                      <MyAvatar src={member.avatar} w="1.5rem" borderRadius={'50%'} />
+                      <Box w="full" ml="2">
+                        {member.memberName}
+                      </Box>
+                      <PermissionTags permission={collaborator?.permission.value} />
+                    </HStack>
+                  );
+                })}
+                {filterOrgs.map((org) => {
+                  const onChange = () => {
+                    setSelectedOrgIdList((state) => {
+                      if (state.includes(org._id)) {
+                        return state.filter((v) => v !== org._id);
+                      }
+                      return [...state, org._id];
+                    });
+                  };
+                  const collaborator = collaboratorList?.find((v) => v.orgId === org._id);
+                  return (
+                    <HStack
+                      justifyContent="space-between"
+                      key={org._id}
+                      py="2"
+                      px="3"
+                      borderRadius="sm"
+                      alignItems="center"
+                      _hover={HoverBoxStyle}
+                      onClick={onChange}
+                    >
+                      <Checkbox
+                        isChecked={selectedOrgIdList.includes(org._id)}
+                        pointerEvents="none"
+                      />
+                      <MyAvatar src={org.avatar} w="1.5rem" borderRadius={'50%'} />
+                      <HStack ml="2" w="full" gap="5px">
+                        <Text>{org.name}</Text>
                         {org.count && (
-                          <MyIcon
-                            name="core/chat/chevronRight"
-                            w="16px"
-                            p="4px"
-                            rounded={'6px'}
-                            _hover={{
-                              bgColor: 'myGray.200'
-                            }}
-                            onClick={() => {
-                              setParentPath(getOrgChildrenPath(org));
-                            }}
-                          />
+                          <>
+                            <Tag size="sm" my="auto">
+                              {org.count}
+                            </Tag>
+                          </>
                         )}
                       </HStack>
-                    );
-                  })}
-                  {filterGroups.map((group) => {
-                    const onChange = () => {
-                      setSelectedGroupIdList((state) => {
-                        if (state.includes(group._id)) {
-                          return state.filter((v) => v !== group._id);
-                        }
-                        return [...state, group._id];
-                      });
-                    };
-                    const collaborator = collaboratorList?.find((v) => v.groupId === group._id);
-                    return (
-                      <HStack
-                        justifyContent="space-between"
-                        key={group._id}
-                        py="2"
-                        px="3"
-                        borderRadius="sm"
-                        alignItems="center"
-                        _hover={HoverBoxStyle}
-                        onClick={onChange}
-                      >
-                        <Checkbox
-                          isChecked={selectedGroupIdList.includes(group._id)}
-                          pointerEvents="none"
+                      <PermissionTags permission={collaborator?.permission.value} />
+                      {org.count && (
+                        <MyIcon
+                          name="core/chat/chevronRight"
+                          w="16px"
+                          p="4px"
+                          rounded={'6px'}
+                          _hover={{
+                            bgColor: 'myGray.200'
+                          }}
+                          onClick={() => {
+                            setParentPath(getOrgChildrenPath(org));
+                          }}
                         />
-                        <MyAvatar src={group.avatar} w="1.5rem" borderRadius={'50%'} />
-                        <Box ml="2" w="full">
-                          {group.name === DefaultGroupName ? userInfo?.team.teamName : group.name}
-                        </Box>
-                        <PermissionTags permission={collaborator?.permission.value} />
-                      </HStack>
-                    );
-                  })}
-                </ScrollData>
-              </Flex>
+                      )}
+                    </HStack>
+                  );
+                })}
+                {filterGroups.map((group) => {
+                  const onChange = () => {
+                    setSelectedGroupIdList((state) => {
+                      if (state.includes(group._id)) {
+                        return state.filter((v) => v !== group._id);
+                      }
+                      return [...state, group._id];
+                    });
+                  };
+                  const collaborator = collaboratorList?.find((v) => v.groupId === group._id);
+                  return (
+                    <HStack
+                      justifyContent="space-between"
+                      key={group._id}
+                      py="2"
+                      px="3"
+                      borderRadius="sm"
+                      alignItems="center"
+                      _hover={HoverBoxStyle}
+                      onClick={onChange}
+                    >
+                      <Checkbox
+                        isChecked={selectedGroupIdList.includes(group._id)}
+                        pointerEvents="none"
+                      />
+                      <MyAvatar src={group.avatar} w="1.5rem" borderRadius={'50%'} />
+                      <Box ml="2" w="full">
+                        {group.name === DefaultGroupName ? userInfo?.team.teamName : group.name}
+                      </Box>
+                      <PermissionTags permission={collaborator?.permission.value} />
+                    </HStack>
+                  );
+                })}
+              </ScrollData>
             </Flex>
           </Flex>