diff --git a/apps/web/app/[locale]/page-component.tsx b/apps/web/app/[locale]/page-component.tsx index e1b331bf5..dc4e771ad 100644 --- a/apps/web/app/[locale]/page-component.tsx +++ b/apps/web/app/[locale]/page-component.tsx @@ -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, Divider } from 'lib/components'; +import { Breadcrumb, Card } from 'lib/components'; import { AuthUserTaskInput, TeamInvitations, TeamMembers, Timer, UnverifiedEmail } from 'lib/features'; -import { Footer, MainLayout } from 'lib/layout'; +import { MainLayout } from 'lib/layout'; import { IssuesView } from '@app/constants'; import { useNetworkState } from '@uidotdev/usehooks'; import Offline from '@components/pages/offline'; @@ -65,69 +65,56 @@ function MainPage() { return ( <>
-
- - -
- - {/* */} - setHeaderSize(size)} - > -
-
-
-
- - -
-
- -
+ {/*
*/} + + +
+ + {/* */} + setHeaderSize(size)} + > +
+
+
+
+ +
-
- - - - {isTeamMember ? ( - - ) : null} +
+
-
+
+ + + + {isTeamMember ? ( + + ) : null} +
+
- - - - {/* */} - -
{isTeamMember ? : }
- - -
- -
-
- -
-
+
+ + + {/* */} + +
{isTeamMember ? : }
+ + +
+
diff --git a/apps/web/app/[locale]/profile/[memberId]/page.tsx b/apps/web/app/[locale]/profile/[memberId]/page.tsx index c44a3d619..e0afccf3c 100644 --- a/apps/web/app/[locale]/profile/[memberId]/page.tsx +++ b/apps/web/app/[locale]/profile/[memberId]/page.tsx @@ -13,7 +13,7 @@ import { TaskFilter, Timer, TimerStatus, UserProfileTask, getTimerStatusValue, u import { MainHeader, MainLayout } from 'lib/layout'; import Link from 'next/link'; import React, { useCallback, useMemo, useState } from 'react'; -import { useTranslations } from 'next-intl' +import { useTranslations } from 'next-intl'; import stc from 'string-to-color'; import { useRecoilValue, useSetRecoilState } from 'recoil'; @@ -105,15 +105,12 @@ const Profile = React.memo(function ProfilePage({ params }: { params: { memberId setHeaderSize(size)} > - + {/* Breadcrumb */}
@@ -141,7 +138,7 @@ const Profile = React.memo(function ProfilePage({ params }: { params: { memberId - + {hook.tab == 'worked' && canSeeActivity && (
diff --git a/apps/web/app/hooks/features/useDailyPlan.ts b/apps/web/app/hooks/features/useDailyPlan.ts index f0bf1de9d..434da0f59 100644 --- a/apps/web/app/hooks/features/useDailyPlan.ts +++ b/apps/web/app/hooks/features/useDailyPlan.ts @@ -33,6 +33,7 @@ type TodayPlanNotificationParams = { canBeSeen: boolean; alreadySeen: boolean; }; +export type FilterTabs = 'Today Tasks' | 'Future Tasks' | 'Past Tasks' | 'All Tasks' | 'Outstanding'; export function useDailyPlan() { const [addTodayPlanTrigger, setAddTodayPlanTrigger] = useState({ @@ -65,6 +66,7 @@ export function useDailyPlan() { const [dailyPlanFetching, setDailyPlanFetching] = useRecoilState(dailyPlanFetchingState); const { firstLoadData: firstLoadDailyPlanData, firstLoad } = useFirstLoad(); + useEffect(() => { if (firstLoad) { setDailyPlanFetching(loading); @@ -76,8 +78,10 @@ export function useDailyPlan() { if (response.data.items.length) { const { items, total } = response.data; setDailyPlan({ items, total }); + } }); + }, [getAllQueryCall, setDailyPlan]); const getMyDailyPlans = useCallback(() => { @@ -294,7 +298,6 @@ export function useDailyPlan() { [...profileDailyPlans.items].sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime()); const currentUser = activeTeam?.members?.find((member) => member.employee.userId === user?.id); - useEffect(() => { getMyDailyPlans(); }, [getMyDailyPlans]); diff --git a/apps/web/app/hooks/features/useTaskStatus.ts b/apps/web/app/hooks/features/useTaskStatus.ts index 185407407..596b9c9ce 100644 --- a/apps/web/app/hooks/features/useTaskStatus.ts +++ b/apps/web/app/hooks/features/useTaskStatus.ts @@ -5,7 +5,8 @@ import { createTaskStatusAPI, getTaskStatusList, deleteTaskStatusAPI, - editTaskStatusAPI + editTaskStatusAPI, + editTaskStatusOrderAPI } from '@app/services/client/api'; import { userState, taskStatusFetchingState, taskStatusListState, activeTeamIdState } from '@app/stores'; import { useCallback, useEffect } from 'react'; @@ -23,6 +24,7 @@ export function useTaskStatus() { const { loading: createTaskStatusLoading, queryCall: createQueryCall } = useQuery(createTaskStatusAPI); const { loading: deleteTaskStatusLoading, queryCall: deleteQueryCall } = useQuery(deleteTaskStatusAPI); const { loading: editTaskStatusLoading, queryCall: editQueryCall } = useQuery(editTaskStatusAPI); + const { loading: reOrderTaskStatusLoading, queryCall: reOrderQueryCall } = useQuery(editTaskStatusOrderAPI); const [taskStatus, setTaskStatus] = useRecoilState(taskStatusListState); const [taskStatusFetching, setTaskStatusFetching] = useRecoilState(taskStatusFetchingState); @@ -114,6 +116,8 @@ export function useTaskStatus() { taskStatusFetching, firstLoadTaskStatusData, createTaskStatus, + reOrderQueryCall, + reOrderTaskStatusLoading, createTaskStatusLoading, deleteTaskStatusLoading, deleteTaskStatus, diff --git a/apps/web/app/hooks/useDateRange.ts b/apps/web/app/hooks/useDateRange.ts index 38e3cec61..4c8cfd08e 100644 --- a/apps/web/app/hooks/useDateRange.ts +++ b/apps/web/app/hooks/useDateRange.ts @@ -1,17 +1,18 @@ -import { dateRangeAllPlanState, dateRangeFuturePlanState, dateRangePastPlanState } from "@app/stores"; -import { useRecoilState } from "recoil"; +import { dateRangeAllPlanState, dateRangeFuturePlanState, dateRangePastPlanState, getFirstAndLastDateState } from "@app/stores"; +import { useRecoilState, useRecoilValue } from "recoil"; export const useDateRange = (tab: string | any) => { + const itemsDate = useRecoilValue(getFirstAndLastDateState); const [dateFuture, setDateFuture] = useRecoilState(dateRangeFuturePlanState); const [dateAllPlan, setDateAllPlan] = useRecoilState(dateRangeAllPlanState); const [datePastPlan, setDatePastPlan] = useRecoilState(dateRangePastPlanState); switch (tab) { case 'Future Tasks': - return { date: dateFuture, setDate: setDateFuture }; + return { date: dateFuture, setDate: setDateFuture, data: itemsDate }; case 'Past Tasks': - return { date: datePastPlan, setDate: setDatePastPlan }; + return { date: datePastPlan, setDate: setDatePastPlan, data: itemsDate }; case 'All Tasks': default: - return { date: dateAllPlan, setDate: setDateAllPlan }; + return { date: dateAllPlan, setDate: setDateAllPlan, data: itemsDate }; } } diff --git a/apps/web/app/hooks/useFilterDateRange.ts b/apps/web/app/hooks/useFilterDateRange.ts index 869d201bf..53828b897 100644 --- a/apps/web/app/hooks/useFilterDateRange.ts +++ b/apps/web/app/hooks/useFilterDateRange.ts @@ -1,8 +1,10 @@ 'use client'; +import { isTestDateRange } from '@app/helpers'; import { IDailyPlan } from '@app/interfaces' import { dateRangeAllPlanState, dateRangeFuturePlanState, dateRangePastPlanState, filteredAllPlanDataState, filteredFuturePlanDataState, filteredPastPlanDataState, originalAllPlanState, originalFuturePlanState, originalPastPlanDataState } from '@app/stores'; import { useEffect, useMemo } from 'react'; +import { DateRange } from 'react-day-picker'; import { useRecoilState, useRecoilValue } from 'recoil'; /** *custom filter the data with date range @@ -37,7 +39,6 @@ export function useFilterDateRange(itemsDailyPlan: IDailyPlan[], typeItems?: 'fu // setOriginalAllPlanState(itemsDailyPlan); // } // }, [itemsDailyPlan, dateFuture, datePastPlan, dateAllPlan, typeItems, setOriginalAllPlanState, setOriginalFuturePlanData, setOriginalAllPlanState]); - const updateOriginalPlanData = useMemo(() => (data: IDailyPlan[]) => { switch (typeItems) { case 'future': @@ -58,7 +59,7 @@ export function useFilterDateRange(itemsDailyPlan: IDailyPlan[], typeItems?: 'fu if (!itemsDailyPlan) return; updateOriginalPlanData(itemsDailyPlan); // eslint-disable-next-line react-hooks/exhaustive-deps - }, [updateOriginalPlanData, dateAllPlan, datePastPlan, dateFuture]); + }, [updateOriginalPlanData, dateAllPlan, datePastPlan, dateFuture, setDateAllPlan, setDatePastPlan, setDateFuture]); return { filteredAllPlanData, @@ -72,3 +73,16 @@ export function useFilterDateRange(itemsDailyPlan: IDailyPlan[], typeItems?: 'fu setDatePastPlan, } } + + +export const filterDailyPlan = (date: DateRange, data: IDailyPlan[]) => { + if (!date || !data.length) return data; + const { from, to } = date; + if (!from && !to) { + return data + } + return data.filter((plan) => { + const itemDate = new Date(plan.date); + return isTestDateRange(itemDate, from, to); + }); +} diff --git a/apps/web/app/interfaces/IDailyPlan.ts b/apps/web/app/interfaces/IDailyPlan.ts index 5d91cd89a..2af0ea650 100644 --- a/apps/web/app/interfaces/IDailyPlan.ts +++ b/apps/web/app/interfaces/IDailyPlan.ts @@ -23,11 +23,11 @@ export interface ICreateDailyPlan extends IDailyPlanBase, IRelationnalEmployee { taskId?: ITeamTask['id']; } -export interface IUpdateDailyPlan extends Partial, Pick {} +export interface IUpdateDailyPlan extends Partial, Pick { } export interface IDailyPlanTasksUpdate extends Pick, - IBasePerTenantAndOrganizationEntity {} + IBasePerTenantAndOrganizationEntity { } export enum DailyPlanStatusEnum { OPEN = 'open', diff --git a/apps/web/app/services/client/api/task-status.ts b/apps/web/app/services/client/api/task-status.ts index cf4343e5e..692754bc2 100644 --- a/apps/web/app/services/client/api/task-status.ts +++ b/apps/web/app/services/client/api/task-status.ts @@ -1,7 +1,9 @@ import { DeleteResponse, ITaskStatusCreate, ITaskStatusItemList, PaginationResponse } from '@app/interfaces'; -import { deleteApi, get, post, put } from '../axios'; +import { deleteApi, get, post, put, patch } from '../axios'; import qs from 'qs'; +import { UUID } from 'crypto'; + export function createTaskStatusAPI(data: ITaskStatusCreate, tenantId?: string) { return post('/task-statuses', data, { tenantId @@ -14,6 +16,16 @@ export function editTaskStatusAPI(id: string, data: ITaskStatusCreate, tenantId? }); } +type ITaskStatusOrder = { + organizationId: UUID; + reorder: { id: string; order: number }[]; +}; +export function editTaskStatusOrderAPI(data: ITaskStatusOrder, tenantId?: string) { + return patch(`/task-statuses/reorder`, data, { + tenantId, + method: 'PATCH' + }); +} export function deleteTaskStatusAPI(id: string) { return deleteApi(`/task-statuses/${id}`); } diff --git a/apps/web/app/services/client/axios.ts b/apps/web/app/services/client/axios.ts index 5b4af5a0e..38be5aa32 100644 --- a/apps/web/app/services/client/axios.ts +++ b/apps/web/app/services/client/axios.ts @@ -1,6 +1,11 @@ /* eslint-disable no-mixed-spaces-and-tabs */ import { API_BASE_URL, DEFAULT_APP_PATH, GAUZY_API_BASE_SERVER_URL } from '@app/constants'; -import { getAccessTokenCookie, getOrganizationIdCookie, getTenantIdCookie } from '@app/helpers/cookies'; +import { + getAccessTokenCookie, + getActiveTeamIdCookie, + getOrganizationIdCookie, + getTenantIdCookie +} from '@app/helpers/cookies'; import axios, { AxiosRequestConfig, AxiosResponse } from 'axios'; const api = axios.create({ @@ -8,10 +13,9 @@ const api = axios.create({ withCredentials: true, timeout: 60 * 1000 }); - api.interceptors.request.use( async (config: any) => { - const cookie = getAccessTokenCookie(); + const cookie = getActiveTeamIdCookie(); if (cookie) { config.headers['Authorization'] = `Bearer ${cookie}`; @@ -23,7 +27,6 @@ api.interceptors.request.use( Promise.reject(error); } ); - api.interceptors.response.use( (response: AxiosResponse) => response, async (error: { response: AxiosResponse }) => { @@ -128,7 +131,6 @@ function post(url: string, data?: Record | FormData, config?: AP return baseURL && directAPI ? apiDirect.post(url, data, { ...config, headers }) : api.post(url, data); } - function put(url: string, data?: Record | FormData, config?: APIConfig) { const { baseURL, headers, tenantId, organizationId } = apiConfig(config); const { directAPI = true } = config || {}; @@ -145,7 +147,23 @@ function put(url: string, data?: Record | FormData, config?: API return baseURL && directAPI ? apiDirect.put(url, data, { ...config, headers }) : api.put(url, data); } +function patch(url: string, data?: Record | FormData, config?: APIConfig) { + const { baseURL, headers, tenantId, organizationId } = apiConfig(config); + const { directAPI = true } = config || {}; + + if (baseURL && directAPI && data && !(data instanceof FormData)) { + if (!data.tenantId) { + data.tenantId = tenantId; + } + + if (!data.organizationId) { + data.organizationId = organizationId; + } + } + + return baseURL && directAPI ? apiDirect.patch(url, data, { ...config, headers }) : api.patch(url, data); +} -export { get, post, deleteApi, put }; +export { get, post, deleteApi, put, patch }; export default api; diff --git a/apps/web/app/stores/daily-plan.ts b/apps/web/app/stores/daily-plan.ts index e28f6e1df..af57cd9da 100644 --- a/apps/web/app/stores/daily-plan.ts +++ b/apps/web/app/stores/daily-plan.ts @@ -1,12 +1,8 @@ import { atom, RecoilState, selector } from 'recoil'; import { IDailyPlan, PaginationResponse } from '@app/interfaces'; -import { addDays } from 'date-fns'; import { DateRange } from 'react-day-picker'; import { isTestDateRange } from '@app/helpers'; -const today = new Date(); -const oneWeekAgo = new Date(); -oneWeekAgo.setDate(today.getDate() - 7); export const dailyPlanListState = atom>({ key: 'dailyPlanListState', @@ -65,11 +61,20 @@ const createDailyPlanAtom = (key: string | any) => atom({ const createDateRangeAtom = (key: string | any) => atom({ key, - default: { - from: oneWeekAgo, - to: addDays(today, 3), - }, + default: { from: undefined, to: undefined } +}); + +export const dataDailyPlanState = createDailyPlanAtom('originalPlanState'); +const getFirstAndLastDateSelector = (key: string | any) => selector({ + key, + get: ({ get }) => { + const itemsData = get(dataDailyPlanState); + if (!itemsData?.length) return { from: null, to: null }; + const sortedData = itemsData?.slice().sort((a, b) => new Date(a.date)?.getTime() - new Date(b?.date).getTime()); + return { from: new Date(sortedData[0]?.date), to: new Date(sortedData[sortedData.length - 1]?.date) }; + } }); +export const dateRangeDailyPlanState = createDateRangeAtom('dateRangeDailyPlanState') const createFilteredDailyPlanDataSelector = (key: string | any, dateRangeState: RecoilState, originalDataState: RecoilState) => selector({ key, @@ -78,6 +83,28 @@ const createFilteredDailyPlanDataSelector = (key: string | any, dateRangeState: const data = get(originalDataState); if (!dateRange || !data.length) return data; const { from, to } = dateRange; + if (!from && !to) { + return data + } + return data.filter((plan) => { + const itemDate = new Date(plan.date); + return isTestDateRange(itemDate, from, to); + }); + }, +}); +export const dataDailyPlanAllFilterState = createDailyPlanAtom('dataDailyPlanAllFilterState'); +export const dateRangeAllPlanState = createDateRangeAtom('dateRangeAllPlanState'); + +export const setCreateFilteredDailyPlanDataSelector = () => selector({ + key: 'dataDailyPlanAllFilter', + get: ({ get }) => { + const dateRange = get(dateRangeAllPlanState); + const data = get(dataDailyPlanAllFilterState); + if (!dateRange || !data.length) return data; + const { from, to } = dateRange; + if (!from && !to) { + return data + } return data.filter((plan) => { const itemDate = new Date(plan.date); return isTestDateRange(itemDate, from, to); @@ -87,8 +114,9 @@ const createFilteredDailyPlanDataSelector = (key: string | any, dateRangeState: export const dataDailyPlanCountFilterState = createDailyPlanCountFilterAtom('dataDailyPlanCountFilterState'); export const dateRangePastPlanState = createDateRangeAtom('dateRangePastPlanState'); + export const dateRangeFuturePlanState = createDateRangeAtom('dateRangeFuturePlanState'); -export const dateRangeAllPlanState = createDateRangeAtom('dateRangeAllPlanState'); +export const dateRangeLimitState = createDateRangeAtom('startAndEndDateRange'); export const originalFuturePlanState = createDailyPlanAtom('originalFuturePlanState'); export const originalAllPlanState = createDailyPlanAtom('originalAllPlanState'); @@ -111,3 +139,5 @@ export const filteredAllPlanDataState = createFilteredDailyPlanDataSelector( dateRangeAllPlanState, originalAllPlanState ); + +export const getFirstAndLastDateState = getFirstAndLastDateSelector('getFirstAndLastDateState'); diff --git a/apps/web/components/pages/kanban/sort-tasks-status-settings.tsx b/apps/web/components/pages/kanban/sort-tasks-status-settings.tsx new file mode 100644 index 000000000..d6410efe6 --- /dev/null +++ b/apps/web/components/pages/kanban/sort-tasks-status-settings.tsx @@ -0,0 +1,97 @@ +import { getOrganizationIdCookie } from '@app/helpers'; +import { useTaskStatus } from '@app/hooks'; +import { ITaskStatusItemList } from '@app/interfaces'; +import { taskStatusListState } from '@app/stores'; +import { Button } from '@components/ui/button'; +import { Spinner } from '@components/ui/loaders/spinner'; +import { ScrollArea } from '@components/ui/scroll-bar'; +import { SixSquareGridIcon } from 'assets/svg'; +import { useTranslations } from 'next-intl'; +import React, { useState } from 'react'; +import { DragDropContext, Droppable, Draggable, DropResult } from 'react-beautiful-dnd'; +import { useRecoilState } from 'recoil'; + +const SortTasksStatusSettings = ({ arr, onClose }: { arr: ITaskStatusItemList[]; onClose: () => void }) => { + const [items, setItems] = useState(arr); + const [saveLoader, setSaveLoader] = useState(false); + const [saveCheck, setSaveCheck] = useState(false); + const organizationId = getOrganizationIdCookie(); + const [_, setState] = useRecoilState(taskStatusListState); + const t = useTranslations(); + const { reOrderQueryCall } = useTaskStatus(); + const onDragEnd = (result: DropResult) => { + if (!result.destination) return; // dropped outside the list + const newItems = Array.from(items); + const [reorderedItem] = newItems.splice(result.source.index, 1); + newItems.splice(result.destination.index, 0, reorderedItem); + setItems(newItems); + setSaveCheck(true); + }; + const saveOrder = async () => { + if (saveCheck) { + const data: any = { + organizationId, + reorder: items.map((item, index) => { + return { + id: item.id, + order: index + }; + }) + }; + setSaveLoader(true); + await reOrderQueryCall(data); + setSaveLoader(false); + setState(data.reorder); + onClose(); + setSaveCheck(false); + } else { + onClose(); + } + }; + return ( +
+

{t('pages.settingsTeam.SORT_TASK_STATUSES')}

+ + + + {(provided) => ( +
+ <> + {items.map((item, index) => ( + + {(provided) => ( +
+
+
+ +
+

{item.name?.split('-').join(' ')}

+
+
+ )} + + ))} + {provided.placeholder} + +
+ )} + + + +
+ + +
+
+ ); +}; + +export default SortTasksStatusSettings; diff --git a/apps/web/lib/components/modal.tsx b/apps/web/lib/components/modal.tsx index 592e7bed1..c1af3fc71 100644 --- a/apps/web/lib/components/modal.tsx +++ b/apps/web/lib/components/modal.tsx @@ -45,15 +45,16 @@ export function Modal({ className="fixed inset-0 backdrop-brightness-90 backdrop-blur-sm z-[9999] w-full h-full" >
- {title && {title}} {description && {description}}
{children} - +
diff --git a/apps/web/lib/features/task/daily-plan/future-tasks.tsx b/apps/web/lib/features/task/daily-plan/future-tasks.tsx index d235ca163..ec453f87f 100644 --- a/apps/web/lib/features/task/daily-plan/future-tasks.tsx +++ b/apps/web/lib/features/task/daily-plan/future-tasks.tsx @@ -10,20 +10,24 @@ import { dailyPlanViewHeaderTabs } from '@app/stores/header-tabs'; import TaskBlockCard from '../task-block-card'; import { clsxm } from '@app/utils'; import { HorizontalSeparator } from 'lib/components'; -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import { AlertPopup } from 'lib/components'; -import { useFilterDateRange } from '@app/hooks/useFilterDateRange'; +import { filterDailyPlan } from '@app/hooks/useFilterDateRange'; import { IDailyPlan } from '@app/interfaces'; import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd'; +import { useDateRange } from '@app/hooks/useDateRange'; export function FutureTasks({ profile }: { profile: any }) { const { deleteDailyPlan, deleteDailyPlanLoading, futurePlans } = useDailyPlan(); const canSeeActivity = useCanSeeActivityScreen(); const [popupOpen, setPopupOpen] = useState(false); - const { filteredFuturePlanData: filteredFuturePlanData } = useFilterDateRange(futurePlans, 'future'); - const [currentDeleteIndex, setCurrentDeleteIndex] = useState(0); - const [futureDailyPlanTasks, setFutureDailyPlanTasks] = useState(filteredFuturePlanData); + const [currentDeleteIndex, setCurrentDeleteIndex] = useState(0); + const { setDate, date } = useDateRange(window.localStorage.getItem('daily-plan-tab')); + const [futureDailyPlanTasks, setFutureDailyPlanTasks] = useState(futurePlans); + useEffect(() => { + setFutureDailyPlanTasks(filterDailyPlan(date as any, futurePlans)) + }, [date, setDate]) const view = useRecoilValue(dailyPlanViewHeaderTabs); return ( diff --git a/apps/web/lib/features/task/daily-plan/past-tasks.tsx b/apps/web/lib/features/task/daily-plan/past-tasks.tsx index 412ef7d05..6fc9a3983 100644 --- a/apps/web/lib/features/task/daily-plan/past-tasks.tsx +++ b/apps/web/lib/features/task/daily-plan/past-tasks.tsx @@ -8,18 +8,22 @@ import { dailyPlanViewHeaderTabs } from '@app/stores/header-tabs'; import { HorizontalSeparator } from 'lib/components'; import { clsxm } from '@app/utils'; import TaskBlockCard from '../task-block-card'; -import { useFilterDateRange } from '@app/hooks/useFilterDateRange'; -import { useState } from 'react'; +import { filterDailyPlan } from '@app/hooks/useFilterDateRange'; +import { useEffect, useState } from 'react'; import { IDailyPlan } from '@app/interfaces'; import { DragDropContext, Draggable, Droppable, DroppableProvided, DroppableStateSnapshot } from 'react-beautiful-dnd'; +import { useDateRange } from '@app/hooks/useDateRange'; export function PastTasks({ profile, currentTab = 'Past Tasks' }: { profile: any; currentTab?: FilterTabs }) { const { pastPlans } = useDailyPlan(); const view = useRecoilValue(dailyPlanViewHeaderTabs); - const { filteredPastPlanData: filteredPastPlanData } = useFilterDateRange(pastPlans, 'past'); - const [pastTasks, setPastTasks] = useState(filteredPastPlanData); + const [pastTasks, setPastTasks] = useState(pastPlans); + const { setDate, date } = useDateRange(window.localStorage.getItem('daily-plan-tab')); + useEffect(() => { + setPastTasks(filterDailyPlan(date as any, pastPlans)) + }, [date, setDate]) return (
{pastTasks?.length > 0 ? ( diff --git a/apps/web/lib/features/task/task-date-range.tsx b/apps/web/lib/features/task/task-date-range.tsx index 1f5c5d243..336816e29 100644 --- a/apps/web/lib/features/task/task-date-range.tsx +++ b/apps/web/lib/features/task/task-date-range.tsx @@ -2,7 +2,7 @@ import React from "react" import { format } from "date-fns" -import { Calendar as CalendarIcon } from "lucide-react" +import { CalendarDays } from "lucide-react" import { cn } from "lib/utils" import { Button } from "@components/ui/button" import { Calendar } from "@components/ui/calendar" @@ -13,34 +13,42 @@ import { } from "@components/ui/popover" import { DateRange } from "react-day-picker" import { SetterOrUpdater } from "recoil" +import moment from "moment" interface ITaskDatePickerWithRange { className?: React.HTMLAttributes, date?: DateRange; onSelect?: SetterOrUpdater; - label?: string + label?: string, + data?: any, } - export function TaskDatePickerWithRange({ className, date, onSelect, - label - + label, + data, }: ITaskDatePickerWithRange) { + const isDateDisabled = (dateToCheck: any) => { + const { from, to }: any = data; + const fromDate = new Date(moment(from)?.format('YYYY-MM-DD')); + const toDate = new Date(moment(to)?.format('YYYY-MM-DD')); + return dateToCheck < fromDate || dateToCheck > toDate; + }; + return (
- +