Fetch sum of column - react-admin

Question

I am using React-Admin to create little app for evidence of tools and who borrowed them.
I have table of tools with id, code, name, state atd.
using List to render it.
<List {...props} filters={<ToolFilter />}>
<Datagrid rowClick="edit">
<TextField source="id" />
<TextField source="code" label="Kód" />
<TextField source="name" />
<TextField source="state" />
<NumberField source="free" />
<DateField source="add_time" />
<EditButton />
</Datagrid>
</List>
Than I have table B_tools, that holds data of borrowed tools.
it has id, userId, toolId, durationOfBorrow
What I want to do is to add column to the tools list, that SUMs durationOfBorrow from B_tool table for every tool and render it to list of tools.
for example if I have B_tool table:
id userId toolId durationOfBorrow
1 1 1 7
2 1 1 7
3 2 2 2
4 1 2 2
I need list of tools to look like this:
id code name state durationOfBorrow
1 123 Drill 1 14 (7+7)
2 456 Wrench 1 4 (2+2)
I tried use Querying The API With fetch from React-Admin documentation.
I have prepared route app.get('/api/tools/borrowcount:id', toolController.borrowCount); that shoud return sum of column:
borrowCount(req, res) {
//console.log(req);
const filtry = JSON.parse(req.query.filter);
console.log(filtry);
const options = {
attributes: [
[sequelize.fn('sum', sequelize.col('time')), 'total_time'],
],
raw: true,
where: ({
}),
order:
[]
,
};
if (typeof filtry.id !== "undefined") {
options.where.id = filtry.id;
}
return B_tool
.findAll(options)
//console.log(user);
//res.status(201).send(test);
.then(b_tool => {
//console.log(user.rows);
res.status(200).send(b_tool);
})
.catch(error => res.status(400).send(error));
},
But dont know how to implement it to show it in the tools list.

Answer 1

I got it.
I created element BorrowCount that useQuery api/toolsborrow/:id and returns total_time.
import React from 'react';
import { useQuery, Loading, Error } from 'react-admin';
const BorrowCount = ({ record }) => {
const { data, loading, error } = useQuery({
type: 'getOne',
resource: 'toolsborrow',
payload: { id: record.id }
});
if (loading) return <Loading />;
if (error) return <Error />;
if (!data) return null;
console.log(data);
return (
data[0].total_time
)
};
export default BorrowCount;
In API I call new controller:
app.get('/api/toolsborrow/:id', toolController.borrowCount);
And controller returns SUM of time column where ToolId is id of tool row:
borrowCount(req, res) {
const options = {
attributes: [
[Sequelize.fn('sum', Sequelize.col('time')), 'total_time'],
],
raw: true,
where: ({
ToolId: req.params.id
}),
order:
[]
,
};
return B_tool
.findAll(options)
.then(b_tool => {
res.status(200).send(b_tool);
})
.catch(error => res.status(400).send(error));
},
Finally, I just use this new element BorrowCount in List of tools:
<List {...props} filters={<ToolFilter />}>
<Datagrid rowClick="edit">
<TextField source="id" />
<TextField source="code" label="Kód" />
<TextField source="name" />
<TextField source="state" />
<BorrowCount label="Total_sum"/>
<NumberField source="free" />
<DateField source="add_time" />
<EditButton />
</Datagrid>
</List>
If someone has more elegant solution, please leave it here.