How can I create a button in an administration module which calls an api request?

Question

I want to extend an administration module with a button base component. On click on this button it should call an api request. How can I reach this? More precisely I have a button base component in the administration and want to add an action to it. Do I need a service or a controller or neither of them? How can I add an action to my button to call the desired method? I don't know and I didn't find something like that in the shopware documentation.

Can someone help me please?

Answer 1

First of all, please, study the documentation on Vue. This is very basic knowledge required to do anything with Vue and isn't Shopware specific at all.

Going to assume you mean a request to any admin api endpoint, except the repository operations which you should inject and use the repositoryFactory service for.

const initContainer = Shopware.Application.getContainer('init');
const headers = {
    Accept: 'application/vnd.api+json',
    Authorization: `Bearer ${Shopware.Service(
        'loginService'
    ).getToken()}`,
    'Content-Type': 'application/json',
};

const endpoint = 'api/some/endpoint';
initContainer.httpClient.get(endpoint, { headers });
initContainer.httpClient.post(endpoint, { someParam: true }, { headers });
initContainer.httpClient.patch(endpoint, { someParam: true }, { headers });
initContainer.httpClient.delete(endpoint, { data: { id: '...' }, headers });

That code would be part of a method that is called on the click event of an element.