dce-reactkit 3.2.1 → 3.2.2-beta.10

package/src/components/IntelliTable.tsx

@@ -0,0 +1,610 @@
+/**
+ * Intelligent table
+ * @author Gabe Abrams
+ */
+
+// Import React
+import React, { useReducer } from 'react';
+
+// Import FontAwesome
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+  faSort,
+  faSortUp,
+  faSortDown,
+  faCheckCircle,
+  faXmarkCircle,
+  faMinus,
+} from '@fortawesome/free-solid-svg-icons';
+
+// Import shared types
+import ParamType from '../types/ParamType';
+import IntelliTableColumn from '../types/IntelliTableColumn';
+
+// Import shared helpers
+import roundToNumDecimals from '../helpers/roundToNumDecimals';
+import genCSV from '../helpers/genCSV';
+
+// Import shared components
+import Modal from './Modal';
+import ModalType from '../types/ModalType';
+import CheckboxButton from './CheckboxButton';
+import CSVDownloadButton from './CSVDownloadButton';
+
+/*------------------------------------------------------------------------*/
+/*                                  Types                                 */
+/*------------------------------------------------------------------------*/
+
+// Props definition
+type Props = {
+  // Title of the table
+  title: string,
+  // Unique hyphenated id of the table (e.g. table-name)
+  id: string,
+  // Ordered list of data objects
+  data: {
+    // Required id column
+    id: string | number,
+    // Rest of data
+    [k: string]: any
+  }[],
+  // Column information
+  columns: IntelliTableColumn[],
+};
+
+// Sort types
+enum SortType {
+  // Ascending
+  Ascending = 'ascending',
+  // Descending
+  Descending = 'descending',
+}
+
+/*------------------------------------------------------------------------*/
+/*                                  State                                 */
+/*------------------------------------------------------------------------*/
+
+/* -------- State Definition -------- */
+
+type State = {
+  // Current sort column (or undefined for data order sort)
+  sortColumnParam: (undefined | string),
+  // Sort type
+  sortType: SortType,
+  // Map of which columns are visible
+  columnVisibilityMap: { // param => true if visible
+    [k: string]: boolean,
+  },
+  // If true, the column visibility customization modal is visible
+  columnVisibilityCustomizationModalVisible: boolean,
+};
+
+/* ------------- Actions ------------ */
+
+// Types of actions
+enum ActionType {
+  // Toggle sort column param
+  ToggleSortColumn = 'toggle-sort-column',
+  // Toggle the visibility of a column
+  ToggleColumnVisibility = 'toggle-column-visibility',
+  // Toggle the column visibility customization modal
+  ToggleColVisCusModalVisibility = 'toggle-col-vis-cus-modal-visibility',
+}
+
+// Action definitions
+type Action = (
+  | {
+    // Action type
+    type: ActionType.ToggleSortColumn,
+    // Param for the column to toggle
+    param: string,
+  }
+  | {
+    // Action type
+    type: ActionType.ToggleColumnVisibility,
+    // Param for the column to toggle
+    param: string,
+  }
+  | {
+    // Action type
+    type: (
+      | ActionType.ToggleColVisCusModalVisibility
+    ),
+  }
+);
+
+/**
+ * Reducer that executes actions
+ * @author Gabe Abrams
+ * @param state current state
+ * @param action action to execute
+ */
+const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case ActionType.ToggleSortColumn: {
+      if (action.param !== state.sortColumnParam) {
+        // Different column param
+        return {
+          ...state,
+          sortColumnParam: action.param,
+          sortType: SortType.Ascending,
+        };
+      }
+      if (state.sortType === SortType.Ascending) {
+        // Switch to descending
+        return {
+          ...state,
+          sortType: SortType.Descending,
+        };
+      }
+      // Stop sorting by column
+      return {
+        ...state,
+        sortColumnParam: undefined,
+        sortType: SortType.Ascending,
+      };
+    }
+    case ActionType.ToggleColumnVisibility: {
+      const { columnVisibilityMap } = state;
+      columnVisibilityMap[action.param] = !columnVisibilityMap[action.param];
+      return {
+        ...state,
+        columnVisibilityMap,
+      };
+    }
+    case ActionType.ToggleColVisCusModalVisibility: {
+      return {
+        ...state,
+        columnVisibilityCustomizationModalVisible: !state.columnVisibilityCustomizationModalVisible,
+      };
+    }
+    default: {
+      return state;
+    }
+  }
+};
+
+/*------------------------------------------------------------------------*/
+/*                                Component                               */
+/*------------------------------------------------------------------------*/
+
+const IntelliTable: React.FC<Props> = (props) => {
+  /*------------------------------------------------------------------------*/
+  /*                                  Setup                                 */
+  /*------------------------------------------------------------------------*/
+
+  /* -------------- Props ------------- */
+
+  // Destructure all props
+  const {
+    title,
+    id,
+    data,
+    columns,
+  } = props;
+
+  /* -------------- State ------------- */
+
+  // Initial state
+  const initColumnVisibilityMap: {
+    [k: string]: boolean
+  } = {};
+  columns.forEach((column) => {
+    initColumnVisibilityMap[column.param] = !column.startsHidden;
+  });
+  const initialState: State = {
+    sortColumnParam: undefined,
+    sortType: SortType.Descending,
+    columnVisibilityMap: initColumnVisibilityMap,
+    columnVisibilityCustomizationModalVisible: false,
+  };
+
+  // Initialize state
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  // Destructure common state
+  const {
+    sortColumnParam,
+    sortType,
+    columnVisibilityMap,
+    columnVisibilityCustomizationModalVisible,
+  } = state;
+
+  /*------------------------------------------------------------------------*/
+  /*                                 Render                                 */
+  /*------------------------------------------------------------------------*/
+
+  /*----------------------------------------*/
+  /*                  Modal                 */
+  /*----------------------------------------*/
+
+  // Modal that may be defined
+  let modal: React.ReactNode;
+
+  /* ------- Col Vis Customization Modal ------ */
+
+  if (columnVisibilityCustomizationModalVisible) {
+    // Create modal
+    modal = (
+      <Modal
+        type={ModalType.Okay}
+        title="Choose columns to show:"
+        onClose={() => {
+          dispatch({
+            type: ActionType.ToggleColVisCusModalVisibility,
+          });
+        }}
+      >
+        {
+          columns.map((column) => {
+            return (
+              <CheckboxButton
+                key={column.param}
+                id={`IntelliTable-${id}-toggle-visibility-${column.param}`}
+                text={column.title}
+                onChanged={() => {
+                  dispatch({
+                    type: ActionType.ToggleColumnVisibility,
+                    param: column.param,
+                  });
+                }}
+                checked={columnVisibilityMap[column.param]}
+                ariaLabel={`show "${column.title}" column`}
+              />
+            );
+          })
+        }
+      </Modal>
+    );
+  }
+
+  /*----------------------------------------*/
+  /*                 Main UI                */
+  /*----------------------------------------*/
+
+  // Table header
+  const headerCells = (
+    columns
+      .filter((column) => {
+        return columnVisibilityMap[column.param];
+      })
+      .map((column) => {
+        // Custom info based on current sort type
+        let sortButtonAriaLabel;
+        let sortIcon = faSort;
+        if (!sortColumnParam) {
+          // Not being sorted yet
+          sortButtonAriaLabel = `sort ascending by ${column.title}`;
+          sortIcon = faSort;
+        } else if (column.param === sortColumnParam) {
+          // Already sorted by this column
+          if (sortType === SortType.Ascending) {
+            // Sorted ascending
+            sortButtonAriaLabel = `sort descending by ${column.title}`;
+            sortIcon = faSortDown;
+          } else {
+            // Sorted descending
+            sortButtonAriaLabel = `stop sorting by ${column.title}`;
+            sortIcon = faSortUp;
+          }
+        } else {
+          // Sorted by a different column
+          sortButtonAriaLabel = `sort ascending by ${column.title}`;
+          sortIcon = faSort;
+        }
+
+        // Create the cell UI
+        return (
+          <th
+            key={column.param}
+            scope="col"
+            id={`IntelliTable-${id}-header-${column.param}`}
+          >
+            <div className="d-flex align-items-center justify-content-center flex-row h-100">
+              {/* Title */}
+              <span className="text-nowrap">
+                {column.title}
+              </span>
+              {/* Buttons */}
+              <div>
+                <button
+                  type="button"
+                  className="btn btn-light btn-sm ms-1"
+                  aria-label={sortButtonAriaLabel}
+                  onClick={() => {
+                    dispatch({
+                      type: ActionType.ToggleSortColumn,
+                      param: column.param,
+                    });
+                  }}
+                >
+                  <FontAwesomeIcon
+                    icon={sortIcon}
+                  />
+                </button>
+              </div>
+            </div>
+          </th>
+        );
+      })
+  );
+  const tableHeader = (
+    <thead>
+      <tr>
+        {headerCells}
+      </tr>
+    </thead>
+  );
+
+  // Sort data
+  let sortedData = [...data];
+  const paramType = columns.find((column) => {
+    return (column.param === sortColumnParam);
+  })?.type;
+  const descending = (sortType === SortType.Descending);
+  if (sortColumnParam) {
+    sortedData.sort((a, b) => {
+      const aVal = a[sortColumnParam];
+      const bVal = b[sortColumnParam];
+
+      // Sort differently based on the data type
+      // > Boolean
+      if (paramType === ParamType.Boolean) {
+        if (aVal && !bVal) {
+          return (descending ? -1 : 1);
+        }
+        if (!aVal && bVal) {
+          return (descending ? 1 : -1);
+        }
+        return 0;
+      }
+      // > Number
+      if (
+        paramType === ParamType.Int
+        || paramType === ParamType.Float
+      ) {
+        return (
+          descending
+            ? (bVal - aVal)
+            : (aVal - bVal)
+        );
+      }
+      // > String
+      if (paramType === ParamType.String) {
+        if (aVal < bVal) {
+          return (descending ? -1 : 1);
+        }
+        if (aVal > bVal) {
+          return (descending ? 1 : -1);
+        }
+        return 0;
+      }
+      // > JSON
+      if (paramType === ParamType.JSON) {
+        const aSize = (
+          Array.isArray(aVal)
+            ? aVal.length
+            : Object.keys(aVal).length
+        );
+        const bSize = (
+          Array.isArray(bVal)
+            ? bVal.length
+            : Object.keys(bVal).length
+        );
+        return (
+          descending
+            ? (bSize - aSize)
+            : (aSize - bSize)
+        );
+      }
+
+      // No sort
+      return 0;
+    });
+  }
+
+  // Table body
+  const rows = sortedData.map((datum) => {
+    // Build cells
+    const cells = (
+      columns
+        .filter((column) => {
+          return columnVisibilityMap[column.param];
+        })
+        .map((column) => {
+        // Get value
+        let value: any = datum;
+        const paramParts = column.param.split('.');
+        paramParts.forEach((paramPart) => {
+          value = (value ?? {})[paramPart];
+        });
+        let fullValue: React.ReactNode;
+        let visibleValue: React.ReactNode;
+        let title: string = '';
+        if (column.type === ParamType.Boolean) {
+          fullValue = !!(value);
+          const noValue = (
+            value === undefined
+            || value === null
+          );
+          visibleValue = (
+            noValue
+              ? (
+                <FontAwesomeIcon
+                  icon={faCheckCircle}
+                />
+              )
+              : (
+                <FontAwesomeIcon
+                  icon={faXmarkCircle}
+                />
+              )
+          );
+          title = (fullValue ? 'True' : 'False');
+        } else if (column.type === ParamType.Int) {
+          fullValue = Number.parseInt(value, 10);
+          const noValue = Number.isNaN(fullValue);
+          visibleValue = (
+            noValue
+              ? (
+                <FontAwesomeIcon
+                  icon={faMinus}
+                />
+              )
+              : fullValue
+          );
+          title = String(fullValue);
+        } else if (column.type === ParamType.Float) {
+          fullValue = Number.parseFloat(value);
+          const noValue = Number.isNaN(fullValue);
+          visibleValue = (
+            noValue
+              ? (
+                <FontAwesomeIcon
+                  icon={faMinus}
+                />
+              )
+              : roundToNumDecimals(fullValue as number, 2)
+          );
+          title = String(fullValue);
+        } else if (column.type === ParamType.String) {
+          fullValue = String(value).trim();
+          const noValue = (value.trim().length) === 0;
+          visibleValue = (
+            noValue
+              ? (
+                <FontAwesomeIcon
+                  icon={faMinus}
+                />
+              )
+              : fullValue
+          );
+          title = `"${value}"`;
+        } else if (column.type === ParamType.JSON) {
+          fullValue = JSON.stringify(value);
+          const noValue = (
+            Array.isArray(value)
+              ? (!value || value.length === 0)
+              : Object.keys(value ?? {}).length === 0
+          );
+          visibleValue = (
+            noValue
+              ? (
+                <FontAwesomeIcon
+                  icon={faMinus}
+                />
+              )
+              : fullValue
+          );
+        }
+
+        // Create UI
+        return (
+          <td
+            key={`${datum.id}-${column.param}`}
+            title={title}
+          >
+            {visibleValue}
+          </td>
+        );
+      })
+    );
+
+    // Add cells to a row
+    return (
+      <tr key={datum.id}>
+        {cells}
+      </tr>
+    );
+  });
+  const tableBody = (
+    <tbody>
+      {rows}
+    </tbody>
+  );
+
+  // Build table
+  const table = (
+    <table className="table table-dark table-striped">
+      {tableHeader}
+      {tableBody}
+    </table>
+  );
+
+  // Count the number of hidden columns
+  const numHiddenCols = (
+    Object.values(columnVisibilityMap)
+      .filter((isVisible) => {
+        return !isVisible;
+      })
+      .length
+  );
+
+  // Build CSV
+  const csv = genCSV(
+    data,
+    columns,
+  );
+
+  // Build main UI
+  return (
+    <div className={`IntelliTable-container-${id}`}>
+      {/* Header */}
+      <div className="d-flex align-items-center justify-content-center">
+        {/* Title */}
+        <h3 className="m-0">
+          {title}
+        </h3>
+        {/* Buttons */}
+        <div className="flex-grow-1 text-end">
+          {/* Download Button */}
+          <CSVDownloadButton
+            aria-label={`download data as csv for ${title}`}
+            id={`IntelliTable-${id}-download-as-csv`}
+            filename={`${title}.csv`}
+            csv={csv}
+          />
+          {/* Show/Hide Columns */}
+          <button
+            type="button"
+            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={() => {
+              dispatch({
+                type: ActionType.ToggleColVisCusModalVisibility,
+              });
+            }}
+          >
+            Show/Hide Cols
+            {numHiddenCols > 0 && (
+              <>
+                {' '}
+                (
+                {numHiddenCols}
+                {' '}
+                hidden)
+              </>
+            )}
+          </button>
+        </div>
+      </div>
+      {/* Table */}
+      <div
+        className={`IntelliTable-table-${id}`}
+        style={{
+          overflowX: 'auto',
+        }}
+      >
+        {table}
+      </div>
+    </div>
+  );
+};
+
+/*------------------------------------------------------------------------*/
+/*                                 Wrap Up                                */
+/*------------------------------------------------------------------------*/
+
+// Export component
+export default IntelliTable;

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