From 642ebb0db67de111ee190e295200cfe15f7d458d Mon Sep 17 00:00:00 2001
From: GloireMutaliko21 <mufunyig@gmail.com>
Date: Thu, 9 May 2024 22:15:49 +0200
Subject: [PATCH] feat: remove task from plan

---
 .../features/task/daily-plan/future-tasks.tsx |  4 +-
 apps/web/lib/features/task/task-card.tsx      | 54 ++++++++++++++++++-
 apps/web/lib/features/user-profile-plans.tsx  |  2 +
 3 files changed, 57 insertions(+), 3 deletions(-)

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 c92bd882d..f57c10497 100644
--- a/apps/web/lib/features/task/daily-plan/future-tasks.tsx
+++ b/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>
diff --git a/apps/web/lib/features/task/task-card.tsx b/apps/web/lib/features/task/task-card.tsx
index 449924d70..e6ccf4430 100644
--- a/apps/web/lib/features/task/task-card.tsx
+++ b/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';
@@ -53,6 +63,7 @@ type Props = {
 	setEditTaskId?: SetterOrUpdater<string | null>;
 	taskBadgeClassName?: string;
 	taskTitleClassName?: string;
+	plan?: IDailyPlan;
 	planMode?: FilterTabs;
 } & IClassName;
 
@@ -69,6 +80,7 @@ export function TaskCard(props: Props) {
 		profile,
 		taskBadgeClassName,
 		taskTitleClassName,
+		plan,
 		planMode
 	} = props;
 	const t = useTranslations();
@@ -198,6 +210,7 @@ export function TaskCard(props: Props) {
 							memberInfo={memberInfo}
 							viewType={viewType}
 							profile={profile}
+							plan={plan}
 							planMode={planMode}
 						/>
 					)}
@@ -251,7 +264,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>
@@ -433,6 +452,7 @@ function TaskCardMenu({
 	memberInfo,
 	viewType,
 	profile,
+	plan,
 	planMode
 }: {
 	task: ITeamTask;
@@ -440,6 +460,7 @@ function TaskCardMenu({
 	memberInfo?: I_TeamMemberCardHook;
 	viewType: 'default' | 'unassign' | 'dailyplan';
 	profile?: I_UserProfilePage;
+	plan?: IDailyPlan;
 	planMode?: FilterTabs;
 }) {
 	const t = useTranslations();
@@ -529,6 +550,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"
@@ -609,3 +640,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>
+	);
+}
diff --git a/apps/web/lib/features/user-profile-plans.tsx b/apps/web/lib/features/user-profile-plans.tsx
index 3c69e68dd..1c7cffc39 100644
--- a/apps/web/lib/features/user-profile-plans.tsx
+++ b/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>