import Vue from 'vue'; import Flash from '../flash'; import PipelinesMediator from './pipeline_details_mediatior'; import pipelineGraph from './components/graph/graph_component.vue'; import pipelineHeader from './components/header_component.vue'; import eventHub from './event_hub'; document.addEventListener('DOMContentLoaded', () => { const dataset = document.querySelector('.js-pipeline-details-vue').dataset; const mediator = new PipelinesMediator({ endpoint: dataset.endpoint }); mediator.fetchPipeline(); // eslint-disable-next-line new Vue({ el: '#js-pipeline-graph-vue', components: { pipelineGraph, }, data() { return { mediator, }; }, render(createElement) { return createElement('pipeline-graph', { props: { isLoading: this.mediator.state.isLoading, pipeline: this.mediator.store.state.pipeline, }, }); }, }); // eslint-disable-next-line new Vue({ el: '#js-pipeline-header-vue', components: { pipelineHeader, }, data() { return { mediator, }; }, created() { eventHub.$on('headerPostAction', this.postAction); }, beforeDestroy() { eventHub.$off('headerPostAction', this.postAction); }, methods: { postAction(action) { this.mediator.service.postAction(action.path) .then(() => this.mediator.refreshPipeline()) .catch(() => new Flash('An error occurred while making the request.')); }, }, render(createElement) { return createElement('pipeline-header', { props: { isLoading: this.mediator.state.isLoading, pipeline: this.mediator.store.state.pipeline, }, }); }, }); });