From 0e0e463114b052bb305cefa2aa845f40e1c12ddf Mon Sep 17 00:00:00 2001
From: Zakaria Mansouri <zakman.dev@gmail.com>
Date: Sat, 5 Oct 2024 16:32:35 +0200
Subject: [PATCH] show more details about contributors

---
 api/src/contributor/repository.ts |  4 ++-
 api/src/contributor/types.ts      |  3 ++
 web/src/pages/team/index.tsx      | 59 +++++++++++++++++++++++++++++--
 3 files changed, 62 insertions(+), 4 deletions(-)

diff --git a/api/src/contributor/repository.ts b/api/src/contributor/repository.ts
index 15823e61..6906e3e2 100644
--- a/api/src/contributor/repository.ts
+++ b/api/src/contributor/repository.ts
@@ -50,7 +50,9 @@ export class ContributorRepository {
       ${contributorsTable.id},
       ${contributorsTable.name},
       ${contributorsTable.avatarUrl},
-      sum(${contributorRepositoryRelationTable.score}) as ranking
+      sum(${contributorRepositoryRelationTable.score}) as total_contribution_score,
+      count(DISTINCT ${contributorRepositoryRelationTable.repositoryId}) as total_repository_count,
+      (sum(${contributorRepositoryRelationTable.score}) * count(DISTINCT ${contributorRepositoryRelationTable.repositoryId})) as ranking
     FROM
       ${contributorRepositoryRelationTable}
     JOIN
diff --git a/api/src/contributor/types.ts b/api/src/contributor/types.ts
index 85f15f8e..12cdbde8 100644
--- a/api/src/contributor/types.ts
+++ b/api/src/contributor/types.ts
@@ -5,6 +5,9 @@ export interface GetContributorsResponse extends GeneralResponse {
   contributors: Array<
     Pick<ContributorEntity, "id" | "name" | "avatarUrl"> & {
       ranking: number;
+
+      totalContributionScore: number;
+      totalRepositoryCount: number;
     }
   >;
 }
diff --git a/web/src/pages/team/index.tsx b/web/src/pages/team/index.tsx
index 8d3df642..aede6380 100644
--- a/web/src/pages/team/index.tsx
+++ b/web/src/pages/team/index.tsx
@@ -46,15 +46,68 @@ export default function Page(): JSX.Element {
             {contributorsList.map((contributor, contributorIndex) => (
               <Link
                 key={contributorIndex}
-                className="card bg-base-200 sm:max-w-40 w-full rounded-lg sm:p-4 items-center flex flex-row sm:flex-col gap-4 overflow-hidden"
+                className="card bg-base-300 sm:max-w-60 w-full rounded-lg flex flex-row border-base-200 border-2 overflow-hidden"
                 href={getContributorURL(contributor)}
               >
                 <img
                   src={contributor.avatarUrl}
                   alt={contributor.name}
-                  className="rounded-none sm:rounded-full size-16 sm:size-20"
+                  className="flex sm:hidden rounded-none size-28"
                 />
-                <span className="card-title gap-0 flex-1 break-all">{contributor.name}</span>
+                <div className="flex-1 flex flex-col items-center">
+                  <div className="flex-1 flex flex-row sm:flex-col justify-start sm:justify-center items-center p-4 gap-4 w-full">
+                    <img
+                      src={contributor.avatarUrl}
+                      alt={contributor.name}
+                      className="hidden sm:flex rounded-full size-20"
+                    />
+                    <span className="card-title break-all">{contributor.name}</span>
+                  </div>
+                  <div className="flex flex-row gap-4 w-full justify-around bg-base-200 text-gray-500 p-2">
+                    <div className="flex flex-row gap-2">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        strokeWidth={1.5}
+                        stroke="currentColor"
+                        className="size-6"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          d="m6.75 7.5 3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25Z"
+                        />
+                      </svg>
+
+                      {contributor.totalContributionScore}
+                    </div>
+                    <div className="divider divider-horizontal" />
+                    <div className="flex flex-row gap-2">
+                      {contributor.totalRepositoryCount}
+
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        strokeWidth={1.5}
+                        stroke="currentColor"
+                        className="size-6"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0 1 3.75 9.375v-4.5ZM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 0 1-1.125-1.125v-4.5ZM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0 1 13.5 9.375v-4.5Z"
+                        />
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          d="M6.75 6.75h.75v.75h-.75v-.75ZM6.75 16.5h.75v.75h-.75v-.75ZM16.5 6.75h.75v.75h-.75v-.75ZM13.5 13.5h.75v.75h-.75v-.75ZM13.5 19.5h.75v.75h-.75v-.75ZM19.5 13.5h.75v.75h-.75v-.75ZM19.5 19.5h.75v.75h-.75v-.75ZM16.5 16.5h.75v.75h-.75v-.75Z"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                </div>
               </Link>
             ))}
           </div>