bo/worklenz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'feature/recurring-tasks' of https://github.com/Worklenz/worklenz into fix/performance-improvements

Browse Source
This commit is contained in:
chamikaJ
2025-05-30 10:55:28 +05:30
parent f9858fbd4b 80797e043c
commit f38a7b4d56
35 changed files with 2088 additions and 1119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
worklenz-frontend/src/components/EmptyListPlaceholder.tsx
View File

@@ -8,7 +8,7 @@ type EmptyListPlaceholderProps = {
};
const EmptyListPlaceholder = ({
imageSrc = '/src/assets/images/empty-box.webp',
imageSrc = 'https://s3.us-west-2.amazonaws.com/worklenz.com/assets/empty-box.webp',
imageHeight = 60,
text,
}: EmptyListPlaceholderProps) => {

24
worklenz-frontend/src/components/HubSpot.tsx Normal file
View File

@@ -0,0 +1,24 @@
import { useEffect } from 'react';
const HubSpot = () => {
useEffect(() => {
const script = document.createElement('script');
script.type = 'text/javascript';
script.id = 'hs-script-loader';
script.async = true;
script.defer = true;
script.src = '//js.hs-scripts.com/22348300.js';
document.body.appendChild(script);
return () => {
const existingScript = document.getElementById('hs-script-loader');
if (existingScript) {
existingScript.remove();
}
};
}, []);
return null;
};
export default HubSpot;

99
worklenz-frontend/src/components/task-drawer/shared/info-tab/details/task-drawer-recurring-config/task-drawer-recurring-config.tsx
View File

@@ -24,44 +24,46 @@ import { taskRecurringApiService } from '@/api/tasks/task-recurring.api.service'
import logger from '@/utils/errorLogger';
import { setTaskRecurringSchedule } from '@/features/task-drawer/task-drawer.slice';
const repeatOptions: IRepeatOption[] = [
{ label: 'Daily', value: ITaskRecurring.Daily },
{ label: 'Weekly', value: ITaskRecurring.Weekly },
{ label: 'Every X Days', value: ITaskRecurring.EveryXDays },
{ label: 'Every X Weeks', value: ITaskRecurring.EveryXWeeks },
{ label: 'Every X Months', value: ITaskRecurring.EveryXMonths },
{ label: 'Monthly', value: ITaskRecurring.Monthly },
];
const daysOfWeek = [
{ label: 'Sunday', value: 0, checked: false },
{ label: 'Monday', value: 1, checked: false },
{ label: 'Tuesday', value: 2, checked: false },
{ label: 'Wednesday', value: 3, checked: false },
{ label: 'Thursday', value: 4, checked: false },
{ label: 'Friday', value: 5, checked: false },
{ label: 'Saturday', value: 6, checked: false }
];
const monthlyDateOptions = Array.from({ length: 28 }, (_, i) => i + 1);
const weekOptions = [
{ label: 'First', value: 1 },
{ label: 'Second', value: 2 },
{ label: 'Third', value: 3 },
{ label: 'Fourth', value: 4 },
{ label: 'Last', value: 5 }
];
const dayOptions = daysOfWeek.map(d => ({ label: d.label, value: d.value }));
const TaskDrawerRecurringConfig = ({ task }: { task: ITaskViewModel }) => {
const { socket, connected } = useSocket();
const dispatch = useAppDispatch();
const { t } = useTranslation('task-drawer/task-drawer-recurring-config');
const repeatOptions: IRepeatOption[] = [
{ label: t('daily'), value: ITaskRecurring.Daily },
{ label: t('weekly'), value: ITaskRecurring.Weekly },
{ label: t('everyXDays'), value: ITaskRecurring.EveryXDays },
{ label: t('everyXWeeks'), value: ITaskRecurring.EveryXWeeks },
{ label: t('everyXMonths'), value: ITaskRecurring.EveryXMonths },
{ label: t('monthly'), value: ITaskRecurring.Monthly },
];
const daysOfWeek = [
{ label: t('sun'), value: 0, checked: false },
{ label: t('mon'), value: 1, checked: false },
{ label: t('tue'), value: 2, checked: false },
{ label: t('wed'), value: 3, checked: false },
{ label: t('thu'), value: 4, checked: false },
{ label: t('fri'), value: 5, checked: false },
{ label: t('sat'), value: 6, checked: false }
];
const weekOptions = [
{ label: t('first'), value: 1 },
{ label: t('second'), value: 2 },
{ label: t('third'), value: 3 },
{ label: t('fourth'), value: 4 },
{ label: t('last'), value: 5 }
];
const dayOptions = daysOfWeek.map(d => ({ label: d.label, value: d.value }));
const [recurring, setRecurring] = useState(false);
const [showConfig, setShowConfig] = useState(false);
const [repeatOption, setRepeatOption] = useState<IRepeatOption>({});
const [selectedDays, setSelectedDays] = useState([]);
const [selectedDays, setSelectedDays] = useState<number[]>([]);
const [monthlyOption, setMonthlyOption] = useState('date');
const [selectedMonthlyDate, setSelectedMonthlyDate] = useState(1);
const [selectedMonthlyWeek, setSelectedMonthlyWeek] = useState(weekOptions[0].value);
@@ -106,8 +108,8 @@ const TaskDrawerRecurringConfig = ({ task }: { task: ITaskViewModel }) => {
[repeatOption]
);
const handleDayCheckboxChange = (checkedValues: string[]) => {
setSelectedDays(checkedValues as unknown as string[]);
const handleDayCheckboxChange = (checkedValues: number[]) => {
setSelectedDays(checkedValues);
};
const getSelectedDays = () => {
@@ -165,7 +167,9 @@ const TaskDrawerRecurringConfig = ({ task }: { task: ITaskViewModel }) => {
const res = await taskRecurringApiService.updateTaskRecurringData(task.schedule_id, body);
if (res.done) {
setRecurring(true);
setShowConfig(false);
configVisibleChange(false);
}
} catch (e) {
logger.error("handleSave", e);
@@ -220,9 +224,9 @@ const TaskDrawerRecurringConfig = ({ task }: { task: ITaskViewModel }) => {
if (!task) return;
if (task) setRecurring(!!task.schedule_id);
if (recurring) void getScheduleData();
if (task.schedule_id) void getScheduleData();
socket?.on(SocketEvents.TASK_RECURRING_CHANGE.toString(), handleResponse);
}, [task]);
}, [task?.schedule_id]);
return (
<div>
@@ -232,11 +236,11 @@ const TaskDrawerRecurringConfig = ({ task }: { task: ITaskViewModel }) => {
&nbsp;
{recurring && (
<Popover
title="Recurring task configuration"
title={t('recurringTaskConfiguration')}
content={
<Skeleton loading={loadingData} active>
<Form layout="vertical">
<Form.Item label="Repeats">
<Form.Item label={t('repeats')}>
<Select
value={repeatOption.value}
onChange={val => {
@@ -251,9 +255,12 @@ const TaskDrawerRecurringConfig = ({ task }: { task: ITaskViewModel }) => {
</Form.Item>
{repeatOption.value === ITaskRecurring.Weekly && (
<Form.Item label="Select Days of the Week">
<Form.Item label={t('selectDaysOfWeek')}>
<Checkbox.Group
options={daysOfWeek}
options={daysOfWeek.map(day => ({
label: day.label,
value: day.value
}))}
value={selectedDays}
onChange={handleDayCheckboxChange}
style={{ width: '100%' }}
@@ -271,17 +278,17 @@ const TaskDrawerRecurringConfig = ({ task }: { task: ITaskViewModel }) => {
{isMonthlySelected && (
<>
<Form.Item label="Monthly repeat type">
<Form.Item label={t('monthlyRepeatType')}>
<Radio.Group
value={monthlyOption}
onChange={e => setMonthlyOption(e.target.value)}
>
<Radio.Button value="date">On a specific date</Radio.Button>
<Radio.Button value="day">On a specific day</Radio.Button>
<Radio.Button value="date">{t('onSpecificDate')}</Radio.Button>
<Radio.Button value="day">{t('onSpecificDay')}</Radio.Button>
</Radio.Group>
</Form.Item>
{monthlyOption === 'date' && (
<Form.Item label="Date of the month">
<Form.Item label={t('dateOfMonth')}>
<Select
value={selectedMonthlyDate}
onChange={setSelectedMonthlyDate}
@@ -295,7 +302,7 @@ const TaskDrawerRecurringConfig = ({ task }: { task: ITaskViewModel }) => {
)}
{monthlyOption === 'day' && (
<>
<Form.Item label="Week of the month">
<Form.Item label={t('weekOfMonth')}>
<Select
value={selectedMonthlyWeek}
onChange={setSelectedMonthlyWeek}
@@ -303,7 +310,7 @@ const TaskDrawerRecurringConfig = ({ task }: { task: ITaskViewModel }) => {
style={{ width: 150 }}
/>
</Form.Item>
<Form.Item label="Day of the week">
<Form.Item label={t('dayOfWeek')}>
<Select
value={selectedMonthlyDay}
onChange={setSelectedMonthlyDay}
@@ -317,7 +324,7 @@ const TaskDrawerRecurringConfig = ({ task }: { task: ITaskViewModel }) => {
)}
{repeatOption.value === ITaskRecurring.EveryXDays && (
<Form.Item label="Interval (days)">
<Form.Item label={t('intervalDays')}>
<InputNumber
min={1}
value={intervalDays}
@@ -326,7 +333,7 @@ const TaskDrawerRecurringConfig = ({ task }: { task: ITaskViewModel }) => {
</Form.Item>
)}
{repeatOption.value === ITaskRecurring.EveryXWeeks && (
<Form.Item label="Interval (weeks)">
<Form.Item label={t('intervalWeeks')}>
<InputNumber
min={1}
value={intervalWeeks}
@@ -335,7 +342,7 @@ const TaskDrawerRecurringConfig = ({ task }: { task: ITaskViewModel }) => {
</Form.Item>
)}
{repeatOption.value === ITaskRecurring.EveryXMonths && (
<Form.Item label="Interval (months)">
<Form.Item label={t('intervalMonths')}>
<InputNumber
min={1}
value={intervalMonths}
@@ -350,7 +357,7 @@ const TaskDrawerRecurringConfig = ({ task }: { task: ITaskViewModel }) => {
loading={updatingData}
onClick={handleSave}
>
Save Changes
{t('saveChanges')}
</Button>
</Form.Item>
</Form>

50
worklenz-frontend/src/components/task-drawer/task-drawer-header/task-drawer-header.tsx
View File

@@ -27,6 +27,7 @@ const TaskDrawerHeader = ({ inputRef, t }: TaskDrawerHeaderProps) => {
const { socket, connected } = useSocket();
const { clearTaskFromUrl } = useTaskDrawerUrlSync();
const isDeleting = useRef(false);
const [isEditing, setIsEditing] = useState(false);
const { taskFormViewModel, selectedTaskId } = useAppSelector(state => state.taskDrawerReducer);
const [taskName, setTaskName] = useState<string>(taskFormViewModel?.task?.name ?? '');
@@ -88,6 +89,7 @@ const TaskDrawerHeader = ({ inputRef, t }: TaskDrawerHeaderProps) => {
};
const handleInputBlur = () => {
setIsEditing(false);
if (
!selectedTaskId ||
!connected ||
@@ -113,21 +115,39 @@ const TaskDrawerHeader = ({ inputRef, t }: TaskDrawerHeaderProps) => {
return (
<Flex gap={12} align="center" style={{ marginBlockEnd: 6 }}>
<Flex style={{ position: 'relative', width: '100%' }}>
<Input
ref={inputRef}
size="large"
value={taskName}
onChange={e => onTaskNameChange(e)}
onBlur={handleInputBlur}
placeholder={t('taskHeader.taskNamePlaceholder')}
className="task-name-input"
style={{
width: '100%',
border: 'none',
}}
showCount={false}
maxLength={250}
/>
{isEditing ? (
<Input
ref={inputRef}
size="large"
value={taskName}
onChange={e => onTaskNameChange(e)}
onBlur={handleInputBlur}
placeholder={t('taskHeader.taskNamePlaceholder')}
className="task-name-input"
style={{
width: '100%',
border: 'none',
}}
showCount={true}
maxLength={250}
autoFocus
/>
) : (
<p
onClick={() => setIsEditing(true)}
style={{
margin: 0,
padding: '4px 11px',
fontSize: '16px',
cursor: 'pointer',
wordWrap: 'break-word',
overflowWrap: 'break-word',
width: '100%'
}}
>
{taskName || t('taskHeader.taskNamePlaceholder')}
</p>
)}
</Flex>
<TaskDrawerStatusDropdown

4
worklenz-frontend/src/components/task-drawer/task-drawer-status-dropdown/task-drawer-status-dropdown.tsx
View File

@@ -12,7 +12,7 @@ import { ITaskViewModel } from '@/types/tasks/task.types';
import { ITaskStatus } from '@/types/tasks/taskStatus.types';
import { checkTaskDependencyStatus } from '@/utils/check-task-dependency-status';
import { Select } from 'antd';
import { useEffect, useMemo } from 'react';
import { useMemo } from 'react';
interface TaskDrawerStatusDropdownProps {
statuses: ITaskStatus[];
@@ -21,7 +21,7 @@ interface TaskDrawerStatusDropdownProps {
}
const TaskDrawerStatusDropdown = ({ statuses, task, teamId }: TaskDrawerStatusDropdownProps) => {
const { socket, connected } = useSocket();
const { socket } = useSocket();
const dispatch = useAppDispatch();
const themeMode = useAppSelector(state => state.themeReducer.mode);
const { tab } = useTabSearchParam();

7
worklenz-frontend/src/index.css
View File

@@ -58,9 +58,9 @@ html.light body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "Inter", Roboto, "Helvetica Neue", Arial,
"Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Noto Color Emoji" !important;
font-family:
-apple-system, BlinkMacSystemFont, "Inter", Roboto, "Helvetica Neue", Arial, "Noto Sans",
sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}
/* helper classes */
@@ -145,3 +145,4 @@ Not supports in Firefox and IE */
tr:hover .action-buttons {
opacity: 1;
}

5
worklenz-frontend/src/layouts/MainLayout.tsx
View File

@@ -7,7 +7,7 @@ import { colors } from '../styles/colors';
import { verifyAuthentication } from '@/features/auth/authSlice';
import { useEffect } from 'react';
import { useAppDispatch } from '@/hooks/useAppDispatch';
import TawkTo from '@/components/TawkTo';
import HubSpot from '@/components/HubSpot';
const MainLayout = () => {
const themeMode = useAppSelector(state => state.themeReducer.mode);
@@ -68,9 +68,6 @@ const MainLayout = () => {
<Outlet />
</Col>
</Layout.Content>
{import.meta.env.VITE_APP_ENV === 'production' && (
<TawkTo propertyId="67ecc524f62fbf190db18bde" widgetId="1inqe45sq" />
)}
</Layout>
</ConfigProvider>
);

16
worklenz-frontend/src/lib/settings/settings-constants.ts
View File

@@ -108,14 +108,14 @@ export const settingsItems: SettingMenuItems[] = [
element: React.createElement(CategoriesSettings),
adminOnly: true,
},
// {
// key: 'project-templates',
// name: 'project-templates',
// endpoint: 'project-templates',
// icon: React.createElement(FileZipOutlined),
// element: React.createElement(ProjectTemplatesSettings),
// adminOnly: true,
// },
{
key: 'project-templates',
name: 'project-templates',
endpoint: 'project-templates',
icon: React.createElement(FileZipOutlined),
element: React.createElement(ProjectTemplatesSettings),
adminOnly: true,
},
{
key: 'task-templates',
name: 'task-templates',

2
worklenz-frontend/src/pages/home/recent-and-favourite-project-list/recent-and-favourite-project-list.tsx
View File

@@ -132,7 +132,7 @@ const RecentAndFavouriteProjectList = () => {
<div style={{ maxHeight: 420, overflow: 'auto' }}>
{projectsData?.body?.length === 0 ? (
<Empty
image="https://app.worklenz.com/assets/images/empty-box.webp"
image="https://s3.us-west-2.amazonaws.com/worklenz.com/assets/empty-box.webp"
imageStyle={{ height: 60 }}
style={{
display: 'flex',

2
worklenz-frontend/src/pages/home/task-list/tasks-list.tsx
View File

@@ -259,7 +259,7 @@ const TasksList: React.FC = React.memo(() => {
<Skeleton active />
) : data?.body.total === 0 ? (
<EmptyListPlaceholder
imageSrc="https://app.worklenz.com/assets/images/empty-box.webp"
imageSrc="https://s3.us-west-2.amazonaws.com/worklenz.com/assets/empty-box.webp"
text=" No tasks to show."
/>
) : (

2
worklenz-frontend/src/pages/home/todo-list/todo-list.tsx
View File

@@ -147,7 +147,7 @@ const TodoList = () => {
<div style={{ maxHeight: 420, overflow: 'auto' }}>
{data?.body.length === 0 ? (
<EmptyListPlaceholder
imageSrc="/src/assets/images/empty-box.webp"
imageSrc="https://s3.us-west-2.amazonaws.com/worklenz.com/assets/empty-box.webp"
text={t('home:todoList.noTasks')}
/>
) : (

2
worklenz-frontend/src/pages/projects/projectView/members/project-view-members.tsx
View File

@@ -263,7 +263,7 @@ const ProjectViewMembers = () => {
>
{members?.total === 0 ? (
<EmptyListPlaceholder
imageSrc="https://app.worklenz.com/assets/images/empty-box.webp"
imageSrc="https://s3.us-west-2.amazonaws.com/worklenz.com/assets/empty-box.webp"
imageHeight={120}
text={t('emptyText')}
/>

16
worklenz-frontend/src/pages/reporting/time-reports/members-time-sheet/members-time-sheet.tsx
View File

@@ -81,6 +81,22 @@ const MembersTimeSheet = forwardRef<MembersTimeSheetRef>((_, ref) => {
display: false,
position: 'top' as const,
},
tooltip: {
callbacks: {
label: function(context: any) {
const idx = context.dataIndex;
const member = jsonData[idx];
const hours = member?.utilized_hours || '0.00';
const percent = member?.utilization_percent || '0.00';
const overUnder = member?.over_under_utilized_hours || '0.00';
return [
`${context.dataset.label}: ${hours} h`,
`Utilization: ${percent}%`,
`Over/Under Utilized: ${overUnder} h`
];
}
}
}
},
backgroundColor: 'black',
indexAxis: 'y' as const,

4
worklenz-frontend/src/pages/settings/project-templates/project-templates-settings.tsx
View File

@@ -51,7 +51,7 @@ const ProjectTemplatesSettings = () => {
style={{ display: 'flex', gap: '10px', justifyContent: 'right' }}
className="button-visibilty"
>
<Tooltip title={t('editToolTip')}>
{/* <Tooltip title={t('editToolTip')}>
<Button
size="small"
onClick={() =>
@@ -60,7 +60,7 @@ const ProjectTemplatesSettings = () => {
>
<EditOutlined />
</Button>
</Tooltip>
</Tooltip> */}
<Tooltip title={t('deleteToolTip')}>
<Popconfirm
title={

3
worklenz-frontend/src/types/reporting/reporting.types.ts
View File

@@ -406,6 +406,9 @@ export interface IRPTTimeMember {
value?: number;
color_code: string;
logged_time?: string;
utilized_hours?: string;
utilization_percent?: string;
over_under_utilized_hours?: string;
}
export interface IMemberTaskStatGroupResonse {