Draft Add Notifcation Table

frontend/src/App.js

@@ -40,6 +40,7 @@ import PrintBarcode from "./components/printBarcode/Index";
 import NonConformIndex from "./components/nonconform/index";
 import SampleBatchEntrySetup from "./components/batchOrderEntry/SampleBatchEntrySetup.js";
 import AuditTrailReportIndex from "./components/reports/auditTrailReport/Index.js";
+import NotificationTestPage from "./NotificationTestPage.jsx";
 
 export default function App() {
   let i18nConfig = {
@@ -385,6 +386,13 @@ export default function App() {
                   component={() => <ResultSearch />}
                   role="Results"
                 />
+
+                <SecureRoute
+                  path="/NotificationTestPage"
+                  exact
+                  component={() => <NotificationTestPage />}
+                  role="Results"
+                />
                 <SecureRoute
                   path="/PatientResults"
                   exact

frontend/src/NotificationTestPage.jsx

@@ -0,0 +1,29 @@
+import { useState } from "react";
+import { postToOpenElisServer } from "./components/utils/Utils";
+
+export default function NotificationTestPage() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const [data, setData] = useState({
+    message: undefined,
+  });
+
+  const submit = () => {
+
+    postToOpenElisServer("/rest/notification",JSON.stringify(data),()=>{
+      console.log("success")
+    });
+  }
+
+
+
+  return (
+    <div>
+
+      <input type="text" name="message" id="message"  value={data.message??""} onChange={(e)=>setData({...data,message:e.target.value})} />
+      <button 
+      onClick={()=>submit()}
+      >submit</button>
+    </div>
+  );
+}

frontend/src/SlideOver.jsx

@@ -0,0 +1,116 @@
+import React, { useEffect } from "react";
+import ReactDOM from "react-dom";
+import PropTypes from "prop-types";
+import classNames from "classnames";
+
+const SlideOver = ({
+  open,
+  setOpen,
+  children,
+  slideFrom = "right",
+  dialogClass = "",
+  title,
+  onlyChild = false,
+  backdropBlur = true,
+  closeOnBackdropClick = true,
+  onCloseClick,
+}) => {
+  const directionClasses = {
+    left: {
+      stick: "left-0 top-0 h-full",
+      animateStart: "-translate-x-full",
+      animateEnd: "translate-x-0",
+      proportions: "cui-slideover-x",
+    },
+    right: {
+      stick: "right-0 top-0 h-full",
+      animateStart: "translate-x-full",
+      animateEnd: "translate-x-0",
+      proportions: "cui-slideover-x",
+    },
+    top: {
+      stick: "top-0 left-0 w-full",
+      animateStart: "-translate-y-full",
+      animateEnd: "translate-y-0",
+      proportions: "cui-slideover-y",
+    },
+    bottom: {
+      stick: "bottom-0 left-0 w-full",
+      animateStart: "translate-y-full",
+      animateEnd: "translate-y-0",
+      proportions: "cui-slideover-y",
+    },
+  };
+
+  useEffect(() => {
+    document.body.style.overflow = open ? "hidden" : "auto";
+  }, [open]);
+
+  return ReactDOM.createPortal(
+    <div className={classNames("slide-over-root", { show: open })}>
+      <div
+        className={classNames("slide-over-backdrop", {
+          "backdrop-blur": backdropBlur,
+        })}
+        onClick={closeOnBackdropClick ? () => setOpen(false) : null}
+      ></div>
+      <div
+        className={classNames(
+          "slide-over-panel",
+          {
+            [directionClasses[slideFrom].stick]: true,
+            [directionClasses[slideFrom].animateEnd]: open,
+            [directionClasses[slideFrom].animateStart]: !open,
+          },
+          slideFrom === "left" ? "slide-over-left" : "slide-over-right",
+        )}
+      >
+        {onlyChild ? (
+          children
+        ) : (
+          <div
+            className={classNames(
+              "slide-over-content",
+              directionClasses[slideFrom].proportions,
+              dialogClass,
+            )}
+          >
+            <div
+              className="slide-over-header"
+              style={{ marginTop: "6%", padding: "2%" }}
+            >
+              <button
+                id="close-slide-over"
+                className="close-button"
+                onClick={() => {
+                  setOpen(false);
+                  onCloseClick && onCloseClick();
+                }}
+              >
+                &larr;
+              </button>
+              <div className="slide-over-title">{title}</div>
+            </div>
+            <div className="slide-over-body">{children}</div>
+          </div>
+        )}
+      </div>
+    </div>,
+    document.body,
+  );
+};
+
+SlideOver.propTypes = {
+  open: PropTypes.bool.isRequired,
+  setOpen: PropTypes.func.isRequired,
+  children: PropTypes.node.isRequired,
+  slideFrom: PropTypes.oneOf(["left", "right", "top", "bottom"]),
+  dialogClass: PropTypes.string,
+  title: PropTypes.node,
+  onlyChild: PropTypes.bool,
+  backdropBlur: PropTypes.bool,
+  closeOnBackdropClick: PropTypes.bool,
+  onCloseClick: PropTypes.func,
+};
+
+export default SlideOver;