diff --git a/app/(authenticated)/tags/[id]/page.tsx b/app/(authenticated)/tags/[id]/page.tsx new file mode 100644 index 0000000..f5a4dd7 --- /dev/null +++ b/app/(authenticated)/tags/[id]/page.tsx @@ -0,0 +1,41 @@ +import {Alert, Breadcrumbs, Button, Link, Stack, Typography} from "@mui/material"; +import CardBackground from "@/components/layout/cardBackground"; +import {tagFactory} from "@/src/models/TagModel"; +import TagEditor from "@/components/tags/tagEditor"; + +export default async function RoleDetailPage({params}: { params: { id: string } }) { + const tagId = parseInt(params.id, 10) + const tag = await tagFactory().show(tagId) + + if (isNaN(tagId) || !tag) { + return ( + + + タグが存在しません。 + + + + + ) + } + + return ( + + + + 管理者のダッシュボード + + + タグ管理 + + {tag.name} + + + + + + + ) +} diff --git a/app/(authenticated)/tags/create/page.tsx b/app/(authenticated)/tags/create/page.tsx new file mode 100644 index 0000000..d5dcbe4 --- /dev/null +++ b/app/(authenticated)/tags/create/page.tsx @@ -0,0 +1,25 @@ +import {Stack, Breadcrumbs, Link, Typography} from "@mui/material"; +import CardBackground from "@/components/layout/cardBackground"; +import TagCreator from "@/components/tags/tagCreator"; + +export default function TagCreatePage() { + + return ( + + + + 管理者のダッシュボード + + + タグ管理 + + タグ作成 + + + + + + ); +} diff --git a/app/(authenticated)/tags/page.tsx b/app/(authenticated)/tags/page.tsx new file mode 100644 index 0000000..3793592 --- /dev/null +++ b/app/(authenticated)/tags/page.tsx @@ -0,0 +1,26 @@ +import {Stack, Breadcrumbs, Link, Typography} from "@mui/material"; +import CardBackground from "@/components/layout/cardBackground"; +import {tagFactory} from "@/src/models/TagModel"; +import TagsAgGrid from "@/components/tags/tagsAgGrid"; + +export default async function TagsPage() { + const tags = await tagFactory().index() + + return ( + + + + 管理者のダッシュボード + + タグ管理 + + + + + + ); +} diff --git a/components/layout/navigation.tsx b/components/layout/navigation.tsx index 0b9ca9f..43e40e7 100644 --- a/components/layout/navigation.tsx +++ b/components/layout/navigation.tsx @@ -9,11 +9,11 @@ import { HiUser, HiUserGroup, HiTrophy, - HiMapPin, HiIdentification + HiMapPin, HiIdentification, HiMiniTag } from "react-icons/hi2"; import {SiGithub} from "react-icons/si"; import WiderLogo from "@/components/svg/wider"; -import Link from "next/link" +import Link from "next/link" import NavPrivacyPolicyDrawer from "@/components/layout/navPrivacyPolicyDrawer"; import LogoutButton from "@/components/auth/LogoutButton"; @@ -27,9 +27,9 @@ export const Navigation = () => { position="fixed" sx={{ zIndex: (theme) => theme.zIndex.drawer + 1, - background:"rgba(62,78,179,0.8)", + background: "rgba(62,78,179,0.8)", backdropFilter: 'blur(30px)', - }}> + }}> {"SPORTSDAY @@ -42,26 +42,27 @@ export const Navigation = () => { sx: { backgroundColor: "#7F8CD6", color: "#fff", - pt:8 + pt: 8 } }} sx={{ width: drawerWidth, flexShrink: 0, - [`& .MuiDrawer-paper`]: { width: drawerWidth, boxSizing: 'border-box' }, + [`& .MuiDrawer-paper`]: {width: drawerWidth, boxSizing: 'border-box'}, }} > - + - 全体 + 全体 + - + @@ -180,7 +203,8 @@ export const Navigation = () => { - + (C)2024 diff --git a/components/tags/tagCreator.tsx b/components/tags/tagCreator.tsx new file mode 100644 index 0000000..e333eac --- /dev/null +++ b/components/tags/tagCreator.tsx @@ -0,0 +1,63 @@ +'use client' +import {Button, Stack, TextField, TextFieldProps} from "@mui/material"; +import {useRouter} from "next/navigation"; +import {useRef} from "react"; +import {tagFactory} from "@/src/models/TagModel"; + +export default function TagCreator() { + const router = useRouter() + const nameRef = useRef(null) + + const handleCreate = async () => { + // create role + const name = nameRef.current?.value as string + + if (!name) { + alert("名前を入力してください") + return + } + + await tagFactory().create({ + name: name, + enabled: true, + }) + + // redirect to role page + router.push('/tags') + } + + return ( + + + + + + + + + + ) +} diff --git a/components/tags/tagEditor.tsx b/components/tags/tagEditor.tsx new file mode 100644 index 0000000..bdb7086 --- /dev/null +++ b/components/tags/tagEditor.tsx @@ -0,0 +1,67 @@ +'use client' +import {useRef, useState} from "react"; +import { + Button, + Checkbox, + FormControlLabel, + Stack, + TextField, + TextFieldProps +} from "@mui/material"; +import {useRouter} from "next/navigation"; +import {Tag, tagFactory} from "@/src/models/TagModel"; + +export type TagEditorProps = { + tag: Tag +} + +export default function TagEditor(props: TagEditorProps) { + const router = useRouter() + const [enabled, setEnabled] = useState(props.tag.enabled) + const nameRef = useRef(null) + + const handleSubmit = async () => { + const name = nameRef.current?.value as string + + await tagFactory().update(props.tag.id, { + name: name, + enabled: enabled, + }) + + // reload + router.push("/tags") + } + + return ( + + + + { + setEnabled(e.target.checked) + }} + /> + } + label={"有効"} + /> + + + + ) +} diff --git a/components/tags/tagsAgGrid.tsx b/components/tags/tagsAgGrid.tsx new file mode 100644 index 0000000..0cd7480 --- /dev/null +++ b/components/tags/tagsAgGrid.tsx @@ -0,0 +1,78 @@ +'use client' +import {useEffect, useState} from 'react'; +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, RowClickedEvent} from 'ag-grid-community'; +import {ClientSideRowModelModule} from 'ag-grid-community'; +import {useRouter} from "next/navigation"; +import {Tag} from "@/src/models/TagModel"; + +ModuleRegistry.registerModules([ClientSideRowModelModule]); + +export type TagsAgGridProps = { + tags: Tag[] +} + +// Row Data Interface +type IRow = { + tagId: number, + name: string, + enabled: boolean, +} + +// Create new GridExample component +export default function TagsAgGrid(props: TagsAgGridProps) { + const height = 'calc(100vh - 230px)'; + const router = useRouter() + // Row Data: The data to be displayed. + const [rowData, setRowData] = useState([]) + // Column Definitions: Defines & controls grid columns. + const [colDefs] = useState[]>([ + {field: "tagId", headerName: "タグID"}, + {field: "name", headerName: "名前"}, + {field: "enabled", headerName: "有効"}, + ]); + + useEffect(() => { + const tags = props.tags.map((tag): IRow => { + return { + tagId: tag.id, + name: tag.name, + enabled: tag.enabled + } + }) + + // set row data + setRowData(tags) + }, [props.tags]) + + const handleRowClick = (e: RowClickedEvent) => { + const data = e.data + + // ignore undefined + if (!data) return + + // redirect + router.push(`/tags/${data.tagId}`) + } + + // Container: Defines the grid's theme & dimensions. + return ( +
+ +
+ ); +} \ No newline at end of file