@stoker-platform/web-app 0.5.183 → 0.5.185

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @stoker-platform/web-app
 
+## 0.5.185
+
+### Patch Changes
+
+- feat: add temporary year picker
+
+## 0.5.184
+
+### Patch Changes
+
+- fix: perform bulk writes in batches
+
 ## 0.5.183
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@stoker-platform/web-app",
-    "version": "0.5.183",
+    "version": "0.5.185",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE.md",
     "scripts": {

package/src/Form.tsx

@@ -4323,49 +4323,58 @@ function RecordForm({
                     return
                 }
 
-                const updatePromises: Promise<StokerRecord>[] = []
+                const recordsToUpdate = rowSelection.filter((selectedRecord) => selectedRecord.id)
 
-                rowSelection.forEach((selectedRecord) => {
-                    if (selectedRecord.id) {
-                        setOptimisticUpdate(labels.collection, {
-                            ...selectedRecord,
-                            ...cloneDeep(recordToSave),
-                        } as StokerRecord)
-                    }
+                recordsToUpdate.forEach((selectedRecord) => {
+                    setOptimisticUpdate(labels.collection, {
+                        ...selectedRecord,
+                        ...cloneDeep(recordToSave),
+                    } as StokerRecord)
                 })
 
-                rowSelection.forEach((selectedRecord) => {
-                    if (!selectedRecord.id) return
-
-                    const serverWrite = isServerUpdate(collection, { ...recordToSave, id: selectedRecord.id })
-                    setGlobalLoading("+", selectedRecord.id, serverWrite, !(serverWrite || isServerReadOnly))
+                const BATCH_SIZE = 5
+                const runUpdates = async () => {
+                    for (let i = 0; i < recordsToUpdate.length; i += BATCH_SIZE) {
+                        const batch = recordsToUpdate.slice(i, i + BATCH_SIZE)
+                        const batchPromises = batch.map((selectedRecord) => {
+                            const serverWrite = isServerUpdate(collection, {
+                                ...recordToSave,
+                                id: selectedRecord.id,
+                            })
+                            setGlobalLoading("+", selectedRecord.id, serverWrite, !(serverWrite || isServerReadOnly))
 
-                    const updatePromise = updateRecord(path, selectedRecord.id, recordToSave, {
-                        originalRecord: selectedRecord,
-                    })
-                        .catch((error) => {
-                            console.error(`Failed to update record ${selectedRecord.id}:`, error)
-                            toast({
-                                // eslint-disable-next-line security/detect-object-injection
-                                description: `${recordTitle} ${recordTitleField ? selectedRecord[recordTitleField] : selectedRecord.id} failed to update.`,
-                                variant: "destructive",
+                            return updateRecord(path, selectedRecord.id, recordToSave, {
+                                originalRecord: selectedRecord,
                             })
+                                .catch((error) => {
+                                    console.error(`Failed to update record ${selectedRecord.id}:`, error)
+                                    toast({
+                                        // eslint-disable-next-line security/detect-object-injection
+                                        description: `${recordTitle} ${recordTitleField ? selectedRecord[recordTitleField] : selectedRecord.id} failed to update.`,
+                                        variant: "destructive",
+                                    })
+                                })
+                                .finally(() => {
+                                    removeOptimisticUpdate(labels.collection, selectedRecord.id)
+                                    setGlobalLoading(
+                                        "-",
+                                        selectedRecord.id,
+                                        undefined,
+                                        !(serverWrite || isServerReadOnly),
+                                    )
+                                    if (serverWrite || isServerReadOnly) {
+                                        if (onSaveRecord) onSaveRecord()
+                                    }
+                                })
                         })
-                        .finally(() => {
-                            removeOptimisticUpdate(labels.collection, selectedRecord.id)
-                            setGlobalLoading("-", selectedRecord.id, undefined, !(serverWrite || isServerReadOnly))
-                            if (serverWrite || isServerReadOnly) {
-                                if (onSaveRecord) onSaveRecord()
-                            }
-                        })
-
-                    updatePromises.push(updatePromise as Promise<StokerRecord>)
-                })
+                        await Promise.all(batchPromises)
+                    }
+                }
 
                 if (isServerReadOnly) {
-                    await Promise.all(updatePromises)
+                    await runUpdates()
                 } else {
-                    Promise.all(updatePromises)
+                    runUpdates()
                 }
 
                 rowSelection.forEach((selectedRecord) => {

package/src/List.tsx

@@ -1232,46 +1232,68 @@ export function List({
         const titles = await getCachedConfigValue(customization, ["collections", labels.collection, "admin", "titles"])
         const recordTitle = titles?.record || labels.record
 
-        selectedRecords.forEach((record) => {
+        const recordsToDelete = [...selectedRecords]
+
+        for (const record of recordsToDelete) {
             if (isGlobalLoading.get(record.id)?.server) {
                 alert(
                     `Record ${record.id} is currently being written to the server. Please wait for it to finish before deleting.`,
                 )
                 return
             }
-            const serverWrite = isServerDelete(collection, record)
+        }
 
+        recordsToDelete.forEach((record) => {
             setOptimisticDelete(labels.collection, record.id)
+        })
 
-            setGlobalLoading("+", record.id, serverWrite, !(serverWrite || isServerReadOnly))
+        const BATCH_SIZE = 5
+        const runDeletes = async () => {
+            for (let i = 0; i < recordsToDelete.length; i += BATCH_SIZE) {
+                const batch = recordsToDelete.slice(i, i + BATCH_SIZE)
+                const batchPromises = batch.map((record) => {
+                    const serverWrite = isServerDelete(collection, record)
 
-            deleteRecord(record.Collection_Path, record.id)
-                .then(() => {
-                    if (isServerReadOnly) {
-                        backToStart()
-                    }
-                })
-                .catch((error) => {
-                    console.error(error)
-                    toast({
-                        // eslint-disable-next-line security/detect-object-injection
-                        description: `${recordTitle} ${recordTitleField ? record[recordTitleField] : record.id} failed to delete.`,
-                        variant: "destructive",
-                    })
-                })
-                .finally(() => {
-                    if (serverWrite || isServerReadOnly) {
+                    setGlobalLoading("+", record.id, serverWrite, !(serverWrite || isServerReadOnly))
+
+                    const deletePromise = deleteRecord(record.Collection_Path, record.id)
+                        .then(() => {
+                            if (isServerReadOnly) {
+                                backToStart()
+                            }
+                        })
+                        .catch((error) => {
+                            console.error(error)
+                            toast({
+                                // eslint-disable-next-line security/detect-object-injection
+                                description: `${recordTitle} ${recordTitleField ? record[recordTitleField] : record.id} failed to delete.`,
+                                variant: "destructive",
+                            })
+                        })
+                        .finally(() => {
+                            if (serverWrite || isServerReadOnly) {
+                                removeOptimisticDelete(labels.collection, record.id)
+                            }
+                            setGlobalLoading("-", record.id, undefined, !(serverWrite || isServerReadOnly))
+                        })
+                    if (!serverWrite && !isServerReadOnly) {
                         removeOptimisticDelete(labels.collection, record.id)
                     }
-                    setGlobalLoading("-", record.id, undefined, !(serverWrite || isServerReadOnly))
+                    return deletePromise
                 })
-            if (!serverWrite && !isServerReadOnly) {
-                removeOptimisticDelete(labels.collection, record.id)
+                await Promise.all(batchPromises)
             }
-        })
+        }
+
+        if (isServerReadOnly) {
+            await runDeletes()
+        } else {
+            runDeletes()
+        }
+
         setRowSelection({})
         toast({
-            description: `Deleting ${selectedRecords.length} ${selectedRecords.length > 1 ? "records" : "record"}.`,
+            description: `Deleting ${recordsToDelete.length} ${recordsToDelete.length > 1 ? "records" : "record"}.`,
         })
     }, [
         collection,

package/src/components/ui/calendar.tsx

@@ -1,17 +1,67 @@
 import * as React from "react"
-import { DayPicker } from "react-day-picker"
+import { format } from "date-fns"
+import { DayPicker, type CaptionLabelProps } from "react-day-picker"
 
 import { cn } from "@/lib/utils"
 import { buttonVariants } from "@/components/ui/button"
 import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons"
+import YearPicker from "@/components/ui/year-picker"
 
 /* eslint-disable react/prop-types */
 
 export type CalendarProps = React.ComponentProps<typeof DayPicker>
 
-function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {
+function CalendarCaptionLabel({ displayMonth, id, onYearClick }: CaptionLabelProps & { onYearClick: () => void }) {
+    return (
+        <div className="text-sm font-medium" aria-live="polite" role="presentation" id={id}>
+            <button
+                type="button"
+                onClick={onYearClick}
+                className="rounded-sm p-2 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            >
+                {format(displayMonth, "MMMM ")}
+                {format(displayMonth, "yyyy")}
+            </button>
+        </div>
+    )
+}
+
+function Calendar({
+    className,
+    classNames,
+    showOutsideDays = true,
+    month: monthProp,
+    onMonthChange: onMonthChangeProp,
+    defaultMonth,
+    fromYear,
+    toYear,
+    components,
+    ...props
+}: CalendarProps) {
+    const [showYearPicker, setShowYearPicker] = React.useState(false)
+    const [internalMonth, setInternalMonth] = React.useState<Date>(defaultMonth ?? new Date())
+
+    const month = monthProp ?? internalMonth
+    const onMonthChange = onMonthChangeProp ?? setInternalMonth
+
+    if (showYearPicker) {
+        return (
+            <YearPicker
+                currentMonth={month}
+                onYearChange={(newMonth) => {
+                    onMonthChange(newMonth)
+                    setShowYearPicker(false)
+                }}
+                fromYear={fromYear}
+                toYear={toYear}
+            />
+        )
+    }
+
     return (
         <DayPicker
+            month={month}
+            onMonthChange={onMonthChange}
             showOutsideDays={showOutsideDays}
             className={cn("p-3", className)}
             classNames={{
@@ -52,7 +102,13 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
             components={{
                 IconLeft: () => <ChevronLeftIcon className="h-4 w-4" />,
                 IconRight: () => <ChevronRightIcon className="h-4 w-4" />,
+                ...components,
+                CaptionLabel: (captionProps) => (
+                    <CalendarCaptionLabel {...captionProps} onYearClick={() => setShowYearPicker(true)} />
+                ),
             }}
+            fromYear={fromYear}
+            toYear={toYear}
             {...props}
         />
     )

package/src/components/ui/year-picker.tsx

@@ -0,0 +1,248 @@
+import { format, getYear, isSameYear, setYear, startOfToday } from "date-fns"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "./button"
+
+const YEARS_PER_PAGE = 12
+const GRID_COLUMNS = 3
+
+interface YearPickerProps {
+    currentMonth: Date
+    onYearChange: (newMonth: Date) => void
+    disabled?: boolean
+    fromYear?: number
+    toYear?: number
+}
+
+export default function YearPicker({
+    currentMonth,
+    onYearChange,
+    disabled,
+    fromYear = 1900,
+    toYear = 2100,
+}: YearPickerProps) {
+    const currentYear = getYear(currentMonth)
+    const [startYear, setStartYear] = React.useState(() => Math.floor(currentYear / YEARS_PER_PAGE) * YEARS_PER_PAGE)
+    const yearButtonRefs = React.useRef<(HTMLButtonElement | null)[]>([])
+
+    const years = Array.from({ length: YEARS_PER_PAGE }, (_, index) => startYear + index)
+
+    const isYearDisabled = React.useCallback(
+        (year: number) => disabled || year < fromYear || year > toYear,
+        [disabled, fromYear, toYear],
+    )
+
+    const getFirstFocusableIndex = React.useCallback(() => {
+        const selectedIndex = years.indexOf(currentYear)
+        // eslint-disable-next-line security/detect-object-injection
+        if (selectedIndex >= 0 && !isYearDisabled(years[selectedIndex])) {
+            return selectedIndex
+        }
+        return years.findIndex((year) => !isYearDisabled(year))
+    }, [years, currentYear, isYearDisabled])
+
+    const [focusedIndex, setFocusedIndex] = React.useState(0)
+
+    React.useEffect(() => {
+        setStartYear(Math.floor(getYear(currentMonth) / YEARS_PER_PAGE) * YEARS_PER_PAGE)
+    }, [currentMonth])
+
+    React.useEffect(() => {
+        setFocusedIndex(getFirstFocusableIndex())
+    }, [startYear, getFirstFocusableIndex])
+
+    React.useEffect(() => {
+        // eslint-disable-next-line security/detect-object-injection
+        yearButtonRefs.current[focusedIndex]?.focus()
+    }, [focusedIndex])
+
+    const today = startOfToday()
+
+    function previousPage() {
+        setStartYear((year) => Math.max(fromYear, year - YEARS_PER_PAGE))
+    }
+
+    function nextPage() {
+        setStartYear((year) => Math.min(toYear - YEARS_PER_PAGE + 1, year + YEARS_PER_PAGE))
+    }
+
+    function getNextFocusableIndex(index: number, step: number) {
+        let nextIndex = index + step
+        while (nextIndex >= 0 && nextIndex < years.length) {
+            // eslint-disable-next-line security/detect-object-injection
+            if (!isYearDisabled(years[nextIndex])) {
+                return nextIndex
+            }
+            nextIndex += step
+        }
+        return index
+    }
+
+    function handleYearKeyDown(event: React.KeyboardEvent<HTMLButtonElement>, index: number, year: number) {
+        const yearDate = setYear(currentMonth, year)
+
+        switch (event.key) {
+            case "ArrowRight":
+                event.preventDefault()
+                setFocusedIndex(getNextFocusableIndex(index, 1))
+                break
+            case "ArrowLeft":
+                event.preventDefault()
+                setFocusedIndex(getNextFocusableIndex(index, -1))
+                break
+            case "ArrowDown": {
+                event.preventDefault()
+                const column = index % GRID_COLUMNS
+                let nextRow = Math.floor(index / GRID_COLUMNS) + 1
+                const totalRows = Math.ceil(years.length / GRID_COLUMNS)
+                while (nextRow < totalRows) {
+                    const nextIndex = nextRow * GRID_COLUMNS + column
+                    // eslint-disable-next-line security/detect-object-injection
+                    if (nextIndex < years.length && !isYearDisabled(years[nextIndex])) {
+                        setFocusedIndex(nextIndex)
+                        return
+                    }
+                    nextRow++
+                }
+                break
+            }
+            case "ArrowUp": {
+                event.preventDefault()
+                const column = index % GRID_COLUMNS
+                let nextIndex = index - GRID_COLUMNS
+                while (nextIndex >= 0) {
+                    const alignedIndex = Math.floor(nextIndex / GRID_COLUMNS) * GRID_COLUMNS + column
+                    // eslint-disable-next-line security/detect-object-injection
+                    if (!isYearDisabled(years[alignedIndex])) {
+                        setFocusedIndex(alignedIndex)
+                        return
+                    }
+                    nextIndex -= GRID_COLUMNS
+                }
+                break
+            }
+            case "Home":
+                event.preventDefault()
+                setFocusedIndex(getFirstFocusableIndex())
+                break
+            case "End": {
+                event.preventDefault()
+                for (let endIndex = years.length - 1; endIndex >= 0; endIndex--) {
+                    // eslint-disable-next-line security/detect-object-injection
+                    if (!isYearDisabled(years[endIndex])) {
+                        setFocusedIndex(endIndex)
+                        break
+                    }
+                }
+                break
+            }
+            case "PageUp":
+                event.preventDefault()
+                previousPage()
+                break
+            case "PageDown":
+                event.preventDefault()
+                nextPage()
+                break
+            case "Enter":
+            case " ":
+                event.preventDefault()
+                if (!isYearDisabled(year)) {
+                    onYearChange(yearDate)
+                }
+                break
+        }
+    }
+
+    return (
+        <div className="w-fit p-3">
+            <div className="flex w-fit flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+                <div className="space-y-4">
+                    <div className="relative flex w-56 items-center justify-center pt-1">
+                        <div className="text-sm font-medium" aria-live="polite" role="presentation" id="year-picker">
+                            {startYear} – {startYear + YEARS_PER_PAGE - 1}
+                        </div>
+                        <div className="flex items-center space-x-1">
+                            <button
+                                name="previous-years"
+                                aria-label="Go to previous years"
+                                className={cn(
+                                    buttonVariants({ variant: "outline" }),
+                                    "absolute left-1 h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+                                )}
+                                type="button"
+                                onClick={previousPage}
+                                disabled={disabled || startYear <= fromYear}
+                            >
+                                <ChevronLeft className="h-4 w-4" />
+                            </button>
+                            <button
+                                name="next-years"
+                                aria-label="Go to next years"
+                                className={cn(
+                                    buttonVariants({ variant: "outline" }),
+                                    "absolute right-1 h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+                                )}
+                                type="button"
+                                onClick={nextPage}
+                                disabled={disabled || startYear + YEARS_PER_PAGE - 1 >= toYear}
+                            >
+                                <ChevronRight className="h-4 w-4" />
+                            </button>
+                        </div>
+                    </div>
+                    <div className="grid w-56 grid-cols-3 gap-2" role="grid" aria-labelledby="year-picker">
+                        {years.map((year, index) => {
+                            const yearDate = setYear(currentMonth, year)
+                            const isSelected = isSameYear(yearDate, currentMonth)
+                            const isCurrentYear = isSameYear(yearDate, today)
+                            const isDisabled = isYearDisabled(year)
+
+                            return (
+                                <div
+                                    key={year}
+                                    className="relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent rounded-md"
+                                    role="presentation"
+                                >
+                                    <button
+                                        ref={(element) => {
+                                            // eslint-disable-next-line security/detect-object-injection
+                                            yearButtonRefs.current[index] = element
+                                        }}
+                                        name="year"
+                                        className={cn(
+                                            buttonVariants({ variant: "ghost" }),
+                                            "inline-flex h-9 w-full items-center justify-center p-0 text-sm font-normal aria-selected:opacity-100",
+                                            isSelected &&
+                                                "bg-blue-500 text-white hover:bg-blue-600 hover:text-white focus:bg-blue-600 focus:text-white",
+                                            !isSelected && isCurrentYear && "bg-accent text-accent-foreground",
+                                        )}
+                                        disabled={isDisabled}
+                                        role="gridcell"
+                                        tabIndex={index === focusedIndex ? 0 : -1}
+                                        type="button"
+                                        aria-selected={isSelected}
+                                        aria-label={
+                                            isSelected
+                                                ? `${year}, selected`
+                                                : isCurrentYear
+                                                  ? `${year}, current year`
+                                                  : String(year)
+                                        }
+                                        onClick={() => onYearChange(yearDate)}
+                                        onFocus={() => setFocusedIndex(index)}
+                                        onKeyDown={(event) => handleYearKeyDown(event, index, year)}
+                                    >
+                                        <time dateTime={format(yearDate, "yyyy-MM-dd")}>{year}</time>
+                                    </button>
+                                </div>
+                            )
+                        })}
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}