Skip to content

Commit

Permalink
fix formatting errors
Browse files Browse the repository at this point in the history
  • Loading branch information
@sandygudie
sandygudie committed Jan 8, 2024
1 parent f8b38fd commit 79fe0f8
Show file tree
Hide file tree
Showing 9 changed files with 147 additions and 179 deletions.
268 changes: 131 additions & 137 deletions src/components/Board/ActiveBoard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ import { FcCheckmark } from "react-icons/fc";
import IconButton from "components/IconButton";
import { IoCloseOutline } from "react-icons/io5";


export default function ActiveBoard() {
const dispatch = useDispatch();
const [isAddTask, setAddTask] = useState(false);
Expand Down Expand Up @@ -84,159 +83,154 @@ export default function ActiveBoard() {
<>
<DragDropContext onDragEnd={onDragEnd}>
<div className="h-[90vh]">

<div className="mt-3 z-10 h-full flex gap-x-10 w-full">
{active.columns?.map((item: IColumn, index: number) => {
return (
<div key={item.name} className="w-[250px] shrink-0">
<div className="flex justify-between items-center">
<div
className=" flex gap-x-1 items-center text-gray
<div className="mt-3 z-10 h-full flex gap-x-10 w-full">
{active.columns?.map((item: IColumn, index: number) => {
return (
<div key={item.name} className="w-[250px] shrink-0">
<div className="flex justify-between items-center">
<div
className=" flex gap-x-1 items-center text-gray
font-bold uppercase text-xs tracking-widest"
>
<BsCircleFill
style={{
fill:
index < colorMarker.length
? colorMarker[index]
: colorSelection(),
}}
>
<BsCircleFill
style={{
fill:
index < colorMarker.length
? colorMarker[index]
: colorSelection(),
}}
/>
{isEditColumn && selectedColumn?.id === item.id ? (
<input
type="text"
value={editedText}
onChange={(e) => editColumnChangeHandler(e)}
className={`${
inputError && "border-error"
} border-[1px] w-20 rounded-md py-1 px-2`}
/>
{isEditColumn && selectedColumn?.id === item.id ? (
<input
type="text"
value={editedText}
onChange={(e) => editColumnChangeHandler(e)}
className={`${
inputError && "border-error"
} border-[1px] w-20 rounded-md py-1 px-2`}
/>
) : (
<span
className={`${
item.name.length > 10
? "truncate w-[10ch]"
: "w-fit"
}`}
>
{" "}
{item.name}
</span>
)}
({item.tasks.length})
</div>
<div className="relative gap-x-2 flex items-center">
{isEditColumn && selectedColumn?.id === item.id ? (
<>
<IconButton
handleClick={() => setEditColumn(false)}
>
<IoCloseOutline className="text-error text-lg font-bold" />
</IconButton>
<IconButton handleClick={editColumnHandler}>
{<FcCheckmark className="text-lg font-bold" />}
</IconButton>
</>

) : (
<IconButton
handleClick={() => {
setEditColumn(true),
setSelectedColumn(item),
setEditedText(item.name);
}}
>
<IoPencil className="text-sm font-bold" />
</IconButton>
)}

<IconButton
handleClick={() => {
setSelectedColumn(item), deleteColumnHandler();
}}
) : (
<span
className={`${
item.name.length > 10
? "truncate w-[10ch]"
: "w-fit"
}`}
>
{" "}
<AiOutlineDelete className="text-sm text-error" />{" "}
</IconButton>
{item.name}
</span>
)}
({item.tasks.length})
</div>
<div className="relative gap-x-2 flex items-center">
{isEditColumn && selectedColumn?.id === item.id ? (
<>
<IconButton handleClick={() => setEditColumn(false)}>
<IoCloseOutline className="text-error text-lg font-bold" />
</IconButton>
<IconButton handleClick={editColumnHandler}>
{<FcCheckmark className="text-lg font-bold" />}
</IconButton>
</>
) : (
<IconButton
handleClick={() => {
setOpenPopup(true), setSelectedColumn(item);
setEditColumn(true),
setSelectedColumn(item),
setEditedText(item.name);
}}
>
<div>
<PiDotsThreeLight
className="relative font-bold"
size={20}
/>
{isOpenPopup && selectedColumn?.id === item.id ? (
<div>
<Popup
handleOpenMenu={() => setOpenPopup(false)}
style={{}}
items={[
{
title: "Add Card",
handler: addCard,
},
]}
/>
</div>
) : null}
</div>
<IoPencil className="text-sm font-bold" />
</IconButton>
</div>
</div>
)}

<Droppable droppableId={`${item.name}`}>
{(provided) => (
<div
{...provided.droppableProps}
ref={provided.innerRef}
className="mt-4 h-full"
>
{item.tasks.length > 0 ? (
<IconButton
handleClick={() => {
setSelectedColumn(item), deleteColumnHandler();
}}
>
{" "}
<AiOutlineDelete className="text-sm text-error" />{" "}
</IconButton>
<IconButton
handleClick={() => {
setOpenPopup(true), setSelectedColumn(item);
}}
>
<div>
<PiDotsThreeLight
className="relative font-bold"
size={20}
/>
{isOpenPopup && selectedColumn?.id === item.id ? (
<div>
{item.tasks.map((tasks: ITask, index: number) => {
const filtered = tasks.subtasks.filter(
(item) => item.isCompleted === true
);
return (
<TaskItem
tasks={tasks}
filtered={filtered}
key={tasks.id}
index={index}
/>
);
})}
<Popup
handleOpenMenu={() => setOpenPopup(false)}
style={{}}
items={[
{
title: "Add Card",
handler: addCard,
},
]}
/>
</div>
) : (
<div className="w-[250px] shrink-0 h-full">
<div className="h-screen dark:bg-secondary/20 border-dashed border-2 border-gray rounded-lg"></div>
</div>
)}
{provided.placeholder}
) : null}
</div>
)}
</Droppable>
</IconButton>
</div>
</div>
);
})}

<div className="mt-8 h-screen w-[280px] pr-8 shrink-0">
<button
onClick={() => setEditBoard(true)}
className="h-full w-full bg-primary/30 hover:bg-primary/40 cursor-pointer flex items-center flex-col justify-center text-center rounded-lg"
>
<p className="text-xl hover:text-primary/70 text-primary font-bold">
{" "}
+ Add Column
</p>
</button>
</div>
<Droppable droppableId={`${item.name}`}>
{(provided) => (
<div
{...provided.droppableProps}
ref={provided.innerRef}
className="mt-4 h-full"
>
{item.tasks.length > 0 ? (
<div>
{item.tasks.map((tasks: ITask, index: number) => {
const filtered = tasks.subtasks.filter(
(item) => item.isCompleted === true
);
return (
<TaskItem
tasks={tasks}
filtered={filtered}
key={tasks.id}
index={index}
/>
);
})}
</div>
) : (
<div className="w-[250px] shrink-0 h-full">
<div className="h-screen dark:bg-secondary/20 border-dashed border-2 border-gray rounded-lg"></div>
</div>
)}
{provided.placeholder}
</div>
)}
</Droppable>
</div>
);
})}

<div className="mt-8 h-screen w-[280px] pr-8 shrink-0">
<button
onClick={() => setEditBoard(true)}
className="h-full w-full bg-primary/30 hover:bg-primary/40 cursor-pointer flex items-center flex-col justify-center text-center rounded-lg"
>
<p className="text-xl hover:text-primary/70 text-primary font-bold">
{" "}
+ Add Column
</p>
</button>
</div>
</div>

</div>
</DragDropContext>

<Modal
Expand Down
36 changes: 16 additions & 20 deletions src/components/Board/AddTask.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,6 @@ export default function AddTask({ handleClose, activeColumn, tasks }: Props) {
isClosable: true,
});
}

handleClose();
};

Expand Down Expand Up @@ -182,25 +181,22 @@ export default function AddTask({ handleClose, activeColumn, tasks }: Props) {
/>
</div>
<div className="relative flex items-center my-6 gap-x-8 justify-between ">
<div className="w-1/2">
<TextInput
label="Deadline"
name="deadline"
type="date"
placeholder="E.g Pending design task"

/>
</div>
<div className="w-1/2">
<TextInput
label="Time"
name="time"
type="time"
placeholder="E.g Pending design task"

/>
</div>

<div className="w-1/2">
<TextInput
label="Deadline"
name="deadline"
type="date"
placeholder="E.g Pending design task"
/>
</div>
<div className="w-1/2">
<TextInput
label="Time"
name="time"
type="time"
placeholder="E.g Pending design task"
/>
</div>
</div>
<div className="mb-6">
<label className="text-sm font-bold">Column</label>
Expand Down
5 changes: 0 additions & 5 deletions src/components/InputField/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,11 +84,6 @@ export const SubtaskInput = ({
<MdClose className="text-lg hover:text-primary font-bold" />
</button>
</div>
{/* {meta.touched || meta.error ? (
<div className="absolute -bottom-0 text-error/70 text-xs">
{meta.error}
</div>
) : null} */}
</div>
);
};
1 change: 0 additions & 1 deletion src/components/Modal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
// import { useMediaQuery } from "react-responsive";
interface Props {
open: boolean;
handleClose: () => void;
Expand Down
2 changes: 0 additions & 2 deletions src/page/dashboard/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { useState, useEffect } from "react";
import Header from "components/Header";

import { MdVisibilityOff } from "react-icons/md";
import SideBar from "components/SideBar";
import Board from "components/Board";
Expand Down Expand Up @@ -42,7 +41,6 @@ export default function Index() {
showSidebar={showSidebar}
/>
) : null}

<Board showSidebar={showSidebar} />
</div>
</div>
Expand Down
Loading

0 comments on commit 79fe0f8

Please sign in to comment.