forked from kingan1/application-tracking-system
-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #12 from SETeam59/feature-data
Merging the complete components features to main branch
- Loading branch information
Showing
7 changed files
with
675 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,153 @@ | ||
import { shuffle } from "lodash"; | ||
import React, { useState } from "react"; | ||
import Logo from "../assets/srj.png"; | ||
import iconDown from "../assets/icon-chevron-down.svg"; | ||
import iconUp from "../assets/icon-chevron-up.svg"; | ||
import elipsis from "../assets/icon-vertical-ellipsis.svg"; | ||
import HeaderDropDown from "./HeaderDropDown"; | ||
import ElipsisMenu from "./ElipsisMenu"; | ||
import AddEditTaskModal from "../modals/AddEditTaskModal"; | ||
import AddEditBoardModal from "../modals/AddEditBoardModal"; | ||
import { useDispatch, useSelector } from "react-redux"; | ||
import DeleteModal from "../modals/DeleteModal"; | ||
import boardsSlice from "../redux/boardsSlice"; | ||
|
||
function Header({ setIsBoardModalOpen, isBoardModalOpen, logout }) { | ||
const [openDropdown, setOpenDropdown] = useState(false); | ||
const [isElipsisMenuOpen, setIsElipsisMenuOpen] = useState(false); | ||
const [boardType, setBoardType] = useState("add"); | ||
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false); | ||
const [isTaskModalOpen, setIsTaskModalOpen] = useState(false); | ||
|
||
const dispatch = useDispatch(); | ||
|
||
const boards = useSelector((state) => state.boards); | ||
const board = boards.find((board) => board.isActive); | ||
|
||
const handleDropdownClick = () => { | ||
setOpenDropdown((isOpen) => !isOpen); | ||
setIsElipsisMenuOpen(false); | ||
setBoardType("add"); | ||
}; | ||
|
||
const handleOpenEditModal = () => { | ||
setIsBoardModalOpen(true); | ||
setIsElipsisMenuOpen(false); | ||
}; | ||
|
||
const handleOpenDeleteModal = () => { | ||
setIsDeleteModalOpen(true); | ||
setIsElipsisMenuOpen(false); | ||
}; | ||
|
||
const handleDeleteButtonClick = (e) => { | ||
if (e.target.textContent === "Delete") { | ||
dispatch(boardsSlice.actions.deleteBoard()); | ||
dispatch(boardsSlice.actions.setBoardActive({ index: 0 })); | ||
setIsDeleteModalOpen(false); | ||
} else { | ||
setIsDeleteModalOpen(false); | ||
} | ||
}; | ||
|
||
return ( | ||
<div className=" p-4 fixed left-0 bg-white dark:bg-[#2b2c37] z-50 right-0"> | ||
<header className="flex justify-between dark:text-white items-center"> | ||
{/* Left Side */} | ||
<div className="flex items-center space-x-2 md:space-x-4"> | ||
<h3 className="md:text-4xl hidden md:inline-block font-bold font-sans"> | ||
CareerPulse Tracker | ||
</h3> | ||
<div className="flex items-center"> | ||
<h3 className="truncate max-w-[200px] md:text-2xl text-xl font-bold md:ml-20 font-sans"> | ||
{board.name} | ||
</h3> | ||
<img | ||
src={openDropdown ? iconUp : iconDown} | ||
alt="dropdown icon" | ||
className="w-3 ml-2 md:hidden" | ||
onClick={handleDropdownClick} | ||
/> | ||
</div> | ||
</div> | ||
|
||
{/* Right Side */} | ||
<div className="flex space-x-4 items-center md:space-x-6"> | ||
<button | ||
className="button hidden md:block" | ||
onClick={() => { | ||
setIsTaskModalOpen((prevState) => !prevState); | ||
}} | ||
> | ||
+ Add New Update | ||
</button> | ||
<button | ||
onClick={() => { | ||
setIsTaskModalOpen((prevState) => !prevState); | ||
}} | ||
className="button py-1 px-3 md:hidden" | ||
> | ||
+ | ||
</button> | ||
<button | ||
className="button md:block" | ||
onClick={() => { | ||
logout(); | ||
}} | ||
> | ||
Logout | ||
</button> | ||
<img | ||
onClick={() => { | ||
setBoardType("edit"); | ||
setOpenDropdown(false); | ||
setIsElipsisMenuOpen((prevState) => !prevState); | ||
}} | ||
src={elipsis} | ||
alt="elipsis" | ||
className="cursor-pointer h-6" | ||
/> | ||
{isElipsisMenuOpen && ( | ||
<ElipsisMenu | ||
type="Boards" | ||
setOpenEditModal={handleOpenEditModal} | ||
setOpenDeleteModal={handleOpenDeleteModal} | ||
/> | ||
)} | ||
</div> | ||
|
||
{openDropdown && ( | ||
<HeaderDropDown | ||
setOpenDropdown={setOpenDropdown} | ||
setIsBoardModalOpen={setIsBoardModalOpen} | ||
/> | ||
)} | ||
</header> | ||
{isTaskModalOpen && ( | ||
<AddEditTaskModal | ||
setIsAddTaskModalOpen={setIsTaskModalOpen} | ||
type="add" | ||
device="mobile" | ||
/> | ||
)} | ||
|
||
{isBoardModalOpen && ( | ||
<AddEditBoardModal | ||
setBoardType={setBoardType} | ||
type={boardType} | ||
setIsBoardModalOpen={setIsBoardModalOpen} | ||
/> | ||
)} | ||
{isDeleteModalOpen && ( | ||
<DeleteModal | ||
setIsDeleteModalOpen={setIsDeleteModalOpen} | ||
type="board" | ||
title={board.name} | ||
onDeleteBtnClick={handleDeleteButtonClick} | ||
/> | ||
)} | ||
</div> | ||
); | ||
} | ||
|
||
export default Header; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,94 @@ | ||
import React, { useState } from "react"; | ||
import { useDispatch, useSelector } from "react-redux"; | ||
import { Switch } from "@headlessui/react"; | ||
import boardIcon from "../assets/icon-board.svg"; | ||
import useDarkMode from "../hooks/useDarkMode"; | ||
import darkIcon from "../assets/icon-dark-theme.svg"; | ||
import lightIcon from "../assets/icon-light-theme.svg"; | ||
import boardsSlice from "../redux/boardsSlice"; | ||
|
||
function HeaderDropDown({ setOpenDropdown, setIsBoardModalOpen }) { | ||
const dispatch = useDispatch(); | ||
const [currentTheme, setTheme] = useDarkMode(); | ||
const [isDarkModeEnabled, setDarkModeEnabled] = useState( | ||
currentTheme === "light" ? true : false | ||
); | ||
|
||
const toggleDarkMode = (checked) => { | ||
setTheme(currentTheme); | ||
setDarkModeEnabled(checked); | ||
}; | ||
|
||
const boards = useSelector((state) => state.boards); | ||
|
||
return ( | ||
<div | ||
className="py-10 px-6 absolute left-0 right-0 bottom-[-100vh] top-16 dropdown" | ||
onClick={(e) => { | ||
if (e.target !== e.currentTarget) { | ||
return; | ||
} | ||
setOpenDropdown(false); | ||
}} | ||
> | ||
{/* DropDown Modal */} | ||
|
||
<div className="bg-white dark:bg-[#2b2c37] shadow-md shadow-[#364e7e1a] w-full py-4 rounded-xl"> | ||
<h3 className="dark:text-gray-300 text-gray-600 font-semibold mx-4 mb-8"> | ||
ALL BOARDS ({boards?.length}) | ||
</h3> | ||
|
||
<div className="dropdown-board"> | ||
{boards.map((board, index) => ( | ||
<div | ||
className={`flex items-baseline space-x-2 px-5 py-4 ${ | ||
board.isActive && "bg-[#635fc7] rounded-r-full text-white mr-8" | ||
}`} | ||
key={index} | ||
onClick={() => { | ||
dispatch(boardsSlice.actions.setBoardActive({ index })); | ||
}} | ||
> | ||
<img src={boardIcon} className="filter-white h-4" />{" "} | ||
<p className="text-lg font-bold">{board.name}</p> | ||
</div> | ||
))} | ||
|
||
<div | ||
onClick={() => { | ||
setIsBoardModalOpen(true); | ||
setOpenDropdown(false); | ||
}} | ||
className="flex items-baseline space-x-2 text-[#635fc7] px-5 py-4" | ||
> | ||
<img src={boardIcon} className="filter-white h-4" /> | ||
<p className="text-lg font-bold">Create New Board</p> | ||
</div> | ||
|
||
<div className="mx-2 p-4 space-x-2 bg-slate-100 dark:bg-[#20212c] flex justify-center items-center rounded-lg"> | ||
<img src={lightIcon} alt="sun indicating light mode" /> | ||
|
||
<Switch | ||
checked={isDarkModeEnabled} | ||
onChange={toggleDarkMode} | ||
className={`${ | ||
isDarkModeEnabled ? "bg-[#635fc7]" : "bg-gray-200" | ||
} relative inline-flex h-6 w-11 items-center rounded-full`} | ||
> | ||
<span className="sr-only">Enable notifications</span> | ||
<span | ||
className={`${ | ||
isDarkModeEnabled ? "translate-x-6" : "translate-x-1" | ||
} inline-block h-4 w-4 transform rounded-full bg-white transition`} | ||
/> | ||
</Switch> | ||
|
||
<img src={darkIcon} alt="moon indicating dark mode" /> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
); | ||
} | ||
|
||
export default HeaderDropDown; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,82 @@ | ||
import React, { useEffect, useState } from "react"; | ||
import { useSelector } from "react-redux"; | ||
import AddEditBoardModal from "../modals/AddEditBoardModal"; | ||
import Column from "./Column"; | ||
import EmptyBoard from "./EmptyBoard"; | ||
import Sidebar from "./Sidebar"; | ||
|
||
function Home() { | ||
const [windowSize, setWindowSize] = useState([ | ||
window.innerWidth, | ||
window.innerHeight, | ||
]); | ||
|
||
useEffect(() => { | ||
const handleWindowResize = () => { | ||
setWindowSize([window.innerWidth, window.innerHeight]); | ||
}; | ||
|
||
window.addEventListener("resize", handleWindowResize); | ||
|
||
return () => { | ||
window.removeEventListener("resize", handleWindowResize); | ||
}; | ||
}); | ||
|
||
const [isBoardModalOpen, setIsBoardModalOpen] = useState(false); | ||
|
||
const boards = useSelector((state) => state.boards); | ||
const board = boards.find((board) => board.isActive === true); | ||
const columns = board.columns; | ||
|
||
const [isSideBarOpen, setIsSideBarOpen] = useState(true); | ||
|
||
return ( | ||
<div | ||
className={ | ||
windowSize[0] >= 768 && isSideBarOpen | ||
? " bg-[#f4f7fd] scrollbar-hide h-screen flex dark:bg-[#20212c] overflow-x-scroll gap-6 ml-[261px]" | ||
: "bg-[#f4f7fd] scrollbar-hide h-screen flex dark:bg-[#20212c] overflow-x-scroll gap-6 " | ||
} | ||
> | ||
{windowSize[0] >= 768 && ( | ||
<Sidebar | ||
setIsBoardModalOpen={setIsBoardModalOpen} | ||
isBoardModalOpen={isBoardModalOpen} | ||
isSideBarOpen={isSideBarOpen} | ||
setIsSideBarOpen={setIsSideBarOpen} | ||
/> | ||
)} | ||
|
||
{/* Columns Section */} | ||
|
||
{columns.length > 0 ? ( | ||
<> | ||
{columns.map((col, index) => ( | ||
<Column key={index} colIndex={index} /> | ||
))} | ||
<div | ||
onClick={() => { | ||
setIsBoardModalOpen(true); | ||
}} | ||
className=" h-screen dark:bg-[#2b2c3740] flex justify-center items-center font-bold text-2xl hover:text-[#635FC7] transition duration-300 cursor-pointer bg-[#E9EFFA] scrollbar-hide mb-2 mx-5 pt-[90px] min-w-[280px] text-[#828FA3] mt-[135px] rounded-lg " | ||
> | ||
+ New Column | ||
</div> | ||
</> | ||
) : ( | ||
<> | ||
<EmptyBoard type="edit" /> | ||
</> | ||
)} | ||
{isBoardModalOpen && ( | ||
<AddEditBoardModal | ||
type="edit" | ||
setIsBoardModalOpen={setIsBoardModalOpen} | ||
/> | ||
)} | ||
</div> | ||
); | ||
} | ||
|
||
export default Home; |
Oops, something went wrong.