From f18d9d79efa2650b3a066f840ad556bf12b3fa0b Mon Sep 17 00:00:00 2001 From: Mukul Chugh Date: Sat, 6 Aug 2022 21:27:59 +0530 Subject: [PATCH 1/8] Added Explanation Video --- README.md | 5 +++++ src/index.css | 2 ++ 2 files changed, 7 insertions(+) diff --git a/README.md b/README.md index 6a3a579..e72a859 100644 --- a/README.md +++ b/README.md @@ -19,6 +19,11 @@ Future Scope, this can be made a full fledged productivity application, with a d _Note : This application is made as part of internship selection process at AirTribe._ +
+## Project Explainer Video + +https://www.loom.com/embed/b3488cffb899433882031369f211e57b +
## Live URL diff --git a/src/index.css b/src/index.css index 5a6fd75..3567c01 100644 --- a/src/index.css +++ b/src/index.css @@ -1,3 +1,5 @@ +@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); + body { margin: 0; font-family: "DM Sans" sans-serif; From 819e81e164e97c094790cdce41df0312e7628825 Mon Sep 17 00:00:00 2001 From: Mukul Chugh Date: Sat, 6 Aug 2022 21:28:54 +0530 Subject: [PATCH 2/8] Added Explanation Video --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index e72a859..beca638 100644 --- a/README.md +++ b/README.md @@ -20,9 +20,10 @@ Future Scope, this can be made a full fledged productivity application, with a d _Note : This application is made as part of internship selection process at AirTribe._
+ ## Project Explainer Video -https://www.loom.com/embed/b3488cffb899433882031369f211e57b +

From a703d7f793364deac184d28e00bbe20de733c1c5 Mon Sep 17 00:00:00 2001 From: Mukul Chugh Date: Sat, 6 Aug 2022 21:30:18 +0530 Subject: [PATCH 3/8] Added Explanation Video --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index beca638..928a0fe 100644 --- a/README.md +++ b/README.md @@ -23,7 +23,9 @@ _Note : This application is made as part of internship selection process at AirT ## Project Explainer Video +
+

From 952adca68ffbb4d7178d9b6545b0bbc4e4ba7e9a Mon Sep 17 00:00:00 2001 From: Mukul Chugh Date: Sat, 6 Aug 2022 21:36:45 +0530 Subject: [PATCH 4/8] Explainer Video Add --- README.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/README.md b/README.md index 928a0fe..bfcc885 100644 --- a/README.md +++ b/README.md @@ -23,9 +23,7 @@ _Note : This application is made as part of internship selection process at AirT ## Project Explainer Video -
-
-
+

See the Video


From 69286997b0cf80feea22e70334548bb36d6ef9a0 Mon Sep 17 00:00:00 2001 From: Mukul Chugh Date: Sat, 6 Aug 2022 21:51:56 +0530 Subject: [PATCH 5/8] Minor --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 1608b8b..9ec37f4 100644 --- a/package.json +++ b/package.json @@ -11,9 +11,9 @@ "@mui/material": "^5.9.3", "netlify-cli": "^10.15.0", "randomcolor": "^0.6.2", - "react": "^18.2.0", + "react": "^17.2.0", "react-beautiful-dnd": "^13.1.0", - "react-dom": "18.2.0", + "react-dom": "17.2.0", "react-scripts": "^2.1.3", "uuid": "^8.3.2", "web-vitals": "^2.1.4" From 8dbe58a47d8ad52590424fb24032e7ce4a8fb379 Mon Sep 17 00:00:00 2001 From: Mukul Chugh Date: Sat, 6 Aug 2022 21:57:59 +0530 Subject: [PATCH 6/8] Minor Dependency Update --- package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 9ec37f4..dfc5127 100644 --- a/package.json +++ b/package.json @@ -11,10 +11,10 @@ "@mui/material": "^5.9.3", "netlify-cli": "^10.15.0", "randomcolor": "^0.6.2", - "react": "^17.2.0", + "react": "^18.2.0", "react-beautiful-dnd": "^13.1.0", - "react-dom": "17.2.0", - "react-scripts": "^2.1.3", + "react-dom": "18.2.0", + "react-scripts": "^5.0.1", "uuid": "^8.3.2", "web-vitals": "^2.1.4" }, From 16b3da46fd093f2fe13ef539d3fb43666e1ea4cf Mon Sep 17 00:00:00 2001 From: Mukul Chugh Date: Wed, 10 Aug 2022 01:57:31 +0530 Subject: [PATCH 7/8] Add Column Functionality --- src/App.js | 1 - src/components/Kanban/AddColumn.js | 73 ++++++++++++++++++++++++++++++ src/components/Kanban/Column.js | 15 ++++-- src/components/Kanban/Kanban.js | 44 ++++++++++++++++-- src/components/Navbar.js | 4 +- src/index.css | 2 +- 6 files changed, 127 insertions(+), 12 deletions(-) create mode 100644 src/components/Kanban/AddColumn.js 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..394c788 --- /dev/null +++ b/src/components/Kanban/AddColumn.js @@ -0,0 +1,73 @@ +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 idColumn = props.columnData; + + const newColumn = { + id: uuid(), + name: title, + color: randomColor({ luminosity: "light" }), + taskIds: [], + }; + + 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/Kanban.js b/src/components/Kanban/Kanban.js index 9e3241d..4e7dc1f 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,29 @@ 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 3567c01..1da8d47 100644 --- a/src/index.css +++ b/src/index.css @@ -1,4 +1,4 @@ -@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); +@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; From aefed721783a97c85512eb55438ce6905949900f Mon Sep 17 00:00:00 2001 From: Mukul Chugh Date: Wed, 10 Aug 2022 02:17:46 +0530 Subject: [PATCH 8/8] Add Column Functionality : Finished --- src/components/Kanban/AddColumn.js | 12 +++++++++--- src/components/Kanban/Data.js | 14 ++++++++++++-- src/components/Kanban/Kanban.js | 1 + 3 files changed, 22 insertions(+), 5 deletions(-) diff --git a/src/components/Kanban/AddColumn.js b/src/components/Kanban/AddColumn.js index 394c788..61ac819 100644 --- a/src/components/Kanban/AddColumn.js +++ b/src/components/Kanban/AddColumn.js @@ -5,13 +5,19 @@ import randomColor from "randomcolor"; const AddColumn = (props) => { const [title, setTitle] = useState(""); - const idColumn = props.columnData; const newColumn = { - id: uuid(), + id: props.columnId, name: title, color: randomColor({ luminosity: "light" }), - taskIds: [], + taskIds: [ + { + id: uuid(), + text: "Change css img", + idColumn: props.columnId, + title: "Meeting with Airtribe", + }, + ], }; const style = { 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 4e7dc1f..96fdcd9 100644 --- a/src/components/Kanban/Kanban.js +++ b/src/components/Kanban/Kanban.js @@ -141,6 +141,7 @@ const Kanban = () => { openModal={openColModal} closeModal={closeColModal} addColumn={addColumn} + columnId={columns.length + 1} />