Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

タグに関する機能 #41

Merged
merged 3 commits into from
May 19, 2024
Merged

タグに関する機能 #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cf0f0e0
feat: Tagに関する基本的な機能の実装
testusuke May 19, 2024
64463e6
change: サイドバーにTag項目を追加
testusuke May 19, 2024
3baa01f
Merge branch 'main' into feature/tag
testusuke May 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 41 additions & 0 deletions app/(authenticated)/tags/[id]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<Stack spacing={1} mx={2} my={3}>
<Alert severity="error">
<Typography>タグが存在しません。</Typography>
</Alert>

<Button variant="contained" href="/tags/">
タグ管理に戻る
</Button>
</Stack>
)
}

return (
<Stack spacing={1} mx={2} my={3}>
<Breadcrumbs aria-label="breadcrumb" sx={{pl: 2}}>
<Link underline="hover" color="inherit" href="/">
管理者のダッシュボード
</Link>
<Link underline="hover" color="inherit" href={"/tags/"}>
タグ管理
</Link>
<Typography color="text.primary">{tag.name}</Typography>
</Breadcrumbs>

<CardBackground title={`タグ情報`}>
<TagEditor tag={tag} />
</CardBackground>
</Stack>
)
}
25 changes: 25 additions & 0 deletions app/(authenticated)/tags/create/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<Stack spacing={1} mx={2} my={3}>
<Breadcrumbs aria-label="breadcrumb" sx={{pl: 2}}>
<Link underline="hover" color="inherit" href="/">
管理者のダッシュボード
</Link>
<Link underline="hover" color="inherit" href={"/tags/"}>
タグ管理
</Link>
<Typography color="text.primary">タグ作成</Typography>
</Breadcrumbs>
<CardBackground
title={"タグ作成"}
>
<TagCreator />
</CardBackground>
</Stack>
);
}
26 changes: 26 additions & 0 deletions app/(authenticated)/tags/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<Stack spacing={1} mx={2} my={3}>
<Breadcrumbs aria-label="breadcrumb" sx={{pl: 2}}>
<Link underline="hover" color="inherit" href="/">
管理者のダッシュボード
</Link>
<Typography color="text.primary">タグ管理</Typography>
</Breadcrumbs>
<CardBackground
title={"すべてのタグ"}
button={"作成"}
link={"/tags/create"}
>
<TagsAgGrid tags={tags}/>
</CardBackground>
</Stack>
);
}
80 changes: 52 additions & 28 deletions components/layout/navigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand All @@ -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)',
}}>
}}>
<Toolbar>
<Link href={"/"}>
<Image src={"/logo/logo_admin.png"} height={"20"} width={"252"} alt={"SPORTSDAY Admin"}/>
Expand All @@ -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'},
}}
>
<Box px={2} sx={{ overflow: 'auto' }}>
<Box px={2} sx={{overflow: 'auto'}}>

<Stack spacing={1} py={3}>
<Typography sx={{pl:2.5}}>全体</Typography>
<Typography sx={{pl: 2.5}}>全体</Typography>
<Button
variant={"contained"}
sx={{py:buttonPadding, width:"100%", fontWeight: "600"}}
sx={{py: buttonPadding, width: "100%", fontWeight: "600"}}
component={Link}
href={"/"}
>
<Stack spacing={1} mx={1} width={"100%"} direction={"row"} justifyContent={"flex-start"} alignItems="center">
<Stack spacing={1} mx={1} width={"100%"} direction={"row"} justifyContent={"flex-start"}
alignItems="center">
<SvgIcon fontSize={"small"}>
<HiHome/>
</SvgIcon>
Expand All @@ -71,11 +72,12 @@ export const Navigation = () => {
<Button
disabled={true}
variant={"contained"}
sx={{py:buttonPadding, width:"100%", fontWeight: "600"}}
sx={{py: buttonPadding, width: "100%", fontWeight: "600"}}
component={Link}
href={"/"}
>
<Stack spacing={1} mx={1} width={"100%"} direction={"row"} justifyContent={"flex-start"} alignItems="center">
<Stack spacing={1} mx={1} width={"100%"} direction={"row"} justifyContent={"flex-start"}
alignItems="center">
<SvgIcon fontSize={"small"}>
<HiMegaphone/>
</SvgIcon>
Expand All @@ -85,11 +87,12 @@ export const Navigation = () => {
<Button
disabled={true}
variant={"contained"}
sx={{py:buttonPadding, width:"100%", fontWeight: "600"}}
sx={{py: buttonPadding, width: "100%", fontWeight: "600"}}
component={Link}
href={"/"}
>
<Stack spacing={1} mx={1} width={"100%"} direction={"row"} justifyContent={"flex-start"} alignItems="center">
<Stack spacing={1} mx={1} width={"100%"} direction={"row"} justifyContent={"flex-start"}
alignItems="center">
<SvgIcon fontSize={"small"}>
<HiMiniNewspaper/>
</SvgIcon>
Expand All @@ -99,14 +102,15 @@ export const Navigation = () => {
</Stack>

<Stack spacing={1} pb={3}>
<Typography sx={{pl:2.5}}>スポーツ</Typography>
<Typography sx={{pl: 2.5}}>スポーツ</Typography>
<Button
variant={"contained"}
sx={{py:buttonPadding, width:"100%", fontWeight: "600"}}
sx={{py: buttonPadding, width: "100%", fontWeight: "600"}}
component={Link}
href={"/sports"}
>
<Stack spacing={1} mx={1} width={"100%"} direction={"row"} justifyContent={"flex-start"} alignItems="center">
<Stack spacing={1} mx={1} width={"100%"} direction={"row"} justifyContent={"flex-start"}
alignItems="center">
<SvgIcon fontSize={"small"}>
<HiTrophy/>
</SvgIcon>
Expand All @@ -115,11 +119,12 @@ export const Navigation = () => {
</Button>
<Button
variant={"contained"}
sx={{py:buttonPadding, width:"100%", fontWeight: "600"}}
sx={{py: buttonPadding, width: "100%", fontWeight: "600"}}
component={Link}
href={"/locations"}
>
<Stack spacing={1} mx={1} width={"100%"} direction={"row"} justifyContent={"flex-start"} alignItems="center">
<Stack spacing={1} mx={1} width={"100%"} direction={"row"} justifyContent={"flex-start"}
alignItems="center">
<SvgIcon fontSize={"small"}>
<HiMapPin/>
</SvgIcon>
Expand All @@ -129,14 +134,15 @@ export const Navigation = () => {
</Stack>

<Stack spacing={1} pb={3}>
<Typography sx={{pl:2.5}}>情報</Typography>
<Typography sx={{pl: 2.5}}>情報</Typography>
<Button
variant={"contained"}
sx={{py:buttonPadding, width:"100%", fontWeight: "600"}}
sx={{py: buttonPadding, width: "100%", fontWeight: "600"}}
component={Link}
href={"/users"}
>
<Stack spacing={1} mx={1} width={"100%"} direction={"row"} justifyContent={"flex-start"} alignItems="center">
<Stack spacing={1} mx={1} width={"100%"} direction={"row"} justifyContent={"flex-start"}
alignItems="center">
<SvgIcon fontSize={"small"}>
<HiUser/>
</SvgIcon>
Expand All @@ -145,11 +151,12 @@ export const Navigation = () => {
</Button>
<Button
variant={"contained"}
sx={{py:buttonPadding, width:"100%", fontWeight: "600"}}
sx={{py: buttonPadding, width: "100%", fontWeight: "600"}}
component={Link}
href={"/teams"}
>
<Stack spacing={1} mx={1} width={"100%"} direction={"row"} justifyContent={"flex-start"} alignItems="center">
<Stack spacing={1} mx={1} width={"100%"} direction={"row"} justifyContent={"flex-start"}
alignItems="center">
<SvgIcon fontSize={"small"}>
<HiUserGroup/>
</SvgIcon>
Expand All @@ -158,20 +165,36 @@ export const Navigation = () => {
</Button>
<Button
variant={"contained"}
sx={{py:buttonPadding, width:"100%", fontWeight: "600"}}
sx={{py: buttonPadding, width: "100%", fontWeight: "600"}}
component={Link}
href={"/roles"}
>
<Stack spacing={1} mx={1} width={"100%"} direction={"row"} justifyContent={"flex-start"} alignItems="center">
<Stack spacing={1} mx={1} width={"100%"} direction={"row"} justifyContent={"flex-start"}
alignItems="center">
<SvgIcon fontSize={"small"}>
<HiIdentification/>
</SvgIcon>
<Typography>権限</Typography>
</Stack>
</Button>
<Button
variant={"contained"}
sx={{py: buttonPadding, width: "100%", fontWeight: "600"}}
component={Link}
href={"/tags"}
>
<Stack spacing={1} mx={1} width={"100%"} direction={"row"} justifyContent={"flex-start"}
alignItems="center">
<SvgIcon fontSize={"small"}>
<HiMiniTag/>
</SvgIcon>
<Typography>タグ</Typography>
</Stack>
</Button>
</Stack>

<Stack spacing={1} width={"100%"} direction={"row"} justifyContent={"space-around"} alignItems="center">
<Stack spacing={1} width={"100%"} direction={"row"} justifyContent={"space-around"}
alignItems="center">
<LogoutButton/>
<Tooltip title={"GitHub"} arrow>
<IconButton href={"https://github.com/Sports-day/sports-day-admin"} target={"_blank"}>
Expand All @@ -180,7 +203,8 @@ export const Navigation = () => {
</Tooltip>
<NavPrivacyPolicyDrawer/>
</Stack>
<Stack width={"100%"} py={2} justifyContent="center" alignItems="center" direction={"row"} spacing={0.5}>
<Stack width={"100%"} py={2} justifyContent="center" alignItems="center" direction={"row"}
spacing={0.5}>
<Typography fontWeight={"600"} color={"#9aa6e5"}>(C)2024</Typography>
<WiderLogo/>
</Stack>
Expand Down
63 changes: 63 additions & 0 deletions components/tags/tagCreator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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<TextFieldProps>(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 (
<Stack
spacing={1}
>
<TextField
fullWidth
inputRef={nameRef}
label="名前"
sx={{
width: "50%"
}}
required
/>

<Stack
direction="row"
spacing={1}
>
<Button
onClick={handleCreate}
variant="contained"
>
作成
</Button>

<Button
href="/tags"
variant="contained"
>
キャンセル
</Button>
</Stack>
</Stack>
)
}
Loading
Loading