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.

Sign up for GitHub

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

Jump to bottom

Fixed:Show more monitors in CNS on very large displays #6503 #9013

Open
wants to merge 19 commits into
base: develop
Choose a base branch
from
+53 −42
Open

Fixed:Show more monitors in CNS on very large displays #6503 #9013

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
ce241c3
Merge pull request #1 from ohcnetwork/develop
i0am0arunava Nov 6, 2024
7163bf8
Show more monitors in CNS on very large displays
i0am0arunava Nov 6, 2024
ebc5613
Merge branch 'develop' into issues/6503/displayCNSon4k
i0am0arunava Nov 6, 2024
80e48d6
Merge pull request #2 from ohcnetwork/develop
i0am0arunava Nov 6, 2024
3f5fcd3
Merge pull request #3 from ohcnetwork/develop
i0am0arunava Nov 6, 2024
7974ef2
per page 9 monitors inserted for large display
i0am0arunava Nov 6, 2024
1801e16
added state per page 9 monitors inserted for large display
i0am0arunava Nov 6, 2024
180b214
added state per page 9 monitors inserted for large display
i0am0arunava Nov 6, 2024
6509672
added state per page 9 monitors inserted for large display
i0am0arunava Nov 6, 2024
2eb15ff
added usebreakpoint hook
i0am0arunava Nov 6, 2024
89d424c
added usebreakpoint hook
i0am0arunava Nov 6, 2024
7b16aa1
added usebreakpoint hook
i0am0arunava Nov 6, 2024
1e62a29
nothing
i0am0arunava Nov 6, 2024
4bb9541
added usebreakpoint hook
i0am0arunava Nov 6, 2024
a0baac9
added usebreakpoint hook
i0am0arunava Nov 6, 2024
2459be9
added usebreakpoint hook
i0am0arunava Nov 6, 2024
d986b2e
added usebreakpoint hook
i0am0arunava Nov 6, 2024
a7932ae
added usebreakpoint hook
i0am0arunava Nov 6, 2024
a5cc300
added usebrekpoint hook instead of usestate
i0am0arunava Nov 6, 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
11 changes: 6 additions & 5 deletions cypress/e2e/assets_spec/AssetHomepage.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import { AssetSearchPage } from "../../pageobject/Asset/AssetSearch";
import { AssetQRScanPage } from "../../pageobject/Asset/AssetQRScan";
import { AssetPagination } from "../../pageobject/Asset/AssetPagination";
import { AssetFilters } from "../../pageobject/Asset/AssetFilters";
import { v4 as uuidv4 } from "uuid";

import { AssetPage } from "../../pageobject/Asset/AssetCreation";
import { AssetFilters } from "../../pageobject/Asset/AssetFilters";
import { AssetPagination } from "../../pageobject/Asset/AssetPagination";
import { AssetQRScanPage } from "../../pageobject/Asset/AssetQRScan";
import { AssetSearchPage } from "../../pageobject/Asset/AssetSearch";
import LoginPage from "../../pageobject/Login/LoginPage";
import { v4 as uuidv4 } from "uuid";

describe("Asset Tab", () => {
const assetSearchPage = new AssetSearchPage();
Expand Down
5 changes: 3 additions & 2 deletions cypress/e2e/assets_spec/AssetsCreation.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { AssetPage } from "../../pageobject/Asset/AssetCreation";
import { v4 as uuidv4 } from "uuid";
import LoginPage from "../../pageobject/Login/LoginPage";

import { AssetPage } from "../../pageobject/Asset/AssetCreation";
import { AssetSearchPage } from "../../pageobject/Asset/AssetSearch";
import LoginPage from "../../pageobject/Login/LoginPage";

describe("Asset", () => {
const assetPage = new AssetPage();
Expand Down
4 changes: 2 additions & 2 deletions cypress/e2e/assets_spec/AssetsManage.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { AssetPage } from "../../pageobject/Asset/AssetCreation";
import LoginPage from "../../pageobject/Login/LoginPage";
import { AssetFilters } from "../../pageobject/Asset/AssetFilters";
import { AssetSearchPage } from "../../pageobject/Asset/AssetSearch";
import FacilityPage from "../../pageobject/Facility/FacilityCreation";
import { AssetFilters } from "../../pageobject/Asset/AssetFilters";
import LoginPage from "../../pageobject/Login/LoginPage";

function addDaysToDate(numberOfDays: number) {
const inputDate = new Date();
Expand Down
2 changes: 1 addition & 1 deletion cypress/e2e/facility_spec/FacilityCreation.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import FacilityPage from "../../pageobject/Facility/FacilityCreation";
import LoginPage from "../../pageobject/Login/LoginPage";
import FacilityHome from "../../pageobject/Facility/FacilityHome";
import LoginPage from "../../pageobject/Login/LoginPage";
import ManageUserPage from "../../pageobject/Users/ManageUserPage";
import { UserCreationPage } from "../../pageobject/Users/UserCreation";

Expand Down
7 changes: 3 additions & 4 deletions cypress/e2e/facility_spec/FacilityHomepage.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
// FacilityCreation

import LoginPage from "../../pageobject/Login/LoginPage";
import { AssetPagination } from "../../pageobject/Asset/AssetPagination";
import FacilityPage from "../../pageobject/Facility/FacilityCreation";
import FacilityHome from "../../pageobject/Facility/FacilityHome";
import LoginPage from "../../pageobject/Login/LoginPage";
import ManageUserPage from "../../pageobject/Users/ManageUserPage";
import FacilityPage from "../../pageobject/Facility/FacilityCreation";
import { UserPage } from "../../pageobject/Users/UserSearch";
import { AssetPagination } from "../../pageobject/Asset/AssetPagination";

describe("Facility Homepage Function", () => {
const loginPage = new LoginPage();
Expand Down
2 changes: 1 addition & 1 deletion cypress/e2e/facility_spec/FacilityInventory.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import FacilityPage from "../../pageobject/Facility/FacilityCreation";
import LoginPage from "../../pageobject/Login/LoginPage";
import FacilityHome from "../../pageobject/Facility/FacilityHome";
import LoginPage from "../../pageobject/Login/LoginPage";

describe("Inventory Management Section", () => {
const facilityPage = new FacilityPage();
Expand Down
7 changes: 4 additions & 3 deletions cypress/e2e/facility_spec/FacilityManage.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import LoginPage from "../../pageobject/Login/LoginPage";
import FacilityManage from "../../pageobject/Facility/FacilityManage";
import FacilityPage from "../../pageobject/Facility/FacilityCreation";
import { v4 as uuidv4 } from "uuid";

import FacilityPage from "../../pageobject/Facility/FacilityCreation";
import FacilityManage from "../../pageobject/Facility/FacilityManage";
import LoginPage from "../../pageobject/Login/LoginPage";

describe("Facility Manage Functions", () => {
const loginPage = new LoginPage();
const facilityManage = new FacilityManage();
Expand Down
2 changes: 1 addition & 1 deletion cypress/e2e/patient_spec/PatientBedManagement.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import LoginPage from "../../pageobject/Login/LoginPage";
import { PatientConsultationPage } from "../../pageobject/Patient/PatientConsultation";
import { PatientPage } from "../../pageobject/Patient/PatientCreation";
import PatientLogupdate from "../../pageobject/Patient/PatientLogupdate";
import { PatientConsultationPage } from "../../pageobject/Patient/PatientConsultation";

describe("Patient swtich bed functionality", () => {
const loginPage = new LoginPage();
Expand Down
10 changes: 5 additions & 5 deletions cypress/e2e/patient_spec/PatientConsultationCreation.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import LoginPage from "../../pageobject/Login/LoginPage";
import { PatientPage } from "../../pageobject/Patient/PatientCreation";
import { PatientConsultationPage } from "../../pageobject/Patient/PatientConsultation";
import PatientPredefined from "../../pageobject/Patient/PatientPredefined";
import ShiftCreation from "../../pageobject/Shift/ShiftCreation";
import PatientInvestigation from "../../pageobject/Patient/PatientInvestigation";
import PatientTreatmentPlan from "../../pageobject/Patient/PatientTreatmentPlan";
import { PatientPage } from "../../pageobject/Patient/PatientCreation";
import PatientDeathReport from "../../pageobject/Patient/PatientDeathReport";
import PatientInvestigation from "../../pageobject/Patient/PatientInvestigation";
import PatientPredefined from "../../pageobject/Patient/PatientPredefined";
import PatientPrescription from "../../pageobject/Patient/PatientPrescription";
import PatientTreatmentPlan from "../../pageobject/Patient/PatientTreatmentPlan";
import ShiftCreation from "../../pageobject/Shift/ShiftCreation";

describe("Patient Consultation in multiple combination", () => {
const patientConsultationPage = new PatientConsultationPage();
Expand Down
1 change: 1 addition & 0 deletions cypress/e2e/patient_spec/PatientDoctorConnect.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { DoctorConnect } from "pageobject/Patient/PatientDoctorConnect";

import LoginPage from "../../pageobject/Login/LoginPage";
import { PatientPage } from "../../pageobject/Patient/PatientCreation";

Expand Down
1 change: 1 addition & 0 deletions cypress/e2e/patient_spec/PatientFileUpload.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import LoginPage from "../../pageobject/Login/LoginPage";
import { PatientPage } from "../../pageobject/Patient/PatientCreation";
import { PatientFileUpload } from "../../pageobject/Patient/PatientFileupload";

const loginPage = new LoginPage();
const patientPage = new PatientPage();
const patientFileUpload = new PatientFileUpload();
Expand Down
2 changes: 1 addition & 1 deletion cypress/e2e/patient_spec/PatientLogUpdate.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import LoginPage from "../../pageobject/Login/LoginPage";
import { PatientConsultationPage } from "../../pageobject/Patient/PatientConsultation";
import { PatientPage } from "../../pageobject/Patient/PatientCreation";
import PatientLogupdate from "../../pageobject/Patient/PatientLogupdate";
import PatientInvestigation from "../../pageobject/Patient/PatientInvestigation";
import PatientLogupdate from "../../pageobject/Patient/PatientLogupdate";
import PatientPrescription from "../../pageobject/Patient/PatientPrescription";

describe("Patient Log Update in Normal, Critical and TeleIcu", () => {
Expand Down
2 changes: 1 addition & 1 deletion cypress/e2e/patient_spec/PatientPrescription.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import PatientPrescription from "../../pageobject/Patient/PatientPrescription";
import LoginPage from "../../pageobject/Login/LoginPage";
import { PatientPage } from "../../pageobject/Patient/PatientCreation";
import PatientPrescription from "../../pageobject/Patient/PatientPrescription";

const patientPrescription = new PatientPrescription();
const loginPage = new LoginPage();
Expand Down
6 changes: 3 additions & 3 deletions cypress/e2e/patient_spec/PatientRegistration.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import FacilityPage from "../../pageobject/Facility/FacilityCreation";
import LoginPage from "../../pageobject/Login/LoginPage";
import { PatientPage } from "../../pageobject/Patient/PatientCreation";
import FacilityPage from "../../pageobject/Facility/FacilityCreation";
import { generatePhoneNumber } from "../../pageobject/utils/constants";
import PatientTransfer from "../../pageobject/Patient/PatientTransfer";
import PatientInsurance from "../../pageobject/Patient/PatientInsurance";
import PatientMedicalHistory from "../../pageobject/Patient/PatientMedicalHistory";
import PatientTransfer from "../../pageobject/Patient/PatientTransfer";
import { generatePhoneNumber } from "../../pageobject/utils/constants";
Comment on lines +1 to +7
Copy link

Choose a reason for hiding this comment

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

💡 Codebase verification

Changes to patient registration tests are unrelated to CNS display improvements

The verification shows that this PR primarily focuses on improving the CNS display for large screens by:

  1. Replacing manual dimension handling with a proper useBreakpoints hook
  2. Updating the grid layout for 4K displays
  3. Optimizing the number of monitors shown based on screen size

The changes to PatientRegistration.cy.ts imports appear to be unrelated to these CNS display improvements and should be moved to a separate PR to maintain clear scope and change tracking.

🔗 Analysis chain

LGTM, but verify if these changes belong in this PR.

The import changes are well-structured and the new imports are properly utilized in the test suite. However, these changes appear unrelated to the PR's primary objective of fixing CNS display issues on large screens.

Let's check if there are related changes in other files:

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check for related changes to verify PR scope
# Look for CNS-related changes that this PR should be focusing on
rg -l "CentralNursingStation|CNS" --type ts --type tsx

Length of output: 84

Script:

#!/bin/bash
# Let's try a different approach to find CNS-related files and changes
# First, let's search without type restrictions
rg -l "CentralNursingStation|CNS"

# Also search for monitor-related changes since PR is about large displays
rg -l "monitor|display" --type ts

Length of output: 3566

Script:

#!/bin/bash
# Let's check the actual changes in CNS-related files to understand the PR scope
git diff HEAD~1 src/components/Facility/CentralNursingStation.tsx

# Also check if there are any changes to the patient registration test file
git diff HEAD~1 cypress/e2e/patient_spec/PatientRegistration.cy.ts

Length of output: 2600


const yearOfBirth = "2001";
const isHCXEnabled = Cypress.env("ENABLE_HCX");
Expand Down
2 changes: 1 addition & 1 deletion cypress/e2e/resource_spec/ResourcesHomepage.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import FacilityPage from "../../pageobject/Facility/FacilityCreation";
import LoginPage from "../../pageobject/Login/LoginPage";
import ResourcePage from "../../pageobject/Resource/ResourcePage";
import FacilityPage from "../../pageobject/Facility/FacilityCreation";

describe("Resource Page", () => {
let createdResource: string;
Expand Down
6 changes: 3 additions & 3 deletions cypress/e2e/users_spec/UsersCreation.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import LoginPage from "../../pageobject/Login/LoginPage";
import { AssetSearchPage } from "../../pageobject/Asset/AssetSearch";
import FacilityPage from "../../pageobject/Facility/FacilityCreation";
import { UserPage } from "../../pageobject/Users/UserSearch";
import LoginPage from "../../pageobject/Login/LoginPage";
import { UserCreationPage } from "../../pageobject/Users/UserCreation";
import { UserPage } from "../../pageobject/Users/UserSearch";
import {
generatePhoneNumber,
generateEmergencyPhoneNumber,
generatePhoneNumber,
} from "../../pageobject/utils/constants";

describe("User Creation", () => {
Expand Down
2 changes: 1 addition & 1 deletion cypress/e2e/users_spec/UsersManage.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import LoginPage from "../../pageobject/Login/LoginPage";
import { UserPage } from "../../pageobject/Users/UserSearch";
import ManageUserPage from "../../pageobject/Users/ManageUserPage";
import { UserCreationPage } from "../../pageobject/Users/UserCreation";
import { UserPage } from "../../pageobject/Users/UserSearch";

describe("Manage User", () => {
const loginPage = new LoginPage();
Expand Down
12 changes: 9 additions & 3 deletions src/components/Facility/CentralNursingStation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,13 @@ import HL7PatientVitalsMonitor from "@/components/VitalsMonitor/HL7PatientVitals
import useVitalsAspectRatioConfig from "@/components/VitalsMonitor/useVitalsAspectRatioConfig";
import { getVitalsMonitorSocketUrl } from "@/components/VitalsMonitor/utils";

import useBreakpoints from "@/hooks/useBreakpoints";
import useFilters from "@/hooks/useFilters";
import useFullscreen from "@/hooks/useFullscreen";

import routes from "@/Utils/request/api";
import useQuery from "@/Utils/request/useQuery";

const PER_PAGE_LIMIT = 6;

const SORT_OPTIONS: SortOption[] = [
{ isAscending: true, value: "bed__name" },
{ isAscending: false, value: "-bed__name" },
Expand All @@ -41,11 +40,18 @@ interface Props {
}

export default function CentralNursingStation({ facilityId }: Props) {
const breakpointValues = {
default: 6, // Default value if no breakpoints match
fourK: 9, // Value for screens wider than 2080px defined in useBrekpoint hook
};
const PER_PAGE_LIMIT = useBreakpoints(breakpointValues);
const { t } = useTranslation();
const [isFullscreen, setFullscreen] = useFullscreen();

const { qParams, updateQuery, removeFilter, updatePage } = useFilters({
limit: PER_PAGE_LIMIT,
});

const query = useQuery(routes.listPatientAssetBeds, {
pathParams: { facility_external_id: facilityId },
query: {
Expand Down Expand Up @@ -216,7 +222,7 @@ export default function CentralNursingStation({ facilityId }: Props) {
{t("no_vitals_present")}
</div>
) : (
<div className="3xl:grid-cols-3 mt-1 grid grid-cols-1 gap-1 lg:grid-cols-2">
<div className="mt-1 grid grid-cols-1 gap-1 lg:grid-cols-2 fourK:grid-cols-3">
{data.map((props, i) => (
<div className="overflow-hidden text-clip" key={i}>
<HL7PatientVitalsMonitor
Expand Down
3 changes: 2 additions & 1 deletion src/hooks/useBreakpoints.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import useWindowDimensions from "@/hooks/useWindowDimensions";

type Breakpoints = "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
type Breakpoints = "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "fourK";

// Ensure that the breakpoint widths are sorted in ascending order.
const BREAKPOINT_WIDTH: Record<Breakpoints, number> = {
Expand All @@ -10,6 +10,7 @@ const BREAKPOINT_WIDTH: Record<Breakpoints, number> = {
xl: 1280,
"2xl": 1536,
"3xl": 1920,
fourK: 2080,
};

/**
Expand Down
4 changes: 4 additions & 0 deletions tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,15 @@ const secondary = {
};

/** @type {import('tailwindcss').Config} */

module.exports = {
important: true,
darkMode: ["class"],
theme: {
extend: {
screens: {
fourK: "130rem", // rem is used insted of pixel
},
fontFamily: {
sans: ["Figtree", "sans-serif"],
},
Expand Down
Loading