Merge pull request #2511 from ever-co/feat/daily-plan-unplan

Daily plan actions

apps/web/app/api/daily-plan/remove-task/[planId]/route.ts

@@ -0,0 +1,28 @@
+import { ICreateDailyPlan, INextParams } from '@app/interfaces';
+import { authenticatedGuard } from '@app/services/server/guards/authenticated-guard-app';
+import { removeTaskFromPlanRequest } from '@app/services/server/requests';
+import { NextResponse } from 'next/server';
+
+export async function PUT(req: Request, { params }: INextParams) {
+	const res = new NextResponse();
+
+	const { planId } = params;
+	if (!planId) {
+		return;
+	}
+
+	const { $res, user, tenantId, organizationId, access_token } = await authenticatedGuard(req, res);
+	if (!user) return $res('Unauthorized');
+
+	const body = (await req.json()) as unknown as Partial<ICreateDailyPlan>;
+
+	const response = await removeTaskFromPlanRequest({
+		data: body,
+		organizationId,
+		planId,
+		tenantId,
+		bearer_token: access_token
+	});
+
+	return $res(response.data);
+}

apps/web/app/hooks/features/useDailyPlan.ts

@@ -16,6 +16,7 @@ import {
 	getAllDayPlansAPI,
 	getDayPlansByEmployeeAPI,
 	getPlansByTaskAPI,
+	removeTaskFromPlanAPI,
 	updateDailyPlanAPI
 } from '@app/services/client/api';
 import { ICreateDailyPlan, IDailyPlan, IEmployee, ITeamTask } from '@app/interfaces';
@@ -30,6 +31,8 @@ export function useDailyPlan() {
 	const { loading: updateDailyPlanLoading, queryCall: updateQueryCall } = useQuery(updateDailyPlanAPI);
 	const { loading: getPlansByTaskLoading, queryCall: getPlansByTaskQueryCall } = useQuery(getPlansByTaskAPI);
 	const { loading: addTaskToPlanLoading, queryCall: addTaskToPlanQueryCall } = useQuery(addTaskToPlanAPI);
+	const { loading: removeTaskFromPlanLoading, queryCall: removeTAskFromPlanQueryCall } =
+		useQuery(removeTaskFromPlanAPI);
 
 	const [dailyPlan, setDailyPlan] = useRecoilState(dailyPlanListState);
 	const [profileDailyPlans, setProfileDailyPlans] = useRecoilState(profileDailyPlanListState);
@@ -105,6 +108,16 @@ export function useDailyPlan() {
 		[addTaskToPlanQueryCall, profileDailyPlans.items, profileDailyPlans.total, setProfileDailyPlans]
 	);
 
+	const removeTaskFromPlan = useCallback(
+		async (data: Partial<ICreateDailyPlan>, planId: IDailyPlan['id']) => {
+			const updated = profileDailyPlans.items.filter((plan) => plan.id != planId);
+			const res = await removeTAskFromPlanQueryCall(data, planId);
+			setProfileDailyPlans({ total: profileDailyPlans.total, items: [...updated, res.data] });
+			return res;
+		},
+		[profileDailyPlans.items, profileDailyPlans.total, removeTAskFromPlanQueryCall, setProfileDailyPlans]
+	);
+
 	return {
 		dailyPlan,
 		profileDailyPlans,
@@ -131,6 +144,9 @@ export function useDailyPlan() {
 		updateDailyPlanLoading,
 
 		addTaskToPlan,
-		addTaskToPlanLoading
+		addTaskToPlanLoading,
+
+		removeTaskFromPlan,
+		removeTaskFromPlanLoading
 	};
 }

apps/web/app/services/client/api/daily-plan.ts

@@ -77,3 +77,16 @@ export function addTaskToPlanAPI(data: { employeeId: IEmployee['id']; taskId: IT
 
 	return put<IDailyPlan>(`/daily-plan/add-task/${planId}?${query}`, data, { tenantId });
 }
+
+export function removeTaskFromPlanAPI(data: Partial<ICreateDailyPlan>, planId: IDailyPlan['id']) {
+	const organizationId = getOrganizationIdCookie();
+	const tenantId = getTenantIdCookie();
+
+	const obj = {
+		'where[organizationId]': organizationId
+	} as Record<string, string>;
+
+	const query = qs.stringify(obj);
+
+	return put<IDailyPlan>(`/daily-plan/task/${planId}?${query}`, data, { tenantId });
+}

apps/web/app/services/server/requests/daily-plan.ts

@@ -1,7 +1,7 @@
 import qs from 'qs';
 import { ICreateDailyPlan, IDailyPlan } from '@app/interfaces/IDailyPlan';
 import { serverFetch } from '../fetch';
-import { IEmployee, ITeamTask } from '@app/interfaces';
+import { IEmployee, IOrganization, ITeamTask } from '@app/interfaces';
 
 export function getAllDayPlans({
 	organizationId,
@@ -153,3 +153,31 @@ export function addTaskToDailyPlanRequest({
 		tenantId
 	});
 }
+
+export function removeTaskFromPlanRequest({
+	planId,
+	data,
+	bearer_token,
+	tenantId,
+	organizationId
+}: {
+	planId: IDailyPlan['id'];
+	data: Partial<ICreateDailyPlan>;
+	bearer_token?: string;
+	tenantId: any;
+	organizationId: IOrganization['id'];
+}) {
+	const obj = {
+		'where[organizationId]': organizationId
+	} as Record<string, string>;
+
+	const query = qs.stringify(obj);
+
+	return serverFetch<IDailyPlan>({
+		method: 'PUT',
+		path: `/daily-plan/task/${planId}?${query}`,
+		body: data,
+		bearer_token,
+		tenantId
+	});
+}

apps/web/lib/features/task/daily-plan/future-tasks.tsx

@@ -31,7 +31,7 @@ export function FutureTasks({ dayPlans, profile }: { dayPlans: IDailyPlan[]; pro
 									{formatDayPlanDate(plan.date.toString())} ({plan.tasks?.length})
 								</div>
 							</AccordionTrigger>
-							<AccordionContent className="bg-light--theme border-none dark:bg-dark--theme pb-12">
+							<AccordionContent className="bg-light--theme border-none dark:bg-dark--theme pb-[5rem]">
 								{/* Plan header */}
 								<PlanHeader plan={plan} planMode="Outstanding" />
 
@@ -48,6 +48,8 @@ export function FutureTasks({ dayPlans, profile }: { dayPlans: IDailyPlan[]; pro
 											type="HORIZONTAL"
 											taskBadgeClassName={`rounded-sm`}
 											taskTitleClassName="mt-[0.0625rem]"
+											plan={plan}
+											planMode="Future Tasks"
 										/>
 									))}
 								</ul>

apps/web/lib/features/task/task-card.tsx

@@ -4,6 +4,7 @@ import { secondsToTime } from '@app/helpers';
 import {
 	I_TeamMemberCardHook,
 	I_UserProfilePage,
+	useDailyPlan,
 	useModal,
 	useOrganizationEmployeeTeams,
 	useOrganizationTeams,
@@ -13,7 +14,16 @@ import {
 	useTeamTasks,
 	useTimerView
 } from '@app/hooks';
-import { IClassName, IDailyPlanMode, IOrganizationTeamList, ITeamTask, Nullable, OT_Member } from '@app/interfaces';
+import {
+	IClassName,
+	ICreateDailyPlan,
+	IDailyPlan,
+	IDailyPlanMode,
+	IOrganizationTeamList,
+	ITeamTask,
+	Nullable,
+	OT_Member
+} from '@app/interfaces';
 import { timerSecondsState } from '@app/stores';
 import { clsxm } from '@app/utils';
 import { Popover, Transition } from '@headlessui/react';
@@ -54,6 +64,7 @@ type Props = {
 	setEditTaskId?: SetterOrUpdater<string | null>;
 	taskBadgeClassName?: string;
 	taskTitleClassName?: string;
+	plan?: IDailyPlan;
 	planMode?: FilterTabs;
 } & IClassName;
 
@@ -70,6 +81,7 @@ export function TaskCard(props: Props) {
 		profile,
 		taskBadgeClassName,
 		taskTitleClassName,
+		plan,
 		planMode
 	} = props;
 	const t = useTranslations();
@@ -206,6 +218,7 @@ export function TaskCard(props: Props) {
 							memberInfo={memberInfo}
 							viewType={viewType}
 							profile={profile}
+							plan={plan}
 							planMode={planMode}
 						/>
 					)}
@@ -259,7 +272,13 @@ export function TaskCard(props: Props) {
 					<ActiveTaskStatusDropdown task={task || null} onChangeLoading={(load) => setLoading(load)} />
 
 					{task && currentMember && (
-						<TaskCardMenu task={task} loading={loading} memberInfo={memberInfo} viewType={viewType} />
+						<TaskCardMenu
+							task={task}
+							loading={loading}
+							memberInfo={memberInfo}
+							viewType={viewType}
+							plan={plan}
+						/>
 					)}
 				</div>
 			</Card>
@@ -441,13 +460,15 @@ function TaskCardMenu({
 	memberInfo,
 	viewType,
 	profile,
+	plan,
 	planMode
 }: {
 	task: ITeamTask;
 	loading?: boolean;
 	memberInfo?: I_TeamMemberCardHook;
 	viewType: 'default' | 'unassign' | 'dailyplan';
 	profile?: I_UserProfilePage;
+	plan?: IDailyPlan;
 	planMode?: FilterTabs;
 }) {
 	const t = useTranslations();
@@ -537,6 +558,16 @@ function TaskCardMenu({
 									{viewType === 'dailyplan' && planMode === 'Outstanding' && (
 										<AddTaskToPlanComponent employee={profile?.member} task={task} />
 									)}
+
+									{viewType === 'dailyplan' &&
+										(planMode === 'Today Tasks' || planMode === 'Future Tasks') && (
+											<div>
+												<Divider type="HORIZONTAL" />
+												<div className="mt-2">
+													<RemoveTaskFromPlan task={task} plan={plan} />
+												</div>
+											</div>
+										)}
 									{/* <li>
 										<ConfirmDropdown
 											className="right-[110%] top-0"
@@ -617,3 +648,22 @@ export function AddTaskToPlanComponent({ task, employee }: { task: ITeamTask; em
 		</span>
 	);
 }
+
+export function RemoveTaskFromPlan({ task, plan }: { task: ITeamTask; plan?: IDailyPlan }) {
+	const { removeTaskFromPlan } = useDailyPlan();
+	const data: Partial<ICreateDailyPlan> = { taskId: task.id };
+	const onClick = () => {
+		removeTaskFromPlan(data, plan?.id ?? '');
+	};
+	return (
+		<span
+			className={clsxm(
+				'font-normal whitespace-nowrap transition-all text-red-600',
+				'hover:font-semibold hover:transition-all cursor-pointer'
+			)}
+			onClick={onClick}
+		>
+			Remove from this plan
+		</span>
+	);
+}

apps/web/lib/features/user-profile-plans.tsx

@@ -126,6 +126,8 @@ function AllPlans({
 											type="HORIZONTAL"
 											taskBadgeClassName={`rounded-sm`}
 											taskTitleClassName="mt-[0.0625rem]"
+											planMode={currentTab === 'Today Tasks' ? 'Today Tasks' : undefined}
+											plan={plan}
 										/>
 									))}
 								</ul>