@medplum/react 0.9.21 → 0.9.22

package/dist/cjs/styles.css

@@ -1511,6 +1511,64 @@ div.medplum-nav-menu-container {
   margin: 0;
 }
 
+.medplum-calendar-table {
+  width: 350px;
+}
+
+.medplum-calendar-table th {
+  font-weight: normal;
+  font-size: 11px;
+  padding: 8px;
+  text-align: center;
+}
+
+.medplum-calendar-table td {
+  padding: 2px 4px;
+}
+
+.medplum-calendar-table button {
+  width: 44px;
+  height: 44px;
+  color: #0060e6;
+  font-size: 16px;
+  font-weight: bold;
+  text-align: center;
+  padding: 0;
+  background-color: #eef5ff;
+  border: 0;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.medplum-calendar-table button:hover {
+  background-color: #d9e9ff;
+}
+
+.medplum-calendar-table button:disabled {
+  background-color: white;
+  cursor: default;
+  color: #666;
+  font-weight: normal;
+}
+
+.medplum-calendar-container {
+  display: flex;
+  min-height: 400px;
+}
+
+.medplum-calendar-info-pane {
+  min-width: 300px;
+  padding: 20px;
+  border-right: 1px solid #ddd;
+}
+
+.medplum-calendar-selection-pane {
+  min-width: 300px;
+  padding: 20px;
+}
+
+.grecaptcha-badge { visibility: hidden; }
+
 .medplum-signin {
   max-width: 400px;
 }

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 import { formatAddress, getDisplayString, getImageSrc, capitalize, globalSchema, getPropertyDisplayName, formatHumanName, stringify, buildTypeName, PropertyType, getTypedPropertyValue, createReference, toTypedValue, getReferenceString, evalFhirPath, getSearchParameterDetails, Operator, evalFhirPathTyped, SearchParameterType, formatSearchQuery, parseSearchDefinition, DEFAULT_SEARCH_COUNT, isUUID } from '@medplum/core';
-import React, { useState, useRef, createContext, useEffect, useContext, useCallback } from 'react';
+import React, { useState, useRef, createContext, useEffect, useContext, useCallback, useMemo } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 
 function AddressDisplay(props) {
@@ -5265,6 +5265,165 @@ function getVersionUrl(resource) {
     return `/${resource.resourceType}/${resource.id}/_history/${(_a = resource.meta) === null || _a === void 0 ? void 0 : _a.versionId}`;
 }
 
+/**
+ * Returns a month display string (e.g. "January 2020").
+ * @param date Any date within the month.
+ * @returns The month display string (e.g. "January 2020")
+ */
+function getMonthString(date) {
+    return date.toLocaleString('default', { month: 'long' }) + ' ' + date.getFullYear();
+}
+function CalendarInput(props) {
+    const [month, setMonth] = useState(getStartMonth);
+    function moveMonth(delta) {
+        setMonth((currMonth) => {
+            const prevMonth = new Date(currMonth.getTime());
+            prevMonth.setMonth(currMonth.getMonth() + delta);
+            return prevMonth;
+        });
+    }
+    const grid = useMemo(() => buildGrid(month, props.slots), [month, props.slots]);
+    return (React.createElement("div", null,
+        React.createElement(InputRow, null,
+            React.createElement("p", { style: { flex: 1 } }, getMonthString(month)),
+            React.createElement("p", null,
+                React.createElement(Button, { label: "Previous month", onClick: () => moveMonth(-1) }, "<"),
+                React.createElement(Button, { label: "Next month", onClick: () => moveMonth(1) }, ">"))),
+        React.createElement("table", { className: "medplum-calendar-table" },
+            React.createElement("thead", null,
+                React.createElement("tr", null,
+                    React.createElement("th", null, "SUN"),
+                    React.createElement("th", null, "MON"),
+                    React.createElement("th", null, "TUE"),
+                    React.createElement("th", null, "WED"),
+                    React.createElement("th", null, "THU"),
+                    React.createElement("th", null, "FRI"),
+                    React.createElement("th", null, "SAT"))),
+            React.createElement("tbody", null, grid.map((week, weekIndex) => (React.createElement("tr", { key: 'week-' + weekIndex }, week.map((day, dayIndex) => (React.createElement("td", { key: 'day-' + dayIndex }, day && (React.createElement("button", { disabled: !day.available, onClick: () => props.onClick(day.date) }, day.date.getDate()))))))))))));
+}
+function getStartMonth() {
+    const result = new Date();
+    result.setDate(1);
+    result.setHours(0, 0, 0, 0);
+    return result;
+}
+function buildGrid(startDate, slots) {
+    const d = new Date(startDate.getFullYear(), startDate.getMonth());
+    const grid = [];
+    let row = [];
+    // Fill leading empty days
+    for (let i = 0; i < d.getDay(); i++) {
+        row.push(undefined);
+    }
+    while (d.getMonth() === startDate.getMonth()) {
+        row.push({
+            date: new Date(d.getTime()),
+            // available: isAvailable(d),
+            available: isDayAvailable(d, slots),
+        });
+        if (d.getDay() === 6) {
+            grid.push(row);
+            row = [];
+        }
+        d.setDate(d.getDate() + 1);
+    }
+    // Fill trailing empty days
+    if (d.getDay() !== 0) {
+        for (let i = d.getDay(); i < 7; i++) {
+            row.push(undefined);
+        }
+        grid.push(row);
+    }
+    return grid;
+}
+/**
+ * Returns true if the given date is available for booking.
+ * @param day The day to check.
+ * @param slots The list of available slots.
+ * @returns True if there are any available slots for the day.
+ */
+function isDayAvailable(day, slots) {
+    // Note that slot start and end time may or may not be in UTC.
+    for (const slot of slots) {
+        const slotStart = new Date(slot.start);
+        if (slotStart.getFullYear() === day.getFullYear() &&
+            slotStart.getMonth() === day.getMonth() &&
+            slotStart.getDate() === day.getDate()) {
+            return true;
+        }
+    }
+    return false;
+}
+
+function Scheduler(props) {
+    var _a;
+    const medplum = useMedplum();
+    const schedule = useResource(props.schedule);
+    const [slots, setSlots] = useState();
+    const slotsRef = useRef();
+    slotsRef.current = slots;
+    const [date, setDate] = useState();
+    const [slot, setSlot] = useState();
+    const [info, setInfo] = useState();
+    const [form, setForm] = useState();
+    useEffect(() => {
+        if (schedule) {
+            medplum.search('Slot', 'schedule=' + getReferenceString(schedule)).then((bundle) => {
+                setSlots(bundle.entry.map((entry) => entry.resource));
+            });
+        }
+        else {
+            setSlots(undefined);
+        }
+    }, [medplum, schedule]);
+    if (!schedule || !slots) {
+        return null;
+    }
+    const actor = (_a = schedule.actor) === null || _a === void 0 ? void 0 : _a[0];
+    return (React.createElement("div", { className: "medplum-calendar-container", "data-testid": "scheduler" },
+        React.createElement("div", { className: "medplum-calendar-info-pane" },
+            actor && React.createElement(Avatar, { value: actor, size: "large" }),
+            actor && (React.createElement("h1", null,
+                React.createElement(ResourceName, { value: actor }))),
+            React.createElement("p", null, "1 hour"),
+            date && React.createElement("p", null, date.toLocaleDateString()),
+            slot && React.createElement("p", null, formatTime(new Date(slot.start)))),
+        React.createElement("div", { className: "medplum-calendar-selection-pane" },
+            !date && (React.createElement("div", null,
+                React.createElement("h3", null, "Select date"),
+                React.createElement(CalendarInput, { slots: slots, onClick: setDate }))),
+            date && !slot && (React.createElement("div", null,
+                React.createElement("h3", null, "Select time"),
+                slots.map((s) => {
+                    const slotStart = new Date(s.start);
+                    return (slotStart.getTime() > date.getTime() &&
+                        slotStart.getTime() < date.getTime() + 24 * 3600 * 1000 && (React.createElement("div", { key: s.id },
+                        React.createElement(Button, { style: { width: 150 }, onClick: () => setSlot(s) }, formatTime(slotStart)))));
+                }))),
+            date && slot && !info && (React.createElement("div", null,
+                React.createElement("h3", null, "Enter your info"),
+                React.createElement(FormSection, { title: "Name", htmlFor: "name" },
+                    React.createElement(Input, { name: "name" })),
+                React.createElement(FormSection, { title: "Email", htmlFor: "email" },
+                    React.createElement(Input, { name: "email" })),
+                React.createElement(Button, { primary: true, onClick: () => setInfo('info') }, "Next"))),
+            date && slot && info && !form && (React.createElement("div", null,
+                React.createElement("h3", null, "Custom questions"),
+                React.createElement(FormSection, { title: "Question 1", htmlFor: "q1" },
+                    React.createElement(Input, { name: "q1" })),
+                React.createElement(FormSection, { title: "Question 2", htmlFor: "q2" },
+                    React.createElement(Input, { name: "email" })),
+                React.createElement(FormSection, { title: "Question 3", htmlFor: "q3" },
+                    React.createElement(Input, { name: "email" })),
+                React.createElement(Button, { primary: true, onClick: () => setForm('form') }, "Next"))),
+            date && slot && info && form && (React.createElement("div", null,
+                React.createElement("h3", null, "You're all set!"),
+                React.createElement("p", null, "Check your email for a calendar invite."))))));
+}
+function formatTime(date) {
+    return date.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
+}
+
 function ServiceRequestTimeline(props) {
     return (React.createElement(ResourceTimeline, { value: props.serviceRequest, buildSearchRequests: (resource) => ({
             resourceType: 'Bundle',
@@ -5526,5 +5685,5 @@ function TabSwitch(props) {
     })));
 }
 
-export { AddressDisplay, AddressInput, AttachmentArrayDisplay, AttachmentArrayInput, AttachmentInput, Autocomplete, Avatar, BackboneElementInput, Button, Checkbox, CheckboxFormSection, CodeInput, CodeableConceptDisplay, CodeableConceptInput, ContactDetailDisplay, ContactDetailInput, ContactPointDisplay, ContactPointInput, DateTimeDisplay, DateTimeInput, DefaultResourceTimeline, DiagnosticReportDisplay, Document, ElementDefinitionInputSelector, ElementDefinitionTypeInput, EncounterTimeline, ErrorBoundary, FhirPathTable, FooterLinks, Form, FormSection, Header, HumanNameDisplay, HumanNameInput, IdentifierInput, Input, Loading, Logo, MedplumLink, MedplumProvider, MemoizedFhirPathTable, MemoizedSearchControl, MenuItem, ObservationTable, PatientTimeline, PlanDefinitionBuilder, Popup, QuestionnaireBuilder, QuestionnaireForm, QuestionnaireFormItem, QuestionnaireItemType, RangeDisplay, RangeInput, ReferenceInput, RequestGroupDisplay, ResourceArrayDisplay, ResourceArrayInput, ResourceBadge, ResourceBlame, ResourceDiff, ResourceForm, ResourceHistoryTable, ResourceInput, ResourceName, ResourcePropertyDisplay, ResourcePropertyInput, ResourceTable, ResourceTimeline, Scrollable, SearchChangeEvent, SearchClickEvent, SearchControl, SearchFieldEditor, SearchFilterEditor, SearchLoadEvent, Select, ServiceRequestTimeline, SignInForm, StatusBadge, Tab, TabList, TabPanel, TabSwitch, TextArea, Timeline, TimelineItem, TitleBar, UploadButton, addDateEqualsFilter, addDateFilter, addDateFilterBetween, addField, addFilter, addLastMonthFilter, addMissingFilter, addNextMonthFilter, addQuestionnaireInitialValues, addThisMonthFilter, addTodayFilter, addTomorrowFilter, addYearToDateFilter, addYesterdayFilter, buildFieldNameString, clearFilters, clearFiltersOnField, convertIsoToLocal, convertLocalToIso, createScriptTag, deleteFilter, formatRangeString, getOpString, getSearchOperators, getSortField, getTimeString, getValueAndType, hasFilterOnField, isChoiceQuestion, isSortDescending, movePage, parseForm, renderValue, setFilters, setOffset, setPropertyValue, setSort, sortByDateAndPriority, toggleSort, useMedplum, useMedplumContext, useMedplumProfile, useResource };
+export { AddressDisplay, AddressInput, AttachmentArrayDisplay, AttachmentArrayInput, AttachmentInput, Autocomplete, Avatar, BackboneElementInput, Button, Checkbox, CheckboxFormSection, CodeInput, CodeableConceptDisplay, CodeableConceptInput, ContactDetailDisplay, ContactDetailInput, ContactPointDisplay, ContactPointInput, DateTimeDisplay, DateTimeInput, DefaultResourceTimeline, DiagnosticReportDisplay, Document, ElementDefinitionInputSelector, ElementDefinitionTypeInput, EncounterTimeline, ErrorBoundary, FhirPathTable, FooterLinks, Form, FormSection, Header, HumanNameDisplay, HumanNameInput, IdentifierInput, Input, Loading, Logo, MedplumLink, MedplumProvider, MemoizedFhirPathTable, MemoizedSearchControl, MenuItem, ObservationTable, PatientTimeline, PlanDefinitionBuilder, Popup, QuestionnaireBuilder, QuestionnaireForm, QuestionnaireFormItem, QuestionnaireItemType, RangeDisplay, RangeInput, ReferenceInput, RequestGroupDisplay, ResourceArrayDisplay, ResourceArrayInput, ResourceBadge, ResourceBlame, ResourceDiff, ResourceForm, ResourceHistoryTable, ResourceInput, ResourceName, ResourcePropertyDisplay, ResourcePropertyInput, ResourceTable, ResourceTimeline, Scheduler, Scrollable, SearchChangeEvent, SearchClickEvent, SearchControl, SearchFieldEditor, SearchFilterEditor, SearchLoadEvent, Select, ServiceRequestTimeline, SignInForm, StatusBadge, Tab, TabList, TabPanel, TabSwitch, TextArea, Timeline, TimelineItem, TitleBar, UploadButton, addDateEqualsFilter, addDateFilter, addDateFilterBetween, addField, addFilter, addLastMonthFilter, addMissingFilter, addNextMonthFilter, addQuestionnaireInitialValues, addThisMonthFilter, addTodayFilter, addTomorrowFilter, addYearToDateFilter, addYesterdayFilter, buildFieldNameString, clearFilters, clearFiltersOnField, convertIsoToLocal, convertLocalToIso, createScriptTag, deleteFilter, formatRangeString, getOpString, getSearchOperators, getSortField, getTimeString, getValueAndType, hasFilterOnField, isChoiceQuestion, isSortDescending, movePage, parseForm, renderValue, setFilters, setOffset, setPropertyValue, setSort, sortByDateAndPriority, toggleSort, useMedplum, useMedplumContext, useMedplumProfile, useResource };
 //# sourceMappingURL=index.js.map