@medplum/react 0.9.21 → 0.9.22

package/dist/cjs/index.js

@@ -5271,6 +5271,165 @@
         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] = React.useState(getStartMonth);
+        function moveMonth(delta) {
+            setMonth((currMonth) => {
+                const prevMonth = new Date(currMonth.getTime());
+                prevMonth.setMonth(currMonth.getMonth() + delta);
+                return prevMonth;
+            });
+        }
+        const grid = React.useMemo(() => buildGrid(month, props.slots), [month, props.slots]);
+        return (React__default["default"].createElement("div", null,
+            React__default["default"].createElement(InputRow, null,
+                React__default["default"].createElement("p", { style: { flex: 1 } }, getMonthString(month)),
+                React__default["default"].createElement("p", null,
+                    React__default["default"].createElement(Button, { label: "Previous month", onClick: () => moveMonth(-1) }, "<"),
+                    React__default["default"].createElement(Button, { label: "Next month", onClick: () => moveMonth(1) }, ">"))),
+            React__default["default"].createElement("table", { className: "medplum-calendar-table" },
+                React__default["default"].createElement("thead", null,
+                    React__default["default"].createElement("tr", null,
+                        React__default["default"].createElement("th", null, "SUN"),
+                        React__default["default"].createElement("th", null, "MON"),
+                        React__default["default"].createElement("th", null, "TUE"),
+                        React__default["default"].createElement("th", null, "WED"),
+                        React__default["default"].createElement("th", null, "THU"),
+                        React__default["default"].createElement("th", null, "FRI"),
+                        React__default["default"].createElement("th", null, "SAT"))),
+                React__default["default"].createElement("tbody", null, grid.map((week, weekIndex) => (React__default["default"].createElement("tr", { key: 'week-' + weekIndex }, week.map((day, dayIndex) => (React__default["default"].createElement("td", { key: 'day-' + dayIndex }, day && (React__default["default"].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] = React.useState();
+        const slotsRef = React.useRef();
+        slotsRef.current = slots;
+        const [date, setDate] = React.useState();
+        const [slot, setSlot] = React.useState();
+        const [info, setInfo] = React.useState();
+        const [form, setForm] = React.useState();
+        React.useEffect(() => {
+            if (schedule) {
+                medplum.search('Slot', 'schedule=' + core.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__default["default"].createElement("div", { className: "medplum-calendar-container", "data-testid": "scheduler" },
+            React__default["default"].createElement("div", { className: "medplum-calendar-info-pane" },
+                actor && React__default["default"].createElement(Avatar, { value: actor, size: "large" }),
+                actor && (React__default["default"].createElement("h1", null,
+                    React__default["default"].createElement(ResourceName, { value: actor }))),
+                React__default["default"].createElement("p", null, "1 hour"),
+                date && React__default["default"].createElement("p", null, date.toLocaleDateString()),
+                slot && React__default["default"].createElement("p", null, formatTime(new Date(slot.start)))),
+            React__default["default"].createElement("div", { className: "medplum-calendar-selection-pane" },
+                !date && (React__default["default"].createElement("div", null,
+                    React__default["default"].createElement("h3", null, "Select date"),
+                    React__default["default"].createElement(CalendarInput, { slots: slots, onClick: setDate }))),
+                date && !slot && (React__default["default"].createElement("div", null,
+                    React__default["default"].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__default["default"].createElement("div", { key: s.id },
+                            React__default["default"].createElement(Button, { style: { width: 150 }, onClick: () => setSlot(s) }, formatTime(slotStart)))));
+                    }))),
+                date && slot && !info && (React__default["default"].createElement("div", null,
+                    React__default["default"].createElement("h3", null, "Enter your info"),
+                    React__default["default"].createElement(FormSection, { title: "Name", htmlFor: "name" },
+                        React__default["default"].createElement(Input, { name: "name" })),
+                    React__default["default"].createElement(FormSection, { title: "Email", htmlFor: "email" },
+                        React__default["default"].createElement(Input, { name: "email" })),
+                    React__default["default"].createElement(Button, { primary: true, onClick: () => setInfo('info') }, "Next"))),
+                date && slot && info && !form && (React__default["default"].createElement("div", null,
+                    React__default["default"].createElement("h3", null, "Custom questions"),
+                    React__default["default"].createElement(FormSection, { title: "Question 1", htmlFor: "q1" },
+                        React__default["default"].createElement(Input, { name: "q1" })),
+                    React__default["default"].createElement(FormSection, { title: "Question 2", htmlFor: "q2" },
+                        React__default["default"].createElement(Input, { name: "email" })),
+                    React__default["default"].createElement(FormSection, { title: "Question 3", htmlFor: "q3" },
+                        React__default["default"].createElement(Input, { name: "email" })),
+                    React__default["default"].createElement(Button, { primary: true, onClick: () => setForm('form') }, "Next"))),
+                date && slot && info && form && (React__default["default"].createElement("div", null,
+                    React__default["default"].createElement("h3", null, "You're all set!"),
+                    React__default["default"].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__default["default"].createElement(ResourceTimeline, { value: props.serviceRequest, buildSearchRequests: (resource) => ({
                 resourceType: 'Bundle',
@@ -5599,6 +5758,7 @@
     exports.ResourcePropertyInput = ResourcePropertyInput;
     exports.ResourceTable = ResourceTable;
     exports.ResourceTimeline = ResourceTimeline;
+    exports.Scheduler = Scheduler;
     exports.Scrollable = Scrollable;
     exports.SearchChangeEvent = SearchChangeEvent;
     exports.SearchClickEvent = SearchClickEvent;