Customizing the Admin UI
Opened this issue · 2 comments
Describe the bug
I'm trying to add a new button to the action bar in the sellers page. This is the code I have:
// dependencies
import { addActionBarItem } from '@vendure/admin-ui/core';
// utils
import { map } from 'rxjs/operators';
export default [
addActionBarItem({
id: 'custom-action',
label: 'custom-action,
locationId: 'seller-detail',
buttonColor: 'primary',
buttonStyle: 'outline',
buttonState(context) {
return context.entity$.pipe(
map(seller => {
console.log('SELLER --> ', seller);
return seller?.name !== '' && seller?.email !== '' && seller?.iban !== ''
? { disabled: false, visible: true }
: { disabled: true, visible: true };
}),
);
},
onClick(event, context) {
context.entity$.subscribe(entity => {
if (entity) {
console.log('ENTITY --> ', entity);
// Handle entity data
} else {
console.log('ENTITY is undefined');
// Handle undefined
}
});
},
}),
];
The problem is that entity is always undefined.
My goals are:
- Check if the seller entity has the fields name, iban and email filled, and then the button will be enabled.
- When clicking the button I need to call my service using the injector, or calling a mutation.
To Reproduce
Steps to reproduce the behavior:
- Follow the documentation in https://docs.vendure.io/guides/extending-the-admin-ui/add-actions-to-pages/#using-onclick
- Add an action bar button in the sellers page
- Add the onClick function
- Try to access the entity
- The entity is undefined
Expected behavior
The entitity shouldn't be undefined and we should be able to see its data.
Environment (please complete the following information):
- @vendure/core version: 2.2.6
- Nodejs version: 21.0.6
- Database (mysql/postgres etc): 15.7
Based on this: https://docs.vendure.io/guides/extending-the-admin-ui/add-actions-to-pages/. I assume (without testing) you need to set the property buttonState instead of declaring it as function. So more like this:
buttonState: context => {
return context.entity$.pipe(
map(seller => {
console.log('SELLER --> ', seller);
return seller?.name !== '' && seller?.email !== '' && seller?.iban !== ''
? { disabled: false, visible: true }
: { disabled: true, visible: true };
}),
);
},
But see this response as a guess
Edit: Fixed typo
I tried to use this buttonState, however I get the same problem:
I don't know if I'm trying to access the wrong object...
If I access a seller that has already been created, I can see the seller data:
![image](https://private-user-images.githubusercontent.com/118457456/345455980-f21b4961-c7b4-4d2c-a708-c58c4a03ecdd.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEyNzI1NjIsIm5iZiI6MTcyMTI3MjI2MiwicGF0aCI6Ii8xMTg0NTc0NTYvMzQ1NDU1OTgwLWYyMWI0OTYxLWM3YjQtNGQyYy1hNzA4LWM1OGM0YTAzZWNkZC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzE4JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcxOFQwMzExMDJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0yZGIxNzNhYTI4OGEzMTRjZDUxNGNjMTE3NzJmNTQ2OTI4MzczZDVlNThmYTNmYmIyMzI4OGEyNWMyOGU2OTllJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.KILDwfnLfHbOWdYJX_IM_78Eh5ayc2TOJJ8N_0u-GGQ)
But I need to be able to access the fields data before the seller is created, because I want to use my custom mutation.