f06851fa37
- Introduced new localization files for Albanian, German, Spanish, Portuguese, and Chinese, enhancing the application's multilingual support. - Added new keys and updated existing translations in project-view, task-list-table, and settings files to improve user experience across different languages. - Enhanced error handling and empty state messages in task management components to provide clearer feedback to users. - Updated tooltip texts and button labels for better clarity and consistency in the user interface.
103 lines
3.2 KiB
TypeScript
103 lines
3.2 KiB
TypeScript
import { Button, Card, Flex, Table, TableProps, Tooltip, Typography } from 'antd';
|
|
import PinRouteToNavbarButton from '@components/PinRouteToNavbarButton';
|
|
import { useAppSelector } from '@/hooks/useAppSelector';
|
|
import { durationDateFormat } from '@utils/durationDateFormat';
|
|
import { EditOutlined } from '@ant-design/icons';
|
|
import { useEffect, useState } from 'react';
|
|
import EditTeamModal from '@/components/settings/edit-team-name-modal';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
import { fetchTeams } from '@features/teams/teamSlice';
|
|
import { useAppDispatch } from '@/hooks/useAppDispatch';
|
|
import { useDocumentTitle } from '@/hooks/useDoumentTItle';
|
|
import { ITeamGetResponse } from '@/types/teams/team.type';
|
|
|
|
const TeamsSettings = () => {
|
|
const { t } = useTranslation('settings/teams');
|
|
useDocumentTitle(t('title'));
|
|
|
|
const [selectedTeam, setSelectedTeam] = useState<ITeamGetResponse | null>(null);
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
const { teamsList } = useAppSelector(state => state.teamReducer);
|
|
const dispatch = useAppDispatch();
|
|
|
|
useEffect(() => {
|
|
dispatch(fetchTeams());
|
|
}, [dispatch]);
|
|
|
|
const columns: TableProps['columns'] = [
|
|
{
|
|
key: 'name',
|
|
title: t('name'),
|
|
render: (record: ITeamGetResponse) => <Typography.Text>{record.name}</Typography.Text>,
|
|
},
|
|
|
|
{
|
|
key: 'created',
|
|
title: t('created'),
|
|
render: (record: ITeamGetResponse) => (
|
|
<Typography.Text>{durationDateFormat(record.created_at)}</Typography.Text>
|
|
),
|
|
},
|
|
{
|
|
key: 'ownsBy',
|
|
title: t('ownsBy'),
|
|
render: (record: ITeamGetResponse) => <Typography.Text>{record.owns_by}</Typography.Text>,
|
|
},
|
|
{
|
|
key: 'actionBtns',
|
|
width: 60,
|
|
render: (record: ITeamGetResponse) => (
|
|
<Tooltip title={t('edit')} trigger={'hover'}>
|
|
<Button
|
|
size="small"
|
|
icon={<EditOutlined />}
|
|
onClick={() => {
|
|
setSelectedTeam(record);
|
|
setIsModalOpen(true);
|
|
}}
|
|
/>
|
|
</Tooltip>
|
|
),
|
|
},
|
|
];
|
|
|
|
const handleCancel = () => {
|
|
setSelectedTeam(null);
|
|
setIsModalOpen(false);
|
|
};
|
|
|
|
return (
|
|
<div style={{ width: '100%' }}>
|
|
<Flex align="center" justify="space-between" style={{ marginBlockEnd: 24 }}>
|
|
<Typography.Title level={4} style={{ marginBlockEnd: 0 }}>
|
|
{teamsList.length} {teamsList.length === 1 ? t('team') : t('teams')}
|
|
</Typography.Title>
|
|
|
|
<Tooltip title={t('pinTooltip')} trigger={'hover'}>
|
|
{/* this button pin this route to navbar */}
|
|
<PinRouteToNavbarButton name="teams" path="/worklenz/settings/teams" adminOnly={true} />
|
|
</Tooltip>
|
|
</Flex>
|
|
|
|
<Card style={{ width: '100%' }}>
|
|
<Table<ITeamGetResponse>
|
|
className="custom-two-colors-row-table"
|
|
columns={columns}
|
|
dataSource={teamsList}
|
|
rowKey={record => record.id ?? ''}
|
|
pagination={{
|
|
showSizeChanger: true,
|
|
defaultPageSize: 20,
|
|
}}
|
|
/>
|
|
</Card>
|
|
|
|
{/* edit team name modal */}
|
|
<EditTeamModal team={selectedTeam} isModalOpen={isModalOpen} onCancel={handleCancel} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TeamsSettings;
|