14 |
16 | );
17 | };
18 |
--------------------------------------------------------------------------------
/client/src/features/auth/routes/SignupPage.tsx:
--------------------------------------------------------------------------------
1 | import { useNavigate } from "react-router-dom";
2 | import { SignupCard } from "../components/SignupCard";
3 | import { useEffect } from "react";
4 |
5 | export const SignupPage = () => {
6 | const navigate = useNavigate();
7 | useEffect(() => {
8 | const token = localStorage.getItem("token");
9 | if (token) return navigate("/projects");
10 | }, []);
11 |
12 | return (
13 |
14 |
16 | );
17 | };
18 |
--------------------------------------------------------------------------------
/client/src/features/users/apis/user-api.ts:
--------------------------------------------------------------------------------
1 | import { baseURL, axiosInstance } from "@/lib/axios";
2 |
3 | export type CurrentUser = {
4 | id: number;
5 | firstname: string;
6 | lastname: string;
7 | email: string;
8 | createdAt: string;
9 | };
10 |
11 | export async function getCurrentUser() {
12 | const res = await axiosInstance.get(`${baseURL}/users/current`);
13 | return res.data.data;
14 | }
15 |
16 | export async function patchUser(payload: {
17 | userId: string;
18 | formData: {
19 | firstname: string;
20 | lastname: string;
21 | };
22 | }) {
23 | const { userId, formData } = payload;
24 | const res = await axiosInstance.patch(`${baseURL}/users/${userId}`, formData);
25 | return res.data.data;
26 | }
27 |
--------------------------------------------------------------------------------
/client/src/components/layout/RootLayout.tsx:
--------------------------------------------------------------------------------
1 | import { Outlet } from "react-router-dom";
2 | import SideMenu from "./SideMenu";
3 | import ButtomMenu from "./ButtomMenu";
4 |
5 | export default function RootLayout() {
6 | return (
7 |
8 |
11 |
13 |
14 | );
15 | }
16 |
--------------------------------------------------------------------------------
/client/src/components/AlertMassage.tsx:
--------------------------------------------------------------------------------
1 | import { Info, Ban } from "lucide-react";
2 | import { Alert, AlertDescription } from "@/components/ui/alert";
3 |
4 | interface AlertMessageProps extends React.HTMLAttributes
19 |
28 | );
29 | }
30 |
--------------------------------------------------------------------------------
/client/src/features/auth/apis/auth-api.ts:
--------------------------------------------------------------------------------
1 | import axios from "axios";
2 | import { baseURL } from "@/lib/axios";
3 |
4 | const axiosInstance = axios.create({
5 | baseURL,
6 | });
7 |
8 | export async function userLogin(payload: { email: string; password: string }) {
9 | const { email, password } = payload;
10 | const { data } = await axiosInstance.post(`${baseURL}/users/signin`, {
11 | email,
12 | password,
13 | });
14 | return data;
15 | }
16 |
17 | export async function userSignup(payload: {
18 | firstname: string;
19 | lastname: string;
20 | email: string;
21 | password: string;
22 | passwordCheck: string;
23 | }) {
24 | const { firstname, lastname, email, password, passwordCheck } = payload;
25 | const { data } = await axiosInstance.post(`${baseURL}/users/signup`, {
26 | firstname,
27 | lastname,
28 | email,
29 | password,
30 | passwordCheck,
31 | });
32 | return data;
33 | }
34 |
35 | export async function checkPermission({ token }: { token: string }) {
36 | const { data } = await axiosInstance.post(`${baseURL}/users/permission`, {
37 | token,
38 | });
39 | return data;
40 | }
41 |
--------------------------------------------------------------------------------
/server/controllers/user-controller.js:
--------------------------------------------------------------------------------
1 | const userService = require('../services/user-service');
2 |
3 | const userController = {
4 | signUp: (req, res, next) => {
5 | userService.signUpUser(req, (err, data) => {
6 | if (err) return next(err);
7 | res.json({ status: 'success', data });
8 | });
9 | },
10 | signIn: (req, res, next) => {
11 | userService.signInUser(req, (err, data) => {
12 | if (err) return next(err);
13 | res.json({ status: 'success', data });
14 | });
15 | },
16 | checkPermission: (req, res, next) => {
17 | userService.checkPermission(req, (err, data) => {
18 | if (err) return next(err);
19 | res.json({ status: 'success', data });
20 | });
21 | },
22 | getCurrentUser: (req, res, next) => {
23 | userService.getCurrentUser(req, (err, data) => {
24 | if (err) return next(err);
25 | res.json({ status: 'success', data });
26 | });
27 | },
28 | patchUser: (req, res, next) => {
29 | userService.patchUser(req, (err, data) => {
30 | if (err) return next(err);
31 | res.json({ status: 'success', data });
32 | });
33 | },
34 | };
35 |
36 | module.exports = userController;
37 |
--------------------------------------------------------------------------------
/server/models/project.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | const { Model } = require('sequelize');
3 | module.exports = (sequelize, DataTypes) => {
4 | class Project extends Model {
5 | /**
6 | * Helper method for defining associations.
7 | * This method is not a part of Sequelize lifecycle.
8 | * The `models/index` file will call this method automatically.
9 | */
10 | static associate(models) {
11 | Project.belongsTo(models.User, {
12 | foreignKey: 'creatorId',
13 | as: 'Creator',
14 | });
15 | Project.belongsToMany(models.User, {
16 | through: models.Membership,
17 | foreignKey: 'projectId',
18 | as: 'Members',
19 | });
20 | Project.hasMany(models.Category, { foreignKey: 'projectId' });
21 | Project.hasMany(models.Issue, { foreignKey: 'projectId' });
22 | }
23 | }
24 | Project.init(
25 | {
26 | name: DataTypes.STRING,
27 | description: DataTypes.TEXT,
28 | creatorId: DataTypes.INTEGER,
29 | isPublic: DataTypes.BOOLEAN,
30 | isDeleted: DataTypes.BOOLEAN,
31 | },
32 | {
33 | sequelize,
34 | modelName: 'Project',
35 | tableName: 'Projects',
36 | underscored: true,
37 | }
38 | );
39 | return Project;
40 | };
41 |
--------------------------------------------------------------------------------
/client/src/components/ui/switch.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import * as SwitchPrimitives from "@radix-ui/react-switch";
3 |
4 | import { cn } from "@/utils";
5 |
6 | const Switch = React.forwardRef<
7 | React.ElementRef
20 |
27 |
21 |
25 |
22 |
24 | Settings
23 |
4 |
20 | Loading...
21 |
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/client/src/components/ui/avatar.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import * as AvatarPrimitive from "@radix-ui/react-avatar";
3 |
4 | import { cn } from "@/utils";
5 |
6 | const Avatar = React.forwardRef<
7 | React.ElementRefSome errors occurred
; 23 | } 24 | 25 | const projects = data.projects as Project[]; 26 | 27 | return ( 28 |
29 |
52 | );
53 | }
54 |
--------------------------------------------------------------------------------
/client/src/components/layout/ButtomMenu.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@/utils";
2 | import { Button } from "../ui/button";
3 | import { NavLink, useNavigate } from "react-router-dom";
4 | import { ModeToggle } from "../ModeToggle";
5 | import { LayoutGrid, CheckSquare, Settings, LogOut } from "lucide-react";
6 |
7 | interface ButtomMenuProps extends React.HTMLAttributes
30 |
42 |
50 |
51 |
31 |
41 |
32 |
37 | Projects
33 |34 | Here is s a list of your projects! 35 |
36 |
38 |
40 |
43 | {projects.map((project) => (
44 |
45 |
49 |
18 |
48 | );
49 | }
50 |
--------------------------------------------------------------------------------
/client/src/providers/theme-provider.tsx:
--------------------------------------------------------------------------------
1 | import { createContext, useContext, useEffect, useState } from "react";
2 |
3 | type Theme = "dark" | "light" | "system";
4 |
5 | type ThemeProviderProps = {
6 | children: React.ReactNode;
7 | defaultTheme?: Theme;
8 | storageKey?: string;
9 | };
10 |
11 | type ThemeProviderState = {
12 | theme: Theme;
13 | setTheme: (theme: Theme) => void;
14 | };
15 |
16 | const initialState: ThemeProviderState = {
17 | theme: "system",
18 | setTheme: () => null,
19 | };
20 |
21 | const ThemeProviderContext = createContext
19 |
20 | {({ isActive }) => (
21 |
24 | )}
25 |
26 |
27 | {({ isActive }) => (
28 |
31 | )}
32 |
33 |
34 | {({ isActive }) => (
35 |
38 | )}
39 |
40 |
43 |
47 |
44 |
46 |
19 |
64 | );
65 | }
66 |
--------------------------------------------------------------------------------
/client/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | /*eslint-env node*/
3 | module.exports = {
4 | darkMode: ['class'],
5 | content: [
6 | './pages/**/*.{ts,tsx}',
7 | './components/**/*.{ts,tsx}',
8 | './app/**/*.{ts,tsx}',
9 | './src/**/*.{ts,tsx}',
10 | ],
11 | theme: {
12 | container: {
13 | center: true,
14 | padding: '2rem',
15 | screens: {
16 | '2xl': '1400px',
17 | },
18 | },
19 | extend: {
20 | colors: {
21 | border: 'hsl(var(--border))',
22 | input: 'hsl(var(--input))',
23 | ring: 'hsl(var(--ring))',
24 | background: 'hsl(var(--background))',
25 | foreground: 'hsl(var(--foreground))',
26 | primary: {
27 | DEFAULT: 'hsl(var(--primary))',
28 | foreground: 'hsl(var(--primary-foreground))',
29 | },
30 | secondary: {
31 | DEFAULT: 'hsl(var(--secondary))',
32 | foreground: 'hsl(var(--secondary-foreground))',
33 | },
34 | destructive: {
35 | DEFAULT: 'hsl(var(--destructive))',
36 | foreground: 'hsl(var(--destructive-foreground))',
37 | },
38 | muted: {
39 | DEFAULT: 'hsl(var(--muted))',
40 | foreground: 'hsl(var(--muted-foreground))',
41 | },
42 | accent: {
43 | DEFAULT: 'hsl(var(--accent))',
44 | foreground: 'hsl(var(--accent-foreground))',
45 | },
46 | popover: {
47 | DEFAULT: 'hsl(var(--popover))',
48 | foreground: 'hsl(var(--popover-foreground))',
49 | },
50 | card: {
51 | DEFAULT: 'hsl(var(--card))',
52 | foreground: 'hsl(var(--card-foreground))',
53 | },
54 | },
55 | borderRadius: {
56 | lg: 'var(--radius)',
57 | md: 'calc(var(--radius) - 2px)',
58 | sm: 'calc(var(--radius) - 4px)',
59 | },
60 | keyframes: {
61 | 'accordion-down': {
62 | from: { height: 0 },
63 | to: { height: 'var(--radix-accordion-content-height)' },
64 | },
65 | 'accordion-up': {
66 | from: { height: 'var(--radix-accordion-content-height)' },
67 | to: { height: 0 },
68 | },
69 | },
70 | animation: {
71 | 'accordion-down': 'accordion-down 0.2s ease-out',
72 | 'accordion-up': 'accordion-up 0.2s ease-out',
73 | },
74 | },
75 | },
76 | plugins: [require('tailwindcss-animate')],
77 | };
78 |
--------------------------------------------------------------------------------
/client/src/features/projects/components/ProjectChart.tsx:
--------------------------------------------------------------------------------
1 | import { useMediaQuery } from "react-responsive";
2 | import { PieChart, Pie, Legend, Tooltip, ResponsiveContainer } from "recharts";
3 |
4 | const capitalize = (word: string) => {
5 | return word.charAt(0).toUpperCase() + word.slice(1);
6 | };
7 |
8 | const COLORS = [
9 | "#d0b9f9",
10 | "#b18af4",
11 | "#925bf0",
12 | "#732dec",
13 | "#5a13d2",
14 | "#f9a8d4",
15 | "#f472b6",
16 | "#ec4899",
17 | "#db2777",
18 | "#be185d",
19 | "#93c5fd",
20 | "#60a5fa",
21 | "#3b82f6",
22 | "#2563eb",
23 | "#1d4ed8",
24 | ];
25 |
26 | const RADIAN = Math.PI / 180;
27 |
28 | const renderColorfulLegendText = (value: string) => {
29 | return {value};
30 | };
31 |
32 | const renderCustomizedLabel = ({
33 | cx,
34 | cy,
35 | midAngle,
36 | innerRadius,
37 | outerRadius,
38 | percent,
39 | index,
40 | }: any) => {
41 | const radius = innerRadius + (outerRadius - innerRadius) * 1.4;
42 | const x = cx + radius * Math.cos(-midAngle * RADIAN);
43 | const y = cy + radius * Math.sin(-midAngle * RADIAN);
44 |
45 | return (
46 |
20 |
63 |
21 | Page {table.getState().pagination.pageIndex + 1} of{" "}
22 | {table.getPageCount()}
23 |
24 |
25 |
34 |
43 |
52 |
61 |
62 |
41 | Creator
42 |
43 |
46 |
47 | Members
48 |
52 | 49 | {project.Members.length} 50 |
51 |
53 | Issues
54 |
58 | 55 | {filteredIssues.length} 56 |
57 |Something went wrong
; 30 | } 31 | 32 | const project = projectQuery.data.project as Project; 33 | const issues = issuesQuery.data.issues as Issue[]; 34 | 35 | return ( 36 |
37 |
67 | );
68 | }
69 |
--------------------------------------------------------------------------------
/client/src/features/issues/apis/issue-api.ts:
--------------------------------------------------------------------------------
1 | import { baseURL, axiosInstance } from "@/lib/axios";
2 |
3 | export type Issue = {
4 | id: number;
5 | title: string;
6 | description: string;
7 | status: "open" | "in progress" | "wait for review" | "close";
8 | priority: "1" | "2" | "3";
9 | categoryId: number;
10 | reporterId: number;
11 | assigneeId: number | undefined | null;
12 | projectId: number;
13 | createdAt: string;
14 | updatedAt: string;
15 | Reporter: { id: number; firstname: string; lastname: string };
16 | Assignee: { id: number; firstname: string; lastname: string };
17 | Category: { id: number; name: string };
18 | };
19 |
20 | // * 取得專案所有 issue
21 | export async function getIssues(payload: { projectId: string }) {
22 | const { projectId } = payload;
23 | const res = await axiosInstance.get(
24 | `${baseURL}/projects/${projectId}/issues`,
25 | );
26 | return res.data.data;
27 | }
28 |
29 | // * 取得特定 issue
30 | export async function getIssue(payload: {
31 | projectId: string;
32 | issueId: string;
33 | }) {
34 | const { projectId, issueId } = payload;
35 | const res = await axiosInstance.get(
36 | `${baseURL}/projects/${projectId}/issues/${issueId}`,
37 | );
38 | return res.data.data;
39 | }
40 |
41 | // * 新增一筆 issue
42 | export async function postIssue(payload: {
43 | projectId: string;
44 | formData: {
45 | title: string;
46 | description: string;
47 | priority: string;
48 | categoryId: number;
49 | };
50 | }) {
51 | const { projectId, formData } = payload;
52 | const res = await axiosInstance.post(
53 | `${baseURL}/projects/${projectId}/issues`,
54 | formData,
55 | );
56 | return res.data.data;
57 | }
58 |
59 | // * 修改一筆 issue
60 | export async function patchIssue(payload: {
61 | projectId: string;
62 | issueId: string;
63 | formData: {
64 | title: string;
65 | description: string;
66 | priority: string;
67 | categoryId: number;
68 | status: string;
69 | };
70 | }) {
71 | const { projectId, issueId, formData } = payload;
72 | const res = await axiosInstance.patch(
73 | `${baseURL}/projects/${projectId}/issues/${issueId}`,
74 | formData,
75 | );
76 | return res.data.data;
77 | }
78 |
79 | // * 刪除一筆 issue
80 | export async function deleteIssue(payload: {
81 | projectId: string;
82 | issueId: string;
83 | }) {
84 | const { projectId, issueId } = payload;
85 | const res = await axiosInstance.delete(
86 | `${baseURL}/projects/${projectId}/issues/${issueId}`,
87 | );
88 | return res.data.data;
89 | }
90 |
91 | // * assign user to issue
92 | export async function assignIssue(payload: {
93 | projectId: string;
94 | issueId: string;
95 | formData: {
96 | assigneeId: number;
97 | };
98 | }) {
99 | const { projectId, issueId, formData } = payload;
100 | const res = await axiosInstance.patch(
101 | `${baseURL}/projects/${projectId}/issues/${issueId}/assign`,
102 | formData,
103 | );
104 | return res.data.data;
105 | }
106 |
--------------------------------------------------------------------------------
/client/src/features/issues/components/DeleteIssueAlert.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | AlertDialog,
3 | AlertDialogAction,
4 | AlertDialogCancel,
5 | AlertDialogContent,
6 | AlertDialogDescription,
7 | AlertDialogFooter,
8 | AlertDialogHeader,
9 | AlertDialogTitle,
10 | } from "@/components/ui/alert-dialog";
11 | import { AlertMessage } from "../../../components/AlertMassage";
12 | import { useMutation, useQueryClient } from "@tanstack/react-query";
13 | import { deleteIssue } from "@/features/issues/apis/issue-api";
14 | import { useState } from "react";
15 | import { useNavigate } from "react-router-dom";
16 | import { XOctagon } from "lucide-react";
17 | import { AxiosError } from "axios";
18 | import { ErrorResponseData } from "@/lib/axios";
19 |
20 | interface DeleteIssueAlertProps extends React.HTMLAttributes
38 |
60 |
65 |
66 |
39 |
58 |
59 |
40 |
41 | {project.isPublic ? "public" : "private"}
42 |
43 |
48 | 44 | {project.name} 45 |
46 |{project.description}
47 |
49 |
50 |
54 |
55 |
57 |
62 |
64 |
22 |
29 | Status
30 | Category
31 | Priority
32 |
33 |
34 | {issues.length ? (
35 | <>
36 |
23 |
28 | Issues overview
24 |25 | Total issues: {issues.length} 26 |
27 |48 | There are no issues yet. 49 |
50 | )} 51 |
10 |
15 |
16 | ));
17 | Table.displayName = "Table";
18 |
19 | const TableHeader = React.forwardRef<
20 | HTMLTableSectionElement,
21 | React.HTMLAttributesSomething went wrong
; 34 | } 35 | 36 | const currentUser = data.currentUser as CurrentUser; 37 | 38 | return ( 39 |
40 |
96 | );
97 | }
98 |
--------------------------------------------------------------------------------
/client/src/features/comments/components/CommentCard.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import { Card, CardContent } from "@/components/ui/card";
3 | import {
4 | DropdownMenu,
5 | DropdownMenuContent,
6 | DropdownMenuItem,
7 | DropdownMenuLabel,
8 | DropdownMenuSeparator,
9 | DropdownMenuTrigger,
10 | } from "@/components/ui/dropdown-menu";
11 | import { formatTime } from "@/utils";
12 | import UserAvatar from "@/components/UserAvatar";
13 | import { Button } from "@/components/ui/button";
14 | import { EditCommentSheet } from "./EditCommentSheet";
15 | import { DeleteCommentAlert } from "./DeleteCommentAlert";
16 | import { Comment } from "@/features/comments/apis/comment-api";
17 | import { MoreHorizontal, Pencil, Trash2 } from "lucide-react";
18 | import { Authorization } from "@/components/Authorization";
19 |
20 | interface CommentCardProps extends React.HTMLAttributes
41 |
95 |
42 | 
43 | 
44 |
94 | 45 | Hi, {currentUser.firstname} 46 |
47 |
48 |
49 | {({ isActive }) => (
50 |
57 | )}
58 |
59 |
60 | {({ isActive }) => (
61 |
68 | )}
69 |
70 |
71 | {({ isActive }) => (
72 |
79 | )}
80 |
81 |
89 |
93 |
90 |
92 |
34 |
43 |
48 |
49 |
53 |
54 |
55 |
56 | Actions
57 | setShowEditSheet(true)}>
59 |
61 | setShowDeleteDialog(true)}
64 | >
65 |
67 |
68 |
69 |
84 |
35 |
42 |
37 | {comment.User.firstname}
38 | {comment.User.lastname}
39 |
40 | {formatTime(comment.createdAt)}
41 | {comment.text}
85 |
34 |
44 | );
45 | if (projectQuery.status === "error") {
46 | return
35 |
43 |
36 |
42 | Members
37 | 41 |Something went wrong
; 47 | } 48 | 49 | const creator = projectQuery.data.project.Creator as Member; 50 | const members = projectQuery.data.project.Members as Member[]; 51 | 52 | return ( 53 |
59 |
69 |
71 |
72 |
60 |
62 |
66 |
67 |
68 | Members
61 |
73 |
87 | {members.map((member) => (
88 |
104 | )}
105 |
106 |
74 | Creator
84 |
85 | {members.length > 0 && (
86 |
75 |
83 |
77 |
82 | 78 | {creator.firstname} {creator.lastname} 79 |
80 |{creator.email}
81 |
89 |
99 |
101 |
102 | ))}
103 |
91 |
98 | 92 | {member.firstname} {member.lastname} 93 |
94 |95 | {member.email} 96 |
97 |
70 |
72 |
29 |
39 | );
40 | if (categoriesQuery.status === "error") {
41 | return
30 |
38 |
31 |
37 | Categories
32 | 36 |Something went wrong
; 42 | } 43 | 44 | const categories = categoriesQuery.data.categories as Category[]; 45 | 46 | const defaultCategories = categories.filter((category) => category.isDefault); 47 | const projectCategories = categories.filter( 48 | (category) => !category.isDefault, 49 | ); 50 | 51 | return ( 52 |
58 |
68 |
70 |
71 |
59 |
61 |
65 |
66 |
67 | Categories
60 |
73 | {defaultCategories.map((category) => (
74 |
80 | {projectCategories.map((category) => (
81 |
75 | {category.name}
76 | Default
77 |
78 | ))}
79 |
85 |
86 | {category.name}
87 |
88 |
109 | ))}
110 |
89 |
93 |
98 |
102 |
107 |
108 | Something went wrong
; 43 | } 44 | 45 | const project = projectQuery.data.project as Project; 46 | const issues = issuesQuery.data.issues as Issue[]; 47 | 48 | return ( 49 |
50 |
105 | );
106 | }
107 |
--------------------------------------------------------------------------------
/client/src/features/comments/components/CommentSheet.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "@/components/ui/button";
2 | import { Textarea } from "@/components/ui/textarea";
3 | import {
4 | Sheet,
5 | SheetContent,
6 | SheetFooter,
7 | SheetHeader,
8 | SheetTitle,
9 | SheetTrigger,
10 | } from "@/components/ui/sheet";
11 | import {
12 | Form,
13 | FormControl,
14 | FormField,
15 | FormItem,
16 | FormLabel,
17 | FormMessage,
18 | } from "@/components/ui/form";
19 | import * as z from "zod";
20 | import { useForm } from "react-hook-form";
21 | import { zodResolver } from "@hookform/resolvers/zod";
22 | import { useMediaQuery } from "react-responsive";
23 | import { useState } from "react";
24 | import { useMutation, useQueryClient } from "@tanstack/react-query";
25 | import { postComment } from "@/features/comments/apis/comment-api";
26 | import { AlertMessage } from "../../../components/AlertMassage";
27 | import { Plus } from "lucide-react";
28 | import { AxiosError } from "axios";
29 | import { ErrorResponseData } from "@/lib/axios";
30 |
31 | interface CommentSheetProps extends React.HTMLAttributes
51 |
91 |
103 |
104 |
52 |
90 |
53 |
54 | {project.isPublic ? "public" : "private"}
55 |
56 |
61 | 57 | {project.name} 58 |
59 |{project.description}
60 |
62 |
89 |
63 |
68 |
64 | Creator:
Created at: {formatTime(project.createdAt)}
67 |
69 |
70 |
74 |
75 |
79 |
81 |
85 |
87 |
88 |
92 | {/* charts */}
93 |
102 |
94 |
96 | {/* members */}
97 |
98 |
101 |