-
- 
-
+
+ task.status === TaskStatus.Pending)}
+ onCreateTask={handleOpenModal}
+ onDeleteTask={handleDeleteTask}
+ onEditTask={handleEditTask}
+/>
+ task.status === TaskStatus.InProgress)}
+ onDeleteTask={handleDeleteTask}
+ onEditTask={handleEditTask}
+/>
+ task.status === TaskStatus.Done)}
+ onDeleteTask={handleDeleteTask}
+ onEditTask={handleEditTask}
+/>
+
+
+
);
}
diff --git a/src/features/CreateTask/CreateTask.component.tsx b/src/features/CreateTask/CreateTask.component.tsx
new file mode 100644
index 0000000..1b6531d
--- /dev/null
+++ b/src/features/CreateTask/CreateTask.component.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import './CreateTask.styles.scss';
+
+type Props = {
+ onOpenModal: () => void;
+};
+
+
+const CreateTask = ({ onOpenModal }: Props) => {
+ return (
+
- Edit src/App.tsx and save to reload.
-
+
+ );
+};
+
+export default CreateTask;
diff --git a/src/features/CreateTask/CreateTask.styles.scss b/src/features/CreateTask/CreateTask.styles.scss
new file mode 100644
index 0000000..dc8a52d
--- /dev/null
+++ b/src/features/CreateTask/CreateTask.styles.scss
@@ -0,0 +1,18 @@
+.createtask-card{
+ display: flex;
+ width: 180px;
+ height: 200px;
+ background-color: #f5f0e1;
+ border-radius: 8px;
+ overflow: hidden;
+ align-items: center;
+ justify-content: center;
+ opacity: 0.78;
+}
+.createtask-card:hover{
+ opacity: 1;
+}
+.createtask-card > p {
+ color: #1e3d59;
+ font-size: 60px;
+}
\ No newline at end of file
diff --git a/src/features/Task/Task.component.tsx b/src/features/Task/Task.component.tsx
new file mode 100644
index 0000000..cd9fe5b
--- /dev/null
+++ b/src/features/Task/Task.component.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import './Task.styles.scss';
+import { Task as TaskType } from '../../models/Task';
+import { useDraggable } from '@dnd-kit/core';
+import { TaskStatus } from '../../models/TaskStatus';
+import { stat } from 'fs/promises';
+
+interface Props {
+ id: number;
+ title: string;
+ text: string;
+ status: TaskStatus;
+ deleteTask: () => void; // Function to delete the task
+ onEdit: () => void; // Function to edit the task
+};
+
+
+const Task= ({ id, title, text, status, deleteTask, onEdit } : Props) => {
+
+ const {attributes, listeners, setNodeRef, transform} = useDraggable({id: id});
+
+ const style = transform ? {
+ position: 'absolute' as 'absolute',
+ zIndex: '1000',
+ transform: `translate(${transform.x}px, ${transform.y}px)`,
+ } : undefined;
+
+ // const headerColor = status === TaskStatus.Pending ? "#5c3c92" :
+ // status === TaskStatus.InProgress ? "#ff6e40" : "#c4a35a";
+
+ return (
+ +
+
+
+ )
+}
+
+export default Task;
\ No newline at end of file
diff --git a/src/features/Task/Task.styles.scss b/src/features/Task/Task.styles.scss
new file mode 100644
index 0000000..bcd0220
--- /dev/null
+++ b/src/features/Task/Task.styles.scss
@@ -0,0 +1,59 @@
+.task-card{
+ display: flex;
+ flex-direction: column;
+ width: 180px;
+ height: 200px;
+ background-color: #f5f0e1;
+ border-radius: 8px;
+ box-shadow: 3px 3px 3px red;
+ overflow: hidden;
+ // position: fixed;
+}
+
+.task-card:active{
+ box-shadow: 5px 5px 5px rgba(255, 0, 0, 0.563);
+}
+
+.task-header{
+ background-color: #ff6e40;
+ color: white;
+ padding: 0.65px;
+ font-size: 13px;
+ font-weight: bold;
+ text-align: center;
+ flex-shrink: 0;
+}
+
+.task-textarea{
+ padding: 6px;
+ font-size: 13px;
+ color: #333;
+ text-align: center;
+ overflow: hidden;
+ flex-grow: 1;
+}
+
+.task-footer{
+ display: flex;
+ justify-content: space-between;
+ background-color: #ffc13b;
+ color: #555;
+ padding: 6px;
+ text-align: center;
+ border-top: 1px solid #ddd;
+ flex-shrink: 0;
+}
+
+.button{
+ width: 57px;
+ height: 30px;
+ margin: 0 7px;
+ background-color: #f5f0e1;
+ border: 1.25px solid #ff6e40;
+ border-radius: 6px;
+ color: #1e3d59;
+ font-weight: bold;
+}
+.button:hover{
+ background-color: #f5f0e1ba;
+}
\ No newline at end of file
diff --git a/src/features/TaskLine/TaskLine.component.tsx b/src/features/TaskLine/TaskLine.component.tsx
new file mode 100644
index 0000000..e8198ce
--- /dev/null
+++ b/src/features/TaskLine/TaskLine.component.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import './TaskLine.styles.scss';
+import Task from '../Task/Task.component';
+import CreateTask from '../CreateTask/CreateTask.component';
+import { TaskStatus } from '../../models/TaskStatus';
+import { Task as TaskType } from '../../models/Task';
+import { useDroppable } from '@dnd-kit/core';
+
+type Props = {
+ taskLineName: string;
+ tasks: TaskType[];
+ onCreateTask?: () => void;
+ onDeleteTask: (id: number) => void;
+ onEditTask: (task: TaskType) => void;
+}
+
+const TaskLine = ({ taskLineName, tasks, onCreateTask, onDeleteTask, onEditTask} : Props) => {
+
+ const backgroundColor =
+ taskLineName === "Pending" ? "#077b8a" :
+ taskLineName === "In Progress" ? "#e0a96d" : "#77c593" ;
+
+ const { setNodeRef } = useDroppable({id: taskLineName});
+
+ return (
+
+
+
+ {title}
+
+
+ {text}
+
+
+
+
+
+
+
+
+ )
+}
+export default TaskLine;
\ No newline at end of file
diff --git a/src/features/TaskLine/TaskLine.styles.scss b/src/features/TaskLine/TaskLine.styles.scss
new file mode 100644
index 0000000..8954e3e
--- /dev/null
+++ b/src/features/TaskLine/TaskLine.styles.scss
@@ -0,0 +1,24 @@
+.taskline{
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: flex-start;
+ gap: 45px;
+ padding: 0 20px 20px;
+ flex-wrap: nowrap;
+ overflow: hidden;
+}
+
+.tasklist-container{
+ display: flex;
+ flex-direction: column;
+ height: 282.23px;
+ width: 100%;
+ overflow: hidden;
+}
+
+
+.tasklist-name{
+ padding-left: 20px;
+ color: #f5f0e1;
+}
\ No newline at end of file
diff --git a/src/features/TaskModal/TaskModal.component.tsx b/src/features/TaskModal/TaskModal.component.tsx
new file mode 100644
index 0000000..69c05bf
--- /dev/null
+++ b/src/features/TaskModal/TaskModal.component.tsx
@@ -0,0 +1,60 @@
+import React, { useEffect, useState } from 'react';
+import './TaskModal.styles.scss';
+import { Task } from '../../models/Task';
+
+interface Props {
+ isOpen: boolean;
+ onClose: () => void;
+ onSave: (task: {id?: number, title: string; text: string }) => void;
+ task: Task | null;
+}
+
+const TaskModal = ({ isOpen, onClose, onSave, task }: Props) => {
+ const [title, setTitle] = useState(task?.title || ''); // Pre-fill for editing
+ const [text, setText] = useState(task?.text || '');
+
+ useEffect(() => {
+ if (task) {
+ setTitle(task.title);
+ setText(task.text);
+ }
+ }, [task]);
+
+ if (!isOpen) return null;
+
+ const handleSave = () => {
+ if (title.trim()) {
+ onSave({ id: task?.id, title, text });
+ setTitle('');
+ setText('');
+ onClose();
+ } else {
+ alert("Task title is required!");
+ }
+ };
+
+ return (
+ {taskLineName}
+
+ {tasks.map((task) => (
+ onDeleteTask(task.id)}
+ onEdit={() => onEditTask(task)}
+ />
+ ))}
+ {taskLineName === "Pending" && onCreateTask && (
+
+
+
+ )
+}
+
+export default TaskModal;
\ No newline at end of file
diff --git a/src/features/TaskModal/TaskModal.styles.scss b/src/features/TaskModal/TaskModal.styles.scss
new file mode 100644
index 0000000..a9a5aac
--- /dev/null
+++ b/src/features/TaskModal/TaskModal.styles.scss
@@ -0,0 +1,73 @@
+.modal-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+ background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 1000; /* Ensure it appears on top */
+}
+.modal-container{
+ display: flex;
+ flex-direction: column;
+ background-color: #f5f0e1;
+ align-items: center;
+ justify-content: center;
+ width: 480px;
+ height: 340px;
+ border-radius: 10px;
+ border: 1.25px solid #1e3d59;
+ position: relative;
+}
+.edit-section{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: flex-start;
+ gap: 30px;
+ width: 100%;
+ height: 80%;
+ padding-top: 57px;
+}
+
+.edit-section > input{
+ width: 80%;
+ padding: 10px;
+ margin: 10px 17px;
+ font-size: 16px;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ outline: none;
+ transition: border-color 0.3s, box-shadow 0.3s;
+}
+.edit-section > input:hover {
+ border-color: #1e3d59;
+}
+.edit-section > input:focus {
+ border-color: #1e3d59;
+ box-shadow: 0 0 5px rgba(74, 132, 194, 0.235);
+}
+.footer{
+ display: flex;
+ justify-content: space-between;
+ padding: 6px;
+ width: 60%;
+ height: 20%;
+ margin: 10px;
+}
+
+.button{
+ width: 93px;
+ height: 40px;
+ background-color: #facd6b;
+ border: 1.25px solid #ff6e40;
+ border-radius: 6px;
+ color: #1e3d59;
+ font-weight: bold;
+}
+.button:hover{
+ background-color: #d3b26c;
+}
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index ec2585e..79f7261 100644
--- a/src/index.css
+++ b/src/index.css
@@ -5,9 +5,10 @@ body {
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
+ overflow: hidden;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
-}
+}
\ No newline at end of file
diff --git a/src/models/Task.ts b/src/models/Task.ts
new file mode 100644
index 0000000..162a85c
--- /dev/null
+++ b/src/models/Task.ts
@@ -0,0 +1,8 @@
+import { TaskStatus } from "./TaskStatus";
+
+export type Task = {
+ id: number;
+ title: string ;
+ text: string ;
+ status: TaskStatus;
+};
\ No newline at end of file
diff --git a/src/models/TaskModal.ts b/src/models/TaskModal.ts
new file mode 100644
index 0000000..b2aad34
--- /dev/null
+++ b/src/models/TaskModal.ts
@@ -0,0 +1,4 @@
+export type TaskModal = {
+ isOpen: boolean;
+ onClose: void;
+};
\ No newline at end of file
diff --git a/src/models/TaskStatus.ts b/src/models/TaskStatus.ts
new file mode 100644
index 0000000..65f929e
--- /dev/null
+++ b/src/models/TaskStatus.ts
@@ -0,0 +1,5 @@
+export enum TaskStatus {
+ Pending = "Pending",
+ InProgress = "In Progress",
+ Done = "Done",
+}
\ No newline at end of file
diff --git a/src/setupTests.ts b/src/setupTests.ts
deleted file mode 100644
index 8f2609b..0000000
--- a/src/setupTests.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
+
+
+
+
+
+
+