Make project table associated with the user

frontend/src/app/[locale]/projects/NeedSignedInDialog.tsx

@@ -0,0 +1,31 @@
+'use client';
+import { ProjectsMessages } from '@/types/project';
+import { Link } from '@/src/navigation';
+import { Button, Modal, ModalContent, ModalHeader, ModalFooter } from '@nextui-org/react';
+
+type Props = {
+  isOpen: boolean;
+  onCancel: () => void;
+  messages: ProjectsMessages;
+  locale: string;
+};
+
+export default function NeedSignedInDialog({ isOpen, onCancel, messages, locale }: Props) {
+  return (
+    <Modal
+      isOpen={isOpen}
+      onOpenChange={() => {
+        onCancel();
+      }}
+    >
+      <ModalContent>
+        <ModalHeader className="flex flex-col gap-1">{messages.needSignedIn}</ModalHeader>
+        <ModalFooter>
+          <Link href={'/account/signin'} locale={locale}>
+            <Button color="primary">{messages.signIn}</Button>
+          </Link>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+}

frontend/src/app/[locale]/projects/ProjectDialog.tsx

@@ -1,14 +1,24 @@
 'use client';
 import React from 'react';
 import { useState, useEffect } from 'react';
-import { Button, Input, Textarea, Modal, ModalContent, ModalHeader, ModalBody, ModalFooter } from '@nextui-org/react';
+import {
+  Button,
+  Input,
+  Textarea,
+  Checkbox,
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+} from '@nextui-org/react';
 import { ProjectType, ProjectsMessages } from '@/types/project';
 
 type Props = {
   isOpen: boolean;
   editingProject: ProjectType;
   onCancel: () => void;
-  onSubmit: (name: string, detail: string) => void;
+  onSubmit: (name: string, detail: string, isPublic: boolean) => void;
   messages: ProjectsMessages;
 };
 
@@ -25,6 +35,8 @@ export default function ProjectDialog({ isOpen, editingProject, onCancel, onSubm
     errorMessage: '',
   });
 
+  const [isProjectPublic, setIsProjectPublic] = useState(editingProject ? editingProject.isPublic : true);
+
   useEffect(() => {
     if (editingProject) {
       setProjectName({
@@ -36,6 +48,8 @@ export default function ProjectDialog({ isOpen, editingProject, onCancel, onSubm
         ...projectDetail,
         text: editingProject.detail ? editingProject.detail : '',
       });
+
+      setIsProjectPublic(editingProject.isPublic);
     } else {
       setProjectName({
         ...projectName,
@@ -46,6 +60,8 @@ export default function ProjectDialog({ isOpen, editingProject, onCancel, onSubm
         ...projectDetail,
         text: '',
       });
+
+      setIsProjectPublic(true);
     }
   }, [editingProject]);
 
@@ -73,7 +89,7 @@ export default function ProjectDialog({ isOpen, editingProject, onCancel, onSubm
       return;
     }
 
-    onSubmit(projectName.text, projectDetail.text);
+    onSubmit(projectName.text, projectDetail.text, isProjectPublic);
     clear();
   };
 
@@ -112,6 +128,10 @@ export default function ProjectDialog({ isOpen, editingProject, onCancel, onSubm
               });
             }}
           />
+          <Checkbox isSelected={isProjectPublic} onValueChange={setIsProjectPublic}>
+            {messages.public}
+          </Checkbox>
+          <div className="text-small text-default-500">{messages.ifYouMakePublic}</div>
         </ModalBody>
         <ModalFooter>
           <Button variant="light" onPress={onCancel}>

frontend/src/app/[locale]/projects/ProjectsPage.tsx

@@ -1,10 +1,12 @@
 'use client';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useContext } from 'react';
 import { Button } from '@nextui-org/react';
 import { Plus } from 'lucide-react';
+import { TokenContext } from '@/src/app/[locale]/TokenProvider';
 import { ProjectType, ProjectsMessages } from '@/types/project';
 import ProjectsTable from './ProjectsTable';
 import ProjectDialog from './ProjectDialog';
+import NeedSignedInDialog from './NeedSignedInDialog';
 import { fetchProjects, createProject, updateProject, deleteProject } from './projectsControl';
 
 export type Props = {
@@ -13,6 +15,7 @@ export type Props = {
 };
 
 export default function ProjectsPage({ messages, locale }: Props) {
+  const context = useContext(TokenContext);
   const [projects, setProjects] = useState([]);
 
   useEffect(() => {
@@ -29,9 +32,15 @@ export default function ProjectsPage({ messages, locale }: Props) {
   }, []);
 
   // dialog
+  const [isNeedSignedInDialogOpen, setIsNeedSignedInDialogOpen] = useState(false);
   const [isProjectDialogOpen, setIsProjectDialogOpen] = useState(false);
   const [editingProject, setEditingProject] = useState<ProjectType | null>(null);
   const openDialogForCreate = () => {
+    if (!context.token || !context.token.user) {
+      setIsNeedSignedInDialogOpen(true);
+      return;
+    }
+
     setIsProjectDialogOpen(true);
     setEditingProject(null);
   };
@@ -41,13 +50,13 @@ export default function ProjectsPage({ messages, locale }: Props) {
     setEditingProject(null);
   };
 
-  const onSubmit = async (name: string, detail: string) => {
+  const onSubmit = async (name: string, detail: string, isPublic: boolean) => {
     if (editingProject) {
-      const updatedProject = await updateProject(editingProject.id, name, detail);
+      const updatedProject = await updateProject(editingProject.id, name, detail, isPublic);
       const updatedProjects = projects.map((project) => (project.id === updatedProject.id ? updatedProject : project));
       setProjects(updatedProjects);
     } else {
-      const newProject = await createProject(name, detail);
+      const newProject = await createProject(name, detail, isPublic, context.token.user.id);
       setProjects([...projects, newProject]);
     }
     closeDialog();
@@ -93,6 +102,13 @@ export default function ProjectsPage({ messages, locale }: Props) {
         onSubmit={onSubmit}
         messages={messages}
       />
+
+      <NeedSignedInDialog
+        isOpen={isNeedSignedInDialogOpen}
+        onCancel={() => setIsNeedSignedInDialogOpen(false)}
+        messages={messages}
+        locale={locale}
+      />
     </div>
   );
 }

frontend/src/app/[locale]/projects/page.tsx

@@ -16,11 +16,15 @@ export default function Page(params: { locale: string }) {
     actions: t('actions'),
     projectName: t('project_name'),
     projectDetail: t('project_detail'),
+    public: t('public'),
+    ifYouMakePublic: t('if_you_make_public'),
     close: t('close'),
     create: t('create'),
     update: t('update'),
     pleaseEnter: t('please_enter'),
     noProjectsFound: t('no_projects_found'),
+    needSignedIn: t('you_need_signed_in'),
+    signIn: t('sign_in'),
   };
   return (
     <>

frontend/src/app/[locale]/projects/projectsControl.ts

@@ -29,10 +29,12 @@ async function fetchProjects() {
 /**
  * Create project
  */
-async function createProject(name: string, detail: string) {
+async function createProject(name: string, detail: string, isPublic: boolean, userId: number) {
   const newProjectData = {
-    name: name,
-    detail: detail,
+    name,
+    detail,
+    isPublic,
+    userId,
   };
 
   const fetchOptions = {
@@ -61,10 +63,11 @@ async function createProject(name: string, detail: string) {
 /**
  * Update project
  */
-async function updateProject(projectId: number, name: string, detail: string) {
+async function updateProject(projectId: number, name: string, detail: string, isPublic: boolean) {
   const updatedProjectData = {
-    name: name,
-    detail: detail,
+    name,
+    detail,
+    isPublic,
   };
 
   const fetchOptions = {