Skip to content

Commit

Permalink
[Feat]: Implement Create Manual Time Modal Component (#2875)
Browse files Browse the repository at this point in the history 
* feat: modal-manual-time

* fix: timer picker component

* fix: task is defined but never used.

* fix: task is defined but never used.

* feat: timer picker component

* fix:  Remove invalid HeadCalendar export field

* feat: Customize AddManualTimeModal component

* fix: customize AddManualTimeModal component

* fix: property

* fix: change project to task
  • Loading branch information
@Innocent-Akim
Innocent-Akim authored Aug 11, 2024
1 parent 4a0ecf6 commit 2b47ec0
Show file tree
Hide file tree
Showing 6 changed files with 247 additions and 150 deletions.
31 changes: 31 additions & 0 deletions apps/web/app/[locale]/calendar/component.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import { clsxm } from "@app/utils";
import { QueueListIcon } from "@heroicons/react/20/solid";
import { Button } from "lib/components";
import { LuCalendarDays } from "react-icons/lu";

export function HeadCalendar({ openModal }: { openModal?: () => void }) {
return (
<div className="flex justify-between items-center mt-10 bg-white dark:bg-dark-high py-2">
<h1 className="text-4xl font-semibold">CALENDAR</h1>
<div className='flex items-center space-x-3'>
<button
className='hover:bg-gray-100 text-xl h-10 w-10 rounded-lg flex items-center justify-center'
>
<QueueListIcon className={clsxm('w-5 h-5')} />
</button>
<button
className='bg-gray-100 text-xl h-10 w-10 rounded-lg flex items-center justify-center'
>
<LuCalendarDays />
</button>
<Button
onClick={openModal}
variant='primary'
className='bg-primary dark:bg-primary-light'
>
Add Time
</Button>
</div>
</div>
);
}
73 changes: 33 additions & 40 deletions apps/web/app/[locale]/calendar/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,31 @@
"use client"
import { useOrganizationTeams } from '@app/hooks';
"use client";

import { useModal, useOrganizationTeams } from '@app/hooks';
import { fullWidthState } from '@app/stores/fullWidth';
import { clsxm } from '@app/utils';
import HeaderTabs from '@components/pages/main/header-tabs';
import { PeoplesIcon } from 'assets/svg';
import { withAuthentication } from 'lib/app/authenticator';
import { Breadcrumb, Button, Container, Divider } from 'lib/components';
import { SetupFullCalendar } from 'lib/features'
import { Breadcrumb, Container, Divider } from 'lib/components';
import { SetupFullCalendar } from 'lib/features';
import { Footer, MainLayout } from 'lib/layout';
import { useTranslations } from 'next-intl';
import { useParams } from 'next/navigation';
import React, { useMemo } from 'react'
import React, { useMemo } from 'react';
import { useRecoilValue } from 'recoil';
import { LuCalendarDays } from "react-icons/lu";

import { HeadCalendar } from './component';
import { AddManualTimeModal } from 'lib/features/manual-time/add-manual-time-modal';

const CalendarPage = () => {
const t = useTranslations();
const fullWidth = useRecoilValue(fullWidthState);
const { activeTeam, isTrackingEnabled } = useOrganizationTeams();
const {
isOpen: isManualTimeModalOpen,
openModal: openManualTimeModal,
closeModal: closeManualTimeModal
} = useModal();

const params = useParams<{ locale: string }>();
const currentLocale = params ? params.locale : null;
const breadcrumbPath = useMemo(
Expand All @@ -29,64 +36,50 @@ const CalendarPage = () => {
],
[activeTeam?.name, currentLocale, t]
);

return (
<>

<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)]"
className="h-[calc(100vh-22px)]"
>
<div className="h-[263.4px] z-10 bg-white dark:bg-dark-high fixed w-full"></div>
<AddManualTimeModal
closeModal={closeManualTimeModal}
isOpen={isManualTimeModalOpen}
params='AddManuelTime'
/>

<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'
}
className='fixed top-20 flex flex-col border-b-[1px] dark:border-[#26272C] z-10 mx-0 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">
<div className="flex h-10 w-max items-center justify-center gap-1">
<HeaderTabs kanban={true} linkAll={true} />
</div>
</div>
<div className="flex justify-between items-center mt-10 bg-white dark:bg-dark-high py-2">
<h1 className="text-4xl font-semibold ">
CALENDAR
</h1>
<div className='flex items-center space-x-3'>
<button
className=' hover:!bg-gray-100 text-xl h-10 w-10 rounded-lg flex items-center justify-center'>
<LuCalendarDays />
</button>
<button
className='bg-gray-100 text-xl !h-10 !w-10 rounded-lg flex items-center justify-center'>
<LuCalendarDays />
</button>
<Button
variant='primary'
className='bg-primary dark:!bg-primary-light'
>Add Manuel Time
</Button>
</div>
</div>
<HeadCalendar openModal={openManualTimeModal} />
</Container>
</div>
<div className='mt-[256px] mb-24 '>
<div className='mt-[256px] mb-24'>
<SetupFullCalendar />
</div>
</MainLayout>
<div className="bg-white dark:bg-[#1e2025] w-screen z-[5000] fixed bottom-0">
<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')}
className={clsxm('justify-between w-full px-0 mx-auto', fullWidth ? 'px-8' : 'x-container')}
/>
</div>
</>
)
}
);
};

export default withAuthentication(CalendarPage, { displayName: 'Calender' });
export default withAuthentication(CalendarPage, { displayName: 'Calendar' });
8 changes: 4 additions & 4 deletions apps/web/lib/components/custom-select/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,8 +53,8 @@ export function SelectItems<T>({
onClick={() => setPopoverOpen(!isPopoverOpen)}
variant="outline"
className={cn(
'w-full justify-between text-left font-normal h-9 rounded-lg dark:bg-dark--theme-light',
!selectedItem && 'text-muted-foreground',
'w-full justify-between text-left font-normal h-10 rounded-lg dark:bg-dark--theme-light',
// !selectedItem && 'text-muted-foreground',
triggerClassName
)}
>
Expand All @@ -64,7 +64,7 @@ export function SelectItems<T>({
<span>Select an item</span>
)}
<MdOutlineKeyboardArrowDown
className={cn('mr-2 h-4 w-4 transition-transform', isPopoverOpen && 'rotate-180')}
className={cn('h-4 w-4 transition-transform', isPopoverOpen && 'rotate-180')}
/>
</Button>
</PopoverTrigger>
Expand All @@ -82,7 +82,7 @@ export function SelectItems<T>({
<span
onClick={() => onClick(item)}
key={itemId(item)}
className="truncate hover:cursor-pointer hover:bg-slate-50 w-full text-[13px] hover:rounded-lg p-1 hover:font-bold dark:text-white dark:hover:bg-primary"
className="truncate hover:cursor-pointer hover:bg-slate-50 w-full text-[13px] hover:rounded-lg p-1 hover:font-normal dark:text-white dark:hover:bg-primary"
style={{ textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }}
>
{itemToString(item)}
Expand Down
6 changes: 3 additions & 3 deletions apps/web/lib/components/time-picker/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,13 +39,13 @@ export function TimePicker({ onChange, defaultValue }: IPopoverTimePicker) {
<Button
variant={"outline"}
className={cn(
"w-full justify-start text-left font-normal dark:bg-dark--theme-light",
"w-full justify-start text-left font-normal dark:bg-dark--theme-light text-[14px]",
!time.minute && "text-muted-foreground"
)}
>
<div className='flex items-center justify-between w-full text-[16px] font-medium'>
{time.hours !== '--' && time.minute !== '--' ? `${time.hours}:${time.minute} ${time.meridiem}` : <span>Time picker</span>}
<div className='flex items-center justify-start w-full text-[14px] font-normal'>
<TimerIcon className="mr-2 h-4 w-4" />
{time.hours !== '--' && time.minute !== '--' ? `${time.hours}:${time.minute} ${time.meridiem}` : <span>Time picker</span>}
</div>
</Button>
</PopoverTrigger>
Expand Down
Loading

0 comments on commit 2b47ec0

Please sign in to comment.