Merge pull request #4032 from donker/usersorting

Implement clickable column headers on the users table
dnnsoftware · Sep 5, 2020 · f80d555 · f80d555
2 parents 3b5c48b + f54ad48
commit f80d555
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 40 deletions.
diff --git a/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/GridCell/index.jsx b/Dnn.AdminExperience/ClientSide/Dnn.React.Common/src/GridCell/index.jsx
@@ -4,13 +4,22 @@ import "./style.less";
 
 class GridCell extends Component {
     getStyle() {
-        const {props} = this;
-        return Object.assign({ width: (props.columnSize || 100) + (props.type ? props.type : "%") }, props.style);
+        const { props } = this;
+        return Object.assign(
+            { width: (props.columnSize || 100) + (props.type ? props.type : "%") },
+            props.style
+        );
     }
     render() {
-        const {props} = this;
+        const { props } = this;
         return (
-            <div className={"dnn-grid-cell " + props.className} style={this.getStyle() }>
+            <div
+                className={"dnn-grid-cell " + props.className}
+                style={this.getStyle()}
+                onClick={(e) => {
+                    if (props.onClick) props.onClick(e);
+                }}
+            >
                 {props.children}
             </div>
         );
@@ -19,14 +28,15 @@ class GridCell extends Component {
 
 GridCell.propTypes = {
     children: PropTypes.node,
-    columnSize: PropTypes.number,   
+    columnSize: PropTypes.number,
     type: PropTypes.string,
     style: PropTypes.object,
-    className: PropTypes.string
+    className: PropTypes.string,
+    onClick: PropTypes.func,
 };
 
 GridCell.defaultProps = {
-    className: ""
+    className: "",
 };
 
-export default GridCell;
+export default GridCell;
diff --git a/Dnn.AdminExperience/ClientSide/Users.Web/src/_exportables/package.json b/Dnn.AdminExperience/ClientSide/Users.Web/src/_exportables/package.json
@@ -6,6 +6,7 @@
     "start": "npm run webpack",
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "set NODE_ENV=production&&webpack -p",
+    "debug": "set NODE_ENV=debug&&webpack -p",
     "watch": "set NODE_ENV=debug & webpack --mode=development --progress --colors --watch",
     "webpack": "webpack-dev-server -d --port 8050 --hot --inline --content-base dist/ --history-api-fallback"
   },

diff --git a/...rience/ClientSide/Users.Web/src/_exportables/src/components/UserTable/HeaderRow/index.jsx b/...rience/ClientSide/Users.Web/src/_exportables/src/components/UserTable/HeaderRow/index.jsx
@@ -1,27 +1,45 @@
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
 import React, { Component } from "react";
 import { GridCell } from "@dnnsoftware/dnn-react-common";
 import "./style.less";
 
 class ExtensionHeader extends Component {
-    render() {
-        return (
-            <GridCell columnSize={100} className="header-row">
-                {
-                    this.props.headers.map((header, index) => {
-                        return <GridCell key={`header-row-grid-cell-${index}`} columnSize={header.size} className={header.header ? "" : "empty"}>
-                            <h6>{header.header || "Default"}</h6>
-                        </GridCell>;
-                    })
-                }
+  render() {
+    return (
+      <GridCell columnSize={100} className="header-row">
+        {this.props.headers.map((header, index) => {
+          return (
+            <GridCell
+              key={`header-row-grid-cell-${index}`}
+              columnSize={header.size}
+              className={
+                (header.header ? "" : "empty") +
+                (header.isSortable ? " sortable" : "")
+              }
+              onClick={(e) => {
+                if (this.props.changeSortOrder && header.isSortable)
+                  this.props.changeSortOrder(
+                    header.columnName,
+                    header.columnName == this.props.currentSortColumn
+                      ? !this.props.currentSortAscending
+                      : true
+                  );
+              }}
+            >
+              <h6>{header.header || "Default"}</h6>
             </GridCell>
-        );
-    }
+          );
+        })}
+      </GridCell>
+    );
+  }
 }
 
 ExtensionHeader.propTypes = {
-    headers: PropTypes.array.isRequired
+  headers: PropTypes.array.isRequired,
+  changeSortOrder: PropTypes.func,
+  currentSortAscending: PropTypes.bool,
+  currentSortColumn: PropTypes.string,
 };
 
-
-export default ExtensionHeader;
+export default ExtensionHeader;
diff --git a/...ience/ClientSide/Users.Web/src/_exportables/src/components/UserTable/HeaderRow/style.less b/...ience/ClientSide/Users.Web/src/_exportables/src/components/UserTable/HeaderRow/style.less
@@ -1,13 +1,16 @@
 @import "~@dnnsoftware/dnn-react-common/styles/index.less";
 .header-row {
-    padding: 10px 0 10px;
-    border-bottom: 1px solid @alto;
-    .dnn-grid-cell {
-        padding: 0 15px;
-    }
-    .dnn-grid-cell.empty{
-        text-indent: -100px;
-        overflow: hidden;
-    }
-    text-transform: uppercase;
-}
+  padding: 10px 0 10px;
+  border-bottom: 1px solid @alto;
+  .dnn-grid-cell {
+    padding: 0 15px;
+  }
+  .dnn-grid-cell.empty {
+    text-indent: -100px;
+    overflow: hidden;
+  }
+  text-transform: uppercase;
+  .sortable {
+    cursor: pointer;
+  }
+}
diff --git a/Dnn.AdminExperience/ClientSide/Users.Web/src/_exportables/src/components/UserTable/index.jsx b/Dnn.AdminExperience/ClientSide/Users.Web/src/_exportables/src/components/UserTable/index.jsx
@@ -91,9 +91,9 @@ class UserTable extends Component {
             headers = [{index: 3, size: columnSizes.find(x=>x.index===3).size, header: ""}];
         }
         headers = headers.concat([
-            {index: 5, size: columnSizes.find(x=>x.index===5).size, header: Localization.get("Name.Header")},
-            {index: 10, size: columnSizes.find(x=>x.index===10).size, header: Localization.get("Email.Header")},
-            {index: 15, size: columnSizes.find(x=>x.index===15).size, header: Localization.get("Created.Header")},
+            {index: 5, size: columnSizes.find(x=>x.index===5).size, header: Localization.get("Name.Header"), isSortable: true, columnName: "DisplayName"},
+            {index: 10, size: columnSizes.find(x=>x.index===10).size, header: Localization.get("Email.Header"), isSortable: true, columnName: "Email"},
+            {index: 15, size: columnSizes.find(x=>x.index===15).size, header: Localization.get("Created.Header"), isSortable: true, columnName: "Joined"},
             {index: 25, size: columnSizes.find(x=>x.index===25).size, header:""}]);
         if (this.props.getUserColumns !== undefined  && typeof this.props.getUserColumns ==="function") {
             let extraColumns = this.props.getUserColumns();
@@ -120,7 +120,7 @@ class UserTable extends Component {
         const createUserBox = () => [<CreateUserBox key={`create-user-box-${i++}`} filter={props.filter} onCancel={this.collapse.bind(this) } appSettings={props.appSettings}/>];
         return (
             <GridCell className={styles.usersList}>
-                <HeaderRow headers={headers}/>
+                <HeaderRow headers={headers} changeSortOrder={props.changeSortOrder} currentSortAscending={props.currentSortAscending} currentSortColumn={props.currentSortColumn} />
                 <DetailRow
                     Collapse={this.toggle.bind(this) }
                     OpenCollapse={this.toggle.bind(this) }
@@ -173,6 +173,9 @@ class UserTable extends Component {
 
 UserTable.propTypes = {
     dispatch: PropTypes.func.isRequired,
+    changeSortOrder: PropTypes.func,
+    currentSortAscending: PropTypes.bool,
+    currentSortColumn: PropTypes.string,
     getUserTabs: PropTypes.func,
     getUserTabsIcons: PropTypes.func,
     getUserColumns: PropTypes.func,

diff --git a/Dnn.AdminExperience/ClientSide/Users.Web/src/components/Body/index.jsx b/Dnn.AdminExperience/ClientSide/Users.Web/src/components/Body/index.jsx
@@ -59,6 +59,14 @@ class Body extends Component {
         this.setState({ searchParameters });
     }
 
+    onSortChanged(columnName, ascending) {
+        let {searchParameters} = this.state;
+        searchParameters.sortColumn = columnName;
+        searchParameters.sortAscending = ascending;
+        this.props.dispatch(CommonUsersActions.getUsers(searchParameters));
+        this.setState({ searchParameters });
+    }
+
     getWorkSpaceTray() {
         return this.state.userFilters.length > 0 &&
             <GridCell className="users-workspace-tray">
@@ -111,7 +119,8 @@ class Body extends Component {
                     }
                 </PersonaBarPageHeader>
                 <PersonaBarPageBody workSpaceTrayVisible={true} workSpaceTrayOutside={true} workSpaceTray={this.getWorkSpaceTray() } className={panelBodyMargin}>
-                    <UserTable ref={(node) => this.userTable = node} appSettings={appSettings} filter={state.searchParameters.filter}/>
+                    <UserTable ref={(node) => this.userTable = node} appSettings={appSettings} filter={state.searchParameters.filter} 
+                            changeSortOrder={(c, a) => this.onSortChanged(c, a)} currentSortAscending={state.searchParameters.sortAscending} currentSortColumn={state.searchParameters.sortColumn} />
                     {
                         <div className="users-paging">
                             <Pager pageSizeDropDownWithoutBorder={true}