-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Sort-Desc not working for Album/Artist Name #8
Comments
I just tested it and when the export function AlbumList() {
return (
<List>
<Datagrid rowClick="show">
<TextField source="id" />
<TextField source="Title" />
<ReferenceField
label="Artist Name"
source="ArtistId"
reference="artists"
link="show"
>
<TextField source="Name" />
</ReferenceField>
<EditButton />
</Datagrid>
</List>
);
} I will find a solution |
Sorting albums by Artist nameI am using the list component to show a list of albums. export function AlbumList() {
return (
<List>
<Datagrid rowClick="show">
<TextField source="id" />
<TextField source="Title" />
<ReferenceField
label="Artist Name"
source="ArtistId"
reference="artists"
link="show"
sortBy="Name"
>
<TextField source="Name" />
</ReferenceField>
<EditButton />
</Datagrid>
</List>
);
} This component makes two API calls,
The problemThe issue is that, React admin allows sorting only in the <ReferenceField
label="Artist Name"
source="ArtistId"
reference="artists"
link="show"
sortBy="Name"
>
<TextField source="Name" />
</ReferenceField> But adding the //THERE IS NO NAME KEY IN THE API RESPONSE
{
"data": [
{
"AlbumId": 1,
"Title": "For Those About To Rock We Salute You",
"ArtistId": 3
},
]
} But if i pass the
{
"data": [
{
"AlbumId": 1,
"Title": "For Those About To Rock We Salute You",
"ArtistId": 3,
"ArtistId_data": {
"ArtistId": 3,
"Name": "Aerosmith"
}
},
{
"AlbumId": 2,
"Title": "Balls to the Wall",
"ArtistId": 2,
"ArtistId_data": {
"ArtistId": 2,
"Name": "Accept"
}
},
]
}
The main problem here is that i can't customize the getList: (resource: string, params: any) => {
const { page, perPage } = params.pagination;
let { field, order } = params.sort
const query = {
_page: page,
_limit: perPage,
_ordering: ordering,
_filters: filter ? filter : undefined,
_extend: 'ArtistId' //
};
const url = `${apiUrl}/${resource}/rows?${stringify(query)}`;
return axios.get(url).then((response) => {
//API response
)}
}, |
What can't you customize the getList provider? |
Sorry for my language choice, it might be customized, what i meant to say was, i couldn't figure out how to customize it The issue is that the const { page, perPage } = params.pagination;
let { field, order } = params.sort
const query = {
_page: page,
_limit: perPage,
_ordering: ordering,
_filters: filter ? filter : undefined,
_extend: 'ArtistId' // manually add ArtistId
};
const url = `${apiUrl}/${resource}/rows?${stringify(query)}`; This will throw a getList: (resource: string, params: any) => {
const { page, perPage } = params.pagination;
let { field, order } = params.sort
//manually add an _extend key
let _extend = undefined
if(resource === "albums") {
_extend = "ArtistId"
}
const query = {
_page: page,
_limit: perPage,
_ordering: ordering,
_filters: filter ? filter : undefined,
_extend //
};
const url = `${apiUrl}/${resource}/rows?${stringify(query)}`;
return axios.get(url).then((response) => {
//API response
)}
}, |
Sure. I'm no JS expert but this could be it.
|
ok thank you. setting up the let extend = undefined
if (resource === "albums") {
extend = "ArtistId"
}
const query = {
_page: page,
_limit: perPage,
_ordering: ordering,
_filters: filter ? filter : undefined,
_extend: extend
}; |
UpdateAll of the features are working well, except for the filtering feature, i am facing the same problem as the sorting issue The
const trackFilters = [
<TextInput label="Id" source="TrackId" alwaysOn />,
<TextInput label="Name" source="Name" />,
<TextInput label="Album Name" source="AlbumId" />,
<TextInput label="Genre" source="GenreId" />,
<TextInput label="Media type" source="MediaTypeId" />,
];
export function TrackList() {
return (
<List filters={trackFilters}>
<Datagrid rowClick="show">
<TextField source="id" />
<TextField source="Name" />
<ReferenceField
label="Album Name"
source="AlbumId"
reference="albums"
link="show"
>
<TextField source="Title" />
</ReferenceField>
<ReferenceField
label="Genre"
source="GenreId"
reference="genres"
link="show"
>
<TextField source="Name" />
</ReferenceField>
<ReferenceField
label="Media type"
source="MediaTypeId"
reference="media_types"
link="show"
>
<TextField source="Name" />
</ReferenceField>
<TextField source="Composer" />
<TextField source="Milliseconds" />
<TextField source="Bytes" />
<TextField source="UnitPrice" />
<EditButton />
</Datagrid>
</List>
);
} The problemThe only provider which will perform filtering is the //GET: localhost:8000/api/tables/tracks/rows
{
"data": [
{
"TrackId": 1,
"Name": "For Those About To Rock (We Salute You)",
"AlbumId": 1,
"MediaTypeId": 1,
"GenreId": 1,
"Composer": "Angus Young, Malcolm Young, Brian Johnson",
"Milliseconds": 3,
"Bytes": 11170334,
"UnitPrice": 0.99
},
]
} I have used the //localhost:8000/api/tables/tracks/rows?_extend=AlbumId,GenreId,MediaTypeId
{
"data": [
{
"TrackId": 1,
"Name": "For Those About To Rock (We Salute You)",
"AlbumId": 1,
"MediaTypeId": 1,
"GenreId": 1,
"Composer": "Angus Young, Malcolm Young, Brian Johnson",
"Milliseconds": 3,
"Bytes": 11170334,
"UnitPrice": 0.99,
"AlbumId_data": {
"AlbumId": 1,
"Title": "For Those About To Rock We Salute You",
"ArtistId": 3
},
"GenreId_data": {
"GenreId": 1,
"Name": "Rock 2"
},
"MediaTypeId_data": {
"MediaTypeId": 1,
"Name": "MPEG audio file"
}
},
]
} So for example, if the user wants to filter the tracks by their The same approach was working fine for the sorting but not for the filtering. I will keep working on it |
I'm in the Albums listing. I can sort by artist name:
![image](https://user-images.githubusercontent.com/1108513/205858999-b9b3685c-9271-48d6-b066-73779663b9a6.png)
Note, in the above it did look like they were sorted by AlbumId ascending, but id:
34
demonstrates that's not what is happening.But, if I try to reverse that sort, the items are sorted by
![image](https://user-images.githubusercontent.com/1108513/205859333-cdb596a9-7962-485d-9ce9-d255c258ac89.png)
AlbumId
descending, they are in reverseAlbumId
order:The text was updated successfully, but these errors were encountered: