existdb-package-install-action.html

<!--
`existdb-package-action`
implements an interaction with the package repository

@demo demo/index.html 
-->

<dom-module id="existdb-package-install-action">
    <template>
        <style>
            :host {
                display: block;

                --paper-icon-button: {
                    color: var(--paper-blue-700);
                }
            }
        </style>

        <iron-ajax handle-as="text"
                   id="installPackage" method="post"
                   on-error="_handleError" on-response="_handleResponse"
                   url="../packageservice/packages/action"
                   verbose
                   with-credentials></iron-ajax>


        <paper-icon-button class="install" icon="file-download" id="install" on-click="submit"
                           title="download and install latest version"></paper-icon-button>
        <form action="" id="installform" is="iron-form" method="post">
            <input name="package-url" type="hidden" value="{{url}}"/>
            <input name="abbrev" type="hidden" value="{{abbrev}}"/>
            <input name="version" type="hidden" value="{{version}}"/>
            <input name="action" type="hidden" value="install"/>
            <input name="type" type="hidden" value="{{type}}"/>
        </form>
    </template>

    <script>
        class ExistdbPackageInstallAction extends Polymer.Element {

            static get is() {
                return 'existdb-package-install-action';
            }

            static get properties() {
                return {
                    url: {
                        type: String,
                        reflectToAttribute: true
                    },
                    abbrev: {
                        type: String,
                        reflectToAttribute: true
                    },
                    action: {
                        type: String,
                        reflectToAttribute: true
                    },
                    version: {
                        type: String,
                        reflectToAttribute: true
                    },
                    type: {
                        type: String,
                        reflectToAttribute: true
                    }
                };
            }

            constructor() {
//                console.log('constructor')
                super();
            }

            connectedCallback() {
                super.connectedCallback();

//                this.$.install.addEventListener('tap', e => this.submit);
                this.addEventListener('iron-form-response', e => this.handleResponse);
                this.addEventListener('iron-form-error', e => this.handleError);

            }

            submit(e) {
//                console.log("install action submit ",e);
                e.stopPropagation();
                e.preventDefault();
                this.dispatchEvent(new CustomEvent('package-install-started', {
                    bubbles: true,
                    composed: true,
                    detail: {}
                }));
            }

            install() {
                /*
                                console.log('install action install');
                                console.log('install action install url ', this.url);
                                console.log('install action install version ', this.version);
                */
                this.$.installPackage.params = {
                    "package-url": this.url,
                    "action": "install",
                    "abbrev": this.abbrev,
                    "version": this.version,
                };
                this.$.installPackage.generateRequest();
            }

            _handleResponse(data) {
//                console.log("response: ", data);
//                console.log("install response: ", JSON.parse(this.$.installPackage.lastResponse).err);

                var error = JSON.parse(this.$.installPackage.lastResponse).error;
                if (error != undefined) {
                    this.dispatchEvent(new CustomEvent('package-install-error', {
                        bubbles: true,
                        composed: true,
                        detail: {error: error}
                    }));
                } else {
                    this.dispatchEvent(new CustomEvent('package-installed', {
                        bubbles: true,
                        composed: true,
                        detail: {abbrev: this.abbrev}
                    }));
                }
            }

            // this is likely never fired as server responds with a 200 status code always
            _handleError(e) {
//                console.log("error: ", e)
                this.dispatchEvent(new CustomEvent('package-install-error', {
                    bubbles: true,
                    composed: true,
                    detail: {error: e.detail}
                }));

            }


        }

        window.customElements.define(ExistdbPackageInstallAction.is, ExistdbPackageInstallAction);

    </script>
</dom-module>