Skip to content

Commit

Permalink
[Feat]: Timesheet Filter Calendar (#3305)
Browse files Browse the repository at this point in the history 
* refactor: Add FilterCalendar component for improved timesheet  selection in calendar view

* feat: add clear filter button to reset selected items

* fix:coderabbitai[bot]

* fix: deepscan-disable-line

* fix: logic

* fix: logic
  • Loading branch information
@Innocent-Akim
Innocent-Akim authored Nov 11, 2024
1 parent 690344a commit 1a1d0c6
Show file tree
Hide file tree
Showing 14 changed files with 229 additions and 61 deletions.
29 changes: 22 additions & 7 deletions apps/web/app/[locale]/timesheet/[memberId]/components/TimeSheetFilterPopover.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,31 @@
import { useOrganizationTeams, useTeamTasks } from "@app/hooks";
import { Button } from "@components/ui/button";
import { statusOptions } from "@app/constants";
import { MultiSelect } from "lib/components/custom-select/multi-select";
import { MultiSelect } from "lib/components/custom-select";
import React, { useEffect } from "react";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@components/ui/popover";
import { SettingFilterIcon } from "@/assets/svg";
import { useTranslations } from "next-intl";
import { clsxm } from "@/app/utils";



export function TimeSheetFilterPopover() {
const [shouldRemoveItems, setShouldRemoveItems] = React.useState(false);
const { activeTeam } = useOrganizationTeams();
const { tasks } = useTeamTasks();
const t = useTranslations();

useEffect(() => {
if (shouldRemoveItems) {
setShouldRemoveItems(false);
}
}, [shouldRemoveItems]);

return (
<>
<Popover>
Expand All @@ -36,9 +46,10 @@ export function TimeSheetFilterPopover() {
<div className="">
<label className="flex justify-between text-gray-600 mb-1 text-sm">
<span className="text-[12px]">{t('manualTime.EMPLOYEE')}</span>
<span className="text-primary/10">Clear</span>
<span className={clsxm("text-primary/10")}>Clear</span>
</label>
<MultiSelect
removeItems={shouldRemoveItems}
items={activeTeam?.members ?? []}
itemToString={(members) => (members ? members.employee.fullName : '')}
itemId={(item) => item.id}
Expand All @@ -50,11 +61,12 @@ export function TimeSheetFilterPopover() {
<div className="">
<label className="flex justify-between text-gray-600 mb-1 text-sm">
<span className="text-[12px]">{t('sidebar.PROJECTS')}</span>
<span className="text-primary/10">Clear</span>
<span className={clsxm("text-primary/10")}>Clear</span>
</label>
<MultiSelect
items={activeTeam?.members ?? []}
itemToString={(members) => (members ? members.employee.fullName : '')}
removeItems={shouldRemoveItems}
items={activeTeam?.projects ?? []}
itemToString={(project) => (activeTeam?.projects ? project.name! : '')}
itemId={(item) => item.id}
onValueChange={(selectedItems) => console.log(selectedItems)}
multiSelect={true}
Expand All @@ -64,9 +76,10 @@ export function TimeSheetFilterPopover() {
<div className="">
<label className="flex justify-between text-gray-600 mb-1 text-sm">
<span className="text-[12px]">{t('hotkeys.TASK')}</span>
<span className="text-primary/10">Clear</span>
<span className={clsxm("text-primary/10")}>Clear</span>
</label>
<MultiSelect
removeItems={shouldRemoveItems}
items={tasks}
onValueChange={(task) => task}
itemId={(task) => (task ? task.id : '')}
Expand All @@ -78,9 +91,10 @@ export function TimeSheetFilterPopover() {
<div className="">
<label className="flex justify-between text-gray-600 mb-1 text-sm">
<span className="text-[12px]">{t('common.STATUS')}</span>
<span className="text-primary/10">Clear</span>
<span className={clsxm("text-primary/10")}>Clear</span>
</label>
<MultiSelect
removeItems={shouldRemoveItems}
items={statusOptions}
itemToString={(status) => (status ? status.value : '')}
itemId={(item) => item.value}
Expand All @@ -91,6 +105,7 @@ export function TimeSheetFilterPopover() {
</div>
<div className="flex items-center justify-end gap-x-4 w-full">
<Button
onClick={() => setShouldRemoveItems(true)}
variant={'outline'}
className='flex items-center text-sm justify-center h-10 rounded-lg dark:text-gray-300' >
<span className="text-sm">Clear Filter</span>
Expand Down
2 changes: 1 addition & 1 deletion apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export function TimesheetCard({ ...props }: ITimesheetCard) {
'border border-gray-200 ',
'text-[#282048] text-sm',
'flex items-center',
'hover:bg-gray-50 focus:ring-2 focus:ring-offset-2 focus:ring-gray-200 dark:border-gray-600'
'hover:bg-gray-50 hover:dark:bg-primary-light/40 focus:ring-2 focus:ring-offset-2 focus:ring-gray-200 dark:border-gray-600'
)}
aria-label="View timesheet details"
onClick={onClick}>
Expand Down
14 changes: 7 additions & 7 deletions apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilter.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { FilterWithStatus } from './FilterWithStatus';
import { FilterStatus, FilterWithStatus } from './FilterWithStatus';
import { FrequencySelect, TimeSheetFilterPopover, TimesheetFilterDate, TimesheetFilterDateProps } from '.';
import { Button } from 'lib/components';
import { AddManualTimeModal } from '@/lib/features/manual-time/add-manual-time-modal';
Expand All @@ -9,10 +9,12 @@ interface ITimesheetFilter {
openModal: () => void,
closeModal: () => void,
t: TranslationHooks,
initDate?: Pick<TimesheetFilterDateProps, 'initialRange' | 'onChange' | 'maxDate' | 'minDate'>
initDate?: Pick<TimesheetFilterDateProps, 'initialRange' | 'onChange' | 'maxDate' | 'minDate'>,
onChangeStatus?: (status: FilterStatus) => void;
filterStatus?: FilterStatus
}

export function TimesheetFilter({ closeModal, isOpen, openModal, t, initDate }: ITimesheetFilter,) {
export function TimesheetFilter({ closeModal, isOpen, openModal, t, initDate, filterStatus, onChangeStatus }: ITimesheetFilter,) {
return (
<>
{
Expand All @@ -25,10 +27,8 @@ export function TimesheetFilter({ closeModal, isOpen, openModal, t, initDate }:
<div className="flex w-full justify-between items-center">
<div>
<FilterWithStatus
activeStatus="Rejected"
onToggle={(label) => {
// If logging is needed, use proper logging service
}}
activeStatus={filterStatus || "All Tasks"}
onToggle={(label) => onChangeStatus?.(label)}
/>
</div>

Expand Down
107 changes: 95 additions & 12 deletions apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetFilterDate.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { cn } from "@/lib/utils"
import { clsxm } from "@/app/utils"
import { checkPastDate, cn } from "@/lib/utils"
import { DatePicker } from "@components/ui/DatePicker"
import { Button } from "@components/ui/button"
import {
Expand All @@ -12,6 +13,8 @@ import { TranslationHooks } from "next-intl"
import React, { useEffect, useState } from "react"
import { MdKeyboardArrowRight } from "react-icons/md"
import { PiCalendarDotsThin } from "react-icons/pi"
import { Dispatch, SetStateAction, useCallback, useMemo, memo } from 'react';
import moment from 'moment';

interface DatePickerInputProps {
date: Date | null;
Expand All @@ -37,9 +40,9 @@ export function TimesheetFilterDate({
from: initialRange?.from ?? new Date(),
to: initialRange?.to ?? new Date(),
});

const [isVisible, setIsVisible] = useState(false);

const handleFromChange = (fromDate: Date | null) => {
if (maxDate && fromDate && fromDate > maxDate) {
return;
Expand Down Expand Up @@ -86,7 +89,7 @@ export function TimesheetFilterDate({
break;
}
};

useEffect(() => {
if (dateRange.from && dateRange.to) {
onChange?.(dateRange);
Expand Down Expand Up @@ -204,19 +207,19 @@ const DatePickerInput: React.FC<DatePickerInputProps> = ({ date, label }) => (
</>
);


export function DatePickerFilter({
label,
date,
setDate,
minDate,
maxDate
maxDate,
}: {
label: string;
date: Date | null;
setDate: (date: Date | null) => void;
minDate?: Date | null;
maxDate?: Date | null

maxDate?: Date | null;
}) {
const isDateDisabled = React.useCallback((date: Date) => {
if (minDate && date < minDate) return true;
Expand All @@ -227,9 +230,10 @@ export function DatePickerFilter({
return (
<div>
<DatePicker
captionLayout="dropdown"
buttonVariant={'link'}
className="dark:bg-dark--theme-light rounded-lg bg-white dark:text-gray-200"
buttonClassName={'decoration-transparent flex items-center w-full h-[2.2em] bg-white dark:text-gray-200 dark:bg-dark--theme-light border-gray-300 justify-start text-left font-normal text-black h-[2.2rem] border dark:border-slate-600 rounded-md'}
className="dark:bg-dark--theme-light rounded-lg bg-white dark:text-gray-200 "
buttonClassName={'decoration-transparent flex items-center w-full h-[2.2em] bg-white dark:text-gray-200 dark:bg-dark--theme-light border-gray-300 justify-start text-left font-normal text-black h-[2.2rem] border dark:border-slate-600 rounded-md hover:border-primary'}
customInput={<DatePickerInput date={date} label={label} />}
mode="single"
numberOfMonths={1}
Expand All @@ -242,15 +246,94 @@ export function DatePickerFilter({
}
}}
modifiersClassNames={{
disabled: 'text-[#6989AA] cursor-not-allowed',
selected: '!rounded-full bg-primary text-white',
today: '!rounded-full bg-[#BCCAD9] text-white'
booked: clsxm(
'relative after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2 after:w-1.5 after:h-1.5 after:bg-primary after:rounded-full'
),
selected: clsxm('bg-primary after:hidden text-white !rounded-full'),
pastDay: clsxm(
'relative after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2 after:w-1.5 after:h-1.5 after:bg-yellow-600 after:rounded-full'
),
today: clsxm('border-2 !border-yellow-700 rounded')
}}
disabled={[
...(minDate ? [{ before: minDate }] : []),
...(maxDate ? [{ after: maxDate }] : [])
]}

/>
</div>
);
}



interface ICalendarProps<T extends { date: string | Date }> {
setSelectedPlan: Dispatch<SetStateAction<Date>>;
selectedPlan: Date | undefined;
plans: T[];
pastPlans: T[];
handleCalendarSelect: () => void;
createEmptyPlan: () => Promise<void>;
bookedDayClassName?: string;
selectedDayClassName?: string;
pastDayClassName?: string;
currentDayClassName?: string;
clickDebounceInterval?: number;
startYear?: number;
endYear?: number;
}

export const FilterCalendar = memo(function FuturePlansCalendar<T extends { date: string | Date }>({
setSelectedPlan,
selectedPlan,
plans,
pastPlans,
bookedDayClassName = 'relative after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2 after:w-1.5 after:h-1.5 after:bg-primary after:rounded-full',
selectedDayClassName = 'bg-primary after:hidden text-white !rounded-full',
pastDayClassName = 'relative after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2 after:w-1.5 after:h-1.5 after:bg-yellow-600 after:rounded-full',
currentDayClassName = 'border-2 !border-yellow-700 rounded',
startYear,
endYear
}: ICalendarProps<T>) {

const sortedPlansByDateDesc = useMemo(
() => [...plans].sort((plan1, plan2) => new Date(plan1.date).getTime() < new Date(plan2.date).getTime() ? 1 : -1),
[plans]);
const createDateKey = (date: string | Date) =>
moment(date.toString().split('T')[0]).toISOString().split('T')[0];
const isDateAvailableForPlanning = useCallback(
(dateToCheck: Date) => {
const dateKey = createDateKey(dateToCheck);
const planDates = new Set(plans.map(plan => createDateKey(plan.date)));
return !planDates.has(dateKey);
},
[plans]
);
return (
<DatePicker
mode="single"
captionLayout="dropdown"
buttonVariant={'link'}
className={"dark:bg-dark--theme-light rounded-lg bg-white dark:text-gray-200"}
buttonClassName={'decoration-transparent flex items-center w-full h-[2.2em] bg-white dark:text-gray-200 dark:bg-dark--theme-light border-gray-300 justify-start text-left font-normal text-black h-[2.2rem] border dark:border-slate-600 rounded-md'}
numberOfMonths={1}
initialFocus
customInput={<DatePickerInput date={new Date()} label={''} />}
selected={selectedPlan || undefined}
onSelect={(date) => date && setSelectedPlan(moment(date).toDate())}
disabled={(date) => checkPastDate(date) || !isDateAvailableForPlanning(date)}
modifiers={{
booked: sortedPlansByDateDesc.map(plan => moment.utc(plan.date.toString().split('T')[0]).toDate()),
pastDay: pastPlans.map(plan => moment.utc(plan.date.toString().split('T')[0]).toDate())
}}
modifiersClassNames={{
booked: clsxm(bookedDayClassName),
selected: clsxm(selectedDayClassName),
pastDay: clsxm(pastDayClassName),
today: clsxm(currentDayClassName)
}}
fromYear={startYear || new Date(sortedPlansByDateDesc?.[0]?.date ?? Date.now()).getFullYear()}
toYear={endYear || new Date(sortedPlansByDateDesc?.[sortedPlansByDateDesc?.length - 1]?.date ?? Date.now()).getFullYear() + 10}
/>
);
});
4 changes: 2 additions & 2 deletions apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetView.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { IDailyPlan } from '@/app/interfaces';
import { GroupedTimesheet } from '@/app/hooks/features/useTimesheet';
import { DataTableTimeSheet } from 'lib/features/integrations/calendar';
import { useTranslations } from 'next-intl';

export function TimesheetView({ data }: { data?: IDailyPlan[] }) {
export function TimesheetView({ data }: { data?: GroupedTimesheet[] }) {
const t = useTranslations();
return (
<div className='grow h-full w-full bg-[#FFFFFF] dark:bg-dark--theme'>
Expand Down
Loading

0 comments on commit 1a1d0c6

Please sign in to comment.