Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Release #2010

Merged
merged 18 commits into from
Dec 18, 2023
Merged

Release #2010

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
a19a84f
fix: tables responsive on team settings page
Cedric921 Dec 15, 2023
ea4d486
style: assign task form responsive
Cedric921 Dec 15, 2023
314ca9c
feat:make table view responsive on tablets devices
Cedric921 Dec 16, 2023
e0d402c
update:add isCollapsed and order to taskstatus
maceteligolden Dec 17, 2023
cda8410
update:make name optional in taskstatuscreate
maceteligolden Dec 17, 2023
5ad1ed3
feat:add collapsecolumn function to kanban hook
maceteligolden Dec 17, 2023
a8916f0
update:accommodate both states of collapse
maceteligolden Dec 17, 2023
e9d4e65
update:show columns if not collapsed
maceteligolden Dec 18, 2023
e427f1d
chore:add todo task comment
maceteligolden Dec 18, 2023
85a5926
feat:add isColumnCollapse to usekanban hook
maceteligolden Dec 18, 2023
78e40af
update:change kanban display condition
maceteligolden Dec 18, 2023
aeb450f
fix:kanban board padding issues and overflow
maceteligolden Dec 18, 2023
6b5b724
update:change togglecolumn logic
maceteligolden Dec 18, 2023
126de0f
update:add a cta to arrow of column header
maceteligolden Dec 18, 2023
e1b81a7
fix:allow dropping cards in empty columns
maceteligolden Dec 18, 2023
7edf07e
update:remove ununsed imports
maceteligolden Dec 18, 2023
2995d10
Merge pull request #2009 from ever-co/update/task-status
evereq Dec 18, 2023
027cb3d
Merge pull request #2008 from ever-co/feat/tabletResponsive
evereq Dec 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 26 additions & 1 deletion apps/web/app/hooks/features/useKanban.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
}
6 changes: 5 additions & 1 deletion apps/web/app/interfaces/ITaskStatus.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,19 @@ 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;
projectId?: string;
organizationId?: string;
tenantId?: string | undefined | null;
organizationTeamId?: string | undefined | null;
isCollapsed?: boolean;
order?: number;
}
43 changes: 29 additions & 14 deletions apps/web/lib/components/Kanban.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -20,12 +21,12 @@ const getBackgroundColor = (dropSnapshot: DroppableStateSnapshot) => {

if (dropSnapshot.isDraggingOver) {
return {
backgroundColor: '#FFEBE6',
backgroundColor: '',
}
}
if (dropSnapshot.draggingFromThisWith) {
return {
backgroundColor: '#E6FCFF',
backgroundColor: '',
}
}
return {
Expand All @@ -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 (
<>
<section className="flex flex-col gap-2.5 max-h-[520px] overflow-y-scroll overflow-x-hidden">
<section
style={{
minHeight: ((items.length < 0) && dropSnapshot.isDraggingOver) ? '120px' : '20px',
marginTop: (items.length > 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) => (
<Draggable key={item.id} draggableId={item.id} index={index}>
{(dragProvided: DraggableProvided, dragSnapshot: DraggableStateSnapshot) => (
Expand Down Expand Up @@ -97,7 +104,7 @@ function InnerList(props: {
<div
style={getBackgroundColor(dropSnapshot)}
ref={dropProvided.innerRef}>
<InnerItemList items={items} title={title} />
<InnerItemList items={items} title={title} dropSnapshot={dropSnapshot} />
<>
{dropProvided.placeholder}
</>
Expand All @@ -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);

Expand Down Expand Up @@ -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));
Expand Down Expand Up @@ -215,9 +224,9 @@ export const EmptyKanbanDroppable = ({index,title, items}: {
<div
className="flex flex-col items-center gap-2"
>
<span className="rotate-180">
<LeftArrowTailessIcon/>
</span>
<button className="rotate-180" onClick={() => toggleColumn(title, false)}>
<LeftArrowTailessIcon/>
</button>
<ThreeDotIcon/>

</div>
Expand Down Expand Up @@ -269,9 +278,12 @@ const KanbanDraggableHeader = ({title, items, snapshot, provided, backgroundColo
backgroundColor: string,
provided: DraggableProvided
}) => {

const { toggleColumn } = useKanban();

return (
<>
{title && (
<header
className={"flex flex-row justify-between items-center rounded-lg px-[15px] py-[7px]"}
style={headerStyleChanger(snapshot, backgroundColor)}
Expand Down Expand Up @@ -300,9 +312,12 @@ const KanbanDraggableHeader = ({title, items, snapshot, provided, backgroundColo
className="flex flex-row items-center gap-2"
>
<ThreeDotIcon/>
<LeftArrowTailessIcon/>
<button onClick={() => toggleColumn(title, true)}>
<LeftArrowTailessIcon/>
</button>
</div>
</header>
)}
</>
)
}
Expand All @@ -323,7 +338,7 @@ const KanbanDraggable = ({index,title, items, backgroundColor}: {

return (
<>
{ items.length > 0 &&
{ items &&
<Draggable
key={title}
index={index}
Expand All @@ -339,10 +354,10 @@ const KanbanDraggable = ({index,title, items, backgroundColor}: {
snapshot.isDragging,
provided.draggableProps.style
)}
className="flex flex-col gap-5 w-[325px]"
className="flex flex-col w-[325px]"

>
{ items.length > 0 ?
{ items ?
<>
<KanbanDraggableHeader
title={title}
Expand Down
6 changes: 3 additions & 3 deletions apps/web/lib/features/task/task-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,17 +32,17 @@ export function TaskItem({ task, selected, onClick, className }: Props) {

return (
<div
className={clsxm('flex justify-between items-center', className)}
className={clsxm('flex justify-between items-center overflow-y-auto', className)}
onClick={() => onClick && task && task.status !== 'closed' && onClick(task)}
>
<div
className={clsxm(
'font-normal text-sm',
'font-normal min-w-[19rem] text-sm',
'overflow-hidden text-ellipsis flex-1',
selected && ['font-medium text-primary dark:text-primary-light']
)}
>
<div className="inline-flex items-center mr-2">
<div className="inline-flex items-center mr-2">
<div className="mr-2">
<TaskIssueStatus
showIssueLabels={false}
Expand Down
6 changes: 3 additions & 3 deletions apps/web/lib/features/team-member-cell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export function TaskCell({ row }: { row: any }) {
<TaskInfo
edition={taskEdition}
memberInfo={memberInfo}
className="2xl:w-80 3xl:w-[32rem] w-full lg:w-1/5 lg:px-4 px-2"
className="2xl:w-80 3xl:w-[32rem] !w-full lg:w-1/5 lg:px-4 px-2"
publicTeam={publicTeam}
/>
);
Expand All @@ -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"
/>
);
}
Expand All @@ -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"
/>
);
}
Expand Down
24 changes: 12 additions & 12 deletions apps/web/lib/features/team-members-kanban-view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<IKanban>(kanbanBoardTasks);

Expand Down Expand Up @@ -175,16 +175,24 @@ export const KanbanView = ({ kanbanBoardTasks }: { kanbanBoardTasks: IKanban}) =
>
{(provided: DroppableProvided, snapshot: DroppableStateSnapshot) => (
<div
className={clsxm("flex flex-row justify-center gap-[20px] w-full min-h-[600px] p-[32px] bg-transparent dark:bg-[#181920]", snapshot.isDraggingOver ? "lightblue" : "#F7F7F8")}
className={clsxm("flex flex-row justify-start overflow-x-auto gap-[20px] w-full min-h-[600px] p-[32px] bg-transparent dark:bg-[#181920]", snapshot.isDraggingOver ? "lightblue" : "#F7F7F8")}
ref={provided.innerRef}
{...provided.droppableProps}
>
{columns.length > 0 ?
<>
{columns.map((column: any, index: number) => {
{columns.map((column: string, index: number) => {
return (
<React.Fragment key={index}>
{ items[column].length > 0 ?
{ isColumnCollapse(column) ?
<div className={'order-last'} key={index}>
<EmptyKanbanDroppable
index={index}
title={column}
items={items[column]}
/>
</div>
:
<>
<div className="flex flex-col" key={index}>
<KanbanDraggable
Expand All @@ -199,14 +207,6 @@ export const KanbanView = ({ kanbanBoardTasks }: { kanbanBoardTasks: IKanban}) =
</div>
</div>
</>
:
<div className={'order-last'} key={index}>
<EmptyKanbanDroppable
index={index}
title={column}
items={items[column]}
/>
</div>
}
</React.Fragment>
)
Expand Down
2 changes: 1 addition & 1 deletion apps/web/lib/features/team/user-team-card/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ export function UserTeamCard({ className, active, member, publicTeam = false }:
<TaskInfo
edition={taskEdition}
memberInfo={memberInfo}
className="2xl:w-80 3xl:w-[32rem] w-1/5 lg:px-4 px-2"
className="2xl:w-80 3xl:w-[32rem] w-1/5 lg:px-4 px-2 overflow-y-auto"
publicTeam={publicTeam}
/>
<VerticalSeparator className="ml-2" />
Expand Down
12 changes: 6 additions & 6 deletions apps/web/lib/features/team/user-team-table/user-team-table-header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@ import React from 'react';

function UserTeamTableHeader() {
return (
<div className="flex px-4 text-center items-center pt-4">
<p className="w-1/3 ">Name</p>
<p className="w-2/5 ">Task</p>
<p className="w-1/12 ">Worked on Task</p>
<p className="w-1/4 ">Estimate</p>
<p className="w-28 ">Action</p>
<div className="flex overflow-y-auto px-4 text-center items-center pt-4">
<p className="min-w-[8rem] w-1/3 ">Name</p>
<p className="min-w-[8rem] w-2/5 ">Task</p>
<p className="min-w-[8rem] w-1/12 ">Worked on Task</p>
<p className="min-w-[8rem] w-1/4 ">Estimate</p>
<p className="min-w-[8rem] w-28 ">Action</p>
</div>
);
}
Expand Down
34 changes: 26 additions & 8 deletions apps/web/lib/settings/invitation-table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,33 +23,51 @@ export const InvitationTable = ({ invitations }: { invitations: (IInvitation | I
<table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<thead className="text-xs text-gray-700 uppercase border-b">
<tr>
<th scope="col" className="pl-5 py-3 text-sm font-normal capitalize text-[#B1AEBC]">
<th
scope="col"
className="pl-5 min-w-[20rem] py-3 text-sm font-normal capitalize text-[#B1AEBC]"
>
{t('pages.invite.invitationTable.NAME_AND_EMAIL')}
</th>
<th scope="col" className="text-sm font-normal capitalize py-3 text-[#B1AEBC]">
<th
scope="col"
className="text-sm min-w-[15rem] font-normal capitalize py-3 text-[#B1AEBC]"
>
{t('pages.invite.invitationTable.POSITION')}
</th>
<th scope="col" className="text-sm font-normal capitalize py-3 text-[#B1AEBC]">
<th
scope="col"
className="text-sm min-w-[15rem] font-normal capitalize py-3 text-[#B1AEBC]"
>
{t('pages.invite.invitationTable.DATE_AND_TIME_REQUEST')}
</th>
<th scope="col" className="text-sm font-normal capitalize py-3 text-[#B1AEBC]">
<th
scope="col"
className="text-sm min-w-[15rem] font-normal capitalize py-3 text-[#B1AEBC]"
>
{t('pages.invite.invitationTable.CV_OR_ATTACHMENT')}
</th>
<th scope="col" className="text-sm font-normal capitalize py-3 text-[#B1AEBC]">
<th
scope="col"
className="text-sm min-w-[15rem] font-normal capitalize py-3 text-[#B1AEBC]"
>
{t('common.LINK')}
</th>
<th scope="col" className="text-sm font-normal capitalize py-3 text-[#B1AEBC]">
<th
scope="col"
className="text-sm min-w-[15rem] font-normal capitalize py-3 text-[#B1AEBC]"
>
{t('common.STATUS')}
</th>
<th scope="col" className="text-sm font-normal capitalize py-3 text-[#B1AEBC]"></th>
<th scope="col" className="text-sm font-normal capitalize py-3 text-[#B1AEBC]"></th>
</tr>
</thead>
<tbody className="dark:bg-dark--theme-light">
{currentItems.map((invitation, index) => (
<tr className="bg-white dark:bg-dark--theme-light dark:border-gray-700" key={index}>
<th
scope="row"
className="flex items-center py-4 pl-0 text-gray-900 whitespace-nowrap dark:text-white"
className="flex items-center py-4 pl-0 text-gray-900 whitespace-nowrap dark:text-white"
>
<div
className={clsxm(
Expand Down
Loading
Loading