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

Fix the Kanban page scrollbar #3004

Closed
wants to merge 2 commits into from
Closed

Fix the Kanban page scrollbar #3004

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e41b9a5
fix: fix overlaping in the main layout
CREDO23 Sep 8, 2024
e4564aa
fix: fix the scroll bar
CREDO23 Sep 10, 2024
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
278 changes: 129 additions & 149 deletions apps/web/app/[locale]/kanban/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,9 @@
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, Divider } from 'lib/components';
import { KanbanView } from 'lib/features/team-members-kanban-view';
import { Footer, MainLayout } from 'lib/layout';
import { Breadcrumb, Container } from 'lib/components';
import { MainLayout } from 'lib/layout';
import { useEffect, useMemo, useState } from 'react';
import { useTranslations } from 'next-intl';
import { useParams, useSearchParams } from 'next/navigation';
Expand All @@ -32,8 +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 Head from 'next/head';
import { clsxm } from '@app/utils';
import KanbanBoardSkeleton from '@components/shared/skeleton/KanbanBoardSkeleton';
import { KanbanView } from 'lib/features/team-members-kanban-view';

const Kanban = () => {
const {
Expand Down Expand Up @@ -107,163 +105,151 @@ const Kanban = () => {
}, [breadcrumbPath, currentLocale, employee]);
return (
<>
<Head>
<title>
{t('common.KANBAN')} {t('common.BOARD')}
</title>
</Head>
<MainLayout
showTimer={isTrackingEnabled}
footerClassName="hidden"
// footerClassName={clsxm("fixed flex flex-col items-end justify-center bottom-0 z-50 bg-white dark:bg-dark-high",!fullWidth && 'left-0 right-0')}
className="h-[calc(100vh-_22px)]"
>
<div className="h-[263.4px] z-10 bg-white dark:bg-dark-high fixed w-full"></div>
<div
className={
'fixed top-20 flex flex-col border-b-[1px] dark:border-[#26272C] z-10 mx-[0px] w-full bg-white dark:bg-dark-high'
}
>
<Container fullWidth={fullWidth}>
<div className="flex bg-white dark:bg-dark-high flex-row items-start justify-between mt-12">
<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" />
</div>
<div className="flex h-10 w-max items-center justify-center gap-1">
<HeaderTabs kanban={true} linkAll={true} />
</div>
<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" />
</div>
<div className="flex justify-between items-center mt-10 bg-white dark:bg-dark-high">
<h1 className="text-4xl font-semibold ">
{t('common.KANBAN')} {t('common.BOARD')}
</h1>
<div className="flex w-fit items-center space-x-2">
<strong className="text-gray-400">
{`(`}
{timezone.split('(')[1]}
</strong>
<div className="mt-1">
<Separator />
</div>
<div className="flex h-12 w-max items-center justify-center gap-1">
<HeaderTabs kanban={true} linkAll={true} />
</div>
</div>
<div className="flex h-14 justify-between items-center dark:bg-dark-high">
<h1 className="text-4xl font-semibold ">
{t('common.KANBAN')} {t('common.BOARD')}
</h1>
<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=" p-1 h-full flex items-center justify-center">
<ImageComponent onAvatarClickRedirectTo="kanbanTasks" images={teamMembers} />
<div className="mt-1">
<Separator />
</div>

</div>
<div className="">
<Separator />
</div>
<div className="flex h-full items-center justify-center">
<button
onClick={openModal}
className="p-2 rounded-full border-2 border-[#0000001a] dark:border-white"
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 className="relative flex flex-col lg:flex-row justify-between items-center pt-10 bg-white dark:bg-dark-high">
<div className="flex flex-row">
{tabs.map((tab) => (
<div
key={tab.name}
onClick={() => setActiveTab(tab.value)}
className={`cursor-pointer pt-2.5 px-5 pb-[30px] text-base font-semibold ${activeTab === tab.value
</div>
<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}
onClick={() => setActiveTab(tab.value)}
className={`cursor-pointer px-5 text-base font-semibold ${
activeTab === tab.value
? 'border-b-[#3826A6] text-[#3826A6] dark:text-white dark:border-b-white'
: 'border-b-white dark:border-b-[#191A20] dark:text-white text-[#282048]'
}`}
style={{
borderBottomWidth: '3px',
borderBottomStyle: 'solid'
}}
>
{tab.name}
</div>
))}
}`}
style={{
borderBottomWidth: '3px',
borderBottomStyle: 'solid'
}}
>
{tab.name}
</div>
))}
</div>
<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 || [])}
className="lg:min-w-[140px] pt-[3px] mt-4 mb-2 lg:mt-0"
multiple={true}
/>
</div>
<div className="flex space-x-2 mt-5 lg:mt-0">
<div className="input-border rounded-xl h-11 bg-[#F2F2F2] dark:bg-dark--theme-light">
<EpicPropertiesDropdown
onValueChange={(_, values) => setEpics(values || [])}
className="lg:min-w-[140px] pt-[3px] mt-4 mb-2 lg:mt-0"
multiple={true}
/>
{/* <div className="input-border rounded-xl h-11 bg-[#F2F2F2] dark:bg-dark--theme-light"> */}
<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"
style={{
backgroundColor: issues.bgColor ?? 'transparent'
}}
>
{issues.icon ?? <CircleIcon className="h-3 w-3" />}
</div>
<p>{issues.name}</p>
</span>
{issues.value && (
<div
onClick={() =>
setIssues({
name: 'Issues',
icon: null,
bgColor: '',
value: ''
})
}
className="w-5 h-5 z-50 p-0.5 cursor-pointer"
>
<XMarkIcon className="h-4 w-4 dark:text-white" />
</div>
)}
</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">
<span className="flex">
<div
className="h-6 w-6 p-1.5 rounded-md mr-1"
style={{
backgroundColor: issues.bgColor ?? 'transparent'
}}
>
{issues.icon ?? <CircleIcon className="h-3 w-3" />}
</div>
<p>{issues.name}</p>
</span>
{issues.value && (
<div
onClick={() =>
setIssues({
name: 'Issues',
icon: null,
bgColor: '',
value: ''
})
}
className="w-5 h-5 z-50 p-0.5 cursor-pointer"
>
<XMarkIcon className="h-4 w-4 dark:text-white" />
</div>
)}
</div>

<StatusDropdown
taskStatusClassName={'w-40 bg-red-500 h-10 opacity-0'}
showIssueLabels={true}
items={items}
value={issues}
onChange={(e) => {
setIssues(items.find((v) => v.name == e) as TStatusItem);
}}
issueType="issue"
/>
</div>
{/* </div> */}
<div className="input-border rounded-xl h-11 bg-[#F2F2F2] dark:bg-dark--theme-light">
<TaskLabelsDropdown
onValueChange={(_, values) => setLabels(values || [])}
className="lg:min-w-[140px] pt-[3px] mt-4 mb-2 lg:mt-0"
multiple={true}
/>
</div>
<div className="input-border rounded-xl h-11 bg-[#F2F2F2] dark:bg-dark--theme-light">
<TaskPropertiesDropdown
onValueChange={(_, values) => setPriority(values || [])}
className="lg:min-w-[140px] pt-[3px] mt-4 mb-2 lg:mt-0"
multiple={true}
/>
</div>
<div className="input-border rounded-xl h-11 bg-[#F2F2F2] dark:bg-dark--theme-light">
<TaskSizesDropdown
onValueChange={(_, values) => setSizes(values || [])}
className="lg:min-w-[140px] pt-[3px] mt-4 mb-2 lg:mt-0"
multiple={true}
/>
</div>
<div className="mt-1">
<Separator />
</div>
<StatusDropdown
taskStatusClassName={'w-40 bg-red-500 h-10 opacity-0'}
showIssueLabels={true}
items={items}
value={issues}
onChange={(e) => {
setIssues(items.find((v) => v.name == e) as TStatusItem);
}}
issueType="issue"
/>
</div>
{/* </div> */}
<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 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 flex items-center rounded-xl h-11 bg-[#F2F2F2] dark:bg-dark--theme-light">
<TaskSizesDropdown
onValueChange={(_, values) => setSizes(values || [])}
className="lg:min-w-[140px]"
multiple={true}
/>
</div>
<div className="">
<Separator />
</div>
<div className="h-11 !bg-transparent">
<KanbanSearch setSearchTasks={setSearchTasks} searchTasks={searchTasks} />
</div>
</div>
{/* <div className="h-20 w-full bg-red-500/50"></div> */}
</Container>
</div>
<div className="mt-[256px] mb-24 ">
</div>
</Container>
<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>
<div className=" w-full h-full">
{Object.keys(data).length > 0 ? (
<KanbanView isLoading={isLoading} kanbanBoardTasks={data} />
) : (
Expand All @@ -273,12 +259,6 @@ const Kanban = () => {
)}
</div>
</MainLayout>
<div className="bg-white dark:bg-[#1e2025] w-screen z-[5000] fixed bottom-0">
<Divider />
<Footer
className={clsxm(' justify-between w-full px-0 mx-auto', fullWidth ? 'px-8' : 'x-container')}
/>
</div>
<InviteFormModal open={isOpen && !!user?.isEmailVerified} closeModal={closeModal} />
</>
);
Expand Down
6 changes: 5 additions & 1 deletion apps/web/components/pages/main/header-tabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,11 @@ const HeaderTabs = ({ linkAll, kanban = false }: { linkAll: boolean; kanban?: bo
return (
<>
{options.map(({ label, icon: Icon, view: optionView }, index) => (
<Tooltip key={label} label={t(`common.${label}` as DottedLanguageObjectStringPaths)} placement="top-start">
<Tooltip
key={label}
label={t(`common.${label}` as DottedLanguageObjectStringPaths)}
placement="top-start"
>
<LinkWrapper isRoute={!!links[index]} href={links[index]}>
<button
className={clsxm(
Expand Down
Loading
Loading