Skip to content

Commit

Permalink
Merge pull request #1883 from ever-co/update/dynamic-column-header-color
Browse files Browse the repository at this point in the history 
make column color dynamic
  • Loading branch information
@evereq
evereq authored Nov 28, 2023
2 parents 273179e + dd73aaf commit 6ad3230
Show file tree
Hide file tree
Showing 5 changed files with 206 additions and 158 deletions.
9 changes: 9 additions & 0 deletions apps/web/components/ui/svgs/priority-icon.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
export default function PriorityIcon() {
return (
<>
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 12 12" fill="none">
<path d="M9.95906 7.5249L6.69906 4.2649C6.31406 3.8799 5.68406 3.8799 5.29906 4.2649L2.03906 7.5249" stroke="#EE6C4D" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</>
)
}
22 changes: 13 additions & 9 deletions apps/web/lib/components/Kanban.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -201,7 +201,7 @@ export const EmptyKanbanDroppable = ({index,title, items}: {
<>
<header
className={"flex flex-col gap-8 items-between text-center rounded-lg w-fit h-full px-2 py-4 bg-indianRed"}
style={headerStyleChanger(snapshot)}
style={headerStyleChanger(snapshot, '#D95F5F')}
data-isDragging={snapshot.isDragging}
>
<div
Expand Down Expand Up @@ -255,17 +255,19 @@ export const EmptyKanbanDroppable = ({index,title, items}: {
)
};

const KanbanDraggableHeader = ({title, items, snapshot, provided}: {
const KanbanDraggableHeader = ({title, items, snapshot, provided, backgroundColor}: {
title: string,
items: any,
snapshot: DraggableStateSnapshot,
backgroundColor: string,
provided: DraggableProvided
}) => {

return (
<>
<header
className={"flex flex-row justify-between items-center rounded-lg px-4 py-2 bg-primary"}
style={headerStyleChanger(snapshot)}
className={"flex flex-row justify-between items-center rounded-lg px-4 py-2"}
style={headerStyleChanger(snapshot, backgroundColor)}
data-isDragging={snapshot.isDragging}
>
<div
Expand Down Expand Up @@ -303,12 +305,15 @@ const KanbanDraggableHeader = ({title, items, snapshot, provided}: {
* @param param0
* @returns
*/
const KanbanDraggable = ({index,title, items}: {
const KanbanDraggable = ({index,title, items, backgroundColor}: {
index: number;
title: string;
backgroundColor: any
items: any;
}) => {



return (
<>
{ items.length > 0 &&
Expand Down Expand Up @@ -337,15 +342,14 @@ const KanbanDraggable = ({index,title, items}: {
items={items}
snapshot={snapshot}
provided={provided}
backgroundColor={backgroundColor}
/>
<KanbanDroppable
title={title}
droppableId={title}
type={'TASK'}
content={items}
/>


</>
:
null
Expand Down
26 changes: 24 additions & 2 deletions apps/web/lib/components/kanban-card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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(
<>
<div className="flex flex-col">
{numberArray.map((item: any, index: number)=> {
return (
<PriorityIcon key={index}/>
)
})}
</div>
</>
)
}

/**
* card that represent each task
* @param props
Expand Down Expand Up @@ -115,8 +137,8 @@ export default function Item(props: any) {
<BugIcon/>
</span>
<span className="text-grey text-normal mr-1">#213</span>
<span className="text-black dark:text-white text-normal capitalize">{item.content}</span>

<span className="text-black dark:text-white text-normal capitalize mr-2">{item.content}</span>
<Priority level={1}/>
</div>
</div>
<div className="flex flex-col justify-between w-[48px] items-end">
Expand Down
30 changes: 19 additions & 11 deletions apps/web/lib/features/team-members-kanban-view.tsx
View file
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -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<any>(itemsArray);

const [column, setColumn] = useState<any>(Object.keys(itemsArray))

const [columns, setColumn] = useState<any>(Object.keys(itemsArray));
/**
* This function handles all drag and drop logic
* on the kanban board.
Expand All @@ -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;
Expand Down Expand Up @@ -140,30 +148,31 @@ export const KanbanView = ({ itemsArray }: { itemsArray: any}) => {
<DragDropContext
onDragEnd={onDragEnd}
>
{ column.length > 0 &&
{ columns.length > 0 &&
<Droppable
droppableId="droppable"
type="COLUMN"
direction="horizontal"
>
{(provided: DroppableProvided, snapshot: DroppableStateSnapshot) => (
<div
className={clsxm("flex flex-row gap-[20px] w-full h-full p-[32px] bg-transparent dark:bg-[#181920]", snapshot.isDraggingOver ? "lightblue" : "#F7F7F8")}
className={clsxm("flex flex-row justify-center gap-[20px] w-full h-full p-[32px] bg-transparent dark:bg-[#181920]", snapshot.isDraggingOver ? "lightblue" : "#F7F7F8")}
ref={provided.innerRef}
{...provided.droppableProps}
>
{column.length > 0 ?
{columns.length > 0 ?
<>
{column.map((column: any, index: number) => {
{columns.map((column: any, index: number) => {
return (
<React.Fragment key={index}>
{ items[column].length > 0 ?
<>
<div className="flex flex-col" key={index}>
<div className="flex flex-col" key={index}>
<KanbanDraggable
index={index}
index={index}
title={column}
items={items[column]}
items={items[column]}
backgroundColor={getHeaderBackground(column)}
/>
<div className="flex flex-row items-center text-base not-italic font-semibold rounded-2xl gap-4 bg-white dark:bg-dark--theme-light p-4">
<AddIcon height={20} width={20}/>
Expand All @@ -174,7 +183,6 @@ export const KanbanView = ({ itemsArray }: { itemsArray: any}) => {
:
<div className={'order-last'} key={index}>
<EmptyKanbanDroppable

index={index}
title={column}
items={items[column]}
Expand Down
Loading

0 comments on commit 6ad3230

Please sign in to comment.