diff options
Diffstat (limited to 'app/assets/javascripts/ide')
3 files changed, 29 insertions, 15 deletions
diff --git a/app/assets/javascripts/ide/components/jobs/list.vue b/app/assets/javascripts/ide/components/jobs/list.vue index fd6bfdf86d0..bdd0364c9b9 100644 --- a/app/assets/javascripts/ide/components/jobs/list.vue +++ b/app/assets/javascripts/ide/components/jobs/list.vue @@ -1,4 +1,5 @@ <script> +import { mapActions } from 'vuex'; import LoadingIcon from '../../../vue_shared/components/loading_icon.vue'; import Stage from './stage.vue'; @@ -17,6 +18,9 @@ export default { required: true, }, }, + methods: { + ...mapActions('pipelines', ['fetchJobs', 'toggleStageCollapsed']), + }, }; </script> @@ -32,6 +36,8 @@ export default { v-for="stage in stages" :key="stage.id" :stage="stage" + @fetch="fetchJobs" + @toggleCollapsed="toggleStageCollapsed" /> </template> </div> diff --git a/app/assets/javascripts/ide/components/jobs/stage.vue b/app/assets/javascripts/ide/components/jobs/stage.vue index 370bb61bae8..5b24bb1f5a7 100644 --- a/app/assets/javascripts/ide/components/jobs/stage.vue +++ b/app/assets/javascripts/ide/components/jobs/stage.vue @@ -1,5 +1,4 @@ <script> -import { mapActions } from 'vuex'; import tooltip from '../../../vue_shared/directives/tooltip'; import Icon from '../../../vue_shared/components/icon.vue'; import CiIcon from '../../../vue_shared/components/ci_icon.vue'; @@ -38,16 +37,17 @@ export default { return this.stage.jobs.length; }, }, - created() { - this.fetchJobs(this.stage); - }, mounted() { const { stageTitle } = this.$refs; this.showTooltip = stageTitle.scrollWidth > stageTitle.offsetWidth; + + this.$emit('fetch', this.stage); }, methods: { - ...mapActions('pipelines', ['fetchJobs', 'toggleStageCollapsed']), + toggleCollapsed() { + this.$emit('toggleCollapsed', this.stage.id); + }, }, }; </script> @@ -61,7 +61,7 @@ export default { :class="{ 'border-bottom-0': stage.isCollapsed }" - @click="toggleStageCollapsed(stage.id)" + @click="toggleCollapsed" > <ci-icon :status="stage.status" diff --git a/app/assets/javascripts/ide/stores/modules/pipelines/mutations.js b/app/assets/javascripts/ide/stores/modules/pipelines/mutations.js index 38459dfbe77..3c50279642b 100644 --- a/app/assets/javascripts/ide/stores/modules/pipelines/mutations.js +++ b/app/assets/javascripts/ide/stores/modules/pipelines/mutations.js @@ -39,20 +39,28 @@ export default { } }, [types.REQUEST_JOBS](state, id) { - const stage = state.stages.find(s => s.id === id); - stage.isLoading = true; + state.stages = state.stages.map(stage => ({ + ...stage, + isLoading: stage.id === id ? true : stage.isLoading, + })); }, [types.RECEIVE_JOBS_ERROR](state, id) { - const stage = state.stages.find(s => s.id === id); - stage.isLoading = false; + state.stages = state.stages.map(stage => ({ + ...stage, + isLoading: stage.id === id ? false : stage.isLoading, + })); }, [types.RECEIVE_JOBS_SUCCESS](state, { id, data }) { - const stage = state.stages.find(s => s.id === id); - stage.isLoading = false; - stage.jobs = data.latest_statuses.map(normalizeJob); + state.stages = state.stages.map(stage => ({ + ...stage, + isLoading: stage.id === id ? false : stage.isLoading, + jobs: data.latest_statuses.map(normalizeJob), + })); }, [types.TOGGLE_STAGE_COLLAPSE](state, id) { - const stage = state.stages.find(s => s.id === id); - stage.isCollapsed = !stage.isCollapsed; + state.stages = state.stages.map(stage => ({ + ...stage, + isCollapsed: stage.id === id ? !stage.isCollapsed : stage.isCollapsed, + })); }, }; |