dev-ui.zeebe.components.zeebe-process-deploy-dialog.js Maven / Gradle / Ivy

Go to download
import { LitElement, html } from 'lit';
import { JsonRpc } from 'jsonrpc';
import { notifier } from 'notifier';
import { dialogRenderer, dialogFooterRenderer } from '@vaadin/dialog/lit.js';
import {ref, createRef} from 'lit/directives/ref.js';
import {when} from 'lit/directives/when.js';
import '@vaadin/upload';

export class ZeebeProcessDeployDialog extends LitElement {


    static properties = {
        _opened: {state: true},
        context: {},
        _xml: {state: true},
        _name: {state: true},
        _b: { state: true},
    }

    _uploadRef = createRef();

    connectedCallback() {
        super.connectedCallback();
        this._opened = false;
        this.jsonRpc = new JsonRpc(this.context.extension);
        this._name = '';
        this._xml = null;
        this._b = true;
    }

    open() {
        this._opened = true;
        this._name = '';
        this._xml = null;
        this._b = true;
        if (this._uploadRef.value) {
            this._uploadRef.value.value = null;
        }
    }

    render() {
        return html`
             {this._opened = e.detail.value;}}
                           ${dialogRenderer(() => this._render(), [this._name, this._b])}
                           ${dialogFooterRenderer(() => this._footer(), [this._b])}
            >
            
        `;
    }

    _footer() {
        return html`
            Cancel
            Deploy
        `;
    }

    _close() {
        this._opened = false
    }

    _render() {
        return html`
            
                Upload File...
                 this._uploadFile(e)}/>
                ${this._name}
            
        `;
    }

    _uploadFile(e) {
        let files = e.target.files;
        this._b = true;
        let reader = new FileReader();
        reader.onload = (e) => {
            this._xml = e.target.result;
            this._b = false;
        }
        reader.readAsText(files[0]);
        this._name = files[0].name;
    }

    _action() {
        this.jsonRpc.deployProcess({name: this._name, xml: this._xml})
            .then(response => {
                console.log(response);
                this._close();
            })
            .catch(e => {
                console.log(e);
                notifier.showErrorMessage('Deploy process error: ' + e.error.code + ' detail: ' + e.error.message, null);
            });
    }
}

customElements.define('zeebe-process-deploy-dialog', ZeebeProcessDeployDialog);