Siddev3

packages/alea-frontend/pages/acl/[aclId].tsx

@@ -10,7 +10,13 @@ import {
   Tooltip,
   Typography,
 } from '@mui/material';
-import { getAcl, getAllAclMembers, isMember, isUserMember } from '@stex-react/api';
+import {
+  getAcl,
+  getAclUserDetails,
+  getAllAclMembers,
+  isMember,
+  isUserMember,
+} from '@stex-react/api';
 import { NextPage } from 'next';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
@@ -23,7 +29,7 @@ const AclId: NextPage = () => {
   const aclId = router.query.aclId as string;
 
   const [acls, setAcls] = useState<string[]>([]);
-  const [allMemberUserIds, setAllMemberUserIds] = useState<string[]>([]);
+  const [directMembersNamesAndIds, setDirectMembersNamesAndIds] = useState([]);
   const [desc, setDesc] = useState<string>(null);
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [updaterACLId, setUpdaterACLId] = useState<string>(null);
@@ -41,11 +47,9 @@ const AclId: NextPage = () => {
       setUpdaterACLId(acl?.updaterACLId);
       setIsOpen(acl?.isOpen);
       const aclIds = new Set<string>();
-      const userMembers = new Set<string>();
-
+      const aclUserDetails = await getAclUserDetails(aclId);
       acl.memberACLIds.forEach((m) => aclIds.add(m));
-      acl.memberUserIds.forEach((m) => userMembers.add(m));
-      setAllMemberUserIds(Array.from(userMembers));
+      setDirectMembersNamesAndIds(aclUserDetails);
       setAcls(Array.from(aclIds));
     } catch (e) {
       console.log(e);
@@ -215,13 +219,13 @@ const AclId: NextPage = () => {
             </Box>
           )}
 
-          {allMemberUserIds.length !== 0 && (
+          {directMembersNamesAndIds.length !== 0 && (
             <Box sx={{ marginTop: '32px' }}>
               <Typography variant="h6" color="secondary">
                 Direct Members
               </Typography>
               <List>
-                {allMemberUserIds.map((user, index) => (
+                {directMembersNamesAndIds.map((user, index) => (
                   <React.Fragment key={user}>
                     <ListItem
                       button
@@ -232,9 +236,9 @@ const AclId: NextPage = () => {
                         },
                       }}
                     >
-                      <ListItemText primary={user} />
+                      <ListItemText primary={`${user.fullName} (${user.userId})`} />
                     </ListItem>
-                    {index < allMemberUserIds.length - 1 && <Divider />}
+                    {index < directMembersNamesAndIds.length - 1 && <Divider />}
                   </React.Fragment>
                 ))}
               </List>

packages/alea-frontend/pages/api/access-control/get-acl-userdetails.ts

@@ -0,0 +1,35 @@
+import { AccessControlList } from '@stex-react/api';
+import { NextApiRequest, NextApiResponse } from 'next';
+import { executeAndEndSet500OnError, executeDontEndSet500OnError } from '../comment-utils';
+import { ACLMembership } from './acl-membership';
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const id = req.query.id as string;
+  if (!id) return res.status(422).send(`Missing param id.`);
+  const acls: any[] = await executeAndEndSet500OnError(
+    `SELECT * FROM AccessControlList where id = ?`,
+    [id],
+    res
+  );
+  const dbAcl = acls?.[0];
+  if (!dbAcl) return res.status(404).send(`No ACL with id [${id}].`);
+
+  const members: ACLMembership[] = await executeAndEndSet500OnError(
+    'SELECT * FROM ACLMembership WHERE parentACLId = ?',
+    [id],
+    res
+  );
+  const directMembers = members.map((m) => m.memberUserId).filter((u) => u);
+  if (directMembers.length === 0) {
+    return res.status(200).send([]);
+  }
+  const result: { firstname: string; lastname: string; userId: string }[] =
+    await executeDontEndSet500OnError(
+      `select firstname, lastname, userId from userInfo where userId IN (?)`,
+      [directMembers],
+      res
+    );
+  res
+    .status(200)
+    .send(result.map((c) => ({ fullName: `${c.firstname} ${c.lastname}`, userId: `${c.userId}` })));
+}

packages/api/src/lib/access-control-api.ts

@@ -27,6 +27,11 @@ export async function getAcl(aclId: string): Promise<AccessControlList> {
   return resp.data as AccessControlList;
 }
 
+export async function getAclUserDetails(aclId : string):Promise<{fullName: string, userid:string}[]>{
+  const resp = await axios.get(`/api/access-control/get-acl-userdetails?id=${aclId}`);
+  return resp.data as {fullName: string,userid:string}[]
+}
+
 export async function getCourseAcls(courseId: string, instanceId: string) {
   const resp = await axios.get(
     `/api/access-control/get-course-acls?courseId=${courseId}&instanceId=${instanceId}`