From 1eaba6e77f57c8d8f745336f2b857236ebf9a47a Mon Sep 17 00:00:00 2001
From: Philip Okugbe <16838612+Philipinho@users.noreply.github.com>
Date: Tue, 8 Apr 2025 13:34:00 +0100
Subject: [PATCH] fix: bug fixes (#1000)

* sort by groups first

* add scroll area

* fix group members pagination

* move pagination to the right
---
 .../client/src/components/common/paginate.tsx |   2 +-
 .../features/group/services/group-service.ts  |   2 +-
 .../space/components/space-members.tsx        | 183 +++++++++---------
 .../components/workspace-members-table.tsx    |   1 -
 .../database/repos/space/space-member.repo.ts |   1 +
 5 files changed, 99 insertions(+), 90 deletions(-)

diff --git a/apps/client/src/components/common/paginate.tsx b/apps/client/src/components/common/paginate.tsx
index 0a01de12..d8e8106f 100644
--- a/apps/client/src/components/common/paginate.tsx
+++ b/apps/client/src/components/common/paginate.tsx
@@ -21,7 +21,7 @@ export default function Paginate({
   }
 
   return (
-    <Group mt="md">
+    <Group mt="md" justify="flex-end">
       <Button
         variant="default"
         size="compact-sm"
diff --git a/apps/client/src/features/group/services/group-service.ts b/apps/client/src/features/group/services/group-service.ts
index dfd9e4f4..480254bf 100644
--- a/apps/client/src/features/group/services/group-service.ts
+++ b/apps/client/src/features/group/services/group-service.ts
@@ -33,7 +33,7 @@ export async function getGroupMembers(
   groupId: string,
   params?: QueryParams,
 ): Promise<IPagination<IUser>> {
-  const req = await api.post("/groups/members", { groupId, params });
+  const req = await api.post("/groups/members", { groupId, ...params });
   return req.data;
 }
 
diff --git a/apps/client/src/features/space/components/space-members.tsx b/apps/client/src/features/space/components/space-members.tsx
index 94dc8eba..02e33eb0 100644
--- a/apps/client/src/features/space/components/space-members.tsx
+++ b/apps/client/src/features/space/components/space-members.tsx
@@ -1,4 +1,11 @@
-import { Group, Table, Text, Menu, ActionIcon } from "@mantine/core";
+import {
+  Group,
+  Table,
+  Text,
+  Menu,
+  ActionIcon,
+  ScrollArea,
+} from "@mantine/core";
 import React from "react";
 import { IconDots } from "@tabler/icons-react";
 import { modals } from "@mantine/modals";
@@ -106,93 +113,95 @@ export default function SpaceMembersList({
   return (
     <>
       <SearchInput onSearch={handleSearch} />
-      <Table.ScrollContainer minWidth={500}>
-        <Table highlightOnHover verticalSpacing={8}>
-          <Table.Thead>
-            <Table.Tr>
-              <Table.Th>{t("Member")}</Table.Th>
-              <Table.Th>{t("Role")}</Table.Th>
-              <Table.Th></Table.Th>
-            </Table.Tr>
-          </Table.Thead>
-
-          <Table.Tbody>
-            {data?.items.map((member, index) => (
-              <Table.Tr key={index}>
-                <Table.Td>
-                  <Group gap="sm" wrap="nowrap">
-                    {member.type === "user" && (
-                      <CustomAvatar
-                        avatarUrl={member?.avatarUrl}
-                        name={member.name}
-                      />
-                    )}
-
-                    {member.type === "group" && <IconGroupCircle />}
-
-                    <div>
-                      <Text fz="sm" fw={500} lineClamp={1}>
-                        {member?.name}
-                      </Text>
-                      <Text fz="xs" c="dimmed">
-                        {member.type == "user" && member?.email}
-
-                        {member.type == "group" &&
-                          `${t("Group")} - ${formatMemberCount(member?.memberCount, t)}`}
-                      </Text>
-                    </div>
-                  </Group>
-                </Table.Td>
-
-                <Table.Td>
-                  <RoleSelectMenu
-                    roles={spaceRoleData}
-                    roleName={getSpaceRoleLabel(member.role)}
-                    onChange={(newRole) =>
-                      handleRoleChange(
-                        member.id,
-                        member.type,
-                        newRole,
-                        member.role,
-                      )
-                    }
-                    disabled={readOnly}
-                  />
-                </Table.Td>
-
-                <Table.Td>
-                  {!readOnly && (
-                    <Menu
-                      shadow="xl"
-                      position="bottom-end"
-                      offset={20}
-                      width={200}
-                      withArrow
-                      arrowPosition="center"
-                    >
-                      <Menu.Target>
-                        <ActionIcon variant="subtle" c="gray">
-                          <IconDots size={20} stroke={2} />
-                        </ActionIcon>
-                      </Menu.Target>
-
-                      <Menu.Dropdown>
-                        <Menu.Item
-                          onClick={() =>
-                            openRemoveModal(member.id, member.type)
-                          }
-                        >
-                          {t("Remove space member")}
-                        </Menu.Item>
-                      </Menu.Dropdown>
-                    </Menu>
-                  )}
-                </Table.Td>
+      <ScrollArea h={400}>
+        <Table.ScrollContainer minWidth={500}>
+          <Table highlightOnHover verticalSpacing={8}>
+            <Table.Thead>
+              <Table.Tr>
+                <Table.Th>{t("Member")}</Table.Th>
+                <Table.Th>{t("Role")}</Table.Th>
+                <Table.Th></Table.Th>
               </Table.Tr>
-            ))}
-          </Table.Tbody>
-        </Table>
-      </Table.ScrollContainer>
+            </Table.Thead>
+
+            <Table.Tbody>
+              {data?.items.map((member, index) => (
+                <Table.Tr key={index}>
+                  <Table.Td>
+                    <Group gap="sm" wrap="nowrap">
+                      {member.type === "user" && (
+                        <CustomAvatar
+                          avatarUrl={member?.avatarUrl}
+                          name={member.name}
+                        />
+                      )}
+
+                      {member.type === "group" && <IconGroupCircle />}
+
+                      <div>
+                        <Text fz="sm" fw={500} lineClamp={1}>
+                          {member?.name}
+                        </Text>
+                        <Text fz="xs" c="dimmed">
+                          {member.type == "user" && member?.email}
+
+                          {member.type == "group" &&
+                            `${t("Group")} - ${formatMemberCount(member?.memberCount, t)}`}
+                        </Text>
+                      </div>
+                    </Group>
+                  </Table.Td>
+
+                  <Table.Td>
+                    <RoleSelectMenu
+                      roles={spaceRoleData}
+                      roleName={getSpaceRoleLabel(member.role)}
+                      onChange={(newRole) =>
+                        handleRoleChange(
+                          member.id,
+                          member.type,
+                          newRole,
+                          member.role,
+                        )
+                      }
+                      disabled={readOnly}
+                    />
+                  </Table.Td>
+
+                  <Table.Td>
+                    {!readOnly && (
+                      <Menu
+                        shadow="xl"
+                        position="bottom-end"
+                        offset={20}
+                        width={200}
+                        withArrow
+                        arrowPosition="center"
+                      >
+                        <Menu.Target>
+                          <ActionIcon variant="subtle" c="gray">
+                            <IconDots size={20} stroke={2} />
+                          </ActionIcon>
+                        </Menu.Target>
+
+                        <Menu.Dropdown>
+                          <Menu.Item
+                            onClick={() =>
+                              openRemoveModal(member.id, member.type)
+                            }
+                          >
+                            {t("Remove space member")}
+                          </Menu.Item>
+                        </Menu.Dropdown>
+                      </Menu>
+                    )}
+                  </Table.Td>
+                </Table.Tr>
+              ))}
+            </Table.Tbody>
+          </Table>
+        </Table.ScrollContainer>
+      </ScrollArea>
 
       {data?.items.length > 0 && (
         <Paginate
diff --git a/apps/client/src/features/workspace/components/members/components/workspace-members-table.tsx b/apps/client/src/features/workspace/components/members/components/workspace-members-table.tsx
index a8c802d9..427d78fe 100644
--- a/apps/client/src/features/workspace/components/members/components/workspace-members-table.tsx
+++ b/apps/client/src/features/workspace/components/members/components/workspace-members-table.tsx
@@ -17,7 +17,6 @@ import Paginate from "@/components/common/paginate.tsx";
 import { SearchInput } from "@/components/common/search-input.tsx";
 import NoTableResults from "@/components/common/no-table-results.tsx";
 import { usePaginateAndSearch } from "@/hooks/use-paginate-and-search.tsx";
-import InviteActionMenu from "@/features/workspace/components/members/components/invite-action-menu.tsx";
 import MemberActionMenu from "@/features/workspace/components/members/components/members-action-menu.tsx";
 
 export default function WorkspaceMembersTable() {
diff --git a/apps/server/src/database/repos/space/space-member.repo.ts b/apps/server/src/database/repos/space/space-member.repo.ts
index 3db29988..67275034 100644
--- a/apps/server/src/database/repos/space/space-member.repo.ts
+++ b/apps/server/src/database/repos/space/space-member.repo.ts
@@ -114,6 +114,7 @@ export class SpaceMemberRepo {
       ])
       .select((eb) => this.groupRepo.withMemberCount(eb))
       .where('spaceId', '=', spaceId)
+      .orderBy((eb) => eb('groups.id', 'is not', null), 'desc')
       .orderBy('spaceMembers.createdAt', 'asc');
 
     if (pagination.query) {