From ef3403a327a444c9de01a640077530e172b9150b Mon Sep 17 00:00:00 2001 From: Shivank Kacker Date: Thu, 17 Oct 2024 15:36:13 +0530 Subject: [PATCH 1/2] Updated UI for facility cards and avatar component (#8782) --- cypress/pageobject/Facility/FacilityHome.ts | 2 +- src/CAREUI/display/Count.tsx | 10 +- src/Components/Common/Avatar.tsx | 62 ++++++----- .../Common/Sidebar/SidebarUserCard.tsx | 2 +- src/Components/Facility/FacilityBlock.tsx | 14 +-- src/Components/Facility/FacilityCard.tsx | 105 ++++++------------ src/Components/Facility/FacilityHome.tsx | 57 ++++------ src/Components/Patient/ManagePatients.tsx | 7 +- src/Locale/en.json | 3 + 9 files changed, 110 insertions(+), 152 deletions(-) diff --git a/cypress/pageobject/Facility/FacilityHome.ts b/cypress/pageobject/Facility/FacilityHome.ts index e021171ff0a..dea7de0e7b6 100644 --- a/cypress/pageobject/Facility/FacilityHome.ts +++ b/cypress/pageobject/Facility/FacilityHome.ts @@ -72,7 +72,7 @@ class FacilityHome { } verifyOccupancyBadgeVisibility() { - cy.get("#occupany-badge").should("be.visible"); + cy.get('[data-test-id="occupancy-badge"]').should("be.visible"); } verifyAndCloseNotifyModal() { diff --git a/src/CAREUI/display/Count.tsx b/src/CAREUI/display/Count.tsx index 997b58794eb..6b28ca4f962 100644 --- a/src/CAREUI/display/Count.tsx +++ b/src/CAREUI/display/Count.tsx @@ -11,15 +11,13 @@ interface Props { export default function CountBlock(props: Props) { return ( -
-
-
+
+
+
-
+
{props.text}
{props.loading ? ( diff --git a/src/Components/Common/Avatar.tsx b/src/Components/Common/Avatar.tsx index a519901216b..e4d42dd72ae 100644 --- a/src/Components/Common/Avatar.tsx +++ b/src/Components/Common/Avatar.tsx @@ -1,4 +1,5 @@ -import React from "react"; +import { cn } from "@/lib/utils"; +import React, { useEffect, useRef, useState } from "react"; const colors: string[] = [ "#E6F3FF", // Light Blue @@ -44,43 +45,54 @@ const initials = (name: string): string => { interface AvatarProps { colors?: [string, string]; name: string; + imageUrl?: string; className?: string; - square?: boolean; // New prop to determine if the avatar should be square } const Avatar: React.FC = ({ colors: propColors, name, + imageUrl, className, - square = false, // Default to false for backwards compatibility }) => { - const [bgColor, fgColor] = propColors || toColor(name); + const [bgColor] = propColors || toColor(name); + const [width, setWidth] = useState(0); + const avatarRef = useRef(null); + + useEffect(() => { + const updateWidth = () => { + const avatarRect = avatarRef.current?.getBoundingClientRect(); + const width = avatarRect?.width || 0; + setWidth(width); + }; + updateWidth(); + document.addEventListener("resize", updateWidth); + return () => document.removeEventListener("resize", updateWidth); + }, []); return ( - - {square ? ( - + {imageUrl ? ( + {name} ) : ( - +
{initials(name)}
)} - - {initials(name)} - - +
); }; diff --git a/src/Components/Common/Sidebar/SidebarUserCard.tsx b/src/Components/Common/Sidebar/SidebarUserCard.tsx index 825507ffb25..9effc947dd6 100644 --- a/src/Components/Common/Sidebar/SidebarUserCard.tsx +++ b/src/Components/Common/Sidebar/SidebarUserCard.tsx @@ -40,7 +40,7 @@ const SidebarUserCard: React.FC = ({ shrinked }) => {
diff --git a/src/Components/Facility/FacilityBlock.tsx b/src/Components/Facility/FacilityBlock.tsx index 3232321637f..0ad87b050c5 100644 --- a/src/Components/Facility/FacilityBlock.tsx +++ b/src/Components/Facility/FacilityBlock.tsx @@ -24,15 +24,11 @@ export default function FacilityBlock(props: { return ( -
- {facility.read_cover_image_url ? ( - - ) : ( - - )} +
+
{facility.name} diff --git a/src/Components/Facility/FacilityCard.tsx b/src/Components/Facility/FacilityCard.tsx index 69b5b9d421e..e874a0f85c0 100644 --- a/src/Components/Facility/FacilityCard.tsx +++ b/src/Components/Facility/FacilityCard.tsx @@ -9,7 +9,6 @@ import CareIcon from "../../CAREUI/icons/CareIcon"; import { formatPhoneNumber, parsePhoneNumber } from "../../Utils/utils"; import DialogModal from "../Common/Dialog"; import TextAreaFormField from "../Form/FormFields/TextAreaFormField"; -import { classNames } from "../../Utils/utils"; import request from "../../Utils/request/request"; import routes from "../../Redux/api"; import careConfig from "@careConfig"; @@ -52,20 +51,18 @@ export const FacilityCard = (props: { return (
-
+
- {(facility.read_cover_image_url && ( - {facility.name} - )) || } +
@@ -73,21 +70,12 @@ export const FacilityCard = (props: {
- {(facility.read_cover_image_url && ( - {facility.name} - )) || ( - - )} +
{facility.kasp_empanelled && ( @@ -99,12 +87,27 @@ export const FacilityCard = (props: { className="flex flex-wrap items-center justify-between" id="facility-name-card" > - - {facility.name} - +
+ + {facility.name} + +
0.85 ? "justify-center rounded-md border border-red-600 bg-red-500 p-1 font-bold text-white" : "text-secondary-700"}`} + > + + {t("live_patients_total_beds")} + {" "} + +
+ {t("occupancy")}: {facility.patient_count} /{" "} + {facility.bed_count}{" "} +
+
+
- View CNS + {t("view_cns")}
+
-
+
{/*
*/}
-
- 0.85 - ? "button-danger-border bg-red-500" - : "button-primary-border bg-primary-100" - }`} - > - - Live Patients / Total beds - {" "} - - 0.85 - ? "text-white" - : "text-primary-600", - )} - />{" "} -
- 0.85 - ? "text-white" - : "text-secondary-700" - }`} - > - Occupancy: {facility.patient_count} /{" "} - {facility.bed_count}{" "} -
{" "} -
{
); - const CoverImage = () => ( - {facilityData?.name} - ); - return ( { onDelete={() => facilityFetch()} facility={facilityData ?? ({} as FacilityModel)} /> - {hasCoverImage ? ( -
- - {editCoverImageTooltip} -
- ) : ( -
- hasPermissionToEditCoverImage && setEditCoverImage(true) - } - > - - {editCoverImageTooltip} -
- )} + +
hasPermissionToEditCoverImage && setEditCoverImage(true)} + > + + {editCoverImageTooltip} +
{ hasPermissionToEditCoverImage && setEditCoverImage(true) } > - {hasCoverImage ? ( - - ) : ( -
- -
- )} +
+ +
+ {editCoverImageTooltip}
diff --git a/src/Components/Patient/ManagePatients.tsx b/src/Components/Patient/ManagePatients.tsx index 5259909bebe..7d49ffdaad1 100644 --- a/src/Components/Patient/ManagePatients.tsx +++ b/src/Components/Patient/ManagePatients.tsx @@ -494,7 +494,7 @@ export const PatientManager = () => { const children = (
{ ) : (
)} diff --git a/src/Locale/en.json b/src/Locale/en.json index a7c2d1a0c21..d4808fa185b 100644 --- a/src/Locale/en.json +++ b/src/Locale/en.json @@ -642,6 +642,7 @@ "litres_per_day": "Litres/day", "live": "Live", "live_monitoring": "Live Monitoring", + "live_patients_total_beds": "Live Patients / Total beds", "load_more": "Load More", "loading": "Loading...", "local_body": "Local body", @@ -732,6 +733,7 @@ "nursing_care": "Nursing Care", "nursing_information": "Nursing Information", "nutrition": "Nutrition", + "occupancy": "Occupancy", "occupation": "Occupation", "on": "On", "ongoing_medications": "Ongoing Medications", @@ -1036,6 +1038,7 @@ "view": "View", "view_abdm_records": "View ABDM Records", "view_asset": "View Assets", + "view_cns": "View CNS", "view_details": "View Details", "view_faciliy": "View Facility", "view_patients": "View Patients", From 8d4640b4a04c08a0661b14646338b04f51170210 Mon Sep 17 00:00:00 2001 From: Rithvik Nishad Date: Thu, 17 Oct 2024 15:37:44 +0530 Subject: [PATCH 2/2] Sort only `en` locale file in the sort-locale script; Update docker and CI to use `npm run install-all` (#8813) --- .devcontainer/devcontainer.json | 2 +- .github/workflows/cypress.yaml | 2 +- Dockerfile | 2 ++ scripts/sort-locales.js | 29 +++++++++-------------------- 4 files changed, 13 insertions(+), 22 deletions(-) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index 4fe94183a2f..40e5259b1c6 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -26,7 +26,7 @@ "cpus": 4 }, "waitFor": "onCreateCommand", - "postCreateCommand": "npm install", + "postCreateCommand": "npm run install-all", "postAttachCommand": { "server": "npm run dev" }, diff --git a/.github/workflows/cypress.yaml b/.github/workflows/cypress.yaml index 500dbd92be0..0f588568bbc 100644 --- a/.github/workflows/cypress.yaml +++ b/.github/workflows/cypress.yaml @@ -70,7 +70,7 @@ jobs: node-version: "20" - name: Install dependencies 📦 - run: npm install + run: npm run install-all - name: Build ⚙️ run: npm run build diff --git a/Dockerfile b/Dockerfile index 5061a977585..3a96ab3c28a 100644 --- a/Dockerfile +++ b/Dockerfile @@ -13,6 +13,8 @@ RUN npm install COPY . . +RUN npm run setup + RUN npm run build diff --git a/scripts/sort-locales.js b/scripts/sort-locales.js index cf365a41d09..adff586a93b 100644 --- a/scripts/sort-locales.js +++ b/scripts/sort-locales.js @@ -1,26 +1,15 @@ // eslint-disable-next-line @typescript-eslint/no-var-requires const fs = require("fs"); -// eslint-disable-next-line @typescript-eslint/no-var-requires -const path = require("path"); - -const directory = "src/Locale"; -fs.readdir(directory, (err, files) => { - if (err) throw err; +const file = "src/Locale/en.json"; - files.forEach((file) => { - if (file.endsWith(".json")) { - const filePath = path.join(directory, file); - const data = JSON.parse(fs.readFileSync(filePath, "utf8")); +const data = JSON.parse(fs.readFileSync(file, "utf8")); - const sortedData = Object.keys(data) - .sort() - .reduce((acc, key) => { - acc[key] = data[key]; - return acc; - }, {}); +const sortedData = Object.keys(data) + .sort() + .reduce((acc, key) => { + acc[key] = data[key]; + return acc; + }, {}); - fs.writeFileSync(filePath, JSON.stringify(sortedData, null, 2) + "\n"); - } - }); -}); +fs.writeFileSync(file, JSON.stringify(sortedData, null, 2) + "\n");