diff --git a/app/(authenticated)/teams/[id]/page.tsx b/app/(authenticated)/teams/[id]/page.tsx
new file mode 100644
index 0000000..4da4fba
--- /dev/null
+++ b/app/(authenticated)/teams/[id]/page.tsx
@@ -0,0 +1,35 @@
+import { Breadcrumbs, Link, Stack, Typography} from "@mui/material";
+import CardBackground from "@/components/layout/cardBackground";
+import React from "react";
+import {teamFactory} from "@/src/models/TeamModel";
+import TeamEditor from "@/components/teams/teamEditor";
+import {classFactory} from "@/src/models/ClassModel";
+
+export default async function TeamDetailPage({ params }: { params: { id: string } }) {
+ const teamId = parseInt(params.id, 10)
+ const teamInfo = await teamFactory().show(teamId)
+ const classes = await classFactory().show(teamInfo.classId)
+ const teamUsers = await teamFactory().getTeamUsers(teamId);
+
+ return (
+
+
+
+ 管理者のダッシュボード
+
+
+ チーム管理
+
+ {teamInfo.name}
+
+
+
+
+
+
+ )
+}
diff --git a/components/teams/teamEditor.tsx b/components/teams/teamEditor.tsx
new file mode 100644
index 0000000..942add0
--- /dev/null
+++ b/components/teams/teamEditor.tsx
@@ -0,0 +1,161 @@
+'use client'
+import {
+ Box,
+ Button,
+ FormControl, InputLabel, Paper,
+ Stack, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField,
+ Typography
+} from "@mui/material";
+import {HiCheck, HiTrash} from "react-icons/hi2";
+import React, {useState} from "react";
+import {useRouter} from "next/navigation";
+import {Team, teamFactory} from "@/src/models/TeamModel";
+import {Class} from "@/src/models/ClassModel";
+import {User} from "@/src/models/UserModel";
+
+type TeamEditorProps = {
+ class : Class;
+ team : Team;
+ teamUser : User[];
+}
+
+export default function TeamEditor(props: TeamEditorProps) {
+ const router = useRouter()
+ const [teamName, setTeamName] = useState(props.team.name)
+
+ const handleSubmit = async () => {
+ await teamFactory().update(props.team.id, {
+ name: teamName,
+ description: props.team.description,
+ classId: props.team.classId,
+ teamTagId: props.team.teamTagId
+ })
+
+ router.push('/teams')
+ router.refresh()
+
+ }
+
+ return (
+ <>
+
+
+
+ {
+ setTeamName(t.target.value)
+ }}
+ />
+
+
+
+
+
+
+ 所属クラス
+
+
+ {props.class.name}
+
+
+
+
+
+
+
+ チームメンバー
+
+
+
+
+
+
+ 学籍番号
+ 名前
+ 性別
+
+
+
+ {props.teamUser.map((member) => {
+ return (
+
+ {member.id}
+ {member.name}
+
+
+ {member.gender === "male" ? "男性" : "女性"}
+
+
+
+ );
+ })}
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/components/teams/teamsTable.tsx b/components/teams/teamsTable.tsx
index 58c4577..fb8775e 100644
--- a/components/teams/teamsTable.tsx
+++ b/components/teams/teamsTable.tsx
@@ -4,11 +4,12 @@ import {AgGridReact} from 'ag-grid-react';
import "ag-grid-community/styles/ag-grid.css"; // Mandatory CSS required by the grid
import "ag-grid-community/styles/ag-theme-quartz.css"; // Optional Theme applied to the grid
-import {ColDef, ModuleRegistry} from 'ag-grid-community';
+import {ColDef, ModuleRegistry, RowClickedEvent} from 'ag-grid-community';
import {ClientSideRowModelModule} from 'ag-grid-community';
import {Team} from "@/src/models/TeamModel";
import {Class} from '@/src/models/ClassModel';
import {TeamTag} from "@/src/models/TeamTagModel";
+import {useRouter} from "next/navigation";
ModuleRegistry.registerModules([ClientSideRowModelModule]);
@@ -30,6 +31,7 @@ type IRow = {
// Create new GridExample component
const TeamsAgGrid = (props: TeamsAgGridProps) => {
const height = 'calc(100vh - 230px)';
+ const router = useRouter()
// Row Data: The data to be displayed.
const [rowData, setRowData] = useState([]);
@@ -60,6 +62,16 @@ const TeamsAgGrid = (props: TeamsAgGridProps) => {
[props.classes, props.teams, props.teamTags]
)
+ const handleRowClick = (e: RowClickedEvent) => {
+ const data = e.data
+
+ // ignore undefined
+ if (!data) return
+
+ // redirect
+ router.push(`/teams/${data.teamId}`)
+ }
+
// Container: Defines the grid's theme & dimensions.
return (
@@ -67,6 +79,7 @@ const TeamsAgGrid = (props: TeamsAgGridProps) => {
);