Commit 8c7ce4f0 authored by Nicolas Frandeboeuf's avatar Nicolas Frandeboeuf Committed by Nicolas Frandeboeuf

Budgets: sort by category name on the client-side

parent e882ff68
import React from 'react'; import React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import moment from 'moment'; import moment from 'moment';
import { createSelector } from 'reselect';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { get, actions } from '../../store'; import { get, actions } from '../../store';
...@@ -72,6 +73,21 @@ class Budget extends React.Component { ...@@ -72,6 +73,21 @@ class Budget extends React.Component {
budgetsToShow = budgetsToShow.filter(budget => budget.threshold !== 0); budgetsToShow = budgetsToShow.filter(budget => budget.threshold !== 0);
} }
budgetsToShow = budgetsToShow.slice().sort((prev, next) => {
let prevName = this.props.categoriesNamesMap.get(prev.categoryId).toUpperCase();
let nextName = this.props.categoriesNamesMap.get(next.categoryId).toUpperCase();
if (prevName < nextName) {
return -1;
}
if (prevName > nextName) {
return 1;
}
return 0;
});
items = budgetsToShow.map(budget => { items = budgetsToShow.map(budget => {
let catOps = operations.filter(op => budget.categoryId === op.categoryId); let catOps = operations.filter(op => budget.categoryId === op.categoryId);
let amount = catOps.reduce((acc, op) => acc + op.amount, 0); let amount = catOps.reduce((acc, op) => acc + op.amount, 0);
...@@ -216,6 +232,9 @@ Budget.propTypes = { ...@@ -216,6 +232,9 @@ Budget.propTypes = {
// The list of budgets. // The list of budgets.
budgets: PropTypes.array, budgets: PropTypes.array,
// A map of categories with the id as key and the title as value.
categoriesNamesMap: PropTypes.object,
// The list of current operations. // The list of current operations.
operations: PropTypes.array.isRequired, operations: PropTypes.array.isRequired,
...@@ -230,6 +249,18 @@ Budget.propTypes = { ...@@ -230,6 +249,18 @@ Budget.propTypes = {
periods: PropTypes.array.isRequired periods: PropTypes.array.isRequired
}; };
const categoriesNamesSelector = createSelector(
state => get.categoriesButNone(state),
cats => {
let categoriesNamesMap = new Map();
for (let cat of cats) {
categoriesNamesMap.set(cat.id, cat.title);
}
return categoriesNamesMap;
}
);
const Export = connect( const Export = connect(
(state, ownProps) => { (state, ownProps) => {
let currentAccountId = ownProps.match.params.currentAccountId; let currentAccountId = ownProps.match.params.currentAccountId;
...@@ -278,6 +309,7 @@ const Export = connect( ...@@ -278,6 +309,7 @@ const Export = connect(
year: selectedYear, year: selectedYear,
month: selectedMonth, month: selectedMonth,
budgets, budgets,
categoriesNamesMap: categoriesNamesSelector(state),
operations, operations,
periods, periods,
currentAccountId, currentAccountId,
......
...@@ -39,10 +39,8 @@ export async function getByYearAndMonth(req, res) { ...@@ -39,10 +39,8 @@ export async function getByYearAndMonth(req, res) {
let budgets = await Budget.byYearAndMonth(userId, year, month); let budgets = await Budget.byYearAndMonth(userId, year, month);
// Ensure there is a budget for each category // Ensure there is a budget for each category
let categoriesNamesMap = new Map();
let categories = await Category.all(userId); let categories = await Category.all(userId);
for (let cat of categories) { for (let cat of categories) {
categoriesNamesMap.set(cat.id, cat.title);
if (!budgets.find(b => b.categoryId === cat.id)) { if (!budgets.find(b => b.categoryId === cat.id)) {
// Retrieve the last threshold used for this category instead of defaulting to 0. // Retrieve the last threshold used for this category instead of defaulting to 0.
// "last" here means "last in time" not last entered (TODO: fix it when we'll be // "last" here means "last in time" not last entered (TODO: fix it when we'll be
...@@ -74,22 +72,6 @@ export async function getByYearAndMonth(req, res) { ...@@ -74,22 +72,6 @@ export async function getByYearAndMonth(req, res) {
} }
} }
// Sort by categories titles
budgets.sort((prev, next) => {
let prevName = categoriesNamesMap.get(prev.categoryId).toUpperCase();
let nextName = categoriesNamesMap.get(next.categoryId).toUpperCase();
if (prevName < nextName) {
return -1;
}
if (prevName > nextName) {
return 1;
}
return 0;
});
res.status(200).json({ res.status(200).json({
year, year,
month, month,
......
Markdown is supported
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