Skip to content

Commit

Permalink
feat: add config option columnPreference.filterSortToTop to set col…
Browse files Browse the repository at this point in the history
…umn name order in filter dialog (#1884)
  • Loading branch information
vince1995 authored Oct 27, 2021
1 parent 6314de0 commit 3acbda1
Show file tree
Hide file tree
Showing 3 changed files with 63 additions and 2 deletions.
24 changes: 24 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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.
Expand Down
1 change: 1 addition & 0 deletions src/components/BrowserFilter/BrowserFilter.react.js
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
40 changes: 38 additions & 2 deletions src/components/Filter/Filter.react.js
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down Expand Up @@ -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 (
Expand All @@ -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')) {
Expand Down Expand Up @@ -105,3 +137,7 @@ Filter.propTypes = {
'A function for rendering a row of a filter.'
)
};

Filter.contextTypes = {
currentApp: PropTypes.instanceOf(ParseApp)
};

0 comments on commit 3acbda1

Please sign in to comment.