Skip to content

Commit

Permalink
Merge pull request #2201 from ever-co/2199-feature-adding-some-additi…
Browse files Browse the repository at this point in the history 
…onal-features-in-kanban

2199 feature adding some additional features in kanban
  • Loading branch information
@evereq
evereq authored Feb 15, 2024
2 parents ef3f336 + 59ab3d2 commit 76f0987
Show file tree
Hide file tree
Showing 2 changed files with 114 additions and 81 deletions.
2 changes: 2 additions & 0 deletions apps/web/lib/components/Kanban.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,8 @@ function InnerItemList({ items, title }: { title: string; items: ITeamTask[]; dr
<Draggable key={item.id} draggableId={item.id} index={index}>
{(dragProvided: DraggableProvided, dragSnapshot: DraggableStateSnapshot) => (
<Item
isClone={false}
index={index}
key={item.id}
item={item}
isDragging={dragSnapshot.isDragging}
Expand Down
193 changes: 112 additions & 81 deletions apps/web/lib/components/kanban-card.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,22 @@
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';
import { Tag } from '@app/interfaces';
import { useTimerView } from '@app/hooks';
import { ITeamTask, Tag } from '@app/interfaces';
import {
useAuthenticateUser,
useCollaborative,
useOrganizationTeams,
useTMCardTaskEdit,
useTeamMemberCard,
useTimerView
} from '@app/hooks';
import ImageComponent, { ImageOverlapperProps } from './image-overlapper';
import { TaskInput, TaskIssueStatus } from 'lib/features';
import Link from 'next/link';
import CircularProgress from '@components/ui/svgs/circular-progress';
import { HorizontalSeparator } from './separator';
import { pad } from '@app/helpers';
import { TaskStatus } from '@app/constants';
import { TaskIssueStatus } from 'lib/features';
import Link from 'next/link';
import ImageComponent, { ImageOverlapperProps } from './image-overlapper';
import { UserTeamCardMenu } from 'lib/features/team/user-team-card/user-team-card-menu';

function getStyle(provided: DraggableProvided, style: any) {
if (!style) {
Expand Down Expand Up @@ -86,45 +94,46 @@ function Priority({ level }: { level: number }) {
</>
);
}

type ItemProps = {
item: ITeamTask;
isDragging: boolean;
isGroupedOver: boolean;
provided: DraggableProvided;
style: any;
isClone: boolean;
index: number;
};
/**
* card that represent each task
* @param props
* @returns
*/
export default function Item(props: any) {
const { item, isDragging, isGroupedOver, provided, style, isClone, index } = props;
export default function Item(props: ItemProps) {
const { item, isDragging, provided, style, index } = props;

const { hours, minutes, seconds } = useTimerView();
const { activeTeam } = useOrganizationTeams();
const { user } = useAuthenticateUser();

const taskAssignee: ImageOverlapperProps[] = [];
const members = activeTeam?.members || [];
const currentUser = members.find((m) => m.employee.userId === user?.id);

item.members.map((member: any) => {
taskAssignee.push({
const memberInfo = useTeamMemberCard(currentUser);
const taskEdition = useTMCardTaskEdit(memberInfo.memberTask);
const taskAssignee: ImageOverlapperProps[] = item.members.map((member: any) => {
return {
id: member.user.id,
url: member.user.imageUrl,
alt: member.user.firstName
});
};
});
const { collaborativeSelect } = useCollaborative(memberInfo.memberUser);

// const handleTime = () => {
// if (item.status === TaskStatus.INPROGRESS) {
// startTimer();
// } else {
// stopTimer();
// }
// };

// useEffect(() => {
// handleTime();
// }, [timerStatus?.running]);
const menu = <>{!collaborativeSelect && <UserTeamCardMenu memberInfo={memberInfo} edition={taskEdition} />}</>;

return (
<section
href={``}
isDragging={isDragging}
isGroupedOver={isGroupedOver}
isClone={isClone}
<div
draggable={isDragging}
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
Expand All @@ -133,62 +142,84 @@ export default function Item(props: any) {
data-is-dragging={isDragging}
data-testid={item.id}
data-index={index}
aria-label={`${item.status.name} ${item.content}`}
aria-label={item.label}
>
<div className="grid grid-cols-4 w-full justify-between border-b border-b-gray-200 pb-4">
<div className="col-span-3 flex flex-col gap-5 grow w-full">
{item.tags && <TagList tags={item.tags} />}

<div className="flex flex-row flex-wrap text-wrap items-center text-sm not-italic font-semibold">
<TaskIssueStatus
showIssueLabels={false}
task={item}
className={`${
item.issueType === 'Bug'
? '!px-[0.3312rem] py-[0.2875rem]'
: '!px-[0.375rem] py-[0.375rem]'
} rounded-sm mr-1`}
/>

<span className="text-grey text-normal mr-1">#{item.number}</span>
<Link
href={`/task/${item.id}`}
className="text-black dark:text-white text-normal capitalize mr-2 bg-blue line-clamp-2"
>
{item.title}
</Link>
<Priority level={1} />
</div>
<div className=" w-full justify-between h-40">
<div className="w-full flex justify-between">
<span>{<TagList tags={[]} />}</span>
{menu}
</div>
<div className="flex flex-col justify-between items-end">
<VerticalThreeDot />

<div className="w-full flex justify-between my-3">
<div className="flex items-center ">
{!taskEdition.editMode ? (
<>
<TaskIssueStatus
showIssueLabels={false}
task={item}
className="rounded-sm mr-1 h-6 w-6"
/>
<span className="text-grey text-normal mr-1">#{item.number}</span>
<Link
href={`/task/${item.id}`}
className="text-black dark:text-white text-normal capitalize mr-2 bg-blue line-clamp-2"
>
{item.title}
</Link>
<Priority level={1} />
</>
) : (
<div className="w-56">
<TaskInput
task={taskEdition.task}
initEditMode={true}
keepOpen={true}
showCombobox={false}
autoFocus={true}
autoInputSelectText={true}
onTaskClick={(e) => {
console.log(e);
}}
onEnterKey={() => {
taskEdition.setEditMode(false);
}}
/>
</div>
)}
</div>
<CircularProgress percentage={10} />
</div>
</div>
<div className="flex flex-row justify-between items-center pt-4 h-fit">
{item.status === TaskStatus.INPROGRESS ? (
<div className="flex flex-row items-center gap-2">
<small className="text-grey text-xs text-normal">Live:</small>
<p className="text-[#219653] font-medium text-sm">
{pad(hours)}:{pad(minutes)}:{pad(seconds)}{' '}
</p>
</div>
) : (
<div className="flex flex-row items-center gap-2">
<small className="text-grey text-xs text-normal">Worked:</small>
<p className="text-black dark:text-white font-medium text-sm">
{pad(hours)}:{pad(minutes)}:{pad(seconds)}{' '}
</p>
<div className="my-2">
<HorizontalSeparator />
</div>
<div className="w-full flex items-center justify-between">
<div className="mt-1">
{item.status === TaskStatus.INPROGRESS ? (
<div className="flex items-center gap-2">
<small className="text-grey text-xs text-normal">Live:</small>
<p className="text-[#219653] font-medium text-sm">
{pad(hours)}:{pad(minutes)}:{pad(seconds)}{' '}
</p>
</div>
) : (
<div className="flex items-center gap-2">
<small className="text-grey text-xs text-normal">Worked:</small>
<p className="text-black dark:text-white font-medium text-sm">
{pad(hours)}:{pad(minutes)}:{pad(seconds)}{' '}
</p>
</div>
)}
</div>
)}
<ImageComponent images={taskAssignee} />
</div>
{item.hasComment && (
<div className="flex flex-row items-center justify-center rounded-full w-5 h-5 z-10 bg-[#e5e7eb] dark:bg-[#181920] absolute top-0 right-0">
<div className="w-3.5 h-3.5 rounded-full" style={setCommentIconColor(item.hasComment)}></div>
<ImageComponent images={taskAssignee} />
{item.issueType && (
<div className="flex flex-row items-center justify-center rounded-full w-5 h-5 z-10 bg-[#e5e7eb] dark:bg-[#181920] absolute top-0 right-0">
<div
className="w-3.5 h-3.5 rounded-full"
style={setCommentIconColor(item.issueType as any)}
></div>
</div>
)}
</div>
)}
</section>
</div>
</div>
);
}

0 comments on commit 76f0987

Please sign in to comment.