From 2c7bd1ba717a6ea5adfc067c21295d71c6b627c9 Mon Sep 17 00:00:00 2001 From: maceteligolden Date: Mon, 27 Nov 2023 15:01:13 +0100 Subject: [PATCH 1/4] feat:change column header column --- apps/web/lib/components/Kanban.tsx | 22 +- .../lib/features/team-members-kanban-view.tsx | 30 +- apps/web/pages/kanban/index.tsx | 277 +++++++++--------- 3 files changed, 173 insertions(+), 156 deletions(-) diff --git a/apps/web/lib/components/Kanban.tsx b/apps/web/lib/components/Kanban.tsx index 2072cfe38..974f962b8 100644 --- a/apps/web/lib/components/Kanban.tsx +++ b/apps/web/lib/components/Kanban.tsx @@ -33,8 +33,8 @@ const getBackgroundColor = (dropSnapshot: DroppableStateSnapshot) => { }; // this function changes column header color when dragged -function headerStyleChanger(snapshot: DraggableStateSnapshot){ - const backgroundColor = snapshot.isDragging ? '#0000ee' : '#fffee'; +function headerStyleChanger(snapshot: DraggableStateSnapshot, bgColor: any){ + const backgroundColor = snapshot.isDragging ? '#0000ee' : bgColor; return { backgroundColor @@ -201,7 +201,7 @@ export const EmptyKanbanDroppable = ({index,title, items}: { <>
{ + return ( <>
{ + + return ( <> { items.length > 0 && @@ -337,6 +342,7 @@ const KanbanDraggable = ({index,title, items}: { items={items} snapshot={snapshot} provided={provided} + backgroundColor={backgroundColor} /> - - : null diff --git a/apps/web/lib/features/team-members-kanban-view.tsx b/apps/web/lib/features/team-members-kanban-view.tsx index 4380908c9..cad9ba0b9 100644 --- a/apps/web/lib/features/team-members-kanban-view.tsx +++ b/apps/web/lib/features/team-members-kanban-view.tsx @@ -1,6 +1,7 @@ import { clsxm } from "@app/utils"; import KanbanDraggable, { EmptyKanbanDroppable } from "lib/components/Kanban" import { AddIcon } from "lib/components/svgs"; +import { state } from "pages/kanban"; import React from "react"; import { useEffect, useState } from "react"; import { DragDropContext, DropResult, Droppable, DroppableProvided, DroppableStateSnapshot } from "react-beautiful-dnd"; @@ -52,12 +53,19 @@ const reorderItemMap = ({ itemMap, source, destination }: { }; }; +const getHeaderBackground = (column: any) => { + const selectState = state.filter((item: any)=> { + return item.name === column.toUpperCase() + }); + + return selectState[0].backgroundColor +} + export const KanbanView = ({ itemsArray }: { itemsArray: any}) => { const [items, setItems] = useState(itemsArray); - const [column, setColumn] = useState(Object.keys(itemsArray)) - + const [columns, setColumn] = useState(Object.keys(itemsArray)); /** * This function handles all drag and drop logic * on the kanban board. @@ -68,7 +76,7 @@ export const KanbanView = ({ itemsArray }: { itemsArray: any}) => { if (result.combine) { if (result.type === 'COLUMN') { - const shallow = [...column]; + const shallow = [...columns]; shallow.splice(result.source.index, 1); setColumn(shallow); return; @@ -140,7 +148,7 @@ export const KanbanView = ({ itemsArray }: { itemsArray: any}) => { - { column.length > 0 && + { columns.length > 0 && { > {(provided: DroppableProvided, snapshot: DroppableStateSnapshot) => (
- {column.length > 0 ? + {columns.length > 0 ? <> - {column.map((column: any, index: number) => { + {columns.map((column: any, index: number) => { return ( { items[column].length > 0 ? <> -
+
@@ -174,7 +183,6 @@ export const KanbanView = ({ itemsArray }: { itemsArray: any}) => { :
{ - const router = useRouter() - const [winReady, setwinReady] = useState(false); +const todo = { + id: 'status-1', + name: 'TODO', + backgroundColor: '#8154BA', +} + +const ongoing = { + id: 'status-2', + name: 'ONGOING', + backgroundColor: '#D7EBDF', +} - const todo = { - id: 'status-1', - name: 'TODO' - } +const review = { + id: 'status-3', + name: 'REVIEW', + backgroundColor: '#EAD2D5', +} - const ongoing = { - id: 'status-2', - name: 'ONGOING' - } +export const state = [ todo, ongoing, review] - const review = { - id: 'status-3', - name: 'REVIEW' - } +const demoData = { + todo: [ + { + id: '1', + content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', + tags: [ + { + id: 'tag-1', + title: 'User Profile', + backgroundColor: '#8154BA', + color: '#fff' + }, + { + id: 'tag-2', + title: 'BackEnd', + backgroundColor: '#EAD2D5', + color: '#DD2F44' + }, + ], + status: todo + }, + { + id: '4', + content: 'demo content2', + tags: [ + { + id: 'tag-1', + title: 'User Profile', + backgroundColor: '#D7EBDF', + color: '#3D9360' + }, + { + id: 'tag-2', + title: 'BackEnd', + backgroundColor: '#EAD9EE', + color: '#9641AB' + }, + ], + status: todo + } + ], + ongoing: [ + { + id: '2', + content: 'another content', + tags: [ + { + id: 'tag-1', + title: 'User Profile', + backgroundColor: '#EAD9EE', + color: '#9641AB' + }, + { + id: 'tag-2', + title: 'BackEnd', + backgroundColor: '#EAD2D5', + color: '#DD2F44' + }, + ], + status: ongoing + }, + { + id: '5', + content: 'another content2', + tags: [ + { + id: 'tag-1', + title: 'User Profile', + backgroundColor: '#8154BA', + color: '#fff' + }, + { + id: 'tag-2', + title: 'BackEnd', + backgroundColor: '#D7EBDF', + color: '#3D9360' + }, + ], + status: ongoing + } + ], + review: [ + { + id: '3', + content: 'a simple tes', + tags: [ + { + id: 'tag-1', + title: 'User Profile', + backgroundColor: '#D7EBDF', + color: '#3D9360' + }, + { + id: 'tag-2', + title: 'BackEnd', + backgroundColor: '#D7EBDF', + color: '#3D9360' + }, + ], + status: review + }, + { + id: '6', + content: 'a simple tes', + tags: [ + { + id: 'tag-1', + title: 'User Profile', + backgroundColor: '#D7EBDF', + color: '#3D9360' + }, + { + id: 'tag-2', + title: 'BackEnd', + backgroundColor: '#D7EBDF', + color: '#3D9360' + }, + ], + status: review + } + ]} - const demoData = { - todo: [ - { - id: '1', - content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', - tags: [ - { - id: 'tag-1', - title: 'User Profile', - backgroundColor: '#8154BA', - color: '#fff' - }, - { - id: 'tag-2', - title: 'BackEnd', - backgroundColor: '#EAD2D5', - color: '#DD2F44' - }, - ], - status: todo - }, - { - id: '4', - content: 'demo content2', - tags: [ - { - id: 'tag-1', - title: 'User Profile', - backgroundColor: '#D7EBDF', - color: '#3D9360' - }, - { - id: 'tag-2', - title: 'BackEnd', - backgroundColor: '#EAD9EE', - color: '#9641AB' - }, - ], - status: todo - } - ], - ongoing: [ - { - id: '2', - content: 'another content', - tags: [ - { - id: 'tag-1', - title: 'User Profile', - backgroundColor: '#EAD9EE', - color: '#9641AB' - }, - { - id: 'tag-2', - title: 'BackEnd', - backgroundColor: '#EAD2D5', - color: '#DD2F44' - }, - ], - status: ongoing - }, - { - id: '5', - content: 'another content2', - tags: [ - { - id: 'tag-1', - title: 'User Profile', - backgroundColor: '#8154BA', - color: '#fff' - }, - { - id: 'tag-2', - title: 'BackEnd', - backgroundColor: '#D7EBDF', - color: '#3D9360' - }, - ], - status: ongoing - } - ], - review: [ - { - id: '3', - content: 'a simple tes', - tags: [ - { - id: 'tag-1', - title: 'User Profile', - backgroundColor: '#D7EBDF', - color: '#3D9360' - }, - { - id: 'tag-2', - title: 'BackEnd', - backgroundColor: '#D7EBDF', - color: '#3D9360' - }, - ], - status: review - }, - { - id: '6', - content: 'a simple tes', - tags: [ - { - id: 'tag-1', - title: 'User Profile', - backgroundColor: '#D7EBDF', - color: '#3D9360' - }, - { - id: 'tag-2', - title: 'BackEnd', - backgroundColor: '#D7EBDF', - color: '#3D9360' - }, - ], - status: review - } - ]} +const Kanban= () => { + const router = useRouter() + const [winReady, setwinReady] = useState(false); useEffect(() => { From 8ad78bc83db0306720972a0194b75ce5c7b45e9f Mon Sep 17 00:00:00 2001 From: maceteligolden Date: Mon, 27 Nov 2023 15:26:01 +0100 Subject: [PATCH 2/4] feat:add priority icon --- apps/web/components/ui/svgs/priority-icon.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 apps/web/components/ui/svgs/priority-icon.tsx diff --git a/apps/web/components/ui/svgs/priority-icon.tsx b/apps/web/components/ui/svgs/priority-icon.tsx new file mode 100644 index 000000000..7eab4f4bc --- /dev/null +++ b/apps/web/components/ui/svgs/priority-icon.tsx @@ -0,0 +1,9 @@ +export default function PriorityIcon() { + return ( + <> + + + + + ) +} \ No newline at end of file From 61b063a441e37d30e46d0aad56140a44b2307c55 Mon Sep 17 00:00:00 2001 From: maceteligolden Date: Mon, 27 Nov 2023 15:26:22 +0100 Subject: [PATCH 3/4] update:add priority to task card --- apps/web/lib/components/kanban-card.tsx | 26 +++++++++++++++++++++++-- 1 file changed, 24 insertions(+), 2 deletions(-) diff --git a/apps/web/lib/components/kanban-card.tsx b/apps/web/lib/components/kanban-card.tsx index 24cdf4768..fcd0a08c0 100644 --- a/apps/web/lib/components/kanban-card.tsx +++ b/apps/web/lib/components/kanban-card.tsx @@ -3,6 +3,7 @@ import Image from 'next/image'; import VerticalThreeDot from "@components/ui/svgs/vertical-three-dot"; import { DraggableProvided } from "react-beautiful-dnd"; import CircularProgress from "@components/ui/svgs/circular-progress"; +import PriorityIcon from "@components/ui/svgs/priority-icon"; function getStyle(provided: DraggableProvided, style: any) { if (!style) { @@ -74,6 +75,27 @@ const stackImages = (index: number, length: number) => { } } +function Priority({ + level +}: { + level: number +}) { + + const numberArray = Array.from({ length: level }, (_, index) => index + 1); + + return( + <> +
+ {numberArray.map((item: any, index: number)=> { + return ( + + ) + })} +
+ + ) +} + /** * card that represent each task * @param props @@ -115,8 +137,8 @@ export default function Item(props: any) { #213 - {item.content} - + {item.content} +
From dd73aafd86d7c809552aa74f38c50a4d364122f7 Mon Sep 17 00:00:00 2001 From: maceteligolden Date: Mon, 27 Nov 2023 15:29:11 +0100 Subject: [PATCH 4/4] update:fix svg property --- apps/web/components/ui/svgs/priority-icon.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/web/components/ui/svgs/priority-icon.tsx b/apps/web/components/ui/svgs/priority-icon.tsx index 7eab4f4bc..a34d29c40 100644 --- a/apps/web/components/ui/svgs/priority-icon.tsx +++ b/apps/web/components/ui/svgs/priority-icon.tsx @@ -2,7 +2,7 @@ export default function PriorityIcon() { return ( <> - + )