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) +};