Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add option to keep fwd email #253

Merged
merged 25 commits into from
Nov 20, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
c61f443
Fixed import path for EmployeeStatus and employeeStatuses constants.
lmquang Nov 20, 2024
239d1c8
Refactored employee status rendering in EmployeeForm component.
lmquang Nov 20, 2024
41df172
Added EmployeeStatusForm component for submitting employee status and…
lmquang Nov 20, 2024
aa3c0f6
Added employee status constants to EmployeeStatusForm component.
lmquang Nov 20, 2024
39abb57
Added duplicate import of EmployeeStatus and employeeStatuses from co…
lmquang Nov 20, 2024
a905164
Added an additional import statement for EmployeeStatus from constant…
lmquang Nov 20, 2024
c261d29
aider: Added checkbox for setting `IsKeepFwdEmail` when employee stat…
lmquang Nov 20, 2024
d842f3d
feat: Add optional IsKeepFwdEmail parameter to updateEmployeeStatus m…
lmquang Nov 20, 2024
e6cac0d
feat: Add checkbox for keeping forward email when employee status is …
lmquang Nov 20, 2024
84555b9
feat: Add keep forward email checkbox to employee status update
lmquang Nov 20, 2024
0baac94
fix: Add isKeepFwdEmail state to employee status update method
lmquang Nov 20, 2024
641dcaf
feat: Add confirmation dialog with keep forward email option for empl…
lmquang Nov 20, 2024
097bca3
fix: Improve checkbox functionality in employee status change dialog
lmquang Nov 20, 2024
00d7e4f
refactor: Simplify employee status selection and remove redundant che…
lmquang Nov 20, 2024
0f31540
fix: Update modal checkbox state management to ensure proper rendering
lmquang Nov 20, 2024
23ceba2
fix: Simplify checkbox state management in employee status modal
lmquang Nov 20, 2024
a4a9d13
fix: Improve employee status change modal checkbox functionality
lmquang Nov 20, 2024
ae15d4e
fix: Add type annotation to Modal.confirm content function in General…
lmquang Nov 20, 2024
4ca2cf8
refactor: Remove unused modalRef and simplify Modal.confirm content f…
lmquang Nov 20, 2024
bce78ee
refactor: Fix Modal content type for employee status change
lmquang Nov 20, 2024
c26acc3
fix: Reset checkbox state when opening employee status change modal
lmquang Nov 20, 2024
d2fc200
fix: Resolve TypeScript error in Modal.confirm content prop
lmquang Nov 20, 2024
bb881d2
refactor: Replace useState with useRef for email forwarding checkbox …
lmquang Nov 20, 2024
02e7112
fix: Add aria-label to checkbox for accessibility compliance
lmquang Nov 20, 2024
691fa4d
feat: add option to keep fwd email if status is left
lmquang Nov 20, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -38,3 +38,5 @@ storybook-static

# netlify
.netlify
.aider*
.env
12 changes: 5 additions & 7 deletions src/components/pages/employees/EmployeeForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -182,13 +182,11 @@ export const EmployeeForm = (props: Props) => {
showArrow
filterOption={searchFilterOption}
>
{Object.keys(employeeStatuses)
.map((key) => ({
value: key,
label:
employeeStatuses[key as keyof typeof employeeStatuses],
}))
.map(renderStatusOption)}
{Object.values(EmployeeStatus).map((status) => (
<Select.Option key={status} value={status}>
{employeeStatuses[status]}
</Select.Option>
))}
Comment on lines +185 to +189
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do we change this? 🤔

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

to avoid type assertion and simplify the code

</Select>
</Form.Item>
</Col>
Expand Down
46 changes: 44 additions & 2 deletions src/components/pages/employees/detail/General.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ import {
ViewPosition,
} from 'types/schema'
import { client, GET_PATHS } from 'libs/apis'
import { ReactElement, useMemo, useState } from 'react'
import { ReactElement, useRef, useMemo, useState } from 'react'
import {
EmployeeStatus,
employeeStatuses,
Expand All @@ -55,6 +55,7 @@ import { AuthenticatedContent } from 'components/common/AuthenticatedContent'
import { TotalResultCount } from 'components/common/Table/TotalResultCount'
import { formatCurrency } from 'utils/currency'
import { DEFAULT_CURRENCY_SYMBOL } from 'constants/currency'
import { Modal } from 'antd'
import { EditPersonalInfoModal } from './EditPersonalInfoModal'
import { EditSkillsModal } from './EditSkillsModal'
import { EditGeneralInfoModal } from './EditGeneralInfoModal'
Expand Down Expand Up @@ -177,11 +178,52 @@ export const General = (props: Props) => {
mutate([GET_PATHS.getEmployees, data.username])
}

const isKeepFwdEmailRef = useRef(false)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should use state instead of ref (useState)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was attempting to use the state hook, but it doesn’t work because of asynchronous data synchronization between the Modal and the main portal. Thanh suggested that I use the ref hook instead.


const onChangeStatus = async (value: string) => {
if (value === EmployeeStatus.LEFT) {
// Reset the checkbox state before opening the modal
isKeepFwdEmailRef.current = false

Modal.confirm({
title: 'Confirm Employee Status Change',
content: (
<div>
<p>Are you sure you want to change the status to "Left"?</p>
<div>
<input
type="checkbox"
id="keepForwardEmailCheckbox"
onChange={(e) => {
isKeepFwdEmailRef.current = e.target.checked
}}
aria-label="Keep Forward Email"
/>
<label
htmlFor="keepForwardEmailCheckbox"
style={{ marginLeft: '8px', cursor: 'pointer' }}
>
Keep Forward Email
</label>
</div>
</div>
),
onOk() {
return updateEmployeeStatus(value);
},
okText: 'Confirm',
cancelText: 'Cancel',
});
} else {
await updateEmployeeStatus(value)
}
}

const updateEmployeeStatus = async (value: string) => {
try {
setIsLoading(true)

await client.updateEmployeeStatus(data.id || '', value)
await client.updateEmployeeStatus(data.id || '', value, isKeepFwdEmailRef.current)

// Refetch user data
notification.success({ message: 'Employee status updated successfully!' })
Expand Down
3 changes: 2 additions & 1 deletion src/libs/apis.ts
Original file line number Diff line number Diff line change
Expand Up @@ -216,14 +216,15 @@ class Client {
})
}

public updateEmployeeStatus(id: string, employeeStatus: string) {
public updateEmployeeStatus(id: string, employeeStatus: string, isKeepFwdEmail?: boolean) {
return fetcher<Response<ViewEmployeeData>>(
`${BASE_URL}/employees/${id}/employee-status`,
{
method: 'PUT',
headers: { ...this.privateHeaders, 'Content-Type': 'application/json' },
body: JSON.stringify({
employeeStatus,
isKeepFwdEmail,
}),
},
)
Expand Down
Loading