dce-reactkit 3.2.2-beta.33 → 3.2.2-beta.35

package/package.json

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

package/src/components/CSVDownloadButton.tsx

@@ -84,8 +84,8 @@ const CSVDownloadButton: React.FC<Props> = (props) => {
         <>
           <FontAwesomeIcon
             icon={faCloudDownloadAlt}
-            className="mr-2"
           />
+          {' '}
           Download CSV
         </>
       )}

package/src/components/IntelliTable.tsx

@@ -30,6 +30,7 @@ import Modal from './Modal';
 import ModalType from '../types/ModalType';
 import CheckboxButton from './CheckboxButton';
 import CSVDownloadButton from './CSVDownloadButton';
+import Variant from '../types/Variant';
 
 /*------------------------------------------------------------------------*/
 /*                                  Types                                 */
@@ -234,6 +235,7 @@ const IntelliTable: React.FC<Props> = (props) => {
             type: ActionType.ToggleColVisCusModalVisibility,
           });
         }}
+        okayVariant={Variant.Light}
       >
         {
           columns.map((column) => {
@@ -241,6 +243,7 @@ const IntelliTable: React.FC<Props> = (props) => {
               <CheckboxButton
                 key={column.param}
                 id={`IntelliTable-${id}-toggle-visibility-${column.param}`}
+                className="mb-2"
                 text={column.title}
                 onChanged={() => {
                   dispatch({
@@ -250,6 +253,8 @@ const IntelliTable: React.FC<Props> = (props) => {
                 }}
                 checked={columnVisibilityMap[column.param]}
                 ariaLabel={`show "${column.title}" column`}
+                checkedVariant={Variant.Light}
+                uncheckedVariant={Variant.Secondary}
               />
             );
           })
@@ -302,8 +307,12 @@ const IntelliTable: React.FC<Props> = (props) => {
             scope="col"
             id={`IntelliTable-${id}-header-${column.param}`}
             className="text-start"
+            style={{
+              borderRight: '0.05rem solid #555',
+              borderLeft: '0.05rem solid #555',
+            }}
           >
-            <div className="d-flex align-items-center justify-content-center flex-row h-100">
+            <div className="d-flex align-items-center justify-content-start flex-row h-100">
               {/* Title */}
               <span className="text-nowrap">
                 {column.title}
@@ -351,6 +360,27 @@ const IntelliTable: React.FC<Props> = (props) => {
       const aVal = a[sortColumnParam];
       const bVal = b[sortColumnParam];
 
+      // Auto-sort undefined and null to end of list
+      if (
+        (aVal === undefined || aVal === null)
+        || (bVal === undefined || bVal === null)
+      ) {
+        // At least one was undefined
+        if (
+          (aVal === undefined || aVal === null)
+          && (bVal === undefined || bVal === null)
+        ) {
+          // Both undefined
+          return 0;
+        }
+        if (aVal === undefined || aVal === null) {
+          // First was undefined
+          return 1;
+        }
+        // Second was undefined
+        return -1;
+      }
+
       // Sort differently based on the data type
       // > Boolean
       if (paramType === ParamType.Boolean) {
@@ -376,10 +406,10 @@ const IntelliTable: React.FC<Props> = (props) => {
       // > String
       if (paramType === ParamType.String) {
         if (aVal < bVal) {
-          return (descending ? -1 : 1);
+          return (descending ? 1 : -1);
         }
         if (aVal > bVal) {
-          return (descending ? 1 : -1);
+          return (descending ? -1 : 1);
         }
         return 0;
       }
@@ -473,7 +503,11 @@ const IntelliTable: React.FC<Props> = (props) => {
           title = String(fullValue);
         } else if (column.type === ParamType.String) {
           fullValue = String(value).trim();
-          const noValue = (String(fullValue).trim().length === 0);
+          const noValue = (
+            value === undefined
+            || value === null
+            || String(fullValue).trim().length === 0
+          );
           visibleValue = (
             noValue
               ? (
@@ -507,6 +541,10 @@ const IntelliTable: React.FC<Props> = (props) => {
           <td
             key={`${datum.id}-${column.param}`}
             title={title}
+            style={{
+              borderRight: '0.05rem solid #555',
+              borderLeft: '0.05rem solid #555',
+            }}
           >
             {visibleValue}
           </td>
@@ -553,8 +591,10 @@ const IntelliTable: React.FC<Props> = (props) => {
   // Build main UI
   return (
     <div className={`IntelliTable-container-${id}`}>
+      {/* Modal */}
+      {modal}
       {/* Header */}
-      <div className="d-flex align-items-center justify-content-center">
+      <div className="d-flex align-items-center justify-content-start">
         {/* Title */}
         <h3 className="m-0">
           {title}
@@ -595,7 +635,7 @@ const IntelliTable: React.FC<Props> = (props) => {
       </div>
       {/* Table */}
       <div
-        className={`IntelliTable-table-${id}`}
+        className={`IntelliTable-table-${id} mt-2`}
         style={{
           overflowX: 'auto',
         }}

package/src/components/LogReviewer.tsx

@@ -592,8 +592,8 @@ const LogReviewer: React.FC<Props> = (props) => {
 
   // Create initial tag filter state
   const initTagFilterState: TagFilterState = {};
-  Object.values(LogMetadata.Tag ?? {}).forEach((tagValue) => {
-    initTagFilterState[tagValue] = false;
+  Object.keys(LogMetadata.Tag ?? {}).forEach((tag) => {
+    initTagFilterState[tag] = false;
   });
 
   // Create advanced filter state
@@ -1055,7 +1055,7 @@ const LogReviewer: React.FC<Props> = (props) => {
         filterDrawer = (
           <TabBox title="Tags">
             {
-              Object.keys(tagFilterState)
+              Object.keys(LogMetadata.Tag ?? {})
                 .map((tag, i) => {
                   const description = genHumanReadableName(tag);
                   return (
@@ -1966,13 +1966,13 @@ const LogReviewer: React.FC<Props> = (props) => {
         type: ParamType.Boolean,
       },
       {
-        title: 'Teaching Staff',
+        title: 'Teaching Staff?',
         param: 'isTTM',
         type: ParamType.Boolean,
         startsHidden: true,
       },
       {
-        title: 'Admin',
+        title: 'Admin?',
         param: 'isAdmin',
         type: ParamType.Boolean,
         startsHidden: true,
@@ -2007,7 +2007,7 @@ const LogReviewer: React.FC<Props> = (props) => {
         startsHidden: true,
       },
       {
-        title: 'Mobile',
+        title: 'Mobile?',
         param: 'device.isMobile',
         type: ParamType.Boolean,
         startsHidden: true,