feat: add project settings page

2024-06-02 21:22:33 +09:00
parent 016a8d07c5
commit 24fe7bebb3
21 changed files with 471 additions and 91 deletions
--- a/frontend/components/ProjectDialog.tsx
+++ b/frontend/components/ProjectDialog.tsx
@@ -0,0 +1,147 @@
+'use client';
+import React from 'react';
+import { useState, useEffect } from '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 | null;
+  onCancel: () => void;
+  onSubmit: (name: string, detail: string, isPublic: boolean) => void;
+  messages: ProjectsMessages;
+};
+
+export default function ProjectDialog({ isOpen, editingProject, onCancel, onSubmit, messages }: Props) {
+  const [projectName, setProjectName] = useState({
+    text: editingProject ? editingProject.name : '',
+    isInvalid: false,
+    errorMessage: '',
+  });
+
+  const [projectDetail, setProjectDetail] = useState({
+    text: editingProject ? editingProject.detail : '',
+    isInvalid: false,
+    errorMessage: '',
+  });
+
+  const [isProjectPublic, setIsProjectPublic] = useState(editingProject ? editingProject.isPublic : true);
+
+  useEffect(() => {
+    if (editingProject) {
+      setProjectName({
+        ...projectName,
+        text: editingProject.name,
+      });
+
+      setProjectDetail({
+        ...projectDetail,
+        text: editingProject.detail ? editingProject.detail : '',
+      });
+
+      setIsProjectPublic(editingProject.isPublic);
+    } else {
+      setProjectName({
+        ...projectName,
+        text: '',
+      });
+
+      setProjectDetail({
+        ...projectDetail,
+        text: '',
+      });
+
+      setIsProjectPublic(true);
+    }
+  }, [editingProject]);
+
+  const clear = () => {
+    setProjectName({
+      isInvalid: false,
+      text: '',
+      errorMessage: '',
+    });
+    setProjectDetail({
+      isInvalid: false,
+      text: '',
+      errorMessage: '',
+    });
+  };
+
+  const validate = () => {
+    if (!projectName.text) {
+      setProjectName({
+        text: '',
+        isInvalid: true,
+        errorMessage: messages.pleaseEnter,
+      });
+
+      return;
+    }
+
+    onSubmit(projectName.text, projectDetail.text, isProjectPublic);
+    clear();
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onOpenChange={() => {
+        onCancel();
+      }}
+    >
+      <ModalContent>
+        <ModalHeader className="flex flex-col gap-1">{messages.project}</ModalHeader>
+        <ModalBody>
+          <Input
+            type="text"
+            label={messages.projectName}
+            value={projectName.text}
+            isInvalid={projectName.isInvalid}
+            errorMessage={projectName.errorMessage}
+            onChange={(e) => {
+              setProjectName({
+                ...projectName,
+                text: e.target.value,
+              });
+            }}
+          />
+          <Textarea
+            label={messages.projectDetail}
+            value={projectDetail.text}
+            isInvalid={projectDetail.isInvalid}
+            errorMessage={projectDetail.errorMessage}
+            onChange={(e) => {
+              setProjectDetail({
+                ...projectDetail,
+                text: e.target.value,
+              });
+            }}
+          />
+          <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}>
+            {messages.close}
+          </Button>
+          <Button color="primary" onPress={validate}>
+            {editingProject ? messages.update : messages.create}
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+}