@propriety/court-calendar 1.0.21 → 1.0.23

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@propriety/court-calendar",
     "private": false,
-    "version": "1.0.21",
+    "version": "1.0.23",
     "type": "module",
     "main": "dist/index.js",
     "module": "./dist/index.mjs",

package/src/_components/CCalendar.css

@@ -467,3 +467,71 @@
     transform: scale(1.1);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
+
+/* Print styles */
+@page {
+    size: landscape;
+    margin: 0.5in;
+}
+
+@media print {
+    /* Hide toolbar, tooltips, modal */
+    #ccalendar-container > .MuiStack-root:first-child,
+    #event-tooltip,
+    .ReactModal__Overlay,
+    .MuiDataGrid-footerContainer {
+        display: none !important;
+    }
+
+    /* Force calendar to fit page width */
+    #ccalendar-container {
+        width: 100% !important;
+        overflow: visible !important;
+    }
+
+    .fc.fc-media-screen,
+    .fc .fc-scrollgrid,
+    .fc .fc-scrollgrid-section > td,
+    .fc .fc-daygrid-body,
+    .fc table {
+        width: 100% !important;
+        max-width: 100% !important;
+    }
+
+    .fc .fc-scrollgrid {
+        overflow: visible !important;
+    }
+
+    /* Let columns size naturally instead of fixed pixel widths */
+    .fc colgroup col {
+        width: auto !important;
+    }
+
+    /* Remove scroll constraints on calendar day cells */
+    .fc-daygrid-day-events {
+        max-height: none !important;
+        min-height: auto !important;
+        overflow: visible !important;
+    }
+
+    .month-day-cell {
+        height: auto !important;
+    }
+
+    /* Remove fixed height on table container */
+    #ccalendar-container .MuiDataGrid-root {
+        height: auto !important;
+        max-height: none !important;
+    }
+
+    #ccalendar-container .MuiDataGrid-virtualScroller {
+        overflow: visible !important;
+        height: auto !important;
+    }
+
+    /* Ensure colors print */
+    * {
+        -webkit-print-color-adjust: exact !important;
+        print-color-adjust: exact !important;
+    }
+}

package/src/_components/CCalendar.tsx

@@ -81,6 +81,7 @@ function CCalendarInner({ apiKey, activeUser }: { apiKey: string; activeUser: nu
     const [selectedCases, setSelectedCases] = useState<Case[]>([]);
     const [isFetchingCases, setIsFetchingCases] = useState<boolean>(false);
     const [searchedDateIDs, setSearchedDateIDs] = useState<Array<number>>([]);
+    const [isPrinting, setIsPrinting] = useState(false);
     // Track previously rendered event IDs to avoid reanimating unchanged events
     const prevEventIdsRef = useRef<Set<string>>(new Set());
     // Track previous view to detect actual view changes vs calendarApi remounts
@@ -600,6 +601,21 @@ function CCalendarInner({ apiKey, activeUser }: { apiKey: string; activeUser: nu
     }, [currentView, calendarApi]);
     // #endregion
 
+    // #region printing
+    function handlePrint() {
+        setIsPrinting(true);
+    }
+
+    useEffect(() => {
+        if (!isPrinting) return;
+        const timeout = setTimeout(() => {
+            window.print();
+            setIsPrinting(false);
+        }, 100);
+        return () => clearTimeout(timeout);
+    }, [isPrinting]);
+    // #endregion
+
     // #region Event Mounting (Tooltips & Animations)
     function handleEventMount(info: EventMountArg) {
         // biome-ignore lint/suspicious/noExplicitAny: i dont know the type
@@ -684,6 +700,7 @@ function CCalendarInner({ apiKey, activeUser }: { apiKey: string; activeUser: nu
                 filterCtx={filterCtx}
                 setFilterCtx={setFilterCtx}
                 handleCreateClick={() => createCourtDate(calendarApi?.getDate() || currentDate || new Date())}
+                onPrint={handlePrint}
                 currentView={currentView}
                 setCurrentView={setCurrentView}
                 currentDate={currentDate}
@@ -732,6 +749,7 @@ function CCalendarInner({ apiKey, activeUser }: { apiKey: string; activeUser: nu
                     currentDate={currentDate}
                     onUpdateChair={handleUpdateChair}
                     allCases={allCases}
+                    isPrinting={isPrinting}
                 />
             )}
             <Modal

package/src/_components/List/CalendarList.tsx

@@ -11,12 +11,14 @@ export default function CalendarList({
     currentDate,
     onUpdateChair,
     allCases,
+    isPrinting,
 }: {
     filteredDates: CourtDate[];
     setSelectedDate: (date: CourtDate) => void;
     currentDate: Date;
     onUpdateChair?: (courtDateId: number, position: 'first' | 'second', userId: number | null) => void;
     allCases: Record<string, Case[]>;
+    isPrinting?: boolean;
 }) {
     const { getTownshipName, getCountyName } = useReferenceData();
     const countyColors: Record<string, string> = {
@@ -264,11 +266,13 @@ export default function CalendarList({
         }));
 
     return (
-        <div style={{ height: 600, width: '100%' }}>
+        <div style={{ height: isPrinting ? 'auto' : 600, width: '100%' }}>
             <DataGrid
                 rows={rows}
                 columns={columns}
                 className='themed'
+                autoHeight={isPrinting}
+                hideFooter={isPrinting}
                 initialState={{
                     sorting: {
                         sortModel: [{ field: 'courtDate', sort: 'asc' }],

package/src/_components/Modal/CreateEdit/CreateEditCase.tsx

@@ -237,7 +237,6 @@ const CreateEditCase = memo(function CreateEditCase({
                     alternateFieldLabelPrefix='Parcel ID'
                     toggleStates={isParcelIdMode}
                     setToggleStates={setIsParcelIdMode}
-                    modalMode={modalMode}
                 />
             </Box>
         </Stack>

package/src/_components/Modal/CreateEdit/TextFieldList.tsx

@@ -1,11 +1,10 @@
 import Stack from '@mui/material/Stack';
-import { useRef, useState, useCallback, useEffect } from 'react';
+import React, { useRef, useState, useCallback, useEffect } from 'react';
 import TrashIcon from '@mui/icons-material/Delete';
 import AddIcon from '@mui/icons-material/Add';
 import TextField from '@mui/material/TextField';
 import Fab from '@mui/material/Fab';
 import Typography from '@mui/material/Typography';
-import { ModalMode } from '@/types';
 import ToggleableTextField from './ToggleableTextField';
 import Box from '@mui/material/Box';
 
@@ -14,7 +13,6 @@ export default function TextFieldList({
     setTextFields,
     label,
     fieldLabelPrefix,
-    modalMode,
     toggleStates,
     setToggleStates,
     alternateFieldLabelPrefix,
@@ -23,7 +21,6 @@ export default function TextFieldList({
     setTextFields: (fields: string[], toggles?: boolean[]) => void;
     label: string;
     fieldLabelPrefix: string;
-    modalMode: ModalMode;
     toggleStates?: boolean[];
     setToggleStates?: (toggles: boolean[]) => void;
     alternateFieldLabelPrefix?: string;
@@ -102,6 +99,29 @@ export default function TextFieldList({
         [setToggleStates, toggleStates],
     );
 
+    const handlePaste = useCallback(
+        (index: number, e: React.ClipboardEvent<HTMLDivElement>) => {
+            const lines = e.clipboardData.getData('text').split(/\r?\n/).map((l) => l.trim()).filter(Boolean);
+            if (lines.length <= 1) return;
+            e.preventDefault();
+
+            const newFields = [...localFields.slice(0, index), ...lines, ...localFields.slice(index + 1)];
+            const newToggles = toggleStates
+                ? [...toggleStates.slice(0, index), ...lines.map(() => false), ...toggleStates.slice(index + 1)]
+                : undefined;
+
+            setLocalFields(newFields);
+            setNumFields(newFields.length);
+            setTextFields(newFields, newToggles ?? []);
+            if (setToggleStates && newToggles) setToggleStates(newToggles);
+
+            setTimeout(() => {
+                if (boxRef.current) boxRef.current.scrollTop = boxRef.current.scrollHeight;
+            }, 0);
+        },
+        [localFields, toggleStates, setTextFields, setToggleStates],
+    );
+
     return (
         <Stack spacing={2}>
             <Stack direction='row' spacing={2} alignItems='center'>
@@ -109,7 +129,7 @@ export default function TextFieldList({
                     color='primary'
                     size='small'
                     onClick={addField}
-                    disabled={numFields > textFields.length || modalMode === ModalMode.EDIT}
+                    disabled={numFields > Math.max(textFields.length, 1)}
                     style={{
                         boxShadow: '1px 1px 3px rgba(0,0,0,0.2)',
                         minWidth: 40,
@@ -145,7 +165,7 @@ export default function TextFieldList({
                                 <Fab
                                     color='error'
                                     size='small'
-                                    disabled={modalMode === ModalMode.EDIT || numFields <= 1}
+                                    disabled={numFields <= 1}
                                     onClick={() => removeField(index)}
                                     style={{
                                         minWidth: 40,
@@ -161,6 +181,7 @@ export default function TextFieldList({
                                         value={localFields[index] || ''}
                                         onChange={(value) => updateField(index, value)}
                                         onBlur={syncToParent}
+                                        onPaste={(e) => handlePaste(index, e)}
                                         isToggled={isToggled || false}
                                         onToggleChange={(checked) => handleToggleChange(index, checked)}
                                         fieldLabelPrefix={fieldLabelPrefix}
@@ -173,6 +194,7 @@ export default function TextFieldList({
                                         value={localFields[index] || ''}
                                         onChange={(e) => updateField(index, e.target.value)}
                                         onBlur={syncToParent}
+                                        onPaste={(e) => handlePaste(index, e)}
                                         fullWidth
                                     />
                                 )}

package/src/_components/Modal/CreateEdit/ToggleableTextField.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import TextField from '@mui/material/TextField';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
@@ -7,6 +8,7 @@ export default function ToggleableTextField({
     value,
     onChange,
     onBlur,
+    onPaste,
     isToggled,
     onToggleChange,
     fieldLabelPrefix,
@@ -16,6 +18,7 @@ export default function ToggleableTextField({
     value: string;
     onChange: (value: string) => void;
     onBlur?: () => void;
+    onPaste?: React.ClipboardEventHandler<HTMLDivElement>;
     isToggled: boolean;
     onToggleChange: (checked: boolean) => void;
     fieldLabelPrefix: string;
@@ -70,6 +73,7 @@ export default function ToggleableTextField({
             value={value}
             onChange={(e) => onChange(e.target.value)}
             onBlur={onBlur}
+            onPaste={onPaste}
             fullWidth
             slotProps={{
                 inputLabel: {

package/src/_components/Toolbar/Toolbar.tsx

@@ -3,6 +3,7 @@ import type { Calendar } from '@fullcalendar/core/index.js';
 import NavigateNext from '@mui/icons-material/NavigateNext';
 import NavigateBefore from '@mui/icons-material/NavigateBefore';
 import Add from '@mui/icons-material/Add';
+import Print from '@mui/icons-material/Print';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
@@ -22,6 +23,7 @@ export default function Toolbar({
     filterCtx,
     setFilterCtx,
     handleCreateClick,
+    onPrint,
     currentView,
     setCurrentView,
     currentDate,
@@ -34,6 +36,7 @@ export default function Toolbar({
     filterCtx: CalendarFilterCtx;
     setFilterCtx: (ctx: CalendarFilterCtx) => void;
     handleCreateClick: () => void;
+    onPrint: () => void;
     currentView: string;
     setCurrentView: (view: string) => void;
     currentDate: Date;
@@ -165,6 +168,9 @@ export default function Toolbar({
                 <Button variant='outlined' size='medium' onClick={goToToday}>
                     Today
                 </Button>
+                <Button size='medium' onClick={onPrint}>
+                    <Print fontSize='medium' />
+                </Button>
                 <Button size='medium' onClick={handlePrev}>
                     <NavigateBefore fontSize='medium' />
                 </Button>

package/src/helpers/cases.ts

@@ -61,7 +61,7 @@ export async function* fetchAllCasesPaginated(apiKey: string, pageSize = 20) {
 export function isCaseSettled(c: Case, isVillage: boolean): boolean {
     if (!isVillage) {
         // town
-        if (c.SCARDeterminationAction === null) return false;
+        if (!c.SCARDeterminationAction) return false;
         if (
             c.SCARDeterminationAction.toLowerCase().includes('s') ||
             c.SCARDeterminationAction.toLowerCase().includes('w') ||
@@ -70,7 +70,7 @@ export function isCaseSettled(c: Case, isVillage: boolean): boolean {
             return true;
     } else {
         // village
-        if (c.VillageSCARDeterminationAction === null) return false;
+        if (!c.VillageSCARDeterminationAction) return false;
         if (
             c.VillageSCARDeterminationAction.toLowerCase().includes('s') ||
             c.VillageSCARDeterminationAction.toLowerCase().includes('w') ||