feat: update doctor diagnosis case sheet component#256
Open
ananyaa0518 wants to merge 3 commits intoPSMRI:mainfrom
Open
feat: update doctor diagnosis case sheet component#256ananyaa0518 wants to merge 3 commits intoPSMRI:mainfrom
ananyaa0518 wants to merge 3 commits intoPSMRI:mainfrom
Conversation
Contributor
📝 WalkthroughWalkthroughThis PR replaces and expands the doctor-diagnosis case sheet styling, adds six vitals-abnormality detection methods to the component, wires those methods into the template to conditionally style vitals, and imports the Inter font in global styles. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (3)
src/app/app-modules/nurse-doctor/case-sheet/general-case-sheet/doctor-diagnosis-case-sheet/doctor-diagnosis-case-sheet.component.html (1)
613-615: Consider using CSS utility classes instead of inline styles.Multiple elements use inline
style="margin-bottom: 12px;"while the CSS file defines spacing utilities like.m-b-10. Using CSS classes would improve maintainability and consistency.♻️ Alternative approach using CSS classes
Add to CSS:
.m-b-12 { margin-bottom: 12px !important; }Then in HTML:
- <div class="col-xs-12" style="margin-bottom: 12px;"> + <div class="col-xs-12 m-b-12">🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/app/app-modules/nurse-doctor/case-sheet/general-case-sheet/doctor-diagnosis-case-sheet/doctor-diagnosis-case-sheet.component.html` around lines 613 - 615, The div in doctor-diagnosis-case-sheet.component.html uses an inline style for spacing; remove the inline style="margin-bottom: 12px;" and instead apply a CSS utility class (either reuse .m-b-10 or add a new .m-b-12 rule in the component stylesheet) to the element with class "col-xs-12" that wraps the <h4> (current_language_set?.casesheet?.chiefComplaint); update the component CSS to include .m-b-12 { margin-bottom: 12px !important; } if you need that exact spacing and then replace the inline style with the new utility class.src/app/app-modules/nurse-doctor/case-sheet/general-case-sheet/doctor-diagnosis-case-sheet/doctor-diagnosis-case-sheet.component.ts (1)
760-763: Redundant null/undefined checks can be simplified.The condition
!temp || temp === null || temp === undefinedis redundant because!tempalready evaluates totruefornullandundefined. This applies to all six validation methods.♻️ Simplified guard clause
isAbnormalTemp(temp: any): boolean { - if (!temp || temp === null || temp === undefined) return false; + if (!temp) return false; const tempValue = parseFloat(temp); + if (isNaN(tempValue)) return false; return tempValue < 36.1 || tempValue > 37.2; // Normal: 36.1-37.2°C }Note: Adding an explicit
isNaNcheck makes the intent clearer, asparseFloaton invalid input returnsNaN, and comparisons withNaNreturnfalse.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/app/app-modules/nurse-doctor/case-sheet/general-case-sheet/doctor-diagnosis-case-sheet/doctor-diagnosis-case-sheet.component.ts` around lines 760 - 763, Replace the redundant null/undefined guard in isAbnormalTemp (and the other five similar validation methods) by checking for falsy input and invalid numbers succinctly: return false if the input is falsy or parseFloat yields NaN, then compare the numeric value to the normal range; specifically, call parseFloat(temp) into tempValue, if (!temp || isNaN(tempValue)) return false, otherwise return tempValue < 36.1 || tempValue > 37.2. This simplifies the checks while preserving behavior and clarifies intent with an explicit isNaN check.src/app/app-modules/nurse-doctor/case-sheet/general-case-sheet/doctor-diagnosis-case-sheet/doctor-diagnosis-case-sheet.component.css (1)
362-398: Consider updating deprecatedpage-break-*properties tobreak-*.The
page-break-afterandpage-break-insideproperties are deprecated in favor ofbreak-afterandbreak-insidefrom the CSS Fragmentation spec.However, note that browser support for
break-*in print contexts varies. If supporting older browsers (especially Safari <17), you may want to include both properties for compatibility.♻️ Update to modern properties with fallback
h2 { font-size: 20px; margin-bottom: 16px; - page-break-after: avoid; + break-after: avoid; } fieldset { - page-break-inside: avoid; + break-inside: avoid; margin-bottom: 16px; /* ... */ }Or for maximum compatibility, include both:
fieldset { page-break-inside: avoid; /* Legacy fallback */ break-inside: avoid; /* Modern standard */ }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/app/app-modules/nurse-doctor/case-sheet/general-case-sheet/doctor-diagnosis-case-sheet/doctor-diagnosis-case-sheet.component.css` around lines 362 - 398, The CSS uses deprecated page-break-* properties (e.g., page-break-after in h2/h3/h4/h5 and page-break-inside in fieldset); update these to the modern break-* equivalents while retaining the legacy properties as fallbacks for older browsers: add break-after for h2/h3/h4/h5 alongside page-break-after and add break-inside for fieldset alongside page-break-inside, ensuring you update the selectors (h2, h3, h4, h5, and fieldset) where these rules appear so print fragmentation behavior is preserved across browsers.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In
`@src/app/app-modules/nurse-doctor/case-sheet/general-case-sheet/doctor-diagnosis-case-sheet/doctor-diagnosis-case-sheet.component.css`:
- Around line 234-238: Replace the deprecated CSS property in
doctor-diagnosis-case-sheet.component.css: locate the rule that currently uses
"word-wrap: break-word;" (inside the styles for the Doctor Diagnosis case sheet)
and change it to "overflow-wrap: break-word;" so modern browsers use the
standard property while keeping the same behavior and leaving the other
declarations (color, white-space, font-family) unchanged.
In
`@src/app/app-modules/nurse-doctor/case-sheet/general-case-sheet/doctor-diagnosis-case-sheet/doctor-diagnosis-case-sheet.component.ts`:
- Around line 772-782: The isAbnormalSPO2/isCriticalSPO2 boundary handling is
inconsistent with the comment: isAbnormalSPO2 currently uses `spo2Value < 95 &&
spo2Value >= 90` which excludes 95%; either change the abnormal check to include
95 (e.g., use `spo2Value <= 95 && spo2Value >= 90`) so 95% is highlighted as
abnormal, or keep the current operators and update the comment to "Abnormal:
90-94%" so it matches the implementation; update whichever you choose in the
isAbnormalSPO2 function and ensure isCriticalSPO2 (`spo2Value < 90`) remains
correct.
---
Nitpick comments:
In
`@src/app/app-modules/nurse-doctor/case-sheet/general-case-sheet/doctor-diagnosis-case-sheet/doctor-diagnosis-case-sheet.component.css`:
- Around line 362-398: The CSS uses deprecated page-break-* properties (e.g.,
page-break-after in h2/h3/h4/h5 and page-break-inside in fieldset); update these
to the modern break-* equivalents while retaining the legacy properties as
fallbacks for older browsers: add break-after for h2/h3/h4/h5 alongside
page-break-after and add break-inside for fieldset alongside page-break-inside,
ensuring you update the selectors (h2, h3, h4, h5, and fieldset) where these
rules appear so print fragmentation behavior is preserved across browsers.
In
`@src/app/app-modules/nurse-doctor/case-sheet/general-case-sheet/doctor-diagnosis-case-sheet/doctor-diagnosis-case-sheet.component.html`:
- Around line 613-615: The div in doctor-diagnosis-case-sheet.component.html
uses an inline style for spacing; remove the inline style="margin-bottom: 12px;"
and instead apply a CSS utility class (either reuse .m-b-10 or add a new .m-b-12
rule in the component stylesheet) to the element with class "col-xs-12" that
wraps the <h4> (current_language_set?.casesheet?.chiefComplaint); update the
component CSS to include .m-b-12 { margin-bottom: 12px !important; } if you need
that exact spacing and then replace the inline style with the new utility class.
In
`@src/app/app-modules/nurse-doctor/case-sheet/general-case-sheet/doctor-diagnosis-case-sheet/doctor-diagnosis-case-sheet.component.ts`:
- Around line 760-763: Replace the redundant null/undefined guard in
isAbnormalTemp (and the other five similar validation methods) by checking for
falsy input and invalid numbers succinctly: return false if the input is falsy
or parseFloat yields NaN, then compare the numeric value to the normal range;
specifically, call parseFloat(temp) into tempValue, if (!temp ||
isNaN(tempValue)) return false, otherwise return tempValue < 36.1 || tempValue >
37.2. This simplifies the checks while preserving behavior and clarifies intent
with an explicit isNaN check.
ℹ️ Review info
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/app/app-modules/nurse-doctor/case-sheet/general-case-sheet/doctor-diagnosis-case-sheet/doctor-diagnosis-case-sheet.component.csssrc/app/app-modules/nurse-doctor/case-sheet/general-case-sheet/doctor-diagnosis-case-sheet/doctor-diagnosis-case-sheet.component.htmlsrc/app/app-modules/nurse-doctor/case-sheet/general-case-sheet/doctor-diagnosis-case-sheet/doctor-diagnosis-case-sheet.component.ts
...eet/general-case-sheet/doctor-diagnosis-case-sheet/doctor-diagnosis-case-sheet.component.css
Outdated
Show resolved
Hide resolved
...heet/general-case-sheet/doctor-diagnosis-case-sheet/doctor-diagnosis-case-sheet.component.ts
Show resolved
Hide resolved
Author
|
@drtechie this pr is regarding issue PSMRI/AMRIT#116 |
Member
|
@ananyaa0518 please attach screenshots of how you have tested this. |
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
src/app/app-modules/nurse-doctor/case-sheet/general-case-sheet/doctor-diagnosis-case-sheet/doctor-diagnosis-case-sheet.component.css (1)
231-231:⚠️ Potential issue | 🟡 MinorReplace deprecated
word-wrapwithoverflow-wrap.Line 231 still uses a deprecated property and keeps failing modern lint rules.
🔧 Proposed fix
- word-wrap: break-word; + overflow-wrap: break-word;#!/bin/bash # Verify deprecated word-wrap is no longer used in CSS files rg -n --type=css '\bword-wrap\s*:' # Expected: no matches🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/app/app-modules/nurse-doctor/case-sheet/general-case-sheet/doctor-diagnosis-case-sheet/doctor-diagnosis-case-sheet.component.css` at line 231, Replace the deprecated CSS property "word-wrap: break-word;" with the modern "overflow-wrap: break-word;" in doctor-diagnosis-case-sheet.component.css by locating the occurrence of the "word-wrap" declaration and updating it to "overflow-wrap" so lint rules pass and behavior remains the same.
🧹 Nitpick comments (1)
src/app/app-modules/nurse-doctor/case-sheet/general-case-sheet/doctor-diagnosis-case-sheet/doctor-diagnosis-case-sheet.component.css (1)
16-16: Remove unnecessary quotes from single-word font names.The
font-familydeclaration incorrectly quotes single-word names ('Inter','Roboto'). Per the default stylelint rulefont-family-name-quotes: "always-where-required", quotes are needed only for multi-word names like'Helvetica Neue'.Proposed fix
- font-family: 'Inter', 'Roboto', 'Helvetica Neue', Arial, sans-serif; + font-family: Inter, Roboto, 'Helvetica Neue', Arial, sans-serif;🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/app/app-modules/nurse-doctor/case-sheet/general-case-sheet/doctor-diagnosis-case-sheet/doctor-diagnosis-case-sheet.component.css` at line 16, The font-family declaration in doctor-diagnosis-case-sheet.component.css is quoting single-word font names; update the font-family property (the font-family declaration in doctor-diagnosis-case-sheet.component.css used for the doctor-diagnosis-case-sheet styles) to remove quotes around single-word names like Inter and Roboto while keeping quotes for multi-word names such as "Helvetica Neue" so it conforms to the font-family-name-quotes stylelint rule.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In
`@src/app/app-modules/nurse-doctor/case-sheet/general-case-sheet/doctor-diagnosis-case-sheet/doctor-diagnosis-case-sheet.component.css`:
- Around line 344-349: Replace deprecated CSS Fragmentation Module properties in
this file: change all occurrences of page-break-after to break-after and
page-break-inside to break-inside (e.g., the rule that currently has
"page-break-after: avoid;" and the fieldset rule using "page-break-inside:
avoid"); also convert any "page-break-after: always" usages to "break-after:
page" so rules like the page-break-after on container/fieldset follow modern CSS
fragmentation syntax.
---
Duplicate comments:
In
`@src/app/app-modules/nurse-doctor/case-sheet/general-case-sheet/doctor-diagnosis-case-sheet/doctor-diagnosis-case-sheet.component.css`:
- Line 231: Replace the deprecated CSS property "word-wrap: break-word;" with
the modern "overflow-wrap: break-word;" in
doctor-diagnosis-case-sheet.component.css by locating the occurrence of the
"word-wrap" declaration and updating it to "overflow-wrap" so lint rules pass
and behavior remains the same.
---
Nitpick comments:
In
`@src/app/app-modules/nurse-doctor/case-sheet/general-case-sheet/doctor-diagnosis-case-sheet/doctor-diagnosis-case-sheet.component.css`:
- Line 16: The font-family declaration in
doctor-diagnosis-case-sheet.component.css is quoting single-word font names;
update the font-family property (the font-family declaration in
doctor-diagnosis-case-sheet.component.css used for the
doctor-diagnosis-case-sheet styles) to remove quotes around single-word names
like Inter and Roboto while keeping quotes for multi-word names such as
"Helvetica Neue" so it conforms to the font-family-name-quotes stylelint rule.
ℹ️ Review info
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/app/app-modules/nurse-doctor/case-sheet/general-case-sheet/doctor-diagnosis-case-sheet/doctor-diagnosis-case-sheet.component.csssrc/app/app-modules/nurse-doctor/case-sheet/general-case-sheet/doctor-diagnosis-case-sheet/doctor-diagnosis-case-sheet.component.html
🚧 Files skipped from review as they are similar to previous changes (1)
- src/app/app-modules/nurse-doctor/case-sheet/general-case-sheet/doctor-diagnosis-case-sheet/doctor-diagnosis-case-sheet.component.html
...eet/general-case-sheet/doctor-diagnosis-case-sheet/doctor-diagnosis-case-sheet.component.css
Show resolved
Hide resolved
Author
|
Member
|
Hi @ananyaa0518 Thank you for this. Were you able to run the HWC web application? PS: It looks much better. |
drtechie
reviewed
Mar 3, 2026
| } | ||
|
|
||
| /* Vitals Abnormal Detection Methods */ | ||
| isAbnormalTemp(temp: any): boolean { |
Member
There was a problem hiding this comment.
I am not sure about handling this client-side.
This is only a small subset. What about abnormal values for all the investigations test suite present in the system.
Author
There was a problem hiding this comment.
This PR is intentionally scoped to UI/UX cleanup and client-side highlighting for standardized vitals only.
Full abnormal detection for investigations should ideally be backend-driven using test-specific reference ranges.
To avoid scope expansion into backend changes, I’ve limited this implementation to vitals. We can plan a separate enhancement for investigation-level abnormal flagging if needed.
drtechie
reviewed
Mar 3, 2026
...eet/general-case-sheet/doctor-diagnosis-case-sheet/doctor-diagnosis-case-sheet.component.css
Show resolved
Hide resolved
Author
|
The codebase is quite large, and after initially loading it, I started encountering runtime errors. To isolate the issue, I created a separate copy of the Doctor Case Sheet folder and implemented changes there. For testing purposes, I also created test.html and test.css to validate it. |
|
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/styles.css`:
- Line 6: The `@import` line uses url(...) which violates the Stylelint
import-notation rule; update the stylesheet's `@import` statement (the `@import`
declaration that loads the Inter font) to use string notation by replacing the
url(...) form with a quoted string (e.g., `@import`
'https://fonts.googleapis.com/…') so the import-notation rule is satisfied and
linting will pass.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
feat: Modern UI redesign for Doctor Diagnosis Case Sheet component
Doctor Diagnosis Case Sheet - Modern UI Redesign
Overview
This PR introduces a comprehensive UI/UX redesign of the Doctor Diagnosis Case Sheet component with improved styling, better visual hierarchy, and enhanced vital signs monitoring capabilities.
Changes Summary
Files Modified
CSS Improvements
Typography Hierarchy
Layout & Spacing
Table Styling
Vital Signs Highlighting
Print Optimization
HTML Enhancements
TypeScript Component Additions
New Vital Sign Validation Methods
Benefits
Testing Recommendations
Type: Feature
Priority: Medium
Affected Modules: Nurse-Doctor, Case Sheet
Summary by CodeRabbit
New Features
Style