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

feat(ratecard-drawer): enhance drawer close logic to handle unsaved changes and delete empty rate cards

Browse Source
This commit is contained in:
shancds
2025-05-28 10:50:35 +05:30
parent 42c4802d19
commit 010cbe1af8
1 changed files with 98 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

191
worklenz-frontend/src/features/finance/ratecard-drawer/ratecard-drawer.tsx
View File

@@ -307,16 +307,21 @@ const RatecardDrawer = ({
}, },
]; ];
const handleDrawerClose = () => { const handleDrawerClose = async() => {
if (!name || name.trim() === '' || name === 'Untitled Rate Card') { if (!name || name.trim() === '') {
messageApi.open({ messageApi.open({
type: 'warning', type: 'warning',
content: t('ratecardNameRequired') || 'Rate card name is required.', content: t('ratecardNameRequired') || 'Rate card name is required.',
}); });
return; return;
} else if (hasChanges) { } else if (hasChanges) {
setShowUnsavedAlert(true); setShowUnsavedAlert(true);
} else { }
else if (name === 'Untitled Rate Card' && roles.length === 0){
await dispatch(deleteRateCard(ratecardId));
dispatch(toggleRatecardDrawer());
}
else {
dispatch(toggleRatecardDrawer()); dispatch(toggleRatecardDrawer());
} }
}; };
@@ -339,95 +344,95 @@ const RatecardDrawer = ({
return ( return (
<> <>
{contextHolder} {contextHolder}
<Drawer <Drawer
loading={drawerLoading} loading={drawerLoading}
onClose={handleDrawerClose} onClose={handleDrawerClose}
title={ title={
<Flex align="center" justify="space-between"> <Flex align="center" justify="space-between">
<Typography.Text style={{ fontWeight: 500, fontSize: 16 }}> <Typography.Text style={{ fontWeight: 500, fontSize: 16 }}>
<Input <Input
value={name} value={name}
placeholder="Enter rate card name" placeholder="Enter rate card name"
style={{ style={{
fontWeight: 500, fontWeight: 500,
fontSize: 16, fontSize: 16,
background: 'transparent', background: 'transparent',
border: 'none', border: 'none',
boxShadow: 'none', boxShadow: 'none',
padding: 0, padding: 0,
}} }}
onChange={e => { onChange={e => {
setName(e.target.value); setName(e.target.value);
}} }}
/> />
</Typography.Text> </Typography.Text>
<Flex gap={8} align="center"> <Flex gap={8} align="center">
<Typography.Text>{t('currency')}</Typography.Text> <Typography.Text>{t('currency')}</Typography.Text>
<Select <Select
value={currency} value={currency}
options={[ options={[
{ value: 'USD', label: 'USD' }, { value: 'USD', label: 'USD' },
{ value: 'LKR', label: 'LKR' }, { value: 'LKR', label: 'LKR' },
{ value: 'INR', label: 'INR' }, { value: 'INR', label: 'INR' },
]} ]}
onChange={(value) => setCurrency(value)} onChange={(value) => setCurrency(value)}
/> />
<Button onClick={handleAddAllRoles} type="default"> <Button onClick={handleAddAllRoles} type="default">
{t('addAllButton') || 'Add All'} {t('addAllButton') || 'Add All'}
</Button>
</Flex>
</Flex>
}
open={isDrawerOpen}
width={700}
footer={
<Flex justify="end" gap={16} style={{ marginTop: 16 }}>
<Button style={{ marginBottom: 24 }} onClick={handleSave} type="primary" disabled={name === '' || (name === 'Untitled Rate Card' && roles.length === 0)}>
{t('saveButton')}
</Button> </Button>
</Flex> </Flex>
</Flex> }
} >
open={isDrawerOpen} {showUnsavedAlert && (
width={700} <Alert
footer={ message={t('unsavedChangesTitle') || 'Unsaved Changes'}
<Flex justify="end" gap={16} style={{ marginTop: 16 }}> type="warning"
<Button style={{ marginBottom: 24 }} onClick={handleSave} type="primary" disabled={name === '' || (name === 'Untitled Rate Card' && roles.length === 0)}> showIcon
{t('saveButton')} closable
</Button> onClose={() => setShowUnsavedAlert(false)}
</Flex> action={
} <Space direction="horizontal">
> <Button size="small" type="primary" onClick={handleConfirmSave}>
{showUnsavedAlert && ( Save
<Alert </Button>
message={t('unsavedChangesTitle') || 'Unsaved Changes'} <Button size="small" danger onClick={handleConfirmDiscard}>
type="warning" Discard
showIcon </Button>
closable </Space>
onClose={() => setShowUnsavedAlert(false)} }
action={ style={{ marginBottom: 16 }}
<Space direction="horizontal"> />
<Button size="small" type="primary" onClick={handleConfirmSave}>
Save
</Button>
<Button size="small" danger onClick={handleConfirmDiscard}>
Discard
</Button>
</Space>
}
style={{ marginBottom: 16 }}
/>
)}
<Table
dataSource={roles}
columns={columns}
rowKey={(record) => record.job_title_id}
pagination={false}
footer={() => (
<Button
type="dashed"
onClick={handleAddRole}
block
style={{ margin: 0, padding: 0 }}
>
{t('addRoleButton')}
</Button>
)} )}
/> <Table
</Drawer> dataSource={roles}
columns={columns}
rowKey={(record) => record.job_title_id}
pagination={false}
footer={() => (
<Button
type="dashed"
onClick={handleAddRole}
block
style={{ margin: 0, padding: 0 }}
>
{t('addRoleButton')}
</Button>
)}
/>
</Drawer>
</> </>
); );
}; };