From 9fdf7bc243babceb59e564631bd4f5d79014e9e1 Mon Sep 17 00:00:00 2001 From: jordan-ae Date: Sun, 29 Dec 2024 16:21:27 +0100 Subject: [PATCH 1/5] feat: add column sorting for workspace planner cards --- src/people/WorkSpacePlanner/index.tsx | 195 ++++++++++++++++++++++---- 1 file changed, 165 insertions(+), 30 deletions(-) diff --git a/src/people/WorkSpacePlanner/index.tsx b/src/people/WorkSpacePlanner/index.tsx index d932f281..53b6b29b 100644 --- a/src/people/WorkSpacePlanner/index.tsx +++ b/src/people/WorkSpacePlanner/index.tsx @@ -15,7 +15,7 @@ const PlannerContainer = styled.div` padding: 0; height: calc(100vh - 65px); background: ${colors.light.grayish.G950}; - overflow-y: auto; + overflow: hidden; `; const ContentArea = styled.div` @@ -23,25 +23,126 @@ const ContentArea = styled.div` margin: 20px auto; background: white; border-radius: 8px; - min-height: 500px; text-align: center; padding: 20px; `; -const BountyCardList = styled.ul` - list-style: none; - padding: 0; - margin: 20px 0; +const ColumnsContainer = styled.div` + display: flex; + gap: 1rem; + padding: 1rem; + overflow-x: auto; + height: calc(100% - 60px); + background: white; - li { + &::-webkit-scrollbar { + height: 8px; + } + + &::-webkit-scrollbar-track { + background: ${colors.light.grayish.G900}; + } + + &::-webkit-scrollbar-thumb { background: ${colors.light.grayish.G800}; - margin: 10px 0; - padding: 15px; - border-radius: 5px; - text-align: left; + border-radius: 4px; } `; +const Column = styled.div` + flex: 0 0 320px; + border-radius: 8px; + display: flex; + flex-direction: column; + max-height: 100%; +`; + +const ColumnHeader = styled.div` + padding: 1rem; + background: ${colors.light.grayish.G800}; + border-radius: 8px 8px 0 0; + border-bottom: 1px solid ${colors.light.grayish.G700}; + position: sticky; + top: 0; + color: black; +`; + +const ColumnTitle = styled.h3` + margin: 0; + font-size: 1rem; + font-weight: 600; + display: flex; + align-items: center; + justify-content: space-between; +`; + +const CardCount = styled.span` + font-size: 0.875rem; + color: ${colors.light.grayish.G400}; +`; + +const ColumnContent = styled.div` + padding: 0.5rem; + overflow-y: auto; + flex: 1; + + &::-webkit-scrollbar { + width: 6px; + } + + &::-webkit-scrollbar-track { + background: ${colors.light.grayish.G900}; + } + + &::-webkit-scrollbar-thumb { + background: ${colors.light.grayish.G800}; + border-radius: 3px; + } +`; + +const LoadMoreButton = styled.button` + width: 100%; + padding: 0.5rem; + background: ${colors.light.grayish.G800}; + color: white; + border: none; + border-top: 1px solid ${colors.light.grayish.G700}; + cursor: pointer; + transition: background 0.2s; + + &:hover { + background: ${colors.light.grayish.G700}; + } +`; + +const LoadingContainer = styled.div` + display: flex; + justify-content: center; + align-items: center; + height: 100%; +`; + +const ErrorMessage = styled.p` + color: ${colors.light.red1}; + padding: 1rem; + text-align: center; +`; + +const COLUMN_CONFIGS = [ + { id: 'Todo', title: 'To Do' }, + { id: 'Assigned', title: 'In Progress' }, + { id: 'Complete', title: 'Complete' }, + { id: 'Paid', title: 'Paid' } +]; + +const getCardStatus = (card: BountyCard) => { + if (!card.status) return 'Todo'; + if (card.status === 'Paid') return 'Paid'; + if (card.status === 'Complete') return 'Complete'; + if (card.status === 'Assigned') return 'Assigned'; + return 'Todo'; +}; + const WorkspacePlanner = () => { const { uuid } = useParams<{ uuid: string }>(); const { main } = useStores(); @@ -57,19 +158,30 @@ const WorkspacePlanner = () => { bountyCardStore.loadWorkspaceBounties(); setLoading(false); }; - fetchWorkspaceData(); }, [main, uuid, bountyCardStore]); if (loading) { return ( - - + + + + ); } - const onclick = (bountyId: string) => { + const groupedBounties = bountyCardStore.bountyCards.reduce( + (acc: { [key: string]: BountyCard[] }, card: BountyCard) => { + const status = getCardStatus(card); + if (!acc[status]) acc[status] = []; + acc[status].push(card); + return acc; + }, + {} + ); + + const handleCardClick = (bountyId: string) => { history.push(`/bounty/${bountyId}`); }; @@ -78,21 +190,44 @@ const WorkspacePlanner = () => {

Welcome to the new Workspace Planner

- {bountyCardStore.loading ? ( - - ) : bountyCardStore.error ? ( -

{bountyCardStore.error}

- ) : ( - - {bountyCardStore.bountyCards.map((card: BountyCard) => ( - - ))} - - )} - {bountyCardStore.pagination.currentPage * bountyCardStore.pagination.pageSize < - bountyCardStore.pagination.total && ( - - )} + + {COLUMN_CONFIGS.map(({ id, title }: { id: string; title: string }) => ( + + + + {title} + ({groupedBounties[id]?.length || 0}) + + + + + {bountyCardStore.loading ? ( + + + + ) : bountyCardStore.error ? ( + {bountyCardStore.error} + ) : ( + groupedBounties[id]?.map((card: BountyCard) => ( + handleCardClick(card.id)} + /> + )) + )} + + + {id === 'Todo' && + bountyCardStore.pagination.currentPage * bountyCardStore.pagination.pageSize < + bountyCardStore.pagination.total && ( + bountyCardStore.loadNextPage()}> + Load More + + )} + + ))} + ); From 9161b83e3ad77c0681ce2e9a14a2615e9790fa84 Mon Sep 17 00:00:00 2001 From: jordan-ae Date: Sun, 29 Dec 2024 16:50:02 +0100 Subject: [PATCH 2/5] chore: fix horizontal scroll bug --- src/people/WorkSpacePlanner/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/people/WorkSpacePlanner/index.tsx b/src/people/WorkSpacePlanner/index.tsx index 53b6b29b..0501a1b4 100644 --- a/src/people/WorkSpacePlanner/index.tsx +++ b/src/people/WorkSpacePlanner/index.tsx @@ -32,8 +32,8 @@ const ColumnsContainer = styled.div` gap: 1rem; padding: 1rem; overflow-x: auto; - height: calc(100% - 60px); - background: white; + background: whote; + height: 800px !important; &::-webkit-scrollbar { height: 8px; @@ -83,7 +83,7 @@ const CardCount = styled.span` const ColumnContent = styled.div` padding: 0.5rem; - overflow-y: auto; + overflow-y: scroll; flex: 1; &::-webkit-scrollbar { From 50d6958e84b873bad29c84b79f36670334cdbbcd Mon Sep 17 00:00:00 2001 From: jordan-ae Date: Sun, 29 Dec 2024 20:00:25 +0100 Subject: [PATCH 3/5] chore: rerun cypress test --- src/people/WorkSpacePlanner/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/people/WorkSpacePlanner/index.tsx b/src/people/WorkSpacePlanner/index.tsx index 0501a1b4..7e341753 100644 --- a/src/people/WorkSpacePlanner/index.tsx +++ b/src/people/WorkSpacePlanner/index.tsx @@ -36,7 +36,7 @@ const ColumnsContainer = styled.div` height: 800px !important; &::-webkit-scrollbar { - height: 8px; + height: 7px; } &::-webkit-scrollbar-track { From d08cfcd6926d3f4226aeea7c1b4c26a9cf94143c Mon Sep 17 00:00:00 2001 From: jordan-ae Date: Sun, 29 Dec 2024 21:54:40 +0100 Subject: [PATCH 4/5] chore: fix horizontal scroll bug --- src/people/WorkSpacePlanner/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/people/WorkSpacePlanner/index.tsx b/src/people/WorkSpacePlanner/index.tsx index 7e341753..0501a1b4 100644 --- a/src/people/WorkSpacePlanner/index.tsx +++ b/src/people/WorkSpacePlanner/index.tsx @@ -36,7 +36,7 @@ const ColumnsContainer = styled.div` height: 800px !important; &::-webkit-scrollbar { - height: 7px; + height: 8px; } &::-webkit-scrollbar-track { From 3b2bb56d09e785f93cb76a0ba6ee9db0ff8f8f79 Mon Sep 17 00:00:00 2001 From: jordan-ae Date: Sun, 29 Dec 2024 22:48:42 +0100 Subject: [PATCH 5/5] chore: rerun cypress test --- src/people/WorkSpacePlanner/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/people/WorkSpacePlanner/index.tsx b/src/people/WorkSpacePlanner/index.tsx index 0501a1b4..7e341753 100644 --- a/src/people/WorkSpacePlanner/index.tsx +++ b/src/people/WorkSpacePlanner/index.tsx @@ -36,7 +36,7 @@ const ColumnsContainer = styled.div` height: 800px !important; &::-webkit-scrollbar { - height: 8px; + height: 7px; } &::-webkit-scrollbar-track {