summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--app/assets/javascripts/vue_pipelines_index/stage.js.es656
1 files changed, 7 insertions, 49 deletions
diff --git a/app/assets/javascripts/vue_pipelines_index/stage.js.es6 b/app/assets/javascripts/vue_pipelines_index/stage.js.es6
index a25c8d72e3f..f075a995846 100644
--- a/app/assets/javascripts/vue_pipelines_index/stage.js.es6
+++ b/app/assets/javascripts/vue_pipelines_index/stage.js.es6
@@ -5,72 +5,31 @@
gl.VueStage = Vue.extend({
data() {
return {
- request: false,
+ count: 0,
builds: '',
spinner: '<span class="fa fa-spinner fa-spin"></span>',
};
},
props: ['stage', 'svgs', 'match'],
methods: {
- fetchBuilds(e) {
- /**
- This is a very interesting UI problem
- Essentially we have to clear builds on blur no matter what
- This was preventing turbolinks to make the request to the link clicked
- Vue will always look at the VDOM element which is the button
-
- It has a special attribute 'aria-expanded':
- - which will let us know if it is expanded
- - once the build link is clicked
- - when someone clicks outside of the dropdown
-
- In order for this to work:
- - we check that the event has the correct aria attribute
- - we make sure that if it does, we check where the event is on the DOM
- - we also check to see if the event is on the DOM or the native browser client
- */
-
- const areaExpanded = e.currentTarget.attributes['aria-expanded'];
-
- if (areaExpanded && (areaExpanded.textContent === 'true')) {
- const related = e.relatedTarget;
- if (!related && e.sourceCapabilities) {
- return this.clearBuilds();
- } else if (!related && e.sourceCapabilities === null) {
- return null;
- } else if (!related && e.sourceCapabilities === undefined) {
- this.request = false;
- return null;
- } else if (!related.parentElement) {
- return this.clearBuilds();
- } else if (~related.parentElement.parentElement.className.indexOf('js-builds-dropdown-container')) {
- return null;
- }
- }
-
- if (this.request) return this.clearBuilds();
-
+ fetchBuilds() {
+ if (this.count > 0) return null;
return this.$http.get(this.stage.dropdown_path)
.then((response) => {
- this.request = true;
+ this.count += 1;
this.builds = JSON.parse(response.body).html;
}, () => {
const flash = new Flash('Something went wrong on our end.');
- this.request = false;
return flash;
});
},
- clearBuilds() {
- this.builds = '';
- this.request = false;
- },
},
computed: {
buildsOrSpinner() {
- return this.request ? this.builds : this.spinner;
+ return this.builds ? this.builds : this.spinner;
},
dropdownClass() {
- if (this.request) return 'js-builds-dropdown-container';
+ if (this.builds) return 'js-builds-dropdown-container';
return 'js-builds-dropdown-loading builds-dropdown-loading';
},
buildStatus() {
@@ -91,8 +50,7 @@
template: `
<div>
<button
- @click='fetchBuilds($event)'
- @blur='fetchBuilds($event)'
+ @click='fetchBuilds'
:class="triggerButtonClass"
:title='stage.title'
data-placement="top"