dce-reactkit 3.2.2-beta.32 → 3.2.2-beta.34

package/dist/esm/index.js

@@ -2234,7 +2234,23 @@ const genCSV = (data, columns) => {
     data.forEach((datum) => {
         csv += (columns
             .map((column) => {
-            return escapeCellText(datum[column.param]);
+            let contents;
+            const cell = datum[column.param];
+            if (typeof cell === 'string'
+                || typeof cell === 'number') {
+                contents = String(cell);
+            }
+            else if (typeof cell === 'undefined'
+                || cell === null) {
+                contents = '';
+            }
+            else if (typeof cell === 'object') {
+                contents = JSON.stringify(cell);
+            }
+            else {
+                contents = '';
+            }
+            return escapeCellText(contents);
         })
             .join(','));
     });
@@ -2267,7 +2283,8 @@ const CSVDownloadButton = (props) => {
             ? `Click to download ${filename}`
             : ariaLabel), style: style, onClick: onClick },
         !children && (React.createElement(React.Fragment, null,
-            React.createElement(FontAwesomeIcon, { icon: faCloudDownloadAlt, className: "mr-2" }),
+            React.createElement(FontAwesomeIcon, { icon: faCloudDownloadAlt }),
+            ' ',
             "Download CSV")),
         children));
 };
@@ -2355,10 +2372,18 @@ const IntelliTable = (props) => {
     const [state, dispatch] = useReducer(reducer$1, initialState);
     // Destructure common state
     const { sortColumnParam, sortType, columnVisibilityMap, columnVisibilityCustomizationModalVisible, } = state;
+    /*------------------------------------------------------------------------*/
+    /*                                 Render                                 */
+    /*------------------------------------------------------------------------*/
+    /*----------------------------------------*/
+    /*                  Modal                 */
+    /*----------------------------------------*/
+    // Modal that may be defined
+    let modal;
     /* ------- Col Vis Customization Modal ------ */
     if (columnVisibilityCustomizationModalVisible) {
         // Create modal
-        (React.createElement(Modal, { type: ModalType$1.Okay, title: "Choose columns to show:", onClose: () => {
+        modal = (React.createElement(Modal, { type: ModalType$1.Okay, title: "Choose columns to show:", onClose: () => {
                 dispatch({
                     type: ActionType$1.ToggleColVisCusModalVisibility,
                 });
@@ -2383,6 +2408,7 @@ const IntelliTable = (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}`;
@@ -2390,6 +2416,7 @@ const IntelliTable = (props) => {
         }
         else if (column.param === sortColumnParam) {
             // Already sorted by this column
+            sortingByThisColumn = true;
             if (sortType === SortType.Ascending) {
                 // Sorted ascending
                 sortButtonAriaLabel = `sort descending by ${column.title}`;
@@ -2407,11 +2434,14 @@ const IntelliTable = (props) => {
             sortIcon = faSort;
         }
         // Create the cell UI
-        return (React.createElement("th", { key: column.param, scope: "col", id: `IntelliTable-${id}-header-${column.param}` },
+        return (React.createElement("th", { 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',
+            } },
             React.createElement("div", { className: "d-flex align-items-center justify-content-center flex-row h-100" },
                 React.createElement("span", { className: "text-nowrap" }, column.title),
                 React.createElement("div", null,
-                    React.createElement("button", { type: "button", className: "btn btn-light btn-sm ms-1", "aria-label": sortButtonAriaLabel, onClick: () => {
+                    React.createElement("button", { type: "button", 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({
                                 type: ActionType$1.ToggleSortColumn,
                                 param: column.param,
@@ -2452,10 +2482,10 @@ const IntelliTable = (props) => {
             // > String
             if (paramType === ParamType$1.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;
             }
@@ -2519,7 +2549,9 @@ const IntelliTable = (props) => {
             }
             else if (column.type === ParamType$1.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
                     ? (React.createElement(FontAwesomeIcon, { icon: faMinus }))
                     : fullValue);
@@ -2535,7 +2567,10 @@ const IntelliTable = (props) => {
                     : fullValue);
             }
             // Create UI
-            return (React.createElement("td", { key: `${datum.id}-${column.param}`, title: title }, visibleValue));
+            return (React.createElement("td", { key: `${datum.id}-${column.param}`, title: title, style: {
+                    borderRight: '0.05rem solid #555',
+                    borderLeft: '0.05rem solid #555',
+                } }, visibleValue));
         }));
         // Add cells to a row
         return (React.createElement("tr", { key: datum.id }, cells));
@@ -2555,7 +2590,8 @@ const IntelliTable = (props) => {
     const csv = genCSV(data, columns);
     // Build main UI
     return (React.createElement("div", { className: `IntelliTable-container-${id}` },
-        React.createElement("div", { className: "d-flex align-items-center justify-content-center" },
+        modal,
+        React.createElement("div", { className: "d-flex align-items-center justify-content-start" },
             React.createElement("h3", { className: "m-0" }, title),
             React.createElement("div", { className: "flex-grow-1 text-end" },
                 React.createElement(CSVDownloadButton, { "aria-label": `download data as csv for ${title}`, id: `IntelliTable-${id}-download-as-csv`, filename: `${title}.csv`, csv: csv }),
@@ -2571,7 +2607,7 @@ const IntelliTable = (props) => {
                         numHiddenCols,
                         ' ',
                         "hidden)"))))),
-        React.createElement("div", { className: `IntelliTable-table-${id}`, style: {
+        React.createElement("div", { className: `IntelliTable-table-${id} mt-2`, style: {
                 overflowX: 'auto',
             } }, table)));
 };
@@ -2788,7 +2824,7 @@ const LogReviewer = (props) => {
     /*------------------------------------------------------------------------*/
     /*                                  Setup                                 */
     /*------------------------------------------------------------------------*/
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     /* -------------- Props ------------- */
     // Destructure props
     const { LogMetadata, onClose, } = props;
@@ -2858,8 +2894,8 @@ const LogReviewer = (props) => {
     });
     // Create initial tag filter state
     const initTagFilterState = {};
-    Object.values((_e = LogMetadata.Tag) !== null && _e !== void 0 ? _e : {}).forEach((tagValue) => {
-        initTagFilterState[tagValue] = false;
+    Object.keys((_e = LogMetadata.Tag) !== null && _e !== void 0 ? _e : {}).forEach((tag) => {
+        initTagFilterState[tag] = false;
     });
     // Create advanced filter state
     const initAdvancedFilterState = {
@@ -3158,7 +3194,7 @@ const LogReviewer = (props) => {
             }
             else if (expandedFilterDrawer === FilterDrawer.Tag) {
                 // Create filter UI
-                filterDrawer = (React.createElement(TabBox, { title: "Tags" }, Object.keys(tagFilterState)
+                filterDrawer = (React.createElement(TabBox, { title: "Tags" }, Object.keys((_h = LogMetadata.Tag) !== null && _h !== void 0 ? _h : {})
                     .map((tag, i) => {
                     const description = genHumanReadableName(tag);
                     return (React.createElement(CheckboxButton, { id: `LogReviewer-tag-${tag}-checkbox`, text: description, ariaLabel: `require that logs be tagged with "${description}" or any other selected tag`, noMarginOnRight: i === Object.keys(tagFilterState).length - 1, checked: tagFilterState[tag], onChanged: (checked) => {
@@ -3205,8 +3241,8 @@ const LogReviewer = (props) => {
                                 } }));
                         })),
                         React.createElement(ButtonInputGroup, { label: "Target" },
-                            (Object.keys((_h = LogMetadata.Target) !== null && _h !== void 0 ? _h : {}).length === 0) && (React.createElement("div", null, "This app does not have any targets yet.")),
-                            Object.keys((_j = LogMetadata.Target) !== null && _j !== void 0 ? _j : {})
+                            (Object.keys((_j = LogMetadata.Target) !== null && _j !== void 0 ? _j : {}).length === 0) && (React.createElement("div", null, "This app does not have any targets yet.")),
+                            Object.keys((_k = LogMetadata.Target) !== null && _k !== void 0 ? _k : {})
                                 .map((target, i) => {
                                 var _a;
                                 const description = genHumanReadableName(target);
@@ -3707,18 +3743,18 @@ const LogReviewer = (props) => {
                 type: ParamType$1.Int,
             },
             {
-                title: 'Student',
+                title: 'Student?',
                 param: 'isLearner',
                 type: ParamType$1.Boolean,
             },
             {
-                title: 'Teaching Staff',
+                title: 'Teaching Staff?',
                 param: 'isTTM',
                 type: ParamType$1.Boolean,
                 startsHidden: true,
             },
             {
-                title: 'Admin',
+                title: 'Admin?',
                 param: 'isAdmin',
                 type: ParamType$1.Boolean,
                 startsHidden: true,
@@ -3753,7 +3789,7 @@ const LogReviewer = (props) => {
                 startsHidden: true,
             },
             {
-                title: 'Mobile',
+                title: 'Mobile?',
                 param: 'device.isMobile',
                 type: ParamType$1.Boolean,
                 startsHidden: true,
@@ -4883,7 +4919,7 @@ const genRouteHandler = (opts) => {
                     isAdmin: !!launchInfo.isAdmin,
                     isTTM: !!launchInfo.isTTM,
                     courseId: launchInfo.courseId,
-                    courseName: launchInfo.courseName,
+                    courseName: launchInfo.contextLabel,
                     browser,
                     device,
                     year,