Commit 5cf9f185 authored by Antoine's avatar Antoine Committed by Benjamin Bouvier
Browse files

Allow the user to create a category via the fuzzy selector + make the category...

Allow the user to create a category via the fuzzy selector + make the category selector not clearable
parent dfea37d0
......@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import { createSelector } from 'reselect';
import { connect } from 'react-redux';
import Select from 'react-select';
import { Creatable } from 'react-select';
import { NONE_CATEGORY_ID, translate as $t } from '../../helpers';
import { get } from '../../store';
......@@ -19,20 +19,34 @@ class CategorySelect extends React.Component {
}
};
promptTextCreator = label => {
return $t('client.operations.create_category', { label });
};
isOptionUnique = ({ option: newValue, options: existingValues }) => {
return existingValues.every(
cat => cat.label.toLowerCase() !== newValue.label.toLowerCase()
);
};
render() {
const style = this.props.borderColor
? { borderRight: `5px solid ${this.props.borderColor}` }
: null;
return (
<Select
<Creatable
value={this.props.selectedValue}
style={style}
clearable={false}
id={this.props.id}
onChange={this.handleChange}
options={this.props.options}
matchProp="label"
noResultsText={$t('client.operations.no_category_found')}
promptTextCreator={this.promptTextCreator}
onNewOptionClick={this.props.onCreateCategory}
isOptionUnique={this.isOptionUnique}
/>
);
}
......@@ -75,7 +89,10 @@ Export.propTypes = {
selectedValue: PropTypes.string.isRequired,
// A callback to be called when the select value changes.
onChange: PropTypes.func.isRequired
onChange: PropTypes.func.isRequired,
// A callback to be called when the user creates a category.
onCreateCategory: PropTypes.func
};
export default Export;
......@@ -2,6 +2,7 @@ import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import CategorySelect from './category-select';
import { generateColor } from '../ui/color-picker';
import { actions } from '../../store';
......@@ -16,6 +17,15 @@ const EditableCategorySelect = connect(
value,
props.selectedValue
);
},
onCreateCategory(option) {
let { label } = option;
actions.createCategory(
dispatch,
{ title: label, color: generateColor() },
props.operationId,
props.value
);
}
};
}
......
......@@ -33,7 +33,7 @@ function generatePrimaryColor(ranges) {
return Math.floor(Math.random() * (high - low)) + low;
}
function generateColor() {
export function generateColor() {
// Ranges of bright colors
let ranges = [[100, 255], [50, 200], [10, 100]];
......
......@@ -168,7 +168,8 @@
"assign_to_current_month": "Current",
"assign_to_following_month": "Following",
"no_type_found": "No matching type found.",
"no_category_found": "No matching category found."
"no_category_found": "No matching category found.",
"create_category": "Click or hit \"Enter\" to create the category \"%{label}\"."
},
"budget": {
"amount": "Amount",
......
......@@ -168,7 +168,8 @@
"assign_to_current_month": "Courant",
"assign_to_following_month": "Suivant",
"no_type_found": "Aucun type correspondant.",
"no_category_found": "Aucune catégorie correspondant."
"no_category_found": "Aucune catégorie correspondant.",
"create_category": "Cliquer ou taper sur \"Entrée\" pour créer la catégorie \"%{label}\"."
},
"budget": {
"amount": "Montant",
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment