Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

updated checkboxes & made drag and drop smoother plus fixed dnd bug #123

Merged
merged 4 commits into from
Jun 30, 2024
Merged

updated checkboxes & made drag and drop smoother plus fixed dnd bug #123

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f4c8cc4
updated checkboxes & made drag and drop smoother plus fixed dnd bug
JeremySpence272 Jun 30, 2024
2b20c7a
Merge branch 'main' into improve-checkboxes
JeremySpence272 Jun 30, 2024
5d9cd6a
fixed overflow and min height
JeremySpence272 Jun 30, 2024
b13c2a5
Merge branch 'improve-checkboxes' of https://github.com/Alforoan/stud…
JeremySpence272 Jun 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions client/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

140 changes: 76 additions & 64 deletions client/src/components/BoardComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,12 @@ const BoardComponent: React.FC = () => {
const sourceCards = filterCardsByColumn(source.droppableId);
const destinationCards = filterCardsByColumn(destination.droppableId);

// Prevent moving any card to the position before the `newCard`
if (destination.droppableId === "Backlog" && destination.index === 0) {
console.log("Cannot move above the new card placeholder.");
destination.index = 1;
}

moveCard(sourceCards, movedCard, sourceCards.length); // just call this to remove it from the source cards it automatically filters it out
movedCard.column = columns.find(
(col) => col.title === destination.droppableId
Expand Down Expand Up @@ -112,70 +118,76 @@ const BoardComponent: React.FC = () => {
<div className="flex-grow w-full flex">
<DragDropContext onDragEnd={onDragEnd}>
{columns.map((col) => (
<Droppable key={col.key} droppableId={col.key}>
{(provided, _) => (
<div
ref={provided.innerRef}
{...provided.droppableProps}
className="w-1/3 p-2 m-4 bg-secondaryElements rounded-md"
>
<h2 className="text-lg font-primary text-primaryText font-bold mb-2">
{col.title}
</h2>
<ul>
{selectedBoard!
.cards!.filter((card) => card.column === col.key)
.sort((a, b) => a.order - b.order)
.map((card) =>
card.id === "0" ? (
<li
key={card.id}
className="bg-white p-2 mb-2 rounded shadow cursor-pointer"
onClick={() => setSelectedCard(card)}
>
<h3 className="font-semibold">
{card.cardName}
</h3>
{card.details.timeEstimate &&
card.details.timeEstimate > 0 ? (
<p>{card.details.timeEstimate} minutes</p>
) : (
""
)}
</li>
) : (
<Draggable
key={card.id}
draggableId={card.id.toString()}
index={card.order}
>
{(provided, _) => (
<li
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
className="bg-white p-2 mb-2 rounded shadow"
onClick={() => setSelectedCard(card)}
>
<h3 className="font-semibold">
{card.cardName}
</h3>
{card.details.timeEstimate &&
card.details.timeEstimate > 0 ? (
<p>{card.details.timeEstimate} minutes</p>
) : (
""
)}
</li>
)}
</Draggable>
)
)}
{provided.placeholder}
</ul>
</div>
)}
</Droppable>
<div className="w-1/3 p-2 m-4 bg-secondaryElements rounded-md">
<h2 className="text-lg font-primary text-primaryText font-bold mb-2">
{col.title}
</h2>
<Droppable key={col.key} droppableId={col.key}>
{(provided, _) => (
<div
ref={provided.innerRef}
{...provided.droppableProps}
className={`flex flex-col flex-grow min-h-[100px] ${
col.title === "Backlog" ? "mt-12" : ""
}`}
>
<ul>
{selectedBoard!
.cards!.filter((card) => card.column === col.key)
.sort((a, b) => a.order - b.order)
.map((card) =>
card.id === "0" ? (
<li
key={card.id}
className="bg-white p-2 mb-2 rounded shadow cursor-pointer -mt-10"
onClick={() => setSelectedCard(card)}
>
<h3 className="font-semibold">
{card.cardName}
</h3>
{card.details.timeEstimate &&
card.details.timeEstimate > 0 ? (
<p>{card.details.timeEstimate} minutes</p>
) : (
""
)}
</li>
) : (
<Draggable
key={card.id}
draggableId={card.id.toString()}
index={card.order}
>
{(provided, _) => (
<li
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
className="bg-white p-2 mb-2 rounded shadow"
onClick={() => setSelectedCard(card)}
>
<h3 className="font-semibold">
{card.cardName}
</h3>
{card.details.timeEstimate &&
card.details.timeEstimate > 0 ? (
<p>
{card.details.timeEstimate} minutes
</p>
) : (
""
)}
</li>
)}
</Draggable>
)
)}
{provided.placeholder}
</ul>
</div>
)}
</Droppable>
</div>
))}
</DragDropContext>
</div>
Expand Down
59 changes: 16 additions & 43 deletions client/src/components/CardDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import React, { useState, ChangeEvent } from "react";
import { Card, ChecklistEntry, Columns } from "../types";
import { Card, ChecklistEntry } from "../types";

import useKeyPress from "../hooks/useKeyPress";
import CreateCardComponent from "./CreateCardComponent";

import { useBoard } from "../context/BoardContext";
import CheckboxItem from "./CheckboxItem";

const CardDetails: React.FC = () => {
const { selectedCard, setSelectedCard, handleUpdateCard, handleDeleteCard } =
Expand Down Expand Up @@ -75,29 +76,6 @@ const CardDetails: React.FC = () => {
setIsConfirmingDelete(false);
};

const toggleCheck = (index: number) => {
if (!selectedCard || !selectedCard.details.checklist) return;
if (selectedCard.column !== Columns.inProgress) return;

setChecklistItems((prevItems) => {
const updatedChecklist = prevItems.map((item, idx) => {
return idx === index ? { ...item, checked: !item.checked } : item;
});

const newSelectedCard = {
...selectedCard,
details: {
...selectedCard.details,
checklist: updatedChecklist,
},
};

handleUpdateCard(newSelectedCard);

return updatedChecklist;
});
};

// Use custom hook to handle ESC key
useKeyPress("Escape", () => setSelectedCard(null));

Expand All @@ -113,19 +91,17 @@ const CardDetails: React.FC = () => {
onChange={(e: ChangeEvent<HTMLInputElement>) =>
setCardName(e.target.value)
}
className="rounded mb-2 w-full text-lg font-bold bg-white"
className="rounded mb-2 pl-2 w-full text-lg font-bold bg-white"
/>
<ul>
<ul className="max-h-80 overflow-y-scroll">
{checklistItems.map((item, index) => (
<li key={index} className="flex items-center mb-2">
<input
type="checkbox"
checked={item.checked}
onChange={() => toggleCheck(index)}
<CheckboxItem
item={item}
index={index}
isEditing={true}
setChecklistItems={setChecklistItems}
/>
<label className="ml-2" onClick={() => toggleCheck(index)}>
{item.value}
</label>
</li>
))}
</ul>
Expand All @@ -136,7 +112,7 @@ const CardDetails: React.FC = () => {
onChange={(e: ChangeEvent<HTMLInputElement>) =>
setNewChecklistItem(e.target.value)
}
className="rounded px-2 py-1 mr-2 flex-grow"
className="rounded px-2 py-1 mr-2 mt-2 flex-grow"
placeholder="Add checklist item"
/>
<button
Expand Down Expand Up @@ -169,18 +145,15 @@ const CardDetails: React.FC = () => {
) : (
<>
<h2 className="text-lg font-bold mb-2">{selectedCard!.cardName}</h2>
<ul>
<ul className="max-h-64 min-h-32 overflow-y-scroll">
{checklistItems.map((item, index) => (
<li key={index} className="flex items-center mb-2">
<input
type="checkbox"
checked={item.checked}
onChange={() => toggleCheck(index)}
disabled={selectedCard!.column !== Columns.inProgress}
<CheckboxItem
item={item}
index={index}
isEditing={false}
setChecklistItems={setChecklistItems}
/>
<label className="ml-2" onClick={() => toggleCheck(index)}>
{item.value}
</label>
</li>
))}
</ul>
Expand Down
Loading
Loading