dce-reactkit 3.9.4-beta.1 → 3.9.5

package/dist/esm/types/components/AppWrapper.d.ts

@@ -48,25 +48,33 @@ export declare const confirm: (title: string, text: string, opts?: {
  * Show a prompt modal asking the user for input
  * @author Yuen Ler Chow
  * @param title the title text to display at the top of the prompt
- * @param text the text to display in the prompt
  * @param [opts={}] additional options for the prompt dialog
- * @param [opts.placeholder] the placeholder text for the input field
+ * @param [opts.textAboveInputField] the text to display in the prompt
  * @param [opts.defaultText] the default text for the input field
+ * @param [opts.placeholder] the placeholder text for the input field
  * @param [opts.confirmButtonText=Okay] the text of the confirm button
  * @param [opts.confirmButtonVariant=Variant.Dark] the variant of the confirm button
  * @param [opts.cancelButtonText=Cancel] the text of the cancel button
  * @param [opts.cancelButtonVariant=Variant.Secondary] the variant of the cancel button
+ * @param [opts.minNumChars] the minimum number of characters required for
+ *   the input to be valid
+ * @param [opts.findValidationError] a function that takes the input text and
+ *   returns an error message if the input is invalid, returns undefined if the
+ *   input is valid
+ * @param [opts.ariaLabel] the aria label for the input field
  * @returns Promise that resolves with the input string or null if canceled
  */
-export declare const prompt: (title: string, text: string, currentInputFieldText: string, opts?: {
-    placeholder?: string | undefined;
+export declare const prompt: (title: string, opts?: {
+    textAboveInputField?: string | undefined;
     defaultText?: string | undefined;
+    placeholder?: string | undefined;
     confirmButtonText?: string | undefined;
     confirmButtonVariant?: Variant | undefined;
     cancelButtonText?: string | undefined;
     cancelButtonVariant?: Variant | undefined;
     minNumChars?: number | undefined;
     findValidationError?: ((text: string) => string | undefined) | undefined;
+    ariaLabel?: string | undefined;
 } | undefined) => Promise<string | null>;
 /**
  * Show a fatal error message

package/dist/esm/types/index.d.ts

@@ -1,4 +1,4 @@
-import AppWrapper, { alert, confirm, showFatalError, addFatalErrorHandler, leaveToURL } from './components/AppWrapper';
+import AppWrapper, { alert, prompt, confirm, showFatalError, addFatalErrorHandler, leaveToURL } from './components/AppWrapper';
 import LoadingSpinner from './components/LoadingSpinner';
 import ErrorBox from './components/ErrorBox';
 import Modal from './components/Modal';
@@ -99,4 +99,4 @@ import PickableItem from './components/ItemPicker/types/PickableItem';
 import DBEntry from './components/DBEntryManagerPanel/types/DBEntry';
 import DBEntryField from './components/DBEntryManagerPanel/types/DBEntryField';
 import DBEntryFieldType from './components/DBEntryManagerPanel/types/DBEntryFieldType';
-export { AppWrapper, LoadingSpinner, ErrorBox, Modal, TabBox, RadioButton, CheckboxButton, ButtonInputGroup, SimpleDateChooser, Drawer, PopSuccessMark, PopFailureMark, PopPendingMark, CopiableBox, ItemPicker, LogReviewer, IntelliTable, CSVDownloadButton, DBEntryManagerPanel, Tooltip, ToggleSwitch, AutoscrollToBottomContainer, MultiSwitch, Dropdown, alert, confirm, showFatalError, ErrorWithCode, MINUTE_IN_MS, HOUR_IN_MS, DAY_IN_MS, DynamicWord, abbreviate, avg, ceilToNumDecimals, floorToNumDecimals, forceNumIntoBounds, padDecimalZeros, padZerosLeft, roundToNumDecimals, sum, waitMs, getOrdinal, getTimeInfoInET, stubServerEndpoint, startMinWait, getHumanReadableDate, getPartOfDay, stringsToHumanReadableList, onlyKeepLetters, parallelLimit, getMonthName, genCSV, canReviewLogs, isMobileOrTablet, extractProp, compareArraysByProp, genCommaList, validateEmail, validatePhoneNumber, validateString, getLocalTimeInfo, idify, makeLinksClickable, prefixWithAOrAn, everyAsync, filterAsync, forEachAsync, mapAsync, someAsync, capitalize, shuffleArray, initClient, visitServerEndpoint, logClientEvent, addFatalErrorHandler, leaveToURL, combineClassNames, useForceRender, setClientEventMetadataPopulator, initServer, genRouteHandler, handleError, handleSuccess, initLogCollection, addDBEditorEndpoints, visitEndpointOnAnotherServer, ModalButtonType, ModalSize, ModalType, ReactKitErrorCode, Variant, DayOfWeek, Log, LogType, LogSource, LogAction, LogBuiltInMetadata, LogMetadataType, LogFunction, IntelliTableColumn, DropdownItemType, PickableItem, DBEntry, DBEntryField, DBEntryFieldType, ParamType, };
+export { AppWrapper, LoadingSpinner, ErrorBox, Modal, TabBox, RadioButton, CheckboxButton, ButtonInputGroup, SimpleDateChooser, Drawer, PopSuccessMark, PopFailureMark, PopPendingMark, CopiableBox, ItemPicker, LogReviewer, IntelliTable, CSVDownloadButton, DBEntryManagerPanel, Tooltip, ToggleSwitch, AutoscrollToBottomContainer, MultiSwitch, Dropdown, alert, prompt, confirm, showFatalError, ErrorWithCode, MINUTE_IN_MS, HOUR_IN_MS, DAY_IN_MS, DynamicWord, abbreviate, avg, ceilToNumDecimals, floorToNumDecimals, forceNumIntoBounds, padDecimalZeros, padZerosLeft, roundToNumDecimals, sum, waitMs, getOrdinal, getTimeInfoInET, stubServerEndpoint, startMinWait, getHumanReadableDate, getPartOfDay, stringsToHumanReadableList, onlyKeepLetters, parallelLimit, getMonthName, genCSV, canReviewLogs, isMobileOrTablet, extractProp, compareArraysByProp, genCommaList, validateEmail, validatePhoneNumber, validateString, getLocalTimeInfo, idify, makeLinksClickable, prefixWithAOrAn, everyAsync, filterAsync, forEachAsync, mapAsync, someAsync, capitalize, shuffleArray, initClient, visitServerEndpoint, logClientEvent, addFatalErrorHandler, leaveToURL, combineClassNames, useForceRender, setClientEventMetadataPopulator, initServer, genRouteHandler, handleError, handleSuccess, initLogCollection, addDBEditorEndpoints, visitEndpointOnAnotherServer, ModalButtonType, ModalSize, ModalType, ReactKitErrorCode, Variant, DayOfWeek, Log, LogType, LogSource, LogAction, LogBuiltInMetadata, LogMetadataType, LogFunction, IntelliTableColumn, DropdownItemType, PickableItem, DBEntry, DBEntryField, DBEntryFieldType, ParamType, };

package/dist/index.d.ts

@@ -63,6 +63,38 @@ declare const confirm: (title: string, text: string, opts?: {
     cancelButtonText?: string;
     cancelButtonVariant?: Variant;
 }) => Promise<boolean>;
+/**
+ * Show a prompt modal asking the user for input
+ * @author Yuen Ler Chow
+ * @param title the title text to display at the top of the prompt
+ * @param [opts={}] additional options for the prompt dialog
+ * @param [opts.textAboveInputField] the text to display in the prompt
+ * @param [opts.defaultText] the default text for the input field
+ * @param [opts.placeholder] the placeholder text for the input field
+ * @param [opts.confirmButtonText=Okay] the text of the confirm button
+ * @param [opts.confirmButtonVariant=Variant.Dark] the variant of the confirm button
+ * @param [opts.cancelButtonText=Cancel] the text of the cancel button
+ * @param [opts.cancelButtonVariant=Variant.Secondary] the variant of the cancel button
+ * @param [opts.minNumChars] the minimum number of characters required for
+ *   the input to be valid
+ * @param [opts.findValidationError] a function that takes the input text and
+ *   returns an error message if the input is invalid, returns undefined if the
+ *   input is valid
+ * @param [opts.ariaLabel] the aria label for the input field
+ * @returns Promise that resolves with the input string or null if canceled
+ */
+declare const prompt: (title: string, opts?: {
+    textAboveInputField?: string | undefined;
+    defaultText?: string | undefined;
+    placeholder?: string | undefined;
+    confirmButtonText?: string | undefined;
+    confirmButtonVariant?: Variant | undefined;
+    cancelButtonText?: string | undefined;
+    cancelButtonVariant?: Variant | undefined;
+    minNumChars?: number | undefined;
+    findValidationError?: ((text: string) => string | undefined) | undefined;
+    ariaLabel?: string | undefined;
+} | undefined) => Promise<string | null>;
 /**
  * Show a fatal error message
  * @author Gabe Abrams
@@ -1691,4 +1723,4 @@ declare const LogBuiltInMetadata: {
     };
 };
 
-export { AppWrapper, AutoscrollToBottomContainer, ButtonInputGroup, CSVDownloadButton, CheckboxButton, CopiableBox, DAY_IN_MS, DBEntry, DBEntryField, DBEntryFieldType, DBEntryManagerPanel, DayOfWeek, Drawer, Dropdown, DropdownItemType, DynamicWord, ErrorBox, ErrorWithCode, HOUR_IN_MS, IntelliTable, IntelliTableColumn, ItemPicker, LoadingSpinner, Log, LogAction, LogBuiltInMetadata, LogFunction, LogMetadataType, LogReviewer, LogSource, LogType, MINUTE_IN_MS, Modal, ModalButtonType, ModalSize, ModalType, MultiSwitch, ParamType, PickableItem, PopFailureMark, PopPendingMark, PopSuccessMark, RadioButton, ReactKitErrorCode, SimpleDateChooser, TabBox, ToggleSwitch, Tooltip, Variant, abbreviate, addDBEditorEndpoints, addFatalErrorHandler, alert, avg, canReviewLogs, capitalize, ceilToNumDecimals, combineClassNames, compareArraysByProp, confirm, everyAsync, extractProp, filterAsync, floorToNumDecimals, forEachAsync, forceNumIntoBounds, genCSV, genCommaList, genRouteHandler, getHumanReadableDate, getLocalTimeInfo, getMonthName, getOrdinal, getPartOfDay, getTimeInfoInET, handleError, handleSuccess, idify, initClient, initLogCollection, initServer, isMobileOrTablet, leaveToURL, logClientEvent, makeLinksClickable, mapAsync, onlyKeepLetters, padDecimalZeros, padZerosLeft, parallelLimit, prefixWithAOrAn, roundToNumDecimals, setClientEventMetadataPopulator, showFatalError, shuffleArray, someAsync, startMinWait, stringsToHumanReadableList, stubServerEndpoint, sum, useForceRender, validateEmail, validatePhoneNumber, validateString, visitEndpointOnAnotherServer, visitServerEndpoint, waitMs };
+export { AppWrapper, AutoscrollToBottomContainer, ButtonInputGroup, CSVDownloadButton, CheckboxButton, CopiableBox, DAY_IN_MS, DBEntry, DBEntryField, DBEntryFieldType, DBEntryManagerPanel, DayOfWeek, Drawer, Dropdown, DropdownItemType, DynamicWord, ErrorBox, ErrorWithCode, HOUR_IN_MS, IntelliTable, IntelliTableColumn, ItemPicker, LoadingSpinner, Log, LogAction, LogBuiltInMetadata, LogFunction, LogMetadataType, LogReviewer, LogSource, LogType, MINUTE_IN_MS, Modal, ModalButtonType, ModalSize, ModalType, MultiSwitch, ParamType, PickableItem, PopFailureMark, PopPendingMark, PopSuccessMark, RadioButton, ReactKitErrorCode, SimpleDateChooser, TabBox, ToggleSwitch, Tooltip, Variant, abbreviate, addDBEditorEndpoints, addFatalErrorHandler, alert, avg, canReviewLogs, capitalize, ceilToNumDecimals, combineClassNames, compareArraysByProp, confirm, everyAsync, extractProp, filterAsync, floorToNumDecimals, forEachAsync, forceNumIntoBounds, genCSV, genCommaList, genRouteHandler, getHumanReadableDate, getLocalTimeInfo, getMonthName, getOrdinal, getPartOfDay, getTimeInfoInET, handleError, handleSuccess, idify, initClient, initLogCollection, initServer, isMobileOrTablet, leaveToURL, logClientEvent, makeLinksClickable, mapAsync, onlyKeepLetters, padDecimalZeros, padZerosLeft, parallelLimit, prefixWithAOrAn, prompt, roundToNumDecimals, setClientEventMetadataPopulator, showFatalError, shuffleArray, someAsync, startMinWait, stringsToHumanReadableList, stubServerEndpoint, sum, useForceRender, validateEmail, validatePhoneNumber, validateString, visitEndpointOnAnotherServer, visitServerEndpoint, waitMs };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dce-reactkit",
-  "version": "3.9.4-beta.1",
+  "version": "3.9.5",
   "description": "Shared components for Harvard DCE apps",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/AppWrapper.tsx

@@ -246,23 +246,25 @@ export const confirm = async (
 
 // Stored copies of setters
 let setPromptInfo: (
-  info:
-  | undefined
-  | {
-    title: string;
-    text: string;
-    currentInputFieldText: string,
-    opts: {
-      placeholder?: string,
-      defaultText?: string,
-      confirmButtonText?: string,
-      confirmButtonVariant?: Variant,
-      cancelButtonText?: string,
-      cancelButtonVariant?: Variant,
-      minNumChars?: number,
-      findValidationError?: (text: string) => string | undefined,
-    },
-  },
+  info: (
+    | undefined
+    | {
+      title: string,
+      currentInputFieldText: string,
+      opts: {
+        textAboveInputField?: string,
+        placeholder?: string,
+        defaultText?: string,
+        confirmButtonText?: string,
+        confirmButtonVariant?: Variant,
+        cancelButtonText?: string,
+        cancelButtonVariant?: Variant,
+        minNumChars?: number,
+        findValidationError?: (text: string) => string | undefined,
+        ariaLabel?: string,
+      },
+    }
+  ),
 ) => void;
 
 // Function to call when prompt is closed
@@ -272,29 +274,35 @@ let onPromptClosed: (result: string | null) => void;
  * Show a prompt modal asking the user for input
  * @author Yuen Ler Chow
  * @param title the title text to display at the top of the prompt
- * @param text the text to display in the prompt
  * @param [opts={}] additional options for the prompt dialog
- * @param [opts.placeholder] the placeholder text for the input field
+ * @param [opts.textAboveInputField] the text to display in the prompt
  * @param [opts.defaultText] the default text for the input field
+ * @param [opts.placeholder] the placeholder text for the input field
  * @param [opts.confirmButtonText=Okay] the text of the confirm button
  * @param [opts.confirmButtonVariant=Variant.Dark] the variant of the confirm button
  * @param [opts.cancelButtonText=Cancel] the text of the cancel button
  * @param [opts.cancelButtonVariant=Variant.Secondary] the variant of the cancel button
+ * @param [opts.minNumChars] the minimum number of characters required for
+ *   the input to be valid
+ * @param [opts.findValidationError] a function that takes the input text and
+ *   returns an error message if the input is invalid, returns undefined if the
+ *   input is valid
+ * @param [opts.ariaLabel] the aria label for the input field
  * @returns Promise that resolves with the input string or null if canceled
  */
 export const prompt = async (
   title: string,
-  text: string,
-  currentInputFieldText: string,
   opts?: {
-    placeholder?: string,
+    textAboveInputField?: string,
     defaultText?: string,
+    placeholder?: string,
     confirmButtonText?: string,
     confirmButtonVariant?: Variant,
     cancelButtonText?: string,
     cancelButtonVariant?: Variant,
     minNumChars?: number,
     findValidationError?: (text: string) => string | undefined,
+    ariaLabel?: string,
   },
 ): Promise<string | null> => {
   // Wait for helper to exist
@@ -308,10 +316,11 @@ export const prompt = async (
     while (!resultPassesValidation) {
       // eslint-disable-next-line no-alert
       const result = window.prompt(
-        `${title}\n\n${text}`,
+        `${title}\n\n${opts?.textAboveInputField ?? ''}`,
         opts?.defaultText ?? '',
       );
 
+      // Exit loop if user cancels
       if (result === null) {
         return null;
       }
@@ -331,9 +340,24 @@ export const prompt = async (
 
       // Show validation issue
       if (minNumCharsValidationError || customValidationError) {
+        // Create error message
+        const errorMessage = (
+          [
+            minNumCharsValidationError,
+            customValidationError,
+          ]
+            // Filter out undefined messages
+            .filter((msg) => {
+              return !!msg;
+            })
+            // Join messages with newlines
+            .join('\n')
+        );
+
+        // Show alert
         alert(
           'Invalid Input',
-          `${minNumCharsValidationError ?? ''} ${customValidationError ?? ''}`,
+          errorMessage,
         );
       } else {
         return result;
@@ -351,8 +375,7 @@ export const prompt = async (
     // Show the prompt
     setPromptInfo({
       title,
-      text,
-      currentInputFieldText,
+      currentInputFieldText: (opts?.defaultText ?? ''),
       opts: (opts ?? {}),
     });
   });
@@ -585,22 +608,23 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
 
   // Prompt
   const [promptInfo, setPromptInfoInner] = useState<
-  | undefined
-  | {
-    title: string,
-    text: string,
-    currentInputFieldText: string,
-    opts: {
-      placeholder?: string,
-      defaultText?: string,
-      confirmButtonText?: string,
-      confirmButtonVariant?: Variant,
-      cancelButtonText?: string,
-      cancelButtonVariant?: Variant,
-      minNumChars?: number,
-      findValidationError?: (text: string) => string | undefined,
+    | undefined
+    | {
+      title: string,
+      currentInputFieldText: string,
+      opts: {
+        textAboveInputField?: string,
+        placeholder?: string,
+        defaultText?: string,
+        confirmButtonText?: string,
+        confirmButtonVariant?: Variant,
+        cancelButtonText?: string,
+        cancelButtonVariant?: Variant,
+        minNumChars?: number,
+        findValidationError?: (text: string) => string | undefined,
+        ariaLabel?: string,
+      }
     }
-  }
   >(undefined);
   setPromptInfo = setPromptInfoInner;
 
@@ -691,9 +715,9 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
 
     modal = (
       <ModalForWrapper
-        key={`prompt-${promptInfo.title}-${promptInfo.text}`}
+        key={`prompt-${promptInfo.title}`}
         title={promptInfo.title}
-        // only show the cancel button if there is a validation error
+        // Don't show ok button if there is a validation error
         type={(
           (customValidationError || minNumCharsValidationError)
             ? ModalType.Cancel
@@ -704,14 +728,17 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
         cancelLabel={promptInfo.opts.cancelButtonText}
         cancelVariant={promptInfo.opts.cancelButtonVariant}
         onClose={(buttonType) => {
+          // Get result
           const result = (
             buttonType === ModalButtonType.Okay
               ? promptInfo.currentInputFieldText
               : null
           );
 
+          // Close prompt
           setPromptInfo(undefined);
 
+          // Call handler
           if (onPromptClosed) {
             onPromptClosed(result);
           }
@@ -719,10 +746,19 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
         onTopOfOtherModals
         dontAllowBackdropExit
       >
-        <div className="d-flex flex-column align-items-center">
-          <p>{promptInfo.text}</p>
+        <div>
+          {/* Message above input field */}
+          {promptInfo.opts.textAboveInputField && (
+            <div>
+              {promptInfo.opts.textAboveInputField}
+            </div>
+          )}
+
+          {/* Input field */}
           <input
             type="text"
+            className="form-control"
+            aria-label={promptInfo.opts.ariaLabel}
             placeholder={promptInfo.opts.placeholder}
             value={promptInfo.currentInputFieldText}
             onChange={(e) => {
@@ -731,14 +767,18 @@ const AppWrapper: React.FC<Props> = (props: Props): React.ReactElement => {
                 currentInputFieldText: e.target.value,
               });
             }}
+            // eslint-disable-next-line jsx-a11y/no-autofocus
+            autoFocus
           />
+
+          {/* Validation errors */}
           {minNumCharsValidationError && (
-            <div className="text-danger bg-danger bg-opacity-25 p-2 m-1 rounded">
+            <div className="text-danger fw-bold mt-2">
               {minNumCharsValidationError}
             </div>
           )}
           {customValidationError && (
-            <div className="text-danger bg-danger bg-opacity-25 p-2 m-1 rounded">
+            <div className="text-danger fw-bold mt-2">
               {customValidationError}
             </div>
           )}

package/src/components/LogReviewer.tsx

@@ -959,10 +959,23 @@ const LogReviewer: React.FC<Props> = (props) => {
         const { year, month } = toLoad[i];
 
         // Load
-        const logs = await visitServerEndpoint({
-          path: `${LOG_REVIEW_ROUTE_PATH_PREFIX}/years/${year}/months/${month}`,
-          method: 'GET',
-        });
+        let logs: Log[] = [];
+        let pageNumber = 1;
+        let hasAnotherPage = true;
+
+        while (hasAnotherPage) {
+          const response = await visitServerEndpoint({
+            path: `${LOG_REVIEW_ROUTE_PATH_PREFIX}/years/${year}/months/${month}`,
+            method: 'GET',
+            params: {
+              pageNumber,
+            },
+          });
+
+          logs = logs.concat(response.items);
+          hasAnotherPage = response.hasAnotherPage;
+          pageNumber += 1;
+        }
 
         // Add to map
         if (!logMap[year]) {

package/src/index.ts

@@ -1,6 +1,7 @@
 // Import components
 import AppWrapper, {
   alert,
+  prompt,
   confirm,
   showFatalError,
   addFatalErrorHandler,
@@ -148,6 +149,7 @@ export {
   Dropdown,
   // Global functions
   alert,
+  prompt,
   confirm,
   showFatalError,
   // Errors

package/src/server/initLogCollection.ts

@@ -14,6 +14,11 @@ const initLogCollection = (Collection: any) => {
         'context',
         'subcontext',
         'tags',
+        'year',
+        'month',
+        'day',
+        'hour',
+        'type',
       ],
     },
   );

package/src/server/initServer.ts

@@ -246,12 +246,14 @@ const initServer = (
       paramTypes: {
         year: ParamType.Int,
         month: ParamType.Int,
+        pageNumber: ParamType.Int,
       },
       handler: async ({ params }) => {
         // Get user info
         const {
           year,
           month,
+          pageNumber,
           userId,
           isAdmin,
         } = params;
@@ -266,13 +268,17 @@ const initServer = (
         }
 
         // Query for logs
-        const logs: Log[] = await _logCollection.find({
-          year,
-          month,
+        const response = await _logCollection.findPaged({
+          query: {
+            year,
+            month,
+          },
+          perPage: 1000,
+          pageNumber,
         });
 
-        // Return logs
-        return logs;
+        // Return response
+        return response;
       },
     }),
   );