From ac5ad64c0346cac99de9e6bbd0e45f5abac94a8b Mon Sep 17 00:00:00 2001 From: Arick Bulakali <85836702+NdekoCode@users.noreply.github.com> Date: Sun, 10 Mar 2024 11:06:30 +0200 Subject: [PATCH] Fix/scroll effect (#2294) * fix(web): [kanban] fix horizontal scroll on kanban page * 2277 feature modifications in kanban 2 (#2290) * fix(kanban): working on kanban section * [Fix]: added the kanban create task * [Fix]: added the kanban create task * [Fix]: added the kanban create task * [Fix]: added the kanban create task * [Fix]: added the kanban create task --------- Co-authored-by: Anish --- apps/web/app/[locale]/kanban/page.tsx | 361 ++++++++++++++------------ apps/web/lib/layout/main-layout.tsx | 106 ++++---- 2 files changed, 245 insertions(+), 222 deletions(-) diff --git a/apps/web/app/[locale]/kanban/page.tsx b/apps/web/app/[locale]/kanban/page.tsx index 2029d6e0c..83f149e48 100644 --- a/apps/web/app/[locale]/kanban/page.tsx +++ b/apps/web/app/[locale]/kanban/page.tsx @@ -1,7 +1,11 @@ 'use client'; import { KanbanTabs } from '@app/constants'; -import { useAuthenticateUser, useModal, useOrganizationTeams } from '@app/hooks'; +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'; @@ -11,190 +15,203 @@ import { MainLayout } from 'lib/layout'; import { useState } from 'react'; import { useTranslations } from 'next-intl'; import { useParams } from 'next/navigation'; -import ImageComponent, { ImageOverlapperProps } from 'lib/components/image-overlapper'; +import ImageComponent, { + ImageOverlapperProps +} from 'lib/components/image-overlapper'; import Separator from '@components/ui/separator'; import { clsxm } from '@app/utils'; import HeaderTabs from '@components/pages/main/header-tabs'; -import { AddIcon, SearchNormalIcon, SettingFilterIcon, PeoplesIcon } from 'assets/svg'; -import { Select, SelectContent, SelectItem, SelectTrigger } from '@components/ui/select'; +import { + AddIcon, + SearchNormalIcon, + SettingFilterIcon, + PeoplesIcon +} from 'assets/svg'; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger +} from '@components/ui/select'; import { InviteFormModal } from 'lib/features/team/invite/invite-form-modal'; import { userTimezone } from '@app/helpers'; const Kanban = () => { - const { data, } = useKanban(); + const { data } = useKanban(); - const { activeTeam } = useOrganizationTeams(); - const t = useTranslations(); - const params = useParams<{ locale: string }>(); - const currentLocale = params ? params.locale : null; - const [activeTab, setActiveTab] = useState(KanbanTabs.TODAY); - const breadcrumbPath = [ - { title: JSON.parse(t('pages.home.BREADCRUMB')), href: '/' }, - { title: activeTeam?.name || '', href: '/' }, - { title: t('common.KANBAN'), href: `/${currentLocale}/kanban` } - ]; + const { activeTeam } = useOrganizationTeams(); + const t = useTranslations(); + const params = useParams<{ locale: string }>(); + const currentLocale = params ? params.locale : null; + const [activeTab, setActiveTab] = useState(KanbanTabs.TODAY); + const breadcrumbPath = [ + { title: JSON.parse(t('pages.home.BREADCRUMB')), href: '/' }, + { title: activeTeam?.name || '', href: '/' }, + { title: t('common.KANBAN'), href: `/${currentLocale}/kanban` } + ]; - const activeTeamMembers = activeTeam?.members ? activeTeam.members : []; + const activeTeamMembers = activeTeam?.members ? activeTeam.members : []; - const teamMembers: ImageOverlapperProps[] = []; + const teamMembers: ImageOverlapperProps[] = []; - activeTeamMembers.map((member: any) => { - teamMembers.push({ - id: member.employee.user.id, - url: member.employee.user.imageUrl, - alt: member.employee.user.firstName - }); - }); - const tabs = [ - { name: t('common.TODAY'), value: KanbanTabs.TODAY }, - { name: t('common.YESTERDAY'), value: KanbanTabs.YESTERDAY }, - { name: t('common.TOMORROW'), value: KanbanTabs.TOMORROW } - ]; - const { user } = useAuthenticateUser(); - const { openModal, isOpen, closeModal } = useModal(); - const timezone = userTimezone(); + activeTeamMembers.map((member: any) => { + teamMembers.push({ + id: member.employee.user.id, + url: member.employee.user.imageUrl, + alt: member.employee.user.firstName + }); + }); + const tabs = [ + { name: t('common.TODAY'), value: KanbanTabs.TODAY }, + { name: t('common.YESTERDAY'), value: KanbanTabs.YESTERDAY }, + { name: t('common.TOMORROW'), value: KanbanTabs.TOMORROW } + ]; + const { user } = useAuthenticateUser(); + const { openModal, isOpen, closeModal } = useModal(); + const timezone = userTimezone(); - return ( - <> - -
-
-
-
- - -
-
- -
-
-
-

- {t('common.KANBAN')} {t('common.BOARD')} -

-
- - {`(`} - {timezone.split('(')[1]} - -
- -
- -
- -
+ return ( + <> + +
+
+
+
+ + +
+
+ +
+
+
+

+ {t('common.KANBAN')} {t('common.BOARD')} +

+
+ + {`(`} + {timezone.split('(')[1]} + +
+ +
+ +
+ +
- -
-
-
-
- {tabs.map((tab) => ( -
setActiveTab(tab.value)} - className={`cursor-pointer pt-2.5 px-5 pb-[30px] 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} -
- ))} -
-
- - - -
- -
-
- - - - } - /> -
-
-
- {/*
*/} -
-
- {/** TODO:fetch teamtask based on days */} - {activeTab && ( // add filter for today, yesterday and tomorrow -
- {Object.keys(data).length > 0 ? ( - - ) : ( - - )} -
- )} -
- - - - ); + +
+
+
+
+ {tabs.map((tab) => ( +
setActiveTab(tab.value)} + className={`cursor-pointer pt-2.5 px-5 pb-[30px] 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} +
+ ))} +
+
+ + + +
+ +
+
+ + + + } + /> +
+
+
+ {/*
*/} +
+ {/** TODO:fetch teamtask based on days */} + {activeTab && ( // add filter for today, yesterday and tomorrow +
+ {Object.keys(data).length > 0 ? ( + + ) : ( + + )} +
+ )} + + + + ); }; export default withAuthentication(Kanban, { displayName: 'Kanban' }); diff --git a/apps/web/lib/layout/main-layout.tsx b/apps/web/lib/layout/main-layout.tsx index 4aa4e1fb8..97c88d7f3 100644 --- a/apps/web/lib/layout/main-layout.tsx +++ b/apps/web/lib/layout/main-layout.tsx @@ -9,61 +9,67 @@ import { useRecoilValue } from 'recoil'; import { fullWidthState } from '@app/stores/fullWidth'; type Props = PropsWithChildren<{ - title?: string; - showTimer?: boolean; - publicTeam?: boolean; - notFound?: boolean; - className?: string; - childrenClassName?: string; - footerClassName?: string; + title?: string; + showTimer?: boolean; + publicTeam?: boolean; + notFound?: boolean; + className?: string; + childrenClassName?: string; + footerClassName?: string; }>; export function MainLayout({ - children, - title, - showTimer, - publicTeam, - notFound, - className, - childrenClassName, - footerClassName = '' + children, + title, + showTimer, + publicTeam, + notFound, + className, + childrenClassName, + footerClassName = '' }: Props) { - const fullWidth = useRecoilValue(fullWidthState); - return ( -
- + const fullWidth = useRecoilValue(fullWidthState); + return ( +
+ - - + + -
-
{children}
+
+
+ {children} +
- - -
- -
- -
- ); + + +
+ +
+ +
+ ); }