feat(preventSort): allow preventSort from columnPreferences props (#1709

) * feat(preventSort): allow preventSort from columnPreferences props * feat(preventSort): add doc section of prevent sorting
parse-community · May 24, 2021 · 569db4b · 569db4b
1 parent 9d0504b
commit 569db4b
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -23,6 +23,7 @@ Parse Dashboard is a standalone dashboard for managing your [Parse Server](https
   * [App Icon Configuration](#app-icon-configuration)
   * [App Background Color Configuration](#app-background-color-configuration)
   * [Other Configuration Options](#other-configuration-options)
+    * [Prevent columns sorting](#prevent-columns-sorting)
 * [Running as Express Middleware](#running-as-express-middleware)
 * [Deploying Parse Dashboard](#deploying-parse-dashboard)
   * [Preparing for Deployment](#preparing-for-deployment)
@@ -241,6 +242,33 @@ You can set `appNameForURL` in the config file for each app to control the url o
 
 To change the app to production, simply set `production` to `true` in your config file. The default value is false if not specified.
 
+ ### Prevent columns sorting  
+
+You can prevent some columns to be sortable by adding `preventSort` to columnPreference options in each app configuration
+
+```json
+
+"apps": [
+  {
+    "appId": "local_app_id",
+    "columnPreference": {
+        "_User": [
+          {
+            "name": "createdAt",
+            "visible": true,
+            "preventSort": true
+          },
+          {
+            "name": "updatedAt",
+            "visible": true,
+            "preventSort": false
+          },
+        ]
+      }
+    }
+]
+```
+
 # Running as Express Middleware
 
 Instead of starting Parse Dashboard with the CLI, you can also run it as an [express](https://github.com/expressjs/express) middleware.

diff --git a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js b/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js
@@ -27,7 +27,7 @@ export default class DataBrowserHeaderBar extends React.Component {
       </div>
     ];
 
-    headers.forEach(({ width, name, type, targetClass, order, visible }, i) => {
+    headers.forEach(({ width, name, type, targetClass, order, visible, preventSort }, i) => {
       if (!visible) return;
       let wrapStyle = { width };
       if (i % 2) {
@@ -36,15 +36,20 @@ export default class DataBrowserHeaderBar extends React.Component {
         wrapStyle.background = '#66637A';
       }
       let onClick = null;
-      if (type === 'String' || type === 'Number' || type === 'Date' || type === 'Boolean') {
+      if (!preventSort && (type === 'String' || type === 'Number' || type === 'Date' || type === 'Boolean')) {
         onClick = () => updateOrdering((order === 'descending' ? '' : '-') + name);
       }
 
+      let className = styles.wrap;
+      if (preventSort) {
+        className += ` ${styles.preventSort} `;
+      }
+
       elements.push(
         <div
           onClick={onClick}
           key={'header' + i}
-          className={styles.wrap}
+          className={className}
           style={ wrapStyle }>
           <DataBrowserHeader
             name={name}
@@ -65,7 +70,7 @@ export default class DataBrowserHeaderBar extends React.Component {
       if (headers.length % 2) {
         finalStyle.background = 'rgba(224,224,234,0.10)';
       }
-  
+
       elements.push(
         readonly || preventSchemaEdits ? null : (
           <div key='add' className={styles.addColumn} style={finalStyle}>

diff --git a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss b/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss
@@ -72,3 +72,9 @@
     }
   }
 }
+
+.preventSort {
+  :hover {
+    cursor: not-allowed;
+  }
+}
diff --git a/src/dashboard/Data/Browser/BrowserTable.react.js b/src/dashboard/Data/Browser/BrowserTable.react.js
@@ -98,14 +98,15 @@ export default class BrowserTable extends React.Component {
       }
     }
 
-    let headers = this.props.order.map(({ name, width, visible }) => (
+    let headers = this.props.order.map(({ name, width, visible, preventSort }) => (
       {
         width: width,
         name: name,
         type: this.props.columns[name].type,
         targetClass: this.props.columns[name].targetClass,
         order: ordering.col === name ? ordering.direction : null,
-        visible
+        visible,
+        preventSort
       }
     ));
     let editor = null;
@@ -140,7 +141,7 @@ export default class BrowserTable extends React.Component {
               setRelation={this.props.setRelation}
               setCopyableValue={this.props.setCopyableValue}
               setContextMenu={this.props.setContextMenu}
-              onEditSelectedRow={this.props.onEditSelectedRow} 
+              onEditSelectedRow={this.props.onEditSelectedRow}
             />
             <Button
               value="Add"