Skip to content

Commit

Permalink
fix: Fix status assignment issue from dropdown (#3504)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Innocent-Akim
Innocent-Akim authored Jan 14, 2025
1 parent 592cfa9 commit 768b50f
Show file tree
Hide file tree
Showing 10 changed files with 90 additions and 86 deletions.
18 changes: 11 additions & 7 deletions apps/web/app/hooks/features/useTaskStatus.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ import { useCallback, useEffect } from 'react';
import { useAtom, useAtomValue } from 'jotai';
import { useFirstLoad } from '../useFirstLoad';
import { useQuery } from '../useQuery';
import isEqual from 'lodash/isEqual';
import { getActiveTeamIdCookie } from '@app/helpers';

export function useTaskStatus() {
Expand Down Expand Up @@ -64,16 +63,21 @@ export function useTaskStatus() {
user?.employee?.organizationId as string,
activeTeamId || teamId || null
).then((res) => {
if (!isEqual(res.data?.items || [], taskStatus)) {
setTaskStatus(res.data?.items || []);
}
setTaskStatus(res.data?.items || []);
return res;
});
}, [user, activeTeamId, setTaskStatus, taskStatus, queryCall, loadingRef]);
}, [user, activeTeamId, setTaskStatus, queryCall, loadingRef]);

useEffect(() => {
if (user?.tenantId && (activeTeamId || getActiveTeamIdCookie())) {
loadTaskStatusData();
}
}, [user?.tenantId, activeTeamId, loadTaskStatusData]);

useEffect(() => {
if (!firstLoad) return;
loadTaskStatusData();
if (firstLoad) {
loadTaskStatusData();
}
}, [loadTaskStatusData, firstLoad]);

const createTaskStatus = useCallback(
Expand Down
7 changes: 3 additions & 4 deletions apps/web/lib/components/color-picker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ export const ColorPicker = ({
}, []);

return fullWidthInput ? (
<Popover className={'z-[9999] relative border-none no-underline w-full mt-3' + className}>
<Popover className={'z-[9999] relative border-none no-underline w-full mt-3' + className} onProgressCapture={(e) => e.stopPropagation()}>
{() => (
<>
<Popover.Button
Expand All @@ -78,9 +78,8 @@ export const ColorPicker = ({
as="div"
>
<div
className={`relative w-[100%] h-[48px] border rounded-[10px] flex items-center justify-between input-border ${
disabled || disableButton ? 'bg-[#FCFCFC]' : 'bg-light--theme-light'
} dark:bg-dark--theme-light`}
className={`relative w-[100%] h-[48px] border rounded-[10px] flex items-center justify-between input-border ${disabled || disableButton ? 'bg-[#FCFCFC]' : 'bg-light--theme-light'
} dark:bg-dark--theme-light`}
>
<div className={`flex gap-[8px] h-[40px] items-center pl-[15px]`}>
<div
Expand Down
5 changes: 2 additions & 3 deletions apps/web/lib/components/modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,9 +65,8 @@ export function Modal({
closeModal();
customCloseModal?.();
}}
className={`absolute ${
alignCloseIcon ? 'right-2 top-3' : 'right-3 top-3'
} md:right-2 md:top-3 cursor-pointer z-50`}
className={`absolute ${alignCloseIcon ? 'right-2 top-3' : 'right-3 top-3'
} md:right-2 md:top-3 cursor-pointer z-50`}
>
<Image
src={'/assets/svg/close.svg'}
Expand Down
10 changes: 4 additions & 6 deletions apps/web/lib/features/task/task-input.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -215,8 +215,8 @@ export function TaskInput(props: Props) {
}, [editMode, setFilter]);

/*
If task is passed then we don't want to set the active task for the authenticated user.
after task creation
If task is passed then we don't want to set the active task for the authenticated user.
after task creation
*/
const autoActiveTask: boolean = props.task === undefined;
const handleTaskCreation = useCallback(() => {
Expand Down Expand Up @@ -771,8 +771,7 @@ function AssigneesSelect(props: ITeamMemberSelectProps): JSX.Element {
{authMember && (
<Combobox.Option
className={({ active }) =>
`relative cursor-default select-none py-2 pl-10 pr-4 ${
active ? 'bg-primary/5 dark:bg-dark--theme-light dark:text-white' : 'text-gray-100'
`relative cursor-default select-none py-2 pl-10 pr-4 ${active ? 'bg-primary/5 dark:bg-dark--theme-light dark:text-white' : 'text-gray-100'
}`
}
value={authMember}
Expand All @@ -790,8 +789,7 @@ function AssigneesSelect(props: ITeamMemberSelectProps): JSX.Element {
<Combobox.Option
key={member.id}
className={({ active }) =>
`relative cursor-pointer select-none py-2 pl-10 pr-4 ${
active ? 'bg-primary/5 dark:text-gray-100 dark:bg-dark--theme-lights' : 'text-gray-900 dark:text-gray-200'
`relative cursor-pointer select-none py-2 pl-10 pr-4 ${active ? 'bg-primary/5 dark:text-gray-100 dark:bg-dark--theme-lights' : 'text-gray-900 dark:text-gray-200'
}`
}
onClick={() => {
Expand Down
8 changes: 7 additions & 1 deletion apps/web/lib/features/task/task-status-modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,13 @@ export function TaskStatusModal<T extends ITaskStatusField>({
)}

<Modal isOpen={isOpen} closeModal={closeModal}>
<div className="w-[98%] md:w-[33rem]">
<div className="w-[98%] md:w-[33rem]"
onClick={(e) => e.stopPropagation()}
onMouseDown={(e) => e.stopPropagation()}
onMouseUp={(e) => e.stopPropagation()}
onPointerDown={(e) => e.stopPropagation()}
onPointerUp={(e) => e.stopPropagation()}
>
<Card className="w-full" shadow="custom">
<div className="flex flex-col items-center justify-between w-full">
<Text.Heading as="h3" className="mb-2 text-center">
Expand Down
96 changes: 49 additions & 47 deletions apps/web/lib/features/task/task-status.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ export function useMapToTaskStatusValues<T extends ITaskStatusItemList>(data: T[
bgColor: item.color,
bordered,
icon: (
<div className="relative flex items-center">
<div className="flex relative items-center">
{item.fullIconUrl && (
<Image layout="fixed" src={item.fullIconUrl} height="20" width="16" alt={item.name} />
)}
Expand Down Expand Up @@ -205,53 +205,55 @@ export function useStatusValue<T extends ITaskStatusField>({
const items = useMemo(() => {
return Object.keys(statusItems).map((key) => {
const value = statusItems[key as ITaskStatusStack[T]];

if (!value.value) {
value.value = key;
}
return {
...value,
name: key.split('-').join(' ')
name: key,
displayName: key.split('-').join(' ')
} as Required<TStatusItem>;
});
}, [statusItems]);

const [value, setValue] = useState<ITaskStatusStack[T] | undefined>($value);
const [values, setValues] = useState<ITaskStatusStack[T][]>(defaultValues);

const item: TStatusItem | undefined = useMemo(() => items.find((r) => r.value === value), [items, value]);
const item: TStatusItem | undefined = useMemo(
() => items.find((r) => r.value === value || r.name === value),
[items, value]
);

useEffect(() => {
setValue($value);
}, [$value]);
if ($value !== value) {
setValue($value);
}
}, [$value, value]);

useEffect(() => {
setValues(defaultValues);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [defaultValues.length]);
if (defaultValues.length > 0 && JSON.stringify(values) !== JSON.stringify(defaultValues)) {
setValues(defaultValues);
}
}, [defaultValues, values]);

const onChange = useCallback(
(value: ITaskStatusStack[T]) => {
// Handle multiple select
let values: ITaskStatusStack[T][] = [];
if (multipleRef.current) {
if (typeof value === 'string') {
setValues((arr) => {
const exists = arr.includes(value);
values = exists ? arr.filter((v) => v !== value) : [...arr, value];
return values;
});
} else {
setValues(value);
values = value;
}
setValues((prevValues) => {
const newValues = typeof value === 'string'
? (prevValues.includes(value)
? prevValues.filter((v) => v !== value)
: [...prevValues, value])
: Array.isArray(value) ? value : [value];

onValueChangeRef.current?.(value, newValues);
return newValues;
});
} else {
setValue(value);
onValueChangeRef.current?.(value, [value]);
}

onValueChangeRef.current && onValueChangeRef.current(value, values);
},
[setValue, onValueChangeRef, setValues, multipleRef]
[onValueChangeRef, multipleRef]
);

return {
Expand Down Expand Up @@ -609,7 +611,7 @@ export function TaskPriorityStatus({
{...taskPrioritiesValues[task?.priority]}
showIssueLabels={showIssueLabels}
issueType="issue"
className={clsxm('rounded-md px-2 text-white', className)}
className={clsxm('px-2 text-white rounded-md', className)}
bordered={false}
/>
) : (
Expand Down Expand Up @@ -821,18 +823,18 @@ export function TaskStatus({
isEpic
}: PropsWithChildren<
TStatusItem &
IClassName & {
active?: boolean;
issueType?: 'status' | 'issue';
showIssueLabels?: boolean;
forDetails?: boolean;
titleClassName?: string;
cheched?: boolean;
sidebarUI?: boolean;
value?: string;
isVersion?: boolean;
isEpic?: boolean;
}
IClassName & {
active?: boolean;
issueType?: 'status' | 'issue';
showIssueLabels?: boolean;
forDetails?: boolean;
titleClassName?: string;
cheched?: boolean;
sidebarUI?: boolean;
value?: string;
isVersion?: boolean;
isEpic?: boolean;
}
>) {
const { theme } = useTheme();
const readableColorHex = readableColor(backgroundColor || (theme === 'light' ? '#FFF' : '#000'));
Expand Down Expand Up @@ -861,7 +863,7 @@ export function TaskStatus({
>
<div
className={cn(
'flex items-center gap-x-1 whitespace-nowrap text-ellipsis overflow-hidden',
'flex overflow-hidden gap-x-1 items-center whitespace-nowrap text-ellipsis',
titleClassName
)}
>
Expand All @@ -881,13 +883,13 @@ export function TaskStatus({

{name && (issueType !== 'issue' || showIssueLabels) && (
<div
className={`capitalize text-ellipsis overflow-hidden`}
className={`overflow-hidden capitalize text-ellipsis`}
title={realName || name}
style={
isVersion || isEpic
? {
color: theme === 'light' ? '#000' : '#FFF'
}
color: theme === 'light' ? '#000' : '#FFF'
}
: {}
}
>
Expand Down Expand Up @@ -1045,7 +1047,7 @@ export function StatusDropdown<T extends TStatusItem>({
sidebarUI && ['text-xs'],
'text-dark dark:text-white bg-[#F2F2F2] dark:bg-dark--theme-light',
forDetails &&
'bg-transparent border dark:border-[#FFFFFF33] dark:bg-[#1B1D22]',
'bg-transparent border dark:border-[#FFFFFF33] dark:bg-[#1B1D22]',
taskStatusClassName
)}
name={
Expand All @@ -1056,7 +1058,7 @@ export function StatusDropdown<T extends TStatusItem>({
isEpic={isEpic}
>
<ChevronDownIcon
className={clsxm('h-5 w-5 text-default dark:text-white')}
className={clsxm('w-5 h-5 text-default dark:text-white')}
/>
</TaskStatus>
)}
Expand Down Expand Up @@ -1091,7 +1093,7 @@ export function StatusDropdown<T extends TStatusItem>({
as={Fragment}
disabled={disabled}
>
<li className="relative outline-none cursor-pointer">
<li className="relative cursor-pointer outline-none">
<TaskStatus
showIcon={showIcon}
{...item}
Expand Down Expand Up @@ -1234,7 +1236,7 @@ export function MultipleStatusDropdown<T extends TStatusItem>({
: defaultValue.name
}
>
<ChevronDownIcon className={clsxm('h-5 w-5 text-default dark:text-white')} />
<ChevronDownIcon className={clsxm('w-5 h-5 text-default dark:text-white')} />
</TaskStatus>
</Listbox.Button>

Expand Down Expand Up @@ -1265,7 +1267,7 @@ export function MultipleStatusDropdown<T extends TStatusItem>({
as={Fragment}
disabled={disabled}
>
<li className="relative outline-none cursor-pointer">
<li className="relative cursor-pointer outline-none">
<TaskStatus
showIcon={showIcon}
{...item}
Expand Down
2 changes: 1 addition & 1 deletion apps/web/lib/settings/icon-popover.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const IconPopover = ({

const buttonRef = useRef<any>();
return (
<Popover className="relative border-none no-underline w-[auto]">
<Popover className="relative border-none no-underline w-[auto]" onProgressCapture={(e) => e.stopPropagation()}>
{() => (
<>
<Popover.Button className="outline-none w-full" ref={buttonRef}>
Expand Down
20 changes: 8 additions & 12 deletions apps/web/lib/settings/personal-setting-form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,9 +180,8 @@ export const PersonalSettingForm = () => {
required: true,
maxLength: 80
})}
className={`w-full m-0 h-[54px] ${
!editFullname ? 'disabled:bg-[#FCFCFC]' : ''
}`}
className={`w-full m-0 h-[54px] ${!editFullname ? 'disabled:bg-[#FCFCFC]' : ''
}`}
disabled={!editFullname}
wrapperClassName={`rounded-lg w-full lg:w-[230px] mb-0 mr-5`}
/>
Expand All @@ -192,9 +191,8 @@ export const PersonalSettingForm = () => {
{...register('lastName', {
maxLength: 80
})}
className={`w-full m-0 h-[54px] ${
!editFullname ? 'disabled:bg-[#FCFCFC]' : ''
}`}
className={`w-full m-0 h-[54px] ${!editFullname ? 'disabled:bg-[#FCFCFC]' : ''
}`}
disabled={!editFullname}
wrapperClassName={`rounded-lg w-full lg:w-[230px] mb-0 mr-5`}
/>
Expand Down Expand Up @@ -241,9 +239,8 @@ export const PersonalSettingForm = () => {
required: true,
pattern: /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
})}
className={`w-full m-0 h-[54px] ${
!editContacts ? 'disabled:bg-[#FCFCFC]' : ''
}`}
className={`w-full m-0 h-[54px] ${!editContacts ? 'disabled:bg-[#FCFCFC]' : ''
}`}
onChange={checkEmailValidity}
disabled={!editContacts}
notValidBorder={!isValid.email}
Expand All @@ -262,9 +259,8 @@ export const PersonalSettingForm = () => {
{...register('phoneNumber', {
valueAsNumber: true
})}
className={`w-full m-0 h-[54px] ${
!editContacts ? 'disabled:bg-[#FCFCFC]' : ''
}`}
className={`w-full m-0 h-[54px] ${!editContacts ? 'disabled:bg-[#FCFCFC]' : ''
}`}
onChange={checkPhoneValidity}
disabled={!editContacts}
notValidBorder={!isValid.phone}
Expand Down
2 changes: 1 addition & 1 deletion apps/web/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
"@headlessui/react": "^1.7.7",
"@heroicons/react": "^2.0.12",
"@hookform/resolvers": "^3.9.1",
"@jitsi/react-sdk": "^1.3.0",
"@jitsi/react-sdk": "^1.4.0",
"@jitsu/jitsu-react": "^1.3.0",
"@livekit/components-react": "^2.4.1",
"@livekit/components-styles": "^1.0.12",
Expand Down
8 changes: 4 additions & 4 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3540,10 +3540,10 @@
dependencies:
regenerator-runtime "^0.13.3"

"@jitsi/react-sdk@^1.3.0":
version "1.3.0"
resolved "https://registry.yarnpkg.com/@jitsi/react-sdk/-/react-sdk-1.3.0.tgz#9013921896c2830806ffdd449d7487e05d9c99ad"
integrity sha512-f+xtk/j0iXIMJscJeGt3OXnocFeG1pX6OMjv7H/9AaTnCUNsDc/jfDSPme+h0RmdymzJdkSwyHjmkhDK9aehzw==
"@jitsi/react-sdk@^1.4.0":
version "1.4.0"
resolved "https://registry.yarnpkg.com/@jitsi/react-sdk/-/react-sdk-1.4.0.tgz#4c300bf3d97632d7421eee71e2d335600878b5e7"
integrity sha512-1dn3WIZNyRuESh5qvBR52PQz/avM0Wl575WtuW2sRaNemx38+I1eHJvA58SNhC3zas1PkxBfjeBqmTUHeJlaCw==

"@jitsu/jitsu-react@^1.3.0":
version "1.3.0"
Expand Down

0 comments on commit 768b50f

Please sign in to comment.