Skip to content

Commit

Permalink
set the project when creating task
Browse files Browse the repository at this point in the history
  • Loading branch information
@CREDO23
CREDO23 committed Nov 19, 2024
1 parent 7fa447e commit 60aecdc
Show file tree
Hide file tree
Showing 6 changed files with 129 additions and 39 deletions.
7 changes: 5 additions & 2 deletions apps/web/app/hooks/features/useTaskInput.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ export function useTaskInput({
const taskSize = useRef<null | string>(null);
const taskDescription = useRef<null | string>(null);
const taskLabels = useRef<[] | ITaskLabelsItemList[]>([]);
const taskProject = useRef<null | string>(null);

const tasks = customTasks || teamTasks;

Expand Down Expand Up @@ -160,7 +161,8 @@ export function useTaskInput({
priority: taskPriority.current || undefined,
size: taskSize.current || undefined,
tags: taskLabels.current || [],
description: taskDescription.current
description: taskDescription.current,
projectId : taskProject.current
},
!autoAssignTaskAuth ? assignToUsers : undefined
).then((res) => {
Expand Down Expand Up @@ -233,7 +235,8 @@ export function useTaskInput({
taskLabels,
taskDescription,
user,
userRef
userRef,
taskProject,
};
}

Expand Down
16 changes: 10 additions & 6 deletions apps/web/app/hooks/features/useTeamTasks.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -296,7 +296,8 @@ export function useTeamTasks() {
priority,
size,
tags,
description
description,
projectId
}: {
taskName: string;
issueType?: string;
Expand All @@ -306,6 +307,7 @@ export function useTeamTasks() {
size?: string;
tags?: ITaskLabelsItemList[];
description?: string | null;
projectId?: string | null;
},
members?: { id: string }[]
) => {
Expand All @@ -319,11 +321,13 @@ export function useTeamTasks() {
tags,
// Set Project Id to cookie
// TODO: Make it dynamic when we add Dropdown in Navbar
...(activeTeam?.projects && activeTeam?.projects.length > 0
? {
projectId: activeTeam.projects[0].id
}
: {}),

// ...(activeTeam?.projects && activeTeam?.projects.length > 0
// ? {
// projectId: activeTeam.projects[0].id
// }
// : {}),
projectId,
...(description ? { description: `<p>${description}</p>` } : {}),
...(members ? { members } : {}),
taskStatusId: taskStatusId
Expand Down
91 changes: 65 additions & 26 deletions apps/web/components/pages/task/details-section/blocks/task-secondary-info.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import { ChevronDownIcon, Square4OutlineIcon } from 'assets/svg';
import { Listbox, Transition } from '@headlessui/react';
import { clsxm } from '@/app/utils';
import { organizationProjectsState } from '@/app/stores/organization-projects';
import ProjectIcon from '@components/ui/svgs/project-icon';

type StatusType = 'version' | 'epic' | 'status' | 'label' | 'size' | 'priority';

Expand Down Expand Up @@ -319,7 +320,14 @@ const EpicParent = ({ task }: { task: ITeamTask }) => {
};

interface ITaskProjectDropdownProps {
task: ITeamTask;
task?: ITeamTask;
controlled?: boolean;
onChange?: (project: IProject) => void;
styles?: {
container?: string; // The dropdown element
value?: string;
listCard?: string; // The listbox
};
}

export default TaskSecondaryInfo;
Expand All @@ -329,11 +337,13 @@ export default TaskSecondaryInfo;
*
* @param {Object} props - The props object
* @param {ITeamTask} props.task - The ITeamTask object which
* @param {boolean} props.controlled - If [true], changes are managed by external handlers (i.e :props.onChange)
* @param {(project: IProject) => void} props.onChange - The function called when user selects a value (external handler)
*
* @returns {JSX.Element} - The Dropdown element
*/
function ProjectDropDown(props: ITaskProjectDropdownProps) {
const { task } = props;
export function ProjectDropDown(props: ITaskProjectDropdownProps) {
const { task, controlled = false, onChange, styles } = props;

const organizationProjects = useAtomValue(organizationProjectsState);
const { getOrganizationProjects } = useOrganizationProjects();
Expand All @@ -348,20 +358,22 @@ function ProjectDropDown(props: ITaskProjectDropdownProps) {

// Set the task project if any
useEffect(() => {
setSelected(
organizationProjects.find((project) => {
return project.id === task.projectId;
})
);
}, [organizationProjects, task.projectId]);
if (task) {
setSelected(
organizationProjects.find((project) => {
return project.id == task.projectId;
})
);
}
}, [organizationProjects, task, task?.projectId]);

// Update the project
const handleUpdateProject = useCallback(
async (project: IProject) => {
try {
await updateTask({ ...task, projectId: project.id });

setSelected(project);
if (task) {
await updateTask({ ...task, projectId: project.id });
}
} catch (error) {
console.error(error);
}
Expand All @@ -372,9 +384,11 @@ function ProjectDropDown(props: ITaskProjectDropdownProps) {
// Remove the project
const handleRemoveProject = useCallback(async () => {
try {
await updateTask({ ...task, projectId: null });
if (task) {
await updateTask({ ...task, projectId: null });

setSelected(undefined);
setSelected(undefined);
}
} catch (error) {
console.error(error);
}
Expand All @@ -383,22 +397,42 @@ function ProjectDropDown(props: ITaskProjectDropdownProps) {
return (
<div
className={clsxm(
'relative text-sm font-medium border text-[0.625rem] w-[7.6875rem] h-[2.35rem] max-w-[7.6875rem] rounded 3xl:text-xs'
'relative text-sm font-medium border text-[0.625rem] w-[7.6875rem] h-[2.35rem] max-w-[7.6875rem] rounded 3xl:text-xs',
styles?.container
)}
>
<Listbox value={selected} onChange={handleUpdateProject}>
<Listbox
value={selected}
onChange={(project) => {
if (controlled && onChange) {
onChange(project);
} else {
handleUpdateProject(project);
}

setSelected(project);
}}
>
{({ open }) => {
return (
<>
<Listbox.Button
className={clsxm(
'cursor-pointer outline-none w-full flex items-center justify-between px-4 h-full '
'cursor-pointer outline-none w-full flex items-center justify-between px-4 h-full ',
styles?.value
)}
>
{selected && (
<div className="">
<ProjectIcon />
</div>
)}
{updateLoading ? (
<SpinnerLoader size={10} />
) : (
<p className=" truncate ">{selected?.name ?? 'Project'}</p>
<p className={clsxm('truncate', !selected && ' text-slate-400 font-light')}>
{selected?.name ?? 'Project'}
</p>
)}
<ChevronDownIcon
className={clsxm(
Expand All @@ -421,7 +455,10 @@ function ProjectDropDown(props: ITaskProjectDropdownProps) {
<Listbox.Options className="outline-none">
<Card
shadow="bigger"
className="p-4 md:p-4 shadow-xlcard dark:shadow-lgcard-white dark:bg-[#1B1D22] dark:border dark:border-[#FFFFFF33] flex flex-col gap-2.5 max-h-[206px] overflow-x-auto rounded-none"
className={clsxm(
'p-4 md:p-4 shadow-xlcard dark:shadow-lgcard-white dark:bg-[#1B1D22] dark:border dark:border-[#FFFFFF33] flex flex-col gap-2.5 max-h-[206px] overflow-x-auto rounded-none',
styles?.listCard
)}
>
{organizationProjects.map((item, i) => {
return (
Expand All @@ -432,13 +469,15 @@ function ProjectDropDown(props: ITaskProjectDropdownProps) {
</Listbox.Option>
);
})}
<Button
className=" px-2 py-1 mt-2 !min-w-min rounded-none text-xs dark:text-white dark:border-white"
variant="outline"
onClick={handleRemoveProject}
>
{t('common.REMOVE')}
</Button>
{!controlled && (
<Button
className=" px-2 py-1 mt-2 !min-w-min rounded-none text-xs dark:text-white dark:border-white"
variant="outline"
onClick={handleRemoveProject}
>
{t('common.REMOVE')}
</Button>
)}
</Card>
</Listbox.Options>
</Transition>
Expand Down
18 changes: 18 additions & 0 deletions apps/web/components/ui/svgs/project-icon.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
export default function ProjectIcon() {
return (
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M12 12.2501C11.56 12.2501 11.12 12.1401 10.72 11.9301L4.21 8.4201C3.62 8.1001 3.25 7.4701 3.25 6.7701C3.25 6.0701 3.62 5.4401 4.21 5.1201L10.72 1.6101C11.52 1.1801 12.48 1.1801 13.27 1.6101L19.78 5.1201C20.37 5.4401 20.74 6.0701 20.74 6.7701C20.74 7.4701 20.37 8.1001 19.78 8.4201L13.27 11.9301C12.88 12.1501 12.44 12.2501 12 12.2501ZM12 2.7801C11.81 2.7801 11.61 2.8301 11.43 2.9301L4.93 6.4301C4.76 6.5201 4.75 6.7101 4.75 6.7701C4.75 6.8301 4.76 7.0201 4.93 7.1001L11.44 10.6101C11.8 10.8001 12.21 10.8001 12.57 10.6101L19.08 7.1001C19.24 7.0101 19.26 6.8201 19.26 6.7701C19.26 6.7101 19.25 6.5201 19.08 6.4401L12.57 2.9301C12.39 2.8301 12.19 2.7801 12 2.7801Z"
fill="#292D32"
/>
<path
d="M9.78 22.72C9.5 22.72 9.21 22.65 8.95 22.52L2.89 19.5C1.88 18.99 1.25 17.97 1.25 16.84V11.12C1.25 10.47 1.58 9.88001 2.13 9.54001C2.69 9.20001 3.36 9.17001 3.94 9.46001L10 12.48C11.01 12.99 11.64 14 11.64 15.14V20.86C11.64 21.51 11.31 22.1 10.76 22.44C10.46 22.63 10.12 22.72 9.78 22.72ZM3.11 10.76C3.03 10.76 2.96 10.79 2.92 10.81C2.86 10.85 2.75 10.94 2.75 11.12V16.84C2.75 17.4 3.06 17.91 3.56 18.16L9.61 21.19C9.77 21.27 9.9 21.21 9.96 21.18C10.02 21.14 10.13 21.05 10.13 20.87V15.15C10.13 14.59 9.82 14.08 9.32 13.83L3.27 10.8C3.21 10.77 3.16 10.76 3.11 10.76Z"
fill="#292D32"
/>
<path
d="M14.2201 22.72C13.8801 22.72 13.5401 22.63 13.2401 22.44C12.6901 22.1 12.3601 21.51 12.3601 20.86V15.14C12.3601 14.01 12.9901 12.99 14.0001 12.48L20.0501 9.45C20.6301 9.16 21.3101 9.19 21.8601 9.53C22.4101 9.87 22.7401 10.46 22.7401 11.11V16.83C22.7401 17.96 22.1101 18.98 21.1001 19.49L15.0501 22.52C14.7901 22.66 14.5001 22.72 14.2201 22.72ZM20.8901 10.76C20.8401 10.76 20.7901 10.77 20.7301 10.8L14.6801 13.83C14.1801 14.08 13.8701 14.58 13.8701 15.15V20.87C13.8701 21.05 13.9801 21.14 14.0401 21.18C14.1001 21.22 14.2301 21.27 14.3901 21.19L20.4401 18.16C20.9401 17.91 21.2501 17.4 21.2501 16.84V11.12C21.2501 10.94 21.1401 10.85 21.0801 10.81C21.0401 10.79 20.9701 10.76 20.8901 10.76Z"
fill="#292D32"
/>
</svg>
);
}
18 changes: 14 additions & 4 deletions apps/web/lib/features/auth-user-task-input.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { TaskInput } from './task/task-input';
import { TaskLabels } from './task/task-labels';
import { ActiveTaskPropertiesDropdown, ActiveTaskSizesDropdown, ActiveTaskStatusDropdown } from './task/task-status';
import { useTranslations } from 'next-intl';
import { ProjectDropDown } from '@components/pages/task/details-section/blocks/task-secondary-info';

export function AuthUserTaskInput({ className }: IClassName) {
const t = useTranslations();
Expand All @@ -31,29 +32,38 @@ export function AuthUserTaskInput({ className }: IClassName) {

<div className="flex-grow justify-end hidden flex-1 gap-2 md:flex">
<ActiveTaskStatusDropdown
className="lg:max-w-[190px] w-full"
className="lg:max-w-[190px] grow"
disabled={!activeTeamTask}
taskStatusClassName="text-xs py-1.5 w-full"
/>

<ActiveTaskPropertiesDropdown
className="lg:max-w-[190px] w-full"
className="lg:max-w-[190px] grow"
disabled={!activeTeamTask}
taskStatusClassName="w-full py-1.5 text-xs"
/>

<ActiveTaskSizesDropdown
className="lg:max-w-[190px] w-full"
className="lg:max-w-[190px] grow"
disabled={!activeTeamTask}
taskStatusClassName="w-full py-1.5 text-xs"
/>

<TaskLabels
task={activeTeamTask}
className="lg:max-w-[170px] w-full text-xs"
className="lg:max-w-[170px] grow text-xs"
forDetails={false}
taskStatusClassName="dark:bg-[#1B1D22] dark:border dark:border-[#FFFFFF33] text-xs"
/>
{activeTeamTask && (
<ProjectDropDown
styles={{
container: 'rounded-xl grow text-xs !max-w-[10.625rem]',
listCard: 'rounded-xl'
}}
task={activeTeamTask}
/>
)}
</div>
{/* <div className="grid justify-items-center md:hidden">
<div className="flex">
Expand Down
18 changes: 17 additions & 1 deletion apps/web/lib/features/task/task-input.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ import { useTranslations } from 'next-intl';
import { useInfinityScrolling } from '@app/hooks/useInfinityFetch';
import { ObserverComponent } from '@components/shared/Observer';
import { LazyRender } from 'lib/components/lazy-render';
import { ProjectDropDown } from '@components/pages/task/details-section/blocks/task-secondary-info';

type Props = {
task?: Nullable<ITeamTask>;
Expand Down Expand Up @@ -540,7 +541,8 @@ function TaskCard({
taskPriority,
taskSize,
taskLabels,
taskDescription
taskDescription,
taskProject
} = datas;
const { nextOffset, data } = useInfinityScrolling(updatedTaskList ?? [], 5);

Expand Down Expand Up @@ -640,6 +642,20 @@ function TaskCard({
}}
task={datas.inputTask}
/>

<ProjectDropDown
styles={{
container: 'rounded-xl w-[10.625rem] !max-w-[10.625rem]',
listCard: 'rounded-xl'
}}
controlled
onChange={(project) => {
if (taskProject) {
taskProject.current = project.id
}
}}
/>

</div>
</div>
)}
Expand Down

0 comments on commit 60aecdc

Please sign in to comment.