feat: add config option columnPreference.filterSortToTop to set column name order in filter dialog (#1884)

Author: vince1995

README.md

@@ -37,6 +37,7 @@ Parse Dashboard is a standalone dashboard for managing your [Parse Server](https
   - [App Background Color Configuration](#app-background-color-configuration)
   - [Other Configuration Options](#other-configuration-options)
     - [Prevent columns sorting](#prevent-columns-sorting)
+    - [Custom order in the filter popup](#custom-order-in-the-filter-popup)
 - [Running as Express Middleware](#running-as-express-middleware)
 - [Deploying Parse Dashboard](#deploying-parse-dashboard)
   - [Preparing for Deployment](#preparing-for-deployment)
@@ -294,6 +295,29 @@ You can prevent some columns to be sortable by adding `preventSort` to columnPre
 ]
 ```
 
+### Custom order in the filter popup
+
+If you have classes with a lot of columns and you filter them often with the same columns you can sort those to the top by extending the `columnPreference` setting with the `filterSortToTop` option:
+
+```json
+"apps": [
+  {
+    "columnPreference": {
+        "_User": [
+          {
+            "name": "objectId",
+            "filterSortToTop": true
+          },
+          {
+            "name": "email",
+            "filterSortToTop": true
+          }          
+        ]
+      }
+    }
+]
+```
+
 # 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.

src/components/BrowserFilter/BrowserFilter.react.js

@@ -105,6 +105,7 @@ export default class BrowserFilter extends React.Component {
             <div onClick={this.toggle} style={{ cursor: 'pointer', width: this.node.clientWidth, height: this.node.clientHeight }}></div>
             <div className={styles.body}>
               <Filter
+                className={this.props.className}
                 blacklist={this.state.blacklistedFilters}
                 schema={this.props.schema}
                 filters={this.state.filters}

src/components/Filter/Filter.react.js

@@ -9,6 +9,8 @@ import * as Filters  from 'lib/Filters';
 import { List, Map } from 'immutable';
 import PropTypes     from 'lib/PropTypes';
 import React         from 'react';
+import stringCompare from 'lib/stringCompare';
+import ParseApp      from 'lib/ParseApp';
 
 function changeField(schema, filters, index, newField) {
   let newFilter = new Map({
@@ -42,7 +44,7 @@ function deleteRow(filters, index) {
   return filters.delete(index);
 }
 
-let Filter = ({ schema, filters, renderRow, onChange, blacklist }) => {
+let Filter = ({ schema, filters, renderRow, onChange, blacklist, className }, context) => {
   blacklist = blacklist || [];
   let available = Filters.availableFilters(schema, filters);
   return (
@@ -56,7 +58,37 @@ let Filter = ({ schema, filters, renderRow, onChange, blacklist }) => {
         if (fields.indexOf(field) < 0) {
           fields.push(field);
         }
-        fields.sort();
+
+        // Get the column preference of the current class.
+        const currentColumnPreference = context.currentApp.columnPreference[className];
+
+        // Check if the preference exists.
+        if (currentColumnPreference) {
+          const fieldsToSortToTop = currentColumnPreference
+            .filter(item => item.filterSortToTop)
+            .map(item => item.name);
+          // Sort the fields.
+          fields.sort((a, b) => {
+            // Only "a" should sorted to the top.
+            if (fieldsToSortToTop.includes(a) && !fieldsToSortToTop.includes(b)) {
+              return -1
+            }
+            // Only "b" should sorted to the top.
+            if (!fieldsToSortToTop.includes(a) && fieldsToSortToTop.includes(b)) {
+              return 1;
+            }
+            // Both should sorted to the top -> they should be sorted to the same order as in the "fieldsToSortToTop" array.
+            if (fieldsToSortToTop.includes(a) && fieldsToSortToTop.includes(b)) {
+              return fieldsToSortToTop.indexOf(a) - fieldsToSortToTop.indexOf(b);
+            }
+            return stringCompare(a, b);
+          });
+        }
+        // If there's no preference: Use the default sort function.
+        else {
+          fields.sort();
+        }
+
         let constraints = Filters.FieldConstraints[schema[field].type].filter((c) => blacklist.indexOf(c) < 0);
         let compareType = schema[field].type;
         if (Object.prototype.hasOwnProperty.call(Filters.Constraints[constraint], 'field')) {
@@ -105,3 +137,7 @@ Filter.propTypes = {
     'A function for rendering a row of a filter.'
   )
 };
+
+Filter.contextTypes = {
+  currentApp: PropTypes.instanceOf(ParseApp)
+};