dev-ui.zeebe.zeebe-processes.js Maven / Gradle / Ivy

Go to download
import { LitElement, html } from 'lit';
import { JsonRpc } from 'jsonrpc';
import { columnBodyRenderer } from '@vaadin/grid/lit.js';
import {ref, createRef} from 'lit/directives/ref.js';
import './components/zeebe-table.js';
import './components/zeebe-process-deploy-dialog.js';

export class ZeebeProcesses extends LitElement {

    static properties = {
        _items: {state: true},
        context: {},
        navigation: {},
        _deployDialogOpened: { state: true},
    };

    _processDeployDialogRef = createRef();

    connectedCallback() {
        super.connectedCallback();
        this._deployDialogOpened = false;
        this.jsonRpc = new JsonRpc(this.context.extension);
        this._fetchData();

        this._observer = this.jsonRpc.notifications().onNext(response => {
            if (response.result.event === 'PROCESS') {
                if (response.result.type === 'DEPLOYED') {
                    this._fetchData();
                }
            }
        });
    }

    disconnectedCallback() {
        this._observer.cancel();
        super.disconnectedCallback()
    }

    _fetchData() {
        this.jsonRpc.processes()
            .then(itemResponse => {
                this._items = itemResponse.result.map((item) => ({
                    ...item,
                    searchTerms: `${item.id} ${item.record.value.bpmnProcessId}`,
                }));
            });
    }

    render() {
        return html`
            
                 this._processDeployDialogRef.value.open()}>
                    
                    Deploy process
                
                
                
                
                
                
                
                
            
            
        `;
    }

    _definitionKeyRenderer(item) {
        return html`
             this.navigation({ nav: "process", id: item.id})}>${item.id}
        `;
    }
}

customElements.define('zeebe-processes', ZeebeProcesses);