feat(ranking)

jonassimoen · Dec 3, 2023 · 775d8ab · 775d8ab
1 parent 480570f
commit 775d8ab
Show file tree

Hide file tree

Showing 7 changed files with 125 additions and 17 deletions.
diff --git a/src/components/PlayerList/PlayerListStyle.ts b/src/components/PlayerList/PlayerListStyle.ts
@@ -90,16 +90,30 @@ export const tablePagination = `
 `;
 
 export const TableStyle = styled(Table)`
+    .ant-table-container table>thead>tr:first-child {
+        >*:first-child {
+            border-start-start-radius: 0px;
+        }
+        >*:last-child {
+            border-start-end-radius: 0px;
+        }
+    }
+
     .ant-table {
         color: #000;
     }
 
     .ant-table-thead {
-        th {
+        >tr>th {
             padding-top: 10px;
             padding-bottom: 10px;
-            background: ${props => props.theme.primaryContrast};
-            color: ${props => props.theme.primaryColor};
+            background: ${theme.primaryContrast};
+            color: ${theme.primaryColor};
+			padding: 5px;
+
+			&::before {
+				display: none;
+			}
         }
     }
 

diff --git a/src/components/PlayerStatsList/PlayerStatsListStyle.tsx b/src/components/PlayerStatsList/PlayerStatsListStyle.tsx
@@ -59,8 +59,6 @@ export const TableStyle = styled(Table)`
 		>tr>th {
 			background-color: ${theme.primaryContrast};
 			color: ${theme.primaryColor};
-			padding-top: 10px;
-			padding-bottom: 10px;
 			border-radius: 0px !important;
 			padding: 7.5px;
             white-space: nowrap;

diff --git a/src/locales/nl.json b/src/locales/nl.json
@@ -157,7 +157,9 @@
       "valueColumn": "Waarde"
     },
     "goalsColumnForAllPlayersTable": "Doelpunten",
-    "assistsColumnForAllPlayersTable": "Assists"
+    "assistsColumnForAllPlayersTable": "Assists",
+    "shotsAccuracyColumnForAllPlayersTable": "Shoten accuraatheid",
+    "passAccuracyColumnForAllPlayersTable": "Pass accuraatheid"
   },
   "team": {
     "saveTeam": "Team opslaan",
@@ -193,5 +195,11 @@
     "statsBlockTitle": "Statistieken",
     "overviewBlockTitle": "Overzicht"
   },
-  "pageTitle": "Pagina"
+  "pageTitle": "Pagina",
+  "rankingsPage": {
+    "rankingsTableTeamColumnName": "Team",
+    "rankingsTablePointsColumnName": "Punten",
+    "rankingsTitle": "Rangschikking",
+    "rankingsNotAvailableYet": "Ranking niet beschikbaar"
+  }
 }
diff --git a/src/pages/Rankings/Rankings.tsx b/src/pages/Rankings/Rankings.tsx
@@ -0,0 +1,73 @@
+import { ContainerStyle, TableStyle } from "@/components/PlayerList/PlayerListStyle";
+import { Row } from "@/components/UI/Grid/Grid";
+import { useGetTeamRankingsQuery } from "@/services/teamsApi";
+import { Col } from "antd";
+import Title from "antd/lib/typography/Title";
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+type RankingsProps = {
+	q?: null
+}
+
+export const Rankings = (props: RankingsProps) => {
+	const [t] = useTranslation();
+	const { data, isLoading } = useGetTeamRankingsQuery();
+
+	const columns = [
+		{
+			title: "#",
+			key: "rank",
+			dataIndex: "team",
+			width: "10%",
+			render: (team: Team) => {
+				return <b>{team.rank ? team.rank : "-"}</b>;
+			}
+		},
+		{
+			title: t("rankingsPage.rankingsTableTeamColumnName"),
+			key: "team",
+			dataIndex: "team",
+			width: "60%",
+			render: (team: Team, record: any) =>
+				<React.Fragment>
+					<b>{team.name}</b>
+					<span style={{ display: "block", fontSize: "11px" }}>
+						{`${record.user.firstName} ${record.user.lastName}`}
+					</span>
+				</React.Fragment>
+		},
+		{
+			title: t("rankingsPage.rankingsTablePointsColumnName"),
+			key: "points",
+			dataIndex: "team",
+			width: "20%",
+			align: "right",
+			render: (team: Team) =>
+				<span>{team.points || 0}</span>
+		}
+	];
+
+	return (
+		<React.Fragment>
+			<Row style={{ paddingBottom: "20px" }}>
+				<Col md={24} sm={24} xs={24}>
+					<Title level={2}>{t("rankingsPage.rankingsTitle")}</Title>
+				</Col>
+				<Col md={24} sm={24} xs={24} style={{ marginTop: "10px" }}>
+					<ContainerStyle>
+						<TableStyle
+							columns={columns}
+							dataSource={data}
+							showHeader={true}
+							loading={isLoading}
+							locale={{ emptyText: t("rankingsPage.rankingsNotAvailableYet") }}
+							rowKey={(rec: any, idx: number) => `record-${idx + 1}`}
+							rowClassName={(rec: any, idx: number) => idx % 2 ? "ant-table-row--odd" : "ant-table-row--even"}
+						/>
+					</ContainerStyle>
+				</Col>
+			</Row>
+		</React.Fragment>
+	);
+};
diff --git a/src/routes.tsx b/src/routes.tsx
@@ -22,6 +22,7 @@ import { PointsPage } from "./pages/Points/Points";
 import { MatchContainer } from "./pages/Match/Match";
 import { Welcome } from "./pages/Welcome/Welcome";
 import { PageManagement } from "./pages/PageManagement/PageManagement";
+import { Rankings } from "./pages/Rankings/Rankings";
 
 const Layout = ({ children }: any) => {
 	return (
@@ -51,7 +52,7 @@ export const router = createBrowserRouter([
 				element: <ProtectedRoute access={true} redirectPath="/home"><NewTeam /></ProtectedRoute>
 			},
 			{
-				path: "/points/:id", //todo
+				path: "/points/:id", 
 				element: <ProtectedRoute access={true} redirectPath="/home"><PointsPage /></ProtectedRoute>
 			},
 			{
@@ -63,12 +64,12 @@ export const router = createBrowserRouter([
 				element: <ProtectedRoute access={true} redirectPath="/home"><TeamPage /></ProtectedRoute>
 			},
 			{
-				path: "/transfers/:id", //todo
+				path: "/transfers/:id", 
 				element: <ProtectedRoute access={true} redirectPath="/home"><TransfersPage /></ProtectedRoute>
 			},
 			{
-				path: "/edit/:id", //todo
-				element: <ProtectedRoute access={true} redirectPath="/home"><Home /></ProtectedRoute>
+				path: "/edit/:id",
+				element: <ProtectedRoute access={true} redirectPath="/home"><TransfersPage /></ProtectedRoute>
 			},
 			{
 				path: "/profile",
@@ -79,19 +80,19 @@ export const router = createBrowserRouter([
 				element: <ProtectedRoute access={true} redirectPath="/home"><Deadlines /></ProtectedRoute>
 			},
 			{
-				path: "/stats", //todo
+				path: "/stats",
 				element: <ProtectedRoute access={true} redirectPath="/home"><Stats /></ProtectedRoute>
 			},
 			{
-				path: "/match/:id", //todo
+				path: "/match/:id", 
 				element: <ProtectedRoute access={true} redirectPath="/home"><MatchContainer /></ProtectedRoute>
 			},
 			{
-				path: "/rankings", //todo
-				element: <ProtectedRoute access={true} redirectPath="/home"><Home /></ProtectedRoute>
+				path: "/rankings",
+				element: <ProtectedRoute access={true} redirectPath="/home"><Rankings /></ProtectedRoute>
 			},
 			{
-				path: "/rules", //todo
+				path: "/rules", 
 				element: <ProtectedRoute access={true} redirectPath="/home"><Rules /></ProtectedRoute>
 			},
 			{

diff --git a/src/services/teamsApi.ts b/src/services/teamsApi.ts
@@ -46,6 +46,10 @@ export const teamsApi = createApi({
 			providesTags: ["userTeamPoints"],
 		}),
 
+		getTeamRankings: builder.query<{team: Team, user: User}, void>({
+			query: () => "/rankings"
+		}) 
+
 		// updatePlayer: builder.mutation<Player, Partial<Player> & Pick<Player, 'id'>>({
 		// 	query: ({ id, ...put }) => ({
 		// 		url: `${id}`,
@@ -57,4 +61,12 @@ export const teamsApi = createApi({
 	})
 });
 
-export const { useGetTeamQuery, useLazyGetTeamQuery, useAddTeamMutation, useUpdateTeamSelectionMutation, useLazyGetPointsQuery, useSubmitTransfersMutation } = teamsApi;
+export const { 
+	useGetTeamQuery, 
+	useLazyGetTeamQuery, 
+	useAddTeamMutation, 
+	useUpdateTeamSelectionMutation, 
+	useLazyGetPointsQuery, 
+	useSubmitTransfersMutation,
+	useGetTeamRankingsQuery
+} = teamsApi;
diff --git a/src/types/index.tsx b/src/types/index.tsx
@@ -104,6 +104,8 @@ type Team = {
 	bank: number
 	tripleCaptain: number
 	wildCard: number
+	rank: number
+	points: number
 }
 
 type Boosters = {