diff --git a/README.md b/README.md index 6a3a579..bfcc885 100644 --- a/README.md +++ b/README.md @@ -21,6 +21,12 @@ _Note : This application is made as part of internship selection process at AirT
+## Project Explainer Video + +

See the Video

+ +
+ ## Live URL The application is hosted on Netlify. Please find the link to it below. diff --git a/package.json b/package.json index 1608b8b..dfc5127 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "react": "^18.2.0", "react-beautiful-dnd": "^13.1.0", "react-dom": "18.2.0", - "react-scripts": "^2.1.3", + "react-scripts": "^5.0.1", "uuid": "^8.3.2", "web-vitals": "^2.1.4" }, diff --git a/src/App.js b/src/App.js index ecf1494..90a80f9 100644 --- a/src/App.js +++ b/src/App.js @@ -23,7 +23,6 @@ function App() { Kanban Board - {/* */} diff --git a/src/components/Kanban/AddColumn.js b/src/components/Kanban/AddColumn.js new file mode 100644 index 0000000..61ac819 --- /dev/null +++ b/src/components/Kanban/AddColumn.js @@ -0,0 +1,79 @@ +import React, { useState } from "react"; +import { v4 as uuid } from "uuid"; +import { Modal, Box, Button, TextField } from "@mui/material"; +import randomColor from "randomcolor"; + +const AddColumn = (props) => { + const [title, setTitle] = useState(""); + + const newColumn = { + id: props.columnId, + name: title, + color: randomColor({ luminosity: "light" }), + taskIds: [ + { + id: uuid(), + text: "Change css img", + idColumn: props.columnId, + title: "Meeting with Airtribe", + }, + ], + }; + + const style = { + position: "absolute", + top: "50%", + left: "50%", + transform: "translate(-50%, -50%)", + width: 500, + backgroundColor: "white", + boxShadow: 24, + p: 2, + borderRadius: 4, + display: "flex", + justifyContent: "center", + }; + return ( + + +
{ + e.preventDefault(); + props.addColumn(newColumn); + props.closeModal(); + }} + style={{ + display: "flex", + flexDirection: "column", + justifyContent: "center", + }} + > + setTitle(e.target.value)} + required + sx={{ m: 1, width: 400 }} + > + +
+ + + ); +}; + +export default AddColumn; diff --git a/src/components/Kanban/Column.js b/src/components/Kanban/Column.js index c3f312c..cfa7010 100644 --- a/src/components/Kanban/Column.js +++ b/src/components/Kanban/Column.js @@ -1,8 +1,8 @@ import React from "react"; -import { Button } from "@mui/material"; +import { Button, IconButton } from "@mui/material"; import AddIcon from "@mui/icons-material/Add"; import Task from "./Task"; - +import DeleteIcon from "@mui/icons-material/Delete"; import { Droppable } from "react-beautiful-dnd"; import { Box, Typography } from "@mui/material"; @@ -51,7 +51,7 @@ const Column = (props) => { display: "flex", flexDirection: "row", alignItems: "center", - justifyContent: "flex-start", + justifyContent: "space-between", width: "100%", }} > @@ -69,6 +69,15 @@ const Column = (props) => { > {props.columnData.name} ({props.columnData.taskIds.length}) + { + e.preventDefault(); + props.removeColumn(props.columnData.id); + }} + > + + diff --git a/src/components/Kanban/Data.js b/src/components/Kanban/Data.js index b541b80..f3fc996 100644 --- a/src/components/Kanban/Data.js +++ b/src/components/Kanban/Data.js @@ -29,7 +29,12 @@ export const columnsRawData = [ limit: taskLimitNumber, color: randomColor({ luminosity: "light" }), taskIds: [ - { id: uuid(), text: "Blog assets", idColumn: 2, title: "Finalize Blogs" }, + { + id: uuid(), + text: "Blog assets", + idColumn: 2, + title: "Finalize Blogs", + }, ], }, { @@ -45,7 +50,12 @@ export const columnsRawData = [ idColumn: 3, title: "Meeting with Airtribe", }, - { id: uuid(), text: "Meeting", idColumn: 3, title: "Wash Clothes" }, + { + id: uuid(), + text: "Meeting", + idColumn: 3, + title: "Wash Clothes", + }, ], }, ]; diff --git a/src/components/Kanban/Kanban.js b/src/components/Kanban/Kanban.js index 9e3241d..96fdcd9 100644 --- a/src/components/Kanban/Kanban.js +++ b/src/components/Kanban/Kanban.js @@ -1,18 +1,24 @@ import React, { useEffect, useState } from "react"; import { columnsRawData } from "./Data"; import Column from "./Column"; - +import AddColumn from "./AddColumn"; import KanModal from "./Modal"; import { DragDropContext } from "react-beautiful-dnd"; -import { Box } from "@mui/material"; +import { Box, Button } from "@mui/material"; +import AddIcon from "@mui/icons-material/Add"; const Kanban = () => { + const [openColModal, setOpenColModal] = useState(false); const [open, setOpen] = useState(false); const [columns, setColumns] = useState( JSON.parse(window.localStorage.getItem("columns")) || columnsRawData ); const [modal, setModal] = useState(false); + const closeColModal = () => { + setOpenColModal(false); + }; + const onDragEnd = (result) => { const { destination, source, draggableId } = result; @@ -20,7 +26,6 @@ const Kanban = () => { console.log("no destination"); return; } - if ( destination.droppableId === source.droppableId && destination.index === source.index @@ -28,7 +33,6 @@ const Kanban = () => { console.log("index and destination the same"); return; } - const start = columns[source.droppableId]; const finish = columns[destination.droppableId]; @@ -45,7 +49,6 @@ const Kanban = () => { return c; } else return c; }); - const newColumnsState2 = [...newColumnsState]; setColumns(newColumnsState2); } else { @@ -119,6 +122,13 @@ const Kanban = () => { }); setColumns(updatedColumns); }; + const addColumn = (newColumn) => { + setColumns([...columns, newColumn]); + }; + const removeColumn = (columnId) => { + const updatedColumns = columns.filter((item) => item.id !== columnId); + setColumns(updatedColumns); + }; useEffect(() => { window.localStorage.setItem("columns", JSON.stringify(columns)); @@ -127,6 +137,30 @@ const Kanban = () => { return ( <> + + {modal && ( { key={c.name} openModal={openModal} removeTask={removeTask} + removeColumn={removeColumn} editTask={editTask} /> ); diff --git a/src/components/Navbar.js b/src/components/Navbar.js index bae28c9..35f0366 100644 --- a/src/components/Navbar.js +++ b/src/components/Navbar.js @@ -17,10 +17,10 @@ const Navbar = () => { position="static" sx={{ flexGrow: 1, - position: "fixed", + position: "absolute", top: 0, width: "80vw", - right: 0, + right: 50, color: "#000", backgroundColor: "#fff", boxShadow: "none", diff --git a/src/index.css b/src/index.css index 5a6fd75..1da8d47 100644 --- a/src/index.css +++ b/src/index.css @@ -1,3 +1,5 @@ +@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap"); + body { margin: 0; font-family: "DM Sans" sans-serif;