DEAR-125: add team code to tables

24FSIIT16 · Jul 21, 2024 · f6b4b67 · f6b4b67
1 parent 413290b
commit f6b4b67
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 3 deletions.
diff --git a/app/(main)/team/(team)/layout.tsx b/app/(main)/team/(team)/layout.tsx
@@ -9,7 +9,7 @@ const TeamLayout: React.FC<TeamLayoutProps> = ({ children }) => (
   <div className="space-y-8 px-16 pb-16">
     <div className="space-y-0.5">
       <h1>Team</h1>
-      <p className="text-md font-thin">Manage your teams and invite new members to join your team.</p>
+      <p className="text-md font-thin">Manage your teams.</p>
     </div>
     <Separtor className="dark:border-secondaryBG-dark" />
     <div>{children}</div>

diff --git a/app/(main)/team/(teammember)/[id]/members/page.tsx b/app/(main)/team/(teammember)/[id]/members/page.tsx
@@ -6,8 +6,12 @@ import { TeamWithMembers } from '@/types/TeamType';
 import Loading from '@components/Loading/Loading';
 import Error from '@components/Error/Error';
 import { TeamMemberWithUser } from '@/types/TeamMemberType';
-import TeamMemberTable from '../../../components/TeamMembersTable/TeamMemberTable';
+import Separator from '@components/ui/Separator/Separator';
+import { Clipboard, Check } from 'lucide-react';
+import Input from '@components/ui/Input/Input';
+import { Button } from '@components/ui/Buttons/Button';
 import { columns } from '../../../components/TeamMembersTable/columns';
+import TeamMemberTable from '../../../components/TeamMembersTable/TeamMemberTable';
 
 interface TeamMembersPageProps {
   params: {
@@ -17,7 +21,20 @@ interface TeamMembersPageProps {
 
 const TeamMembersPage: React.FC<TeamMembersPageProps> = ({ params }) => {
   const { id: teamId } = params;
+  const [copied, setCopied] = React.useState<boolean>(false);
+  const inputRef = React.useRef<HTMLInputElement>(null);
   const { data, isLoading, error } = useSWRClient<TeamWithMembers>(`/v1/team-member/${teamId}`);
+  const { code: teamCode } = data?.team || {};
+
+  const copyToClipboard = () => {
+    const inputValue = inputRef.current?.value;
+    if (inputValue) {
+      navigator.clipboard.writeText(inputValue).then(() => {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+      });
+    }
+  };
 
   if (isLoading) return <Loading />;
   if (error) return <Error errorMessage="It seems there was a problem loading members." action="/team" showContact />;
@@ -26,7 +43,30 @@ const TeamMembersPage: React.FC<TeamMembersPageProps> = ({ params }) => {
     <div>
       {data ? (
         <div>
-          <TeamMemberTable<TeamMemberWithUser> columns={columns} data={data.members} />
+          {data.isAdmin ? (
+            <>
+              <div className="space-y-1">
+                <h2>Invite</h2>
+                <p className="text-sm font-thin">Use this code to share and invite new members to your team.</p>
+              </div>
+              <div className="my-4 flex max-w-lg items-center space-x-2">
+                <Button variant="outline" onClick={copyToClipboard}>
+                  {copied ? <Check className="h-4 w-4" /> : <Clipboard className="h-4 w-4" />}
+                </Button>
+                <Input ref={inputRef} disabled value={teamCode} />
+              </div>
+              <Separator className="my-8" />
+              <div className="space-y-4">
+                <div className="space-y-1">
+                  <h2>Manage</h2>
+                  <p className="text-sm font-thin">All team members listed.</p>
+                </div>
+                <TeamMemberTable<TeamMemberWithUser> columns={columns} data={data.members} />
+              </div>
+            </>
+          ) : (
+            <TeamMemberTable<TeamMemberWithUser> columns={columns} data={data.members} />
+          )}
         </div>
       ) : (
         <Loading />

diff --git a/app/(main)/team/components/TeamTable/columns.tsx b/app/(main)/team/components/TeamTable/columns.tsx
@@ -48,6 +48,14 @@ export const columns: ColumnDef<Team>[] = [
       );
     },
   },
+  {
+    accessorKey: 'code',
+    header: 'Team code',
+    cell: ({ row }) => {
+      const { role, code } = row.original;
+      return role === 'ADMIN' ? <span>{code}</span> : '-';
+    },
+  },
   {
     id: 'actions',
     cell: ({ row }) => {