diff --git a/apps/web/app/hooks/features/useKanban.ts b/apps/web/app/hooks/features/useKanban.ts index 0c0bc2659..4217299aa 100644 --- a/apps/web/app/hooks/features/useKanban.ts +++ b/apps/web/app/hooks/features/useKanban.ts @@ -39,11 +39,36 @@ export function useKanban() { } },[taskStatusHook.loading, tasksFetching]) + /** + * collapse or show kanban column + */ + const toggleColumn = (column: string, status: boolean) => { + const columnData = taskStatusHook.taskStatus.filter((taskStatus: ITaskStatusItemList,)=> { + return taskStatus.name === column + }); + + const columnId = columnData[0].id; + + taskStatusHook.editTaskStatus(columnId, { + isCollapsed: status + }); + } + + const isColumnCollapse = (column: string) => { + const columnData = taskStatusHook.taskStatus.filter((taskStatus: ITaskStatusItemList,)=> { + return taskStatus.name === column + }); + + return columnData[0].isCollapsed + } + return { data: kanbanBoard, isLoading: loading, columns: taskStatusHook.taskStatus, updateKanbanBoard: setKanbanBoard, - updateTaskStatus: updateTask + updateTaskStatus: updateTask, + toggleColumn, + isColumnCollapse } } \ No newline at end of file diff --git a/apps/web/app/interfaces/ITaskStatus.ts b/apps/web/app/interfaces/ITaskStatus.ts index f94760cf4..b2a8e9350 100644 --- a/apps/web/app/interfaces/ITaskStatus.ts +++ b/apps/web/app/interfaces/ITaskStatus.ts @@ -13,10 +13,12 @@ export interface ITaskStatusItemList { is_system?: boolean; isSystem?: boolean; projectId?: string; + isCollapsed?: boolean; + order?: number; } export interface ITaskStatusCreate { - name: string; + name?: string; description?: string; icon?: string; color?: string; @@ -24,4 +26,6 @@ export interface ITaskStatusCreate { organizationId?: string; tenantId?: string | undefined | null; organizationTeamId?: string | undefined | null; + isCollapsed?: boolean; + order?: number; } diff --git a/apps/web/lib/components/Kanban.tsx b/apps/web/lib/components/Kanban.tsx index cc336dfc2..d30ce01e4 100644 --- a/apps/web/lib/components/Kanban.tsx +++ b/apps/web/lib/components/Kanban.tsx @@ -6,6 +6,7 @@ import { Draggable, DraggableProvided, DraggableStateSnapshot, Droppable, Droppa import Item from './kanban-card'; import { ITeamTask } from '@app/interfaces'; import { TaskStatus } from '@app/constants'; +import { useKanban } from '@app/hooks/features/useKanban'; const grid = 8; @@ -20,12 +21,12 @@ const getBackgroundColor = (dropSnapshot: DroppableStateSnapshot) => { if (dropSnapshot.isDraggingOver) { return { - backgroundColor: '#FFEBE6', + backgroundColor: '', } } if (dropSnapshot.draggingFromThisWith) { return { - backgroundColor: '#E6FCFF', + backgroundColor: '', } } return { @@ -48,13 +49,19 @@ function headerStyleChanger(snapshot: DraggableStateSnapshot, bgColor: any){ * @param param0 * @returns */ -function InnerItemList({items, title}: { +function InnerItemList({items, title, dropSnapshot}: { title: string, - items: ITeamTask[] + items: ITeamTask[], + dropSnapshot: DroppableStateSnapshot }) { return ( <> -
+
0) ? '20px' : '0px' + }} + className="flex flex-col gap-2.5 max-h-[520px] overflow-y-scroll overflow-x-hidden"> {items.map((item: ITeamTask, index: number) => ( {(dragProvided: DraggableProvided, dragSnapshot: DraggableStateSnapshot) => ( @@ -97,7 +104,7 @@ function InnerList(props: {
- + <> {dropProvided.placeholder} @@ -116,7 +123,7 @@ export const KanbanDroppable = ({ title, droppableId, type, content }: { title: string, droppableId: string, type: string, - content: ITeamTask[] + content: ITeamTask[], } ) => { const [enabled, setEnabled] = useState(false); @@ -172,6 +179,8 @@ export const EmptyKanbanDroppable = ({index,title, items}: { items: ITeamTask[]; })=> { const [enabled, setEnabled] = useState(false); + + const { toggleColumn } = useKanban(); useEffect(() => { const animation = requestAnimationFrame(() => setEnabled(true)); @@ -215,9 +224,9 @@ export const EmptyKanbanDroppable = ({index,title, items}: {
- - - +
@@ -269,9 +278,12 @@ const KanbanDraggableHeader = ({title, items, snapshot, provided, backgroundColo backgroundColor: string, provided: DraggableProvided }) => { + + const { toggleColumn } = useKanban(); return ( <> + {title && (
- +
+ )} ) } @@ -323,7 +338,7 @@ const KanbanDraggable = ({index,title, items, backgroundColor}: { return ( <> - { items.length > 0 && + { items && - { items.length > 0 ? + { items ? <> onClick && task && task.status !== 'closed' && onClick(task)} >
-
+
); @@ -45,7 +45,7 @@ export function WorkedOnTaskCell({ row }: { row: any }) { memberInfo={memberInfo} task={memberInfo?.memberTask} isAuthUser={memberInfo?.isAuthUser} - className="2xl:w-32 3xl:w-[8rem] w-52 lg:w-1/5 flex flex-col gap-y-[1.125rem] justify-center" + className="2xl:w-32 3xl:w-[8rem] min-w-[15rem] w-52 lg:w-1/5 flex flex-col gap-y-[1.125rem] justify-center" /> ); } @@ -60,7 +60,7 @@ export function TaskEstimateInfoCell({ row }: { row: any }) { memberInfo={memberInfo} edition={taskEdition} activeAuthTask={true} - className="lg:px-3 2xl:w-52 3xl:w-64 w-52 lg:w-1/5" + className="lg:px-3 2xl:w-52 3xl:w-64 min-w-[15rem] w-52 lg:w-1/5" /> ); } diff --git a/apps/web/lib/features/team-members-kanban-view.tsx b/apps/web/lib/features/team-members-kanban-view.tsx index bb1a03ee8..10ce4efb2 100644 --- a/apps/web/lib/features/team-members-kanban-view.tsx +++ b/apps/web/lib/features/team-members-kanban-view.tsx @@ -11,7 +11,7 @@ import { DragDropContext, DraggableLocation, DropResult, Droppable, DroppablePro export const KanbanView = ({ kanbanBoardTasks }: { kanbanBoardTasks: IKanban}) => { - const { columns:kanbanColumns, updateKanbanBoard, updateTaskStatus } = useKanban(); + const { columns:kanbanColumns, updateKanbanBoard, updateTaskStatus, isColumnCollapse } = useKanban(); const [items, setItems] = useState(kanbanBoardTasks); @@ -175,16 +175,24 @@ export const KanbanView = ({ kanbanBoardTasks }: { kanbanBoardTasks: IKanban}) = > {(provided: DroppableProvided, snapshot: DroppableStateSnapshot) => (
{columns.length > 0 ? <> - {columns.map((column: any, index: number) => { + {columns.map((column: string, index: number) => { return ( - { items[column].length > 0 ? + { isColumnCollapse(column) ? +
+ +
+ : <>
- : -
- -
} ) diff --git a/apps/web/lib/features/team/user-team-card/index.tsx b/apps/web/lib/features/team/user-team-card/index.tsx index 5e66c687f..e0c78eccb 100644 --- a/apps/web/lib/features/team/user-team-card/index.tsx +++ b/apps/web/lib/features/team/user-team-card/index.tsx @@ -123,7 +123,7 @@ export function UserTeamCard({ className, active, member, publicTeam = false }: diff --git a/apps/web/lib/features/team/user-team-table/user-team-table-header.tsx b/apps/web/lib/features/team/user-team-table/user-team-table-header.tsx index 53391fa77..68f815ae4 100644 --- a/apps/web/lib/features/team/user-team-table/user-team-table-header.tsx +++ b/apps/web/lib/features/team/user-team-table/user-team-table-header.tsx @@ -2,12 +2,12 @@ import React from 'react'; function UserTeamTableHeader() { return ( -
-

Name

-

Task

-

Worked on Task

-

Estimate

-

Action

+
+

Name

+

Task

+

Worked on Task

+

Estimate

+

Action

); } diff --git a/apps/web/lib/settings/invitation-table.tsx b/apps/web/lib/settings/invitation-table.tsx index 9d0475fe1..0d357650d 100644 --- a/apps/web/lib/settings/invitation-table.tsx +++ b/apps/web/lib/settings/invitation-table.tsx @@ -23,25 +23,43 @@ export const InvitationTable = ({ invitations }: { invitations: (IInvitation | I - - - - - - - + @@ -49,7 +67,7 @@ export const InvitationTable = ({ invitations }: { invitations: (IInvitation | I diff --git a/apps/web/pages/index.tsx b/apps/web/pages/index.tsx index 50467b4c6..bdaf4abf7 100644 --- a/apps/web/pages/index.tsx +++ b/apps/web/pages/index.tsx @@ -148,7 +148,7 @@ function TaskTimerSection({ isTrackingEnabled }: { isTrackingEnabled: boolean }) {/* Task inputs */} {/* {showInput && ( */} {/* )} */} diff --git a/apps/web/pages/kanban/index.tsx b/apps/web/pages/kanban/index.tsx index d42bef651..d97a10eab 100644 --- a/apps/web/pages/kanban/index.tsx +++ b/apps/web/pages/kanban/index.tsx @@ -1,11 +1,10 @@ import { KanbanTabs } from "@app/constants"; import { useOrganizationTeams } from "@app/hooks"; import { useKanban } from "@app/hooks/features/useKanban"; -import { clsxm } from "@app/utils"; import KanbanBoardSkeleton from "@components/shared/skeleton/KanbanBoardSkeleton"; import VerticalLine from "@components/ui/svgs/vertificalline"; import { withAuthentication } from "lib/app/authenticator"; -import { Breadcrumb, Container } from "lib/components"; +import { Breadcrumb } from "lib/components"; import { stackImages } from "lib/components/kanban-card"; import { AddIcon } from "lib/components/svgs"; import { KanbanView } from "lib/features/team-members-kanban-view" @@ -28,84 +27,83 @@ const Kanban= () => { return ( <> -
- - -
-
-

Kanban Board

-
-
-

08:00 ( UTC +04:30 )

- -
-
- {activeTeamMembers.map((image: any, index: number)=> { +
+ +
+
+

Kanban Board

+
+
+

08:00 ( UTC +04:30 )

+ +
+
+ {activeTeamMembers.map((image: any, index: number)=> { + + if(index < numberOfImagesDisplayed) { + return ( +
+ +
+ ) + } - if(index < numberOfImagesDisplayed) { - return ( -
- -
- ) - } - - })} - {(activeTeamMembers.length > 4) && ( -
- {activeTeamMembers.length - numberOfImagesDisplayed}+ -
- )} -
+ })} + {(activeTeamMembers.length > 4) && ( +
+ {activeTeamMembers.length - numberOfImagesDisplayed}+ +
+ )}
- -
+ +
-
-
-
{ - setActiveTab(KanbanTabs.TODAY) - }} className={`cursor-pointer pt-2.5 px-5 pb-[30px] text-base font-bold ${activeTab === KanbanTabs.TODAY ? 'border-b-[#3826A6] text-[#3826A6]': 'border-b-white dark:border-b-[#191A20] dark:text-white text-[#282048]'}`} style={{ - borderBottomWidth: '3px', - borderBottomStyle: 'solid', - }}> - Today -
-
{ - setActiveTab(KanbanTabs.YESTERDAY) - }} className={`cursor-pointer pt-2.5 px-5 pb-[30px] text-base font-bold ${activeTab === KanbanTabs.YESTERDAY ? 'border-b-[#3826A6] text-[#3826A6]': 'border-b-white dark:border-b-[#191A20] dark:text-white text-[#282048]'}`} style={{ - borderBottomWidth: '3px', - borderBottomStyle: 'solid', - }}> - Yesterday -
-
{ - setActiveTab(KanbanTabs.TOMORROW) - }} className={`cursor-pointer pt-2.5 px-5 pb-[30px] text-base font-bold ${activeTab === KanbanTabs.TOMORROW ? 'border-b-[#3826A6] text-[#3826A6]': 'border-b-white dark:border-b-[#191A20] dark:text-white text-[#282048]'}`} style={{ - borderBottomWidth: '3px', - borderBottomStyle: 'solid', - }}> - Tomorrow -
+
+
+
+
{ + setActiveTab(KanbanTabs.TODAY) + }} className={`cursor-pointer pt-2.5 px-5 pb-[30px] text-base font-bold ${activeTab === KanbanTabs.TODAY ? 'border-b-[#3826A6] text-[#3826A6]': 'border-b-white dark:border-b-[#191A20] dark:text-white text-[#282048]'}`} style={{ + borderBottomWidth: '3px', + borderBottomStyle: 'solid', + }}> + Today
-
- +
{ + setActiveTab(KanbanTabs.YESTERDAY) + }} className={`cursor-pointer pt-2.5 px-5 pb-[30px] text-base font-bold ${activeTab === KanbanTabs.YESTERDAY ? 'border-b-[#3826A6] text-[#3826A6]': 'border-b-white dark:border-b-[#191A20] dark:text-white text-[#282048]'}`} style={{ + borderBottomWidth: '3px', + borderBottomStyle: 'solid', + }}> + Yesterday
+
{ + setActiveTab(KanbanTabs.TOMORROW) + }} className={`cursor-pointer pt-2.5 px-5 pb-[30px] text-base font-bold ${activeTab === KanbanTabs.TOMORROW ? 'border-b-[#3826A6] text-[#3826A6]': 'border-b-white dark:border-b-[#191A20] dark:text-white text-[#282048]'}`} style={{ + borderBottomWidth: '3px', + borderBottomStyle: 'solid', + }}> + Tomorrow +
+
+
+
- +
+ {/** TODO:fetch teamtask based on days */} {/** Kanbanboard for today tasks */} {(activeTab === KanbanTabs.TODAY) && ( <> diff --git a/apps/web/pages/settings/personal.tsx b/apps/web/pages/settings/personal.tsx index 12128bd55..668406a2a 100644 --- a/apps/web/pages/settings/personal.tsx +++ b/apps/web/pages/settings/personal.tsx @@ -43,6 +43,11 @@ const Personal = () => {
+ + + { {isTeamMember ? (
+ + + {/* General Settings */}
+ {t('pages.invite.invitationTable.NAME_AND_EMAIL')} + {t('pages.invite.invitationTable.POSITION')} + {t('pages.invite.invitationTable.DATE_AND_TIME_REQUEST')} + {t('pages.invite.invitationTable.CV_OR_ATTACHMENT')} + {t('common.LINK')} + {t('common.STATUS')}
{
{t('common.NAME')} {t('common.POSITION')} {t('common.ROLES')} {t('common.JOIN_OR_LEFT')} {t('common.STATUS')}