Skip to content

Commit

Permalink
2371 bug home page fixes (#2377)
Browse files Browse the repository at this point in the history 
* [Home]: fix the header issues

* [Home]: fix the header issues

* [Home]: fix the header issues

* Added translation and tooltips
  • Loading branch information
@Anishali2
Anishali2 authored Apr 19, 2024
1 parent 318d40e commit 0308b06
Show file tree
Hide file tree
Showing 25 changed files with 270 additions and 191 deletions.
1 change: 1 addition & 0 deletions .cspell.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
"Accordian",
"adipiscing",
"aliqua",
"tblr",
"amet",
"Andross",
"animatable",
Expand Down
25 changes: 16 additions & 9 deletions apps/web/app/[locale]/kanban/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ 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 { Breadcrumb, Container, Divider } from 'lib/components';
import { KanbanView } from 'lib/features/team-members-kanban-view';
import { MainLayout } from 'lib/layout';
import { Footer, MainLayout } from 'lib/layout';
import { useState } from 'react';
import { useTranslations } from 'next-intl';
import { useParams } from 'next/navigation';
Expand All @@ -33,6 +33,7 @@ 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';

const Kanban = () => {
const {
Expand Down Expand Up @@ -93,13 +94,14 @@ const Kanban = () => {
</Head>
<MainLayout
showTimer={isTrackingEnabled}
footerClassName="fixed bottom-0 z-50 bg-white dark:bg-dark--theme"
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--theme fixed w-full"></div>
<div className={'fixed top-20 flex flex-col z-10 mx-[0px] w-full bg-white dark:bg-dark--theme'}>
<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--theme flex-row items-start justify-between mt-12">
<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" />
Expand All @@ -108,7 +110,7 @@ const Kanban = () => {
<HeaderTabs kanban={true} linkAll={true} />
</div>
</div>
<div className="flex justify-between items-center mt-10 bg-white dark:bg-dark--theme">
<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>
Expand All @@ -134,7 +136,7 @@ const Kanban = () => {
</button>
</div>
</div>
<div className="relative flex flex-col lg:flex-row justify-between items-center pt-10 bg-white dark:bg-dark--theme">
<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
Expand Down Expand Up @@ -235,7 +237,7 @@ const Kanban = () => {
{/* <div className="h-20 w-full bg-red-500/50"></div> */}
</Container>
</div>
<div className="mt-[256px] mb-24">
<div className="mt-[256px] mb-24 ">
{/** TODO:fetch teamtask based on days */}
{activeTab && ( // add filter for today, yesterday and tomorrow
<div>
Expand All @@ -248,6 +250,11 @@ 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
64 changes: 40 additions & 24 deletions apps/web/app/[locale]/page-component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ import { useOrganizationTeams } from '@app/hooks';
import { clsxm } from '@app/utils';
import NoTeam from '@components/pages/main/no-team';
import { withAuthentication } from 'lib/app/authenticator';
import { Breadcrumb, Card } from 'lib/components';
import { Breadcrumb, Card, Divider } from 'lib/components';
import { AuthUserTaskInput, TeamInvitations, TeamMembers, Timer, UnverifiedEmail } from 'lib/features';
import { MainHeader, MainLayout } from 'lib/layout';
import { Footer, MainLayout } from 'lib/layout';
import { IssuesView } from '@app/constants';
import { useNetworkState } from '@uidotdev/usehooks';
import Offline from '@components/pages/offline';
Expand Down Expand Up @@ -59,29 +59,45 @@ function MainPage() {
}
return (
<>
<MainLayout>
<ChatwootWidget />
<MainHeader className="!pb-0" fullWidth={fullWidth}>
<div className="flex flex-row items-start 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={breadcrumb} className="text-sm" />
<div className="flex flex-col h-screen justify-between">
<div className="flex-grow">
<MainLayout className="h-auto" footerClassName={clsxm(' hidden')}>
<ChatwootWidget />
<div className="pt-3 pb-4 ">
{/* <Container className="mx-0 " fullWidth={fullWidth}> */}
<div className="bg-white sticky z-50 border-b-[0.125rem] dark:border-[#26272C] top-[91px] dark:bg-dark-high">
<div className={clsxm('bg-white dark:bg-dark-high ', !fullWidth && 'x-container')}>
<div className="mx-8-container pt-9 !px-0 flex flex-row items-start 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={breadcrumb} className="text-sm" />
</div>
<div className="flex h-10 w-max items-center justify-center gap-1">
<HeaderTabs linkAll={false} />
</div>
</div>
<div className="mx-8-container mb-1">
<UnverifiedEmail />
<TeamInvitations />
{isTeamMember ? (
<TaskTimerSection isTrackingEnabled={isTrackingEnabled} />
) : null}
</div>
<TeamMemberHeader view={view} />
</div>
</div>
{/* </Container> */}
{isTeamMember ? <TeamMembers kanbanView={view} /> : <NoTeam />}
</div>
<div className="flex h-10 w-max items-center justify-center gap-1">
<HeaderTabs linkAll={false} />
</div>
</div>

<UnverifiedEmail />
<TeamInvitations />
{isTeamMember ? <TaskTimerSection isTrackingEnabled={isTrackingEnabled} /> : null}
<TeamMemberHeader view={view} />
</MainHeader>

{/* <div className={`z-50 bg-white dark:bg-[#191A20] `}> */}
{isTeamMember ? <TeamMembers kanbanView={view} /> : <NoTeam />}
</MainLayout>

</MainLayout>
</div>
<div className="bg-white dark:bg-transparent ">
<Divider />
<Footer
className={clsxm('justify-between w-full px-0 mx-auto', fullWidth ? 'px-8' : 'x-container')}
/>
</div>
</div>
<Analytics />
</>
);
Expand Down
135 changes: 74 additions & 61 deletions apps/web/components/ui/data-table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {

import { Table, TableHeader, TableRow, TableHead, TableCell, TableBody, TableFooter } from './table';
import { Tooltip } from 'lib/components';
import { clsxm } from '@app/utils';

interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[];
Expand Down Expand Up @@ -48,6 +49,7 @@ function DataTable<TData, TValue>({ columns, data, footerRows, isHeader }: DataT
// Let's set up our default column filter UI
size: 20
},

enableRowSelection: true,
onRowSelectionChange: setRowSelection,
onSortingChange: setSorting,
Expand All @@ -60,74 +62,85 @@ function DataTable<TData, TValue>({ columns, data, footerRows, isHeader }: DataT
getFacetedRowModel: getFacetedRowModel(),
getFacetedUniqueValues: getFacetedUniqueValues()
});

return (
<Table className="border-transparent mt-0 w-full rounded-2xl">
{isHeader && (
<TableHeader className=" border-b-[3px] bg-white border-b-[#FFFFFF14] ">
{table.getHeaderGroups().map((headerGroup) => (
<TableRow className="hover:bg-transparent h-[74px] border-none" key={headerGroup.id}>
{headerGroup.headers.map((header, index) => {
const tooltip: any = header.column.columnDef;
const isTooltip: any = flexRender(tooltip.tooltip, header.getContext());
return (
<TableHead
<>
<Table className="border-transparent mt-0 w-full rounded-2xl">
{isHeader && (
<TableHeader className="">
{table.getHeaderGroups().map((headerGroup) => (
<TableRow className="hover:bg-transparent h-[74px] border-none" key={headerGroup.id}>
{headerGroup.headers.map((header, index) => {
const tooltip: any = header.column.columnDef;
const isTooltip: any = flexRender(tooltip.tooltip, header.getContext());
return (
<TableHead
style={{
textAlign: index === 0 ? 'left' : 'center'
}}
className="!w-40 text-base"
key={header.id}
>
<Tooltip label={isTooltip as string} className="" enabled={!!isTooltip}>
<div className="">
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.header,
header.getContext()
)}
</div>
</Tooltip>
</TableHead>
);
})}
</TableRow>
))}
</TableHeader>
)}
<div className="mt-8 "></div>
<TableBody className="divide-y h-40 overflow-y-auto divide-gray-200 bg-light--theme-light dark:bg-dark--theme-light">
{table.getRowModel().rows?.length ? (
table.getRowModel().rows.map((row, i) => (
<TableRow
key={row.id}
data-state={row.getIsSelected() && 'selected'}
className={clsxm(
'my-4 hover:bg-[#00000008] dark:hover:bg-[#26272C]/40',
i == 1 && 'max-w-[615px]'
)}
>
{row.getVisibleCells().map((cell, index) => (
<TableCell
key={cell.id}
style={{
textAlign: index === 0 ? 'left' : 'center'
}}
className="!w-40 text-base"
key={header.id}
// className="!w-36"
className="my-4 !w-fit xl:!w-fit border-r border-b border-[#00000008] border-[0.125rem] dark:border-[#26272C] "
>
<Tooltip label={isTooltip as string} enabled={!!isTooltip}>
{header.isPlaceholder
? null
: flexRender(header.column.columnDef.header, header.getContext())}
</Tooltip>
</TableHead>
);
})}
</TableRow>
))}
</TableHeader>
)}
<div className="mt-8"></div>
<TableBody className="divide-y divide-gray-200 bg-light--theme-light dark:bg-dark--theme-light">
{table.getRowModel().rows?.length ? (
table.getRowModel().rows.map((row) => (
<TableRow
key={row.id}
data-state={row.getIsSelected() && 'selected'}
className="my-4 hover:bg-[#00000008] dark:hover:bg-[#26272C]/40"
>
{row.getVisibleCells().map((cell, index) => (
<TableCell
key={cell.id}
style={{
textAlign: index === 0 ? 'left' : 'center'
}}
// className="!w-36"
className="my-4 !w-fit xl:!w-fit border-r border-b border-[#00000008] border-[0.125rem] dark:border-[#26272C] "
>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</TableCell>
))}
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</TableCell>
))}
</TableRow>
))
) : (
<TableRow>
<TableCell colSpan={columns.length} className="h-24 text-center">
No results.
</TableCell>
</TableRow>
))
) : (
<TableRow>
<TableCell colSpan={columns.length} className="h-24 text-center">
No results.
</TableCell>
</TableRow>
)}
</TableBody>
{footerRows && footerRows?.length > 0 && (
<TableFooter className="bg-gray-50 dark:bg-gray-800">
{footerRows.map((row, index) => (
<TableRow key={`footer-row-${index}}`}>{row}</TableRow>
))}
</TableFooter>
)}
</TableBody>
{footerRows && footerRows?.length > 0 && (
<TableFooter className="bg-gray-50 dark:bg-gray-800">
{footerRows.map((row, index) => (
<TableRow key={`footer-row-${index}}`}>{row}</TableRow>
))}
</TableFooter>
)}
</Table>
</Table>
</>
);
}

Expand Down
9 changes: 7 additions & 2 deletions apps/web/lib/features/team-members-kanban-view.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { useTaskStatus } from '@app/hooks';
import { useKanban } from '@app/hooks/features/useKanban';
import { ITaskStatusItemList, ITeamTask } from '@app/interfaces';
import { IKanban } from '@app/interfaces/IKanban';
import { fullWidthState } from '@app/stores/fullWidth';
import { clsxm } from '@app/utils';
import KanbanDraggable, { EmptyKanbanDroppable } from 'lib/components/Kanban';
import React from 'react';
Expand All @@ -14,6 +15,7 @@ import {
DroppableProvided,
DroppableStateSnapshot
} from 'react-beautiful-dnd';
import { useRecoilValue } from 'recoil';

export const KanbanView = ({ kanbanBoardTasks, isLoading }: { kanbanBoardTasks: IKanban; isLoading: boolean }) => {
const {
Expand All @@ -31,6 +33,8 @@ export const KanbanView = ({ kanbanBoardTasks, isLoading }: { kanbanBoardTasks:
return { id: columnInfo?.id, name: key, icon: columnInfo ? columnInfo.fullIconUrl : '',color: columnInfo?.color };
})
);
const fullWidth = useRecoilValue(fullWidthState);

const { taskStatus: ts } = useTaskStatus();
const reorderTask = (list: ITeamTask[], startIndex: number, endIndex: number) => {
const tasks = Array.from(list);
Expand Down Expand Up @@ -196,11 +200,12 @@ export const KanbanView = ({ kanbanBoardTasks, isLoading }: { kanbanBoardTasks:
{Array.isArray(columns) && columns.length > 0 && (
<Droppable droppableId="droppable" type="COLUMN" direction="horizontal">
{(provided: DroppableProvided, snapshot: DroppableStateSnapshot) => (
<div className="flex flex-col h-auto justify-between w-full">
<div className="flex flex-col h-auto justify-between w-full ">
<div
className={clsxm(
'flex flex-row h-full p-[32px] bg-transparent dark:bg-[#181920]',
snapshot.isDraggingOver ? 'lightblue' : '#F7F7F8'
snapshot.isDraggingOver ? 'lightblue' : '#F7F7F8',
!fullWidth && 'x-container pl-0'
)}
ref={provided.innerRef}
{...provided.droppableProps}
Expand Down
Loading

0 comments on commit 0308b06

Please sign in to comment.