Skip to content

Commit

Permalink
fix: fix the scroll bar
Browse files Browse the repository at this point in the history
  • Loading branch information
CREDO23 committed Sep 10, 2024
1 parent e41b9a5 commit d1aca38
Show file tree
Hide file tree
Showing 6 changed files with 120 additions and 130 deletions.
57 changes: 30 additions & 27 deletions apps/web/app/[locale]/kanban/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,8 @@
import { KanbanTabs } from '@app/constants';
import { useAuthenticateUser, useModal, useOrganizationTeams } from '@app/hooks';
import { useKanban } from '@app/hooks/features/useKanban';
import KanbanBoardSkeleton from '@components/shared/skeleton/KanbanBoardSkeleton';
import { withAuthentication } from 'lib/app/authenticator';
import { Breadcrumb, Container } from 'lib/components';
import { KanbanView } from 'lib/features/team-members-kanban-view';
import { MainLayout } from 'lib/layout';
import { useEffect, useMemo, useState } from 'react';
import { useTranslations } from 'next-intl';
Expand All @@ -32,6 +30,8 @@ import { useRecoilValue } from 'recoil';
import { fullWidthState } from '@app/stores/fullWidth';
import { CircleIcon } from 'lucide-react';
import { XMarkIcon } from '@heroicons/react/20/solid';
import KanbanBoardSkeleton from '@components/shared/skeleton/KanbanBoardSkeleton';
import { KanbanView } from 'lib/features/team-members-kanban-view';

const Kanban = () => {
const {
Expand Down Expand Up @@ -105,9 +105,9 @@ const Kanban = () => {
}, [breadcrumbPath, currentLocale, employee]);
return (
<>
<MainLayout showTimer={isTrackingEnabled} className="h-full">
<Container fullWidth={fullWidth}>
<div className="flex dark:bg-dark-high h-14 items-center justify-between">
<MainLayout childrenClassName="bg-white" showTimer={isTrackingEnabled} className="h-full overflow-hidden">
<Container className="pt-10 space-y-6" fullWidth={fullWidth}>
<div className="flex dark:bg-dark-high h-10 items-center justify-between">
<div className="flex justify-center items-center gap-8 h-10">
<PeoplesIcon className="text-dark dark:text-[#6b7280] h-6 w-6" />
<Breadcrumb paths={breadcrumbPath} className="text-sm flex items-center justify-center" />
Expand All @@ -120,32 +120,33 @@ const Kanban = () => {
<h1 className="text-4xl font-semibold ">
{t('common.KANBAN')} {t('common.BOARD')}
</h1>
<div className="flex h-full border items-end space-x-2">
<strong className="text-gray-400">
<div className="flex h-12 items-center space-x-2">
<strong className="text-gray-400 flex items-center justify-center h-full">
{`(`}
{timezone.split('(')[1]}
</strong>
<div className="">
<Separator />
</div>
<div className="border p-1 border-red-600 flex items-center justify-center bg-red-600">
<div className=" p-1 h-full flex items-center justify-center">
<ImageComponent onAvatarClickRedirectTo="kanbanTasks" images={teamMembers} />
</div>
<div className="">
<Separator />
</div>

<button
onClick={openModal}
className="p-2 rounded-full border-2 border-[#0000001a] dark:border-white"
>
{/* <AddIcon width={24} height={24} className={'dark:stroke-white'} /> */}
<AddIcon className="w-6 h-6 text-foreground" />
</button>
<div className="flex h-full items-center justify-center">
<button
onClick={openModal}
className="p-2 rounded-full border-2 border-[#0000001a] dark:border-white"
>
{/* <AddIcon width={24} height={24} className={'dark:stroke-white'} /> */}
<AddIcon className="w-6 h-6 text-foreground" />
</button>
</div>
</div>
</div>
<div className="relative flex flex-col lg:flex-row justify-between items-center dark:bg-dark-high">
<div className="flex flex-row">
<div className="relative h-16 flex flex-col lg:flex-row justify-between items-center dark:bg-dark-high">
<div className="flex h-full">
{tabs.map((tab) => (
<div
key={tab.name}
Expand All @@ -164,7 +165,7 @@ const Kanban = () => {
</div>
))}
</div>
<div className="flex space-x-2">
<div className="flex gap-2 items-center">
<div className="input-border rounded-xl h-11 bg-[#F2F2F2] dark:bg-dark--theme-light">
<EpicPropertiesDropdown
onValueChange={(_, values) => setEpics(values || [])}
Expand All @@ -173,8 +174,8 @@ const Kanban = () => {
/>
</div>
{/* <div className="input-border rounded-xl h-11 bg-[#F2F2F2] dark:bg-dark--theme-light"> */}
<div className="relative">
<div className="bg-[#F2F2F2] dark:bg-dark--theme-light absolute flex items-center p-2 justify-between w-40 h-11 border input-border rounded-xl">
<div className="h-11">
<div className="bg-[#F2F2F2] dark:bg-dark--theme-light flex items-center p-2 justify-between w-40 border input-border rounded-xl">
<span className="flex">
<div
className="h-6 w-6 p-1.5 rounded-md"
Expand Down Expand Up @@ -215,21 +216,21 @@ const Kanban = () => {
/>
</div>
{/* </div> */}
<div className="input-border rounded-xl h-11 bg-[#F2F2F2] dark:bg-dark--theme-light">
<div className="input-border flex items-center rounded-xl h-11 bg-[#F2F2F2] dark:bg-dark--theme-light">
<TaskLabelsDropdown
onValueChange={(_, values) => setLabels(values || [])}
className="lg:min-w-[140px]"
multiple={true}
/>
</div>
<div className="input-border rounded-xl h-11 bg-[#F2F2F2] dark:bg-dark--theme-light">
<div className="input-border flex items-center rounded-xl h-11 bg-[#F2F2F2] dark:bg-dark--theme-light">
<TaskPropertiesDropdown
onValueChange={(_, values) => setPriority(values || [])}
className="lg:min-w-[140px]"
multiple={true}
/>
</div>
<div className="input-border rounded-xl h-11 bg-[#F2F2F2] dark:bg-dark--theme-light">
<div className="input-border flex items-center rounded-xl h-11 bg-[#F2F2F2] dark:bg-dark--theme-light">
<TaskSizesDropdown
onValueChange={(_, values) => setSizes(values || [])}
className="lg:min-w-[140px]"
Expand All @@ -239,14 +240,16 @@ const Kanban = () => {
<div className="">
<Separator />
</div>
<KanbanSearch setSearchTasks={setSearchTasks} searchTasks={searchTasks} />
<div className="h-11 !bg-transparent">
<KanbanSearch setSearchTasks={setSearchTasks} searchTasks={searchTasks} />
</div>
</div>
</div>
</Container>
<div className="">
<div className="w-full border h-[calc(100vh-26.125rem)]">
{/** TODO:fetch teamtask based on days */}
{activeTab && ( // add filter for today, yesterday and tomorrow
<div className="">
<div className=" w-full h-full">
{Object.keys(data).length > 0 ? (
<KanbanView isLoading={isLoading} kanbanBoardTasks={data} />
) : (
Expand Down
47 changes: 26 additions & 21 deletions apps/web/lib/components/Kanban.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@ import { Modal } from './modal';
import CreateTaskModal from '@components/pages/kanban/create-task-modal';
import Image from 'next/image';
import EditStatusModal from '@components/pages/kanban/edit-status-modal';
import { ScrollArea } from '@components/ui/scroll-bar';
import { ScrollBar } from '@components/ui/scroll-area';

const grid = 8;

Expand Down Expand Up @@ -441,7 +443,7 @@ const KanbanDraggable = ({
//

return (
<>
<div className="w-full h-full">
{title && (
<Draggable key={title} index={index} draggableId={title}>
{(provided: DraggableProvided, snapshot: DraggableStateSnapshot) => (
Expand All @@ -450,11 +452,11 @@ const KanbanDraggable = ({
{...provided.draggableProps}
{...provided.dragHandleProps}
// style={getItemStyle(snapshot.isDragging, provided.draggableProps.style)}
className="relative flex flex-col px-2 h-fit w-[355px]"
className="relative h-full flex flex-col px-2 overflow-hidden w-[355px]"
>
{title ? (
<>
<div>
<div className="h-full w-full">
<div className=" h-12">
<KanbanDraggableHeader
title={title}
icon={icon}
Expand All @@ -467,23 +469,26 @@ const KanbanDraggable = ({
backgroundColor={backgroundColor}
/>
</div>
<div className="flex flex-col ">
<KanbanDroppable
isLoading={isLoading}
title={title}
droppableId={title}
type={'TASK'}
content={items}
/>
<button
onClick={() => openModal()}
className="flex flex-row items-center text-sm not-italic font-semibold rounded-2xl gap-4 bg-white dark:bg-dark--theme-light p-4"
>
<AddIcon className=" h-5 w-5" />
<p>{t('common.CREATE_TASK')}</p>
</button>
<div className="flex h-[calc(100%-3rem)] overflow-hidden flex-col ">
<ScrollArea className="w-full h-full">
<KanbanDroppable
isLoading={isLoading}
title={title}
droppableId={title}
type={'TASK'}
content={items}
/>
<button
onClick={() => openModal()}
className="flex flex-row items-center text-sm not-italic w-full font-semibold rounded-2xl gap-4 bg-white dark:bg-dark--theme-light p-4"
>
<AddIcon className=" h-5 w-5" />
<p>{t('common.CREATE_TASK')}</p>
</button>
<ScrollBar className="-pr-20" />
</ScrollArea>
</div>
</>
</div>
) : null}
</div>
)}
Expand All @@ -492,7 +497,7 @@ const KanbanDraggable = ({
<Modal isOpen={isOpen} closeModal={closeModal}>
<CreateTaskModal onClose={closeModal} title={title} initEditMode={false} task={null} tasks={[]} />
</Modal>
</>
</div>
);
};

Expand Down
6 changes: 3 additions & 3 deletions apps/web/lib/components/image-overlapper.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -232,13 +232,13 @@ export default function ImageOverlapper({
width:
imageLength == 1 ? 40 : isMoreThanDisplay ? widthCalculate.length * 33 : widthCalculate.length * 35
}}
className="relative "
className="relative h-10 "
>
{firstArray.map((image, index) => (
<Link key={index} href={onRedirect(image)}>
<div
className="absolute hover:!z-20 transition-all hover:scale-110"
style={{ zIndex: index + 1, left: index * 30, top: isMoreThanDisplay ? -8 : -16 }}
className="absolute top-0 hover:!z-20 transition-all hover:scale-110"
style={{ zIndex: index + 1, left: index * 30 }}
>
<Tooltip
label={image.alt ?? 'untitled'}
Expand Down
114 changes: 49 additions & 65 deletions apps/web/lib/features/team-members-kanban-view.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -200,71 +200,55 @@ export const KanbanView = ({ kanbanBoardTasks, isLoading }: { kanbanBoardTasks:
if (!enabled) return null; // ['open','close']

return (
<>
<DragDropContext onDragEnd={onDragEnd}>
{Array.isArray(columns) && columns.length > 0 && (
<Droppable droppableId="droppable" type="COLUMN" direction="horizontal">
{(provided: DroppableProvided, snapshot: DroppableStateSnapshot) => (
<div className="flex flex-col h-full bg-red-600 justify-between w-full ">
<div
className={clsxm(
'flex flex-row h-full w-full p-[32px] bg-transparent dark:bg-[#181920]',
snapshot.isDraggingOver ? 'lightblue' : '#F7F7F8',
!fullWidth && 'x-container pl-0'
)}
ref={provided.innerRef}
{...provided.droppableProps}
>
{/* {columns.length > 0 ? (
<> */}
{columns?.map((column: any, index: number) => {
return (
<React.Fragment key={index}>
<div className="" key={index}>
{isColumnCollapse(column.name) ? (
<EmptyKanbanDroppable
index={index}
title={column.name}
status={column}
setColumn={setColumn}
items={items[column.name]}
backgroundColor={getHeaderBackground(
kanbanColumns,
column.name
)}
/>
) : (
<>
<KanbanDraggable
key={index}
status={column}
setColumn={setColumn}
isLoading={isLoading}
index={index}
icon={column.icon}
addNewTask={addNewTask}
title={column.name}
items={items[column.name]}
backgroundColor={getHeaderBackground(
kanbanColumns,
column.name
)}
/>
</>
)}
</div>
</React.Fragment>
);
})}
{/* </>
) : null} */}
<>{provided.placeholder}</>
</div>
<DragDropContext onDragEnd={onDragEnd}>
{Array.isArray(columns) && columns.length > 0 && (
<Droppable droppableId="droppable" type="COLUMN" direction="horizontal">
{(provided: DroppableProvided, snapshot: DroppableStateSnapshot) => (
<div className="flex bg-[#F2F2F2] dark:bg-dark--theme-light flex-col over overflow-hidden h-full justify-between w-full ">
<div
className={clsxm(
'flex flex-row h-full w-full p-5 bg-transparent dark:bg-[#181920] overflow-y-hidden scrollbar-hide overflow-x-auto',
snapshot.isDraggingOver ? 'lightblue' : '#F7F7F8',
!fullWidth && 'x-container pl-0 '
)}
ref={provided.innerRef}
{...provided.droppableProps}
>
{columns?.map((column: any, index: number) => {
return (
<div key={index} className="w-min h-full">
{isColumnCollapse(column.name) ? (
<EmptyKanbanDroppable
index={index}
title={column.name}
status={column}
setColumn={setColumn}
items={items[column.name]}
backgroundColor={getHeaderBackground(kanbanColumns, column.name)}
/>
) : (
<KanbanDraggable
key={index}
status={column}
setColumn={setColumn}
isLoading={isLoading}
index={index}
icon={column.icon}
addNewTask={addNewTask}
title={column.name}
items={items[column.name]}
backgroundColor={getHeaderBackground(kanbanColumns, column.name)}
/>
)}
</div>
);
})}
<>{provided.placeholder}</>
</div>
)}
</Droppable>
)}
</DragDropContext>
</>
</div>
)}
</Droppable>
)}
</DragDropContext>
);
};
Loading

0 comments on commit d1aca38

Please sign in to comment.