From b51e87209bf5e02257fce5d9357a8d1f42760412 Mon Sep 17 00:00:00 2001
From: 1nayu <arugoro01@gmail.com>
Date: Tue, 8 Oct 2024 21:14:25 +0900
Subject: [PATCH] feat: information list in dashboard

---
 .../information/create/page.tsx               |  2 +-
 app/(authenticated)/page.tsx                  | 13 +++--
 components/information/informationAgGrid.tsx  |  3 +-
 components/information/informationList.tsx    | 57 +++++++++++++++++++
 components/layout/cardLarge.tsx               | 24 --------
 5 files changed, 67 insertions(+), 32 deletions(-)
 create mode 100644 components/information/informationList.tsx
 delete mode 100644 components/layout/cardLarge.tsx

diff --git a/app/(authenticated)/information/create/page.tsx b/app/(authenticated)/information/create/page.tsx
index c78032e..f9f6415 100644
--- a/app/(authenticated)/information/create/page.tsx
+++ b/app/(authenticated)/information/create/page.tsx
@@ -19,7 +19,7 @@ export default function InformationCreatePage() {
                 <Link
                     underline="hover"
                     color="inherit"
-                    href={"/tags/"}
+                    href={"/information/"}
                     component={NextLink}
                 >
                     お知らせ管理
diff --git a/app/(authenticated)/page.tsx b/app/(authenticated)/page.tsx
index 1e7358f..c445a5e 100644
--- a/app/(authenticated)/page.tsx
+++ b/app/(authenticated)/page.tsx
@@ -1,21 +1,22 @@
-import {Breadcrumbs, Grid, Stack, Typography, useTheme} from "@mui/material"
+import {Breadcrumbs, Grid, Stack, Typography} from "@mui/material"
 import CardBackground from "@/components/layout/cardBackground"
-import CardLarge from "@/components/layout/cardLarge"
 import SportsList from "@/components/sports/sportsList"
 import {sportFactory} from "@/src/models/SportModel"
 import InProgressMatchList from "@/components/match/inProgressMatchList"
+import {informationFactory} from "@/src/models/InformationModel";
+import InformationList from "@/components/information/informationList";
 
 export default async function Home() {
     const sports = await sportFactory().index()
+    const informationList = await informationFactory().index()
+
     return (
         <Stack spacing={2} mx={2} my={3}>
             <Breadcrumbs aria-label="breadcrumb" sx={{pl: 2}}>
                 <Typography color="text.primary">管理者のダッシュボード</Typography>
             </Breadcrumbs>
-            <CardBackground title={"配信中のお知らせ"} button={"お知らせを作成・編集"}>
-                <CardLarge>
-                    この機能は開発中です
-                </CardLarge>
+            <CardBackground title={"配信中のお知らせ"} button={"お知らせを作成・編集"} link={"/information"}>
+                <InformationList informationList={informationList}/>
             </CardBackground>
             <CardBackground title={"競技から選ぶ"} button={"競技を作成・編集する"} link={"/sports"}>
                 <Grid container spacing={1}>
diff --git a/components/information/informationAgGrid.tsx b/components/information/informationAgGrid.tsx
index 837de27..6cff352 100644
--- a/components/information/informationAgGrid.tsx
+++ b/components/information/informationAgGrid.tsx
@@ -13,6 +13,7 @@ ModuleRegistry.registerModules([ClientSideRowModelModule]);
 
 export type InformationAgGridProps = {
     informationList: Information[]
+    dashboard?: boolean
 }
 
 // Row Data Interface
@@ -24,7 +25,7 @@ type IRow = {
 
 // Create new GridExample component
 export default function InformationAgGrid(props: InformationAgGridProps) {
-    const height = 'calc(100vh - 230px)';
+    const height = props.dashboard ? '200px' : 'calc(100vh - 230px)';
     const router = useRouter()
     // Row Data: The data to be displayed.
     const [rowData, setRowData] = useState<IRow[]>([])
diff --git a/components/information/informationList.tsx b/components/information/informationList.tsx
new file mode 100644
index 0000000..1467617
--- /dev/null
+++ b/components/information/informationList.tsx
@@ -0,0 +1,57 @@
+import {Information} from "@/src/models/InformationModel";
+import {Stack, Typography, IconButton, Button} from "@mui/material";
+import {HiOutlineInformationCircle} from "react-icons/hi";
+import React from "react";
+
+export type InformationListProps = {
+    informationList: Information[]
+}
+
+export default function InformationList(props: InformationListProps) {
+    const list = props.informationList.map((information) => {
+        return (
+            <Button href={`/information/${information.id}`} sx={{py:1.5, px:2,mb:1, width:"100%", backgroundColor:"secondary.main", color:"text.primary"}} key={information.id}>
+                <Stack spacing={1} direction={"row"} width={"100%"} justifyContent={"flex-start"} alignItems="center">
+                    <Typography
+                        color={"text.primary"}
+                        sx={{fontSize: "12px", mx:2}}
+                        lineHeight={"1.2em"}
+                    >
+                        {information.id}
+                    </Typography>
+                    <IconButton
+                        sx={{backgroundColor: "background.default"}}
+                    >
+                        <HiOutlineInformationCircle color={"text.primary"}/>
+                    </IconButton>
+                    <Stack
+                        direction={"column"}
+                        justifyContent={"space-between"}
+                        alignItems={"flex-start"}
+                        spacing={1}
+                    >
+                        <Typography
+                            color={"text.primary"}
+                            sx={{fontSize: "14px", fontWeight: "bold"}}
+                            lineHeight={"1.2em"}
+                        >
+                            {information.name}
+                        </Typography>
+                        <Typography
+                            color={"text.primary"}
+                            sx={{fontSize: "14px"}}
+                            lineHeight={"1.2em"}
+                        >
+                            {information.content}
+                        </Typography>
+                    </Stack>
+                </Stack>
+            </Button>
+        )
+    })
+    return (
+        <>
+            {list}
+        </>
+    )
+}
\ No newline at end of file
diff --git a/components/layout/cardLarge.tsx b/components/layout/cardLarge.tsx
deleted file mode 100644
index 306a3fa..0000000
--- a/components/layout/cardLarge.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Avatar, Card, Stack, Typography} from "@mui/material";
-import React, { ReactNode } from 'react';
-import {HiMegaphone} from "react-icons/hi2";
-
-type CardProps = {
-    children?: ReactNode;
-}
-
-const CardLarge: React.FC<CardProps> = ({ children }) => {
-    return (
-        <>
-            <Card sx={{py:1.5, px:2, backgroundColor:"secondary.main", color:"text.primary"}}>
-                <Stack spacing={1} direction={"row"} justifyContent={"flex-start"} alignItems="center">
-                    <Avatar sx={{height:"1.5em", width:"1.5em", backgroundColor:"text.secondary"}}>
-                        <HiMegaphone color={"secondary.main"}/>
-                    </Avatar>
-                    <Typography>{children}</Typography>
-                </Stack>
-            </Card>
-        </>
-    );
-};
-
-export default CardLarge;