Skip to content

Commit

Permalink
2328 improvement task type icon of task cards on kanban view (#2336)
Browse files Browse the repository at this point in the history 
* [Feature]: add labels menu button hover effect labels ui

* [Feature]: add labels menu button hover effect labels ui

* [Feature]: add labels menu button hover effect labels ui

* [Feature]: add labels menu button hover effect labels ui

* [Feature]: add labels menu button hover effect labels ui

* [Feature]: added dropdown for collapse and create task

* [Fix]: task-status-id fix for tasks

* [Fix]: adding icons

* Update team-members-kanban-view.tsx

---------

Co-authored-by: Ruslan K <[email protected]>
  • Loading branch information
@Anishali2 @evereq
Anishali2 and evereq authored Mar 29, 2024
1 parent 40ec199 commit 618f2e5
Show file tree
Hide file tree
Showing 2 changed files with 26 additions and 31 deletions.
7 changes: 7 additions & 0 deletions apps/web/lib/components/Kanban.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import Skeleton from 'react-loading-skeleton';
import { useModal } from '@app/hooks';
import { Modal } from './modal';
import CreateTaskModal from '@components/pages/kanban/create-task-modal';
import Image from 'next/image';

const grid = 8;

Expand Down Expand Up @@ -288,6 +289,7 @@ export const EmptyKanbanDroppable = ({

const KanbanDraggableHeader = ({
title,
icon,
items,
snapshot,
createTask,
Expand All @@ -296,6 +298,7 @@ const KanbanDraggableHeader = ({
}: {
title: string;
items: any;
icon: string;
createTask: () => void;
snapshot: DraggableStateSnapshot;
backgroundColor: string;
Expand All @@ -310,6 +313,7 @@ const KanbanDraggableHeader = ({
style={headerStyleChanger(snapshot, backgroundColor)}
>
<div className="flex flex-row gap-2.5 items-center">
<Image alt={title} src={icon} width={20} height={20} />
<h2
className="text-sm font-semibold not-italic text-black font-poppins capitalize"
{...provided.dragHandleProps}
Expand Down Expand Up @@ -378,11 +382,13 @@ const KanbanDraggable = ({
index,
title,
isLoading,
icon,
items,
backgroundColor
}: {
index: number;
title: string;
icon: string;
isLoading: boolean;
backgroundColor: any;
items: ITeamTask[];
Expand All @@ -409,6 +415,7 @@ const KanbanDraggable = ({
<div>
<KanbanDraggableHeader
title={title}
icon={icon}
items={items}
snapshot={snapshot}
provided={provided}
Expand Down
50 changes: 19 additions & 31 deletions apps/web/lib/features/team-members-kanban-view.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,13 @@ export const KanbanView = ({ kanbanBoardTasks, isLoading }: { kanbanBoardTasks:
addNewTask
} = useKanban();

const [columns, setColumn] = useState<any[]>(
Object.keys(kanbanBoardTasks).map((key) => {
const columnInfo = kanbanColumns.find((item) => item.name === key);
return { name: key, icon: columnInfo ? columnInfo.fullIconUrl : '' };
})
);
const { taskStatus: ts } = useTaskStatus();

const [columns, setColumn] = useState<string[]>(Object.keys(kanbanBoardTasks));

const reorderTask = (list: ITeamTask[], startIndex: number, endIndex: number) => {
const tasks = Array.from(list);
const [removedTask] = tasks.splice(startIndex, 1);
Expand Down Expand Up @@ -77,7 +80,7 @@ export const KanbanView = ({ kanbanBoardTasks, isLoading }: { kanbanBoardTasks:
taskStatusId: ts.find((v) => v.name?.toLowerCase() == taskstatus.toLowerCase())?.id
};

// update task status on the server
// update task status on server
updateTaskStatus(updateTaskStatusData);

// insert into next
Expand Down Expand Up @@ -141,7 +144,6 @@ export const KanbanView = ({ kanbanBoardTasks, isLoading }: { kanbanBoardTasks:

return;
}

// dropped nowhere
if (!result.destination) {
return;
Expand All @@ -156,8 +158,9 @@ export const KanbanView = ({ kanbanBoardTasks, isLoading }: { kanbanBoardTasks:
}

if (result.type === 'COLUMN') {
console.log('re-order-column');
const reorderedItem = reorderColumn(columns, source.index, destination.index);

// Update column order on the server side
reorderedItem.map((item: string, index: number) => {
return reorderStatus(item, index);
Expand Down Expand Up @@ -187,27 +190,11 @@ export const KanbanView = ({ kanbanBoardTasks, isLoading }: { kanbanBoardTasks:
setEnabled(false);
};
}, []);

// const [editStatus, setEditStatus] = useState(); // used for status
// const { refetch } = useRefetchData();
// const { editTaskStatus, taskStatus } = useTaskStatus();
// const openEdit = async (column: any) => {
// const editId = taskStatus.find((v) => v.name === column);
// editTaskStatus(editId?.id, {
// name: 'open',
// color: editId?.color,
// icon: editId?.icon
// })?.then(() => {
// // setEdit(null);
// // refetch();
// });
// };


if (!enabled) return null; // ['open','close']

return (
<>
{/* <div className="flex flex-col justify-between"> */}
<>
<DragDropContext onDragEnd={onDragEnd}>
{columns.length > 0 && (
<Droppable droppableId="droppable" type="COLUMN" direction="horizontal">
Expand All @@ -223,15 +210,15 @@ export const KanbanView = ({ kanbanBoardTasks, isLoading }: { kanbanBoardTasks:
>
{columns.length > 0 ? (
<>
{columns.map((column: string, index: number) => {
{columns.map((column: any, index: number) => {
return (
<React.Fragment key={index}>
<div className="flex flex-col a" key={index}>
{isColumnCollapse(column) ? (
{isColumnCollapse(column.name) ? (
<EmptyKanbanDroppable
index={index}
title={column}
items={items[column]}
title={column.name}
items={items[column.name]}
backgroundColor={getHeaderBackground(
kanbanColumns,
column
Expand All @@ -243,12 +230,13 @@ export const KanbanView = ({ kanbanBoardTasks, isLoading }: { kanbanBoardTasks:
key={index}
isLoading={isLoading}
index={index}
icon={column.icon}
addNewTask={addNewTask}
title={column}
items={items[column]}
title={column.name}
items={items[column.name]}
backgroundColor={getHeaderBackground(
kanbanColumns,
column
column.name
)}
/>
</>
Expand Down

0 comments on commit 618f2e5

Please sign in to comment.