Skip to content

Commit

Permalink
feat: add the task details modal
Browse files Browse the repository at this point in the history
  • Loading branch information
@CREDO23
CREDO23 committed Aug 29, 2024
1 parent 25ac65e commit 1fbb6c5
Show file tree
Hide file tree
Showing 4 changed files with 119 additions and 85 deletions.
51 changes: 51 additions & 0 deletions apps/web/app/[locale]/task/[id]/component.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import { ITeamTask } from '@app/interfaces';
import { ChildIssueCard } from '@components/pages/task/ChildIssueCard';
import RichTextEditor from '@components/pages/task/description-block/task-description-editor';
import { RelatedIssueCard } from '@components/pages/task/IssueCard';
import TaskDetailsAside from '@components/pages/task/task-details-aside';
import TaskProperties from '@components/pages/task/TaskProperties';
import TaskTitleBlock from '@components/pages/task/title-block/task-title-block';
import { TaskActivity } from 'lib/features/task/task-activity';

interface ITaskDetailsComponentProps {
task: ITeamTask;
}

/**
* Task details component
*
* @param {object} props - The props object
* @param {ITeamTask} props.task - The task to show details about
*
* @returns {JSX.Element} The Task details component
*/
export function TaskDetailsComponent(props: ITaskDetailsComponentProps) {
const { task } = props;
return (
<div className="flex flex-col w-full min-h-screen pt-5">
<section className="flex flex-col justify-between lg:flex-row lg:items-start 3xl:gap-8">
<section className="md:mr-5 max-w-[57rem] 3xl:max-w-none xl:w-full mb-4 md:mb-0">
<TaskTitleBlock />

<div className="bg-[#F9F9F9] dark:bg-dark--theme-light p-2 md:p-6 pt-0 flex flex-col gap-8 rounded-sm">
<RichTextEditor />
{/* <TaskDescriptionBlock /> */}
<ChildIssueCard />
<RelatedIssueCard />

{/* <IssueCard related={true} /> */}

{/* <CompletionBlock /> */}
{task && <TaskActivity task={task} />}
</div>
</section>
<div className="flex flex-col mt-4 lg:mt-0 3xl:min-w-[24rem] w-full lg:w-[30%]">
<div className="flex flex-col bg-white dark:bg-dark--theme-light rounded-xl">
<TaskDetailsAside />
</div>
<TaskProperties task={task} />
</div>
</section>
</div>
);
}
75 changes: 2 additions & 73 deletions apps/web/app/[locale]/task/[id]/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,6 @@
'use client';

import { useOrganizationTeams, useTeamTasks, useUserProfilePage } from '@app/hooks';
import { ChildIssueCard } from '@components/pages/task/ChildIssueCard';
import { RelatedIssueCard } from '@components/pages/task/IssueCard';
import TaskProperties from '@components/pages/task/TaskProperties';
import RichTextEditor from '@components/pages/task/description-block/task-description-editor';
import TaskDetailsAside from '@components/pages/task/task-details-aside';
import TaskTitleBlock from '@components/pages/task/title-block/task-title-block';
import { withAuthentication } from 'lib/app/authenticator';
import { Breadcrumb, Container } from 'lib/components';
import { ArrowLeftIcon } from 'assets/svg';
Expand All @@ -17,7 +11,7 @@ import { useTranslations } from 'next-intl';

import { fullWidthState } from '@app/stores/fullWidth';
import { useRecoilValue } from 'recoil';
import { TaskActivity } from 'lib/features/task/task-activity';
import { TaskDetailsComponent } from './component';

const TaskDetails = () => {
const profile = useUserProfilePage();
Expand Down Expand Up @@ -71,76 +65,11 @@ const TaskDetails = () => {
</div>

<Container fullWidth={fullWidth} className="mb-10">
<div className="flex flex-col w-full min-h-screen pt-5">
<section className="flex flex-col justify-between lg:flex-row lg:items-start 3xl:gap-8">
<section className="md:mr-5 max-w-[57rem] 3xl:max-w-none xl:w-full mb-4 md:mb-0">
<TaskTitleBlock />

<div className="bg-[#F9F9F9] dark:bg-dark--theme-light p-2 md:p-6 pt-0 flex flex-col gap-8 rounded-sm">
<RichTextEditor />
{/* <TaskDescriptionBlock /> */}
<ChildIssueCard />
<RelatedIssueCard />

{/* <IssueCard related={true} /> */}

{/* <CompletionBlock /> */}
{task && <TaskActivity task={task} />}
</div>
</section>
<div className="flex flex-col mt-4 lg:mt-0 3xl:min-w-[24rem] w-full lg:w-[30%]">
<div className="flex flex-col bg-white dark:bg-dark--theme-light rounded-xl">
<TaskDetailsAside />
</div>
<TaskProperties task={task} />
</div>
</section>
</div>

{task && <TaskDetailsComponent task={task} />}
{/* <IssueModal task={task} /> */}
</Container>
</MainLayout>
);
};

/**
function IssueModal({ task }: { task: ITeamTask | null }) {
const { handleStatusUpdate } = useTeamTasks();
const { trans } = useTranslation();
const modal = useModal();
const { openModal } = modal;
const handleChange = useCallback(
(status: any) => {
handleStatusUpdate(status, 'issueType', task);
},
[task, handleStatusUpdate]
);
useEffect(() => {
if (
task?.createdAt &&
task?.updatedAt &&
task?.createdAt === task?.updatedAt
) {
openModal();
}
}, [task?.updatedAt, task?.createdAt, openModal]);
return (
<TaskStatusModal
key={task?.id}
modal={modal}
types="issueType"
title={trans.common.SELECT_ISSUE}
defaultValue={task?.issueType}
onValueChange={handleChange}
>
<></>
</TaskStatusModal>
);
}
*/

export default withAuthentication(TaskDetails, { displayName: 'TaskDetails' });
37 changes: 25 additions & 12 deletions apps/web/lib/features/daily-plan/add-task-estimation-hours-modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,15 @@ import { PiWarningCircleFill } from 'react-icons/pi';
import { Card, InputField, Modal, SpinnerLoader, Text, VerticalSeparator } from 'lib/components';
import { Button } from '@components/ui/button';
import { useTranslations } from 'next-intl';
import { useAuthenticateUser, useDailyPlan, useTeamTasks, useTimerView } from '@app/hooks';
import { useAuthenticateUser, useDailyPlan, useModal, useTeamTasks, useTimerView } from '@app/hooks';
import { TaskNameInfoDisplay } from '../task/task-displays';
import { TaskEstimate } from '../task/task-estimate';
import { IDailyPlan, ITeamTask } from '@app/interfaces';
import clsx from 'clsx';
import { AddIcon, ThreeCircleOutlineVerticalIcon } from 'assets/svg';
import { Popover, Transition } from '@headlessui/react';
import { clsxm } from '@app/utils';
import Link from 'next/link';
import { TaskDetailsModal } from './task-details-modal';

interface IAddTasksEstimationHoursModalProps {
closeModal: () => void;
Expand Down Expand Up @@ -151,7 +151,18 @@ interface ITaskCardProps {
}

function TaskCard({ task, plan }: ITaskCardProps) {
const { setActiveTask, activeTeamTask } = useTeamTasks();
const { setActiveTask, activeTeamTask, getTaskById } = useTeamTasks();
const {
isOpen: isTaskDetailsModalOpen,
closeModal: closeTaskDetailsModal,
openModal: openTaskDetailsModal
} = useModal();

const handleOpenTaskDetailsModal = useCallback(() => {
// Update the detailed task state
getTaskById(task.id);
openTaskDetailsModal();
}, [getTaskById, openTaskDetailsModal, task.id]);

return (
<Card
Expand All @@ -170,16 +181,22 @@ function TaskCard({ task, plan }: ITaskCardProps) {
<span>Estimation :</span> <TaskEstimate _task={task} />
</div>
<span className="w-4 h-full flex items-center justify-center">
<TaskCardActions selectedPlan={plan} task={task} />
<TaskCardActions
openTaskDetailsModal={handleOpenTaskDetailsModal}
selectedPlan={plan}
task={task}
/>
</span>
</div>
<TaskDetailsModal task={task} isOpen={isTaskDetailsModalOpen} closeModal={closeTaskDetailsModal} />
</Card>
);
}

interface ITaskCardActionsProps {
task: ITeamTask;
selectedPlan: IDailyPlan;
openTaskDetailsModal: () => void;
}

/**
Expand All @@ -188,12 +205,13 @@ interface ITaskCardActionsProps {
* @param {object} props - The props object
* @param {ITeamTask} props.task - The task on which actions will be performed
* @param {IDailyPlan} props.selectedPlan - The currently selected plan
* @param {() => void} props.openTaskDetailsModal - A function that opens a task details modal
*
* @returns {JSX.Element} The Popover component.
*/

function TaskCardActions(props: ITaskCardActionsProps) {
const { task, selectedPlan } = props;
const { task, selectedPlan, openTaskDetailsModal } = props;
const { user } = useAuthenticateUser();
const { futurePlans, todayPlan, removeTaskFromPlan, removeTaskFromPlanLoading } = useDailyPlan();

Expand Down Expand Up @@ -244,13 +262,8 @@ function TaskCardActions(props: ITaskCardActionsProps) {
return (
<Card shadow="custom" className=" shadow-xlcard !p-3 !rounded-lg !border-2">
<ul className=" flex flex-col justify-end gap-3">
<li className="">
<Link
href={`/task/${task.id}`}
className={clsxm('hover:font-semibold hover:transition-all')}
>
View
</Link>
<li onClick={openTaskDetailsModal} className="">
View
</li>
<li className={clsxm('hover:font-semibold hover:transition-all')}>Edit</li>

Expand Down
41 changes: 41 additions & 0 deletions apps/web/lib/features/daily-plan/task-details-modal.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import { Card, Modal } from 'lib/components';
import { useCallback } from 'react';
import { clsxm } from '@app/utils';
import { ITeamTask } from '@app/interfaces';
import { TaskDetailsComponent } from '@app/[locale]/task/[id]/component';
import { ScrollArea, ScrollBar } from '@components/ui/scroll-bar';

interface ITaskDetailsModalProps {
closeModal: () => void;
isOpen: boolean;
task: ITeamTask;
}

/**
* A Big Modal that shows task details
*
* @param {Object} props - The props Object
* @param {boolean} props.open - If true open the modal otherwise close the modal
* @param {() => void} props.closeModal - A function to close the modal
* @param {ITeamTask} props.task - The task to show details about
*
* @returns {JSX.Element} The modal element
*/
export function TaskDetailsModal(props: ITaskDetailsModalProps) {
const { isOpen, closeModal, task } = props;

const handleCloseModal = useCallback(() => {
closeModal();
}, [closeModal]);

return (
<Modal isOpen={isOpen} closeModal={handleCloseModal} className={clsxm('w-[90vw] h-[90vh]')}>
<Card className="w-full h-full pt-12 overflow-hidden" shadow="custom">
<ScrollArea className="w-full h-full">
<TaskDetailsComponent task={task} />
<ScrollBar className="-pr-20" />
</ScrollArea>
</Card>
</Modal>
);
}

0 comments on commit 1fbb6c5

Please sign in to comment.