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

feat(localization): enhance task drawer translations and UI consistency

Browse Source 
- Updated translations for task drawer components in Albanian, German, Spanish, Portuguese, Chinese, and English to improve clarity and consistency.
- Added new keys for task progress, activity log, and time log forms to support enhanced user interactions.
- Improved placeholder texts, error messages, and button labels for better user experience across multiple languages.
- Refactored activity log component to utilize translation keys for dynamic content rendering.
This commit is contained in:
chamikaJ
2025-07-08 15:51:47 +05:30
parent f06851fa37
commit 8fb33e311d
10 changed files with 394 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
worklenz-frontend/src/components/task-drawer/shared/activity-log/task-drawer-activity-log.tsx
View File

@@ -20,7 +20,7 @@ const TaskDrawerActivityLog = () => {
const [loading, setLoading] = useState<boolean>(false);
const { selectedTaskId, taskFormViewModel } = useAppSelector(state => state.taskDrawerReducer);
const { mode: themeMode } = useAppSelector(state => state.themeReducer);
const { t } = useTranslation();
const { t } = useTranslation('task-drawer/task-drawer');
useEffect(() => {
fetchActivityLogs();
@@ -73,7 +73,7 @@ const TaskDrawerActivityLog = () => {
</Tag>
<ArrowRightOutlined />
&nbsp;
<Tag color={'default'}>{activity.log_type === 'create' ? 'ADD' : 'REMOVE'}</Tag>
<Tag color={'default'}>{activity.log_type === 'create' ? t('taskActivityLogTab.add') : t('taskActivityLogTab.remove')}</Tag>
</Flex>
);
@@ -87,7 +87,7 @@ const TaskDrawerActivityLog = () => {
: activity.previous_status?.color_code
}
>
{truncateText(activity.previous_status?.name) || 'None'}
{truncateText(activity.previous_status?.name) || t('taskActivityLogTab.none')}
</Tag>
<ArrowRightOutlined />
&nbsp;
@@ -98,7 +98,7 @@ const TaskDrawerActivityLog = () => {
: activity.next_status?.color_code
}
>
{truncateText(activity.next_status?.name) || 'None'}
{truncateText(activity.next_status?.name) || t('taskActivityLogTab.none')}
</Tag>
</Flex>
);
@@ -113,7 +113,7 @@ const TaskDrawerActivityLog = () => {
: activity.previous_priority?.color_code
}
>
{truncateText(activity.previous_priority?.name) || 'None'}
{truncateText(activity.previous_priority?.name) || t('taskActivityLogTab.none')}
</Tag>
<ArrowRightOutlined />
&nbsp;
@@ -124,7 +124,7 @@ const TaskDrawerActivityLog = () => {
: activity.next_priority?.color_code
}
>
{truncateText(activity.next_priority?.name) || 'None'}
{truncateText(activity.next_priority?.name) || t('taskActivityLogTab.none')}
</Tag>
</Flex>
);
@@ -133,12 +133,12 @@ const TaskDrawerActivityLog = () => {
return (
<Flex gap={4} align="center">
<Tag color={activity.previous_phase?.color_code}>
{truncateText(activity.previous_phase?.name) || 'None'}
{truncateText(activity.previous_phase?.name) || t('taskActivityLogTab.none')}
</Tag>
<ArrowRightOutlined />
&nbsp;
<Tag color={activity.next_phase?.color_code}>
{truncateText(activity.next_phase?.name) || 'None'}
{truncateText(activity.next_phase?.name) || t('taskActivityLogTab.none')}
</Tag>
</Flex>
);
@@ -156,20 +156,20 @@ const TaskDrawerActivityLog = () => {
case IActivityLogAttributeTypes.WEIGHT:
return (
<Flex gap={4} align="center">
<Tag color="purple">Weight: {activity.previous || '100'}</Tag>
<Tag color="purple">{t('taskActivityLogTab.weight')}: {activity.previous || '100'}</Tag>
<ArrowRightOutlined />
&nbsp;
<Tag color="purple">Weight: {activity.current || '100'}</Tag>
<Tag color="purple">{t('taskActivityLogTab.weight')}: {activity.current || '100'}</Tag>
</Flex>
);
default:
return (
<Flex gap={4} align="center">
<Tag color={'default'}>{truncateText(activity.previous) || 'None'}</Tag>
<Tag color={'default'}>{truncateText(activity.previous) || t('taskActivityLogTab.none')}</Tag>
<ArrowRightOutlined />
&nbsp;
<Tag color={'default'}>{truncateText(activity.current) || 'None'}</Tag>
<Tag color={'default'}>{truncateText(activity.current) || t('taskActivityLogTab.none')}</Tag>
</Flex>
);
}
@@ -222,7 +222,7 @@ const TaskDrawerActivityLog = () => {
<Flex vertical gap={4}>
<Flex gap={4} align="center">
<Typography.Text strong>{activityLogs.name}</Typography.Text>
<Typography.Text>created the task.</Typography.Text>
<Typography.Text>{t('taskActivityLogTab.createdTask')}</Typography.Text>
<Tooltip
title={
activityLogs.created_at

41
worklenz-frontend/src/components/task-drawer/shared/info-tab/info-tab-footer.tsx
View File

@@ -1,18 +1,14 @@
import { Button, Flex, Form, Mentions, Space, Tooltip, Typography, message } from 'antd';
import { useCallback, useEffect, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { PaperClipOutlined, DeleteOutlined, PlusOutlined } from '@ant-design/icons';
import { useAppSelector } from '@/hooks/useAppSelector';
import { useAppDispatch } from '@/hooks/useAppDispatch';
import { updateTaskCounts } from '@/features/task-management/task-management.slice';
import { colors } from '@/styles/colors';
import { themeWiseColor } from '@/utils/themeWiseColor';
import { formatDateTimeWithLocale } from '@/utils/format-date-time-with-locale';
import { calculateTimeDifference } from '@/utils/calculate-time-difference';
import {
IMentionMemberSelectOption,
IMentionMemberViewModel,
} from '@/types/project/projectComments.types';
import { projectCommentsApiService } from '@/api/projects/comments/project-comments.api.service';
import { ITaskCommentsCreateRequest } from '@/types/tasks/task-comments.types';
import { ITaskAttachment } from '@/types/tasks/task-attachment-view-model';
import logger from '@/utils/errorLogger';
@@ -40,6 +36,7 @@ const formatFileSize = (bytes: number): string => {
};
const InfoTabFooter = () => {
const { t } = useTranslation('task-drawer/task-drawer');
const MAXIMUM_FILE_COUNT = 5;
const [characterLength, setCharacterLength] = useState<number>(0);
@@ -136,7 +133,7 @@ const InfoTabFooter = () => {
if (!selectedTaskId || !projectId) return;
if (!isCommentValid()) {
message.error('Please add a comment or attach files');
message.error(t('taskInfoTab.comments.addCommentError'));
return;
}
@@ -188,7 +185,7 @@ const InfoTabFooter = () => {
const files = Array.from(event.target.files);
if (selectedFiles.length + files.length > MAXIMUM_FILE_COUNT) {
message.error(`You can only upload a maximum of ${MAXIMUM_FILE_COUNT} files`);
message.error(t('taskInfoTab.comments.maxFilesError', { count: MAXIMUM_FILE_COUNT }));
return;
}
@@ -219,7 +216,7 @@ const InfoTabFooter = () => {
}
} catch (error) {
console.error('Failed to process files:', error);
message.error('Failed to process files');
message.error(t('taskInfoTab.comments.processFilesError'));
} finally {
setUploading(false);
@@ -279,7 +276,7 @@ const InfoTabFooter = () => {
}}
>
<Mentions
placeholder={'Add a comment...'}
placeholder={t('taskInfoTab.comments.addCommentPlaceholder')}
options={mentionsOptions}
autoSize
maxLength={5000}
@@ -312,7 +309,7 @@ const InfoTabFooter = () => {
{selectedFiles.length > 0 && (
<Flex vertical gap={8} style={{ marginTop: 12 }}>
<Typography.Title level={5} style={{ margin: 0 }}>
Selected Files (Up to 25MB, Maximum of {MAXIMUM_FILE_COUNT})
{t('taskInfoTab.comments.selectedFiles', { count: MAXIMUM_FILE_COUNT })}
</Typography.Title>
<Flex
vertical
@@ -368,7 +365,7 @@ const InfoTabFooter = () => {
icon={<PlusOutlined />}
disabled={selectedFiles.length >= MAXIMUM_FILE_COUNT || uploading}
>
Add more files
{t('taskInfoTab.comments.addMoreFiles')}
</Button>
</Flex>
</Flex>
@@ -378,7 +375,7 @@ const InfoTabFooter = () => {
<Form.Item name={'comment'} style={{ marginBlock: 12 }}>
<div>
<Mentions
placeholder={'Add a comment...'}
placeholder={t('taskInfoTab.comments.addCommentPlaceholder')}
options={mentionsOptions}
autoSize
autoFocus
@@ -427,8 +424,8 @@ const InfoTabFooter = () => {
<Tooltip
title={
selectedFiles.length >= MAXIMUM_FILE_COUNT
? `Maximum ${MAXIMUM_FILE_COUNT} files allowed`
: 'Attach files'
? t('taskInfoTab.comments.maxFilesError', { count: MAXIMUM_FILE_COUNT })
: t('taskInfoTab.comments.attachFiles')
}
>
<Button
@@ -439,14 +436,14 @@ const InfoTabFooter = () => {
</Tooltip>
<Space>
<Button onClick={handleCancel}>Cancel</Button>
<Button onClick={handleCancel}>{t('taskInfoTab.comments.cancel')}</Button>
<Button
type="primary"
disabled={!isCommentValid()}
onClick={handleSubmit}
loading={uploading}
>
Comment
{t('taskInfoTab.comments.commentButton')}
</Button>
</Space>
</Flex>
@@ -463,9 +460,10 @@ const InfoTabFooter = () => {
}
>
<Typography.Text type="secondary" style={{ fontSize: 12 }}>
Created{' '}
{taskFormViewModel?.task?.created_from_now || 'N/A'}{' '}
by {taskFormViewModel?.task?.reporter}
{t('taskInfoTab.comments.createdBy', {
time: taskFormViewModel?.task?.created_from_now || 'N/A',
user: taskFormViewModel?.task?.reporter || ''
})}
</Typography.Text>
</Tooltip>
<Tooltip
@@ -476,8 +474,9 @@ const InfoTabFooter = () => {
}
>
<Typography.Text type="secondary" style={{ fontSize: 12 }}>
Updated{' '}
{taskFormViewModel?.task?.updated_from_now || 'N/A'}
{t('taskInfoTab.comments.updatedTime', {
time: taskFormViewModel?.task?.updated_from_now || 'N/A'
})}
</Typography.Text>
</Tooltip>
</Flex>

24
worklenz-frontend/src/components/task-drawer/shared/time-log/time-log-form.tsx
View File

@@ -1,6 +1,7 @@
import React from 'react';
import { Button, DatePicker, Form, Input, TimePicker, Flex } from 'antd';
import { ClockCircleOutlined } from '@ant-design/icons';
import { useTranslation } from 'react-i18next';
import dayjs from 'dayjs';
import { useAppSelector } from '@/hooks/useAppSelector';
@@ -25,6 +26,7 @@ const TimeLogForm = ({
initialValues,
mode = 'create',
}: TimeLogFormProps) => {
const { t } = useTranslation('task-drawer/task-drawer');
const currentSession = useAuthService().getCurrentSession();
const { socket, connected } = useSocket();
const [form] = Form.useForm();
@@ -140,7 +142,7 @@ const TimeLogForm = ({
form.setFields([
{
name: 'endTime',
errors: ['End time must be after start time'],
errors: [t('taskTimeLogTab.timeLogForm.endTimeAfterStartError')],
},
]);
return;
@@ -219,44 +221,44 @@ const TimeLogForm = ({
<Flex gap={8} wrap="wrap" style={{ width: '100%' }}>
<Form.Item
name="date"
label="Date"
rules={[{ required: true, message: 'Please select a date' }]}
label={t('taskTimeLogTab.timeLogForm.date')}
rules={[{ required: true, message: t('taskTimeLogTab.timeLogForm.selectDateError') }]}
>
<DatePicker disabledDate={current => current && current.toDate() > new Date()} />
</Form.Item>
<Form.Item
name="startTime"
label="Start Time"
rules={[{ required: true, message: 'Please select start time' }]}
label={t('taskTimeLogTab.timeLogForm.startTime')}
rules={[{ required: true, message: t('taskTimeLogTab.timeLogForm.selectStartTimeError') }]}
>
<TimePicker format="HH:mm" />
</Form.Item>
<Form.Item
name="endTime"
label="End Time"
rules={[{ required: true, message: 'Please select end time' }]}
label={t('taskTimeLogTab.timeLogForm.endTime')}
rules={[{ required: true, message: t('taskTimeLogTab.timeLogForm.selectEndTimeError') }]}
>
<TimePicker format="HH:mm" />
</Form.Item>
</Flex>
</Form.Item>
<Form.Item name="description" label="Work Description" style={{ marginBlockEnd: 12 }}>
<Input.TextArea placeholder="Add a description" />
<Form.Item name="description" label={t('taskTimeLogTab.timeLogForm.workDescription')} style={{ marginBlockEnd: 12 }}>
<Input.TextArea placeholder={t('taskTimeLogTab.timeLogForm.descriptionPlaceholder')} />
</Form.Item>
<Form.Item style={{ marginBlockEnd: 0 }}>
<Flex gap={8}>
<Button onClick={onCancel}>Cancel</Button>
<Button onClick={onCancel}>{t('taskTimeLogTab.timeLogForm.cancel')}</Button>
<Button
type="primary"
icon={<ClockCircleOutlined />}
disabled={!isFormValid()}
htmlType="submit"
>
{mode === 'edit' ? 'Update time' : 'Log time'}
{mode === 'edit' ? t('taskTimeLogTab.timeLogForm.updateTime') : t('taskTimeLogTab.timeLogForm.logTime')}
</Button>
</Flex>
</Form.Item>