I originally thought developing an HR management system would take two months. Once it was actually used, a pile of issues needing optimization appeared every day. Refactoring turned out to be unusually painful because every change needs to be compatible with historical data, which is nerve‑wracking. Fortunately, the problem encountered today wasn’t a monstrous requirement like massively changing the org chart, but a relatively independent feature request that was straightforward to modify.
Existing problem
The current HR management system includes a feature for new hires to fill in their own basic personal information and a feature for HR to edit employee information.
A serious BUG occurred; reproduction steps:
- HR opens the employee edit page and starts editing employee information.
- Then the new hire scans a QR code to enter the employee-side edit page and starts editing their personal basic information.
- The new hire submits their personal basic information and it saves successfully.
- HR continues editing the employee information and submits the save.
At this point, the content HR submitted overwrites what the employee submitted, causing the personal basic information the employee filled out to be lost 😓 The new hire probably cried their eyes out and has to re-enter dozens of fields of personal information…
Requirement
Ideally both parties should be able to edit simultaneously to save time: while the employee fills in personal info, HR can edit position-related information.
Solution
This can be implemented, but it requires adding a new feature: an independent position-info editing function, or call it non-basic-info editing (there might be a better name; think more about it).
After clicking this button, you can edit the parts of the employee information that are not basic information — i.e., completely isolated from what the employee edits. This enables simultaneous operations.
To ensure a good user experience, a status reminder should be added: when the employee scans the QR code to edit basic info, the HR side should indicate that only the position-info editing function can be used, and the original full-edit function cannot be used.
I also wrote a demo page to demonstrate the implementation details of this feature and put the JS code directly in the front-end page to make it easy for front-end colleagues to understand how to implement it.
Employee side
After entering the employee edit page, client-side JS sends a POST request to the server every 30 seconds to indicate that basic information is being edited.
The backend will provide an API to receive the employee’s editing status and store this status in memory (or in Redis). This status can have an expiration time, for example 60 seconds; if no update is received for over 60 seconds, it is considered that the employee is no longer editing. When the front end calls the API, it provides the token used for the employee shared-editing interface; the backend parses the employee ID from the token to identify which employee is editing.
HR side
Receive employee editing status pushed by the server via SSE (Server-Sent Events).
Browsers limit the number of SSE connections to the same domain (usually 6), so manage SSE connections globally to avoid resource waste from creating an SSE connection per employee.
The server will return a list of employee IDs who are currently editing their profiles.
Upon receiving this list, the HR side updates the UI to show the corresponding employee editing status, including:
- On the employee list page, a “currently editing” icon or text
- On the employee detail page, if the employee is editing, show a prompt that only position info can be edited and basic info cannot be edited; or automatically disable the button that saves all info, leaving only the button that saves position info
About the Author 🌱
I am a developer from Yantai, Shandong, China. If you have any interesting topics or software development needs, feel free to email me at: zhongwei.sun2008@gmail.com for a chat, or follow my personal public account "Elephant Tools", See more contact information