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

Release #2887

Merged
merged 7 commits into from
Aug 11, 2024
Merged

Release #2887

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
6d6775b
feat: customize month legend and theme styling
Innocent-Akim Aug 11, 2024
638809a
feat:Added a generic custom hook `useLocalStorageState` that initiali…
Innocent-Akim Aug 11, 2024
8b466a9
Merge pull request #2883 from ever-co/feat/customize-month-legend-the…
evereq Aug 11, 2024
4a0ecf6
Merge pull request #2884 from ever-co/feat/create-generic-useLocalSto…
evereq Aug 11, 2024
2b47ec0
[Feat]: Implement Create Manual Time Modal Component (#2875)
Innocent-Akim Aug 11, 2024
6501ae1
I18n planned tabs (#2882)
samuelmbabhazi Aug 11, 2024
54e8271
Merge pull request #2886 from ever-co/develop
evereq Aug 11, 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
31 changes: 31 additions & 0 deletions apps/web/app/[locale]/calendar/component.tsx
View file
Open in desktop
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
Open in desktop
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' });
30 changes: 30 additions & 0 deletions apps/web/app/hooks/useLocalStorageState.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
"use client"
import { useState, useEffect } from 'react';
/**
* Custom hook to manage state that is synchronized with `localStorage`.
*
* @template T - The type of the state value.
* @param {string} key - The key under which the value is stored in `localStorage`.
* @param {T} defaultValue - The default value to use if the key is not found in `localStorage`.
*
* @returns {[T, React.Dispatch<React.SetStateAction<T>>]} - Returns a stateful value and a function to update it.
*
* @example
* const [calendar, setCalendar] = useLocalStorageState<ChangeCalendar>('calendar-timesheet', 'Calendar');
*
* - The state `calendar` will be initialized with the value from `localStorage` if it exists, or 'Calendar' if not.
* - Any updates to `calendar` will be reflected in `localStorage`.
*/

export const useLocalStorageState = <T,>(key: string, defaultValue: T) => {
const [state, setState] = useState<T>(() =>
(typeof window !== 'undefined' && window.localStorage.getItem(key) as T) || defaultValue
);
useEffect(() => {
if (typeof window !== 'undefined') {
window.localStorage.setItem(key, state as any);
}
}, [state, key]);

return [state, setState] as const;
};
8 changes: 4 additions & 4 deletions apps/web/lib/components/custom-select/index.tsx
View file
Open in desktop
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
Open in desktop
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
15 changes: 14 additions & 1 deletion apps/web/lib/features/integrations/activity-calendar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,20 @@ export function ActivityCalendar() {
}
]}
monthSpacing={20}
monthLegend={(_, __, d) => d.toLocaleString('en-US', { month: 'short' })}
monthLegend={(year, month) => {
return new Date(year, month).toLocaleString('en-US', { month: 'short' });
}}
theme={{
labels: {
text: {
fill: '#9ca3af',
fontSize: 16,
font: 'icon',
animation: 'ease',
border: '12',
}
}
}}
/>
</div>
</div>
Expand Down
Loading
Loading