@medplum/react 2.0.17 → 2.0.18

package/dist/cjs/index.cjs

@@ -680,6 +680,15 @@
       ["path", { d: "M14.5 4l5.5 5.5", key: "svg-3" }]
     ]);
 
+    /**
+     * @tabler/icons-react v2.17.0 - MIT
+     */
+
+    var IconPlus = createReactComponent("plus", "IconPlus", [
+      ["path", { d: "M12 5l0 14", key: "svg-0" }],
+      ["path", { d: "M5 12l14 0", key: "svg-1" }]
+    ]);
+
     /**
      * @tabler/icons-react v2.17.0 - MIT
      */
@@ -1390,6 +1399,102 @@
                         React.createElement(core$1.Text, { size: "xs", color: "dimmed", align: "center" }, props.version))))));
     }
 
+    /**
+     * Parses an HTML form and returns the result as a JavaScript object.
+     * @param form The HTML form element.
+     */
+    function parseForm(form) {
+        const result = {};
+        for (const element of Array.from(form.elements)) {
+            if (element instanceof HTMLInputElement) {
+                parseInputElement(result, element);
+            }
+            else if (element instanceof HTMLTextAreaElement) {
+                result[element.name] = element.value;
+            }
+            else if (element instanceof HTMLSelectElement) {
+                parseSelectElement(result, element);
+            }
+        }
+        return result;
+    }
+    /**
+     * Parses an HTML input element.
+     * Sets the name/value pair in the result,
+     * but only if the element is enabled and checked.
+     * @param el The input element.
+     * @param result The result builder.
+     */
+    function parseInputElement(result, el) {
+        if (el.disabled) {
+            // Ignore disabled elements
+            return;
+        }
+        if ((el.type === 'checkbox' || el.type === 'radio') && !el.checked) {
+            // Ignore unchecked radio or checkbox elements
+            return;
+        }
+        result[el.name] = el.value;
+    }
+    /**
+     * Parses an HTML select element.
+     * Sets the name/value pair if one is selected.
+     * @param result The result builder.
+     * @param el The select element.
+     */
+    function parseSelectElement(result, el) {
+        result[el.name] = el.value;
+    }
+
+    function Form(props) {
+        return (React.createElement("form", { style: props.style, "data-testid": props.testid, onSubmit: (e) => {
+                e.preventDefault();
+                const formData = parseForm(e.target);
+                if (props.onSubmit) {
+                    props.onSubmit(formData);
+                }
+            } }, props.children));
+    }
+
+    function BookmarkDialog(props) {
+        const medplum = useMedplum();
+        const config = medplum.getUserConfiguration();
+        const location = reactRouterDom.useLocation();
+        function submitHandler(formData) {
+            const { menuname, bookmarkname: name } = formData;
+            const target = location.pathname + location.search;
+            const newConfig = core.deepClone(config);
+            const menu = newConfig?.menu?.find(({ title }) => title === menuname);
+            menu?.link?.push({ name, target });
+            medplum
+                .updateResource(newConfig)
+                .then((res) => {
+                // refresh current config menu
+                config.menu = res.menu;
+                medplum.dispatchEvent({ type: 'change' });
+                notifications.showNotification({ color: 'green', message: 'Success' });
+                props.onOk();
+            })
+                .catch((err) => {
+                notifications.showNotification({ color: 'red', message: core.normalizeErrorString(err) });
+            });
+        }
+        return (React.createElement(core$1.Modal, { title: "Add Bookmark", closeButtonProps: { 'aria-label': 'Close' }, opened: props.visible, onClose: props.onCancel },
+            React.createElement(Form, { onSubmit: submitHandler },
+                React.createElement(core$1.Stack, null,
+                    React.createElement(SelectMenu, { config: config }),
+                    React.createElement(core$1.TextInput, { label: "Bookmark Name", type: "text", name: "bookmarkname", placeholder: "bookmark name", withAsterisk: true }),
+                    React.createElement(core$1.Group, { position: "right" },
+                        React.createElement(core$1.Button, { mt: "sm", type: "submit" }, "OK"))))));
+    }
+    function SelectMenu(props) {
+        function userConfigToMenu(config) {
+            return config?.menu?.map((menu) => menu.title);
+        }
+        const menus = userConfigToMenu(props.config);
+        return (React.createElement(core$1.NativeSelect, { name: "menuname", defaultValue: menus?.[0], label: "Select Menu Option", placeholder: "Menu", data: menus, withAsterisk: true }));
+    }
+
     function toKey(element) {
         return element.code;
     }
@@ -1498,6 +1603,7 @@
     function Navbar(props) {
         const { classes } = useStyles$f();
         const navigate = useMedplumNavigate();
+        const [bookmarkDialogVisible, setBookmarkDialogVisible] = React.useState(false);
         function onLinkClick(e, to) {
             e.stopPropagation();
             e.preventDefault();
@@ -1511,18 +1617,22 @@
                 navigate(`/${resourceType}`);
             }
         }
-        return (React.createElement(core$1.Navbar, { width: { sm: 250 }, p: "xs" },
-            React.createElement(core$1.Navbar.Section, null,
-                React.createElement(CodeInput, { key: window.location.pathname, name: "resourceType", placeholder: "Resource Type", property: {
-                        binding: {
-                            valueSet: 'http://hl7.org/fhir/ValueSet/resource-types',
-                        },
-                    }, onChange: (newValue) => navigateResourceType(newValue), creatable: false, maxSelectedValues: 0, clearSearchOnChange: true, clearable: false })),
-            props.menus && (React.createElement(core$1.Navbar.Section, { grow: true }, props.menus.map((menu) => (React.createElement(React.Fragment, { key: `menu-${menu.title}` },
-                React.createElement(core$1.Text, { className: classes.menuTitle }, menu.title),
-                menu.links?.map((link) => (React.createElement(NavbarLink, { key: link.href, to: link.href, onClick: (e) => onLinkClick(e, link.href) },
-                    React.createElement(NavLinkIcon, { to: link.href, icon: link.icon }),
-                    React.createElement("span", null, link.label)))))))))));
+        return (React.createElement(React.Fragment, null,
+            React.createElement(core$1.Navbar, { width: { sm: 250 }, p: "xs" },
+                React.createElement(core$1.Navbar.Section, { mb: "sm" },
+                    React.createElement(CodeInput, { key: window.location.pathname, name: "resourceType", placeholder: "Resource Type", property: {
+                            binding: {
+                                valueSet: 'http://hl7.org/fhir/ValueSet/resource-types',
+                            },
+                        }, onChange: (newValue) => navigateResourceType(newValue), creatable: false, maxSelectedValues: 0, clearSearchOnChange: true, clearable: false })),
+                React.createElement(core$1.Navbar.Section, { grow: true },
+                    props.menus?.map((menu) => (React.createElement(React.Fragment, { key: `menu-${menu.title}` },
+                        React.createElement(core$1.Text, { className: classes.menuTitle }, menu.title),
+                        menu.links?.map((link) => (React.createElement(NavbarLink, { key: link.href, to: link.href, onClick: (e) => onLinkClick(e, link.href) },
+                            React.createElement(NavLinkIcon, { to: link.href, icon: link.icon }),
+                            React.createElement("span", null, link.label))))))),
+                    props.displayAddBookmark && (React.createElement(core$1.Button, { variant: "subtle", size: "xs", mt: "xl", leftIcon: React.createElement(IconPlus, { size: "0.75rem" }), onClick: () => setBookmarkDialogVisible(true) }, "Add Bookmark")))),
+            React.createElement(BookmarkDialog, { visible: bookmarkDialogVisible, onOk: () => setBookmarkDialogVisible(false), onCancel: () => setBookmarkDialogVisible(false) })));
     }
     function NavbarLink(props) {
         const { classes, cx } = useStyles$f();
@@ -1575,7 +1685,7 @@
                 main: {
                     background: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[0],
                 },
-            }, padding: 0, fixed: true, header: profile && React.createElement(Header, { logo: props.logo, version: props.version, navbarToggle: toggleNavbar }), navbar: profile && navbarOpen ? React.createElement(Navbar, { menus: props.menus, closeNavbar: closeNavbar }) : undefined },
+            }, padding: 0, fixed: true, header: profile && React.createElement(Header, { logo: props.logo, version: props.version, navbarToggle: toggleNavbar }), navbar: profile && navbarOpen ? (React.createElement(Navbar, { menus: props.menus, closeNavbar: closeNavbar, displayAddBookmark: props.displayAddBookmark })) : undefined },
             React.createElement(ErrorBoundary, null,
                 React.createElement(React.Suspense, { fallback: React.createElement(Loading, null) }, props.children))));
     }
@@ -3256,63 +3366,6 @@
         return code === 'AA' || code === 'LL' || code === 'HH' || code === 'A';
     }
 
-    /**
-     * Parses an HTML form and returns the result as a JavaScript object.
-     * @param form The HTML form element.
-     */
-    function parseForm(form) {
-        const result = {};
-        for (const element of Array.from(form.elements)) {
-            if (element instanceof HTMLInputElement) {
-                parseInputElement(result, element);
-            }
-            else if (element instanceof HTMLTextAreaElement) {
-                result[element.name] = element.value;
-            }
-            else if (element instanceof HTMLSelectElement) {
-                parseSelectElement(result, element);
-            }
-        }
-        return result;
-    }
-    /**
-     * Parses an HTML input element.
-     * Sets the name/value pair in the result,
-     * but only if the element is enabled and checked.
-     * @param el The input element.
-     * @param result The result builder.
-     */
-    function parseInputElement(result, el) {
-        if (el.disabled) {
-            // Ignore disabled elements
-            return;
-        }
-        if ((el.type === 'checkbox' || el.type === 'radio') && !el.checked) {
-            // Ignore unchecked radio or checkbox elements
-            return;
-        }
-        result[el.name] = el.value;
-    }
-    /**
-     * Parses an HTML select element.
-     * Sets the name/value pair if one is selected.
-     * @param result The result builder.
-     * @param el The select element.
-     */
-    function parseSelectElement(result, el) {
-        result[el.name] = el.value;
-    }
-
-    function Form(props) {
-        return (React.createElement("form", { style: props.style, "data-testid": props.testid, onSubmit: (e) => {
-                e.preventDefault();
-                const formData = parseForm(e.target);
-                if (props.onSubmit) {
-                    props.onSubmit(formData);
-                }
-            } }, props.children));
-    }
-
     const useStyles$9 = core$1.createStyles((theme, { width, fill }) => ({
         paper: {
             maxWidth: width,
@@ -3792,7 +3845,12 @@
 
     function DefaultResourceTimeline(props) {
         return (React.createElement(ResourceTimeline, { value: props.resource, loadTimelineResources: async (medplum, resourceType, id) => {
-                return Promise.allSettled([medplum.readHistory(resourceType, id)]);
+                const ref = `${resourceType}/${id}`;
+                const _count = 100;
+                return Promise.allSettled([
+                    medplum.readHistory(resourceType, id),
+                    medplum.search('Task', { _filter: `based-on eq ${ref} or focus eq ${ref} or subject eq ${ref}`, _count }),
+                ]);
             } }));
     }
 
@@ -3910,6 +3968,7 @@
         'of-type': 'of type',
         missing: 'missing',
         identifier: 'identifier',
+        iterate: 'iterate',
     };
     /**
      * Sets the array of filters.
@@ -4580,7 +4639,7 @@
             return null;
         }
         const resourceType = props.search.resourceType;
-        const searchParams = core.globalSchema.types[resourceType].searchParams;
+        const searchParams = core.globalSchema.types[resourceType].searchParams ?? {};
         const filters = search.filters || [];
         return (React.createElement(core$1.Modal, { title: "Filters", closeButtonProps: { 'aria-label': 'Close' }, size: 900, opened: props.visible, onClose: props.onCancel },
             React.createElement("div", null,
@@ -5327,15 +5386,18 @@
     }
 
     function PatientTimeline(props) {
-        const loadTimelineResources = React.useCallback((medplum, _resourceType, id) => {
+        const loadTimelineResources = React.useCallback((medplum, resourceType, id) => {
+            const ref = `${resourceType}/${id}`;
+            const _count = 100;
             return Promise.allSettled([
                 medplum.readHistory('Patient', id),
-                medplum.search('Communication', 'subject=Patient/' + id),
-                medplum.search('Device', 'patient=Patient/' + id),
-                medplum.search('DeviceRequest', 'patient=Patient/' + id),
-                medplum.search('DiagnosticReport', 'subject=Patient/' + id),
-                medplum.search('Media', 'subject=Patient/' + id),
-                medplum.search('ServiceRequest', 'subject=Patient/' + id),
+                medplum.search('Communication', { subject: ref, _count }),
+                medplum.search('Device', { patient: ref, _count }),
+                medplum.search('DeviceRequest', { patient: ref, _count }),
+                medplum.search('DiagnosticReport', { subject: ref, _count }),
+                medplum.search('Media', { subject: ref, _count }),
+                medplum.search('ServiceRequest', { subject: ref, _count }),
+                medplum.search('Task', { subject: ref, _count }),
             ]);
         }, []);
         return (React.createElement(ResourceTimeline, { value: props.patient, loadTimelineResources: loadTimelineResources, createCommunication: (resource, sender, text) => ({
@@ -6925,12 +6987,15 @@
     }
 
     function ServiceRequestTimeline(props) {
-        return (React.createElement(ResourceTimeline, { value: props.serviceRequest, loadTimelineResources: async (medplum, _resourceType, id) => {
+        return (React.createElement(ResourceTimeline, { value: props.serviceRequest, loadTimelineResources: async (medplum, resourceType, id) => {
+                const ref = `${resourceType}/${id}`;
+                const _count = 100;
                 return Promise.allSettled([
                     medplum.readHistory('ServiceRequest', id),
-                    medplum.search('Communication', 'based-on=ServiceRequest/' + id),
-                    medplum.search('Media', '_count=100&based-on=ServiceRequest/' + id),
-                    medplum.search('DiagnosticReport', 'based-on=ServiceRequest/' + id),
+                    medplum.search('Communication', { 'based-on': ref, _count }),
+                    medplum.search('DiagnosticReport', { 'based-on': ref, _count }),
+                    medplum.search('Media', { 'based-on': ref, _count }),
+                    medplum.search('Task', { _filter: `based-on eq ${ref} or focus eq ${ref} or subject eq ${ref}`, _count }),
                 ]);
             }, createCommunication: (resource, sender, text) => ({
                 resourceType: 'Communication',
@@ -7240,7 +7305,7 @@
             React.createElement(core$1.Center, { sx: { flexDirection: 'column' } }, children),
             React.createElement(OperationOutcomeAlert, { issues: issues }),
             React.createElement(core$1.Stack, { spacing: "xl" },
-                React.createElement(core$1.PasswordInput, { name: "password", label: "Password", autoComplete: "off", required: true, error: getErrorsForInput(outcome, 'password') })),
+                React.createElement(core$1.PasswordInput, { name: "password", label: "Password", autoComplete: "off", required: true, autoFocus: true, error: getErrorsForInput(outcome, 'password') })),
             React.createElement(core$1.Group, { position: "apart", mt: "xl", spacing: 0, noWrap: true },
                 onForgotPassword && (React.createElement(core$1.Anchor, { component: "button", type: "button", color: "dimmed", onClick: onForgotPassword, size: "xs" }, "Forgot password")),
                 React.createElement(core$1.Checkbox, { id: "remember", name: "remember", label: "Remember me", size: "xs", sx: { lineHeight: 1 } }),