diff --git a/README.md b/README.md
index 09cd9125f6..b2972ad84c 100644
--- a/README.md
+++ b/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.
diff --git a/src/components/BrowserFilter/BrowserFilter.react.js b/src/components/BrowserFilter/BrowserFilter.react.js
index c474bc5566..0e90cbcedf 100644
--- a/src/components/BrowserFilter/BrowserFilter.react.js
+++ b/src/components/BrowserFilter/BrowserFilter.react.js
@@ -105,6 +105,7 @@ export default class BrowserFilter extends React.Component {
{
+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)
+};