Add keyboard shortcut for adding notes

ohcnetwork · Dec 26, 2023 · eafc31a · eafc31a
1 parent d906c6a
commit eafc31a
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 1 deletion.
diff --git a/src/Components/Facility/ConsultationDoctorNotes/index.tsx b/src/Components/Facility/ConsultationDoctorNotes/index.tsx
@@ -11,6 +11,8 @@ import { PatientNoteStateType } from "../models.js";
 import routes from "../../../Redux/api.js";
 import request from "../../../Utils/request/request.js";
 import useQuery from "../../../Utils/request/useQuery.js";
+import useKeyboardShortcut from "use-keyboard-shortcut";
+import { isAppleDevice } from "../../../Utils/utils.js";
 
 interface ConsultationDoctorNotesProps {
   patientId: string;
@@ -26,6 +28,7 @@ const ConsultationDoctorNotes = (props: ConsultationDoctorNotesProps) => {
   const [reload, setReload] = useState(false);
   const [facilityName, setFacilityName] = useState("");
   const [patientName, setPatientName] = useState("");
+  const [focused, setFocused] = useState(false);
 
   const initialData: PatientNoteStateType = {
     notes: [],
@@ -84,6 +87,18 @@ const ConsultationDoctorNotes = (props: ConsultationDoctorNotesProps) => {
     }
   });
 
+  useKeyboardShortcut(
+    [isAppleDevice ? "Meta" : "Shift", "Enter"],
+    () => {
+      if (focused) {
+        onAddNote();
+      }
+    },
+    {
+      ignoreInputFields: false,
+    }
+  );
+
   return (
     <Page
       title="Doctor Notes"
@@ -114,6 +129,8 @@ const ConsultationDoctorNotes = (props: ConsultationDoctorNotesProps) => {
             errorClassName="hidden"
             placeholder="Type your Note"
             disabled={!patientActive}
+            onFocus={() => setFocused(true)}
+            onBlur={() => setFocused(false)}
           />
           <ButtonV2
             onClick={onAddNote}

diff --git a/src/Components/Facility/PatientNotesSlideover.tsx b/src/Components/Facility/PatientNotesSlideover.tsx
@@ -2,7 +2,7 @@ import { useState, useEffect, Dispatch, SetStateAction } from "react";
 import * as Notification from "../../Utils/Notifications.js";
 import { NonReadOnlyUsers } from "../../Utils/AuthorizeFor";
 import CareIcon from "../../CAREUI/icons/CareIcon";
-import { classNames } from "../../Utils/utils";
+import { classNames, isAppleDevice } from "../../Utils/utils";
 import TextFormField from "../Form/FormFields/TextFormField";
 import ButtonV2 from "../Common/components/ButtonV2";
 import { make as Link } from "../Common/components/Link.bs";
@@ -11,6 +11,7 @@ import PatientConsultationNotesList from "./PatientConsultationNotesList";
 import request from "../../Utils/request/request";
 import routes from "../../Redux/api";
 import { PatientNoteStateType } from "./models";
+import useKeyboardShortcut from "use-keyboard-shortcut";
 
 interface PatientNotesProps {
   patientId: string;
@@ -24,6 +25,7 @@ export default function PatientNotesSlideover(props: PatientNotesProps) {
   const [patientActive, setPatientActive] = useState(true);
   const [noteField, setNoteField] = useState("");
   const [reload, setReload] = useState(false);
+  const [focused, setFocused] = useState(false);
 
   const initialData: PatientNoteStateType = {
     notes: [],
@@ -84,6 +86,18 @@ export default function PatientNotesSlideover(props: PatientNotesProps) {
     fetchPatientName();
   }, [patientId]);
 
+  useKeyboardShortcut(
+    [isAppleDevice ? "Meta" : "Shift", "Enter"],
+    () => {
+      if (focused) {
+        onAddNote();
+      }
+    },
+    {
+      ignoreInputFields: false,
+    }
+  );
+
   const notesActionIcons = (
     <div className="flex gap-1">
       {show && (
@@ -157,6 +171,8 @@ export default function PatientNotesSlideover(props: PatientNotesProps) {
               errorClassName="hidden"
               placeholder="Type your Note"
               disabled={!patientActive}
+              onFocus={() => setFocused(true)}
+              onBlur={() => setFocused(false)}
             />
             <ButtonV2
               id="add_doctor_note_button"