dce-reactkit 4.0.1 → 4.1.0

package/src/components/Pagination.tsx

@@ -0,0 +1,172 @@
+// Import React
+import React from 'react';
+
+// Import FontAwesome
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faArrowLeft, faArrowRight } from '@fortawesome/free-solid-svg-icons';
+
+/*------------------------------------------------------------------------*/
+/* -------------------------------- Types ------------------------------- */
+/*------------------------------------------------------------------------*/
+
+// Props
+type Props = {
+  // Current page number (1-indexed)
+  currentPage: number,
+  // Total number of pages
+  numPages: number,
+  // True if a page change is in progress (to disable buttons)
+  loading?: boolean,
+  /**
+   * Handler for when page is changed
+   * @param page - the new page number
+   */
+  onPageChanged: (page: number) => void,
+};
+
+/*------------------------------------------------------------------------*/
+/* ------------------------------ Component ----------------------------- */
+/*------------------------------------------------------------------------*/
+
+const Pagination: React.FC<Props> = (props: Props) => {
+  /*------------------------------------------------------------------------*/
+  /* -------------------------------- Setup ------------------------------- */
+  /*------------------------------------------------------------------------*/
+
+  /* -------------- Props ------------- */
+
+  // Destructure props
+  const {
+    currentPage,
+    numPages,
+    loading = false,
+    onPageChanged,
+  } = props;
+
+  /*------------------------------------------------------------------------*/
+  /* ------------------------------- Render ------------------------------- */
+  /*------------------------------------------------------------------------*/
+
+  // Compute pages to display
+  const pages: number[] = [];
+  const delta = 2; // how many pages to show on either side of current
+  let start = Math.max(1, currentPage - delta);
+  let end = Math.min(numPages, currentPage + delta);
+
+  // If we are too close to the beginning or end, shift the window.
+  if (currentPage - delta < 1) {
+    end = Math.min(numPages, end + (1 - (currentPage - delta)));
+  }
+  if (currentPage + delta > numPages) {
+    start = Math.max(1, start - ((currentPage + delta) - numPages));
+  }
+  for (let i = start; i <= end; i++) {
+    pages.push(i);
+  }
+
+  // Render
+  return (
+    <nav
+      aria-label="Page navigation for logs"
+      className="mt-3"
+    >
+      <ul className="pagination justify-content-center">
+        {/* Previous Button */}
+        <li className={`page-item ${(currentPage <= 1 || loading) ? 'disabled' : ''}`}>
+          <button
+            type="button"
+            className="page-link"
+            onClick={() => { return onPageChanged(currentPage - 1); }}
+            disabled={currentPage <= 1 || loading}
+            aria-label="Go to previous page"
+          >
+            <FontAwesomeIcon icon={faArrowLeft} />
+            {' '}
+            Prev
+          </button>
+        </li>
+
+        {/* First page (if needed) */}
+        {(currentPage > 3 && pages[0] !== 1) && (
+          <li className="page-item">
+            <button
+              type="button"
+              className="page-link"
+              onClick={() => { return onPageChanged(1); }}
+              disabled={loading}
+              aria-label="Go to page 1"
+            >
+              1
+            </button>
+          </li>
+        )}
+
+        {/* Ellipsis if gap between first page and start of window */}
+        {currentPage > 4 && (
+          <li className="page-item disabled">
+            <span className="page-link">...</span>
+          </li>
+        )}
+
+        {/* Page numbers */}
+        {pages.map((pageNum) => {
+          return (
+            <li key={pageNum} className={`page-item ${pageNum === currentPage ? 'active' : ''}`}>
+              <button
+                type="button"
+                className="page-link"
+                onClick={() => { return onPageChanged(pageNum); }}
+                disabled={loading}
+                aria-label={`Go to page ${pageNum}`}
+              >
+                {pageNum}
+              </button>
+            </li>
+          );
+        })}
+
+        {/* Ellipsis if gap between end of window and last page */}
+        {currentPage < numPages - 3 && (
+          <li className="page-item disabled">
+            <span className="page-link">...</span>
+          </li>
+        )}
+
+        {/* Last page (if needed) */}
+        {(
+          currentPage < numPages - 2
+          && pages[pages.length - 1] !== numPages
+        ) && (
+          <li className="page-item">
+            <button
+              type="button"
+              className="page-link"
+              onClick={() => { return onPageChanged(numPages); }}
+              disabled={loading}
+              aria-label="Go to last page"
+            >
+              {numPages}
+            </button>
+          </li>
+        )}
+
+        {/* Next Button */}
+        <li className={`page-item ${(currentPage >= numPages || loading) ? 'disabled' : ''}`}>
+          <button
+            type="button"
+            className="page-link"
+            onClick={() => { return onPageChanged(currentPage + 1); }}
+            disabled={currentPage >= numPages || loading}
+            aria-label="Go to next page"
+          >
+            Next
+            {' '}
+            <FontAwesomeIcon icon={faArrowRight} />
+          </button>
+        </li>
+      </ul>
+    </nav>
+  );
+};
+
+export default Pagination;

package/src/constants/LOG_REVIEW_GET_LOGS_ROUTE.ts

@@ -0,0 +1,9 @@
+import ROUTE_PATH_PREFIX from './ROUTE_PATH_PREFIX';
+
+/**
+ * Path of the route for getting logs for log review
+ * @author Gabe Abrams
+ */
+const LOG_REVIEW_GET_LOGS_ROUTE = `/admin${ROUTE_PATH_PREFIX}/logs`;
+
+export default LOG_REVIEW_GET_LOGS_ROUTE;

package/src/helpers/cloneDeep.ts

@@ -0,0 +1,11 @@
+import clone from 'nanoclone';
+
+/**
+ * Deeply clones an object
+ * @author Yuen Ler Chow
+ * @param obj the object to clone
+ * @returns a deep clone of the object
+ */
+const cloneDeep: <T>(obj: T) => T = clone;
+
+export default cloneDeep;

package/src/index.ts

@@ -42,6 +42,7 @@ import DAY_IN_MS from './constants/DAY_IN_MS';
 import LOG_REVIEW_ROUTE_PATH_PREFIX from './constants/LOG_REVIEW_ROUTE_PATH_PREFIX';
 import LOG_ROUTE_PATH from './constants/LOG_ROUTE_PATH';
 import LOG_REVIEW_STATUS_ROUTE from './constants/LOG_REVIEW_STATUS_ROUTE';
+import LOG_REVIEW_GET_LOGS_ROUTE from './constants/LOG_REVIEW_GET_LOGS_ROUTE';
 
 // Import dynamic constants
 import DynamicWord from './dynamicConstants/DynamicWord';
@@ -93,6 +94,7 @@ import someAsync from './helpers/asyncArrayFunctions/someAsync';
 import capitalize from './helpers/capitalize';
 import shuffleArray from './helpers/shuffleArray';
 import getWordCount from './helpers/getWordCount';
+import cloneDeep from './helpers/cloneDeep';
 
 // Import types
 import ParamType from './types/ParamType';
@@ -115,6 +117,7 @@ import LogLevel from './types/LogLevel';
 import IntelliTableColumn from './types/IntelliTableColumn';
 import DropdownItemType from './types/DropdownItemType';
 import ReactKitErrorCode from './types/ReactKitErrorCode';
+import LogReviewerFilterState from './types/LogReviewerFilterState';
 
 // Component-specific-types
 import PickableItem from './components/ItemPicker/types/PickableItem';
@@ -164,6 +167,7 @@ export {
   LOG_REVIEW_ROUTE_PATH_PREFIX,
   LOG_ROUTE_PATH,
   LOG_REVIEW_STATUS_ROUTE,
+  LOG_REVIEW_GET_LOGS_ROUTE,
   // Dynamic Constants
   DynamicWord,
   // Helpers
@@ -208,6 +212,7 @@ export {
   capitalize,
   shuffleArray,
   getWordCount,
+  cloneDeep,
   // Client helpers
   initClient,
   visitServerEndpoint,
@@ -238,6 +243,7 @@ export {
   LogLevel,
   IntelliTableColumn,
   DropdownItemType,
+  LogReviewerFilterState,
   // Component-specific-types
   PickableItem,
   DBEntry,

package/src/types/LogReviewerFilterState/ActionErrorFilterState.ts

@@ -0,0 +1,24 @@
+import LogType from '../LogType';
+
+/**
+ * Action filter state (only relevant for action logs)
+ * @author Yuen Ler Chow
+ */
+type ActionErrorFilterState = {
+  // Required type of log
+  type: LogType | undefined, // If undefined, no filter applied
+  // Query for error message (only relevant if type is error)
+  errorMessage: string, // If empty, no filter applied
+  // Query for error code (only relevant if type is error)
+  errorCode: string, // If empty, no filter applied
+  // Action targets to include (only relevant if type is action)
+  target: {
+    [k: string]: boolean
+  },
+  // Action types to include (only relevant if type is action)
+  action: {
+    [k: string]: boolean
+  },
+};
+
+export default ActionErrorFilterState;

package/src/types/LogReviewerFilterState/AdvancedFilterState.ts

@@ -0,0 +1,36 @@
+import LogSource from '../LogSource';
+
+/**
+ * Advanced filter state
+ * @author Yuen Ler Chow
+ */
+type AdvancedFilterState = {
+  // Query for user first name (case insensitive)
+  userFirstName: string, // If empty, no filter applied
+  // Query for user last name (case insensitive)
+  userLastName: string, // If empty, no filter applied
+  // Query for user email (case insensitive)
+  userEmail: string, // If empty, no filter applied
+  // Match for userId (numerical)
+  userId: string, // If empty, no filter applied
+  // If true, include students
+  includeLearners: boolean,
+  // If true, include ttms
+  includeTTMs: boolean,
+  // If true, include admins
+  includeAdmins: boolean,
+  // Match for courseId (numerical)
+  courseId: string, // If empty, no filter applied
+  // Query for course name (case insensitive)
+  courseName: string, // If empty, no filter applied
+  // Required isMobile value
+  isMobile: (true | false | undefined), // If undefined, no filter applied
+  // Required log source value
+  source: LogSource | undefined, // If undefined, no filter applied
+  // Query for route path (only relevant if source is server)
+  routePath: string, // If empty, no filter applied
+  // Query for route template (only relevant if source is server)
+  routeTemplate: string, // If empty, no filter applied
+};
+
+export default AdvancedFilterState;

package/src/types/LogReviewerFilterState/ContextFilterState.ts

@@ -0,0 +1,16 @@
+/**
+ * Context filter state
+ * @author Yuen Ler Chow
+ */
+type ContextFilterState = {
+  [k: string]: (
+    // No subcontexts
+    | boolean // True if selected
+    // Includes subcontexts
+    | {
+      [k: string]: boolean // True if selected
+    }
+  )
+};
+
+export default ContextFilterState;

package/src/types/LogReviewerFilterState/DateFilterState.ts

@@ -0,0 +1,26 @@
+/**
+ * Date filter state
+ * @author Yuen Ler Chow
+ */
+type DateFilterState = {
+  // Current start date
+  startDate: {
+    // Full year
+    year: number,
+    // 1-indexed month
+    month: number,
+    // 1-indexed day
+    day: number,
+  },
+  // Current end date
+  endDate: {
+    // Full year
+    year: number,
+    // 1-indexed month
+    month: number,
+    // 1-indexed day
+    day: number,
+  },
+};
+
+export default DateFilterState;

package/src/types/LogReviewerFilterState/TagFilterState.ts

@@ -0,0 +1,9 @@
+/**
+ * Tag filter state
+ * @author Yuen Ler Chow
+ */
+type TagFilterState = {
+  [k: string]: boolean // tag => true if in the list of tags to show
+};
+
+export default TagFilterState;

package/src/types/LogReviewerFilterState/index.ts

@@ -0,0 +1,24 @@
+import DateFilterState from './DateFilterState';
+import ContextFilterState from './ContextFilterState';
+import TagFilterState from './TagFilterState';
+import ActionErrorFilterState from './ActionErrorFilterState';
+import AdvancedFilterState from './AdvancedFilterState';
+
+/**
+ * A bundle of filter state objects for each type of filter
+ * @author Gabe Abrams
+ */
+type LogReviewerFilterState = {
+  // Date filter state
+  dateFilterState: DateFilterState,
+  // Context filter state
+  contextFilterState: ContextFilterState,
+  // Tag filter state
+  tagFilterState: TagFilterState,
+  // Action error filter state
+  actionErrorFilterState: ActionErrorFilterState,
+  // Advanced filter state
+  advancedFilterState: AdvancedFilterState,
+};
+
+export default LogReviewerFilterState;