kanban board theme added

mayankjaviya · Nov 17, 2023 · 9da9485 · 9da9485
1 parent 3982da0
commit 9da9485
Show file tree

Hide file tree

Showing 15 changed files with 763 additions and 223 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/resources/js/Layouts/Navbar.jsx b/resources/js/Layouts/Navbar.jsx
@@ -2,28 +2,47 @@ import { Link } from "@inertiajs/react";
 import React from "react";
 
 export default function Navbar() {
+
     return (
         <nav className="navbar navbar-expand-lg navbar-light bg-light sticky-top">
             <div className="container-fluid">
-                <a className="navbar-brand fs-3" href="/todo">Inertia Reactive PMS</a>
-                <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                <a className="navbar-brand fs-3" href="/todo">
+                    Inertia Reactive PMS
+                </a>
+                <button
+                    className="navbar-toggler"
+                    type="button"
+                    data-bs-toggle="collapse"
+                    data-bs-target="#navbarSupportedContent"
+                    aria-controls="navbarSupportedContent"
+                    aria-expanded="false"
+                    aria-label="Toggle navigation"
+                >
                     <span className="navbar-toggler-icon"></span>
                 </button>
-                <div className="collapse navbar-collapse" id="navbarSupportedContent">
+                <div
+                    className="collapse navbar-collapse"
+                    id="navbarSupportedContent"
+                >
                     <ul className="navbar-nav me-auto mb-2 mb-lg-0">
                         <li className="nav-item">
-                            <Link className="nav-link active" aria-current="page" href="/todo">Home</Link>
+                            <Link
+                                className="nav-link active"
+                                aria-current="page"
+                                href="/todo"
+                            >
+                                Home
+                            </Link>
                         </li>
                         <li className="nav-item">
-                            <Link className="nav-link" href="/assets">Assets</Link>
+                            <Link className="nav-link" href="/assets">
+                                Assets
+                            </Link>
                         </li>
                     </ul>
-                    <form className="d-flex">
-                        <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
-                        <button className="btn btn-outline-success" type="submit">Search</button>
-                    </form>
+
                 </div>
             </div>
         </nav>
-    )
+    );
 }
diff --git a/resources/js/Pages/Todo/Main.jsx b/resources/js/Pages/Todo/Main.jsx
@@ -1,38 +1,73 @@
 import React, {  useState } from "react";
 import { AllSection } from "../Keys";
 import { Head, router } from "@inertiajs/react";
-import Sections from "./Sections/Sections";
-import Completed from "./Sections/Completed";
+import Theme1 from "./Theme1/Theme1";
+import Theme2 from "./Theme2/Theme2";
 
 export default function Main(props) {
-
-    const { tasks,completedTasks } = props;
-    const [ draggedTaskId, setDraggedTaskId ] = useState();
+    const { tasks, completedTasks } = props;
+    const [draggedTaskId, setDraggedTaskId] = useState();
+    const [layout, setLayout] = useState(1);
 
     const onDragOver = (event) => {
         event.preventDefault();
-      }
+    };
 
-    const onDrop = (event, section ) => {
+    const onDrop = (event, section) => {
         event.preventDefault();
         router.put(`/todo/${draggedTaskId}`, {
-            section : section
+            section: section,
         });
-      }
+    };
 
+    const changeLayout = () => {
+        setLayout(layout == 1 ? 2 : 1);
+    };
 
     return (
-        <div className="container">
+        <div className="mx-5">
             <Head title="IR PMS - Home" />
-            <h1 className="text-center text-success">Todo List</h1>
-        <div className="row">
-            <Sections tasks={tasks} setDraggedTaskId={setDraggedTaskId} section={AllSection.backlog} sectionName="Backlog"  onDragOver={onDragOver} onDrop={onDrop}/>
-            <Sections tasks={tasks} setDraggedTaskId={setDraggedTaskId} section={AllSection.inProgress} sectionName="In Progress" onDragOver={onDragOver} onDrop={onDrop}/>
-            <Sections tasks={tasks} setDraggedTaskId={setDraggedTaskId} section={AllSection.done} sectionName="Done" onDragOver={onDragOver} onDrop={onDrop}/>
+            <div className="d-flex justify-content-between align-items-center">
+                <h1 className="text-center text-success">Todo List</h1>
+                <div className="align-items-center">
+                    <div className="form-check form-switch">
+                        <input
+                            className="form-check-input"
+                            type="checkbox"
+                            id="themeSwitch"
+                            onChange={changeLayout}
+                            checked={layout == 2}
+                        />
+                        <label
+                            className="form-check-label"
+                            htmlFor="themeSwitch"
+                        >
+                            Change Theme
+                        </label>
+                    </div>
+                </div>
+            </div>
 
-            {/* Completed Task */}
-            <Completed completedTasks={completedTasks}/>
-        </div>
+            {layout == 1 && (
+                <Theme1
+                    tasks={tasks}
+                    setDraggedTaskId={setDraggedTaskId}
+                    AllSection={AllSection}
+                    onDragOver={onDragOver}
+                    onDrop={onDrop}
+                    completedTasks={completedTasks}
+                />
+            )}
+            {layout == 2 && (
+                <Theme2
+                    tasks={tasks}
+                    setDraggedTaskId={setDraggedTaskId}
+                    AllSection={AllSection}
+                    onDragOver={onDragOver}
+                    onDrop={onDrop}
+                    completedTasks={completedTasks}
+                />
+            )}
         </div>
     );
 }
diff --git a/resources/js/Pages/Todo/Sections/Completed.jsx b/resources/js/Pages/Todo/Sections/Completed.jsx
diff --git a/resources/js/Pages/Todo/Sections/Sections.jsx b/resources/js/Pages/Todo/Sections/Sections.jsx
diff --git a/resources/js/Pages/Todo/Task.jsx b/resources/js/Pages/Todo/Task.jsx
diff --git a/resources/js/Pages/Todo/Theme1/Sections/Completed.jsx b/resources/js/Pages/Todo/Theme1/Sections/Completed.jsx
@@ -0,0 +1,26 @@
+import React from "react";
+import Task from "../Task";
+
+export default function Completed(props) {
+    const { completedTasks } = props;
+    return (
+        <>
+            {completedTasks.length > 0 && (
+                <div className="m-2 border-top pt-4 shadow shadow-md">
+                    <h4 className="text-success" role="button">
+                        Completed
+                    </h4>
+                    {completedTasks.map((task) => {
+                        return (
+                            <Task
+                                key={task.id}
+                                task={task}
+                                isCompleted={true}
+                            />
+                        );
+                    })}
+                </div>
+            )}
+        </>
+    );
+}