init
This commit is contained in:
chamikaJ
@@ -0,0 +1,180 @@
|
||||
import { AutoComplete, Button, Drawer, Flex, Form, message, Select, Spin, Typography } from 'antd';
|
||||
import { useAppSelector } from '@/hooks/useAppSelector';
|
||||
import { useAppDispatch } from '@/hooks/useAppDispatch';
|
||||
import { toggleInviteMemberDrawer, triggerTeamMembersRefresh } from '../../../features/settings/member/memberSlice';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { jobTitlesApiService } from '@/api/settings/job-titles/job-titles.api.service';
|
||||
import { IJobTitle } from '@/types/job.types';
|
||||
import { teamMembersApiService } from '@/api/team-members/teamMembers.api.service';
|
||||
import { ITeamMemberCreateRequest } from '@/types/teamMembers/team-member-create-request';
|
||||
|
||||
interface FormValues {
|
||||
email: string[];
|
||||
jobTitle: string;
|
||||
access: 'member' | 'admin';
|
||||
}
|
||||
|
||||
const InviteTeamMembers = () => {
|
||||
const [searching, setSearching] = useState(false);
|
||||
const [jobTitles, setJobTitles] = useState<IJobTitle[]>([]);
|
||||
const [emails, setEmails] = useState<string[]>([]);
|
||||
const [selectedJobTitle, setSelectedJobTitle] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const [form] = Form.useForm<FormValues>();
|
||||
|
||||
const { t } = useTranslation('settings/team-members');
|
||||
const isDrawerOpen = useAppSelector(state => state.memberReducer.isInviteMemberDrawerOpen);
|
||||
const dispatch = useAppDispatch();
|
||||
|
||||
const handleSearch = useCallback(
|
||||
async (value: string) => {
|
||||
try {
|
||||
setSearching(true);
|
||||
const res = await jobTitlesApiService.getJobTitles(1, 10, null, null, value || null);
|
||||
if (res.done) {
|
||||
setJobTitles(res.body.data || []);
|
||||
}
|
||||
} catch (error) {
|
||||
message.error(t('Failed to fetch job titles'));
|
||||
} finally {
|
||||
setSearching(false);
|
||||
}
|
||||
},
|
||||
[t]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (isDrawerOpen) {
|
||||
handleSearch('');
|
||||
}
|
||||
}, [isDrawerOpen, handleSearch]);
|
||||
|
||||
const handleFormSubmit = async (values: FormValues) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const body: ITeamMemberCreateRequest = {
|
||||
job_title: selectedJobTitle,
|
||||
emails: emails,
|
||||
is_admin: values.access === 'admin',
|
||||
};
|
||||
const res = await teamMembersApiService.createTeamMember(body);
|
||||
if (res.done) {
|
||||
form.resetFields();
|
||||
setEmails([]);
|
||||
setSelectedJobTitle(null);
|
||||
dispatch(triggerTeamMembersRefresh()); // Trigger refresh in TeamMembersSettings
|
||||
dispatch(toggleInviteMemberDrawer());
|
||||
}
|
||||
} catch (error) {
|
||||
message.error(t('createMemberErrorMessage'));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
form.resetFields();
|
||||
dispatch(toggleInviteMemberDrawer());
|
||||
};
|
||||
|
||||
const handleEmailChange = (value: string[]) => {
|
||||
setEmails(value);
|
||||
};
|
||||
|
||||
return (
|
||||
<Drawer
|
||||
title={
|
||||
<Typography.Text strong style={{ fontSize: 16 }}>
|
||||
{t('addMemberDrawerTitle')}
|
||||
</Typography.Text>
|
||||
}
|
||||
open={isDrawerOpen}
|
||||
onClose={handleClose}
|
||||
destroyOnClose
|
||||
afterOpenChange={visible => visible && handleSearch('')}
|
||||
width={400}
|
||||
loading={loading}
|
||||
footer={
|
||||
<Flex justify="end">
|
||||
<Button type="primary" onClick={form.submit}>
|
||||
{t('addToTeamButton')}
|
||||
</Button>
|
||||
</Flex>
|
||||
}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
onFinish={handleFormSubmit}
|
||||
layout="vertical"
|
||||
initialValues={{ access: 'member' }}
|
||||
>
|
||||
<Form.Item
|
||||
name="emails"
|
||||
label={t('memberEmailLabel')}
|
||||
rules={[
|
||||
{
|
||||
type: 'array',
|
||||
required: true,
|
||||
validator: (_, value) => {
|
||||
if (!value?.length) return Promise.reject(t('memberEmailRequiredError'));
|
||||
return Promise.resolve();
|
||||
},
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Flex vertical gap={4}>
|
||||
<Select
|
||||
mode="tags"
|
||||
style={{ width: '100%' }}
|
||||
placeholder={t('memberEmailPlaceholder')}
|
||||
onChange={handleEmailChange}
|
||||
notFoundContent={
|
||||
<Typography.Text type="secondary">{t('noResultFound')}</Typography.Text>
|
||||
}
|
||||
tokenSeparators={[',', ' ', ';']}
|
||||
/>
|
||||
<Typography.Text type="secondary" style={{ fontSize: 12 }}>
|
||||
{t('addMemberEmailHint')}
|
||||
</Typography.Text>
|
||||
</Flex>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label={t('jobTitleLabel')} name="jobTitle">
|
||||
<AutoComplete
|
||||
options={jobTitles.map(job => ({
|
||||
id: job.id,
|
||||
label: job.name,
|
||||
value: job.name,
|
||||
}))}
|
||||
allowClear
|
||||
onSearch={handleSearch}
|
||||
placeholder={t('jobTitlePlaceholder')}
|
||||
onChange={(value, option) => {
|
||||
form.setFieldsValue({ jobTitle: option?.label || value });
|
||||
}}
|
||||
onSelect={value => setSelectedJobTitle(value)}
|
||||
dropdownRender={menu => (
|
||||
<div>
|
||||
{searching && <Spin size="small" />}
|
||||
{menu}
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label={t('memberAccessLabel')} name="access">
|
||||
<Select
|
||||
options={[
|
||||
{ value: 'member', label: t('memberText') },
|
||||
{ value: 'admin', label: t('adminText') },
|
||||
]}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Drawer>
|
||||
);
|
||||
};
|
||||
|
||||
export default InviteTeamMembers;
|
||||
@@ -0,0 +1,21 @@
|
||||
import Icon, {
|
||||
CheckCircleOutlined,
|
||||
ClockCircleOutlined,
|
||||
CloseCircleOutlined,
|
||||
StopOutlined,
|
||||
} from '@ant-design/icons';
|
||||
|
||||
const iconMap = {
|
||||
'clock-circle': ClockCircleOutlined,
|
||||
'close-circle': CloseCircleOutlined,
|
||||
stop: StopOutlined,
|
||||
'check-circle': CheckCircleOutlined,
|
||||
};
|
||||
|
||||
const ProjectStatusIcon = ({ iconName, color }: { iconName: string; color: string }) => {
|
||||
const IconComponent = iconMap[iconName as keyof typeof iconMap];
|
||||
if (!IconComponent) return null;
|
||||
return <IconComponent style={{ color: color }} />;
|
||||
};
|
||||
|
||||
export default ProjectStatusIcon;
|
||||
@@ -0,0 +1,26 @@
|
||||
import { AvatarNamesMap } from '@/shared/constants';
|
||||
import { Avatar, Flex, Space } from 'antd';
|
||||
|
||||
interface SingleAvatarProps {
|
||||
avatarUrl?: string;
|
||||
name?: string;
|
||||
email?: string;
|
||||
}
|
||||
|
||||
const SingleAvatar: React.FC<SingleAvatarProps> = ({ avatarUrl, name, email = null }) => {
|
||||
return (
|
||||
<Avatar
|
||||
src={avatarUrl}
|
||||
size={28}
|
||||
style={{
|
||||
backgroundColor: avatarUrl ? 'transparent' : AvatarNamesMap[name?.charAt(0) || ''],
|
||||
border: avatarUrl ? 'none' : '1px solid #d9d9d9',
|
||||
marginRight: '8px',
|
||||
}}
|
||||
>
|
||||
{name?.charAt(0)}
|
||||
</Avatar>
|
||||
);
|
||||
};
|
||||
|
||||
export default SingleAvatar;
|
||||
@@ -0,0 +1,94 @@
|
||||
.ant-drawer .ant-drawer-body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.ant-drawer-footer {
|
||||
height: 55px;
|
||||
}
|
||||
|
||||
.template-menu .ant-menu-item {
|
||||
border-radius: 0 !important;
|
||||
text-align: left !important;
|
||||
padding-left: 8px !important;
|
||||
}
|
||||
|
||||
.template-menu .ant-menu-item:hover {
|
||||
background-color: transparent !important;
|
||||
color: var(--color-skyBlue) !important;
|
||||
}
|
||||
|
||||
.template-menu .ant-menu-item-selected {
|
||||
border-right: 3px solid var(--color-skyBlue);
|
||||
}
|
||||
|
||||
.template-menu .ant-menu-item-selected:hover {
|
||||
background-color: var(--color-paleBlue) !important;
|
||||
}
|
||||
|
||||
.template-menu {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #888 transparent;
|
||||
}
|
||||
|
||||
.template-menu::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.template-menu::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.template-menu::-webkit-scrollbar-thumb {
|
||||
background-color: #888;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.template-menu::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
.temp-details {
|
||||
overflow-y: auto;
|
||||
padding: 1rem 1.5rem !important;
|
||||
height: 100%;
|
||||
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #888 transparent;
|
||||
}
|
||||
|
||||
.temp-details::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.temp-details::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.temp-details::-webkit-scrollbar-thumb {
|
||||
background-color: #888;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.temp-details::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
.custom-template-list .ant-list-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.custom-template-list .selected-custom-template {
|
||||
background-color: var(--color-paleBlue);
|
||||
}
|
||||
|
||||
.custom-template-list .selected-custom-template-dark {
|
||||
background-color: #141414;
|
||||
}
|
||||
|
||||
.custom-template-list .selected-custom-template:hover {
|
||||
background-color: var(--color-paleBlue);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,379 @@
|
||||
import type { MenuProps } from 'antd';
|
||||
import {
|
||||
Empty,
|
||||
List,
|
||||
Menu,
|
||||
Skeleton,
|
||||
Tabs,
|
||||
Tag,
|
||||
Typography,
|
||||
Image,
|
||||
Input,
|
||||
Flex,
|
||||
Button,
|
||||
} from 'antd';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { RootState } from '@/app/store';
|
||||
import { projectTemplatesApiService } from '@/api/project-templates/project-templates.api.service';
|
||||
import {
|
||||
ICustomTemplate,
|
||||
IProjectTemplate,
|
||||
IWorklenzTemplate,
|
||||
} from '@/types/project-templates/project-templates.types';
|
||||
import './template-drawer.css';
|
||||
import { SearchOutlined } from '@ant-design/icons';
|
||||
import logger from '@/utils/errorLogger';
|
||||
|
||||
const { Title, Text } = Typography;
|
||||
|
||||
interface TemplateDrawerProps {
|
||||
showBothTabs: boolean;
|
||||
templateSelected: (templateId: string) => void;
|
||||
selectedTemplateType: (type: 'worklenz' | 'custom') => void;
|
||||
}
|
||||
|
||||
const TemplateDrawer: React.FC<TemplateDrawerProps> = ({
|
||||
showBothTabs = false,
|
||||
templateSelected = (templateId: string) => {
|
||||
if (!templateId) return;
|
||||
templateId;
|
||||
},
|
||||
selectedTemplateType = (type: 'worklenz' | 'custom') => {
|
||||
type;
|
||||
},
|
||||
}) => {
|
||||
const themeMode = useSelector((state: RootState) => state.themeReducer.mode);
|
||||
const { t } = useTranslation('template-drawer');
|
||||
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [templates, setTemplates] = useState<IWorklenzTemplate[]>([]);
|
||||
const [loadingTemplates, setLoadingTemplates] = useState(false);
|
||||
|
||||
const [customTemplates, setCustomTemplates] = useState<ICustomTemplate[]>([]);
|
||||
const [loadingCustomTemplates, setLoadingCustomTemplates] = useState(false);
|
||||
|
||||
const [selectedTemplate, setSelectedTemplate] = useState<IProjectTemplate | null>(null);
|
||||
const [loadingSelectedTemplate, setLoadingSelectedTemplate] = useState(false);
|
||||
|
||||
const getSelectedTemplate = async (templateId: string) => {
|
||||
try {
|
||||
setLoadingSelectedTemplate(true);
|
||||
const res = await projectTemplatesApiService.getByTemplateId(templateId);
|
||||
if (res.done) {
|
||||
setSelectedTemplate(res.body);
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error('Error loading template:', error);
|
||||
} finally {
|
||||
setLoadingSelectedTemplate(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getTemplates = async () => {
|
||||
try {
|
||||
setLoadingTemplates(true);
|
||||
const res = await projectTemplatesApiService.getWorklenzTemplates();
|
||||
if (res.done) {
|
||||
setTemplates(res.body);
|
||||
if (res.body.length > 0 && res.body[0].id) {
|
||||
templateSelected(res.body[0].id);
|
||||
await getSelectedTemplate(res.body[0].id);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error('Error loading templates:', error);
|
||||
} finally {
|
||||
setLoadingTemplates(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getCustomTemplates = async () => {
|
||||
try {
|
||||
setLoadingCustomTemplates(true);
|
||||
const res = await projectTemplatesApiService.getCustomTemplates();
|
||||
if (res.done) {
|
||||
setCustomTemplates(res.body);
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error('Error loading custom templates:', error);
|
||||
} finally {
|
||||
setLoadingCustomTemplates(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getTemplates();
|
||||
}, []);
|
||||
|
||||
const menuItems: MenuProps['items'] = templates.map(template => ({
|
||||
key: template.id || '',
|
||||
label: template.name || t('untitled'),
|
||||
type: 'item',
|
||||
}));
|
||||
|
||||
const handleMenuClick = (templateId: string) => {
|
||||
templateSelected(templateId);
|
||||
getSelectedTemplate(templateId);
|
||||
};
|
||||
|
||||
const filteredCustomTemplates = customTemplates.filter(template =>
|
||||
template.name?.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
);
|
||||
|
||||
const renderTemplateDetails = () => {
|
||||
if (!selectedTemplate) {
|
||||
return <Empty description={t('noTemplateSelected')} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* Description */}
|
||||
<div className="template-detail-row mt-2">
|
||||
<div className="template-detail-label">
|
||||
<Text strong>{t('description')}</Text>
|
||||
</div>
|
||||
<div>
|
||||
<Text>{selectedTemplate.description || t('noDescription')}</Text>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Phase */}
|
||||
<div className="template-detail-row mt-2">
|
||||
<div className="template-detail-label">
|
||||
<Text strong>{t('phase')}</Text>
|
||||
</div>
|
||||
<div>
|
||||
{selectedTemplate.phases?.length ? (
|
||||
selectedTemplate.phases.map(phase => (
|
||||
<Tag
|
||||
key={phase.name}
|
||||
color={phase.color_code}
|
||||
style={{ color: 'black', marginBottom: '8px' }}
|
||||
>
|
||||
{phase.name}
|
||||
</Tag>
|
||||
))
|
||||
) : (
|
||||
<Text type="secondary">{t('noPhases')}</Text>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Statuses */}
|
||||
<div className="template-detail-row mt-2">
|
||||
<div className="template-detail-label">
|
||||
<Text strong>{t('statuses')}</Text>
|
||||
</div>
|
||||
<div>
|
||||
{selectedTemplate.status?.length ? (
|
||||
selectedTemplate.status.map(status => (
|
||||
<Tag
|
||||
key={status.name}
|
||||
color={status.color_code}
|
||||
style={{ color: 'black', marginBottom: '8px' }}
|
||||
>
|
||||
{status.name}
|
||||
</Tag>
|
||||
))
|
||||
) : (
|
||||
<Text type="secondary">{t('noStatuses')}</Text>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Priorities */}
|
||||
<div className="template-detail-row mt-2">
|
||||
<div className="template-detail-label">
|
||||
<Text strong>{t('priorities')}</Text>
|
||||
</div>
|
||||
<div>
|
||||
{selectedTemplate.priorities?.length ? (
|
||||
selectedTemplate.priorities.map(priority => (
|
||||
<Tag
|
||||
key={priority.name}
|
||||
color={priority.color_code}
|
||||
style={{ color: 'black', marginBottom: '8px' }}
|
||||
>
|
||||
{priority.name}
|
||||
</Tag>
|
||||
))
|
||||
) : (
|
||||
<Text type="secondary">{t('noPriorities')}</Text>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Labels */}
|
||||
<div className="template-detail-row mt-2">
|
||||
<div className="template-detail-label">
|
||||
<Text strong>{t('labels')}</Text>
|
||||
</div>
|
||||
<div>
|
||||
{selectedTemplate.labels?.length ? (
|
||||
selectedTemplate.labels.map(label => (
|
||||
<Tag
|
||||
key={label.name}
|
||||
color={label.color_code}
|
||||
style={{ color: 'black', marginBottom: '8px' }}
|
||||
>
|
||||
{label.name}
|
||||
</Tag>
|
||||
))
|
||||
) : (
|
||||
<Text type="secondary">{t('noLabels')}</Text>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tasks */}
|
||||
<div className="template-detail-row mt-2">
|
||||
<div className="template-detail-label">
|
||||
<Text strong>{t('tasks')}</Text>
|
||||
</div>
|
||||
<div style={{ marginTop: '0.5rem' }}>
|
||||
{selectedTemplate.tasks?.length ? (
|
||||
<List
|
||||
dataSource={selectedTemplate.tasks}
|
||||
renderItem={item => (
|
||||
<List.Item key={item.name}>
|
||||
<Text>{item.name}</Text>
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
) : (
|
||||
<Text type="secondary">{t('noTasks')}</Text>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const menuContent = (
|
||||
<div style={{ display: 'flex' }}>
|
||||
{/* Menu Area */}
|
||||
<div style={{ minWidth: '250px', overflowY: 'auto', height: '100%' }}>
|
||||
<Skeleton loading={loadingTemplates} active>
|
||||
<Menu
|
||||
className="template-menu"
|
||||
onClick={({ key }) => handleMenuClick(key)}
|
||||
style={{ width: 256 }}
|
||||
defaultSelectedKeys={[templates[0]?.id || '']}
|
||||
mode="inline"
|
||||
items={menuItems}
|
||||
/>
|
||||
</Skeleton>
|
||||
</div>
|
||||
{/* Content Area */}
|
||||
<div
|
||||
className="temp-details"
|
||||
style={{
|
||||
flex: 1,
|
||||
maxHeight: 'calc(100vh - 200px)',
|
||||
padding: '16px',
|
||||
}}
|
||||
>
|
||||
<Title level={4}>Details</Title>
|
||||
<Skeleton loading={loadingSelectedTemplate} active>
|
||||
{selectedTemplate?.image_url && (
|
||||
<Image preview={false} src={selectedTemplate.image_url} alt={selectedTemplate.name} />
|
||||
)}
|
||||
{renderTemplateDetails()}
|
||||
</Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const handleCustomTemplateClick = (templateId: string) => {
|
||||
const updatedCustomTemplates = customTemplates.map(template =>
|
||||
template.id === templateId
|
||||
? { ...template, selected: true }
|
||||
: { ...template, selected: false }
|
||||
);
|
||||
setCustomTemplates(updatedCustomTemplates);
|
||||
templateSelected(templateId);
|
||||
selectedTemplateType('custom');
|
||||
};
|
||||
|
||||
const customTemplatesContent = (
|
||||
<div>
|
||||
<Flex justify="space-between" align="center">
|
||||
<Input
|
||||
placeholder={t('searchTemplates')}
|
||||
suffix={<SearchOutlined />}
|
||||
style={{ maxWidth: '300px' }}
|
||||
onChange={e => setSearchQuery(e.target.value)}
|
||||
/>
|
||||
</Flex>
|
||||
|
||||
<List
|
||||
className="custom-template-list mt-4"
|
||||
bordered
|
||||
dataSource={filteredCustomTemplates}
|
||||
loading={loadingCustomTemplates}
|
||||
renderItem={item => (
|
||||
<List.Item
|
||||
key={item.id}
|
||||
onClick={() => handleCustomTemplateClick(item.id || '')}
|
||||
className={
|
||||
item.selected && themeMode === 'dark'
|
||||
? 'selected-custom-template-dark'
|
||||
: item.selected && themeMode === 'light'
|
||||
? 'selected-custom-template'
|
||||
: ''
|
||||
}
|
||||
>
|
||||
{item.name}
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
key: '1',
|
||||
label: t('worklenzTemplates'),
|
||||
children: menuContent,
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: t('yourTemplatesLibrary'),
|
||||
children: customTemplatesContent,
|
||||
},
|
||||
];
|
||||
|
||||
const handleTabChange = (key: string) => {
|
||||
if (key === '1') {
|
||||
getTemplates();
|
||||
selectedTemplateType('worklenz');
|
||||
} else {
|
||||
getCustomTemplates();
|
||||
selectedTemplateType('custom');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ height: '100vh', overflow: 'hidden' }}>
|
||||
<div
|
||||
style={{
|
||||
position: 'sticky',
|
||||
top: 0,
|
||||
zIndex: 100,
|
||||
backgroundColor: themeMode === 'dark' ? '' : '#fff',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
{showBothTabs ? (
|
||||
<Tabs type="card" items={tabs} onChange={handleTabChange} destroyInactiveTabPane />
|
||||
) : (
|
||||
menuContent
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TemplateDrawer;
|
||||
Reference in New Issue
Block a user