Skip to content

Commit

Permalink
Merge pull request #2835 from ever-co/2669-bug-daily-plan--tab-assign…
Browse files Browse the repository at this point in the history 
…ed-access-the-action-menu-with-delay

fix: improve the delay when switching tabs (unassigend,assigned)
  • Loading branch information
@EverTechDevOps
EverTechDevOps authored Aug 7, 2024
2 parents ebc8653 + 2b52a8e commit 6c57a90
Show file tree
Hide file tree
Showing 6 changed files with 149 additions and 99 deletions.
38 changes: 25 additions & 13 deletions apps/web/app/[locale]/profile/[memberId]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,21 +41,33 @@ const Profile = React.memo(function ProfilePage({ params }: { params: { memberId
const setActivityTypeFilter = useSetRecoilState(activityTypeState);
const hook = useTaskFilter(profile);

const isManagerConnectedUser = activeTeamManagers.findIndex((member) => member.employee?.user?.id == user?.id);
const canSeeActivity = profile.userProfile?.id === user?.id || isManagerConnectedUser != -1;
const isManagerConnectedUser = useMemo(
() => activeTeamManagers.findIndex((member) => member.employee?.user?.id == user?.id),
[activeTeamManagers, user?.id]
);
const canSeeActivity = useMemo(
() => profile.userProfile?.id === user?.id || isManagerConnectedUser != -1,
[isManagerConnectedUser, profile.userProfile?.id, user?.id]
);

const t = useTranslations();
const breadcrumb = [
{ title: activeTeam?.name || '', href: '/' },
{ title: JSON.parse(t('pages.profile.BREADCRUMB')) || '', href: `/profile/${params.memberId}` }
];

const activityScreens = {
Tasks: <UserProfileTask profile={profile} tabFiltered={hook} />,
Screenshots: <ScreenshootTab />,
Apps: <AppsTab />,
'Visited Sites': <VisitedSitesTab />
};
const breadcrumb = useMemo(
() => [
{ title: activeTeam?.name || '', href: '/' },
{ title: JSON.parse(t('pages.profile.BREADCRUMB')) || '', href: `/profile/${params.memberId}` }
],
[activeTeam?.name, params.memberId, t]
);

const activityScreens = useMemo(
() => ({
Tasks: <UserProfileTask profile={profile} tabFiltered={hook} />,
Screenshots: <ScreenshootTab />,
Apps: <AppsTab />,
'Visited Sites': <VisitedSitesTab />
}),
[hook, profile]
);

const profileIsAuthUser = useMemo(() => profile.isAuthUser, [profile.isAuthUser]);
const hookFilterType = useMemo(() => hook.filterType, [hook.filterType]);
Expand Down
95 changes: 54 additions & 41 deletions apps/web/lib/features/task/task-card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,51 +101,64 @@ export function TaskCard(props: Props) {
const seconds = useRecoilValue(timerSecondsState);
const { activeTaskDailyStat, activeTaskTotalStat, addSeconds } = useTaskStatistics(seconds);
const { isTrackingEnabled, activeTeam } = useOrganizationTeams();
const members = activeTeam?.members || [];
const currentMember = members.find((m) => {
return m.employee.user?.id === profile?.userProfile?.id;
});
const members = useMemo(() => activeTeam?.members || [], [activeTeam?.members]);
const currentMember = useMemo(
() =>
members.find((m) => {
return m.employee.user?.id === profile?.userProfile?.id;
}),
[members, profile?.userProfile?.id]
);

const { h, m } = secondsToTime((activeTaskTotalStat?.duration || 0) + addSeconds);
const totalWork =
isAuthUser && activeAuthTask ? (
<div className={clsxm('flex space-x-2 items-center font-normal')}>
<span className="text-gray-500 lg:text-sm">{t('pages.taskDetails.TOTAL_TIME')}:</span>
<Text>
{h}h : {m}m
</Text>
</div>
) : (
<></>
);

const totalWork = useMemo(
() =>
isAuthUser && activeAuthTask ? (
<div className={clsxm('flex space-x-2 items-center font-normal')}>
<span className="text-gray-500 lg:text-sm">{t('pages.taskDetails.TOTAL_TIME')}:</span>
<Text>
{h}h : {m}m
</Text>
</div>
) : (
<></>
),
[activeAuthTask, h, isAuthUser, m, t]
);
// Daily work
const { h: dh, m: dm } = secondsToTime((activeTaskDailyStat?.duration || 0) + addSeconds);
const todayWork =
isAuthUser && activeAuthTask ? (
<div className={clsxm('flex flex-col items-start font-normal')}>
<span className="text-xs text-gray-500">{t('common.TOTAL_WORK')}</span>
<Text>
{dh}h : {dm}m
</Text>
</div>
) : (
<></>
);

const { h: dh, m: dm } = useMemo(
() => secondsToTime((activeTaskDailyStat?.duration || 0) + addSeconds),
[activeTaskDailyStat?.duration, addSeconds]
);
const todayWork = useMemo(
() =>
isAuthUser && activeAuthTask ? (
<div className={clsxm('flex flex-col items-start font-normal')}>
<span className="text-xs text-gray-500">{t('common.TOTAL_WORK')}</span>
<Text>
{dh}h : {dm}m
</Text>
</div>
) : (
<></>
),
[activeAuthTask, dh, dm, isAuthUser, t]
);
const memberInfo = useTeamMemberCard(currentMember || undefined);
const taskEdition = useTMCardTaskEdit(task);
const activeMembers = task != null && task?.members?.length > 0;
const hasMembers = task?.members && task?.members?.length > 0;
const taskAssignee: ImageOverlapperProps[] =
task?.members?.map((member: any) => {
return {
id: member.user?.id,
url: member.user?.imageUrl,
alt: member.user?.firstName
};
}) || [];

const activeMembers = useMemo(() => task != null && task?.members?.length > 0, [task]);
const hasMembers = useMemo(() => task?.members && task?.members?.length > 0, [task?.members]);
const taskAssignee: ImageOverlapperProps[] = useMemo(
() =>
task?.members?.map((member: any) => {
return {
id: member.user?.id,
url: member.user?.imageUrl,
alt: member.user?.firstName
};
}) || [],
[task?.members]
);
return (
<>
<Card
Expand Down Expand Up @@ -304,7 +317,7 @@ export function TaskCard(props: Props) {

function UsersTaskAssigned({ task, className }: { task: Nullable<ITeamTask> } & IClassName) {
const t = useTranslations();
const members = task?.members || [];
const members = useMemo(() => task?.members || [], [task?.members]);

return (
<div className={clsxm('flex justify-center items-center', className)}>
Expand Down
34 changes: 22 additions & 12 deletions apps/web/lib/features/task/task-filters.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,15 +48,22 @@ type StatusFilter = { [x in IStatusType]: string[] };
*/
export function useTaskFilter(profile: I_UserProfilePage) {
const t = useTranslations();
const defaultValue =
typeof window !== 'undefined' ? (window.localStorage.getItem('task-tab') as ITab) || null : 'worked';

const defaultValue = useMemo(
() => (typeof window !== 'undefined' ? (window.localStorage.getItem('task-tab') as ITab) || null : 'worked'),
[]
);
const { activeTeamManagers, activeTeam } = useOrganizationTeams();
const { user } = useAuthenticateUser();
const { profileDailyPlans } = useDailyPlan();

const isManagerConnectedUser = activeTeamManagers.findIndex((member) => member.employee?.user?.id == user?.id);
const canSeeActivity = profile.userProfile?.id === user?.id || isManagerConnectedUser != -1;
const isManagerConnectedUser = useMemo(
() => activeTeamManagers.findIndex((member) => member.employee?.user?.id == user?.id),
[activeTeamManagers, user?.id]
);
const canSeeActivity = useMemo(
() => profile.userProfile?.id === user?.id || isManagerConnectedUser != -1,
[isManagerConnectedUser, profile.userProfile?.id, user?.id]
);

const [tab, setTab] = useState<ITab>(defaultValue || 'worked');
const [filterType, setFilterType] = useState<FilterType>(undefined);
Expand All @@ -67,14 +74,17 @@ export function useTaskFilter(profile: I_UserProfilePage) {

const [taskName, setTaskName] = useState('');

const tasksFiltered: { [x in ITab]: ITeamTask[] } = {
unassigned: profile.tasksGrouped.unassignedTasks,
assigned: profile.tasksGrouped.assignedTasks,
worked: profile.tasksGrouped.workedTasks,
dailyplan: [] // Change this soon
};
const tasksFiltered: { [x in ITab]: ITeamTask[] } = useMemo(
() => ({
unassigned: profile.tasksGrouped.unassignedTasks,
assigned: profile.tasksGrouped.assignedTasks,
worked: profile.tasksGrouped.workedTasks,
dailyplan: [] // Change this soon
}),
[profile.tasksGrouped.assignedTasks, profile.tasksGrouped.unassignedTasks, profile.tasksGrouped.workedTasks]
);

const tasks = tasksFiltered[tab];
const tasks = useMemo(() => tasksFiltered[tab], [tab, tasksFiltered]);

const outclickFilterCard = useOutsideClick<HTMLDivElement>(() => {
if (filterType === 'search' && taskName.trim().length === 0) {
Expand Down
30 changes: 15 additions & 15 deletions apps/web/lib/features/task/task-status.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -775,18 +775,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 @@ -839,8 +839,8 @@ export function TaskStatus({
style={
isVersion || isEpic
? {
color: theme === 'light' ? '#000' : '#FFF'
}
color: theme === 'light' ? '#000' : '#FFF'
}
: {}
}
>
Expand Down Expand Up @@ -996,7 +996,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 Down
43 changes: 28 additions & 15 deletions apps/web/lib/features/task/task-times.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { IClassName, ITeamTask, Nullable, OT_Member } from '@app/interfaces';
import { clsxm } from '@app/utils';
import { Text, Tooltip } from 'lib/components';
import { useTranslations } from 'next-intl';
import { useMemo } from 'react';

type Props = {
task: Nullable<ITeamTask>;
Expand All @@ -18,23 +19,35 @@ type Props = {
export function TaskTimes({ className, task, memberInfo, showDaily = true, showTotal = true, isBlock = false }: Props) {
// For public page
const { activeTeam } = useOrganizationTeams();
const currentMember = activeTeam?.members.find((member) => member.id === memberInfo?.member?.id || memberInfo?.id);
const currentMember = useMemo(
() => activeTeam?.members.find((member) => member.id === memberInfo?.member?.id || memberInfo?.id),
[activeTeam?.members, memberInfo?.id, memberInfo?.member?.id]
);

const { h, m } = secondsToTime(
(currentMember?.totalWorkedTasks &&
currentMember?.totalWorkedTasks?.length &&
currentMember?.totalWorkedTasks
.filter((t) => t.id === task?.id)
.reduce((previousValue, currentValue) => previousValue + currentValue.duration, 0)) ||
0
const { h, m } = useMemo(
() =>
secondsToTime(
(currentMember?.totalWorkedTasks &&
currentMember?.totalWorkedTasks?.length &&
currentMember?.totalWorkedTasks
.filter((t) => t.id === task?.id)
.reduce((previousValue, currentValue) => previousValue + currentValue.duration, 0)) ||
0
),
[currentMember?.totalWorkedTasks, task?.id]
);
const { h: dh, m: dm } = secondsToTime(
(currentMember?.totalTodayTasks &&
currentMember?.totalTodayTasks.length &&
currentMember?.totalTodayTasks
.filter((t) => t.id === task?.id)
.reduce((previousValue, currentValue) => previousValue + currentValue.duration, 0)) ||
0

const { h: dh, m: dm } = useMemo(
() =>
secondsToTime(
(currentMember?.totalTodayTasks &&
currentMember?.totalTodayTasks.length &&
currentMember?.totalTodayTasks
.filter((t) => t.id === task?.id)
.reduce((previousValue, currentValue) => previousValue + currentValue.duration, 0)) ||
0
),
[currentMember?.totalTodayTasks, task?.id]
);

return (
Expand Down
8 changes: 5 additions & 3 deletions apps/web/lib/features/user-profile-tasks.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { UserProfilePlans } from 'lib/features';
import { TaskCard } from './task/task-card';
import { I_TaskFilter } from './task/task-filters';
import { useTranslations } from 'next-intl';
import { useMemo } from 'react';
type Props = {
tabFiltered: I_TaskFilter;
profile: I_UserProfilePage;
Expand All @@ -23,10 +24,11 @@ export function UserProfileTask({ profile, tabFiltered }: Props) {
/**
* When tab is worked, then filter exclude the active task
*/
const tasks = tabFiltered.tasksFiltered;
const tasks = useMemo(() => tabFiltered.tasksFiltered, [tabFiltered.tasksFiltered]);

const otherTasks = tasks.filter((t) =>
profile.member?.running == true ? t.id !== profile.activeUserTeamTask?.id : t
const otherTasks = useMemo(
() => tasks.filter((t) => (profile.member?.running == true ? t.id !== profile.activeUserTeamTask?.id : t)),
[profile.activeUserTeamTask?.id, profile.member?.running, tasks]
);
// const data = otherTasks.length < 10 ? otherTasks : data;

Expand Down

0 comments on commit 6c57a90

Please sign in to comment.