67 |
76 |
77 |
78 |
79 | {/*
*/}
80 |
89 |
90 |
91 |
92 | {!edit ? (Add Task
) : (Edit Task
)}
93 |
98 |
99 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 | )
122 | }
123 |
124 | export default AddTaskModal
--------------------------------------------------------------------------------
/frontend/src/components/AppLayout.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Navbar from './Navbar'
3 | import Sidebar from './Sidebar'
4 |
5 | const AppLayout = ({ children }) => {
6 | return (
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | {children}
16 |
17 |
18 |
19 |
20 | )
21 | }
22 |
23 | export default AppLayout
--------------------------------------------------------------------------------
/frontend/src/components/BtnPrimary.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const BtnPrimary = (props) => {
4 | return (
5 |
8 | )
9 | }
10 |
11 | export default BtnPrimary;
--------------------------------------------------------------------------------
/frontend/src/components/BtnSecondary.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const BtnSecondary = (props) => {
4 | return (
5 |
6 | )
7 | }
8 |
9 | export default BtnSecondary
--------------------------------------------------------------------------------
/frontend/src/components/DropdownMenu.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import { Popover } from '@headlessui/react'
3 | import AddTaskModal from './AddTaskModal'
4 |
5 | const DropdownMenu = ({ taskId, handleDelete, projectId, setRenderChange }) => {
6 | const [isEditTaskModalOpen, setEditTaskModal] = useState(false);
7 |
8 | const refreshData = () => {
9 | setRenderChange(true)
10 | }
11 | const handleSetEditModal = (e) => {
12 | e.stopPropagation();
13 | setEditTaskModal(true)
14 | }
15 |
16 | return (
17 | <>
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
29 | {/*
*/}
33 |
34 |
35 |
45 |
46 |
49 |
50 |
51 | )
52 | }
53 |
54 | export default DropdownMenu
55 |
--------------------------------------------------------------------------------
/frontend/src/components/EditProjectModal.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const EditProjectModal = () => {
4 | return (
5 |
EditProjectModal
6 | )
7 | }
8 |
9 | export default EditProjectModal
--------------------------------------------------------------------------------
/frontend/src/components/Navbar.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const Navbar = () => {
4 | return (
5 |
6 | )
7 | }
8 |
9 | export default Navbar
--------------------------------------------------------------------------------
/frontend/src/components/ProjectDropdown.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import { Popover } from '@headlessui/react'
3 | import axios from "axios"
4 | import toast from 'react-hot-toast'
5 | import AddProjectModal from './AddProjectModal'
6 |
7 | const ProjectDropdown = ({ id, navigate }) => {
8 | const [isModalOpen, setModalState] = useState(false)
9 | const handleDelete = async () => {
10 | try {
11 | const data = await axios.delete(`http://localhost:9000/project/${id}`)
12 | if (data.data.deletedCount > 0) {
13 | toast.success('Record deleted successfully')
14 | navigate('/')
15 | const customEvent = new CustomEvent('projectUpdate');
16 | document.dispatchEvent(customEvent);
17 | } else {
18 | toast.error('Record is already deleted')
19 | }
20 |
21 | } catch (e) {
22 | toast.error('Something went wrong')
23 | }
24 |
25 | }
26 |
27 | const closeModal = () => {
28 | setModalState(false)
29 | }
30 |
31 |
32 | return (
33 | <>
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
45 | {/*
*/}
49 |
50 |
51 |
61 |
62 |
65 |
66 |
67 | )
68 | }
69 |
70 | export default ProjectDropdown
--------------------------------------------------------------------------------
/frontend/src/components/Sidebar.js:
--------------------------------------------------------------------------------
1 | import React, { useCallback, useEffect, useState } from 'react'
2 | import AddProjectModal from './AddProjectModal'
3 | import axios from 'axios'
4 | import { Link } from 'react-router-dom'
5 | // import toast from 'react-hot-toast'
6 | const Sidebar = () => {
7 |
8 | const [isModalOpen, setModalState] = useState(false)
9 | const [projects, setProjects] = useState([])
10 | const [paramsWindow, setParamsWindow] = useState(window.location.pathname.slice(1))
11 | useEffect(() => {
12 | })
13 |
14 | const handleLocation = (e) => {
15 | setParamsWindow(new URL(e.currentTarget.href).pathname.slice(1))
16 | }
17 |
18 | const openModal = useCallback(() => {
19 | setModalState(true)
20 | }, [])
21 |
22 | const closeModal = useCallback(() => {
23 | setModalState(false)
24 | }, [])
25 |
26 | const projectData = () => {
27 | axios.get('http://localhost:9000/projects/')
28 | .then((res) => {
29 | setProjects(res.data)
30 | })
31 | }
32 |
33 | useEffect(() => {
34 | projectData()
35 | document.addEventListener('projectUpdate', ({ detail }) => {
36 | projectData()
37 | })
38 | return () => {
39 | document.removeEventListener('projectUpdate', {}, false)
40 | }
41 | }, []);
42 |
43 |
44 |
45 | return (
46 |
47 |
48 |
Projects
49 |
54 |
55 |
56 | {projects.map((project, index) => (
57 | handleLocation(e)}>
58 | -
59 | {project.title}
60 |
61 |
62 | ))}
63 |
64 |
65 |
66 | )
67 | }
68 |
69 | export default Sidebar
--------------------------------------------------------------------------------
/frontend/src/components/Task.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from "react";
2 | import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
3 | import { v4 as uuid } from "uuid";
4 | import AddTaskModal from "./AddTaskModal";
5 | import BtnPrimary from './BtnPrimary'
6 | import DropdownMenu from "./DropdownMenu";
7 | // import TaskModal from "./TaskModal";
8 | import { useParams, useNavigate } from "react-router";
9 | import ProjectDropdown from "./ProjectDropdown"
10 | import axios from "axios";
11 | import toast from "react-hot-toast";
12 | import TaskModal from "./TaskModal";
13 |
14 |
15 | function Task() {
16 |
17 | // const itemsFromBackend = [
18 | // { _id: uuid(), content: "First task" },
19 | // { _id: uuid(), content: "Second task" },
20 | // { _id: uuid(), content: "Third task" },
21 | // { _id: uuid(), content: "Forth task" }
22 | // ];
23 |
24 | // const columnsFromBackend = {
25 | // [uuid()]: {
26 | // name: "Requested",
27 | // items: []
28 | // },
29 | // [uuid()]: {
30 | // name: "To do",
31 | // items: []
32 | // },
33 | // [uuid()]: {
34 | // name: "In Progress",
35 | // items: []
36 | // },
37 | // [uuid()]: {
38 | // name: "Done",
39 | // items: []
40 | // }
41 | // };
42 |
43 | const onDragEnd = (result, columns, setColumns) => {
44 | if (!result.destination) return;
45 | const { source, destination } = result;
46 | let data = {}
47 | if (source.droppableId !== destination.droppableId) {
48 | const sourceColumn = columns[source.droppableId];
49 | const destColumn = columns[destination.droppableId];
50 | const sourceItems = [...sourceColumn.items];
51 | const destItems = [...destColumn.items];
52 | const [removed] = sourceItems.splice(source.index, 1);
53 | destItems.splice(destination.index, 0, removed);
54 |
55 | setColumns({
56 | ...columns,
57 | [source.droppableId]: {
58 | ...sourceColumn,
59 | items: sourceItems
60 | },
61 | [destination.droppableId]: {
62 | ...destColumn,
63 | items: destItems
64 | }
65 | });
66 | data = {
67 | ...columns,
68 | [source.droppableId]: {
69 | ...sourceColumn,
70 | items: sourceItems
71 | },
72 | [destination.droppableId]: {
73 | ...destColumn,
74 | items: destItems
75 | }
76 | }
77 | } else {
78 | const column = columns[source.droppableId];
79 | const copiedItems = [...column.items];
80 | const [removed] = copiedItems.splice(source.index, 1);
81 | copiedItems.splice(destination.index, 0, removed);
82 | setColumns({
83 | ...columns,
84 | [source.droppableId]: {
85 | ...column,
86 | items: copiedItems
87 | }
88 | });
89 | data = {
90 | ...columns,
91 | [source.droppableId]: {
92 | ...column,
93 | items: copiedItems
94 | }
95 | }
96 |
97 | }
98 |
99 | updateTodo(data)
100 | };
101 |
102 | const [isAddTaskModalOpen, setAddTaskModal] = useState(false);
103 |
104 | // const [columns, setColumns] = useState(columnsFromBackend);
105 | const [columns, setColumns] = useState({});
106 | const [isRenderChange, setRenderChange] = useState(false);
107 | const [isTaskOpen, setTaskOpen] = useState(false);
108 | const [taskId, setTaskId] = useState(false);
109 | const [title, setTitle] = useState('');
110 | const { projectId } = useParams();
111 | const navigate = useNavigate();
112 |
113 | useEffect(() => {
114 | if (!isAddTaskModalOpen || isRenderChange) {
115 | axios.get(`http://localhost:9000/project/${projectId}`)
116 | .then((res) => {
117 | setTitle(res.data[0].title)
118 | setColumns({
119 | [uuid()]: {
120 | name: "Requested",
121 | items: res.data[0].task.filter((task) => task.stage === "Requested").sort((a, b) => {
122 | return a.order - b.order;
123 | })
124 | },
125 | [uuid()]: {
126 | name: "To do",
127 | items: res.data[0].task.filter((task) => task.stage === "To do").sort((a, b) => {
128 | return a.order - b.order;
129 | })
130 | },
131 | [uuid()]: {
132 | name: "In Progress",
133 | items: res.data[0].task.filter((task) => task.stage === "In Progress").sort((a, b) => {
134 | return a.order - b.order;
135 | })
136 | },
137 | [uuid()]: {
138 | name: "Done",
139 | items: res.data[0].task.filter((task) => task.stage === "Done").sort((a, b) => {
140 | return a.order - b.order;
141 | })
142 | }
143 | })
144 | setRenderChange(false)
145 | }).catch((error) => {
146 | toast.error('Something went wrong')
147 | })
148 | }
149 | }, [projectId, isAddTaskModalOpen, isRenderChange]);
150 |
151 | const updateTodo = (data) => {
152 | axios.put(`http://localhost:9000/project/${projectId}/todo`, data)
153 | .then((res) => {
154 | }).catch((error) => {
155 | toast.error('Something went wrong')
156 | })
157 | }
158 |
159 | const handleDelete = (e, taskId) => {
160 | e.stopPropagation();
161 | axios.delete(`http://localhost:9000/project/${projectId}/task/${taskId}`)
162 | .then((res) => {
163 | toast.success('Task is deleted')
164 | setRenderChange(true)
165 | }).catch((error) => {
166 |
167 | toast.error('Something went wrong')
168 | })
169 | }
170 |
171 | const handleTaskDetails = (id) => {
172 | setTaskId({ projectId, id });
173 | setTaskOpen(true);
174 | }
175 |
176 | return (
177 |
178 |
179 |
180 | {title.slice(0, 25)}{title.length > 25 && '...'}
181 |
182 |
183 |
setAddTaskModal(true)}>Add todo
184 |
185 |
onDragEnd(result, columns, setColumns)}
187 | >
188 |
189 | {Object.entries(columns).map(([columnId, column], index) => {
190 | return (
191 |
195 |
196 |
197 |
{column.name}
198 | {column.items?.length}
199 |
200 |
201 |
202 |
203 |
204 | {(provided, snapshot) => {
205 | return (
206 |
211 | {column.items.map((item, index) => {
212 | return (
213 |
218 | {(provided, snapshot) => {
219 | return (
220 | handleTaskDetails(item._id)}
226 | className={`select-none px-3.5 pt-3.5 pb-2.5 mb-2 border border-gray-200 rounded-lg shadow-sm bg-white relative ${snapshot.isDragging && 'shadow-md'}`}
227 | >
228 |
229 |
230 |
{item.title.slice(0, 22)}{item.title.length > 22 && '...'}
231 |
232 |
233 |
{item.description.slice(0, 60)}{item.description.length > 60 && '...'}
234 |
Task-{item.index}
235 |
236 |
240 | );
241 | })}
242 | {provided.placeholder}
243 |
247 |
248 |
249 |
250 | );
251 | })}
252 |
254 |
255 |
256 |
257 | );
258 | }
259 |
260 | export default Task;
--------------------------------------------------------------------------------
/frontend/src/components/TaskModal.js:
--------------------------------------------------------------------------------
1 | import React, { Fragment, useEffect, useState } from 'react'
2 | import { Dialog, Transition } from '@headlessui/react'
3 | // import Attachment from '../image/attachment.jpg'
4 | import axios from 'axios'
5 | import toast from 'react-hot-toast'
6 |
7 |
8 | //first later capital in javascript ?
9 |
10 |
11 |
12 |
13 | const TaskModal = ({ isOpen, setIsOpen, id }) => {
14 | const [taskData, setTaskData] = useState('')
15 |
16 | const capitalizeFirstLetter = (string) => {
17 | return string ? string.charAt(0).toUpperCase() + string.slice(1) : ''
18 | }
19 |
20 | useEffect(() => {
21 | if (isOpen) {
22 | axios.get(`http://localhost:9000/project/${id.projectId}/task/${id.id}`)
23 | .then((data) => {
24 | setTaskData({ ...data.data[0].task[0] });
25 | // console.log(taskData);
26 | })
27 | .catch((error) => {
28 | toast.error('something went wrong')
29 | })
30 | }
31 | }, [isOpen]);
32 |
33 | return (
34 |
35 | 
18 |