JarCasting
multipart-payload-editor
An AMF powered multipart payload editor for the HTTP request editor.
<multipart-payload-editor></multipart-payload-editor>
Version compatibility
This version only works with AMF model version 2 (AMF parser >= 4.0.0). For compatibility with previous model version use 3.x.x version of the component.
Usage
Installation
npm install --save @advanced-rest-client/multipart-payload-editor
In an html file
<html>
<head>
<script type="module">
import '@advanced-rest-client/multipart-payload-editor/multipart-payload-editor.js';
</script>
</head>
<body>
<multipart-payload-editor></multipart-payload-editor>
</body>
</html>
In a LitElement
import { LitElement, html } from 'lit-element';
import '@api-components/multipart-payload-editor/multipart-payload-editor.js';
class SampleElement extends PolymerElement {
render() {
return html`
<multipart-payload-editor
.model="${this.modelValue}"
@value-changed="${this._handleValue}"
@model-changed="${this._handleModel}"></multipart-payload-editor>
`;
}
_handleValue(e) {
this.headersValue = e.detail.value;
}
_handleModel(e) {
this.modelValue = e.detail.value;
}
}
customElements.define('sample-element', SampleElement);
Generating view model from AMF model
When you have API model generated by AMF parser you can use api-view-model-transformer element to produce view model for the editor. This element produces common model for query parametrs, URI parameters, body, and headers.
<api-view-model-transformer @view-model-changed="${this._viewModelChanged}"></api-view-model-transformer>
<multipart-payload-editor></multipart-payload-editor>
<script>
{
const api = await generateApiModel();
const endpoint = '/api-endpoint';
const operation = 'GET';
const payloadModelArray = getOperationPayloadFromModel(api, endpoint, operation); // some abstract method
const transformer = document.querySelector('api-view-model-transformer');
transformer.api = api; // This is required to compute ld+json keys!
const viewModel = transformer.computeViewModel(headersModelArray);
document.querySelector('multipart-payload-editor').model = viewModel;
}
</script>
Development
git clone https://github.com/advanced-rest-client/multipart-payload-editor
cd multipart-payload-editor
npm install
Running the demo locally
npm start
Running the tests
npm test
API components
This components is a part of API components ecosystem
