dce-reactkit 3.2.2-beta.5 → 3.2.2-beta.51

package/src/components/IntelliTable.tsx

@@ -30,6 +30,8 @@ import Modal from './Modal';
 import ModalType from '../types/ModalType';
 import CheckboxButton from './CheckboxButton';
 import CSVDownloadButton from './CSVDownloadButton';
+import Variant from '../types/Variant';
+import { alert } from './AppWrapper';
 
 /*------------------------------------------------------------------------*/
 /*                                  Types                                 */
@@ -50,6 +52,8 @@ type Props = {
   }[],
   // Column information
   columns: IntelliTableColumn[],
+  // Name of the CSV file. If excluded, title is used
+  csvName?: string,
 };
 
 // Sort types
@@ -86,9 +90,13 @@ enum ActionType {
   // Toggle sort column param
   ToggleSortColumn = 'toggle-sort-column',
   // Toggle the visibility of a column
-  ToggleColumnVisibility = 'toggle-column-visibility',
+  UpdateColumnVisibility = 'update-column-visibility',
   // Toggle the column visibility customization modal
   ToggleColVisCusModalVisibility = 'toggle-col-vis-cus-modal-visibility',
+  // Show all columns
+  ShowAllColumns = 'show-all-columns',
+  // Hide all columns
+  HideAllColumns = 'hide-all-columns',
 }
 
 // Action definitions
@@ -101,14 +109,18 @@ type Action = (
   }
   | {
     // Action type
-    type: ActionType.ToggleColumnVisibility,
-    // Param for the column to toggle
+    type: ActionType.UpdateColumnVisibility,
+    // Param for the column to update
     param: string,
+    // If true, make the column visible
+    visible: boolean,
   }
   | {
     // Action type
     type: (
       | ActionType.ToggleColVisCusModalVisibility
+      | ActionType.ShowAllColumns
+      | ActionType.HideAllColumns
     ),
   }
 );
@@ -144,9 +156,9 @@ const reducer = (state: State, action: Action): State => {
         sortType: SortType.Ascending,
       };
     }
-    case ActionType.ToggleColumnVisibility: {
+    case ActionType.UpdateColumnVisibility: {
       const { columnVisibilityMap } = state;
-      columnVisibilityMap[action.param] = !columnVisibilityMap[action.param];
+      columnVisibilityMap[action.param] = action.visible;
       return {
         ...state,
         columnVisibilityMap,
@@ -158,6 +170,26 @@ const reducer = (state: State, action: Action): State => {
         columnVisibilityCustomizationModalVisible: !state.columnVisibilityCustomizationModalVisible,
       };
     }
+    case ActionType.ShowAllColumns: {
+      const { columnVisibilityMap } = state;
+      Object.keys(columnVisibilityMap).forEach((param) => {
+        columnVisibilityMap[param] = true;
+      });
+      return {
+        ...state,
+        columnVisibilityMap,
+      };
+    }
+    case ActionType.HideAllColumns: {
+      const { columnVisibilityMap } = state;
+      Object.keys(columnVisibilityMap).forEach((param) => {
+        columnVisibilityMap[param] = false;
+      });
+      return {
+        ...state,
+        columnVisibilityMap,
+      };
+    }
     default: {
       return state;
     }
@@ -179,10 +211,26 @@ const IntelliTable: React.FC<Props> = (props) => {
   const {
     title,
     id,
-    data,
     columns,
   } = props;
 
+  // Get data, show empty row if none
+  const data = (
+    (props.data && props.data.length > 0)
+      ? props.data
+      : [{ id: 'empty-row' }]
+  );
+
+  // Get CSV filename
+  let filename = `${title}.csv`;
+  if (props.csvName) {
+    filename = (
+      props.csvName.endsWith('.csv')
+        ? props.csvName
+        : `${props.csvName}.csv`
+    );
+  }
+
   /* -------------- State ------------- */
 
   // Initial state
@@ -230,30 +278,77 @@ const IntelliTable: React.FC<Props> = (props) => {
         type={ModalType.Okay}
         title="Choose columns to show:"
         onClose={() => {
+          const noColumnsSelected = (
+            Object.values(columnVisibilityMap)
+              .every((isSelected) => {
+                return !isSelected;
+              })
+          );
+          if (noColumnsSelected) {
+            return alert(
+              'Choose at least one column',
+              'To continue, you have to choose at least one column to show'
+            );
+          }
           dispatch({
             type: ActionType.ToggleColVisCusModalVisibility,
           });
         }}
+        okayVariant={Variant.Light}
       >
+        {/* Columns */}
         {
           columns.map((column) => {
             return (
               <CheckboxButton
                 key={column.param}
                 id={`IntelliTable-${id}-toggle-visibility-${column.param}`}
+                className="mb-2"
                 text={column.title}
-                onChanged={() => {
+                onChanged={(checked) => {
                   dispatch({
-                    type: ActionType.ToggleColumnVisibility,
+                    type: ActionType.UpdateColumnVisibility,
                     param: column.param,
+                    visible: checked,
                   });
                 }}
                 checked={columnVisibilityMap[column.param]}
-                ariaLabel={`show "${column.title}" column`}
+                ariaLabel={`show "${column.title}" column in the ${title} table`}
+                checkedVariant={Variant.Light}
+                uncheckedVariant={Variant.Secondary}
               />
             );
           })
         }
+        <div className="mt-3">
+          Or you can:
+        </div>
+        <button
+          type="button"
+          id={`IntelliTable-${id}-select-all-columns`}
+          className="btn btn-secondary me-2"
+          aria-label={`show all columns in the ${title} table`}
+          onClick={() => {
+            dispatch({
+              type: ActionType.ShowAllColumns,
+            });
+          }}
+        >
+          Select All
+        </button>
+        <button
+          type="button"
+          id={`IntelliTable-${id}-select-none-columns`}
+          className="btn btn-secondary"
+          aria-label={`hide all columns in the ${title} table`}
+          onClick={() => {
+            dispatch({
+              type: ActionType.HideAllColumns,
+            });
+          }}
+        >
+          Deselect All
+        </button >
       </Modal>
     );
   }
@@ -272,12 +367,14 @@ const IntelliTable: React.FC<Props> = (props) => {
         // Custom info based on current sort type
         let sortButtonAriaLabel;
         let sortIcon = faSort;
+        let sortingByThisColumn = false;
         if (!sortColumnParam) {
           // Not being sorted yet
           sortButtonAriaLabel = `sort ascending by ${column.title}`;
           sortIcon = faSort;
         } else if (column.param === sortColumnParam) {
           // Already sorted by this column
+          sortingByThisColumn = true;
           if (sortType === SortType.Ascending) {
             // Sorted ascending
             sortButtonAriaLabel = `sort descending by ${column.title}`;
@@ -299,17 +396,23 @@ const IntelliTable: React.FC<Props> = (props) => {
             key={column.param}
             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 */}
-              <h4 className="m-0">
+              <span className="text-nowrap">
                 {column.title}
-              </h4>
+              </span>
               {/* Buttons */}
               <div>
                 <button
                   type="button"
-                  className="btn btn-light"
+                  id={`IntelliTable-${id}-sort-by-${column.param}-button`}
+                  className={`btn btn-${sortingByThisColumn ? 'light' : 'secondary'} btn-sm ms-1 ps-1 pe-1 pt-0 pb-0`}
                   aria-label={sortButtonAriaLabel}
                   onClick={() => {
                     dispatch({
@@ -347,6 +450,33 @@ const IntelliTable: React.FC<Props> = (props) => {
       const aVal = a[sortColumnParam];
       const bVal = b[sortColumnParam];
 
+      // Tiebreaker sort by timestamp, most recent first (used if tied)
+      const tiebreaker = (
+        (b.timestamp ?? 0)
+        - (a.timestamp ?? 0)
+      );
+
+      // 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 tiebreaker;
+        }
+        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) {
@@ -356,7 +486,7 @@ const IntelliTable: React.FC<Props> = (props) => {
         if (!aVal && bVal) {
           return (descending ? 1 : -1);
         }
-        return 0;
+        return tiebreaker;
       }
       // > Number
       if (
@@ -372,12 +502,12 @@ 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;
+        return tiebreaker;
       }
       // > JSON
       if (paramType === ParamType.JSON) {
@@ -399,7 +529,7 @@ const IntelliTable: React.FC<Props> = (props) => {
       }
 
       // No sort
-      return 0;
+      return tiebreaker;
     });
   }
 
@@ -431,16 +561,19 @@ const IntelliTable: React.FC<Props> = (props) => {
             noValue
               ? (
                 <FontAwesomeIcon
-                  icon={faCheckCircle}
+                  icon={faMinus}
                 />
               )
               : (
                 <FontAwesomeIcon
-                  icon={faXmarkCircle}
+                  icon={fullValue ? faCheckCircle : faXmarkCircle}
                 />
               )
           );
           title = (fullValue ? 'True' : 'False');
+          if (noValue) {
+            title = 'Empty Cell';
+          }
         } else if (column.type === ParamType.Int) {
           fullValue = Number.parseInt(value, 10);
           const noValue = Number.isNaN(fullValue);
@@ -454,6 +587,9 @@ const IntelliTable: React.FC<Props> = (props) => {
               : fullValue
           );
           title = String(fullValue);
+          if (noValue) {
+            title = 'Empty Cell';
+          }
         } else if (column.type === ParamType.Float) {
           fullValue = Number.parseFloat(value);
           const noValue = Number.isNaN(fullValue);
@@ -467,9 +603,16 @@ const IntelliTable: React.FC<Props> = (props) => {
               : roundToNumDecimals(fullValue as number, 2)
           );
           title = String(fullValue);
+          if (noValue) {
+            title = 'Empty Cell';
+          }
         } else if (column.type === ParamType.String) {
           fullValue = String(value).trim();
-          const noValue = (value.trim().length) === 0;
+          const noValue = (
+            value === undefined
+            || value === null
+            || String(fullValue).trim().length === 0
+          );
           visibleValue = (
             noValue
               ? (
@@ -480,6 +623,9 @@ const IntelliTable: React.FC<Props> = (props) => {
               : fullValue
           );
           title = `"${value}"`;
+          if (noValue) {
+            title = 'Empty Cell';
+          }
         } else if (column.type === ParamType.JSON) {
           fullValue = JSON.stringify(value);
           const noValue = (
@@ -496,6 +642,7 @@ const IntelliTable: React.FC<Props> = (props) => {
               )
               : fullValue
           );
+          title="JSON Object"
         }
 
         // Create UI
@@ -503,6 +650,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>
@@ -543,14 +694,18 @@ const IntelliTable: React.FC<Props> = (props) => {
   // Build CSV
   const csv = genCSV(
     data,
-    columns,
+    columns.filter((column) => {
+      return columnVisibilityMap[column.param];
+    }),
   );
 
   // 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}
@@ -561,13 +716,13 @@ const IntelliTable: React.FC<Props> = (props) => {
           <CSVDownloadButton
             aria-label={`download data as csv for ${title}`}
             id={`IntelliTable-${id}-download-as-csv`}
-            filename={`${title}.csv`}
+            filename={filename}
             csv={csv}
           />
           {/* Show/Hide Columns */}
           <button
             type="button"
-            className="btn btn-secondary"
+            className="btn btn-secondary ms-2"
             aria-label={`show panel for customizing which columns show in table ${title}`}
             id={`IntelliTable-${id}-show-column-customization-modal`}
             onClick={() => {
@@ -591,7 +746,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/ItemPicker/NestableItemList.tsx

@@ -1,6 +1,7 @@
 /**
  * Reusable nested item picker
  * @author Yuen Ler Chow
+ * @author Gabe Abrams
  */
 
 // Import React
@@ -43,36 +44,46 @@ type Props = {
 /* -------- State Definition -------- */
 
 type State = {
-  // True if children are being shown
-  isShowingItems: boolean,
+  // Map of children that are expanded
+  childExpanded: {
+    [k: string]: boolean
+  },
 };
 
 /* ------------- Actions ------------ */
 
 // Types of actions
 enum ActionType {
-  // Toggle whether the children are being shown
-  ToggleItems = 'toggle-items',
+  // Toggle whether a child are being shown
+  ToggleChild = 'toggle-child',
 }
 
 // Action definitions
 type Action = (
   | {
     // Action type
-    type: ActionType.ToggleItems,
+    type: ActionType.ToggleChild,
+    // Id of the child to show
+    id: (string | number),
   }
 );
 
 /**
  * Reducer that executes actions
- * @author Yuen Ler Chow
+ * @author Gabe Abrams
  * @param state current state
  * @param action action to execute
  */
 const reducer = (state: State, action: Action): State => {
   switch (action.type) {
-    case ActionType.ToggleItems: {
-      return { isShowingItems: !state.isShowingItems };
+    case ActionType.ToggleChild: {
+      return {
+        ...state,
+        childExpanded: {
+          ...state.childExpanded,
+          [String(action.id)]: !state.childExpanded[String(action.id)],
+        },
+      };
     }
     default: {
       return state;
@@ -99,9 +110,15 @@ const NestableItemList: React.FC<Props> = (props) => {
 
   /* -------------- State ------------- */
 
+  // Create initial map of child expanded booleans
+  const initChildExpanded: { [k: string]: boolean } = {};
+  items.forEach((item) => {
+    initChildExpanded[String(item.id)] = false;
+  });
+
   // Initial state
   const initialState: State = {
-    isShowingItems: false,
+    childExpanded: initChildExpanded,
   };
 
   // Initialize state
@@ -109,7 +126,7 @@ const NestableItemList: React.FC<Props> = (props) => {
 
   // Destructure common state
   const {
-    isShowingItems,
+    childExpanded,
   } = state;
 
   /*------------------------------------------------------------------------*/
@@ -231,13 +248,14 @@ const NestableItemList: React.FC<Props> = (props) => {
                     type="button"
                     onClick={() => {
                       dispatch({
-                        type: ActionType.ToggleItems,
+                        type: ActionType.ToggleChild,
+                        id: item.id,
                       });
                     }}
-                    aria-label={`${isShowingItems ? 'Hide' : 'Show'} items in ${item.name}`}
+                    aria-label={`${childExpanded[item.id] ? 'Hide' : 'Show'} items in ${item.name}`}
                   >
                     <FontAwesomeIcon
-                      icon={isShowingItems ? faChevronDown : faChevronRight}
+                      icon={childExpanded[item.id] ? faChevronDown : faChevronRight}
                     />
                   </button>
                 )}
@@ -257,7 +275,7 @@ const NestableItemList: React.FC<Props> = (props) => {
               />
 
               {/* Children */}
-              {item.isGroup && isShowingItems && (
+              {(item.isGroup && childExpanded[item.id]) && (
                 <div
                   className="NestableItemList-children-container"
                   style={{

package/src/components/ItemPicker/index.tsx

@@ -31,6 +31,8 @@ type Props = {
    *   values updated
    */
   onChanged: (updatedItems: PickableItem[]) => void,
+  // If true, don't add margin to bottom of item picker
+  noBottomMargin?: boolean,
 };
 
 /*------------------------------------------------------------------------*/
@@ -49,6 +51,7 @@ const ItemPicker: React.FC<Props> = (props) => {
     title,
     items,
     onChanged,
+    noBottomMargin,
   } = props;
 
   /*------------------------------------------------------------------------*/
@@ -66,6 +69,7 @@ const ItemPicker: React.FC<Props> = (props) => {
   return (
     <TabBox
       title={title}
+      noBottomMargin={noBottomMargin}
     >
       <div style={{ overflowX: 'auto' }}>
         <NestableItemList