Merge pull request #72 from intive/feature/P2022-490_adding_boards

Feature/[P2022 490] adding boards

src/mockData/mockBoards.tsx

@@ -1,5 +1,5 @@
 export const mockBoards = [
-  { name: "TODO" },
-  { name: "IN PROGRESS" },
-  { name: "DONE" },
+  { name: "todo" },
+  { name: "in progress" },
+  { name: "done" },
 ];

src/modules/NewProjectDialog/NewProjectDialog.tsx

@@ -14,11 +14,19 @@ import { createNewProjectPattern } from "../../validation/patterns.const";
 interface NewProjectDialogProps {
   isOpen: boolean;
   setIsOpen: Dispatch<SetStateAction<boolean>>;
+  dialogTitle: string;
+  dialogHelper: string;
+  handleClick?: any;
+  board?: boolean;
 }
 
 export default function NewProjectDialog({
   isOpen,
   setIsOpen,
+  dialogTitle,
+  dialogHelper,
+  handleClick,
+  board,
 }: NewProjectDialogProps) {
   const { t } = useTranslation();
 
@@ -37,7 +45,7 @@ export default function NewProjectDialog({
       return;
     }
     changeViewTimeout = setTimeout(() => {
-      navigate(Pages.Projects);
+      !board && navigate(Pages.Projects);
       setIsLoading(false);
       setIsOpen(false);
     }, 1000);
@@ -51,7 +59,9 @@ export default function NewProjectDialog({
   };
 
   const handleCreate = () => {
-    console.log("Project created");
+    board
+      ? (handleClick = handleClick(inputValue))
+      : (handleClick = handleClick);
     setIsLoading(true);
   };
 
@@ -61,15 +71,15 @@ export default function NewProjectDialog({
     setInputValue(value);
     const reg = new RegExp(createNewProjectPattern).test(value);
     if (!reg) {
-      setError(t("dialogCreateProjectHelperText"));
+      setError(dialogHelper);
     }
   };
   return (
     <BasicModal
       paddings={[10, 6, 7, 6]}
       isOpen={isOpen}
       headerIcon={<EditIcon />}
-      title={t("dialogCreateProjectTitle")}
+      title={dialogTitle}
       alignTitle='center'
       handleClose={handleClose}
       buttons={[

src/modules/WelcomeScreen/WelcomeScreen.tsx

@@ -19,7 +19,12 @@ export const WelcomeScreen = () => {
       <Button onClick={() => setIsDialogOpen(!isDialogOpen)}>
         {t("welcomeBoardButton")}
       </Button>
-      <NewProjectDialog isOpen={isDialogOpen} setIsOpen={setIsDialogOpen} />
+      <NewProjectDialog
+        isOpen={isDialogOpen}
+        setIsOpen={setIsDialogOpen}
+        dialogTitle={t("dialogCreateProjectTitle")}
+        dialogHelper={t("dialogCreateProjectHelperText")}
+      />
     </StyledWelcomeScreen>
   );
 };

src/translations/en.json

@@ -22,6 +22,10 @@
   "boardsTitle": "Boards",
   "boardsBackLink": "Return to Projects",
   "newIssueBtn": "Create issue",
+  "boardDialogTitle": "Name your board",
+  "boardDialogHelperText": "Board title has to be at least one character long and cannot begin/end with a whitespace",
+  "boardAlertNumber": "You can have max. 5 boards!",
+  "boardAlertName": "Names of the boards cannot be the same!",
   "labelSummary": "Summary",
   "labelDescription": "Description",
   "labelProject": "Project",

src/translations/pl.json

@@ -22,6 +22,10 @@
   "boardsTitle": "Tablice",
   "boardsBackLink": "Powrót do Projektów",
   "newIssueBtn": "Stwórz zgłoszenie",
+  "boardDialogTitle": "Podaj nazwę tablicy",
+  "boardDialogHelperText": "Nazwa tablicy musi składać się z co najmniej jednego znaku i nie może zaczynać/kończyć się białym znakiem",
+  "boardAlertNumber": "Możesz mieć maksymalnie 5 tablic!",
+  "boardAlertName": "Nazwy tablic nie mogą być takie same!",
   "labelSummary": "Podsumowanie",
   "labelDescription": "Opis",
   "labelProject": "Projekt",

src/views/Board/Board.tsx

@@ -1,25 +1,77 @@
+import { useState } from "react";
+import { useParams } from "react-router-dom";
 import PageHeader from "../../modules/PageHeader/PageHeader";
 import ThreeDotsMenu from "../../components/ThreeDotsMenu/ThreeDotsMenu";
 import { TaskWrapper } from "./Board.style";
 import { StyledPageWrapper } from "../Projects/Projects.style";
-import { mockMenuItems } from "../../mockData/menuItems";
 import { mockBoards } from "../../mockData/mockBoards";
 import { useTranslation } from "react-i18next";
 import TasksCard from "../../modules/TasksCard";
-import { useState } from "react";
+import NewProjectDialog from "@modules/NewProjectDialog/NewProjectDialog";
+import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
+import ViewWeekOutlinedIcon from "@mui/icons-material/ViewWeekOutlined";
+import { Alert } from "@mui/material";
 
 export const Board = () => {
   const [boards, setBoards] = useState(mockBoards);
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
   const { t } = useTranslation();
+  const [boardNumberAlert, setBoardNumberAlert] = useState(false);
+  const [boardNameAlert, setBoardNameAlert] = useState(false);
+  const { name } = useParams();
+
+  const menuOptions = [
+    {
+      id: 0,
+      icon: <ViewWeekOutlinedIcon />,
+      label: "Add column",
+      onClick: () => setIsDialogOpen(!isDialogOpen),
+    },
+    {
+      id: 1,
+      icon: <DeleteOutlineIcon />,
+      label: "Delete project",
+      onClick: () => console.log("project deleted"),
+    },
+  ];
+
+  const handleAddNewBoard = (boardName: string) => {
+    if (boards.find((board) => board.name === boardName.toLowerCase())) {
+      setBoardNameAlert(true);
+    } else {
+      boards.length < 5
+        ? setBoards([...boards, { name: boardName.toLowerCase() }])
+        : setBoardNumberAlert(true);
+    }
+  };
+
   return (
     <StyledPageWrapper>
       <PageHeader
-        pageTitle={t("boardsTitle")}
+        pageTitle={`${t("boardsTitle")} ${name}`}
         buttonText={t("newIssueBtn")}
-        buttonHandler={() => console.log("works")}
-        menuComponent={<ThreeDotsMenu menuItems={mockMenuItems} />}
+        buttonHandler={() => console.log("button clicked")}
+        menuComponent={<ThreeDotsMenu menuItems={menuOptions} />}
         returnLink={t("boardsBackLink")}
       />
+      {boardNumberAlert && (
+        <Alert onClose={() => setBoardNumberAlert(false)} severity='error'>
+          {t("boardAlertNumber")}
+        </Alert>
+      )}
+      {boardNameAlert && (
+        <Alert onClose={() => setBoardNameAlert(false)} severity='error'>
+          {t("boardAlertName")}
+        </Alert>
+      )}
+      <NewProjectDialog
+        isOpen={isDialogOpen}
+        setIsOpen={setIsDialogOpen}
+        dialogTitle={t("boardDialogTitle")}
+        dialogHelper={t("boardDialogHelperText")}
+        handleClick={handleAddNewBoard}
+        board
+      />
       <TaskWrapper>
         {boards.map((project) => (
           <TasksCard title={project.name} key={project.name} />