diff --git a/src/mockData/mockBoards.tsx b/src/mockData/mockBoards.tsx index 15fd9e4..836dc08 100644 --- a/src/mockData/mockBoards.tsx +++ b/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" }, ]; diff --git a/src/modules/NewProjectDialog/NewProjectDialog.tsx b/src/modules/NewProjectDialog/NewProjectDialog.tsx index 21b5bd9..4fb9cd7 100644 --- a/src/modules/NewProjectDialog/NewProjectDialog.tsx +++ b/src/modules/NewProjectDialog/NewProjectDialog.tsx @@ -14,11 +14,19 @@ import { createNewProjectPattern } from "../../validation/patterns.const"; interface NewProjectDialogProps { isOpen: boolean; setIsOpen: Dispatch>; + 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,7 +71,7 @@ export default function NewProjectDialog({ setInputValue(value); const reg = new RegExp(createNewProjectPattern).test(value); if (!reg) { - setError(t("dialogCreateProjectHelperText")); + setError(dialogHelper); } }; return ( @@ -69,7 +79,7 @@ export default function NewProjectDialog({ paddings={[10, 6, 7, 6]} isOpen={isOpen} headerIcon={} - title={t("dialogCreateProjectTitle")} + title={dialogTitle} alignTitle='center' handleClose={handleClose} buttons={[ diff --git a/src/modules/WelcomeScreen/WelcomeScreen.tsx b/src/modules/WelcomeScreen/WelcomeScreen.tsx index b33be58..8eb4741 100644 --- a/src/modules/WelcomeScreen/WelcomeScreen.tsx +++ b/src/modules/WelcomeScreen/WelcomeScreen.tsx @@ -19,7 +19,12 @@ export const WelcomeScreen = () => { - + ); }; diff --git a/src/translations/en.json b/src/translations/en.json index fb241d8..34b1d1c 100644 --- a/src/translations/en.json +++ b/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", diff --git a/src/translations/pl.json b/src/translations/pl.json index 37c118d..463114c 100644 --- a/src/translations/pl.json +++ b/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", diff --git a/src/views/Board/Board.tsx b/src/views/Board/Board.tsx index a4f3cd9..4ad8661 100644 --- a/src/views/Board/Board.tsx +++ b/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: , + label: "Add column", + onClick: () => setIsDialogOpen(!isDialogOpen), + }, + { + id: 1, + icon: , + 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 ( console.log("works")} - menuComponent={} + buttonHandler={() => console.log("button clicked")} + menuComponent={} returnLink={t("boardsBackLink")} /> + {boardNumberAlert && ( + setBoardNumberAlert(false)} severity='error'> + {t("boardAlertNumber")} + + )} + {boardNameAlert && ( + setBoardNameAlert(false)} severity='error'> + {t("boardAlertName")} + + )} + {boards.map((project) => (