dce-reactkit 3.2.2-beta.44 → 3.2.2-beta.47

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

@@ -0,0 +1,11 @@
+/**
+ * Type of the context map in a LogMetadata file
+ * @author Gabe Abrams
+ */
+declare type LogMetadataContextMap = {
+    [k: string]: (string | {
+        _: string;
+        [k: string]: string;
+    });
+};
+export default LogMetadataContextMap;

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

@@ -0,0 +1,8 @@
+/**
+ * Type of the tag map inside a LogMetadata file
+ * @author Gabe Abrams
+ */
+declare type LogMetadataTagMap = {
+    [k: string]: string;
+};
+export default LogMetadataTagMap;

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

@@ -0,0 +1,8 @@
+/**
+ * Type of the target map inside a LogMetadata file
+ * @author Gabe Abrams
+ */
+declare type LogMetadataTargetMap = {
+    [k: string]: string;
+};
+export default LogMetadataTargetMap;

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

@@ -1,19 +1,13 @@
+import LogMetadataContextMap from './LogMetadataContextMap';
+import LogMetadataTagMap from './LogMetadataTagMap';
+import LogMetadataTargetMap from './LogMetadataTargetMap';
 /**
  * Type of a LogMetadata file
  * @author Gabe Abrams
  */
 declare type LogMetadataType = {
-    Context?: {
-        [k: string]: (string | {
-            _: string;
-            [k: string]: string;
-        });
-    };
-    Tag?: {
-        [k: string]: string;
-    };
-    Target?: {
-        [k: string]: string;
-    };
+    Context?: LogMetadataContextMap;
+    Tag?: LogMetadataTagMap;
+    Target?: LogMetadataTargetMap;
 };
 export default LogMetadataType;

package/dist/index.d.ts

@@ -369,23 +369,41 @@ declare type Props$3 = {
 };
 declare const ItemPicker: React.FC<Props$3>;
 
+/**
+ * Type of the context map in a LogMetadata file
+ * @author Gabe Abrams
+ */
+declare type LogMetadataContextMap = {
+    [k: string]: (string | {
+        _: string;
+        [k: string]: string;
+    });
+};
+
+/**
+ * Type of the tag map inside a LogMetadata file
+ * @author Gabe Abrams
+ */
+declare type LogMetadataTagMap = {
+    [k: string]: string;
+};
+
+/**
+ * Type of the target map inside a LogMetadata file
+ * @author Gabe Abrams
+ */
+declare type LogMetadataTargetMap = {
+    [k: string]: string;
+};
+
 /**
  * Type of a LogMetadata file
  * @author Gabe Abrams
  */
 declare type LogMetadataType = {
-    Context?: {
-        [k: string]: (string | {
-            _: string;
-            [k: string]: string;
-        });
-    };
-    Tag?: {
-        [k: string]: string;
-    };
-    Target?: {
-        [k: string]: string;
-    };
+    Context?: LogMetadataContextMap;
+    Tag?: LogMetadataTagMap;
+    Target?: LogMetadataTargetMap;
 };
 
 /**

package/package.json

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

package/src/components/IntelliTable.tsx

@@ -31,6 +31,7 @@ import ModalType from '../types/ModalType';
 import CheckboxButton from './CheckboxButton';
 import CSVDownloadButton from './CSVDownloadButton';
 import Variant from '../types/Variant';
+import { alert } from './AppWrapper';
 
 /*------------------------------------------------------------------------*/
 /*                                  Types                                 */
@@ -92,6 +93,10 @@ enum ActionType {
   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
@@ -114,6 +119,8 @@ type Action = (
     // Action type
     type: (
       | ActionType.ToggleColVisCusModalVisibility
+      | ActionType.ShowAllColumns
+      | ActionType.HideAllColumns
     ),
   }
 );
@@ -163,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;
     }
@@ -251,12 +278,25 @@ 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 (
@@ -273,13 +313,42 @@ const IntelliTable: React.FC<Props> = (props) => {
                   });
                 }}
                 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>
     );
   }
@@ -625,7 +694,9 @@ const IntelliTable: React.FC<Props> = (props) => {
   // Build CSV
   const csv = genCSV(
     data,
-    columns,
+    columns.filter((column) => {
+      return columnVisibilityMap[column.param];
+    }),
   );
 
   // Build main UI