element', () => {
- // https://on.cypress.io/select
-
- // at first, no option should be selected
- cy.get('.action-select')
- .should('have.value', '--Select a fruit--')
-
- // Select option(s) with matching text content
- cy.get('.action-select').select('apples')
- // confirm the apples were selected
- // note that each value starts with "fr-" in our HTML
- cy.get('.action-select').should('have.value', 'fr-apples')
-
- cy.get('.action-select-multiple')
- .select(['apples', 'oranges', 'bananas'])
- // when getting multiple values, invoke "val" method first
- .invoke('val')
- .should('deep.equal', ['fr-apples', 'fr-oranges', 'fr-bananas'])
-
- // Select option(s) with matching value
- cy.get('.action-select').select('fr-bananas')
- // can attach an assertion right away to the element
- .should('have.value', 'fr-bananas')
-
- cy.get('.action-select-multiple')
- .select(['fr-apples', 'fr-oranges', 'fr-bananas'])
- .invoke('val')
- .should('deep.equal', ['fr-apples', 'fr-oranges', 'fr-bananas'])
-
- // assert the selected values include oranges
- cy.get('.action-select-multiple')
- .invoke('val').should('include', 'fr-oranges')
- })
-
- it('.scrollIntoView() - scroll an element into view', () => {
- // https://on.cypress.io/scrollintoview
-
- // normally all of these buttons are hidden,
- // because they're not within
- // the viewable area of their parent
- // (we need to scroll to see them)
- cy.get('#scroll-horizontal button')
- .should('not.be.visible')
-
- // scroll the button into view, as if the user had scrolled
- cy.get('#scroll-horizontal button').scrollIntoView()
- .should('be.visible')
-
- cy.get('#scroll-vertical button')
- .should('not.be.visible')
-
- // Cypress handles the scroll direction needed
- cy.get('#scroll-vertical button').scrollIntoView()
- .should('be.visible')
-
- cy.get('#scroll-both button')
- .should('not.be.visible')
-
- // Cypress knows to scroll to the right and down
- cy.get('#scroll-both button').scrollIntoView()
- .should('be.visible')
- })
-
- it('.trigger() - trigger an event on a DOM element', () => {
- // https://on.cypress.io/trigger
-
- // To interact with a range input (slider)
- // we need to set its value & trigger the
- // event to signal it changed
-
- // Here, we invoke jQuery's val() method to set
- // the value and trigger the 'change' event
- cy.get('.trigger-input-range')
- .invoke('val', 25)
- .trigger('change')
- .get('input[type=range]').siblings('p')
- .should('have.text', '25')
- })
-
- it('cy.scrollTo() - scroll the window or element to a position', () => {
- // https://on.cypress.io/scrollto
-
- // You can scroll to 9 specific positions of an element:
- // -----------------------------------
- // | topLeft top topRight |
- // | |
- // | |
- // | |
- // | left center right |
- // | |
- // | |
- // | |
- // | bottomLeft bottom bottomRight |
- // -----------------------------------
-
- // if you chain .scrollTo() off of cy, we will
- // scroll the entire window
- cy.scrollTo('bottom')
-
- cy.get('#scrollable-horizontal').scrollTo('right')
-
- // or you can scroll to a specific coordinate:
- // (x axis, y axis) in pixels
- cy.get('#scrollable-vertical').scrollTo(250, 250)
-
- // or you can scroll to a specific percentage
- // of the (width, height) of the element
- cy.get('#scrollable-both').scrollTo('75%', '25%')
-
- // control the easing of the scroll (default is 'swing')
- cy.get('#scrollable-vertical').scrollTo('center', { easing: 'linear' })
-
- // control the duration of the scroll (in ms)
- cy.get('#scrollable-both').scrollTo('center', { duration: 2000 })
- })
-})
diff --git a/cypress/integration/2-advanced-examples/aliasing.spec.js b/cypress/integration/2-advanced-examples/aliasing.spec.js
deleted file mode 100644
index a02fb2bb93d..00000000000
--- a/cypress/integration/2-advanced-examples/aliasing.spec.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/// element in various ways
- .should('have.text', 'Column content')
- .should('contain', 'Column content')
- .should('have.html', 'Column content')
- // chai-jquery uses "is()" to check if element matches selector
- .should('match', 'td')
- // to match text content against a regular expression
- // first need to invoke jQuery method text()
- // and then match using regular expression
- .invoke('text')
- .should('match', /column content/i)
-
- // a better way to check element's text content against a regular expression
- // is to use "cy.contains"
- // https://on.cypress.io/contains
- cy.get('.assertion-table')
- .find('tbody tr:last')
- // finds first element with text content matching regular expression
- .contains('td', /column content/i)
- .should('be.visible')
-
- // for more information about asserting element's text
- // see https://on.cypress.io/using-cypress-faq#How-do-I-get-an-elementโs-text-contents
- })
-
- it('.and() - chain multiple assertions together', () => {
- // https://on.cypress.io/and
- cy.get('.assertions-link')
- .should('have.class', 'active')
- .and('have.attr', 'href')
- .and('include', 'cypress.io')
- })
- })
-
- describe('Explicit Assertions', () => {
- // https://on.cypress.io/assertions
- it('expect - make an assertion about a specified subject', () => {
- // We can use Chai's BDD style assertions
- expect(true).to.be.true
- const o = { foo: 'bar' }
-
- expect(o).to.equal(o)
- expect(o).to.deep.equal({ foo: 'bar' })
- // matching text using regular expression
- expect('FooBar').to.match(/bar$/i)
- })
-
- it('pass your own callback function to should()', () => {
- // Pass a function to should that can have any number
- // of explicit assertions within it.
- // The ".should(cb)" function will be retried
- // automatically until it passes all your explicit assertions or times out.
- cy.get('.assertions-p')
- .find('p')
- .should(($p) => {
- // https://on.cypress.io/$
- // return an array of texts from all of the p's
- // @ts-ignore TS6133 unused variable
- const texts = $p.map((i, el) => Cypress.$(el).text())
-
- // jquery map returns jquery object
- // and .get() convert this to simple array
- const paragraphs = texts.get()
-
- // array should have length of 3
- expect(paragraphs, 'has 3 paragraphs').to.have.length(3)
-
- // use second argument to expect(...) to provide clear
- // message with each assertion
- expect(paragraphs, 'has expected text in each paragraph').to.deep.eq([
- 'Some text from first p',
- 'More text from second p',
- 'And even more text from third p',
- ])
- })
- })
-
- it('finds element by class name regex', () => {
- cy.get('.docs-header')
- .find('div')
- // .should(cb) callback function will be retried
- .should(($div) => {
- expect($div).to.have.length(1)
-
- const className = $div[0].className
-
- expect(className).to.match(/heading-/)
- })
- // .then(cb) callback is not retried,
- // it either passes or fails
- .then(($div) => {
- expect($div, 'text content').to.have.text('Introduction')
- })
- })
-
- it('can throw any error', () => {
- cy.get('.docs-header')
- .find('div')
- .should(($div) => {
- if ($div.length !== 1) {
- // you can throw your own errors
- throw new Error('Did not find 1 element')
- }
-
- const className = $div[0].className
-
- if (!className.match(/heading-/)) {
- throw new Error(`Could not find class "heading-" in ${className}`)
- }
- })
- })
-
- it('matches unknown text between two elements', () => {
- /**
- * Text from the first element.
- * @type {string}
- */
- let text
-
- /**
- * Normalizes passed text,
- * useful before comparing text with spaces and different capitalization.
- * @param {string} s Text to normalize
- */
- const normalizeText = (s) => s.replace(/\s/g, '').toLowerCase()
-
- cy.get('.two-elements')
- .find('.first')
- .then(($first) => {
- // save text from the first element
- text = normalizeText($first.text())
- })
-
- cy.get('.two-elements')
- .find('.second')
- .should(($div) => {
- // we can massage text before comparing
- const secondText = normalizeText($div.text())
-
- expect(secondText, 'second text').to.equal(text)
- })
- })
-
- it('assert - assert shape of an object', () => {
- const person = {
- name: 'Joe',
- age: 20,
- }
-
- assert.isObject(person, 'value is object')
- })
-
- it('retries the should callback until assertions pass', () => {
- cy.get('#random-number')
- .should(($div) => {
- const n = parseFloat($div.text())
-
- expect(n).to.be.gte(1).and.be.lte(10)
- })
- })
- })
-})
diff --git a/cypress/integration/2-advanced-examples/connectors.spec.js b/cypress/integration/2-advanced-examples/connectors.spec.js
deleted file mode 100644
index ae8799181d1..00000000000
--- a/cypress/integration/2-advanced-examples/connectors.spec.js
+++ /dev/null
@@ -1,97 +0,0 @@
-///
- */
- function waitOneSecond () {
- // return a promise that resolves after 1 second
- // @ts-ignore TS2351 (new Cypress.Promise)
- return new Cypress.Promise((resolve, reject) => {
- setTimeout(() => {
- // set waited to true
- waited = true
-
- // resolve with 'foo' string
- resolve('foo')
- }, 1000)
- })
- }
-
- cy.then(() => {
- // return a promise to cy.then() that
- // is awaited until it resolves
- // @ts-ignore TS7006
- return waitOneSecond().then((str) => {
- expect(str).to.eq('foo')
- expect(waited).to.be.true
- })
- })
- })
-})
diff --git a/cypress/integration/2-advanced-examples/viewport.spec.js b/cypress/integration/2-advanced-examples/viewport.spec.js
deleted file mode 100644
index dbcd7eeddd0..00000000000
--- a/cypress/integration/2-advanced-examples/viewport.spec.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/// = [
// { id: 1600, text: "District War Room" },
];
-export const SHIFTING_CHOICES: Array = [
- { id: 10, text: "PENDING" },
+export const SHIFTING_CHOICES_WARTIME: Array = [
+ { id: 10, text: "PENDING", label: "SHIFTING APPROVAL PENDING" },
{ id: 15, text: "ON HOLD" },
{ id: 20, text: "APPROVED" },
{ id: 30, text: "REJECTED" },
@@ -147,6 +148,18 @@ export const SHIFTING_CHOICES: Array = [
{ id: 70, text: "TRANSFER IN PROGRESS" },
{ id: 80, text: "COMPLETED" },
{ id: 90, text: "PATIENT EXPIRED" },
+ { id: 100, text: "CANCELLED" },
+];
+
+export const SHIFTING_CHOICES_PEACETIME: Array = [
+ { id: 20, text: "APPROVED", label: "PATIENTS TO BE SHIFTED" },
+ { id: 40, text: "DESTINATION APPROVED" },
+ // { id: 50, text: "DESTINATION REJECTED" },
+ { id: 60, text: "PATIENT TO BE PICKED UP", label: "TRANSPORTATION ARRANGED" },
+ { id: 70, text: "TRANSFER IN PROGRESS" },
+ { id: 80, text: "COMPLETED" },
+ { id: 90, text: "PATIENT EXPIRED" },
+ { id: 100, text: "CANCELLED" },
];
export const SHIFTING_VEHICLE_CHOICES: Array = [
@@ -475,7 +488,8 @@ export const ICMR_CATEGORY = [
];
export const TELEMEDICINE_ACTIONS = [
- { id: 10, text: "PENDING", desc: "Pending" },
+ { id: 10, text: "NO_ACTION", desc: "No Action" },
+ { id: 20, text: "PENDING", desc: "Pending" },
{ id: 30, text: "SPECIALIST_REQUIRED", desc: "Specialist Required" },
{ id: 40, text: "PLAN_FOR_HOME_CARE", desc: "Plan for Home Care" },
{ id: 50, text: "FOLLOW_UP_NOT_REQUIRED", desc: "Follow Up Not Required" },
diff --git a/src/Components/Assets/AssetFilter.tsx b/src/Components/Assets/AssetFilter.tsx
index c7a891d4794..b6102bfae82 100644
--- a/src/Components/Assets/AssetFilter.tsx
+++ b/src/Components/Assets/AssetFilter.tsx
@@ -169,7 +169,7 @@ function AssetFilter(props: any) {
label="Asset Status"
errorClassName="hidden"
options={["ACTIVE", "TRANSFER_IN_PROGRESS"]}
- optionLabel={(o) => o}
+ optionLabel={(o) => o.replace(/_/g, " ")}
optionValue={(o) => o}
value={asset_status}
onChange={({ value }) => setAssetStatus(value)}
diff --git a/src/Components/Assets/AssetManage.tsx b/src/Components/Assets/AssetManage.tsx
index 5a48526c8f8..4d8de391c41 100644
--- a/src/Components/Assets/AssetManage.tsx
+++ b/src/Components/Assets/AssetManage.tsx
@@ -25,6 +25,7 @@ import { useTranslation } from "react-i18next";
const PageTitle = loadable(() => import("../Common/PageTitle"));
const Loading = loadable(() => import("../Common/Loading"));
import * as Notification from "../../Utils/Notifications.js";
+import { NonReadOnlyUsers } from "../../Utils/AuthorizeFor";
interface AssetManageProps {
assetId: string;
@@ -324,9 +325,10 @@ const AssetManage = (props: AssetManageProps) => {
)
}
id="update-asset"
+ authorizeFor={NonReadOnlyUsers}
>
{
)
}
id="configure-asset"
+ authorizeFor={NonReadOnlyUsers}
>
)}
{checkAuthority(user_type, "DistrictAdmin") && (
setShowDeleteDialog(true)}
- variant={"danger"}
+ variant="danger"
className="inline-flex"
>
Delete
+ {t("delete")}
)}
diff --git a/src/Components/Assets/AssetsList.tsx b/src/Components/Assets/AssetsList.tsx
index 89d4ae5afc3..a9755ff79d5 100644
--- a/src/Components/Assets/AssetsList.tsx
+++ b/src/Components/Assets/AssetsList.tsx
@@ -10,7 +10,7 @@ import {
import { assetClassProps, AssetData } from "./AssetTypes";
import { getAsset } from "../../Redux/actions";
import { useState, useCallback, useEffect } from "react";
-import { navigate } from "raviger";
+import { Link, navigate } from "raviger";
import loadable from "@loadable/component";
import AssetFilter from "./AssetFilter";
import { parseQueryParams } from "../../Utils/primitives";
@@ -20,7 +20,7 @@ import useFilters from "../../Common/hooks/useFilters";
import { FacilityModel } from "../Facility/models";
import CareIcon from "../../CAREUI/icons/CareIcon";
import { useIsAuthorized } from "../../Common/hooks/useIsAuthorized";
-import AuthorizeFor from "../../Utils/AuthorizeFor";
+import AuthorizeFor, { NonReadOnlyUsers } from "../../Utils/AuthorizeFor";
import ButtonV2 from "../Common/components/ButtonV2";
import FacilitiesSelectDialogue from "../ExternalResult/FacilitiesSelectDialogue";
import ExportMenu from "../Common/Export";
@@ -28,10 +28,12 @@ import CountBlock from "../../CAREUI/display/Count";
import AssetImportModal from "./AssetImportModal";
import Page from "../Common/components/Page";
import { AdvancedFilterButton } from "../../CAREUI/interactive/FiltersSlideover";
+import { useTranslation } from "react-i18next";
const Loading = loadable(() => import("../Common/Loading"));
const AssetsList = () => {
+ const { t } = useTranslation();
const {
qParams,
updateQuery,
@@ -48,6 +50,7 @@ const AssetsList = () => {
const [totalCount, setTotalCount] = useState(0);
const [facility, setFacility] = useState();
const [asset_type, setAssetType] = useState();
+ const [status, setStatus] = useState();
const [facilityName, setFacilityName] = useState();
const [asset_class, setAssetClass] = useState();
const [locationName, setLocationName] = useState();
@@ -109,6 +112,10 @@ const AssetsList = () => {
setAssetType(qParams.asset_type);
}, [qParams.asset_type]);
+ useEffect(() => {
+ setStatus(qParams.status);
+ }, [qParams.status]);
+
useEffect(() => {
setAssetClass(qParams.asset_class);
}, [qParams.asset_class]);
@@ -233,50 +240,50 @@ const AssetsList = () => {
manageAssets = (
{assets.map((asset: AssetData) => (
-
- navigate(
- `facility/${asset?.location_object.facility.id}/assets/${asset.id}`
- )
- }
+
-
-
-
-
+
+
+
+
+
{asset.name}
+
+
+
+
+
+
+
-
{asset.name}
-
-
-
-
-
-
-
- {asset.is_working ? (
-
- ) : (
-
- )}
+
+ {asset.is_working ? (
+
+
))}
);
@@ -361,6 +368,7 @@ const AssetsList = () => {
{
if (qParams.facility) {
@@ -371,7 +379,7 @@ const AssetsList = () => {
}}
>
Create Asset
+ {t("create_asset")}
@@ -387,7 +395,7 @@ const AssetsList = () => {
badge("Name/Serial No./QR ID", "search"),
value("Asset Type", "asset_type", asset_type || ""),
value("Asset Class", "asset_class", asset_class || ""),
- badge("Status", "status"),
+ value("Status", "status", status?.replace(/_/g, " ") || ""),
value("Location", "location", locationName || ""),
]}
/>
diff --git a/src/Components/Common/ConfirmDialogV2.tsx b/src/Components/Common/ConfirmDialogV2.tsx
index ba99423be21..47633201458 100644
--- a/src/Components/Common/ConfirmDialogV2.tsx
+++ b/src/Components/Common/ConfirmDialogV2.tsx
@@ -1,12 +1,13 @@
import DialogModal from "./Dialog";
-import ButtonV2, { ButtonVariant, Cancel } from "./components/ButtonV2";
+import { ButtonVariant, Cancel, Submit } from "./components/ButtonV2";
type ConfirmDialogV2Props = {
+ className?: string;
title: React.ReactNode;
description?: React.ReactNode;
disabled?: boolean;
show: boolean;
- action: string;
+ action: React.ReactNode;
variant?: ButtonVariant;
onClose: () => void;
onConfirm: () => void;
@@ -15,34 +16,22 @@ type ConfirmDialogV2Props = {
};
const ConfirmDialogV2 = ({
- title,
- description,
- show,
disabled,
variant,
action,
- onClose,
onConfirm,
cancelLabel,
children,
+ ...props
}: ConfirmDialogV2Props) => {
return (
-
- {description}
-
- }
- show={show}
- >
+
{children}
-
+
{action}
-
+
);
diff --git a/src/Components/Common/HelperInputFields.tsx b/src/Components/Common/HelperInputFields.tsx
index aaeff97fb41..b5cc2376df9 100644
--- a/src/Components/Common/HelperInputFields.tsx
+++ b/src/Components/Common/HelperInputFields.tsx
@@ -26,7 +26,6 @@ import {
MuiPickersUtilsProvider,
} from "@material-ui/pickers";
import { MaterialUiPickersDate } from "@material-ui/pickers/typings/date";
-import { debounce } from "lodash";
import React, { ChangeEvent, useEffect, useState } from "react";
import PhoneInput, { ICountryData } from "react-phone-input-2";
import "react-phone-input-2/lib/high-res.css";
@@ -577,19 +576,53 @@ export const LegacyPhoneNumberField = (props: any) => {
value,
turnOffAutoFormat,
disabled,
- enableTollFree,
countryCodeEditable = false,
className,
name,
requiredError = false,
} = props;
const [maxLength, setMaxLength] = useState(15);
-
+ const [enableTollFree, setEnableTollFree] = useState(
+ value.startsWith("1800")
+ );
const countryRestriction = onlyIndia ? { onlyCountries: ["in"] } : {};
- const onChangeHandler = debounce(onChange, 500);
+ const [randId, setRandId] = useState("");
useEffect(() => {
- setMaxLength(() => (value?.slice(4, 8) === "1800" ? 16 : 15));
+ if (value.startsWith("1800")) {
+ setEnableTollFree(true);
+ } else {
+ setEnableTollFree(false);
+ }
+ }, [value]);
+
+ useEffect(() => {
+ setRandId(
+ Math.random()
+ .toString(36)
+ .replace(/[^a-z]+/g, "a")
+ );
+ }, []);
+
+ const setFocus = () => {
+ setTimeout(() => {
+ const input = document.querySelector(`div#${randId} > div.visible input`);
+ if (input instanceof HTMLElement) {
+ input.focus();
+ }
+ }, 10);
+ };
+
+ useEffect(() => {
+ if (enableTollFree) {
+ if (value.startsWith("1800")) {
+ setMaxLength(11);
+ } else {
+ setMaxLength(15);
+ }
+ } else {
+ setMaxLength(15);
+ }
}, [value]);
const handleChange = (
@@ -598,44 +631,114 @@ export const LegacyPhoneNumberField = (props: any) => {
event: ChangeEvent,
formattedValue: string
) => {
- onChangeHandler(formattedValue);
+ let phone = value;
+ if (phone.startsWith("91")) {
+ phone = phone.replace("91", "");
+ }
+ if (phone.startsWith("1800")) {
+ setEnableTollFree(true);
+ setFocus();
+ onChange(phone);
+ } else {
+ if (!value.startsWith("91") && !value.startsWith("1800")) {
+ onChange(`91${formattedValue}`);
+ } else {
+ onChange(formattedValue);
+ }
+ if (!value.startsWith("1800")) {
+ setEnableTollFree(false);
+ setFocus();
+ }
+ }
+ setFocus();
};
return (
<>
{label && {label} }
-
-
onChange("+91")}
+
+
+
+
+
{
+ onChange("+91");
+ setEnableTollFree(false);
+ setFocus();
+ }}
+ >
+ {" "}
+
+
-
-
+
+
{
+ onChange("+91");
+ setEnableTollFree(false);
+ setFocus();
+ }}
+ >
+
+
- {({ isAuthorized }) => (
-
- {children}
-
- )}
- ;
+ if (tooltip) {
+ children = (
+ <>
+ {tooltip && (
+
+ {tooltip}
+
+ )}
+ {children}
+
+ );
}
if (href && !(disabled || loading)) {
return (
-
+ {children}
+
);
}
+ if (authorizeFor) {
+ return (
+
+ {({ isAuthorized }) => (
+
+ {children}
+
+ )}
+
+ );
+ }
+
return (
{children}
diff --git a/src/Components/Common/components/ResponsiveMedicineTables.tsx b/src/Components/Common/components/ResponsiveMedicineTables.tsx
index a589f0ae426..f3dc2599ec9 100644
--- a/src/Components/Common/components/ResponsiveMedicineTables.tsx
+++ b/src/Components/Common/components/ResponsiveMedicineTables.tsx
@@ -1,5 +1,6 @@
import { useEffect, useState } from "react";
import AccordionV2 from "./AccordionV2";
+import { classNames } from "../../../Utils/utils";
function getWindowSize() {
const { innerWidth, innerHeight } = window;
@@ -11,6 +12,10 @@ export default function ResponsiveMedicineTable(props: {
list: Array;
objectKeys: Array;
fieldsToDisplay: Array;
+ actions?: (item: any) => JSX.Element;
+ actionLabel?: string;
+ maxWidthColumn?: number;
+ onClick?: (item: any) => void;
}) {
const [windowSize, setWindowSize] = useState(getWindowSize());
useEffect(() => {
@@ -32,30 +37,49 @@ export default function ResponsiveMedicineTable(props: {
{props.theads.map((item) => {
return (
-
+
{item}
);
})}
+ {props.actions && (
+
+ {props.actionLabel || ""}
+
+ )}
{props.list?.map?.((med: any, index: number) => (
-
+ props.onClick && props.onClick(med)}
+ >
{props.objectKeys.map((key, idx) => {
- if (idx === 0)
+ if (
+ props.maxWidthColumn !== undefined &&
+ idx === props.maxWidthColumn
+ ) {
return (
-
- {med[key]}
-
- );
- else
- return (
-
+
{med[key]}
);
+ }
+
+ return (
+
+ {med[key]}
+
+ );
})}
+ {props.actions && (
+ {props.actions(med)}
+ )}
))}
diff --git a/src/Components/Common/prescription-builder/PRNPrescriptionBuilder.tsx b/src/Components/Common/prescription-builder/PRNPrescriptionBuilder.tsx
deleted file mode 100644
index 57a14fef792..00000000000
--- a/src/Components/Common/prescription-builder/PRNPrescriptionBuilder.tsx
+++ /dev/null
@@ -1,322 +0,0 @@
-import { useState } from "react";
-import AutoCompleteAsync from "../../Form/AutoCompleteAsync";
-import SelectMenuV2 from "../../Form/SelectMenuV2";
-import { medicines, routes, units } from "./PrescriptionBuilder";
-import CareIcon from "../../../CAREUI/icons/CareIcon";
-
-export type PRNPrescriptionType = {
- medicine?: string;
- route?: string;
- dosage?: string;
- indicator?: string;
- max_dosage?: string;
- min_time?: number;
-};
-
-export const PRNEmptyValues = {
- medicine: "",
- route: "",
- dosage: "0 mg",
- max_dosage: "0 mg",
- indicator: "",
- min_time: 0,
-};
-
-const DOSAGE_HRS = [1, 2, 3, 6, 12, 24];
-
-export interface PrescriptionBuilderProps {
- prescriptions: T[];
- setPrescriptions: React.Dispatch>;
-}
-
-export default function PRNPrescriptionBuilder(
- props: PrescriptionBuilderProps
-) {
- const { prescriptions, setPrescriptions } = props;
-
- const setItem = (object: PRNPrescriptionType, i: number) => {
- setPrescriptions(
- prescriptions.map((prescription, index) =>
- index === i ? object : prescription
- )
- );
- };
-
- const [activeIdx, setActiveIdx] = useState(null);
-
- return (
-
- {prescriptions.map((prescription, i) => {
- const setMedicine = (medicine: string) => {
- setItem(
- {
- ...prescription,
- medicine,
- },
- i
- );
- };
-
- const setRoute = (route: string) => {
- setItem(
- {
- ...prescription,
- route,
- },
- i
- );
- };
-
- const setDosageUnit = (unit: string) => {
- setItem(
- {
- ...prescription,
- dosage: prescription.dosage
- ? prescription.dosage.split(" ")[0] + " " + unit
- : "0 mg",
- },
- i
- );
- };
-
- const setMaxDosageUnit = (unit: string) => {
- setItem(
- {
- ...prescription,
- max_dosage: prescription.max_dosage
- ? prescription.max_dosage.split(" ")[0] + " " + unit
- : "0 mg",
- },
- i
- );
- };
-
- const setMinTime = (min_time: number) => {
- setItem(
- {
- ...prescription,
- min_time,
- },
- i
- );
- };
-
- return (
-
-
-
- Prescription No. {i + 1}
-
- {
- setPrescriptions(
- prescriptions.filter((prescription, index) => i != index)
- );
- }}
- >
- Delete Prescription
-
-
-
-
-
- Medicine
- {" *"}
-
-
{
- return Promise.resolve(
- medicines.filter((medicine: string) =>
- medicine.toLowerCase().includes(search.toLowerCase())
- )
- );
- }}
- optionLabel={(option) => option}
- onChange={setMedicine}
- showNOptions={medicines.length}
- className="-mt-1"
- onFocus={() => setActiveIdx(i)}
- onBlur={() => setActiveIdx(null)}
- />
-
-
-
-
Route
-
setRoute(route || "")}
- optionLabel={(option) => option}
- required={false}
- showChevronIcon={false}
- className="mt-[2px]"
- onFocus={() => setActiveIdx(i)}
- onBlur={() => setActiveIdx(null)}
- />
-
-
-
-
-
Dosage
-
-
{
- let value = parseFloat(e.target.value);
- if (value < 0) {
- value = 0;
- }
- setItem(
- {
- ...prescription,
- dosage:
- value +
- " " +
- (prescription.dosage?.split(" ")[1] || "mg"),
- },
- i
- );
- }}
- required
- onFocus={() => setActiveIdx(i)}
- onBlur={() => setActiveIdx(null)}
- />
-
- setDosageUnit(dosage || "")}
- optionLabel={(option) => option}
- required={false}
- showChevronIcon={false}
- onFocus={() => setActiveIdx(i)}
- onBlur={() => setActiveIdx(null)}
- />
-
-
-
-
-
-
-
-
-
-
- Indicator
- {" *"}
-
-
{
- setItem(
- {
- ...prescription,
- indicator: e.target.value,
- },
- i
- );
- }}
- onFocus={() => setActiveIdx(i)}
- onBlur={() => setActiveIdx(null)}
- />
-
-
-
-
Max Dosage in 24 hrs.
-
-
-
{
- let value = parseFloat(e.target.value);
- if (value < 0) {
- value = 0;
- }
- setItem(
- {
- ...prescription,
- max_dosage:
- value +
- " " +
- (prescription.max_dosage?.split(" ")[1] || "mg"),
- },
- i
- );
- }}
- required
- onFocus={() => setActiveIdx(i)}
- onBlur={() => setActiveIdx(null)}
- />
-
- setMaxDosageUnit(dosage || "")}
- optionLabel={(option) => option}
- required={false}
- showChevronIcon={false}
- onFocus={() => setActiveIdx(i)}
- onBlur={() => setActiveIdx(null)}
- />
-
-
-
-
-
-
Min. time btwn. 2 doses
-
-
- min_time && (min_time > 0 ? setMinTime(min_time) : 0)
- }
- optionLabel={(option) => option}
- required={false}
- onFocus={() => setActiveIdx(i)}
- onBlur={() => setActiveIdx(null)}
- />
- Hrs.
-
-
-
-
- );
- })}
-
{
- setPrescriptions([...prescriptions, PRNEmptyValues]);
- }}
- className="shadow-sm mt-4 bg-gray-200 w-full font-bold block px-4 py-2 text-sm leading-5 text-left text-gray-700 hover:bg-gray-300 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
- >
- + Add Prescription
-
-
-) {
- const { prescriptions, setPrescriptions } = props;
-
- const setItem = (object: PrescriptionType, i: number) => {
- setPrescriptions(
- prescriptions.map((prescription, index) =>
- index === i ? object : prescription
- )
- );
- };
-
- const [activeIdx, setActiveIdx] = useState(null);
-
- return (
-
- {prescriptions.map((prescription, i) => {
- const setMedicine = (medicine: string) => {
- setItem(
- {
- ...prescription,
- medicine,
- },
- i
- );
- };
-
- const setRoute = (route: string) => {
- setItem(
- {
- ...prescription,
- route,
- },
- i
- );
- };
-
- const setFrequency = (frequency: string) => {
- setItem(
- {
- ...prescription,
- dosage: frequency,
- },
- i
- );
- };
-
- const setDosageUnit = (unit: string) => {
- setItem(
- {
- ...prescription,
- dosage_new: prescription.dosage_new
- ? prescription.dosage_new.split(" ")[0] + " " + unit
- : "0 mg",
- },
- i
- );
- };
-
- return (
-
-
-
- Prescription No. {i + 1}
-
- {
- setPrescriptions(
- prescriptions.filter((prescription, index) => i != index)
- );
- }}
- >
- Delete Prescription
-
-
-
-
-
- Medicine *
-
-
setActiveIdx(i)}
- onBlur={() => setActiveIdx(null)}
- placeholder="Medicine"
- selected={prescription.medicine}
- fetchData={(search) => {
- return Promise.resolve(
- medicines.filter((medicine: string) =>
- medicine.toLowerCase().includes(search.toLowerCase())
- )
- );
- }}
- optionLabel={(option) => option}
- onChange={setMedicine}
- showNOptions={medicines.length}
- />
-
-
-
-
Route
-
setRoute(route || "")}
- optionLabel={(option) => option}
- required={false}
- className="mt-[6px]"
- onFocus={() => setActiveIdx(i)}
- onBlur={() => setActiveIdx(null)}
- />
-
-
-
- Frequency *
-
-
setFrequency(freq || "")}
- optionLabel={(option) => option}
- optionIcon={(option) => (
-
- {
- frequencyTips[
- option as keyof typeof frequencyTips
- ]
- }
-
- }
- >
-
- )}
- showIconWhenSelected={false}
- required={false}
- className="mt-[6px] w-[150px]"
- onFocus={() => setActiveIdx(i)}
- onBlur={() => setActiveIdx(null)}
- />
-
-
-
-
-
-
-
Dosage
-
-
{
- let value = parseFloat(e.target.value);
- if (value < 0) {
- value = 0;
- }
- setItem(
- {
- ...prescription,
- dosage_new:
- value +
- " " +
- (prescription.dosage_new?.split(" ")[1] || "mg"),
- },
- i
- );
- }}
- required
- onFocus={() => setActiveIdx(i)}
- onBlur={() => setActiveIdx(null)}
- />
-
-
setActiveIdx(i)}
- onBlur={() => setActiveIdx(null)}
- />
-
-
-
-
-
-
Days
-
{
- let value = parseInt(e.target.value);
- if (value < 0) {
- value = 0;
- }
- setItem(
- {
- ...prescription,
- days: value,
- },
- i
- );
- }}
- required
- onFocus={() => setActiveIdx(i)}
- onBlur={() => setActiveIdx(null)}
- />
-
-
-
-
-
Notes
-
{
- setItem(
- {
- ...prescription,
- notes: e.target.value,
- },
- i
- );
- }}
- onFocus={() => setActiveIdx(i)}
- onBlur={() => setActiveIdx(null)}
- />
-
-
-
- );
- })}
-
{
- setPrescriptions([...prescriptions, emptyValues]);
- }}
- className="shadow-sm mt-4 bg-gray-200 w-full font-bold block px-4 py-2 text-sm leading-5 text-left text-gray-700 hover:bg-gray-300 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900"
- >
- + Add Medicine
-
-
,
- ~setPrescriptions: array => unit,
- ) => React.element = "default"
-}
-
-@react.component
-let make = (~prescriptions, ~setPrescriptions) =>
- ,
- saving: bool,
- dirty: bool,
-}
-
-type action =
- | SetMedicines(array)
- | SetSaving
- | ClearSaving
-
-let reducer = (state, action) => {
- switch action {
- | SetMedicines(medicines) => {
- ...state,
- medicines: medicines,
- dirty: true,
- }
- | SetSaving => {
- ...state,
- saving: true,
- }
- | ClearSaving => {
- ...state,
- saving: false,
- }
- }
-}
-
-let makeField = p => {
- let payload = Js.Dict.empty()
- Js.Dict.set(payload, "medicine", Js.Json.string(Prescription__Prescription.medicine(p)))
- Js.Dict.set(payload, "dosage", Js.Json.string(Prescription__Prescription.dosage(p)))
- Js.Dict.set(payload, "days", Js.Json.number(float_of_int(Prescription__Prescription.days(p))))
- Js.Dict.set(payload, "route", Js.Json.string(Prescription__Prescription.route(p)))
- Js.Dict.set(payload, "notes", Js.Json.string(Prescription__Prescription.notes(p)))
- Js.Dict.set(payload, "dosage_new", Js.Json.string(Prescription__Prescription.dosage_new(p)))
- payload
-}
-
-let makePayload = state => {
- Js.Dict.fromArray([
- ("medication_given", Js.Json.objectArray(Js.Array.map(makeField, state.medicines))),
- ])
-}
-
-let successCB = (send, updateCB, data) => {
- send(ClearSaving)
- updateCB(CriticalCare__DailyRound.makeFromJs(data))
-}
-
-let errorCB = (send, _error) => {
- send(ClearSaving)
-}
-
-let validateMedicines = (prescriptions: array) => {
- let error = prescriptions |> Js.Array.find(prescription => {
- let medicine = prescription |> Prescription__Prescription.medicine
- let dosage = prescription |> Prescription__Prescription.dosage
- let dosage_new = prescription |> Prescription__Prescription.dosage_new |> Js.String.split(" ")
- let dosage_invalid = switch dosage_new |> Js.Array.length == 2 {
- | true => {
- let dosage_value =
- dosage_new->Js.Array.unsafe_get(0) |> Js.String.replaceByRe(%re("/\D/g"), "")
- let dosage_unit = dosage_new->Js.Array.unsafe_get(1)
- dosage_value == "" || dosage_unit == ""
- }
- | false => true
- }
- let invalid =
- medicine == "" || medicine == " " || dosage == "" || dosage == " " || dosage_invalid
- switch invalid {
- | true => {
- Notifications.error({
- msg: "Medicine, Dosage and Frequency are mandatory for Prescriptions.",
- })
- true
- }
- | false => false
- }
- })
- switch error {
- | None => true
- | Some(_) => false
- }
-}
-
-let saveData = (id, consultationId, state, send, updateCB) => {
- switch state.medicines |> validateMedicines {
- | true => {
- send(SetSaving)
- updateDailyRound(
- consultationId,
- id,
- Js.Json.object_(makePayload(state)),
- successCB(send, updateCB),
- errorCB(send),
- )
- }
- | false => Js_console.log("Validation failed")
- }
-}
-let initialState = medicines => {
- {
- medicines: medicines,
- saving: false,
- dirty: false,
- }
-}
-
-let getFieldValue = event => {
- ReactEvent.Form.target(event)["value"]
-}
-
-@react.component
-let make = (~medicines, ~updateCB, ~id, ~consultationId) => {
- let (state, send) = React.useReducer(reducer, initialState(medicines))
-
-
-
-
-
send(SetMedicines(medicines))}
- />
-
-
saveData(id, consultationId, state, send, updateCB)}>
- {str("Done")}
-
-
{
hasError={ValidationUtils.isInputInRangeInt(0, 5, Belt.Float.toString(painScale)->Belt.Int.fromString)}
/>
-
+
{str("Description")}